@chenzy-design/svelte 0.1.0

package/dist/side-sheet/SideSheet.svelte.d.ts

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+type Size = 'small' | 'default' | 'large';
+type Reason = 'esc' | 'mask' | 'outside' | 'closeButton' | 'programmatic';
+interface Props {
+    open?: boolean;
+    placement?: Placement;
+    size?: Size;
+    width?: number | string;
+    height?: number | string;
+    title?: string;
+    /** 自定义标题区，覆盖 title prop。 */
+    titleSnippet?: Snippet;
+    /** Header 右侧额外操作（关闭按钮之前）。 */
+    headerExtra?: Snippet;
+    /** 自定义关闭图标。 */
+    closeIcon?: Snippet;
+    mask?: boolean;
+    maskClosable?: boolean;
+    /** mask=false 时点击面板外部是否关闭。默认 false。 */
+    outsideClosable?: boolean;
+    closeOnEsc?: boolean;
+    closable?: boolean;
+    /** 首次打开前是否惰性挂载内容。默认 true。 */
+    lazyMount?: boolean;
+    /** keepDOM=false 等价于 lazyMount=true 的反义（保留 DOM）。lazyMount 优先。 */
+    keepDOM?: boolean;
+    /** 关闭后是否销毁内部内容（释放资源）。默认 false。 */
+    destroyOnClose?: boolean;
+    /** Portal 挂载容器，缺省 document.body。 */
+    getContainer?: () => HTMLElement | null;
+    zIndex?: number;
+    /** 强制不锁背景滚动（即便 mask=true）。 */
+    disableScrollLock?: boolean;
+    /** 打开时给 body 加 overflow:hidden 防背景滚动。默认 true。false 等价于 disableScrollLock=true。 */
+    disableScroll?: boolean;
+    /** 关闭后焦点返回目标，缺省为打开时的触发元素。 */
+    returnFocusTo?: HTMLElement | (() => HTMLElement | null) | null;
+    /** 关闭进出动效（独立于 reduced-motion）。 */
+    motionDisabled?: boolean;
+    /** 是否启用动画过渡。false 等价于 motionDisabled=true。默认 true。 */
+    motion?: boolean;
+    /** Header 区域 style 字符串。 */
+    headerStyle?: string;
+    /** 内容区域 style 字符串。 */
+    bodyStyle?: string;
+    /** 遮罩 style 字符串。 */
+    maskStyle?: string;
+    /** Footer 操作区；提供 close() 以便按钮关闭面板。未提供不渲染。 */
+    footer?: Snippet<[{
+        close: () => void;
+    }]> | null;
+    children?: Snippet;
+    /** 无可见标题时的 aria-label 兜底。 */
+    ariaLabel?: string;
+    class?: string;
+    bodyClass?: string;
+    maskClass?: string;
+    /** 显隐意图变化（受控，需外部回写 open）。 */
+    onOpenChange?: (e: {
+        open: boolean;
+        reason: Reason;
+    }) => void;
+    /** 进入动效结束、内容完全可见后触发。 */
+    onAfterOpen?: () => void;
+    /** 退出动效结束、DOM 卸载（如适用）后触发。 */
+    onAfterClose?: () => void;
+    /** 动画结束后（入场或出场）触发，isVisible 为当前可见状态。 */
+    afterVisibleChange?: (isVisible: boolean) => void;
+    /** 用户主动取消（Esc/遮罩/外部/关闭按钮）的语义快捷事件。 */
+    onCancel?: (e: {
+        reason: Reason;
+    }) => void;
+}
+declare const SideSheet: import("svelte").Component<Props, {}, "">;
+type SideSheet = ReturnType<typeof SideSheet>;
+export default SideSheet;
+//# sourceMappingURL=SideSheet.svelte.d.ts.map

package/dist/side-sheet/SideSheet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheet.svelte.d.ts","sourceRoot":"","sources":["../../src/side-sheet/SideSheet.svelte.ts"],"names":[],"mappings":"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"}

package/dist/side-sheet/SideSheetKbdFixture.svelte

@@ -0,0 +1,30 @@
+<!--
+  仅供 SideSheet.kbd.test.ts（browser project）使用的焦点陷阱 e2e 夹具。
+  trigger 按钮控制 open（受控）；测试先聚焦 trigger 再打开 SideSheet，
+  验证：打开后焦点进入对话框、Tab 被困在内循环、Esc 关闭后焦点归还 trigger。
+  默认 mask=true 才启用 focus trap；motionDisabled 关掉进出动效，避免动画时序抖动。
+  body 两个按钮 + 关闭叉 + footer 两个按钮构成多个可聚焦点测 Tab 循环。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import SideSheet from './SideSheet.svelte';
+
+  let open = $state(false);
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="trigger" onclick={() => (open = true)}>open sidesheet</button>
+  <SideSheet
+    {open}
+    title="Filters"
+    motionDisabled
+    onOpenChange={(e) => (open = e.open)}
+  >
+    <button type="button" data-testid="body-a">body a</button>
+    <button type="button" data-testid="body-b">body b</button>
+    {#snippet footer({ close })}
+      <button type="button" data-testid="footer-reset">Reset</button>
+      <button type="button" data-testid="footer-apply" onclick={close}>Apply</button>
+    {/snippet}
+  </SideSheet>
+</LocaleProvider>

package/dist/side-sheet/SideSheetKbdFixture.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const SideSheetKbdFixture: import("svelte").Component<Record<string, never>, {}, "">;
+type SideSheetKbdFixture = ReturnType<typeof SideSheetKbdFixture>;
+export default SideSheetKbdFixture;
+//# sourceMappingURL=SideSheetKbdFixture.svelte.d.ts.map

package/dist/side-sheet/SideSheetKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheetKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/side-sheet/SideSheetKbdFixture.svelte.ts"],"names":[],"mappings":"AA4BA,QAAA,MAAM,mBAAmB,2DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/side-sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SideSheet } from './SideSheet.svelte';
+export { meta as sideSheetMeta } from './meta.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/side-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/side-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC"}

package/dist/side-sheet/index.js

@@ -0,0 +1,2 @@
+export { default as SideSheet } from './SideSheet.svelte';
+export { meta as sideSheetMeta } from './meta.js';

package/dist/side-sheet/meta.d.ts

@@ -0,0 +1,229 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * SideSheet — see specs/components/feedback/SideSheet.spec.md
+ */
+export declare const meta: {
+    readonly name: "SideSheet";
+    readonly category: "feedback";
+    readonly stage: "M5";
+    readonly semiEquivalent: "SideSheet";
+    readonly description: "侧边滑出浮层：从视口四边（left/right/top/bottom）滑入的容器，承载次要任务流/详情/筛选/表单，比 Modal 提供更大可滚动内容区。与 Modal 同构复用浮层基建——portal 到 body（或 getContainer）脱离父层叠上下文；role=dialog，mask 时加 aria-modal；useFocusTrap 焦点捕获与归还（仅 mask=true）、useDismiss Esc 关闭（closeOnEsc），mask 时 useScrollLock 锁背景滚动（可 disableScrollLock 关闭）。mask=true 模态（遮罩+锁滚+陷阱），mask=false 非模态（无遮罩、不锁滚动、不抢焦点，outsideClosable 时点外部关闭）。size(small/default/large) 预设宽（横向）/高（纵向），width/height 显式覆盖；窄视口近铺满。Header/Body/Footer 三段式，footer 暴露 close()。滑入过渡为 CSS transform/opacity（token 时长缓动，reduced-motion 与 motionDisabled 退化为即时显隐）。lazyMount 首开前惰性挂载，destroyOnClose 关闭即卸载内容（出场过渡结束后 onAfterClose）。堆叠 z-index 复用 modal/z-stack 模块级计数器，与 Modal 统一层栈、后开者在上、Esc 仅关栈顶。受控 open（不回写），仅经 onOpenChange({open, reason}) 通知，reason 覆盖 esc/mask/outside/closeButton/programmatic。";
+    readonly exports: readonly ["SideSheet"];
+    readonly a11yPattern: "dialog-modal";
+    readonly apgRef: "dialog (modal)";
+    readonly replaces: readonly ["Drawer"];
+    readonly relatedComponents: readonly ["Modal", "Popover", "Notification"];
+    readonly usageHints: "承载次要任务流/详情/筛选；模态用 mask=true，协作式（打开仍可操作主页面）用 mask=false。承载单一确认/决策用 Modal，不要混用。";
+    readonly dangerousActions: "footer 危险操作（删除/清空等不可逆）使用 --cd-color-danger 与具体动词文案，并由业务侧拦截 onOpenChange 对未保存内容做二次确认。";
+    readonly props: readonly [{
+        readonly name: "open";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "受控显隐；受控时不回写，仅 onOpenChange 通知";
+    }, {
+        readonly name: "placement";
+        readonly type: "'left'|'right'|'top'|'bottom'";
+        readonly default: "'right'";
+        readonly desc: "滑出方向（贴附边缘）；RTL 下 left/right 镜像";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'|'large'";
+        readonly default: "'default'";
+        readonly desc: "预设尺度（横向→宽度，纵向→高度）";
+    }, {
+        readonly name: "width";
+        readonly type: "number|string";
+        readonly default: "undefined";
+        readonly desc: "left/right 显式宽度，覆盖 size；数字按 px";
+    }, {
+        readonly name: "height";
+        readonly type: "number|string";
+        readonly default: "undefined";
+        readonly desc: "top/bottom 显式高度，覆盖 size；数字按 px";
+    }, {
+        readonly name: "title";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "标题文案";
+    }, {
+        readonly name: "titleSnippet";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "自定义标题区，覆盖 title";
+    }, {
+        readonly name: "headerExtra";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "Header 右侧额外操作（关闭按钮之前）";
+    }, {
+        readonly name: "closeIcon";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "自定义关闭图标";
+    }, {
+        readonly name: "mask";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "显示遮罩并以模态呈现（锁滚动+focus trap）；false 非模态";
+    }, {
+        readonly name: "maskClosable";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "点击遮罩是否关闭（mask=true 生效）";
+    }, {
+        readonly name: "outsideClosable";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "mask=false 时点击面板外部是否关闭";
+    }, {
+        readonly name: "closeOnEsc";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "按 Esc 是否关闭（仅作用于浮层栈顶）";
+    }, {
+        readonly name: "closable";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "Header 是否显示关闭按钮";
+    }, {
+        readonly name: "lazyMount";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "首次打开前是否惰性挂载内容";
+    }, {
+        readonly name: "keepDOM";
+        readonly type: "boolean";
+        readonly default: "undefined";
+        readonly desc: "true 时保留 DOM（禁用惰性挂载）；lazyMount 优先";
+    }, {
+        readonly name: "destroyOnClose";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "关闭后是否销毁内部内容（出场过渡结束后卸载），重开重建";
+    }, {
+        readonly name: "getContainer";
+        readonly type: "() => HTMLElement | null";
+        readonly default: "() => document.body";
+        readonly desc: "Portal 挂载容器";
+    }, {
+        readonly name: "zIndex";
+        readonly type: "number";
+        readonly default: "1000";
+        readonly desc: "浮层基准层级（栈内自动递增）";
+    }, {
+        readonly name: "disableScrollLock";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "强制不锁背景滚动（即便 mask=true）";
+    }, {
+        readonly name: "returnFocusTo";
+        readonly type: "HTMLElement | (() => HTMLElement | null) | null";
+        readonly default: "触发元素";
+        readonly desc: "关闭后焦点返回目标";
+    }, {
+        readonly name: "motionDisabled";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "关闭进出动效（独立于 reduced-motion）";
+    }, {
+        readonly name: "footer";
+        readonly type: "Snippet<[{ close: () => void }]>|null";
+        readonly default: "undefined";
+        readonly desc: "Footer 操作区；提供 close() 关闭面板；未提供不渲染";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "Body 主内容区（可滚动）";
+    }, {
+        readonly name: "ariaLabel";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "无可见标题时提供 aria-label";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "面板自定义类名";
+    }, {
+        readonly name: "bodyClass";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "Body 自定义类名";
+    }, {
+        readonly name: "maskClass";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "遮罩自定义类名";
+    }, {
+        readonly name: "onOpenChange";
+        readonly type: "(e: { open: boolean; reason: Reason }) => void";
+        readonly default: "undefined";
+        readonly desc: "显隐意图变化（受控，需外部回写 open）";
+    }, {
+        readonly name: "onAfterOpen";
+        readonly type: "() => void";
+        readonly default: "undefined";
+        readonly desc: "进入动效结束、内容完全可见后触发";
+    }, {
+        readonly name: "onAfterClose";
+        readonly type: "() => void";
+        readonly default: "undefined";
+        readonly desc: "退出动效结束、DOM 卸载后触发";
+    }, {
+        readonly name: "onCancel";
+        readonly type: "(e: { reason: Reason }) => void";
+        readonly default: "undefined";
+        readonly desc: "用户主动取消（Esc/遮罩/外部/关闭按钮）";
+    }];
+    readonly events: readonly [{
+        readonly name: "onOpenChange";
+        readonly desc: "显隐意图变化，payload { open, reason: esc|mask|outside|closeButton|programmatic }";
+    }, {
+        readonly name: "onAfterOpen";
+        readonly desc: "进入动效结束后触发";
+    }, {
+        readonly name: "onAfterClose";
+        readonly desc: "退出动效结束、DOM 卸载后触发";
+    }, {
+        readonly name: "onCancel";
+        readonly desc: "用户主动取消，payload { reason }";
+    }];
+    readonly slots: readonly [{
+        readonly name: "children";
+        readonly desc: "Body 主内容区（可滚动）";
+    }, {
+        readonly name: "titleSnippet";
+        readonly desc: "自定义标题区，覆盖 title";
+    }, {
+        readonly name: "headerExtra";
+        readonly desc: "Header 右侧额外操作（关闭按钮之前）";
+    }, {
+        readonly name: "footer";
+        readonly desc: "Footer 操作区，提供 close()";
+    }, {
+        readonly name: "closeIcon";
+        readonly desc: "自定义关闭图标";
+    }];
+    readonly a11y: {
+        readonly hasRole: true;
+        readonly focusable: true;
+        readonly note: "role=dialog；mask=true 加 aria-modal=true（非模态不设，避免误导锁定语义）；有 title 用 aria-labelledby，无则 ariaLabel；mask 时 useFocusTrap 捕获 Tab 焦点循环并在关闭归还 returnFocusTo/触发元素；closeOnEsc 控制 Esc（仅栈顶）；mask 时 useScrollLock 锁背景滚动；关闭按钮 aria-label 经 SideSheet.closeAriaLabel；reduced-motion / motionDisabled 退化即时显隐。";
+    };
+    readonly tokens: readonly ["--cd-sidesheet-bg", "--cd-sidesheet-color", "--cd-sidesheet-mask-bg", "--cd-sidesheet-border", "--cd-sidesheet-radius", "--cd-sidesheet-shadow", "--cd-sidesheet-padding", "--cd-sidesheet-header-padding", "--cd-sidesheet-footer-padding", "--cd-sidesheet-title-color", "--cd-sidesheet-title-size", "--cd-sidesheet-close-color", "--cd-sidesheet-close-color-hover", "--cd-sidesheet-close-hover-bg", "--cd-sidesheet-width-small", "--cd-sidesheet-width", "--cd-sidesheet-width-large", "--cd-sidesheet-height-small", "--cd-sidesheet-height", "--cd-sidesheet-height-large", "--cd-sidesheet-z", "--cd-sidesheet-motion-duration"];
+    readonly responsive: true;
+    readonly examples: readonly [{
+        readonly title: "右侧模态面板";
+        readonly code: "<SideSheet open={visible} title=\"编辑用户\" onOpenChange={(e) => (visible = e.open)}>表单</SideSheet>";
+    }, {
+        readonly title: "左侧导航面板";
+        readonly code: "<SideSheet open={visible} placement=\"left\" title=\"菜单\" onOpenChange={(e) => (visible = e.open)}>导航</SideSheet>";
+    }, {
+        readonly title: "非模态协作面板";
+        readonly code: "<SideSheet open={visible} mask={false} outsideClosable title=\"通知中心\" onOpenChange={(e) => (visible = e.open)}>列表</SideSheet>";
+    }, {
+        readonly title: "Footer 操作区";
+        readonly code: "<SideSheet open={visible} title=\"筛选\" onOpenChange={(e) => (visible = e.open)}>{#snippet footer({ close })}<Button onclick={close}>取消</Button><Button type=\"primary\">应用筛选</Button>{/snippet}内容</SideSheet>";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/side-sheet/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/side-sheet/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GP,CAAC"}

package/dist/side-sheet/meta.js

@@ -0,0 +1,113 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * SideSheet — see specs/components/feedback/SideSheet.spec.md
+ */
+export const meta = {
+    name: 'SideSheet',
+    category: 'feedback',
+    stage: 'M5',
+    semiEquivalent: 'SideSheet',
+    description: '侧边滑出浮层：从视口四边（left/right/top/bottom）滑入的容器，承载次要任务流/详情/筛选/表单，比 Modal 提供更大可滚动内容区。与 Modal 同构复用浮层基建——portal 到 body（或 getContainer）脱离父层叠上下文；role=dialog，mask 时加 aria-modal；useFocusTrap 焦点捕获与归还（仅 mask=true）、useDismiss Esc 关闭（closeOnEsc），mask 时 useScrollLock 锁背景滚动（可 disableScrollLock 关闭）。mask=true 模态（遮罩+锁滚+陷阱），mask=false 非模态（无遮罩、不锁滚动、不抢焦点，outsideClosable 时点外部关闭）。size(small/default/large) 预设宽（横向）/高（纵向），width/height 显式覆盖；窄视口近铺满。Header/Body/Footer 三段式，footer 暴露 close()。滑入过渡为 CSS transform/opacity（token 时长缓动，reduced-motion 与 motionDisabled 退化为即时显隐）。lazyMount 首开前惰性挂载，destroyOnClose 关闭即卸载内容（出场过渡结束后 onAfterClose）。堆叠 z-index 复用 modal/z-stack 模块级计数器，与 Modal 统一层栈、后开者在上、Esc 仅关栈顶。受控 open（不回写），仅经 onOpenChange({open, reason}) 通知，reason 覆盖 esc/mask/outside/closeButton/programmatic。',
+    exports: ['SideSheet'],
+    a11yPattern: 'dialog-modal',
+    apgRef: 'dialog (modal)',
+    replaces: ['Drawer'],
+    relatedComponents: ['Modal', 'Popover', 'Notification'],
+    usageHints: '承载次要任务流/详情/筛选；模态用 mask=true，协作式（打开仍可操作主页面）用 mask=false。承载单一确认/决策用 Modal，不要混用。',
+    dangerousActions: 'footer 危险操作（删除/清空等不可逆）使用 --cd-color-danger 与具体动词文案，并由业务侧拦截 onOpenChange 对未保存内容做二次确认。',
+    props: [
+        { name: 'open', type: 'boolean', default: 'false', desc: '受控显隐；受控时不回写，仅 onOpenChange 通知' },
+        { name: 'placement', type: "'left'|'right'|'top'|'bottom'", default: "'right'", desc: '滑出方向（贴附边缘）；RTL 下 left/right 镜像' },
+        { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: '预设尺度（横向→宽度，纵向→高度）' },
+        { name: 'width', type: 'number|string', default: 'undefined', desc: 'left/right 显式宽度，覆盖 size；数字按 px' },
+        { name: 'height', type: 'number|string', default: 'undefined', desc: 'top/bottom 显式高度，覆盖 size；数字按 px' },
+        { name: 'title', type: 'string', default: 'undefined', desc: '标题文案' },
+        { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '自定义标题区，覆盖 title' },
+        { name: 'headerExtra', type: 'Snippet', default: 'undefined', desc: 'Header 右侧额外操作（关闭按钮之前）' },
+        { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标' },
+        { name: 'mask', type: 'boolean', default: 'true', desc: '显示遮罩并以模态呈现（锁滚动+focus trap）；false 非模态' },
+        { name: 'maskClosable', type: 'boolean', default: 'true', desc: '点击遮罩是否关闭（mask=true 生效）' },
+        { name: 'outsideClosable', type: 'boolean', default: 'false', desc: 'mask=false 时点击面板外部是否关闭' },
+        { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: '按 Esc 是否关闭（仅作用于浮层栈顶）' },
+        { name: 'closable', type: 'boolean', default: 'true', desc: 'Header 是否显示关闭按钮' },
+        { name: 'lazyMount', type: 'boolean', default: 'true', desc: '首次打开前是否惰性挂载内容' },
+        { name: 'keepDOM', type: 'boolean', default: 'undefined', desc: 'true 时保留 DOM（禁用惰性挂载）；lazyMount 优先' },
+        { name: 'destroyOnClose', type: 'boolean', default: 'false', desc: '关闭后是否销毁内部内容（出场过渡结束后卸载），重开重建' },
+        { name: 'getContainer', type: '() => HTMLElement | null', default: '() => document.body', desc: 'Portal 挂载容器' },
+        { name: 'zIndex', type: 'number', default: '1000', desc: '浮层基准层级（栈内自动递增）' },
+        { name: 'disableScrollLock', type: 'boolean', default: 'false', desc: '强制不锁背景滚动（即便 mask=true）' },
+        { name: 'returnFocusTo', type: 'HTMLElement | (() => HTMLElement | null) | null', default: '触发元素', desc: '关闭后焦点返回目标' },
+        { name: 'motionDisabled', type: 'boolean', default: 'false', desc: '关闭进出动效（独立于 reduced-motion）' },
+        { name: 'footer', type: 'Snippet<[{ close: () => void }]>|null', default: 'undefined', desc: 'Footer 操作区；提供 close() 关闭面板；未提供不渲染' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: 'Body 主内容区（可滚动）' },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无可见标题时提供 aria-label' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '面板自定义类名' },
+        { name: 'bodyClass', type: 'string', default: 'undefined', desc: 'Body 自定义类名' },
+        { name: 'maskClass', type: 'string', default: 'undefined', desc: '遮罩自定义类名' },
+        { name: 'onOpenChange', type: '(e: { open: boolean; reason: Reason }) => void', default: 'undefined', desc: '显隐意图变化（受控，需外部回写 open）' },
+        { name: 'onAfterOpen', type: '() => void', default: 'undefined', desc: '进入动效结束、内容完全可见后触发' },
+        { name: 'onAfterClose', type: '() => void', default: 'undefined', desc: '退出动效结束、DOM 卸载后触发' },
+        { name: 'onCancel', type: '(e: { reason: Reason }) => void', default: 'undefined', desc: '用户主动取消（Esc/遮罩/外部/关闭按钮）' },
+    ],
+    events: [
+        { name: 'onOpenChange', desc: '显隐意图变化，payload { open, reason: esc|mask|outside|closeButton|programmatic }' },
+        { name: 'onAfterOpen', desc: '进入动效结束后触发' },
+        { name: 'onAfterClose', desc: '退出动效结束、DOM 卸载后触发' },
+        { name: 'onCancel', desc: '用户主动取消，payload { reason }' },
+    ],
+    slots: [
+        { name: 'children', desc: 'Body 主内容区（可滚动）' },
+        { name: 'titleSnippet', desc: '自定义标题区，覆盖 title' },
+        { name: 'headerExtra', desc: 'Header 右侧额外操作（关闭按钮之前）' },
+        { name: 'footer', desc: 'Footer 操作区，提供 close()' },
+        { name: 'closeIcon', desc: '自定义关闭图标' },
+    ],
+    a11y: {
+        hasRole: true,
+        focusable: true,
+        note: 'role=dialog；mask=true 加 aria-modal=true（非模态不设，避免误导锁定语义）；有 title 用 aria-labelledby，无则 ariaLabel；mask 时 useFocusTrap 捕获 Tab 焦点循环并在关闭归还 returnFocusTo/触发元素；closeOnEsc 控制 Esc（仅栈顶）；mask 时 useScrollLock 锁背景滚动；关闭按钮 aria-label 经 SideSheet.closeAriaLabel；reduced-motion / motionDisabled 退化即时显隐。',
+    },
+    tokens: [
+        '--cd-sidesheet-bg',
+        '--cd-sidesheet-color',
+        '--cd-sidesheet-mask-bg',
+        '--cd-sidesheet-border',
+        '--cd-sidesheet-radius',
+        '--cd-sidesheet-shadow',
+        '--cd-sidesheet-padding',
+        '--cd-sidesheet-header-padding',
+        '--cd-sidesheet-footer-padding',
+        '--cd-sidesheet-title-color',
+        '--cd-sidesheet-title-size',
+        '--cd-sidesheet-close-color',
+        '--cd-sidesheet-close-color-hover',
+        '--cd-sidesheet-close-hover-bg',
+        '--cd-sidesheet-width-small',
+        '--cd-sidesheet-width',
+        '--cd-sidesheet-width-large',
+        '--cd-sidesheet-height-small',
+        '--cd-sidesheet-height',
+        '--cd-sidesheet-height-large',
+        '--cd-sidesheet-z',
+        '--cd-sidesheet-motion-duration',
+    ],
+    responsive: true,
+    examples: [
+        {
+            title: '右侧模态面板',
+            code: '<SideSheet open={visible} title="编辑用户" onOpenChange={(e) => (visible = e.open)}>表单</SideSheet>',
+        },
+        {
+            title: '左侧导航面板',
+            code: '<SideSheet open={visible} placement="left" title="菜单" onOpenChange={(e) => (visible = e.open)}>导航</SideSheet>',
+        },
+        {
+            title: '非模态协作面板',
+            code: '<SideSheet open={visible} mask={false} outsideClosable title="通知中心" onOpenChange={(e) => (visible = e.open)}>列表</SideSheet>',
+        },
+        {
+            title: 'Footer 操作区',
+            code: '<SideSheet open={visible} title="筛选" onOpenChange={(e) => (visible = e.open)}>{#snippet footer({ close })}<Button onclick={close}>取消</Button><Button type="primary">应用筛选</Button>{/snippet}内容</SideSheet>',
+        },
+    ],
+};

package/dist/skeleton/Skeleton.a11y.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Skeleton.a11y.test.d.ts.map

package/dist/skeleton/Skeleton.a11y.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.a11y.test.d.ts","sourceRoot":"","sources":["../../src/skeleton/Skeleton.a11y.test.ts"],"names":[],"mappings":""}

package/dist/skeleton/Skeleton.a11y.test.js

@@ -0,0 +1,32 @@
+// Skeleton a11y：loading 占位容器 aria-busy + aria-live=polite + aria-label。
+//
+// 已知 violation（组件源码缺口，本批不改源码）：占位容器是裸 <div>，带 aria-label/aria-live
+// 但无 role，axe 规则 [aria-prohibited-attr] 报「aria-label cannot be used on a div with no
+// valid role」。修复需给容器加 role（如 role="status"），属组件改动，故相关 axe 断言 it.skip。
+// 结构性 ARIA 断言（aria-busy/aria-live/aria-label 存在）仍作为非 skip 用例保留。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Skeleton from './Skeleton.svelte';
+describe('Skeleton a11y', () => {
+    it('loading：占位容器 aria-busy + aria-live + aria-label 结构正确', () => {
+        const { container } = renderWithLocale(Skeleton, {
+            props: { loading: true },
+        });
+        const root = container.querySelector('.cd-skeleton');
+        expect(root?.getAttribute('aria-busy')).toBe('true');
+        expect(root?.getAttribute('aria-live')).toBe('polite');
+        expect(root?.getAttribute('aria-label')).toBeTruthy();
+    });
+    it('loading：无 axe violations（占位容器 role=status）', async () => {
+        const { container } = renderWithLocale(Skeleton, {
+            props: { loading: true },
+        });
+        await expectNoAxeViolations(container);
+    });
+    it('active：无 axe violations（占位容器 role=status）', async () => {
+        const { container } = renderWithLocale(Skeleton, {
+            props: { loading: true, active: true },
+        });
+        await expectNoAxeViolations(container);
+    });
+});