@chenzy-design/svelte 0.1.0

package/dist/radio/RadioGroup.svelte

@@ -0,0 +1,199 @@
+<!--
+  RadioGroup — see specs/components/input/Radio.spec.md
+  WAI-ARIA radiogroup pattern: roving tabindex + arrow-key navigation.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useId } from '@chenzy-design/core';
+  import Radio from './Radio.svelte';
+  import {
+    setRadioGroupContext,
+    type RadioValue,
+    type RadioSize,
+    type RadioStatus,
+    type RadioType,
+    type RadioRegistration,
+  } from './context.js';
+
+  type OptionObject = { label: string; value: RadioValue; disabled?: boolean; extra?: string };
+
+  interface Props {
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    name?: string;
+    options?: OptionObject[];
+    disabled?: boolean;
+    size?: RadioSize;
+    status?: RadioStatus;
+    type?: RadioType;
+    direction?: 'horizontal' | 'vertical';
+    onChange?: (v: RadioValue) => void;
+    children?: Snippet;
+    ariaLabel?: string;
+    /** 关联组的可见标题元素 id（无内置标题时用，优先于 ariaLabel 体现可访问名）。 */
+    ariaLabelledby?: string;
+  }
+
+  let {
+    value = $bindable(),
+    defaultValue,
+    name,
+    options,
+    disabled = false,
+    size = 'default',
+    status = 'default',
+    type = 'default',
+    direction = 'horizontal',
+    onChange,
+    children,
+    ariaLabel,
+    ariaLabelledby,
+  }: Props = $props();
+
+  let rootEl = $state<HTMLDivElement | null>(null);
+
+  const groupName = resolveName();
+
+  function resolveName(): string {
+    return name ?? useId('cd-radio');
+  }
+
+  const isControlled = $derived(value !== undefined);
+  let inner = $state<RadioValue | undefined>(getInitialValue());
+
+  function getInitialValue(): RadioValue | undefined {
+    return defaultValue;
+  }
+
+  const selected = $derived(isControlled ? value : inner);
+
+  // Insertion-ordered registry of radios (matches DOM order). PLAIN (non-reactive)
+  // on purpose: radios push to it while mounting. It is read ONLY inside keyboard
+  // event handlers (moveTo) — never during render — so registration never feeds
+  // back into a render-read. This is what keeps the component loop-free
+  // (effect_update_depth_exceeded comes from render reading state that mount writes).
+  const registry: RadioRegistration[] = [];
+
+  function select(v: RadioValue) {
+    if (disabled) return;
+    // Controlled (`value=` / `bind:value`): parent owns `value`; propagate only
+    // via `onChange`. Writing the prop AND firing `onChange` loops.
+    // Uncontrolled: keep our own state in sync.
+    if (!isControlled) inner = v;
+    onChange?.(v);
+  }
+
+  function register(reg: RadioRegistration): () => void {
+    registry.push(reg);
+    return () => {
+      const i = registry.indexOf(reg);
+      if (i !== -1) registry.splice(i, 1);
+    };
+  }
+
+  // Roving tabindex tab stop, computed from `selected` ALONE (no registry read
+  // during render → no loop). Per WAI-ARIA APG: when a radio is selected it owns
+  // the tab stop; when nothing is selected every radio is reachable by Tab
+  // (tabindex=0) and Arrow keys then select one. `selected` is the only reactive
+  // input, so this is render-safe.
+  function isTabStop(v: RadioValue, radioDisabled: boolean): boolean {
+    if (radioDisabled || disabled) return false;
+    if (selected === undefined) return true; // none selected → all are tab stops
+    return v === selected;
+  }
+
+  function moveTo(index: number) {
+    const enabled = registry.filter((r) => !r.disabled);
+    if (enabled.length === 0) return;
+    const target = enabled[(index + enabled.length) % enabled.length];
+    if (!target) return;
+    select(target.value);
+    target.el.focus();
+  }
+
+  function onKeydown(e: KeyboardEvent, current: RadioValue) {
+    if (disabled) return;
+    const enabled = registry.filter((r) => !r.disabled);
+    const idx = enabled.findIndex((r) => r.value === current);
+    if (idx === -1) return;
+    // RTL：水平方向键语义翻转（左右镜像）。读 getComputedStyle 仅在事件里，render 不依赖。
+    const rtl =
+      rootEl != null && getComputedStyle(rootEl).direction === 'rtl';
+    let key = e.key;
+    if (rtl && key === 'ArrowRight') key = 'ArrowLeft';
+    else if (rtl && key === 'ArrowLeft') key = 'ArrowRight';
+    switch (key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        e.preventDefault();
+        moveTo(idx + 1);
+        break;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        e.preventDefault();
+        moveTo(idx - 1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        moveTo(0);
+        break;
+      case 'End':
+        e.preventDefault();
+        moveTo(enabled.length - 1);
+        break;
+      default:
+        break;
+    }
+  }
+
+  setRadioGroupContext({
+    name: groupName,
+    getSelected: () => selected,
+    getDisabled: () => disabled,
+    getSize: () => size,
+    getStatus: () => status,
+    getType: () => type,
+    select,
+    register,
+    onKeydown,
+    isTabStop,
+  });
+
+  const cls = $derived(
+    `cd-radio-group cd-radio-group--${direction} cd-radio-group--${type}`,
+  );
+</script>
+
+<div
+  class={cls}
+  bind:this={rootEl}
+  role="radiogroup"
+  aria-labelledby={ariaLabelledby}
+  aria-label={ariaLabelledby ? undefined : ariaLabel}
+  aria-invalid={status === 'error' ? 'true' : undefined}
+>
+  {#if options}
+    {#each options as opt (opt.value)}
+      <Radio value={opt.value} disabled={opt.disabled ?? false} extra={opt.extra}>{opt.label}</Radio
+      >
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>
+
+<style>
+  .cd-radio-group {
+    display: inline-flex;
+    gap: var(--cd-spacing-4);
+  }
+  .cd-radio-group--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .cd-radio-group--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+</style>

package/dist/radio/RadioGroup.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import { type RadioValue, type RadioSize, type RadioStatus, type RadioType } from './context.js';
+type OptionObject = {
+    label: string;
+    value: RadioValue;
+    disabled?: boolean;
+    extra?: string;
+};
+interface Props {
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    name?: string;
+    options?: OptionObject[];
+    disabled?: boolean;
+    size?: RadioSize;
+    status?: RadioStatus;
+    type?: RadioType;
+    direction?: 'horizontal' | 'vertical';
+    onChange?: (v: RadioValue) => void;
+    children?: Snippet;
+    ariaLabel?: string;
+    /** 关联组的可见标题元素 id（无内置标题时用，优先于 ariaLabel 体现可访问名）。 */
+    ariaLabelledby?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/radio/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/radio/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEH,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAGtB,KAAK,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7F,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0JH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/radio/RadioGroupKbdFixture.svelte

@@ -0,0 +1,21 @@
+<!--
+  仅供 RadioGroup.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
+  WAI-ARIA radiogroup：roving tabindex + 方向键导航即选中（真实焦点）。
+  defaultValue 选中一项，使其为单一 Tab 停靠点。前后各放按钮验证 Tab 进/出。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import RadioGroup from './RadioGroup.svelte';
+
+  const options = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry' },
+  ];
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before">before</button>
+  <RadioGroup {options} defaultValue="apple" ariaLabel="Fruit" />
+  <button type="button" data-testid="after">after</button>
+</LocaleProvider>

package/dist/radio/RadioGroupKbdFixture.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 RadioGroupKbdFixture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioGroupKbdFixture = InstanceType<typeof RadioGroupKbdFixture>;
+export default RadioGroupKbdFixture;
+//# sourceMappingURL=RadioGroupKbdFixture.svelte.d.ts.map

package/dist/radio/RadioGroupKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/radio/RadioGroupKbdFixture.svelte.ts"],"names":[],"mappings":"AA0BA,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,oBAAoB;;kBAA+E,CAAC;AACxF,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACxE,eAAe,oBAAoB,CAAC"}

package/dist/radio/context.d.ts

@@ -0,0 +1,31 @@
+export type RadioValue = string | number | boolean;
+export type RadioSize = 'small' | 'default' | 'large';
+export type RadioStatus = 'default' | 'warning' | 'error';
+export type RadioType = 'default' | 'button' | 'card' | 'pureCard';
+export interface RadioRegistration {
+    value: RadioValue;
+    disabled: boolean;
+    /** focusable element to receive roving focus: native input (default) or role=radio container (button/card) */
+    el: HTMLElement;
+}
+export interface RadioGroupContext {
+    /** group name shared by all radios */
+    name: string;
+    getSelected: () => RadioValue | undefined;
+    getDisabled: () => boolean;
+    getSize: () => RadioSize;
+    /** group-level validation status; per-item non-default status overrides it */
+    getStatus: () => RadioStatus;
+    /** group-level render form (default/button/card/pureCard) */
+    getType: () => RadioType;
+    select: (v: RadioValue) => void;
+    /** register a radio's input element + meta for roving focus management */
+    register: (reg: RadioRegistration) => () => void;
+    /** keydown handler implementing roving tabindex / arrow navigation */
+    onKeydown: (e: KeyboardEvent, current: RadioValue) => void;
+    /** whether this radio should be the roving tab stop (tabindex=0) */
+    isTabStop: (v: RadioValue, disabled: boolean) => boolean;
+}
+export declare function setRadioGroupContext(ctx: RadioGroupContext): void;
+export declare function getRadioGroupContext(): RadioGroupContext | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/radio/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/radio/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,8GAA8G;IAC9G,EAAE,EAAE,WAAW,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,SAAS,CAAC;IACzB,8EAA8E;IAC9E,SAAS,EAAE,MAAM,WAAW,CAAC;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,MAAM,SAAS,CAAC;IACzB,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,IAAI,CAAC;IACjD,sEAAsE;IACtE,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,oEAAoE;IACpE,SAAS,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC;CAC1D;AAID,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,iBAAiB,GAAG,IAAI,CAEjE;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,SAAS,CAEpE"}

package/dist/radio/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('cd-radio-group');
+export function setRadioGroupContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getRadioGroupContext() {
+    return getContext(KEY);
+}

package/dist/radio/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Radio } from './Radio.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { meta as radioMeta } from './meta.js';
+export type { RadioValue, RadioSize, RadioGroupContext } from './context.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/radio/index.js

@@ -0,0 +1,3 @@
+export { default as Radio } from './Radio.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { meta as radioMeta } from './meta.js';

package/dist/radio/meta.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export declare const meta: {
+    readonly name: "Radio";
+    readonly category: "input";
+    readonly description: "单选框，通常置于 RadioGroup 中，遵循 WAI-ARIA radiogroup 模式（roving tabindex + 方向键）。";
+    readonly props: readonly [{
+        readonly name: "value";
+        readonly type: "string | number | boolean";
+        readonly default: "—";
+        readonly desc: "选项值（必填）";
+    }, {
+        readonly name: "checked";
+        readonly type: "boolean";
+        readonly default: "undefined";
+        readonly desc: "独立使用时受控选中";
+    }, {
+        readonly name: "defaultChecked";
+        readonly type: "boolean";
+        readonly default: "false";
+    }, {
+        readonly name: "disabled";
+        readonly type: "boolean";
+        readonly default: "false";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'|'large'";
+        readonly default: "default";
+    }, {
+        readonly name: "status";
+        readonly type: "'default'|'warning'|'error'";
+        readonly default: "default";
+        readonly desc: "校验态，影响边框色；继承 Group，非 default 单项可覆盖";
+    }, {
+        readonly name: "type";
+        readonly type: "'default'|'button'|'card'|'pureCard'";
+        readonly default: "继承 Group 或 default";
+        readonly desc: "button/card/pureCard 用 role=radio 容器 + aria-checked";
+    }, {
+        readonly name: "name";
+        readonly type: "string";
+        readonly default: "undefined";
+    }, {
+        readonly name: "extra";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "辅助说明，aria-describedby 关联";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "标签内容";
+    }, {
+        readonly name: "onChange";
+        readonly type: "(checked: boolean) => void";
+        readonly default: "undefined";
+    }];
+    readonly group: {
+        readonly name: "RadioGroup";
+        readonly props: readonly [{
+            readonly name: "value";
+            readonly type: "string | number | boolean";
+            readonly default: "undefined";
+            readonly desc: "受控选中值";
+        }, {
+            readonly name: "defaultValue";
+            readonly type: "string | number | boolean";
+            readonly default: "undefined";
+        }, {
+            readonly name: "name";
+            readonly type: "string";
+            readonly default: "useId()";
+        }, {
+            readonly name: "options";
+            readonly type: "Array<{label,value,disabled?,extra?}>";
+            readonly default: "undefined";
+        }, {
+            readonly name: "disabled";
+            readonly type: "boolean";
+            readonly default: "false";
+        }, {
+            readonly name: "size";
+            readonly type: "'small'|'default'|'large'";
+            readonly default: "default";
+        }, {
+            readonly name: "status";
+            readonly type: "'default'|'warning'|'error'";
+            readonly default: "default";
+            readonly desc: "整组校验态，经 context 透传给组内 Radio；error 时根元素 aria-invalid";
+        }, {
+            readonly name: "type";
+            readonly type: "'default'|'button'|'card'|'pureCard'";
+            readonly default: "default";
+            readonly desc: "整组形态，透传子项；非 default 用 role=radio + aria-checked";
+        }, {
+            readonly name: "direction";
+            readonly type: "'horizontal'|'vertical'";
+            readonly default: "horizontal";
+        }, {
+            readonly name: "onChange";
+            readonly type: "(v: string|number|boolean) => void";
+            readonly default: "undefined";
+        }, {
+            readonly name: "children";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+        }, {
+            readonly name: "ariaLabelledby";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "关联组可见标题 id（优先于 ariaLabel）";
+        }];
+    };
+    readonly a11y: {
+        readonly role: "radiogroup / radio";
+        readonly keyboard: readonly ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "Space"];
+        readonly notes: readonly ["div role=radiogroup 包裹", "roving tabindex：仅选中项（或首个可用项）tabindex=0", "方向键在可用项间循环移动并选中、聚焦，跳过 disabled", "Home/End 跳首/末可用项", "RTL（dir=rtl）下 ArrowLeft/ArrowRight 语义镜像翻转", "button/card/pureCard 型用容器 role=radio + aria-checked（非原生 input），Space/Enter 选中", "extra 经 aria-describedby 关联"];
+    };
+    readonly tokens: readonly ["--cd-radio-*", "--cd-focus-ring", "--cd-motion-*", "--cd-spacing-*", "--cd-radius-full"];
+};
+//# sourceMappingURL=meta.d.ts.map

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

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

package/dist/radio/meta.js

@@ -0,0 +1,68 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export const meta = {
+    name: 'Radio',
+    category: 'input',
+    description: '单选框，通常置于 RadioGroup 中，遵循 WAI-ARIA radiogroup 模式（roving tabindex + 方向键）。',
+    props: [
+        { name: 'value', type: 'string | number | boolean', default: '—', desc: '选项值（必填）' },
+        { name: 'checked', type: 'boolean', default: 'undefined', desc: '独立使用时受控选中' },
+        { name: 'defaultChecked', type: 'boolean', default: 'false' },
+        { name: 'disabled', type: 'boolean', default: 'false' },
+        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
+        {
+            name: 'status',
+            type: "'default'|'warning'|'error'",
+            default: 'default',
+            desc: '校验态，影响边框色；继承 Group，非 default 单项可覆盖',
+        },
+        { name: 'type', type: "'default'|'button'|'card'|'pureCard'", default: '继承 Group 或 default', desc: 'button/card/pureCard 用 role=radio 容器 + aria-checked' },
+        { name: 'name', type: 'string', default: 'undefined' },
+        { name: 'extra', type: 'string', default: 'undefined', desc: '辅助说明，aria-describedby 关联' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
+        { name: 'onChange', type: '(checked: boolean) => void', default: 'undefined' },
+    ],
+    group: {
+        name: 'RadioGroup',
+        props: [
+            { name: 'value', type: 'string | number | boolean', default: 'undefined', desc: '受控选中值' },
+            { name: 'defaultValue', type: 'string | number | boolean', default: 'undefined' },
+            { name: 'name', type: 'string', default: 'useId()' },
+            {
+                name: 'options',
+                type: 'Array<{label,value,disabled?,extra?}>',
+                default: 'undefined',
+            },
+            { name: 'disabled', type: 'boolean', default: 'false' },
+            { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
+            {
+                name: 'status',
+                type: "'default'|'warning'|'error'",
+                default: 'default',
+                desc: '整组校验态，经 context 透传给组内 Radio；error 时根元素 aria-invalid',
+            },
+            { name: 'type', type: "'default'|'button'|'card'|'pureCard'", default: 'default', desc: '整组形态，透传子项；非 default 用 role=radio + aria-checked' },
+            { name: 'direction', type: "'horizontal'|'vertical'", default: 'horizontal' },
+            { name: 'onChange', type: '(v: string|number|boolean) => void', default: 'undefined' },
+            { name: 'children', type: 'Snippet', default: 'undefined' },
+            { name: 'ariaLabel', type: 'string', default: 'undefined' },
+            { name: 'ariaLabelledby', type: 'string', default: 'undefined', desc: '关联组可见标题 id（优先于 ariaLabel）' },
+        ],
+    },
+    a11y: {
+        role: 'radiogroup / radio',
+        keyboard: ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Space'],
+        notes: [
+            'div role=radiogroup 包裹',
+            'roving tabindex：仅选中项（或首个可用项）tabindex=0',
+            '方向键在可用项间循环移动并选中、聚焦，跳过 disabled',
+            'Home/End 跳首/末可用项',
+            'RTL（dir=rtl）下 ArrowLeft/ArrowRight 语义镜像翻转',
+            'button/card/pureCard 型用容器 role=radio + aria-checked（非原生 input），Space/Enter 选中',
+            'extra 经 aria-describedby 关联',
+        ],
+    },
+    tokens: ['--cd-radio-*', '--cd-focus-ring', '--cd-motion-*', '--cd-spacing-*', '--cd-radius-full'],
+};

package/dist/rating/Rating.a11y.test.d.ts

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

package/dist/rating/Rating.a11y.test.d.ts.map

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

package/dist/rating/Rating.a11y.test.js

@@ -0,0 +1,38 @@
+// Rating a11y：APG slider 模式（role=slider + aria-valuenow/min/max/valuetext）。
+// 可访问名走 i18n（Rating.ariaLabel）；error 态 aria-invalid。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Rating from './Rating.svelte';
+describe('Rating a11y', () => {
+    it('默认渲染：role=slider + aria-valuenow/min/max，locale 可访问名，无 axe violations', async () => {
+        const { container } = renderWithLocale(Rating, { props: { defaultValue: 3 } });
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider).not.toBeNull();
+        expect(slider?.getAttribute('aria-valuenow')).toBe('3');
+        expect(slider?.getAttribute('aria-valuemin')).toBe('0');
+        expect(slider?.getAttribute('aria-valuemax')).toBe('5');
+        // 可访问名来自 en_US locale（Rating.ariaLabel），非 key 原样。
+        const label = slider?.getAttribute('aria-label');
+        expect(label).toBeTruthy();
+        expect(label).not.toBe('Rating.ariaLabel');
+        expect(slider?.getAttribute('aria-valuetext')).toBeTruthy();
+        await expectNoAxeViolations(container);
+    });
+    it('自定义 ariaLabel + error：aria-label / aria-invalid', async () => {
+        const { container } = renderWithLocale(Rating, {
+            props: { defaultValue: 2, ariaLabel: 'Difficulty', status: 'error' },
+        });
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider?.getAttribute('aria-label')).toBe('Difficulty');
+        expect(slider?.getAttribute('aria-invalid')).toBe('true');
+        await expectNoAxeViolations(container);
+    });
+    it('readonly：aria-readonly=true，无 axe violations', async () => {
+        const { container } = renderWithLocale(Rating, {
+            props: { defaultValue: 4, readonly: true },
+        });
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider?.getAttribute('aria-readonly')).toBe('true');
+        await expectNoAxeViolations(container);
+    });
+});

package/dist/rating/Rating.kbd.test.d.ts

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

package/dist/rating/Rating.kbd.test.d.ts.map

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

package/dist/rating/Rating.kbd.test.js

@@ -0,0 +1,41 @@
+// Rating 键盘 e2e（browser project / 真实 chromium）。
+// Rating 根元素是 role=slider（APG slider 模式，tabindex=0），焦点落在根本身：
+// ←↓ 减、→↑ 增（minStep=1），数字键 1–9 直接定位，Home→0 / End→count，
+// aria-valuenow 真实变化。jsdom 焦点/数字键合成不可靠，故在真浏览器里测。
+import { describe, it, expect } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
+import RatingKbdFixture from './RatingKbdFixture.svelte';
+function loc(el) {
+    return page.elementLocator(el);
+}
+describe('Rating 键盘 e2e（role=slider 方向键 + 数字键）', () => {
+    it('Tab 聚焦 + 方向键调分 + 数字键定位 + Home/End', async () => {
+        const { baseElement } = renderKbdFixture(RatingKbdFixture);
+        const rating = baseElement.querySelector('[role="slider"]');
+        expect(rating).not.toBeNull();
+        expect(rating.getAttribute('aria-valuenow')).toBe('3');
+        // Tab 从 before 进入，焦点落在 slider 根。
+        const before = baseElement.querySelector('[data-testid="before"]');
+        before.focus();
+        await expect.element(loc(before)).toHaveFocus();
+        await userEvent.tab();
+        await expect.element(loc(rating)).toHaveFocus();
+        // → 增（4），← 减（3）。
+        await userEvent.keyboard('{ArrowRight}');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '4');
+        await userEvent.keyboard('{ArrowLeft}');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '3');
+        // 数字键 5 直接定位到 5 分。
+        await userEvent.keyboard('5');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '5');
+        // 数字键 2 定位到 2 分。
+        await userEvent.keyboard('2');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '2');
+        // Home → 0，End → count(5)。
+        await userEvent.keyboard('{Home}');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '0');
+        await userEvent.keyboard('{End}');
+        await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '5');
+    });
+});