@chenzy-design/svelte 0.1.0

package/dist/collapse/Collapse.svelte

@@ -0,0 +1,406 @@
+<!--
+  Collapse — see specs/components/show/Collapse.spec.md
+  两种用法择一（与 Timeline / Form 复合组件同模式）:
+    - 数据驱动：传 panels 数组（向后兼容，行为完全不变）。
+    - 声明式：不传 panels，改在 children 内写 <Collapse.Panel itemKey header>...</Collapse.Panel>。
+  父子状态经 context.ts 传递：父提供展开态派生函数 + toggle 回调，子 Panel 消费判断自身
+  展开/渲染与点击切换。两模式渲染同一套 .cd-collapse__item 结构，故声明式复用父级全部
+  grid 动画 / 箭头 / 边框样式（样式用 .cd-collapse :global(.cd-collapse__*) 跨子组件作用域）。
+
+  红线遵守:
+  #1 受控 activeKey 不回写 prop：isControlled = $derived(prop !== undefined)，
+     内部 SvelteSet $state 兜底，current = $derived(...)，变更只 onChange（声明式同样经 toggle 落实）。
+  #2 展开状态用本地 SvelteSet $state，不依赖挂载 registry，render 期不读 effect 写入的数组；
+     isActive/shouldRender 为纯派生函数，经 context 传给子 Panel 只读。
+  #3 展开动画用 CSS grid-template-rows 0fr↔1fr 过渡，不 JS 测量 DOM 几何。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import { useId, nextRovingIndex, rovingKeyFromEvent } from '@chenzy-design/core';
+  import type { CollapsePanel } from './types.js';
+  import { setCollapseContext } from './context.js';
+
+  type Size = 'small' | 'default' | 'large';
+  type IconPosition = 'left' | 'right';
+
+  interface Props {
+    panels?: CollapsePanel[];
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    size?: Size;
+    expandIconPosition?: IconPosition;
+    bordered?: boolean;
+    disabled?: boolean;
+    motion?: boolean;
+    /** Header 包裹元素的 aria-level（role=heading），默认 3。 */
+    headingLevel?: number;
+    /** 首次展开后才渲染面板内容 */
+    lazyRender?: boolean;
+    /** 展开过的面板内容保留 DOM（收起后不卸载），与 lazyRender 配合 */
+    keepDOM?: boolean;
+    onChange?: (keys: string[]) => void;
+    /** 某面板被展开后触发（spec §4：on:expand）。 */
+    onExpand?: (detail: { key: string }) => void;
+    /** 某面板被收起后触发（spec §4：on:collapse）。 */
+    onCollapse?: (detail: { key: string }) => void;
+    /** Header 被点击时触发（spec §4：on:headerClick，在 disabled 拦截前发出，可用于埋点）。 */
+    onHeaderClick?: (detail: { key: string; event: MouseEvent }) => void;
+    /** 自定义展开图标，替换默认箭头 SVG；参数为 {isExpanded: boolean}。 */
+    expandIcon?: Snippet<[{ isExpanded: boolean }]>;
+    /**
+     * 数据驱动模式：按 key 渲染面板内容 Snippet<[{ key }]>。
+     * 声明式模式（不传 panels）：内嵌 <Collapse.Panel> 列表，普通 Snippet。
+     */
+    children?: Snippet<[{ key: string }]> | Snippet;
+  }
+
+  let {
+    panels = [],
+    activeKey,
+    defaultActiveKey,
+    accordion = false,
+    size = 'default',
+    expandIconPosition = 'right',
+    bordered = true,
+    disabled = false,
+    motion = true,
+    headingLevel = 3,
+    lazyRender = false,
+    keepDOM = true,
+    onChange,
+    onExpand,
+    onCollapse,
+    onHeaderClick,
+    expandIcon,
+    children,
+  }: Props = $props();
+
+  const idBase = useId('cd-collapse');
+
+  function normalize(value: string | string[] | undefined): string[] {
+    if (value === undefined) return [];
+    return Array.isArray(value) ? value : [value];
+  }
+
+  function getInitialKeys(): SvelteSet<string> {
+    return new SvelteSet(normalize(defaultActiveKey));
+  }
+
+  // 红线 #1: 受控判定 + 内部 SvelteSet 兜底
+  const isControlled = $derived(activeKey !== undefined);
+  // 红线 #2: 本地 SvelteSet $state，不依赖挂载 registry
+  const innerKeys = $state<SvelteSet<string>>(getInitialKeys());
+
+  // 受控时读 prop（归一化），非受控读本地 set
+  const currentKeys = $derived<string[]>(
+    isControlled ? normalize(activeKey) : [...innerKeys],
+  );
+
+  // 记录曾展开过的面板（lazyRender + keepDOM 用）。初值为初始展开集。
+  const everExpanded = $state<SvelteSet<string>>(getInitialEverExpanded());
+  function getInitialEverExpanded(): SvelteSet<string> {
+    return new SvelteSet(normalize(defaultActiveKey ?? activeKey));
+  }
+  // 当前激活的也并入「曾展开」（受控场景：active 推进 everExpanded，effect 内写不在 render 期）。
+  $effect(() => {
+    for (const k of currentKeys) everExpanded.add(k);
+  });
+
+  function isActive(key: string): boolean {
+    return currentKeys.includes(key);
+  }
+
+  // 渲染策略：
+  // - 非 lazyRender：始终渲染（内容常驻，配合 grid 动画）。
+  // - lazyRender + keepDOM：首次展开才渲染，之后保留 DOM。
+  // - lazyRender 非 keepDOM：仅当前展开渲染（收起卸载）。
+  function shouldRender(key: string): boolean {
+    if (!lazyRender) return true;
+    return keepDOM ? everExpanded.has(key) : isActive(key);
+  }
+
+  function toggle(key: string, panelDisabled?: boolean) {
+    if (disabled || panelDisabled) return;
+
+    const isOpen = currentKeys.includes(key);
+    let nextArr: string[];
+    if (isOpen) {
+      nextArr = currentKeys.filter((k) => k !== key);
+    } else if (accordion) {
+      nextArr = [key];
+    } else {
+      nextArr = [...currentKeys, key];
+    }
+
+    // 红线 #1: 受控不回写 prop，仅 onChange；非受控更新本地 set
+    if (!isControlled) {
+      innerKeys.clear();
+      for (const k of nextArr) innerKeys.add(k);
+    }
+    onChange?.(nextArr);
+    // spec §4：展开/收起后分别发出 on:expand / on:collapse（key 级语义事件）。
+    if (isOpen) onCollapse?.({ key });
+    else onExpand?.({ key });
+  }
+
+  // spec §4 on:headerClick：Header 被点击即发出（在 disabled 拦截前，可用于埋点），
+  // 随后再走 toggle（disabled / panelDisabled 在 toggle 内拦截，不影响本事件发出）。
+  function headerClick(event: MouseEvent, key: string, panelDisabled?: boolean) {
+    onHeaderClick?.({ key, event });
+    toggle(key, panelDisabled);
+  }
+
+  const cls = $derived(
+    [
+      'cd-collapse',
+      `cd-collapse--${size}`,
+      `cd-collapse--icon-${expandIconPosition}`,
+      bordered && 'cd-collapse--bordered',
+      disabled && 'cd-collapse--disabled',
+      motion && 'cd-collapse--motion',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  // 声明式优先级低于 panels：仅在未传 panels 时渲染 children 内的 <Collapse.Panel>。
+  const useDeclarative = $derived(panels.length === 0 && children != null);
+
+  // --- roving tabindex（a11y §6 / APG Accordion）：Header 组为单一 Tab 停靠点。 ---
+  // rootEl 普通引用（bind:this），命令式 focus() 用，非 render 期读 DOM；
+  // 声明式 <Collapse.Panel> 也渲染进同一 rootEl，故按 DOM 顺序统一漫游（红线 #2：
+  // 不用 $state 数组收集子项，避免 effect 自循环）。
+  let rootEl = $state<HTMLElement | null>(null);
+  // 当前焦点 Header 的 key；null = 尚无焦点 -> 首个未禁用 Header 作为 Tab 停靠点。
+  let focusedKey = $state<string | null>(null);
+
+  // 查询 rootEl 下所有未禁用的 Header 按钮（DOM 顺序），roving 在其中漫游。
+  function focusableHeaders(): HTMLButtonElement[] {
+    if (!rootEl) return [];
+    return [
+      ...rootEl.querySelectorAll<HTMLButtonElement>(
+        '.cd-collapse__header[data-collapse-key]:not([disabled])',
+      ),
+    ];
+  }
+
+  // 纯派生 tabindex：焦点 Header（或无焦点时首个未禁用 Header）为 0，其余 -1。
+  // 不在 render 期写 $state（红线 #2）。整体 disabled 时所有 Header tabindex=-1。
+  function headerTabindex(key: string, panelDisabled?: boolean): 0 | -1 {
+    if (disabled || panelDisabled) return -1;
+    if (focusedKey != null) return focusedKey === key ? 0 : -1;
+    // 无焦点：首个未禁用 Header 为停靠点。数据驱动模式下用 panels 推断首个可聚焦项。
+    const firstKey = firstFocusableKey();
+    return firstKey === key ? 0 : -1;
+  }
+
+  // 首个未禁用 Header 的 key：数据驱动用 panels 派生；声明式回退到 DOM 查询。
+  function firstFocusableKey(): string | undefined {
+    if (panels.length > 0) {
+      return panels.find((p) => !(disabled || p.disabled))?.key;
+    }
+    return focusableHeaders()[0]?.dataset.collapseKey;
+  }
+
+  function focusHeaderByKey(key: string): void {
+    rootEl
+      ?.querySelector<HTMLElement>(
+        `.cd-collapse__header[data-collapse-key="${CSS.escape(key)}"]`,
+      )
+      ?.focus();
+  }
+
+  // Header keydown：↑↓ roving（纯函数 nextRovingIndex 派生，跳过禁用项）、Home/End 跳首尾。
+  // Enter/Space 交给原生 <button>（向后兼容 toggle）。
+  function onHeaderKeydown(e: KeyboardEvent, key: string): void {
+    const intent = rovingKeyFromEvent(e.key);
+    if (!intent) return;
+    const headers = focusableHeaders();
+    if (headers.length === 0) return;
+    e.preventDefault();
+    const keys = headers.map((h) => h.dataset.collapseKey ?? '');
+    const cur = keys.indexOf(key);
+    const next = nextRovingIndex(cur, keys.length, intent, false);
+    const nextKey = keys[next];
+    if (nextKey) {
+      focusedKey = nextKey;
+      focusHeaderByKey(nextKey);
+    }
+  }
+
+  function onHeaderFocus(key: string): void {
+    focusedKey = key;
+  }
+
+  // 经 context 暴露给子 Panel：全部 getter / 纯派生函数，红线 #1#2 落实在父级。
+  setCollapseContext({
+    isActive,
+    shouldRender,
+    toggle,
+    headerClick,
+    getDisabled: () => disabled,
+    getSize: () => size,
+    getIconPosition: () => expandIconPosition,
+    getIdBase: () => idBase,
+    getHeadingLevel: () => headingLevel,
+    headerTabindex,
+    onHeaderKeydown,
+    onHeaderFocus,
+    getExpandIcon: () => expandIcon,
+  });
+</script>
+
+<div class={cls} bind:this={rootEl}>
+  {#if useDeclarative}
+    {@render (children as Snippet)?.()}
+  {:else}
+  {#each panels as panel (panel.key)}
+    {@const active = isActive(panel.key)}
+    {@const itemDisabled = disabled || panel.disabled}
+    {@const headerId = `${idBase}-h-${panel.key}`}
+    {@const regionId = `${idBase}-r-${panel.key}`}
+    <div class="cd-collapse__item" class:cd-collapse__item--active={active}>
+      <!-- APG Accordion：Header 触发器外层 role=heading + aria-level。 -->
+      <span role="heading" aria-level={headingLevel} class="cd-collapse__heading">
+      <button
+        type="button"
+        id={headerId}
+        class="cd-collapse__header"
+        data-collapse-key={panel.key}
+        aria-expanded={active}
+        aria-controls={regionId}
+        aria-disabled={itemDisabled || undefined}
+        disabled={itemDisabled || undefined}
+        tabindex={headerTabindex(panel.key, panel.disabled)}
+        onclick={(e) => headerClick(e, panel.key, panel.disabled)}
+        onkeydown={(e) => onHeaderKeydown(e, panel.key)}
+        onfocus={() => onHeaderFocus(panel.key)}
+      >
+        {#if expandIcon}
+          <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
+            {@render expandIcon({ isExpanded: active })}
+          </span>
+        {:else}
+          <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
+            <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
+              <path fill="currentColor" d="M6 4l4 4-4 4V4Z" />
+            </svg>
+          </span>
+        {/if}
+        <span class="cd-collapse__title">{panel.header}</span>
+      </button>
+      </span>
+      <div
+        id={regionId}
+        class="cd-collapse__region"
+        role="region"
+        aria-labelledby={headerId}
+        hidden={!active}
+      >
+        <div class="cd-collapse__region-inner">
+          <div class="cd-collapse__content">
+            {#if shouldRender(panel.key)}
+              {@render (children as Snippet<[{ key: string }]>)?.({ key: panel.key })}
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/each}
+  {/if}
+</div>
+
+<style>
+  /*
+    .cd-collapse 根（<div>）保留组件作用域哈希；其下各 .cd-collapse__* 后代用 :global 包裹，
+    使同一套结构样式既覆盖本组件 panels 渲染的 .cd-collapse__item，也覆盖 <Collapse.Panel>
+    在子组件作用域内渲染的相同结构（参考 Timeline）。
+  */
+  .cd-collapse {
+    inline-size: 100%;
+  }
+  .cd-collapse--bordered {
+    border: 1px solid var(--cd-collapse-border);
+    border-radius: var(--cd-radius-1);
+  }
+  .cd-collapse :global(.cd-collapse__item + .cd-collapse__item) {
+    border-block-start: 1px solid var(--cd-collapse-border);
+  }
+  /* role=heading 包裹元素：消除 inline 默认行为，让内部 button 占满宽度。 */
+  .cd-collapse :global(.cd-collapse__heading) {
+    display: block;
+    margin: 0;
+    font: inherit;
+  }
+  .cd-collapse :global(.cd-collapse__header) {
+    display: flex;
+    align-items: center;
+    gap: var(--cd-spacing-2);
+    inline-size: 100%;
+    padding: var(--cd-collapse-header-padding);
+    border: none;
+    background: transparent;
+    color: var(--cd-collapse-header-color);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  .cd-collapse :global(.cd-collapse__header:hover:not(:disabled)) {
+    background: var(--cd-collapse-header-bg-hover);
+  }
+  .cd-collapse :global(.cd-collapse__header:focus-visible) {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
+  }
+  .cd-collapse :global(.cd-collapse__header:disabled) {
+    color: var(--cd-color-text-3);
+    cursor: not-allowed;
+  }
+  .cd-collapse--icon-right :global(.cd-collapse__header) {
+    flex-direction: row-reverse;
+  }
+  .cd-collapse--icon-right :global(.cd-collapse__title) {
+    flex: 1 1 auto;
+  }
+  .cd-collapse :global(.cd-collapse__arrow) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    color: var(--cd-collapse-arrow-color);
+    transition: transform var(--cd-collapse-motion-duration) var(--cd-motion-ease-standard);
+  }
+  .cd-collapse :global(.cd-collapse__arrow--open) {
+    transform: rotate(90deg);
+  }
+
+  /* 红线 #3: CSS grid-template-rows 0fr↔1fr 过渡，不 JS 测高 */
+  .cd-collapse :global(.cd-collapse__region) {
+    display: grid;
+    grid-template-rows: 1fr;
+  }
+  .cd-collapse :global(.cd-collapse__region[hidden]) {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  .cd-collapse--motion :global(.cd-collapse__region) {
+    transition: grid-template-rows var(--cd-collapse-motion-duration) var(--cd-motion-ease-standard);
+  }
+  .cd-collapse :global(.cd-collapse__region-inner) {
+    overflow: hidden;
+    min-block-size: 0;
+  }
+  .cd-collapse :global(.cd-collapse__content) {
+    padding: var(--cd-collapse-content-padding);
+    color: var(--cd-collapse-content-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cd-collapse--motion :global(.cd-collapse__region),
+    .cd-collapse :global(.cd-collapse__arrow) {
+      transition: none;
+    }
+  }
+</style>

package/dist/collapse/Collapse.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { CollapsePanel } from './types.js';
+type Size = 'small' | 'default' | 'large';
+type IconPosition = 'left' | 'right';
+interface Props {
+    panels?: CollapsePanel[];
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    size?: Size;
+    expandIconPosition?: IconPosition;
+    bordered?: boolean;
+    disabled?: boolean;
+    motion?: boolean;
+    /** Header 包裹元素的 aria-level（role=heading），默认 3。 */
+    headingLevel?: number;
+    /** 首次展开后才渲染面板内容 */
+    lazyRender?: boolean;
+    /** 展开过的面板内容保留 DOM（收起后不卸载），与 lazyRender 配合 */
+    keepDOM?: boolean;
+    onChange?: (keys: string[]) => void;
+    /** 某面板被展开后触发（spec §4：on:expand）。 */
+    onExpand?: (detail: {
+        key: string;
+    }) => void;
+    /** 某面板被收起后触发（spec §4：on:collapse）。 */
+    onCollapse?: (detail: {
+        key: string;
+    }) => void;
+    /** Header 被点击时触发（spec §4：on:headerClick，在 disabled 拦截前发出，可用于埋点）。 */
+    onHeaderClick?: (detail: {
+        key: string;
+        event: MouseEvent;
+    }) => void;
+    /** 自定义展开图标，替换默认箭头 SVG；参数为 {isExpanded: boolean}。 */
+    expandIcon?: Snippet<[{
+        isExpanded: boolean;
+    }]>;
+    /**
+     * 数据驱动模式：按 key 渲染面板内容 Snippet<[{ key }]>。
+     * 声明式模式（不传 panels）：内嵌 <Collapse.Panel> 列表，普通 Snippet。
+     */
+    children?: Snippet<[{
+        key: string;
+    }]> | Snippet;
+}
+declare const Collapse: import("svelte").Component<Props, {}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;
+//# sourceMappingURL=Collapse.svelte.d.ts.map

package/dist/collapse/Collapse.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/Collapse.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI9C,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAErC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7C,sCAAsC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,GAAG,OAAO,CAAC;CACjD;AA6PH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/collapse/CollapseA11yFixture.svelte

@@ -0,0 +1,27 @@
+<!--
+  仅供 Collapse.a11y.test.ts 使用的测试夹具：数据驱动 panels + children Snippet 渲染面板内容，
+  使 header button 的 aria-controls 指向真实存在的 region（axe aria-valid-attr-value 通过）。
+-->
+<script lang="ts">
+  import { Collapse } from './index.js';
+  import type { CollapsePanel } from './types.js';
+
+  interface Props {
+    accordion?: boolean;
+    disabled?: boolean;
+    defaultActiveKey?: string | string[];
+  }
+  let { accordion = false, disabled = false, defaultActiveKey = [] }: Props = $props();
+
+  const panels: CollapsePanel[] = [
+    { key: 'a', header: 'Section A' },
+    { key: 'b', header: 'Section B' },
+    { key: 'c', header: 'Section C', disabled: true },
+  ];
+</script>
+
+<Collapse {panels} {accordion} {disabled} {defaultActiveKey}>
+  {#snippet children({ key })}
+    <p>Content for {key}</p>
+  {/snippet}
+</Collapse>

package/dist/collapse/CollapseA11yFixture.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    accordion?: boolean;
+    disabled?: boolean;
+    defaultActiveKey?: string | string[];
+}
+declare const CollapseA11yFixture: import("svelte").Component<Props, {}, "">;
+type CollapseA11yFixture = ReturnType<typeof CollapseA11yFixture>;
+export default CollapseA11yFixture;
+//# sourceMappingURL=CollapseA11yFixture.svelte.d.ts.map

package/dist/collapse/CollapseA11yFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseA11yFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/CollapseA11yFixture.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACtC;AAuBH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/collapse/CollapseKbdFixture.svelte

@@ -0,0 +1,25 @@
+<!--
+  仅供 Collapse.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
+  数据驱动 panels；Header 组为单一 Tab 停靠点（roving，真实焦点）。
+  前后各放按钮验证 Tab 进入只停靠单个 Header、Tab 出去落到 after。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import Collapse from './Collapse.svelte';
+
+  const panels = [
+    { key: 'p1', header: 'Panel One' },
+    { key: 'p2', header: 'Panel Two' },
+    { key: 'p3', header: 'Panel Three' },
+  ];
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before">before</button>
+  <Collapse {panels}>
+    {#snippet children({ key }: { key: string })}
+      <p>content {key}</p>
+    {/snippet}
+  </Collapse>
+  <button type="button" data-testid="after">after</button>
+</LocaleProvider>

package/dist/collapse/CollapseKbdFixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CollapseKbdFixture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CollapseKbdFixture = InstanceType<typeof CollapseKbdFixture>;
+export default CollapseKbdFixture;
+//# sourceMappingURL=CollapseKbdFixture.svelte.d.ts.map

package/dist/collapse/CollapseKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/CollapseKbdFixture.svelte.ts"],"names":[],"mappings":"AA8BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;kBAA+E,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/collapse/CollapsePanel.svelte

@@ -0,0 +1,102 @@
+<!--
+  Collapse.Panel — 声明式单面板，与数据驱动 panels 渲染同一套 .cd-collapse__item 结构，
+  从而复用父 Collapse 的 grid 展开动画、箭头位置、边框等全部 CSS，无需在父级建挂载 registry。
+  父子状态经 context.ts 传递（参考 Timeline.Item / Form.Field）：
+    展开态判断（isActive/shouldRender）为父级纯派生函数，本组件只读不写（红线 #2）；
+    点击 header 调父 toggle，受控时仅 onChange 不回写（红线 #1，在父级落实）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getCollapseContext } from './context.js';
+
+  interface Props {
+    /** 面板唯一标识，等价数据驱动 panel.key。 */
+    itemKey: string;
+    /** 头部文本。 */
+    header?: string;
+    /** 面板级 disabled：该面板不可展开/收起。 */
+    disabled?: boolean;
+    /** 头部富内容插槽，优先于 header 文本。 */
+    head?: Snippet;
+    /** 头部右侧额外内容（不触发展开/收起），可为字符串或 Snippet。 */
+    extra?: Snippet | string;
+    /** 是否显示箭头区域，默认 true。 */
+    showArrow?: boolean;
+    children?: Snippet;
+  }
+
+  let { itemKey, header, disabled = false, head, extra, showArrow = true, children }: Props = $props();
+
+  const ctx = getCollapseContext();
+
+  // 展开态由父派生（纯函数），跨 context 读 getter 保持响应性。
+  const active = $derived(ctx?.isActive(itemKey) ?? false);
+  // 面板不可用 = 父整体 disabled 或本面板 disabled。
+  const itemDisabled = $derived((ctx?.getDisabled() ?? false) || disabled);
+  const render = $derived(ctx?.shouldRender(itemKey) ?? true);
+
+  const idBase = $derived(ctx?.getIdBase() ?? 'cd-collapse');
+  const headerId = $derived(`${idBase}-h-${itemKey}`);
+  const regionId = $derived(`${idBase}-r-${itemKey}`);
+  const headingLevel = $derived(ctx?.getHeadingLevel() ?? 3);
+  // roving tabindex 由父派生（红线 #2：本组件只读不写父级 $state）。
+  const tabindex = $derived(ctx?.headerTabindex(itemKey, disabled) ?? 0);
+  const expandIcon = $derived(ctx?.getExpandIcon());
+</script>
+
+<div class="cd-collapse__item" class:cd-collapse__item--active={active}>
+  <!-- APG Accordion：Header 触发器外层 role=heading + aria-level。 -->
+  <span role="heading" aria-level={headingLevel} class="cd-collapse__heading">
+  <button
+    type="button"
+    id={headerId}
+    class="cd-collapse__header"
+    data-collapse-key={itemKey}
+    aria-expanded={active}
+    aria-controls={regionId}
+    aria-disabled={itemDisabled || undefined}
+    disabled={itemDisabled || undefined}
+    {tabindex}
+    onclick={(e) => ctx?.headerClick(e, itemKey, disabled)}
+    onkeydown={(e) => ctx?.onHeaderKeydown(e, itemKey)}
+    onfocus={() => ctx?.onHeaderFocus(itemKey)}
+  >
+    {#if showArrow}
+      {#if expandIcon}
+        <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
+          {@render expandIcon({ isExpanded: active })}
+        </span>
+      {:else}
+        <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
+          <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
+            <path fill="currentColor" d="M6 4l4 4-4 4V4Z" />
+          </svg>
+        </span>
+      {/if}
+    {/if}
+    <span class="cd-collapse__title">
+      {#if head}{@render head()}{:else}{header}{/if}
+    </span>
+    {#if extra !== undefined}
+      <span class="cd-collapse__extra" onclick={(e) => e.stopPropagation()} role="none">
+        {#if typeof extra === 'string'}{extra}{:else}{@render extra()}{/if}
+      </span>
+    {/if}
+  </button>
+  </span>
+  <div
+    id={regionId}
+    class="cd-collapse__region"
+    role="region"
+    aria-labelledby={headerId}
+    hidden={!active}
+  >
+    <div class="cd-collapse__region-inner">
+      <div class="cd-collapse__content">
+        {#if render}
+          {@render children?.()}
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

package/dist/collapse/CollapsePanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 面板唯一标识，等价数据驱动 panel.key。 */
+    itemKey: string;
+    /** 头部文本。 */
+    header?: string;
+    /** 面板级 disabled：该面板不可展开/收起。 */
+    disabled?: boolean;
+    /** 头部富内容插槽，优先于 header 文本。 */
+    head?: Snippet;
+    /** 头部右侧额外内容（不触发展开/收起），可为字符串或 Snippet。 */
+    extra?: Snippet | string;
+    /** 是否显示箭头区域，默认 true。 */
+    showArrow?: boolean;
+    children?: Snippet;
+}
+declare const CollapsePanel: import("svelte").Component<Props, {}, "">;
+type CollapsePanel = ReturnType<typeof CollapsePanel>;
+export default CollapsePanel;
+//# sourceMappingURL=CollapsePanel.svelte.d.ts.map

package/dist/collapse/CollapsePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/CollapsePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}