@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/SelectionControl/index.js

@@ -0,0 +1,9 @@
+import { BooleanValueIcon } from "./boolean-value.js";
+import { SelectionItem, selectionItemMeta, selectionItemStyles } from "./selection-item.js";
+export {
+  BooleanValueIcon,
+  SelectionItem,
+  selectionItemMeta,
+  selectionItemStyles
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SelectionControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/SelectionControl/selection-item.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @internal — DS-internal 單元(per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 Checkbox / RadioGroup wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react';
@@ -60,7 +64,7 @@ export declare const selectionItemMeta: {
         readonly lg: {};
     };
     readonly defaultSize: "md";
-    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "disabled"];
     readonly tokens: {
         readonly fg: readonly ["text-foreground", "text-fg-secondary", "text-fg-disabled"];
     };

package/dist/components/SelectionControl/selection-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-item.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAyBlF,eAAO,MAAM,mBAAmB;;8EAc/B,CAAA;AA2BD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACxH,sDAAsD;IACtD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmFD,QAAA,MAAM,aAAa,2FA4ClB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAcpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"selection-item.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAyBlF,eAAO,MAAM,mBAAmB;;8EAc/B,CAAA;AA2BD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACxH,sDAAsD;IACtD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqFD,QAAA,MAAM,aAAa,2FA4ClB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAcpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/SelectionControl/selection-item.js

@@ -55,6 +55,7 @@ function ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClam
       "label",
       {
         htmlFor,
+        "aria-disabled": disabled || void 0,
         className: cn(
           "cursor-pointer block break-words",
           labelClampClass,
@@ -129,7 +130,8 @@ const selectionItemMeta = {
     lg: {}
   },
   defaultSize: "md",
-  states: ["default", "hover", "selected", "focus-visible", "disabled"],
+  states: ["default", "disabled"],
+  // disabled 是唯一視覺狀態;selected / hover 屬傳入的 control(spec「為何無 ColorMatrix / StateBehavior」)
   tokens: {
     fg: ["text-foreground", "text-fg-secondary", "text-fg-disabled"]
   }

package/dist/components/SelectionControl/selection-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-item.js","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { ICON_SIZE, AVATAR_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Selection Item Styles ───────────────────────────────────────────────────\n// Checkbox 和 RadioGroup 共用的 item 佈局。\n//\n// 結構(item-anatomy.spec.md 4-slot 模型):\n//   [control] [optional prefix(icon|avatar)] [content(label/desc)] [optional suffix]\n//\n// padding 公式：py = (field-height - 1lh) / 2\n//   - 單行時 item 高度 = field-height（對齊同 size 的 Input）\n//   - 多行時 padding 不變（文字間距一致）\n//   - density 切換時 field-height 自動調整，padding 跟著算\n//\n// 容器設 text-body / text-body-lg 建立 1lh context（div 上正常繼承）。\n//\n// ── 為什麼 NOT 消費 ROW_PADDING_BY_SIZE(item-anatomy.tsx SSOT,2026-04-24 consolidation)──\n// menu / sidebar / tree 3 cva 統一消費 ROW_PADDING_BY_SIZE;SelectionItem 刻意不消費,\n// 因 typography 不同(mode 差異,非 drift):\n//   - ROW_PADDING_BY_SIZE:`text-body leading-compact`(scanning mode,緊湊)\n//   - SelectionItem:`text-body`(**無 leading-compact** — reading mode,Checkbox/Radio 搭配\n//     較長 label + description,需預設 1.5 leading 而非 1.3 compact)\n// py 公式本身相同 — 若 field-height token 變動,本檔需手動同步(contained,由本註解 anchor 追)。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport const selectionItemStyles = cva(\n  'flex items-start gap-2',\n  {\n    variants: {\n      size: {\n        sm: 'text-body py-[calc((var(--field-height-sm)_-_1lh)_/_2)]',\n        md: 'text-body py-[calc((var(--field-height-md)_-_1lh)_/_2)]',\n        lg: 'text-body-lg py-[calc((var(--field-height-lg)_-_1lh)_/_2)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// Avatar 尺寸 + Icon 尺寸從 item-layout module 共用,不在此 re-declare(避免漂移)\n// AVATAR_SIZE / ICON_SIZE 都是 item-layout 的 canonical 常數。\n//\n// SelectionItem 跟 MenuItem 的差異:SelectionItem 有 control(checkbox/radio)。\n// block 模式時 **control 跟 prefix 一起走 block 高度**——兩者都在 text block center,\n// 維持「selection + identity」是一組的視覺語意,不會歪斜。\nconst AVATAR_PX = AVATAR_SIZE\n\n// ── Block 對齊容器 ──\n// sm/md: reading mode (body 14/1.5 + body 14/1.5) — gap token `reading`\n// lg:    reading-lg mode (body-lg 16/1.5 + body 14/1.5) — gap token `reading-lg`\n// desc 永遠 body(14) line-height;`1lh` 會 resolve 到 label 的 line-height(sm/md=21, lg=24)\nconst blockAlignClass: Record<SizeKey, string> = {\n  sm: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  md: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  lg: 'h-[calc(1lh+var(--item-gap-label-desc-reading-lg)+var(--font-body-size)*1.5)]',\n}\n\n// ── Selection Item ──────────────────────────────────────────────────────────\n// 通用 item 行：control + 可選 prefix(icon/avatar) + label + description。\n// control 永遠包在 h-[1lh] 容器內,對齊第一行 label。\n// prefix 走 24px 閾值規則,各自獨立對齊。\n\nexport interface SelectionItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof selectionItemStyles> {\n  /** Checkbox 或 RadioGroupItem 元素(永遠存在,永遠 inline 對齊) */\n  control: React.ReactNode\n  /** Label 文字 */\n  label: React.ReactNode\n  /** 描述文字(fg-secondary;reading mode 永遠 14px) */\n  description?: React.ReactNode\n  /**\n   * 可選的左側 icon(在 control 之後、label 之前)。LucideIcon 型別,元件內部控制尺寸\n   * (16/16/20px @ sm/md/lg)。**永遠 inline 對齊第一行 label**(icon ≤24px)。\n   * 與 `avatar` 互斥。\n   */\n  icon?: LucideIcon\n  /**\n   * 可選的左側 avatar(在 control 之後、label 之前)。`AvatarData` 資料型別,元件內部渲染 Avatar。\n   * 尺寸由 `description` 自動決定(跟 MenuItem 同 convention):\n   * - 無 desc → inline(20/24/24px),跟 control 同步在 label 第一行\n   * - 有 desc → block(32/32/40px),跟 control 同步在 text block center\n   *\n   * Block 模式時 **control(checkbox/radio)也一起走 block 高度**——兩者都在\n   * text block center,不會歪斜。與 `icon` 互斥。\n   */\n  avatar?: AvatarData\n  /** htmlFor（label 指向 control 的 id） */\n  htmlFor?: string\n  /** disabled 狀態影響 label 顏色 */\n  disabled?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `'none'`(form 欄位允許任意長度)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → 明確不截斷(語意等同預設)\n   *\n   * 為什麼用 `'none'` 而不是 `undefined`?React props 的 destructure default 在\n   * `undefined` 時會接管,要明確覆寫必須用非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。預設 `'none'`(不截)。\n   */\n  descMaxLines?: number | 'none'\n  className?: string\n}\n\n/** 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 */\nfunction lineClampClass(maxLines: number | 'none'): string {\n  if (maxLines === 'none' || !maxLines) return ''\n  if (maxLines === 1) return 'line-clamp-1'\n  if (maxLines === 2) return 'line-clamp-2'\n  if (maxLines === 3) return 'line-clamp-3'\n  if (maxLines === 4) return 'line-clamp-4'\n  if (maxLines === 5) return 'line-clamp-5'\n  if (maxLines === 6) return 'line-clamp-6'\n  return ''\n}\n\n// ── PrefixSlot — 24px 閾值規則 ──\n// icon(永遠 ≤24px)→ inline;avatar + 無 desc → inline;avatar + 有 desc → block(centered on text block)\ntype PrefixSlotProps = {\n  icon: LucideIcon | undefined\n  avatar: AvatarData | undefined\n  sizeKey: SizeKey\n  alignClass: string\n  avatarPx: number\n  disabled: boolean | undefined\n}\nfunction PrefixSlot({ icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }: PrefixSlotProps) {\n  if (!Icon && !avatar) return null\n  return (\n    <div className={cn(alignClass, 'flex items-center shrink-0')}>\n      {Icon && (\n        <Icon\n          size={ICON_SIZE[sizeKey]}\n          className={cn('shrink-0', disabled && 'text-fg-disabled')}\n          aria-hidden\n        />\n      )}\n      {!Icon && avatar && (\n        <Avatar src={avatar.src} alt={avatar.alt} color={avatar.color} hoverCard={avatar.hoverCard} size={avatarPx} />\n      )}\n    </div>\n  )\n}\n\n// ── ContentSlot — label + optional description ──\n// inline-style fontSize 繞 tailwind-merge 把 text-body / text-fg-secondary 誤判同組衝突的 bug\ntype ContentSlotProps = {\n  htmlFor: string | undefined\n  disabled: boolean | undefined\n  label: React.ReactNode\n  description: React.ReactNode | undefined\n  sizeKey: SizeKey\n  labelClampClass: string\n  descClampClass: string\n}\nfunction ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClampClass, descClampClass }: ContentSlotProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      <label\n        htmlFor={htmlFor}\n        className={cn(\n          'cursor-pointer block break-words',\n          labelClampClass,\n          disabled ? 'text-fg-disabled cursor-not-allowed' : 'text-foreground',\n        )}\n      >\n        {label}\n      </label>\n      {description && (\n        <p\n          className={cn(\n            sizeKey === 'lg' ? 'mt-[var(--item-gap-label-desc-reading-lg)]' : 'mt-[var(--item-gap-label-desc-reading)]',\n            'break-words',\n            descClampClass,\n            disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          )}\n          style={{ fontSize: 'var(--font-body-size)' }}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  )\n}\n\nconst SelectionItem = React.forwardRef<HTMLDivElement, SelectionItemProps>(\n  (\n    {\n      control,\n      label,\n      description,\n      icon: Icon,\n      avatar,\n      htmlFor,\n      disabled,\n      size,\n      labelMaxLines = 'none',\n      descMaxLines = 'none',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey: SizeKey = size ?? 'md'\n    if (process.env.NODE_ENV !== 'production' && Icon && avatar) {\n      // eslint-disable-next-line no-console\n      console.warn('[SelectionItem] `icon` 和 `avatar` 互斥,只會渲染 icon。')\n    }\n    // Block 對齊:control 跟 prefix(avatar)一起走 block 高度,「selection + identity」視覺單元不歪斜\n    const useBlock = !!avatar && !Icon && !!description && AVATAR_PX.block[sizeKey] > 24\n    const avatarPx = useBlock ? AVATAR_PX.block[sizeKey] : AVATAR_PX.inline[sizeKey]\n    const alignClass = useBlock ? blockAlignClass[sizeKey] : 'h-[1lh]'\n\n    return (\n      <div ref={ref} className={cn(selectionItemStyles({ size }), className)} {...props}>\n        <div className={cn(alignClass, 'flex items-center shrink-0')}>{control}</div>\n        <PrefixSlot icon={Icon} avatar={avatar} sizeKey={sizeKey} alignClass={alignClass} avatarPx={avatarPx} disabled={disabled} />\n        <ContentSlot\n          htmlFor={htmlFor}\n          disabled={disabled}\n          label={label}\n          description={description}\n          sizeKey={sizeKey}\n          labelClampClass={lineClampClass(labelMaxLines)}\n          descClampClass={lineClampClass(descMaxLines)}\n        />\n      </div>\n    )\n  }\n)\nSelectionItem.displayName = 'SelectionItem'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const selectionItemMeta = {\n  component: 'SelectionItem',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: {},\n    md: {},\n    lg: {},\n  },\n  defaultSize: 'md',\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-secondary', 'text-fg-disabled'],\n  },\n} as const\n\nexport { SelectionItem }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"selection-item.js","sources":["../../../src/components/SelectionControl/selection-item.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Checkbox / RadioGroup wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { ICON_SIZE, AVATAR_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Selection Item Styles ───────────────────────────────────────────────────\n// Checkbox 和 RadioGroup 共用的 item 佈局。\n//\n// 結構(item-anatomy.spec.md 4-slot 模型):\n//   [control] [optional prefix(icon|avatar)] [content(label/desc)](3-slot,見 spec「定位」)\n//\n// padding 公式：py = (field-height - 1lh) / 2\n//   - 單行時 item 高度 = field-height（對齊同 size 的 Input）\n//   - 多行時 padding 不變（文字間距一致）\n//   - density 切換時 field-height 自動調整，padding 跟著算\n//\n// 容器設 text-body / text-body-lg 建立 1lh context（div 上正常繼承）。\n//\n// ── 為什麼 NOT 消費 ROW_PADDING_BY_SIZE(item-anatomy.tsx SSOT,2026-04-24 consolidation)──\n// menu / sidebar / tree 3 cva 統一消費 ROW_PADDING_BY_SIZE;SelectionItem 刻意不消費,\n// 因 typography 不同(mode 差異,非 drift):\n//   - ROW_PADDING_BY_SIZE:`text-body leading-compact`(scanning mode,緊湊)\n//   - SelectionItem:`text-body`(**無 leading-compact** — reading mode,Checkbox/Radio 搭配\n//     較長 label + description,需預設 1.5 leading 而非 1.3 compact)\n// py 公式本身相同 — 若 field-height token 變動,本檔需手動同步(contained,由本註解 anchor 追)。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport const selectionItemStyles = cva(\n  'flex items-start gap-2',\n  {\n    variants: {\n      size: {\n        sm: 'text-body py-[calc((var(--field-height-sm)_-_1lh)_/_2)]',\n        md: 'text-body py-[calc((var(--field-height-md)_-_1lh)_/_2)]',\n        lg: 'text-body-lg py-[calc((var(--field-height-lg)_-_1lh)_/_2)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\ntype SizeKey = 'sm' | 'md' | 'lg'\n\n// Avatar 尺寸 + Icon 尺寸從 item-layout module 共用,不在此 re-declare(避免漂移)\n// AVATAR_SIZE / ICON_SIZE 都是 item-layout 的 canonical 常數。\n//\n// SelectionItem 跟 MenuItem 的差異:SelectionItem 有 control(checkbox/radio)。\n// block 模式時 **control 跟 prefix 一起走 block 高度**——兩者都在 text block center,\n// 維持「selection + identity」是一組的視覺語意,不會歪斜。\nconst AVATAR_PX = AVATAR_SIZE\n\n// ── Block 對齊容器 ──\n// sm/md: reading mode (body 14/1.5 + body 14/1.5) — gap token `reading`\n// lg:    reading-lg mode (body-lg 16/1.5 + body 14/1.5) — gap token `reading-lg`\n// desc 永遠 body(14) line-height;`1lh` 會 resolve 到 label 的 line-height(sm/md=21, lg=24)\nconst blockAlignClass: Record<SizeKey, string> = {\n  sm: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  md: 'h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]',\n  lg: 'h-[calc(1lh+var(--item-gap-label-desc-reading-lg)+var(--font-body-size)*1.5)]',\n}\n\n// ── Selection Item ──────────────────────────────────────────────────────────\n// 通用 item 行：control + 可選 prefix(icon/avatar) + label + description。\n// control 永遠包在 h-[1lh] 容器內,對齊第一行 label。\n// prefix 走 24px 閾值規則,各自獨立對齊。\n\nexport interface SelectionItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof selectionItemStyles> {\n  /** Checkbox 或 RadioGroupItem 元素(永遠存在,永遠 inline 對齊) */\n  control: React.ReactNode\n  /** Label 文字 */\n  label: React.ReactNode\n  /** 描述文字(fg-secondary;reading mode 永遠 14px) */\n  description?: React.ReactNode\n  /**\n   * 可選的左側 icon(在 control 之後、label 之前)。LucideIcon 型別,元件內部控制尺寸\n   * (16/16/20px @ sm/md/lg)。**永遠 inline 對齊第一行 label**(icon ≤24px)。\n   * 與 `avatar` 互斥。\n   */\n  icon?: LucideIcon\n  /**\n   * 可選的左側 avatar(在 control 之後、label 之前)。`AvatarData` 資料型別,元件內部渲染 Avatar。\n   * 尺寸由 `description` 自動決定(跟 MenuItem 同 convention):\n   * - 無 desc → inline(20/24/24px),跟 control 同步在 label 第一行\n   * - 有 desc → block(32/32/40px),跟 control 同步在 text block center\n   *\n   * Block 模式時 **control(checkbox/radio)也一起走 block 高度**——兩者都在\n   * text block center,不會歪斜。與 `icon` 互斥。\n   */\n  avatar?: AvatarData\n  /** htmlFor（label 指向 control 的 id） */\n  htmlFor?: string\n  /** disabled 狀態影響 label 顏色 */\n  disabled?: boolean\n  /**\n   * Label 最大行數(line-clamp 截斷)。\n   *\n   * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `'none'`(form 欄位允許任意長度)\n   * - 數字 → 截斷到該行數\n   * - `'none'` → 明確不截斷(語意等同預設)\n   *\n   * 為什麼用 `'none'` 而不是 `undefined`?React props 的 destructure default 在\n   * `undefined` 時會接管,要明確覆寫必須用非 undefined 的 sentinel。\n   */\n  labelMaxLines?: number | 'none'\n  /**\n   * Description 最大行數。預設 `'none'`(不截)。\n   */\n  descMaxLines?: number | 'none'\n  className?: string\n}\n\n/** 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 */\nfunction lineClampClass(maxLines: number | 'none'): string {\n  if (maxLines === 'none' || !maxLines) return ''\n  if (maxLines === 1) return 'line-clamp-1'\n  if (maxLines === 2) return 'line-clamp-2'\n  if (maxLines === 3) return 'line-clamp-3'\n  if (maxLines === 4) return 'line-clamp-4'\n  if (maxLines === 5) return 'line-clamp-5'\n  if (maxLines === 6) return 'line-clamp-6'\n  return ''\n}\n\n// ── PrefixSlot — 24px 閾值規則 ──\n// icon(永遠 ≤24px)→ inline;avatar + 無 desc → inline;avatar + 有 desc → block(centered on text block)\ntype PrefixSlotProps = {\n  icon: LucideIcon | undefined\n  avatar: AvatarData | undefined\n  sizeKey: SizeKey\n  alignClass: string\n  avatarPx: number\n  disabled: boolean | undefined\n}\nfunction PrefixSlot({ icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }: PrefixSlotProps) {\n  if (!Icon && !avatar) return null\n  return (\n    <div className={cn(alignClass, 'flex items-center shrink-0')}>\n      {Icon && (\n        <Icon\n          size={ICON_SIZE[sizeKey]}\n          className={cn('shrink-0', disabled && 'text-fg-disabled')}\n          aria-hidden\n        />\n      )}\n      {!Icon && avatar && (\n        <Avatar src={avatar.src} alt={avatar.alt} color={avatar.color} hoverCard={avatar.hoverCard} size={avatarPx} />\n      )}\n    </div>\n  )\n}\n\n// ── ContentSlot — label + optional description ──\n// inline-style fontSize 繞 tailwind-merge 把 text-body / text-fg-secondary 誤判同組衝突的 bug\ntype ContentSlotProps = {\n  htmlFor: string | undefined\n  disabled: boolean | undefined\n  label: React.ReactNode\n  description: React.ReactNode | undefined\n  sizeKey: SizeKey\n  labelClampClass: string\n  descClampClass: string\n}\nfunction ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClampClass, descClampClass }: ContentSlotProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      <label\n        htmlFor={htmlFor}\n        // 2026-06-10 a11y:styled-disabled label 明告 inactive(WCAG 1.4.3 豁免可機判;對齊 FieldLabel 同修;a11y 補強不動 SSOT = AUTO 分權,user verbatim「確保所有的任務你都有做到完美做到完整」)\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'cursor-pointer block break-words',\n          labelClampClass,\n          disabled ? 'text-fg-disabled cursor-not-allowed' : 'text-foreground',\n        )}\n      >\n        {label}\n      </label>\n      {description && (\n        <p\n          className={cn(\n            sizeKey === 'lg' ? 'mt-[var(--item-gap-label-desc-reading-lg)]' : 'mt-[var(--item-gap-label-desc-reading)]',\n            'break-words',\n            descClampClass,\n            disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          )}\n          style={{ fontSize: 'var(--font-body-size)' }}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  )\n}\n\nconst SelectionItem = React.forwardRef<HTMLDivElement, SelectionItemProps>(\n  (\n    {\n      control,\n      label,\n      description,\n      icon: Icon,\n      avatar,\n      htmlFor,\n      disabled,\n      size,\n      labelMaxLines = 'none',\n      descMaxLines = 'none',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey: SizeKey = size ?? 'md'\n    if (process.env.NODE_ENV !== 'production' && Icon && avatar) {\n      // eslint-disable-next-line no-console\n      console.warn('[SelectionItem] `icon` 和 `avatar` 互斥,只會渲染 icon。')\n    }\n    // Block 對齊:control 跟 prefix(avatar)一起走 block 高度,「selection + identity」視覺單元不歪斜\n    const useBlock = !!avatar && !Icon && !!description && AVATAR_PX.block[sizeKey] > 24\n    const avatarPx = useBlock ? AVATAR_PX.block[sizeKey] : AVATAR_PX.inline[sizeKey]\n    const alignClass = useBlock ? blockAlignClass[sizeKey] : 'h-[1lh]'\n\n    return (\n      <div ref={ref} className={cn(selectionItemStyles({ size }), className)} {...props}>\n        <div className={cn(alignClass, 'flex items-center shrink-0')}>{control}</div>\n        <PrefixSlot icon={Icon} avatar={avatar} sizeKey={sizeKey} alignClass={alignClass} avatarPx={avatarPx} disabled={disabled} />\n        <ContentSlot\n          htmlFor={htmlFor}\n          disabled={disabled}\n          label={label}\n          description={description}\n          sizeKey={sizeKey}\n          labelClampClass={lineClampClass(labelMaxLines)}\n          descClampClass={lineClampClass(descMaxLines)}\n        />\n      </div>\n    )\n  }\n)\nSelectionItem.displayName = 'SelectionItem'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const selectionItemMeta = {\n  component: 'SelectionItem',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: {},\n    md: {},\n    lg: {},\n  },\n  defaultSize: 'md',\n  states: ['default', 'disabled'], // disabled 是唯一視覺狀態;selected / hover 屬傳入的 control(spec「為何無 ColorMatrix / StateBehavior」)\n  tokens: {\n    fg: ['text-foreground', 'text-fg-secondary', 'text-fg-disabled'],\n  },\n} as const\n\nexport { SelectionItem }\n"],"names":[],"mappings":"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"}

package/dist/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './separator';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAA"}

package/dist/components/Separator/index.js

@@ -0,0 +1,6 @@
+import { Separator, separatorMeta } from "./separator.js";
+export {
+  Separator,
+  separatorMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Separator/separator.d.ts

@@ -3,10 +3,10 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const separatorMeta: {
     readonly component: "Separator";
-    readonly family: null;
+    readonly family: "self-contained";
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

package/dist/components/Separator/separator.js

@@ -21,11 +21,12 @@ const Separator = React.forwardRef(
 Separator.displayName = "Separator";
 const separatorMeta = {
   component: "Separator",
-  family: null,
-  // non-family composite / overlay / layout
+  family: "self-contained",
+  // 純視覺 divider,獨立視覺無 slot 結構(對齊 spec frontmatter L3 family: self-contained)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
+  // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec「無 StateBehavior」bullet + A11y 段;段名指法免行號漂移)
   tokens: {
     bg: [],
     fg: [],

package/dist/components/Separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","sources":["../../../src/components/Separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-divider\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = \"Separator\"\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const separatorMeta = {\n  component: 'Separator',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Separator }\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,MAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAc;AAIjB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"separator.js","sources":["../../../src/components/Separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-divider\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = \"Separator\"\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const separatorMeta = {\n  component: 'Separator',\n  family: 'self-contained', // 純視覺 divider,獨立視覺無 slot 結構(對齊 spec frontmatter L3 family: self-contained)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'], // 純 Radix Separator.Root,非互動,無 hover/active/focus/disabled(對齊 spec「無 StateBehavior」bullet + A11y 段;段名指法免行號漂移)\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Separator }\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,MAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAc;AAIjB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sheet';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAA"}

package/dist/components/Sheet/index.js

@@ -0,0 +1,18 @@
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, handleSheetOpenAutoFocus, sheetMeta, sheetVariants } from "./sheet.js";
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  handleSheetOpenAutoFocus,
+  sheetMeta,
+  sheetVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Sheet/sheet.d.ts

@@ -7,9 +7,9 @@ import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-
  *
  * ── 定位(2026-04-21 canonical)──
  * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side="right"),
- * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(各自消費
- * `SurfaceHeader` / `SurfaceBody` / `SurfaceFooter` primitive,padding token SSOT
- * 在 `patterns/overlay-surface/`)。side="right" 是 defaultVariants,消費者不傳 side。
+ * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(Header / Footer 消費
+ * `SurfaceHeader` / `SurfaceFooter` primitive;Body = `ScrollArea` + 內層 padding div,
+ * padding token SSOT 在 `patterns/overlay-surface/`)。side="right" 是 defaultVariants,消費者不傳 side。
  *
  * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──
  * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。
@@ -20,9 +20,10 @@ import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-
  * - Sheet(side="right")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」
  * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度
  *
- * ── Header / Body / Footer 消費 SurfaceXxx SSOT ──
+ * ── Header / Footer 消費 SurfaceXxx SSOT;Body 走 ScrollArea canonical ──
  * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface
- * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進。
+ * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進;
+ * SheetBody 同 DialogBody:ScrollArea + 內層 px-loose / pt-tight / pb-bottom(詳 SheetBody comment)。
  */
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -32,11 +33,17 @@ declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, 'asChild'>, VariantProps<typeof sheetVariants> {
 }
+/** @internal DS 預設 open-focus(首個 body 互動元素)。consumer 傳自訂 onOpenAutoFocus 會覆寫
+ *  本預設({...props} 在後),需自訂前置行為(如 AppShellAside opener snapshot)時 import 接力呼叫。 */
+export declare const handleSheetOpenAutoFocus: (e: Event) => void;
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
-declare const SheetBody: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetBody: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+    fillX?: boolean;
+    viewportTabIndex?: 0 | -1 | null;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
@@ -45,7 +52,7 @@ export declare const sheetMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface-raised"];
         readonly fg: readonly ["text-fg-secondary", "text-foreground"];

package/dist/components/Sheet/sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAIjE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAYhB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAoBlB,CAAA;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAezC,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS,oOAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/sheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,0DAA0D,CAAA;AAKjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,QAAA,MAAM,KAAK,sCAAsB,CAAA;AAEjC,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAahB,CAAA;AAMF,QAAA,MAAM,aAAa;;8EAqBlB,CAAA;AAKD,UAAU,iBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACpF,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAGzC;gFACgF;AAChF,eAAO,MAAM,wBAAwB,GAAI,GAAG,KAAK,SAUhD,CAAA;AAED,QAAA,MAAM,YAAY,0FAgBhB,CAAA;AAOF,QAAA,MAAM,WAAW,2FAgBf,CAAA;AAeF,QAAA,MAAM,SAAS;;;sFAcb,CAAA;AAIF,QAAA,MAAM,WAAW,6GAGiE,CAAA;AAGlF,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KAWpB,CAAA;AAKF,eAAO,MAAM,SAAS;;;;;;;;;;;CAgBZ,CAAA;AAEV,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,CAAA"}

package/dist/components/Sheet/sheet.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { SurfaceFooter, SurfaceHeader } from "../../patterns/overlay-surface/overlay-surface.js";
 import { Button } from "../Button/button.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { surfaceMotion } from "../../tokens/motion/overlay-motion.js";
 const Sheet = DialogPrimitive.Root;
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
@@ -15,7 +16,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   DialogPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props,
@@ -26,8 +27,9 @@ SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const sheetVariants = cva(
   // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,
   // 對齊 overlay-surface pattern + Dialog canonical)
-  // Animation canonical:300ms 雙向一致(D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免
-  "fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300 motion-reduce:transition-none motion-reduce:data-[state=open]:duration-0 motion-reduce:data-[state=closed]:duration-0",
+  // Animation canonical:panel = surfaceMotion 250ms(--motion-duration-surface)雙向一致
+  // (D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免
+  `fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out ${surfaceMotion}`,
   {
     variants: {
       side: {
@@ -100,7 +102,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-body-lg font-medium truncate text-foreground", className),
+    className: cn("text-body-lg font-medium truncate", className),
     ...props
   }
 ));
@@ -120,7 +122,8 @@ const sheetMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)
+  states: ["default"],
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["text-fg-secondary", "text-foreground"],
@@ -139,6 +142,7 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  handleSheetOpenAutoFocus,
   sheetMeta,
   sheetVariants
 };

package/dist/components/Sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../../src/components/Sheet/sheet.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  SurfaceHeader,\n  SurfaceFooter,\n  type SurfaceHeaderProps,\n} from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\n\n/**\n * Sheet — **右側 Dialog primitive**(給消費者的 canonical)。\n *\n * ── 定位(2026-04-21 canonical)──\n * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side=\"right\"),\n * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(各自消費\n * `SurfaceHeader` / `SurfaceBody` / `SurfaceFooter` primitive,padding token SSOT\n * 在 `patterns/overlay-surface/`)。side=\"right\" 是 defaultVariants,消費者不傳 side。\n *\n * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──\n * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。\n * 消費者 code **禁止** 傳 `side=\"top\" | \"bottom\" | \"left\"` — 這些用途需 user 授權。\n *\n * ── 跟 Dialog 的差異 ──\n * - Dialog = 中央 modal,用於「明確決策 / 表單 / 確認」\n * - Sheet(side=\"right\")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」\n * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度\n *\n * ── Header / Body / Footer 消費 SurfaceXxx SSOT ──\n * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface\n * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進。\n */\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── sheetVariants ─────────────────────────────────────────────────────────\n// side=\"right\" 給**消費者**。top/bottom/left 給 **DS 內部基建**用(如 Sidebar 在\n// narrow viewport 時切 side=\"left\")。消費者 code 不傳 side,用 default。\nconst sheetVariants = cva(\n  // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,\n  // 對齊 overlay-surface pattern + Dialog canonical)\n  // Animation canonical:300ms 雙向一致(D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免\n  \"fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300 motion-reduce:transition-none motion-reduce:data-[state=open]:duration-0 motion-reduce:data-[state=closed]:duration-0\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-divider data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-divider data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-divider data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-divider data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\n// AutoFocus canonical(對齊 Dialog / Material / Polaris)— 見 dialog.tsx handleOpenAutoFocus 註解\nconst handleSheetOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-sheet-body] input:not([disabled]),[data-sheet-body] textarea:not([disabled]),[data-sheet-body] select:not([disabled]),[data-sheet-body] button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-sheet-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      onOpenAutoFocus={handleSheetOpenAutoFocus}\n      // Sheet 不自設 density,繼承 page 層級的 `html[data-density]`(2026-04-21 canonical 定案)\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\n// ── SheetHeader:SurfaceHeader + Close X(對齊 DialogHeader canonical)──────────\n// 2026-05-18 audit gap fix:type 對齊 SurfaceHeaderProps,withTabs / lockDensity expose\n// 給 consumer(per header-canonical.spec.md W1 跨 6 consumer 同契約)。Spread 早 forward\n// 過去,只是 TS type 沒 expose 導致 consumer 不能 type-safe 用 `<SheetHeader withTabs>`。\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(同 DialogHeader 邏輯,避 column mode 破裂)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → chrome-header-height */}\n    <SheetPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </SheetPrimitive.Close>\n  </SurfaceHeader>\n))\nSheetHeader.displayName = \"SheetHeader\"\n\n// ── SheetBody:flex-1 ScrollArea + chrome padding(對齊 DialogBody + ScrollArea canonical) ──\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom。\n// data-sheet-body:讓 SheetContent onOpenAutoFocus 找得到 body 第一個互動元素\n//\n// ── List-as-region 場景(menu / nav / settings list)──\n// 不再提供 `flush` variant(2026-05-01 移除)。canonical = consumer 用 className override:\n// `<SheetBody className=\"!px-0 !pt-0 !pb-0\"><div className=\"py-2\">{items}</div></SheetBody>`\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<SheetBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 Sheet form field 完全貼邊。\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-sheet-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nSheetBody.displayName = \"SheetBody\"\n\n// ── SheetFooter:SurfaceFooter wrap 加 data-sheet-footer(autoFocus fallback target)──\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-sheet-footer {...props} />)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:SheetTitle body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定;對齊 Dialog canonical。Tailwind preflight reset h2/p margin=0 → 必顯式 mt)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const sheetMeta = {\n  component: 'Sheet',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetBody,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n}\n"],"names":["SheetPrimitive","XIcon"],"mappings":"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"}
+{"version":3,"file":"sheet.js","sources":["../../../src/components/Sheet/sheet.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  SurfaceHeader,\n  SurfaceFooter,\n  type SurfaceHeaderProps,\n} from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { surfaceMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/**\n * Sheet — **右側 Dialog primitive**(給消費者的 canonical)。\n *\n * ── 定位(2026-04-21 canonical)──\n * Sheet 給**消費者**用的唯一合法形式 = **右側開啟的 modal**(side=\"right\"),\n * 內部結構跟 `Dialog` 一致:`SheetHeader` / `SheetBody` / `SheetFooter`(Header / Footer 消費\n * `SurfaceHeader` / `SurfaceFooter` primitive;Body = `ScrollArea` + 內層 padding div,\n * padding token SSOT 在 `patterns/overlay-surface/`)。side=\"right\" 是 defaultVariants,消費者不傳 side。\n *\n * ── 其他 side(top / bottom / left)——**非消費者 API**,內部基建用 ──\n * top / bottom / left 變體保留給 DS 內部基建(例:Sidebar 在小尺寸視口時從 left 滑入)。\n * 消費者 code **禁止** 傳 `side=\"top\" | \"bottom\" | \"left\"` — 這些用途需 user 授權。\n *\n * ── 跟 Dialog 的差異 ──\n * - Dialog = 中央 modal,用於「明確決策 / 表單 / 確認」\n * - Sheet(side=\"right\")= 側滑 modal,用於「補充資訊 / 多欄位表單 / 編輯 flow」\n * - 兩者 API 結構 1:1 對應,差異只在 side / 動畫 / 初始寬度\n *\n * ── Header / Footer 消費 SurfaceXxx SSOT;Body 走 ScrollArea canonical ──\n * 避免 padding 漂移 — Dialog / Popover / Sheet / Coachmark 共用同一套 overlay-surface\n * padding token(px-loose / py-tight),改 overlay-surface.tsx 四者自動跟進;\n * SheetBody 同 DialogBody:ScrollArea + 內層 px-loose / pt-tight / pb-bottom(詳 SheetBody comment)。\n */\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    // motion-reduce:animate-none — prefers-reduced-motion 豁免,對齊 DialogOverlay canonical(dialog.tsx DialogOverlay 同 token,2026-07-05 P2 收乾)\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── sheetVariants ─────────────────────────────────────────────────────────\n// side=\"right\" 給**消費者**。top/bottom/left 給 **DS 內部基建**用(如 Sidebar 在\n// narrow viewport 時切 side=\"left\")。消費者 code 不傳 side,用 default。\nconst sheetVariants = cva(\n  // 核心容器 — 無 padding(由 SheetBody / SheetHeader / SheetFooter 自理 padding,\n  // 對齊 overlay-surface pattern + Dialog canonical)\n  // Animation canonical:panel = surfaceMotion 250ms(--motion-duration-surface)雙向一致\n  // (D4 audit:500ms 太久 sluggish)+ motion-reduce 豁免\n  `fixed z-50 flex flex-col bg-surface-raised shadow-[var(--elevation-200)] transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out ${surfaceMotion}`,\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-divider data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-divider data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-divider data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-divider data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\n// asChild Omit(2026-07-18 決策2):SheetContent 是固定 edge-anchored surface(overlay + sheetVariants\n// 定位/slide 動畫 + onOpenAutoFocus),恆渲染 {children}(consumer body 多節點)→ <Content asChild>\n// Radix Slot React.Children.only crash。children 保留(consumer body)。同 Dialog 收窄。\ninterface SheetContentProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, 'asChild'>,\n    VariantProps<typeof sheetVariants> {}\n\n// AutoFocus canonical(對齊 Dialog / Material / Polaris)— 見 dialog.tsx handleOpenAutoFocus 註解\n/** @internal DS 預設 open-focus(首個 body 互動元素)。consumer 傳自訂 onOpenAutoFocus 會覆寫\n *  本預設({...props} 在後),需自訂前置行為(如 AppShellAside opener snapshot)時 import 接力呼叫。 */\nexport const handleSheetOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-sheet-body] input:not([disabled]),[data-sheet-body] textarea:not([disabled]),[data-sheet-body] select:not([disabled]),[data-sheet-body] button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-sheet-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      onOpenAutoFocus={handleSheetOpenAutoFocus}\n      // Sheet 不自設 density,繼承 page 層級的 `html[data-density]`(2026-04-21 canonical 定案)\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\n// ── SheetHeader:SurfaceHeader + Close X(對齊 DialogHeader canonical)──────────\n// 2026-05-18 audit gap fix:type 對齊 SurfaceHeaderProps,withTabs / tabsSlot expose\n// 給 consumer(per header-canonical.spec.md W1 跨 6 consumer 同契約)。Spread 早 forward\n// 過去,只是 TS type 沒 expose 導致 consumer 不能 type-safe 用 `<SheetHeader withTabs>`。\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(同 DialogHeader 邏輯,避 column mode 破裂)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → chrome-header-height */}\n    <SheetPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </SheetPrimitive.Close>\n  </SurfaceHeader>\n))\nSheetHeader.displayName = \"SheetHeader\"\n\n// ── SheetBody:flex-1 ScrollArea + chrome padding(對齊 DialogBody + ScrollArea canonical) ──\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom。\n// data-sheet-body:讓 SheetContent onOpenAutoFocus 找得到 body 第一個互動元素\n//\n// ── List-as-region 場景(menu / nav / settings list)──\n// 不再提供 `flush` variant(2026-05-01 移除)。canonical = consumer 用 className override:\n// `<SheetBody className=\"!px-0 !pt-0 !pb-0\"><div className=\"py-2\">{items}</div></SheetBody>`  ← @tabs-content-gap-ok: JSDoc 文件範例(list-as-region canonical,非 tabs !pt-0 hack;對齊 dialog.tsx 同款 marker)\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<SheetBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 Sheet form field 完全貼邊。\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-sheet-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nSheetBody.displayName = \"SheetBody\"\n\n// ── SheetFooter:SurfaceFooter wrap 加 data-sheet-footer(autoFocus fallback target)──\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-sheet-footer {...props} />)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:SheetTitle body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定;對齊 Dialog canonical。Tailwind preflight reset h2/p margin=0 → 必顯式 mt)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const sheetMeta = {\n  component: 'Sheet',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-07-04 audit 對齊:Sheet 本身無 disabled state(surface container,spec 邊界案例明文;對齊 popover/dialog meta pattern)\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetBody,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n}\n"],"names":["SheetPrimitive","XIcon"],"mappings":"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"}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAA"}

package/dist/components/Sidebar/index.js

@@ -0,0 +1,24 @@
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, sidebarMeta, useSidebar } from "./sidebar.js";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+  sidebarMeta,
+  useSidebar
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Sidebar/sidebar.d.ts

@@ -9,9 +9,10 @@ type SidebarContextProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
     openMobile: boolean;
-    setOpenMobile: (open: boolean) => void;
+    setOpenMobile: (open: boolean | ((current: boolean) => boolean), opener?: HTMLElement) => void;
+    mobileOpenerRef: React.MutableRefObject<HTMLElement | null>;
     isMobile: boolean;
-    toggleSidebar: () => void;
+    toggleSidebar: (opener?: HTMLElement) => void;
     size: SidebarSize;
     activeId: string | undefined;
     setActiveId: (id: string) => void;
@@ -61,6 +62,10 @@ declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttribute
      * 從該值起算(`top: viewportInsetTop / height: calc(100svh - viewportInsetTop)`),
      * 讓 global header 不被覆蓋(AppShell primary-header mode 必傳)。
      * 對齊 Mantine `layout="default"` navbar 高度扣 header 慣例。
+     *
+     * ⚠️ 作用範圍:**僅桌機 `offcanvas` / `icon` 分支**套用 insetStyle。
+     * `collapsible="none"`(於 isMobile 前提前 return 固定 div)與 mobile Sheet
+     * 兩分支不套此 inset —— 該兩模式下 global header 仍會被覆蓋(未接線)。
      */
     viewportInsetTop?: string;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -77,13 +82,14 @@ declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.Detaile
  * SidebarGroup
  *
  * 預設是非互動的 plain group(div)。當 `collapsible` = true 時自動切換成 Radix
- * Collapsible:SidebarGroupLabel 變 trigger、SidebarGroupContent 變 Content、
- * 自動渲染 chevron 於 label 尾端、chevron 依 open state 旋轉。
+ * Collapsible:SidebarGroupLabel 尾端自動渲染 chevron button 作為 `Collapsible.Trigger`
+ * (承載 aria-expanded / data-state,依 open state 旋轉),SidebarGroupContent 變 Content;
+ * label 本身維持 `role="presentation"` div,不升格為 button。
  *
  * ── API 設計決策 ──
  * 為什麼是 group 層級的 prop 而不是 label 層級?因為「group 是否可收合」是結構層
- * 的決定,影響 group 所有子 primitive 的渲染模式(label 變 button、content 變
- * animated container)。把 prop 放在 label 上會讓 content 不知道自己該不該被包,
+ * 的決定,影響 group 子 primitive 的渲染模式(label 尾端 chevron 變 trigger button、
+ * content 變 animated container)。把 prop 放在 label 上會讓 content 不知道自己該不該被包,
  * 形成跨元件的 prop drilling。放在 group 上用 context 傳遞是 React 的標準做法。
  */
 declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
@@ -121,7 +127,7 @@ declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<Omit<React
     startIcon?: LucideIcon;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
     /**
-     * Suffix slot 的 inline actions(宣告式 API,對齊 uiSize.spec.md「Inline Action」)。
+     * Suffix slot 的 inline actions(宣告式 API,對齊 patterns/element-anatomy/inline-action.spec.md)。
      * Host 自動用 `<ItemInlineAction>` 渲染,consumer 只宣告 intent。
      * Icon 模式下自動隱藏。
      */
@@ -152,7 +158,7 @@ declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.Clas
     asChild?: boolean;
     showOnHover?: boolean;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<import("../../components/Badge/badge").BadgeProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<(Omit<import("../../components/Badge/badge").BadgeDotProps & React.RefAttributes<HTMLSpanElement>, "ref"> | Omit<import("../../components/Badge/badge").BadgeCountProps & React.RefAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLSpanElement>>;
 declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     showIcon?: boolean;
 } & VariantProps<(props?: ({
@@ -160,7 +166,7 @@ declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.Cl
 } & import("class-variance-authority/types").ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const sidebarMeta: {
     readonly component: "Sidebar";
-    readonly family: null;
+    readonly family: 1;
     readonly variants: {
         readonly default: {
             readonly when: "標準導覽 row,參與 single-selection";
@@ -183,9 +189,9 @@ export declare const sidebarMeta: {
             readonly when: "重要主導覽 / icon-prominent workspace switcher";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-neutral-hover", "bg-surface", "bg-transparent"];
+        readonly bg: readonly ["bg-neutral-hover", "bg-neutral-selected", "bg-surface", "bg-transparent"];
         readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground"];
         readonly ring: readonly ["ring-ring"];
     };

package/dist/components/Sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/sidebar.tsx"],"names":[],"mappings":"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"}