@chenzy-design/svelte 0.1.0

package/dist/badge/Badge.svelte

@@ -0,0 +1,328 @@
+<!--
+  Badge — see specs/components/show/Badge.spec.md
+  Wrapper-mode count/dot superscript OR standalone status dot.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type BadgeType =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'warning'
+    | 'danger';
+  type BadgeTheme = 'solid' | 'light';
+  type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  type BadgeSize = 'small' | 'default';
+  type BadgeStatus = 'default' | 'success' | 'processing' | 'error' | 'warning';
+
+  interface Props {
+    count?: number | string;
+    dot?: boolean;
+    overflowCount?: number;
+    showZero?: boolean;
+    type?: BadgeType;
+    theme?: BadgeTheme;
+    position?: BadgePosition;
+    offset?: [number, number];
+    size?: BadgeSize;
+    status?: BadgeStatus;
+    /** count 变化时播放滚动数字动画，默认 true。 */
+    scrollNumberMotion?: boolean;
+    children?: Snippet;
+    countContent?: Snippet;
+  }
+
+  let {
+    count,
+    dot = false,
+    overflowCount = 99,
+    showZero = false,
+    type = 'danger',
+    theme = 'solid',
+    position = 'top-right',
+    offset = [0, 0],
+    size = 'default',
+    status,
+    scrollNumberMotion = true,
+    children,
+    countContent,
+  }: Props = $props();
+
+  // count 变化时触发滚动动画
+  let motionActive = $state(false);
+  let prevDisplayCount = $state(displayCount);
+
+  $effect(() => {
+    const current = displayCount;
+    if (!scrollNumberMotion || dot || !showCount) return;
+    if (current !== prevDisplayCount) {
+      prevDisplayCount = current;
+      motionActive = false;
+      // 用微任务触发重排，确保 class 移除后再加回来
+      Promise.resolve().then(() => {
+        motionActive = true;
+      });
+    }
+  });
+
+  const isNumber = $derived(typeof count === 'number');
+
+  // displayed count text (overflow handling)
+  const displayCount = $derived.by(() => {
+    if (typeof count === 'number') {
+      return count > overflowCount ? `${overflowCount}+` : String(count);
+    }
+    return count ?? '';
+  });
+
+  // whether a numeric/text count badge should be shown
+  const showCount = $derived.by(() => {
+    if (dot) return true;
+    if (countContent) return true;
+    if (isNumber) {
+      if (count === 0 && !showZero) return false;
+      return true;
+    }
+    return count !== undefined && count !== '';
+  });
+
+  // standalone status-dot mode: status set and no wrapped children
+  const standalone = $derived(status !== undefined && !children);
+
+  const statusColor = $derived(
+    status === 'success'
+      ? 'var(--cd-color-success)'
+      : status === 'error'
+        ? 'var(--cd-color-danger)'
+        : status === 'warning'
+          ? 'var(--cd-color-warning)'
+          : status === 'processing'
+            ? 'var(--cd-color-primary)'
+            : 'var(--cd-color-text-3)',
+  );
+
+  const supStyle = $derived(
+    `inset-block-${position.startsWith('top') ? 'start' : 'end'}:${offset[1]}px;` +
+      `inset-inline-${position.endsWith('right') ? 'end' : 'start'}:${offset[0]}px`,
+  );
+
+  const supCls = $derived(
+    [
+      'cd-badge__sup',
+      `cd-badge__sup--${type}`,
+      `cd-badge__sup--${theme}`,
+      `cd-badge__sup--${size}`,
+      `cd-badge__sup--${position}`,
+      dot && 'cd-badge__sup--dot',
+      scrollNumberMotion && motionActive && !dot && 'cd-badge__count--motion',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const supAriaLabel = $derived(dot ? undefined : String(displayCount));
+</script>
+
+{#if standalone}
+  <span class="cd-badge cd-badge--status" role="status">
+    <span
+      class="cd-badge__status-dot"
+      class:cd-badge__status-dot--processing={status === 'processing'}
+      style="background:{statusColor}"
+      aria-hidden="true"
+    ></span>
+    {#if count !== undefined && count !== ''}
+      <span class="cd-badge__status-text">{count}</span>
+    {/if}
+  </span>
+{:else}
+  <span class="cd-badge">
+    {@render children?.()}
+    {#if showCount}
+      <sup class={supCls} style={supStyle} aria-label={supAriaLabel}>
+        {#if dot}
+          <!-- dot only -->
+        {:else if countContent}
+          {@render countContent()}
+        {:else}
+          {displayCount}
+        {/if}
+      </sup>
+    {/if}
+  </span>
+{/if}
+
+<style>
+  .cd-badge {
+    position: relative;
+    display: inline-flex;
+    line-height: 1;
+  }
+  .cd-badge--status {
+    align-items: center;
+    gap: var(--cd-spacing-2);
+  }
+
+  .cd-badge__sup {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-inline-size: var(--cd-badge-size);
+    block-size: var(--cd-badge-size);
+    padding-inline: var(--cd-spacing-1);
+    border-radius: var(--cd-radius-full);
+    background: var(--cd-badge-bg);
+    color: var(--cd-badge-color);
+    font-size: var(--cd-badge-font-size);
+    font-weight: var(--cd-font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    box-shadow: 0 0 0 1px var(--cd-color-bg-0);
+  }
+  .cd-badge__sup--small {
+    min-inline-size: var(--cd-badge-size-small);
+    block-size: var(--cd-badge-size-small);
+  }
+  .cd-badge__sup--dot {
+    min-inline-size: var(--cd-badge-dot-size);
+    inline-size: var(--cd-badge-dot-size);
+    block-size: var(--cd-badge-dot-size);
+    padding: 0;
+  }
+
+  /* corner placement (default offsets translate over the edge) */
+  .cd-badge__sup--top-right {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+  }
+  .cd-badge__sup--top-left {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transform: translate(-50%, -50%);
+  }
+  .cd-badge__sup--bottom-right {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, 50%);
+  }
+  .cd-badge__sup--bottom-left {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  /* type → semantic color (solid) */
+  .cd-badge__sup--solid.cd-badge__sup--primary {
+    background: var(--cd-color-primary);
+    color: var(--cd-color-text-inverse);
+  }
+  .cd-badge__sup--solid.cd-badge__sup--secondary {
+    background: var(--cd-color-text-2);
+    color: var(--cd-color-text-inverse);
+  }
+  .cd-badge__sup--solid.cd-badge__sup--tertiary {
+    background: var(--cd-color-text-3);
+    color: var(--cd-color-text-inverse);
+  }
+  .cd-badge__sup--solid.cd-badge__sup--success {
+    background: var(--cd-color-success);
+    color: var(--cd-color-text-inverse);
+  }
+  .cd-badge__sup--solid.cd-badge__sup--warning {
+    background: var(--cd-color-warning);
+    color: var(--cd-color-text-inverse);
+  }
+  .cd-badge__sup--solid.cd-badge__sup--danger {
+    background: var(--cd-color-danger);
+    color: var(--cd-color-text-inverse);
+  }
+
+  /* light theme: tinted background + colored text */
+  .cd-badge__sup--light.cd-badge__sup--primary {
+    background: color-mix(in srgb, var(--cd-color-primary) 16%, var(--cd-color-bg-0));
+    color: var(--cd-color-primary);
+  }
+  .cd-badge__sup--light.cd-badge__sup--secondary {
+    background: var(--cd-color-fill-0);
+    color: var(--cd-color-text-1);
+  }
+  .cd-badge__sup--light.cd-badge__sup--tertiary {
+    background: var(--cd-color-fill-1);
+    color: var(--cd-color-text-2);
+  }
+  .cd-badge__sup--light.cd-badge__sup--success {
+    background: color-mix(in srgb, var(--cd-color-success) 16%, var(--cd-color-bg-0));
+    color: var(--cd-color-success);
+  }
+  .cd-badge__sup--light.cd-badge__sup--warning {
+    background: color-mix(in srgb, var(--cd-color-warning) 16%, var(--cd-color-bg-0));
+    color: var(--cd-color-warning);
+  }
+  .cd-badge__sup--light.cd-badge__sup--danger {
+    background: color-mix(in srgb, var(--cd-color-danger) 16%, var(--cd-color-bg-0));
+    color: var(--cd-color-danger);
+  }
+
+  /* standalone status dot */
+  .cd-badge__status-dot {
+    display: inline-block;
+    inline-size: var(--cd-badge-dot-size);
+    block-size: var(--cd-badge-dot-size);
+    border-radius: var(--cd-radius-full);
+    flex: 0 0 auto;
+  }
+  .cd-badge__status-dot--processing {
+    position: relative;
+  }
+  .cd-badge__status-dot--processing::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    animation: cd-badge-pulse 1.2s ease-in-out infinite;
+  }
+  .cd-badge__status-text {
+    color: var(--cd-color-text-1);
+    font-size: var(--cd-font-size-2);
+  }
+
+  @keyframes cd-badge-pulse {
+    0% {
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    100% {
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+  @keyframes cd-badge-count-up {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  :global(.cd-badge__count--motion) {
+    animation: cd-badge-count-up 0.2s var(--cd-motion-ease-standard, ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cd-badge__status-dot--processing::after {
+      animation: none;
+    }
+    :global(.cd-badge__count--motion) {
+      animation: none;
+    }
+  }
+</style>

package/dist/badge/Badge.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+type BadgeTheme = 'solid' | 'light';
+type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BadgeSize = 'small' | 'default';
+type BadgeStatus = 'default' | 'success' | 'processing' | 'error' | 'warning';
+interface Props {
+    count?: number | string;
+    dot?: boolean;
+    overflowCount?: number;
+    showZero?: boolean;
+    type?: BadgeType;
+    theme?: BadgeTheme;
+    position?: BadgePosition;
+    offset?: [number, number];
+    size?: BadgeSize;
+    status?: BadgeStatus;
+    /** count 变化时播放滚动数字动画，默认 true。 */
+    scrollNumberMotion?: boolean;
+    children?: Snippet;
+    countContent?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/badge/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../src/badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AACb,KAAK,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AACpC,KAAK,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAC/E,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACrC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9E,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAkIH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/badge/BadgeA11yFixture.svelte

@@ -0,0 +1,18 @@
+<!--
+  Badge a11y 测试夹具：不注入 children，使独立状态点（standalone）形态生效。
+  （renderWithLocale 的 harness 恒注入空 children snippet，会让 Badge 走 count 角标形态。）
+  自带 LocaleProvider，故测试直接 render 本夹具。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import Badge from './Badge.svelte';
+
+  interface Props {
+    props?: Record<string, unknown>;
+  }
+  let { props = {} }: Props = $props();
+</script>
+
+<LocaleProvider locale="en_US">
+  <Badge {...props} />
+</LocaleProvider>

package/dist/badge/BadgeA11yFixture.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    props?: Record<string, unknown>;
+}
+declare const BadgeA11yFixture: import("svelte").Component<Props, {}, "">;
+type BadgeA11yFixture = ReturnType<typeof BadgeA11yFixture>;
+export default BadgeA11yFixture;
+//# sourceMappingURL=BadgeA11yFixture.svelte.d.ts.map

package/dist/badge/BadgeA11yFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeA11yFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/badge/BadgeA11yFixture.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAeH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/badge/index.d.ts

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

package/dist/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/badge/index.js

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

package/dist/badge/meta.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Badge — see specs/components/show/Badge.spec.md
+ */
+export declare const meta: {
+    readonly name: "Badge";
+    readonly category: "show";
+    readonly description: "徽标：包裹模式在子元素角落显示 count/dot 角标(支持 overflowCount、showZero、position、offset)；独立 status 点模式显示状态点 + 可选文字。";
+    readonly exports: readonly ["Badge"];
+    readonly props: readonly [{
+        readonly name: "count";
+        readonly type: "number|string";
+        readonly default: "undefined";
+        readonly desc: "角标内容";
+    }, {
+        readonly name: "dot";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "小圆点模式，忽略 count";
+    }, {
+        readonly name: "overflowCount";
+        readonly type: "number";
+        readonly default: "99";
+        readonly desc: "超出显示 {n}+";
+    }, {
+        readonly name: "showZero";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "count=0 时是否显示";
+    }, {
+        readonly name: "type";
+        readonly type: "'primary'|'secondary'|'tertiary'|'success'|'warning'|'danger'";
+        readonly default: "'danger'";
+    }, {
+        readonly name: "theme";
+        readonly type: "'solid'|'light'";
+        readonly default: "'solid'";
+    }, {
+        readonly name: "position";
+        readonly type: "'top-right'|'top-left'|'bottom-right'|'bottom-left'";
+        readonly default: "'top-right'";
+    }, {
+        readonly name: "offset";
+        readonly type: "[number, number]";
+        readonly default: "[0, 0]";
+        readonly desc: "[x, y] 偏移(px)";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'";
+        readonly default: "'default'";
+    }, {
+        readonly name: "status";
+        readonly type: "'default'|'success'|'processing'|'error'|'warning'";
+        readonly default: "undefined";
+        readonly desc: "设置且无 children 时进入独立状态点模式";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "被包裹元素";
+    }, {
+        readonly name: "countContent";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "自定义角标内容";
+    }];
+    readonly events: readonly [];
+    readonly slots: readonly [{
+        readonly name: "children";
+        readonly desc: "被角标包裹的元素";
+    }, {
+        readonly name: "countContent";
+        readonly desc: "自定义角标内容";
+    }];
+    readonly a11y: {
+        readonly hasRole: false;
+        readonly focusable: false;
+        readonly note: "角标 sup 带 aria-label(count 值)；dot 模式与状态点 aria-hidden。";
+    };
+    readonly tokens: readonly ["--cd-badge-size", "--cd-badge-size-small", "--cd-badge-dot-size", "--cd-badge-bg", "--cd-badge-color", "--cd-badge-font-size"];
+    readonly responsive: false;
+    readonly examples: readonly [{
+        readonly title: "计数";
+        readonly code: "<Badge count={5}><Avatar alt=\"A\" /></Badge>";
+    }, {
+        readonly title: "溢出";
+        readonly code: "<Badge count={120} overflowCount={99}>...</Badge>";
+    }, {
+        readonly title: "状态点";
+        readonly code: "<Badge status=\"success\" count=\"已完成\" />";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

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

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

package/dist/badge/meta.js

@@ -0,0 +1,61 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Badge — see specs/components/show/Badge.spec.md
+ */
+export const meta = {
+    name: 'Badge',
+    category: 'show',
+    description: '徽标：包裹模式在子元素角落显示 count/dot 角标(支持 overflowCount、showZero、position、offset)；独立 status 点模式显示状态点 + 可选文字。',
+    exports: ['Badge'],
+    props: [
+        { name: 'count', type: 'number|string', default: 'undefined', desc: '角标内容' },
+        { name: 'dot', type: 'boolean', default: 'false', desc: '小圆点模式，忽略 count' },
+        { name: 'overflowCount', type: 'number', default: '99', desc: '超出显示 {n}+' },
+        { name: 'showZero', type: 'boolean', default: 'false', desc: 'count=0 时是否显示' },
+        {
+            name: 'type',
+            type: "'primary'|'secondary'|'tertiary'|'success'|'warning'|'danger'",
+            default: "'danger'",
+        },
+        { name: 'theme', type: "'solid'|'light'", default: "'solid'" },
+        {
+            name: 'position',
+            type: "'top-right'|'top-left'|'bottom-right'|'bottom-left'",
+            default: "'top-right'",
+        },
+        { name: 'offset', type: '[number, number]', default: '[0, 0]', desc: '[x, y] 偏移(px)' },
+        { name: 'size', type: "'small'|'default'", default: "'default'" },
+        {
+            name: 'status',
+            type: "'default'|'success'|'processing'|'error'|'warning'",
+            default: 'undefined',
+            desc: '设置且无 children 时进入独立状态点模式',
+        },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '被包裹元素' },
+        { name: 'countContent', type: 'Snippet', default: 'undefined', desc: '自定义角标内容' },
+    ],
+    events: [],
+    slots: [
+        { name: 'children', desc: '被角标包裹的元素' },
+        { name: 'countContent', desc: '自定义角标内容' },
+    ],
+    a11y: {
+        hasRole: false,
+        focusable: false,
+        note: '角标 sup 带 aria-label(count 值)；dot 模式与状态点 aria-hidden。',
+    },
+    tokens: [
+        '--cd-badge-size',
+        '--cd-badge-size-small',
+        '--cd-badge-dot-size',
+        '--cd-badge-bg',
+        '--cd-badge-color',
+        '--cd-badge-font-size',
+    ],
+    responsive: false,
+    examples: [
+        { title: '计数', code: '<Badge count={5}><Avatar alt="A" /></Badge>' },
+        { title: '溢出', code: '<Badge count={120} overflowCount={99}>...</Badge>' },
+        { title: '状态点', code: '<Badge status="success" count="已完成" />' },
+    ],
+};

package/dist/banner/Banner.a11y.test.d.ts

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

package/dist/banner/Banner.a11y.test.d.ts.map

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

package/dist/banner/Banner.a11y.test.js

@@ -0,0 +1,43 @@
+// Banner a11y：内嵌反馈横幅。role/aria-live 由 core resolveBannerRole(type, dynamic) 推断：
+//  - 非 dynamic（默认）→ role=region（landmark，需可访问名：title 或 ariaLabel）。
+//  - dynamic + danger/warning → role=alert + aria-live=assertive。
+//  - dynamic + info/success → role=status + aria-live=polite。
+// 注意：region landmark 必须有可访问名，否则触发 axe [region]/[landmark]，故测试均提供 title。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Banner from './Banner.svelte';
+describe('Banner a11y', () => {
+    it('默认 info：role=region + title 提供可访问名（aria-labelledby），无 axe violations', async () => {
+        const { container } = renderWithLocale(Banner, {
+            props: { type: 'info', title: 'System notice', description: 'All good.' },
+        });
+        const banner = container.querySelector('.cd-banner');
+        expect(banner?.getAttribute('role')).toBe('region');
+        // region 可访问名来自 title（aria-labelledby 指向标题元素）。
+        const labelledby = banner?.getAttribute('aria-labelledby');
+        expect(labelledby).toBeTruthy();
+        expect(labelledby ? container.querySelector(`#${labelledby}`)?.textContent : '').toContain('System notice');
+        await expectNoAxeViolations(container);
+    });
+    it('dynamic + danger：role=alert + aria-live=assertive，无 axe violations', async () => {
+        const { container } = renderWithLocale(Banner, {
+            props: { type: 'danger', dynamic: true, title: 'Failed', closable: false },
+        });
+        const banner = container.querySelector('.cd-banner');
+        expect(banner?.getAttribute('role')).toBe('alert');
+        expect(banner?.getAttribute('aria-live')).toBe('assertive');
+        await expectNoAxeViolations(container);
+    });
+    it('dynamic + success：role=status + aria-live=polite，无 axe violations', async () => {
+        const { container } = renderWithLocale(Banner, {
+            props: { type: 'success', dynamic: true, title: 'Saved' },
+        });
+        const banner = container.querySelector('.cd-banner');
+        expect(banner?.getAttribute('role')).toBe('status');
+        expect(banner?.getAttribute('aria-live')).toBe('polite');
+        // 关闭按钮可访问名来自 locale（验证 LocaleProvider 管线）。
+        const closeBtn = container.querySelector('.cd-banner__close');
+        expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
+        await expectNoAxeViolations(container);
+    });
+});