@chenzy-design/svelte 0.2.1 → 0.3.0

package/dist/layout/Content.svelte.d.ts

@@ -3,6 +3,12 @@ interface Props {
     /** true→token padding; number→px; string→raw; false→0 */
     padding?: string | number | boolean;
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在 padding 之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素，覆盖默认 main 语义）。 */
+    role?: string;
     children?: Snippet;
 }
 declare const Content: import("svelte").Component<Props, {}, "">;

package/dist/layout/Content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Content.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/layout/Footer.svelte

@@ -9,10 +9,24 @@
     /** override height; number→px, string→raw */
     height?: string | number;
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     children?: Snippet;
   }
 
-  let { sticky = false, height, class: className = '', children }: Props = $props();
+  let {
+    sticky = false,
+    height,
+    class: className = '',
+    style,
+    ariaLabel,
+    role,
+    children,
+  }: Props = $props();
 
   const heightCss = $derived.by(() => {
     if (height === undefined) return undefined;
@@ -23,10 +37,13 @@
     ['cd-layout-footer', sticky && 'cd-layout-footer--sticky', className].filter(Boolean).join(' '),
   );
 
-  const inlineStyle = $derived(heightCss ? `height:${heightCss}` : undefined);
+  // height 派生样式在前，用户 style 在后（可覆盖）。
+  const inlineStyle = $derived(
+    [heightCss ? `height:${heightCss}` : '', style ?? ''].filter(Boolean).join(';') || undefined,
+  );
 </script>
 
-<footer class={cls} style={inlineStyle}>
+<footer class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </footer>
 
@@ -36,8 +53,8 @@
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    padding-block: var(--cd-spacing-4);
-    padding-inline: var(--cd-spacing-6);
+    padding-block: var(--cd-spacing-base);
+    padding-inline: var(--cd-spacing-loose);
     background: var(--cd-layout-footer-bg);
     color: var(--cd-layout-footer-color);
     text-align: center;

package/dist/layout/Footer.svelte.d.ts

@@ -4,6 +4,12 @@ interface Props {
     /** override height; number→px, string→raw */
     height?: string | number;
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     children?: Snippet;
 }
 declare const Footer: import("svelte").Component<Props, {}, "">;

package/dist/layout/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/Header.svelte

@@ -9,10 +9,24 @@
     /** override token height; number→px, string→raw */
     height?: string | number;
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     children?: Snippet;
   }
 
-  let { sticky = false, height, class: className = '', children }: Props = $props();
+  let {
+    sticky = false,
+    height,
+    class: className = '',
+    style,
+    ariaLabel,
+    role,
+    children,
+  }: Props = $props();
 
   const heightCss = $derived.by(() => {
     if (height === undefined) return undefined;
@@ -23,10 +37,13 @@
     ['cd-layout-header', sticky && 'cd-layout-header--sticky', className].filter(Boolean).join(' '),
   );
 
-  const inlineStyle = $derived(heightCss ? `height:${heightCss}` : undefined);
+  // height 派生样式在前，用户 style 在后（可覆盖）。
+  const inlineStyle = $derived(
+    [heightCss ? `height:${heightCss}` : '', style ?? ''].filter(Boolean).join(';') || undefined,
+  );
 </script>
 
-<header class={cls} style={inlineStyle}>
+<header class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </header>
 

package/dist/layout/Header.svelte.d.ts

@@ -4,6 +4,12 @@ interface Props {
     /** override token height; number→px, string→raw */
     height?: string | number;
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在 height 之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     children?: Snippet;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;

package/dist/layout/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/Layout.svelte

@@ -20,10 +20,23 @@
   interface Props {
     hasSider?: boolean;
     class?: string;
+    /** 根元素自定义内联样式（透传）。Layout 不附带背景/尺寸样式，按需自定义。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素，覆盖默认语义）。 */
+    role?: string;
     children?: Snippet;
   }
 
-  let { hasSider, class: className = '', children }: Props = $props();
+  let {
+    hasSider,
+    class: className = '',
+    style,
+    ariaLabel,
+    role,
+    children,
+  }: Props = $props();
 
   let hasSiderDetected = $state(false);
 
@@ -42,7 +55,7 @@
   );
 </script>
 
-<section class={cls}>
+<section class={cls} {style} aria-label={ariaLabel} {role}>
   {@render children?.()}
 </section>
 

package/dist/layout/Layout.svelte.d.ts

@@ -6,6 +6,12 @@ import type { Snippet } from 'svelte';
 interface Props {
     hasSider?: boolean;
     class?: string;
+    /** 根元素自定义内联样式（透传）。Layout 不附带背景/尺寸样式，按需自定义。 */
+    style?: string;
+    /** 可访问性标签（透传到根元素 aria-label）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素，覆盖默认语义）。 */
+    role?: string;
     children?: Snippet;
 }
 declare const Layout: import("svelte").Component<Props, {}, "">;

package/dist/layout/Layout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Layout.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,kBAAkB,eAAsB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Layout.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Layout.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,kBAAkB,eAAsB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2CH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/layout/Sider.svelte

@@ -26,7 +26,15 @@
     reverseArrow?: boolean;
     placement?: 'left' | 'right';
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在宽度样式之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到 aside 的 aria-label，描述该 Sider 作用）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
+    /** 触发响应式断点时的回调（matched=是否命中 max-width 断点）。 */
+    onBreakpoint?: (matched: boolean, breakpoint: Breakpoint) => void;
     children?: Snippet;
     /** custom trigger; receives current collapsed + toggle */
     trigger?: Snippet<[{ collapsed: boolean; toggle: () => void }]>;
@@ -42,7 +50,11 @@
     reverseArrow = false,
     placement = 'left',
     class: className = '',
+    style,
+    ariaLabel,
+    role,
     onCollapse,
+    onBreakpoint,
     children,
     trigger,
   }: Props = $props();
@@ -60,6 +72,7 @@
     const options: SiderOptions = {
       defaultCollapsed,
       onChange: (value, t) => onCollapse?.(value, t),
+      onBreakpoint: (matched, bp) => onBreakpoint?.(matched, bp),
     };
     if (collapsed !== undefined) options.collapsed = collapsed;
     if (breakpoint !== undefined) options.breakpoint = breakpoint;
@@ -91,7 +104,14 @@
   });
 
   function toggle(): void {
-    sider.toggle();
+    // 受控模式：headless 在构造时捕获了初始 collapsed，其 current() 是陈旧值，
+    // 直接 sider.toggle() 会一直按初值翻转。故用 Svelte 侧 live 的 collapsedState
+    // 计算目标并 setCollapsed（仅触发 onChange，受控不自改）。非受控走 headless toggle。
+    if (collapsed !== undefined) {
+      sider.setCollapsed(!collapsedState, 'click');
+    } else {
+      sider.toggle();
+    }
   }
 
   function toCss(value: string | number): string {
@@ -115,7 +135,12 @@
       .join(' '),
   );
 
-  const inlineStyle = $derived(`flex: 0 0 ${widthCss}; width: ${widthCss}; max-width: ${widthCss}`);
+  // 宽度派生样式在前，用户 style 在后（可覆盖）。
+  const inlineStyle = $derived(
+    [`flex: 0 0 ${widthCss}; width: ${widthCss}; max-width: ${widthCss}`, style ?? '']
+      .filter(Boolean)
+      .join('; '),
+  );
 
   // Arrow direction: point "outward" to expand, "inward" to collapse.
   // placement + reverseArrow flip which glyph means which.
@@ -125,7 +150,7 @@
   });
 </script>
 
-<aside class={cls} style={inlineStyle}>
+<aside class={cls} style={inlineStyle} aria-label={ariaLabel} {role}>
   <div
     id={sider.id}
     class="cd-layout-sider__children"
@@ -195,7 +220,7 @@
   }
   .cd-layout-sider__arrow {
     display: inline-flex;
-    font-size: var(--cd-font-size-3);
+    font-size: var(--cd-font-size-header-6);
     line-height: 1;
   }
   @media (prefers-reduced-motion: reduce) {

package/dist/layout/Sider.svelte.d.ts

@@ -11,7 +11,15 @@ interface Props {
     reverseArrow?: boolean;
     placement?: 'left' | 'right';
     class?: string;
+    /** 根元素自定义内联样式（透传，叠加在宽度样式之后）。 */
+    style?: string;
+    /** 可访问性标签（透传到 aside 的 aria-label，描述该 Sider 作用）。 */
+    ariaLabel?: string;
+    /** 可访问性 role（透传到根元素）。 */
+    role?: string;
     onCollapse?: (collapsed: boolean, trigger: SiderTrigger) => void;
+    /** 触发响应式断点时的回调（matched=是否命中 max-width 断点）。 */
+    onBreakpoint?: (matched: boolean, breakpoint: Breakpoint) => void;
     children?: Snippet;
     /** custom trigger; receives current collapsed + toggle */
     trigger?: Snippet<[{

package/dist/layout/Sider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sider.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Sider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEH,KAAK,UAAU,EAEf,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;CACjE;AAyHH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Sider.svelte.d.ts","sourceRoot":"","sources":["../../src/layout/Sider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEH,KAAK,UAAU,EAEf,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;CACjE;AA0IH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/layout/meta.d.ts

@@ -18,6 +18,22 @@ export declare const meta: {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性标签";
+        }, {
+            readonly name: "role";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性 role";
         }];
     }, {
         readonly name: "Layout.Header";
@@ -36,6 +52,22 @@ export declare const meta: {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性标签";
+        }, {
+            readonly name: "role";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性 role";
         }];
     }, {
         readonly name: "Layout.Footer";
@@ -53,6 +85,22 @@ export declare const meta: {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性标签";
+        }, {
+            readonly name: "role";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性 role";
         }];
     }, {
         readonly name: "Layout.Content";
@@ -66,6 +114,22 @@ export declare const meta: {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性标签";
+        }, {
+            readonly name: "role";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性 role";
         }];
     }, {
         readonly name: "Layout.Sider";
@@ -112,10 +176,31 @@ export declare const meta: {
             readonly name: "class";
             readonly type: "string";
             readonly default: "''";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性标签，描述该 Sider 作用";
+        }, {
+            readonly name: "role";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "可访问性 role";
         }, {
             readonly name: "onCollapse";
             readonly type: "(collapsed, trigger:'click'|'breakpoint')=>void";
             readonly default: "undefined";
+        }, {
+            readonly name: "onBreakpoint";
+            readonly type: "(matched: boolean, breakpoint) => void";
+            readonly default: "undefined";
+            readonly desc: "命中响应式断点时回调";
         }, {
             readonly name: "trigger";
             readonly type: "Snippet<[{collapsed,toggle}]>";
@@ -126,6 +211,9 @@ export declare const meta: {
     readonly events: readonly [{
         readonly name: "onCollapse";
         readonly desc: "Sider 收起状态变化，第二参数区分 click / breakpoint 触发来源";
+    }, {
+        readonly name: "onBreakpoint";
+        readonly desc: "Sider 命中响应式断点时触发，(matched, breakpoint)";
     }];
     readonly slots: readonly [{
         readonly name: "children";

package/dist/layout/meta.d.ts.map

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

package/dist/layout/meta.js

@@ -17,7 +17,10 @@ export const meta = {
                     default: 'undefined',
                     desc: '显式声明含侧边栏→row 方向；不传则由 Sider 挂载时自动检测',
                 },
-                { name: 'class', type: 'string', default: "''" },
+                { name: 'class', type: 'string', default: "''", desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '可访问性标签' },
+                { name: 'role', type: 'string', default: 'undefined', desc: '可访问性 role' },
             ],
         },
         {
@@ -26,7 +29,10 @@ export const meta = {
             props: [
                 { name: 'sticky', type: 'boolean', default: 'false', desc: 'position:sticky top:0' },
                 { name: 'height', type: 'string|number', default: 'undefined', desc: 'number→px，覆盖 token 高度' },
-                { name: 'class', type: 'string', default: "''" },
+                { name: 'class', type: 'string', default: "''", desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '可访问性标签' },
+                { name: 'role', type: 'string', default: 'undefined', desc: '可访问性 role' },
             ],
         },
         {
@@ -35,7 +41,10 @@ export const meta = {
             props: [
                 { name: 'sticky', type: 'boolean', default: 'false', desc: 'position:sticky bottom:0' },
                 { name: 'height', type: 'string|number', default: 'undefined' },
-                { name: 'class', type: 'string', default: "''" },
+                { name: 'class', type: 'string', default: "''", desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '可访问性标签' },
+                { name: 'role', type: 'string', default: 'undefined', desc: '可访问性 role' },
             ],
         },
         {
@@ -48,7 +57,10 @@ export const meta = {
                     default: 'false',
                     desc: 'true→token padding；number→px；string→原样；false→0',
                 },
-                { name: 'class', type: 'string', default: "''" },
+                { name: 'class', type: 'string', default: "''", desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '可访问性标签' },
+                { name: 'role', type: 'string', default: 'undefined', desc: '可访问性 role' },
             ],
         },
         {
@@ -63,14 +75,19 @@ export const meta = {
                 { name: 'breakpoint', type: "'xs'|'sm'|'md'|'lg'|'xl'|'xxl'", default: 'undefined', desc: '低于断点自动收起' },
                 { name: 'reverseArrow', type: 'boolean', default: 'false', desc: '反转触发器箭头方向' },
                 { name: 'placement', type: "'left'|'right'", default: "'left'" },
-                { name: 'class', type: 'string', default: "''" },
+                { name: 'class', type: 'string', default: "''", desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '可访问性标签，描述该 Sider 作用' },
+                { name: 'role', type: 'string', default: 'undefined', desc: '可访问性 role' },
                 { name: 'onCollapse', type: "(collapsed, trigger:'click'|'breakpoint')=>void", default: 'undefined' },
+                { name: 'onBreakpoint', type: '(matched: boolean, breakpoint) => void', default: 'undefined', desc: '命中响应式断点时回调' },
                 { name: 'trigger', type: 'Snippet<[{collapsed,toggle}]>', default: 'undefined', desc: '自定义触发器' },
             ],
         },
     ],
     events: [
         { name: 'onCollapse', desc: 'Sider 收起状态变化，第二参数区分 click / breakpoint 触发来源' },
+        { name: 'onBreakpoint', desc: 'Sider 命中响应式断点时触发，(matched, breakpoint)' },
     ],
     slots: [
         { name: 'children', desc: '各子组件内容' },

package/dist/list/List.svelte

@@ -743,7 +743,7 @@
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    gap: var(--cd-spacing-3, 12px);
+    gap: var(--cd-spacing-base-tight, 12px);
   }
 
   .cd-list__header {
@@ -785,7 +785,7 @@
   .cd-list__item--selectable {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-tight, 8px);
     cursor: pointer;
     outline: none;
   }
@@ -871,7 +871,7 @@
     block-size: 1.5em;
     border: 2px solid var(--cd-list-split-color);
     border-block-start-color: var(--cd-color-primary, currentColor);
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
     animation: cd-list-spin 0.7s linear infinite;
   }
 

package/dist/list/ListItem.svelte

@@ -129,13 +129,13 @@
   }
   .cd-list__item-header {
     font-weight: var(--cd-font-weight-medium, 500);
-    margin-block-end: var(--cd-spacing-1, 4px);
+    margin-block-end: var(--cd-spacing-extra-tight, 4px);
     color: var(--cd-color-text-0);
   }
   .cd-list__item-row {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-3, 12px);
+    gap: var(--cd-spacing-base-tight, 12px);
   }
   .cd-list__item-content {
     flex: 1;
@@ -146,14 +146,14 @@
   }
   .cd-list__item-actions {
     display: flex;
-    gap: var(--cd-spacing-3, 12px);
-    margin-block-start: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-base-tight, 12px);
+    margin-block-start: var(--cd-spacing-tight, 8px);
   }
 
   .cd-list__item--selectable {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-2, 8px);
+    gap: var(--cd-spacing-tight, 8px);
     cursor: pointer;
     outline: none;
   }

package/dist/list/ListMeta.svelte

@@ -46,7 +46,7 @@
   .cd-list__meta {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-3, 12px);
+    gap: var(--cd-spacing-base-tight, 12px);
     flex: 1;
     min-inline-size: 0;
   }

package/dist/list/meta.d.ts

@@ -166,7 +166,7 @@ export declare const meta: {
         readonly focusable: false;
         readonly notes: readonly ["ul/li 原生列表语义；selectable 时容器 role=listbox（multiple 加 aria-multiselectable），行 role=option + aria-selected", "selectable 行 tabindex=0，Space/Enter 切换选中；multiple 支持 shift 连选", "loading 时根容器 aria-busy=true", "骨架行 aria-hidden=true，spinner aria-hidden=true", "虚拟化行带 aria-setsize/aria-posinset"];
     };
-    readonly tokens: readonly ["--cd-list-bg", "--cd-list-border", "--cd-list-radius", "--cd-list-item-padding", "--cd-list-item-padding-small", "--cd-list-split-color", "--cd-list-header-color", "--cd-list-item-color", "--cd-radius-full", "--cd-radius-small", "--cd-color-primary"];
+    readonly tokens: readonly ["--cd-list-bg", "--cd-list-border", "--cd-list-radius", "--cd-list-item-padding", "--cd-list-item-padding-small", "--cd-list-split-color", "--cd-list-header-color", "--cd-list-item-color", "--cd-border-radius-full", "--cd-border-radius-small", "--cd-color-primary"];
     readonly examples: readonly [{
         readonly title: "基础";
         readonly code: "{#snippet item(d)}<span>{d.title}</span>{/snippet}\n<List dataSource={data} renderItem={item} bordered />";

package/dist/list/meta.js

@@ -84,8 +84,8 @@ export const meta = {
         '--cd-list-split-color',
         '--cd-list-header-color',
         '--cd-list-item-color',
-        '--cd-radius-full',
-        '--cd-radius-small',
+        '--cd-border-radius-full',
+        '--cd-border-radius-small',
         '--cd-color-primary',
     ],
     examples: [