From c9df686d076ac1062fc5c0f18a80e25934d80ea0 Mon Sep 17 00:00:00 2001 From: Shevchik Igor Date: Mon, 24 Aug 2026 04:28:06 +0000 Subject: [PATCH 1/7] fix(theme): colour every focus outline from the design system's focus token MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #191 reads as an inconsistency — four colours doing one job across the theme files — and the scope agreed was colour only: form stays per component, and the `ring-(--b24ui-border-color)` pattern on inputs is left alone, because there the ring is the field's own border rather than a focus accent. Measuring the four turned it into an accessibility fix. WCAG 2.2 SC 1.4.11 asks 3:1 of a focus indicator; against the background it renders on: outline-primary #2fc6f6 1.99:1 on white fails --ui-color-accent-soft-element-blue #0056bf 2.22:1 on #262626 fails --ui-color-design-outline-focused-stroke 4.21:1 / 4.24:1 passes Seven of the nine outline-coloured sites failed in at least one theme. On chat-reasoning, chat-tool and footer-columns the focus ring is nearly invisible in the light theme, and on accordion, splitter and table it is nearly invisible in the dark one. `outline-primary` is the worst of them because it does not look like a problem: it resolves to `--color-primary`, a legacy Bitrix cyan with no relationship to the design system at all. `--ui-color-design-outline-focused-stroke` is the design system's own name for this — `design/outline/focused/design-outline-focused-stroke` in `design-tokens/app.json` — and it is the only one of the four defined in all four theme contexts, which is why it adapts and the others do not. Two of the nine sites already used what it resolves to in light contexts, so those change name without changing pixels. Two things are deliberately left. The `isAction` link's red focus matches its hover state, and repainting it blue would break the variant rather than fix it; the real defect there is the token having no dark value, filed as #473, which costs that link's hover *text* 4.5:1 as well. And the fifteen `--b24ui-border-color` rings on inputs are out of scope by the agreed reading. Also taken, both design-agnostic and both from upstream: `outline-offset: 0` on `a:focus-visible`, so an inline link's ring is measured from the link rather than landing on the line above; and `overflow: hidden` on every frame of the accordion and collapsible height animations, so content is not drawn outside the box while it collapses. A dead class went with them: `hover:text(` in `link.ts`, missing its dash, so Tailwind generated nothing for it. The correct spelling sits beside it on the same line, so nothing changes. None of this is visible to the suite as it stands — happy-dom neither resolves custom properties nor computes contrast, so a port swapping the token back changes one string in a class list and nothing goes red. `test/utils/focus-accent-token.spec.ts` holds it, including that the token stays defined in every context: a theme pointing at a token no context defines resolves to an invalid declaration, silently, and the outline falls back to the browser's. Resolves #191 Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_012MsMuj8Fic9tjWVjyEyrxc --- .sync/PORTING.md | 14 ++++ src/runtime/index.css | 11 +++ src/runtime/keyframes.css | 15 ++++ src/theme/accordion.ts | 2 +- src/theme/chat-reasoning.ts | 2 +- src/theme/chat-tool.ts | 2 +- src/theme/footer-columns.ts | 2 +- src/theme/link.ts | 4 +- src/theme/page-links.ts | 2 +- src/theme/splitter.ts | 2 +- src/theme/table.ts | 4 +- test/utils/focus-accent-token.spec.ts | 99 +++++++++++++++++++++++++++ 12 files changed, 149 insertions(+), 10 deletions(-) create mode 100644 test/utils/focus-accent-token.spec.ts diff --git a/.sync/PORTING.md b/.sync/PORTING.md index 778c509be..4542a0ed2 100644 --- a/.sync/PORTING.md +++ b/.sync/PORTING.md @@ -493,6 +493,19 @@ material. Reproduce its *intent* in b24ui by editing files under `src/` only. - **a11y** — keep the `axe` test case for the component green. - **Tests** — for every new/changed prop, add a `renderEach` case so a snapshot exercises it; update snapshots with `pnpm run test run -u` when markup changes. +- **A focus outline is coloured by `--ui-color-design-outline-focused-stroke`.** + Upstream colours focus from whatever accent is at hand; this fork has one + token for it, and it is the only candidate defined in all four theme + contexts, which is why it adapts and the alternatives do not. Reapplying an + upstream hunk that reintroduces `outline-primary`, + `--ui-color-accent-soft-element-blue` or `--ui-color-accent-main-primary` on a + `focus-visible:outline-*` reverts an accessibility fix, not a preference: those + measure 1.99:1 on white, 2.22:1 on the dark background, and WCAG 2.2 SC 1.4.11 + asks 3:1 (#191). Guarded by `test/utils/focus-accent-token.spec.ts`. The + `ring-(--b24ui-border-color)` focus pattern on inputs is **not** in scope — + there the ring is the field's own border and follows the component's palette + by design. + - **Tag width caps are relative to the field, never an absolute length.** Upstream's `tagsItemText` / `itemText` are plain `truncate` with no cap; b24ui caps the **tag** at `max-w-[70%]` with `min-w-0`, marks the delete @@ -791,3 +804,4 @@ forward, since every commit between the two would then never be judged. - 2026-08-23 — closed #98 (PR #468) by adding the §6 rule **carry upstream's breaking marker into our subject**, and the matching §7 reviewer check. The issue's other two actions were already done and are recorded elsewhere: the version arithmetic table in `releasing.md` maps any `BREAKING CHANGE` or `!` to a major, with no v2-line exception, and release automation landed as release-please. What was missing is the one step automation cannot supply. release-please derives the bump from the squashed subject, so the marker is now load-bearing in a way it was not when the CHANGELOG was hand-written and a human read the diff — a dropped `!` used to be a cosmetic slip and is now a semver violation that every gate passes. The rule is stated in both directions on purpose, because a port is not a copy: a §2 divergence can absorb a break that upstream had, and this fork's own prop surface can break where upstream's did not. Last reviewed: 2026-08-23. - 2026-08-23 — fix of #342 (PR #470): added the §2 rule **tag width caps are relative to the field**. `max-w-[180px]` on the tag label was ours — upstream is plain `truncate` — and it ellipsised tags that had room to spare, because a constant knows nothing about the field's width or what shares its row. Settled by measuring in Chromium rather than by reading the spec, which was the only way to tell three plausible readings apart: in a 562px field a tag wanting 590px renders at 199px under the old cap, 412px under `max-w-[70%]` with both tags still on one row, and 562px uncapped with the second tag pushed to the next line. The same measurement caught what review had flagged and reading had not — `input-tags.ts`'s root is `inline-flex` with no width, so the percentage was circular there: the field grew to 590px, overflowing its 562px parent, and clipped the label anyway. `max-w-full` on that root fixes both and is now part of the invariant. The guard went through three drafts, each corrected by mutation rather than by review: it credited one slot with a neighbour's class, then passed on its own comment (which contains the string `min-w-0`), then missed both the six per-size `tagsItem` overrides at deeper indentation and the `(prev) => [...]` slot form — an arrow function's parameter list closes before its body opens, so balancing brackets returned `(prev: string)` and nothing else. It ends at a comma at depth zero, and a self-check asserts the scanner matched something before reporting no offenders. Last reviewed: 2026-08-23. - 2026-08-23 — added the §6 rule **name the upstream commit in the subject** and the §7 reviewer check, on the maintainer's request that ported commits be traceable from the changelog. Only the subject reaches `CHANGELOG.md`, so that is the only place the reference can go. Upstream's own first line was the request as originally put and is deliberately not what shipped: their `Slider` is this fork's `Range`, and §1 makes that rename mandatory, so copying their wording would name a component this library does not have — the reference points at the commit and the sentence stays about ours. Enforced by `assert-commit-parses.mjs`, which keys on a new entry appearing in `processed` rather than on the ledger being edited, so the reconciliation commits §6 step 4 requires are unaffected — verified against #467, which passes, and against #466 and #464, which are real ports and are flagged. The same pass extended that guard to reject a type with no `changelog-sections` entry (#437): a breaking commit of an unconfigured type keeps its raw lowercase type as the group title and sorts above every real section, reproduced by running the writer release-please uses. Both checks read `release-please-config.json` and the ledger rather than restating either. Last reviewed: 2026-08-23. +- 2026-08-23 — fix of #191 (PR pending): added the §2 rule **a focus outline is coloured by the focus token**, and took two design-agnostic fixes upstream had shipped alongside — `a:focus-visible { outline-offset: 0 }` in `index.css`, and `overflow: hidden` on every frame of the accordion and collapsible height animations. The issue read as an inconsistency, four colours doing one job across 46 theme files, and the maintainer scoped it to colour only: form stays per component, `ring-*` on inputs untouched. Measuring the four turned it into an accessibility fix. `outline-primary` is not a token at all — it resolves to `--color-primary`, a legacy Bitrix cyan at 1.99:1 against white — and `--ui-color-accent-soft-element-blue` is a dark blue in every context including the dark ones, 2.22:1 against `#262626`; WCAG 2.2 SC 1.4.11 asks 3:1, and seven of the nine outline-coloured sites failed it in at least one theme. `--ui-color-design-outline-focused-stroke` is the design system's own name for this and the only one of the four defined in all four contexts: 4.21:1 light, 4.24:1 dark. Two things were deliberately left: the `isAction` link's red focus, where the colour matches the hover state and the real defect is the token having no dark value (#473), and the fifteen `--b24ui-border-color` focus rings on inputs, where the ring is the field's border rather than a focus accent. A dead `hover:text(` — missing its dash, so Tailwind generated nothing — was removed from `link.ts` on the way past. Last reviewed: 2026-08-23. diff --git a/src/runtime/index.css b/src/runtime/index.css index ce19dbee1..2c47fc9e3 100644 --- a/src/runtime/index.css +++ b/src/runtime/index.css @@ -13,6 +13,17 @@ @variant web (&:where(html[data-platform="web"] *)); @layer base { + /* + * From upstream. Browsers give a focused link's outline the default offset, + * which on an inline link is measured from the text box and lands the ring + * over the line above or below in tight copy. Zero keeps it on the link. + * Only the offset — the colour, width and style stay with whatever rule the + * component's theme sets. + */ + a:focus-visible { + outline-offset: 0; + } + body, .air-custom-bg, /* @deprecate This rule (.sidebar-layout.--inner (not body !)) is deprecated and will be removed in version 3.0.0 */ diff --git a/src/runtime/keyframes.css b/src/runtime/keyframes.css index f0920cd26..9dbe3cae0 100644 --- a/src/runtime/keyframes.css +++ b/src/runtime/keyframes.css @@ -1,39 +1,54 @@ +/* + * `overflow: hidden` on every frame of the height animations, from upstream. + * Reka drives these by animating `height` from or to `0` while the content + * keeps its own height, so without it the content is drawn outside the + * collapsing box for the length of the animation — visible as a flash of text + * over whatever sits below the accordion. + */ @keyframes accordion-up { from { + overflow: hidden; height: var(--reka-accordion-content-height); } to { + overflow: hidden; height: 0; } } @keyframes accordion-down { from { + overflow: hidden; height: 0; } to { + overflow: hidden; height: var(--reka-accordion-content-height); } } @keyframes collapsible-up { from { + overflow: hidden; height: var(--reka-collapsible-content-height); } to { + overflow: hidden; height: 0; } } @keyframes collapsible-down { from { + overflow: hidden; height: 0; } to { + overflow: hidden; height: var(--reka-collapsible-content-height); } } diff --git a/src/theme/accordion.ts b/src/theme/accordion.ts index 76bcff092..6a1d6b389 100644 --- a/src/theme/accordion.ts +++ b/src/theme/accordion.ts @@ -14,7 +14,7 @@ export default { 'min-w-0 group flex-1 flex items-center gap-1.5', 'py-[12px]', 'font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) leading-[20px]', - 'focus-visible:outline-(--ui-color-accent-soft-element-blue)', + 'focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'cursor-pointer' ].join(' '), content: 'motion-safe:data-[state=open]:animate-[accordion-down_200ms_var(--ease-out)] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_var(--ease-out)] overflow-hidden focus:outline-none', diff --git a/src/theme/chat-reasoning.ts b/src/theme/chat-reasoning.ts index 61b85f7c6..6662ff71c 100644 --- a/src/theme/chat-reasoning.ts +++ b/src/theme/chat-reasoning.ts @@ -16,7 +16,7 @@ export default { 'disabled:cursor-default', 'disabled:hover:text-muted', 'hover:text-default', - 'focus-visible:outline-offset-2 focus-visible:outline-primary', + 'focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'transition-colors' ].join(' '), leading: 'relative size-5 shrink-0', diff --git a/src/theme/chat-tool.ts b/src/theme/chat-tool.ts index 9522e4c05..500bc370a 100644 --- a/src/theme/chat-tool.ts +++ b/src/theme/chat-tool.ts @@ -19,7 +19,7 @@ export default { 'disabled:cursor-default', 'disabled:hover:text-muted', 'hover:text-default', - 'focus-visible:outline-offset-2 focus-visible:outline-primary', + 'focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'transition-colors' ].join(' '), leading: 'relative shrink-0 size-5', diff --git a/src/theme/footer-columns.ts b/src/theme/footer-columns.ts index 90ad14c55..4b01fe2c0 100644 --- a/src/theme/footer-columns.ts +++ b/src/theme/footer-columns.ts @@ -12,7 +12,7 @@ export default { label: 'text-(length:--ui-font-size-lg)/[normal] font-(--ui-font-weight-semi-bold)', list: 'mt-6 space-y-4', item: 'relative', - link: 'group text-sm flex items-center gap-1.5 focus-visible:outline-primary', + link: 'group text-sm flex items-center gap-1.5 focus-visible:outline-(--ui-color-design-outline-focused-stroke)', linkLeadingIcon: 'size-5 shrink-0', linkLabel: 'truncate', linkLabelExternalIcon: 'inline-block size-[14px] text-(--ui-color-design-plain-content-icon-secondary)' diff --git a/src/theme/link.ts b/src/theme/link.ts index 20d53407a..bff5a1719 100644 --- a/src/theme/link.ts +++ b/src/theme/link.ts @@ -12,7 +12,7 @@ export default (options: Required) => ({ base: [ 'cursor-pointer', // 'focus-visible:outline-info-text' // fix - 'focus-visible:outline-(--ui-color-accent-main-primary)', + 'focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'focus-visible:outline-1 focus-visible:rounded-[4px]', 'text-start' ].join(' '), @@ -37,7 +37,7 @@ export default (options: Required) => ({ 'border border-x-0 border-t-0 border-dashed', 'text-(--ui-color-design-outline-a1-content) border-b-(--ui-color-design-outline-a1-content)', 'hover:not-disabled:not-aria-disabled:no-underline', - 'hover:text(--ui-color-accent-soft-element-red) hover:not-disabled:not-aria-disabled:text-(--ui-color-accent-soft-element-red) hover:border-b-(--ui-color-accent-soft-element-red)', + 'hover:not-disabled:not-aria-disabled:text-(--ui-color-accent-soft-element-red) hover:border-b-(--ui-color-accent-soft-element-red)', 'focus-visible:outline-(--ui-color-accent-soft-element-red)' ].join(' ') } diff --git a/src/theme/page-links.ts b/src/theme/page-links.ts index f47227b75..2722d6bb1 100644 --- a/src/theme/page-links.ts +++ b/src/theme/page-links.ts @@ -18,7 +18,7 @@ export default { 'group', 'text-(length:--ui-font-size-sm)', 'cursor-pointer', - 'focus-visible:outline-(--ui-color-accent-main-primary)', + 'focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'focus-visible:outline-1', 'focus-visible:rounded-[4px]', 'text-start', diff --git a/src/theme/splitter.ts b/src/theme/splitter.ts index d8951dd86..fec6d4210 100644 --- a/src/theme/splitter.ts +++ b/src/theme/splitter.ts @@ -11,7 +11,7 @@ export default { panel: 'flex', handle: [ 'group relative shrink-0', - 'outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-accent-soft-element-blue)', + 'outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-focused-stroke)', 'data-[panel-resize-handle-enabled=false]:cursor-default' ].join(' ') }, diff --git a/src/theme/table.ts b/src/theme/table.ts index b4c96abd6..4303a7ad4 100644 --- a/src/theme/table.ts +++ b/src/theme/table.ts @@ -19,10 +19,10 @@ export default { 'isolate', '[&>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary)', 'light:[&>tr]:data-[selectable=true]:hover:bg-[#f6f8f9]', - '[&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)', + '[&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke)', '[&>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary)', 'light:[&>tr]:data-[selected=true]:hover:bg-(#eff7d7)', - '[&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)', + '[&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-design-outline-focused-stroke)', '[&>tr]:last:[&>td]:border-b-0', 'divide-y divide-(--ui-color-divider-default)' ].join(' '), diff --git a/test/utils/focus-accent-token.spec.ts b/test/utils/focus-accent-token.spec.ts new file mode 100644 index 000000000..53c15c671 --- /dev/null +++ b/test/utils/focus-accent-token.spec.ts @@ -0,0 +1,99 @@ +import { readFileSync, readdirSync } from 'node:fs' +import { join } from 'node:path' +import { describe, it, expect } from 'vitest' + +/** + * A focus outline is coloured by the design system's focus token, not by + * whatever accent happened to be nearby. + * + * #191 read as an inconsistency — four different colours doing one job. It is + * an accessibility defect. `outline-primary` resolves to `--color-primary`, + * a legacy Bitrix cyan (`#2fc6f6`) that measures **1.99:1** against white, and + * `--ui-color-accent-soft-element-blue` is a dark blue in every context + * including the dark ones, measuring **2.22:1** against `#262626`. WCAG 2.2 + * SC 1.4.11 asks 3:1 of a focus indicator. Seven of the nine outline-coloured + * sites failed it in at least one theme. + * + * `--ui-color-design-outline-focused-stroke` is the design system's own answer, + * named as such in `design-tokens/app.json`, and it is the only one of the four + * defined in all four theme contexts — which is why it adapts and the others do + * not. It measures 4.21:1 light and 4.24:1 dark. + * + * None of that is visible to a snapshot: happy-dom does not resolve custom + * properties or compute contrast, so a port swapping the token back would + * change one string in a class list and nothing would go red. Hence a spec. + */ +const themeDir = join(process.cwd(), 'src/theme') +const FOCUS_TOKEN = '--ui-color-design-outline-focused-stroke' + +/** + * Colours that must not appear on a `focus-visible:outline-*`. + * + * `outline-primary` is listed as a bare alias rather than as a variable + * because that is how it is written; it is the worst of them precisely because + * it does not look like a token at all. + */ +const BANNED = { + 'outline-primary': 'the legacy `--color-primary` cyan, 1.99:1 on white', + '--ui-color-accent-soft-element-blue': 'a dark blue in every context, 2.22:1 on the dark background', + '--ui-color-accent-main-primary': 'the focus token already resolves to this in light contexts — name the token' +} as const + +/** `focus-visible:outline-…` occurrences, with comments stripped. */ +function focusOutlines(source: string): string[] { + return source + .split('\n') + .map(line => line.replace(/\/\/.*$/, '')) + .flatMap(line => line.match(/focus-visible:outline-[^\s'"`]*/g) ?? []) +} + +describe('focus outline colour', () => { + const files = readdirSync(themeDir).filter(f => f.endsWith('.ts')) + + it('finds focus outlines at all, before claiming none of them offend', () => { + // Without this the sweep is one refactor away from being vacuously green. + const total = files.reduce((n, f) => n + focusOutlines(readFileSync(join(themeDir, f), 'utf8')).length, 0) + expect(total, 'the scanner matched nothing — did the theme files change shape?').toBeGreaterThan(5) + }) + + it('never colours a focus outline from an accent that is not the focus token', () => { + const offenders: string[] = [] + + for (const file of files) { + for (const utility of focusOutlines(readFileSync(join(themeDir, file), 'utf8'))) { + for (const [banned, why] of Object.entries(BANNED)) { + // `outline-offset-…` and `outline-none` share the prefix; only a + // colour is in scope, so the banned needle has to appear whole. + if (utility.includes(banned)) offenders.push(`src/theme/${file}: ${utility} — ${why}`) + } + } + } + + expect(offenders, [ + `A focus outline is coloured by \`${FOCUS_TOKEN}\`.`, + 'It is the only one of these defined in all four theme contexts, which is', + 'why it adapts and the others do not. See #191 and .sync/PORTING.md §2.' + ].join('\n')).toEqual([]) + }) + + it('uses the focus token where it colours an outline', () => { + // The sweep above says what must not be there; this says something is. + const users = files.filter(f => readFileSync(join(themeDir, f), 'utf8').includes(`focus-visible:outline-(${FOCUS_TOKEN})`)) + expect(users.length, 'no theme reads the focus token — the consolidation was undone').toBeGreaterThanOrEqual(7) + }) + + it('keeps the token defined in every theme context', () => { + // A theme file pointing at a token no context defines resolves to an + // invalid declaration, silently, and the outline falls back to the UA's. + const tokenDir = join(process.cwd(), 'src/runtime/air-design-tokens') + const contexts = readdirSync(tokenDir).filter(f => /^0\d\d_b24_context_.*\.css$/.test(f)) + expect(contexts.length, 'no theme context files found').toBeGreaterThanOrEqual(4) + + for (const context of contexts) { + expect( + readFileSync(join(tokenDir, context), 'utf8'), + `${context} does not define ${FOCUS_TOKEN}` + ).toContain(`${FOCUS_TOKEN}:`) + } + }) +}) From 9e2648740988911d083ae887e49779294409b0da Mon Sep 17 00:00:00 2001 From: Shevchik Igor Date: Mon, 24 Aug 2026 04:28:55 +0000 Subject: [PATCH 2/7] test(snapshots): regenerate for the focus token MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 436 class-list occurrences across nine components, and nothing else: every changed line carries a `focus-visible:outline-*` class, and the old colours account for the new ones exactly — 208 `soft-element-blue`, 151 `outline-primary`, 77 `accent-main-primary`, against 436 of the focus token. Worth noting what that count says about the shape of the problem. Three colours, one job, and the two that lost the most ground were the two that failed contrast: `outline-primary` in the light theme and `soft-element-blue` in the dark one. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_012MsMuj8Fic9tjWVjyEyrxc --- .../__snapshots__/Accordion.spec.ts.snap | 252 +++++++++--------- .../__snapshots__/ChatReasoning.spec.ts.snap | 20 +- .../__snapshots__/ChatTool.spec.ts.snap | 40 +-- .../__snapshots__/FooterColumns.spec.ts.snap | 242 ++++++++--------- .../__snapshots__/Header.spec.ts.snap | 42 +-- .../__snapshots__/Link.spec.ts.snap | 32 +-- .../__snapshots__/PageLinks.spec.ts.snap | 80 +++--- .../__snapshots__/Splitter.spec.ts.snap | 24 +- .../__snapshots__/Table.spec.ts.snap | 70 ++--- 9 files changed, 401 insertions(+), 401 deletions(-) diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap index c084804b7..7026908fa 100644 --- a/test/components/__snapshots__/Accordion.spec.ts.snap +++ b/test/components/__snapshots__/Accordion.spec.ts.snap @@ -3,7 +3,7 @@ exports[`Accordion > renders with as correctly 1`] = ` "
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -1015,7 +1015,7 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
-
-
-
-