@godxjp/ui 18.15.3 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/dist/app/date-format-labels.d.ts +1 -1
  2. package/dist/app/time-format-labels.d.ts +1 -1
  3. package/dist/components/data-display/badge.d.ts +1 -1
  4. package/dist/components/data-display/card.d.ts +4 -13
  5. package/dist/components/data-display/card.js +2 -15
  6. package/dist/components/data-display/data-table.d.ts +3 -8
  7. package/dist/components/data-display/data-table.js +106 -68
  8. package/dist/components/data-display/descriptions.js +34 -5
  9. package/dist/components/data-display/empty-state.js +1 -1
  10. package/dist/components/data-display/permission-matrix.js +7 -7
  11. package/dist/components/data-display/popover.js +2 -9
  12. package/dist/components/data-display/qr-code.d.ts +1 -1
  13. package/dist/components/data-display/scroll-area.d.ts +3 -1
  14. package/dist/components/data-display/scroll-area.js +150 -16
  15. package/dist/components/data-display/table.js +12 -3
  16. package/dist/components/data-entry/branch-scope-picker.js +4 -4
  17. package/dist/components/data-entry/calendar.js +15 -24
  18. package/dist/components/data-entry/cascader.js +67 -71
  19. package/dist/components/data-entry/checkbox.js +9 -1
  20. package/dist/components/data-entry/command.d.ts +6 -6
  21. package/dist/components/data-entry/date-picker.js +28 -15
  22. package/dist/components/data-entry/date-range-picker.js +10 -10
  23. package/dist/components/data-entry/form-field.js +7 -3
  24. package/dist/components/data-entry/index.d.ts +2 -1
  25. package/dist/components/data-entry/input.js +8 -19
  26. package/dist/components/data-entry/label.js +4 -2
  27. package/dist/components/data-entry/month-picker.js +16 -15
  28. package/dist/components/data-entry/month-range-picker.js +17 -16
  29. package/dist/components/data-entry/radio.js +6 -1
  30. package/dist/components/data-entry/search-select.js +29 -29
  31. package/dist/components/data-entry/select.js +15 -18
  32. package/dist/components/data-entry/switch.js +7 -1
  33. package/dist/components/data-entry/textarea.d.ts +56 -0
  34. package/dist/components/data-entry/textarea.js +103 -40
  35. package/dist/components/data-entry/time-picker.js +52 -52
  36. package/dist/components/data-entry/toggle-group.d.ts +1 -0
  37. package/dist/components/data-entry/toggle.d.ts +1 -1
  38. package/dist/components/data-entry/transfer.js +14 -15
  39. package/dist/components/data-entry/tree-select.js +16 -22
  40. package/dist/components/data-entry/upload-crop-dialog.js +4 -4
  41. package/dist/components/data-entry/upload.d.ts +1 -1
  42. package/dist/components/data-entry/upload.js +46 -46
  43. package/dist/components/feedback/alert.js +7 -14
  44. package/dist/components/feedback/dialog.d.ts +23 -32
  45. package/dist/components/feedback/dialog.js +16 -13
  46. package/dist/components/feedback/sheet.d.ts +1 -1
  47. package/dist/components/feedback/sheet.js +14 -14
  48. package/dist/components/feedback/skeleton.js +13 -10
  49. package/dist/components/feedback/sonner.d.ts +1 -1
  50. package/dist/components/feedback/sonner.js +17 -8
  51. package/dist/components/feedback/tooltip.js +1 -1
  52. package/dist/components/general/activity.d.ts +44 -0
  53. package/dist/components/general/activity.js +65 -0
  54. package/dist/components/general/button.d.ts +2 -2
  55. package/dist/components/general/button.js +11 -24
  56. package/dist/components/general/index.d.ts +2 -0
  57. package/dist/components/general/index.js +2 -0
  58. package/dist/components/layout/app-shell.js +5 -3
  59. package/dist/components/layout/auth-divider.d.ts +9 -2
  60. package/dist/components/layout/auth-divider.js +7 -11
  61. package/dist/components/layout/index.d.ts +1 -0
  62. package/dist/components/layout/page-container.d.ts +1 -1
  63. package/dist/components/layout/page-container.js +32 -20
  64. package/dist/components/layout/resizable.d.ts +12 -12
  65. package/dist/components/layout/separator.d.ts +1 -0
  66. package/dist/components/layout/service-role-panel.js +47 -42
  67. package/dist/components/layout/sidebar.js +13 -1
  68. package/dist/components/layout/split-pane.d.ts +12 -1
  69. package/dist/components/layout/split-pane.js +13 -4
  70. package/dist/components/navigation/app-setting-picker.js +5 -14
  71. package/dist/components/navigation/dropdown-menu.js +10 -16
  72. package/dist/components/navigation/menubar.d.ts +3 -6
  73. package/dist/components/navigation/pagination-utils.d.ts +15 -2
  74. package/dist/components/navigation/pagination-utils.js +27 -21
  75. package/dist/components/navigation/pagination.d.ts +4 -4
  76. package/dist/components/navigation/pagination.js +2 -2
  77. package/dist/components/navigation/steps.js +31 -67
  78. package/dist/components/navigation/tabs.js +17 -5
  79. package/dist/components/query/infinite-query-state.js +2 -2
  80. package/dist/components/ui/accordion.d.ts +1 -1
  81. package/dist/components/ui/avatar.d.ts +1 -1
  82. package/dist/components/ui/avatar.js +29 -10
  83. package/dist/components/ui/input-otp.d.ts +8 -6
  84. package/dist/components/ui/rating.js +1 -1
  85. package/dist/components/ui/separator.d.ts +27 -2
  86. package/dist/components/ui/separator.js +42 -11
  87. package/dist/components/ui/toggle-group.d.ts +15 -5
  88. package/dist/components/ui/toggle-group.js +43 -18
  89. package/dist/components/ui/toggle.d.ts +66 -5
  90. package/dist/components/ui/toggle.js +64 -9
  91. package/dist/i18n/messages/en.json +8 -0
  92. package/dist/i18n/messages/ja.json +8 -0
  93. package/dist/i18n/messages/vi.json +8 -0
  94. package/dist/lib/control-styles.d.ts +14 -0
  95. package/dist/lib/control-styles.js +2 -0
  96. package/dist/props/components/data-display.prop.d.ts +85 -3
  97. package/dist/props/components/data-entry.prop.d.ts +17 -0
  98. package/dist/props/components/general.prop.d.ts +52 -1
  99. package/dist/props/components/layout.prop.d.ts +137 -2
  100. package/dist/props/registry.d.ts +116 -5
  101. package/dist/props/registry.js +165 -4
  102. package/dist/props/vocabulary/index.d.ts +2 -2
  103. package/dist/props/vocabulary/interaction.prop.d.ts +15 -0
  104. package/dist/props/vocabulary/layout.prop.d.ts +8 -0
  105. package/dist/styles/alert-layout.css +69 -3
  106. package/dist/styles/badge-layout.css +2 -2
  107. package/dist/styles/base.css +6 -0
  108. package/dist/styles/card-layout.css +27 -7
  109. package/dist/styles/control.css +1150 -29
  110. package/dist/styles/data-display-layout.css +185 -11
  111. package/dist/styles/data-entry-layout.css +352 -1
  112. package/dist/styles/density.css +2 -2
  113. package/dist/styles/dialog-layout.css +203 -4
  114. package/dist/styles/focus-ring.css +155 -0
  115. package/dist/styles/form-layout.css +50 -5
  116. package/dist/styles/index.css +1 -0
  117. package/dist/styles/layout.css +412 -23
  118. package/dist/styles/motion.css +178 -0
  119. package/dist/styles/navigation-layout.css +398 -22
  120. package/dist/styles/shell-layout.css +137 -39
  121. package/dist/styles/table-layout.css +153 -22
  122. package/dist/styles/toggle.css +59 -0
  123. package/dist/tokens/base.css +5 -0
  124. package/dist/tokens/components/activity.css +64 -0
  125. package/dist/tokens/components/badge.css +7 -0
  126. package/dist/tokens/components/card.css +14 -10
  127. package/dist/tokens/components/chart.css +1 -1
  128. package/dist/tokens/components/control.css +358 -8
  129. package/dist/tokens/components/data-display.css +75 -0
  130. package/dist/tokens/components/data-entry.css +25 -0
  131. package/dist/tokens/components/descriptions.css +22 -0
  132. package/dist/tokens/components/feedback.css +143 -4
  133. package/dist/tokens/components/form.css +16 -0
  134. package/dist/tokens/components/legal-document.css +5 -1
  135. package/dist/tokens/components/navigation.css +109 -0
  136. package/dist/tokens/components/scroll-area.css +21 -0
  137. package/dist/tokens/components/separator.css +52 -0
  138. package/dist/tokens/components/shell.css +132 -20
  139. package/dist/tokens/components/table.css +52 -3
  140. package/dist/tokens/components/toggle.css +82 -0
  141. package/dist/tokens/components/upload.css +107 -0
  142. package/dist/tokens/foundation.css +171 -10
  143. package/dist/tokens/semantic/layout.css +120 -1
  144. package/package.json +84 -68
  145. package/scripts/ui-audit.mjs +51 -2
@@ -229,6 +229,11 @@ export declare const VOCABULARY_REGISTRY: {
229
229
  readonly category: "layout";
230
230
  readonly description: "HTTP status an ErrorSurface presents — 400 | 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode";
231
231
  };
232
+ readonly OrientationProp: {
233
+ readonly file: "vocabulary/layout.prop.ts";
234
+ readonly category: "layout";
235
+ readonly description: "Axis of a rule / track / group — horizontal (inline axis, the default) | vertical (block axis). One shared meaning for `orientation` across Separator, Steps, RadioGroup and Toolbar.";
236
+ };
232
237
  readonly AuthShellPresetProp: {
233
238
  readonly file: "vocabulary/layout.prop.ts";
234
239
  readonly category: "layout";
@@ -354,6 +359,16 @@ export declare const VOCABULARY_REGISTRY: {
354
359
  readonly category: "interaction";
355
360
  readonly description: "Reveal entrance-stagger ordinal (0..6) — an index into the motion ladder, never a raw ms";
356
361
  };
362
+ readonly ActivityVariantProp: {
363
+ readonly file: "vocabulary/interaction.prop.ts";
364
+ readonly category: "interaction";
365
+ readonly description: "Activity ambient mark — dots (typing) | pulse (live/recording) | bar (indeterminate sync)";
366
+ };
367
+ readonly ActivityAnnounceProp: {
368
+ readonly file: "vocabulary/interaction.prop.ts";
369
+ readonly category: "interaction";
370
+ readonly description: "Whether an ambient indicator announces its label — false (default, no live region) | polite";
371
+ };
357
372
  readonly BreadcrumbItemProp: {
358
373
  readonly file: "vocabulary/navigation.prop.ts";
359
374
  readonly category: "navigation";
@@ -397,7 +412,7 @@ export declare const VOCABULARY_REGISTRY: {
397
412
  readonly ColumnDefProp: {
398
413
  readonly file: "vocabulary/data.prop.ts";
399
414
  readonly category: "data";
400
- readonly description: "DataTable column definition — key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset=\"action-collection\"";
415
+ readonly description: 'DataTable column definition — key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"';
401
416
  };
402
417
  readonly SelectedIdsProp: {
403
418
  readonly file: "vocabulary/data.prop.ts";
@@ -461,6 +476,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
461
476
  readonly file: "components/layout.prop.ts";
462
477
  readonly vocabulary: readonly [];
463
478
  };
479
+ readonly PageContainerHeaderScaleProp: {
480
+ readonly group: "layout";
481
+ readonly file: "components/layout.prop.ts";
482
+ readonly vocabulary: readonly [];
483
+ };
464
484
  readonly PageContainerMeasureProp: {
465
485
  readonly group: "layout";
466
486
  readonly file: "components/layout.prop.ts";
@@ -475,6 +495,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
475
495
  readonly group: "layout";
476
496
  readonly file: "components/layout.prop.ts";
477
497
  readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "StatusProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "DensityProp", "PageContainerVariantProp", {
498
+ readonly field: "toolbar";
499
+ readonly local: true;
500
+ readonly reason: "FIXED chrome band between the page header and the scrolling body (filter strip, status bar, channel workflow rail). Distinct from ExtraProp (header actions, inside the title row) and FooterProp (action bar after the body): it is the only slot that stays OUT of the `fill` scroll viewport while sharing the header/body gutters and measure, so a consumer never hand-lays `position: sticky` page chrome.";
501
+ }, {
478
502
  readonly field: "headerLoading";
479
503
  readonly local: true;
480
504
  readonly reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy on the header). Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job); breadcrumbs and `extra` come from the route and stay live while the record resolves.";
@@ -482,6 +506,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
482
506
  readonly field: "headerLayout";
483
507
  readonly local: true;
484
508
  readonly reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) — orthogonal to PageContainerVariantProp, which selects the page shell layout.";
509
+ }, {
510
+ readonly field: "headerScale";
511
+ readonly local: true;
512
+ readonly reason: "What the page's top row IS — a document title or the surface's own chrome (document | chrome) — which selects the title's type step via --page-title-font-size-chrome AND opens the page flush with the frame via --page-pad-block-start-chrome (chrome sits on the edge; a document title gets the page's top margin). A fourth orthogonal axis: PageContainerVariantProp owns chrome WEIGHT (ghost drops the divider and header pad), headerLayout owns the header ARRANGEMENT, measure owns the inline cap; none of them can say that the h1 is a channel name rather than a headline.";
485
513
  }, {
486
514
  readonly field: "measure";
487
515
  readonly local: true;
@@ -617,6 +645,19 @@ export declare const COMPONENT_PROP_REGISTRY: {
617
645
  readonly reason: "Auth-specific vertical-density scope for card descendants.";
618
646
  }, "AuthShellPresetProp"];
619
647
  };
648
+ readonly SeparatorProp: {
649
+ readonly group: "layout";
650
+ readonly file: "components/layout.prop.ts";
651
+ readonly vocabulary: readonly ["OrientationProp", "LabelProp", "TextAlignProp", "TextToneProp", "ClassNameProp", {
652
+ readonly field: "labelAlign";
653
+ readonly local: true;
654
+ readonly reason: "Placement of the label ON the rule (which half is short), not the text alignment of a block — it reads the shared TextAlignProp start|center|end vocabulary so it stays logical under RTL.";
655
+ }, {
656
+ readonly field: "decorative";
657
+ readonly local: true;
658
+ readonly reason: "Radix Separator a11y fork: role=none vs a real role=separator. A `label` flips the default to false because the text is content, not decoration.";
659
+ }];
660
+ };
620
661
  readonly AuthDividerProp: {
621
662
  readonly group: "layout";
622
663
  readonly file: "components/layout.prop.ts";
@@ -772,10 +813,19 @@ export declare const COMPONENT_PROP_REGISTRY: {
772
813
  readonly file: "components/layout.prop.ts";
773
814
  readonly vocabulary: readonly ["LabelProp"];
774
815
  };
816
+ readonly SidebarBadgeToneProp: {
817
+ readonly group: "layout";
818
+ readonly file: "components/layout.prop.ts";
819
+ readonly vocabulary: readonly [];
820
+ };
775
821
  readonly SidebarItemProp: {
776
822
  readonly group: "layout";
777
823
  readonly file: "components/layout.prop.ts";
778
- readonly vocabulary: readonly ["IdProp", "LabelProp", "DisabledProp", "ChildrenProp"];
824
+ readonly vocabulary: readonly ["IdProp", "LabelProp", "DisabledProp", "ChildrenProp", {
825
+ readonly field: "badgeTone";
826
+ readonly local: true;
827
+ readonly reason: "Emphasis of the row's count pill (neutral | destructive) — an Extract<> subset of the shared ToneProp vocabulary, not a new one. It is `badgeTone` rather than `tone` because the item ALSO has `disabled`/`active` row states: a bare `tone` on a nav row would read as the row's colour, and the axis only ever recolours the badge. Mirrors the existing `badge`/`badgeLabel` pairing on OrgSwitcherOrganization.";
828
+ }];
779
829
  };
780
830
  readonly SidebarRenderItemProp: {
781
831
  readonly group: "layout";
@@ -840,6 +890,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
840
890
  readonly reason: "Reveal stagger ordinal — RevealDelayProp vocabulary.";
841
891
  }];
842
892
  };
893
+ readonly ActivityProp: {
894
+ readonly group: "general";
895
+ readonly file: "components/general.prop.ts";
896
+ readonly vocabulary: readonly ["ActivityVariantProp", "SizeProp", "TextToneProp", "LabelProp", "ChildrenProp", "ActivityAnnounceProp", "ClassNameProp", {
897
+ readonly field: "announce";
898
+ readonly local: true;
899
+ readonly reason: "Ambient live-region opt-in — ActivityAnnounceProp vocabulary; deliberately NOT a boolean so the value names the politeness level.";
900
+ }];
901
+ };
843
902
  readonly TextProp: {
844
903
  readonly group: "general";
845
904
  readonly file: "components/general.prop.ts";
@@ -858,7 +917,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
858
917
  readonly TextareaProp: {
859
918
  readonly group: "data-entry";
860
919
  readonly file: "components/data-entry.prop.ts";
861
- readonly vocabulary: readonly ["PlaceholderProp", "DisabledProp"];
920
+ readonly vocabulary: readonly ["PlaceholderProp", "DisabledProp", "ValueProp", "DefaultValueProp", "OnChangeProp", "IdProp", "ClassNameProp"];
862
921
  };
863
922
  readonly NumberInputProp: {
864
923
  readonly group: "data-entry";
@@ -1065,13 +1124,18 @@ export declare const COMPONENT_PROP_REGISTRY: {
1065
1124
  readonly AvatarProp: {
1066
1125
  readonly group: "data-display";
1067
1126
  readonly file: "components/data-display.prop.ts";
1068
- readonly vocabulary: readonly ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"];
1127
+ readonly vocabulary: readonly ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"];
1069
1128
  };
1070
1129
  readonly AvatarAppearanceProp: {
1071
1130
  readonly group: "data-display";
1072
1131
  readonly file: "components/data-display.prop.ts";
1073
1132
  readonly vocabulary: readonly [];
1074
1133
  };
1134
+ readonly AvatarPresenceProp: {
1135
+ readonly group: "data-display";
1136
+ readonly file: "components/data-display.prop.ts";
1137
+ readonly vocabulary: readonly [];
1138
+ };
1075
1139
  readonly BadgeProp: {
1076
1140
  readonly group: "data-display";
1077
1141
  readonly file: "components/data-display.prop.ts";
@@ -1110,6 +1174,36 @@ export declare const COMPONENT_PROP_REGISTRY: {
1110
1174
  readonly file: "components/data-display.prop.ts";
1111
1175
  readonly vocabulary: readonly ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"];
1112
1176
  };
1177
+ readonly ScrollAreaAnchorProp: {
1178
+ readonly group: "data-display";
1179
+ readonly file: "components/data-display.prop.ts";
1180
+ readonly vocabulary: readonly [{
1181
+ readonly field: "anchor";
1182
+ readonly local: true;
1183
+ readonly reason: 'Edge the scrolling viewport sticks to as content grows ("none" | "bottom"). A closed union, not a boolean pair — the third edge ("top", for an inverted feed) is a value, not another flag.';
1184
+ }];
1185
+ };
1186
+ readonly ScrollAreaProp: {
1187
+ readonly group: "data-display";
1188
+ readonly file: "components/data-display.prop.ts";
1189
+ readonly vocabulary: readonly ["OnValueChangeProp", {
1190
+ readonly field: "viewportRef";
1191
+ readonly local: true;
1192
+ readonly reason: "Ref to the SCROLLING element (the Radix viewport), which the component's own `ref` cannot reach — the root is overflow:hidden.";
1193
+ }, {
1194
+ readonly field: "anchor";
1195
+ readonly local: true;
1196
+ readonly reason: "See ScrollAreaAnchorProp — the sticky edge vocabulary.";
1197
+ }, {
1198
+ readonly field: "anchorOffset";
1199
+ readonly local: true;
1200
+ readonly reason: 'Per-instance override of --scroll-area-anchor-offset: how close to the bottom still counts as "following".';
1201
+ }, {
1202
+ readonly field: "onAnchoredChange";
1203
+ readonly local: true;
1204
+ readonly reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.';
1205
+ }];
1206
+ };
1113
1207
  readonly ChartSeriesProp: {
1114
1208
  readonly group: "data-display";
1115
1209
  readonly file: "components/charts.prop.ts";
@@ -1532,7 +1626,24 @@ export declare const COMPONENT_PROP_REGISTRY: {
1532
1626
  readonly ToggleProp: {
1533
1627
  readonly group: "data-entry";
1534
1628
  readonly file: "components/ui/toggle.tsx";
1535
- readonly vocabulary: readonly ["SizeProp", "ClassNameProp"];
1629
+ readonly vocabulary: readonly ["SizeProp", "ClassNameProp", {
1630
+ readonly field: "count";
1631
+ readonly local: true;
1632
+ readonly reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp (count/overflowCount/showZero) so a counted filter tab and a counted pressed chip are one vocabulary — gh#312.";
1633
+ }, {
1634
+ readonly field: "countLabel";
1635
+ readonly local: true;
1636
+ readonly reason: "Localized unit folded into the accessible name so a counted icon/emoji chip never announces as a bare number.";
1637
+ }];
1638
+ };
1639
+ readonly ToggleGroupItemProp: {
1640
+ readonly group: "data-entry";
1641
+ readonly file: "components/ui/toggle-group.tsx";
1642
+ readonly vocabulary: readonly ["SizeProp", "ClassNameProp", {
1643
+ readonly field: "count";
1644
+ readonly local: true;
1645
+ readonly reason: "Per-item counter pill — variant/size come from group context, but the number is per-item data (gh#312).";
1646
+ }];
1536
1647
  };
1537
1648
  readonly CommandPaletteProp: {
1538
1649
  readonly group: "data-entry";
@@ -227,6 +227,11 @@ const VOCABULARY_REGISTRY = {
227
227
  category: "layout",
228
228
  description: "HTTP status an ErrorSurface presents \u2014 400 | 403 | 404 | 500 | 503 (numeric); drives the default icon, tone and mode"
229
229
  },
230
+ OrientationProp: {
231
+ file: "vocabulary/layout.prop.ts",
232
+ category: "layout",
233
+ description: "Axis of a rule / track / group \u2014 horizontal (inline axis, the default) | vertical (block axis). One shared meaning for `orientation` across Separator, Steps, RadioGroup and Toolbar."
234
+ },
230
235
  AuthShellPresetProp: {
231
236
  file: "vocabulary/layout.prop.ts",
232
237
  category: "layout",
@@ -353,6 +358,16 @@ const VOCABULARY_REGISTRY = {
353
358
  category: "interaction",
354
359
  description: "Reveal entrance-stagger ordinal (0..6) \u2014 an index into the motion ladder, never a raw ms"
355
360
  },
361
+ ActivityVariantProp: {
362
+ file: "vocabulary/interaction.prop.ts",
363
+ category: "interaction",
364
+ description: "Activity ambient mark \u2014 dots (typing) | pulse (live/recording) | bar (indeterminate sync)"
365
+ },
366
+ ActivityAnnounceProp: {
367
+ file: "vocabulary/interaction.prop.ts",
368
+ category: "interaction",
369
+ description: "Whether an ambient indicator announces its label \u2014 false (default, no live region) | polite"
370
+ },
356
371
  // navigation.prop.ts
357
372
  BreadcrumbItemProp: {
358
373
  file: "vocabulary/navigation.prop.ts",
@@ -465,6 +480,11 @@ const COMPONENT_PROP_REGISTRY = {
465
480
  file: "components/layout.prop.ts",
466
481
  vocabulary: []
467
482
  },
483
+ PageContainerHeaderScaleProp: {
484
+ group: "layout",
485
+ file: "components/layout.prop.ts",
486
+ vocabulary: []
487
+ },
468
488
  PageContainerMeasureProp: {
469
489
  group: "layout",
470
490
  file: "components/layout.prop.ts",
@@ -487,6 +507,11 @@ const COMPONENT_PROP_REGISTRY = {
487
507
  "BreadcrumbProp",
488
508
  "DensityProp",
489
509
  "PageContainerVariantProp",
510
+ {
511
+ field: "toolbar",
512
+ local: true,
513
+ reason: "FIXED chrome band between the page header and the scrolling body (filter strip, status bar, channel workflow rail). Distinct from ExtraProp (header actions, inside the title row) and FooterProp (action bar after the body): it is the only slot that stays OUT of the `fill` scroll viewport while sharing the header/body gutters and measure, so a consumer never hand-lays `position: sticky` page chrome."
514
+ },
490
515
  {
491
516
  field: "headerLoading",
492
517
  local: true,
@@ -497,6 +522,11 @@ const COMPONENT_PROP_REGISTRY = {
497
522
  local: true,
498
523
  reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) \u2014 orthogonal to PageContainerVariantProp, which selects the page shell layout."
499
524
  },
525
+ {
526
+ field: "headerScale",
527
+ local: true,
528
+ reason: "What the page's top row IS \u2014 a document title or the surface's own chrome (document | chrome) \u2014 which selects the title's type step via --page-title-font-size-chrome AND opens the page flush with the frame via --page-pad-block-start-chrome (chrome sits on the edge; a document title gets the page's top margin). A fourth orthogonal axis: PageContainerVariantProp owns chrome WEIGHT (ghost drops the divider and header pad), headerLayout owns the header ARRANGEMENT, measure owns the inline cap; none of them can say that the h1 is a channel name rather than a headline."
529
+ },
500
530
  {
501
531
  field: "measure",
502
532
  local: true,
@@ -624,6 +654,27 @@ const COMPONENT_PROP_REGISTRY = {
624
654
  "AuthShellPresetProp"
625
655
  ]
626
656
  },
657
+ SeparatorProp: {
658
+ group: "layout",
659
+ file: "components/layout.prop.ts",
660
+ vocabulary: [
661
+ "OrientationProp",
662
+ "LabelProp",
663
+ "TextAlignProp",
664
+ "TextToneProp",
665
+ "ClassNameProp",
666
+ {
667
+ field: "labelAlign",
668
+ local: true,
669
+ reason: "Placement of the label ON the rule (which half is short), not the text alignment of a block \u2014 it reads the shared TextAlignProp start|center|end vocabulary so it stays logical under RTL."
670
+ },
671
+ {
672
+ field: "decorative",
673
+ local: true,
674
+ reason: "Radix Separator a11y fork: role=none vs a real role=separator. A `label` flips the default to false because the text is content, not decoration."
675
+ }
676
+ ]
677
+ },
627
678
  AuthDividerProp: {
628
679
  group: "layout",
629
680
  file: "components/layout.prop.ts",
@@ -836,10 +887,25 @@ const COMPONENT_PROP_REGISTRY = {
836
887
  file: "components/layout.prop.ts",
837
888
  vocabulary: ["LabelProp"]
838
889
  },
890
+ SidebarBadgeToneProp: {
891
+ group: "layout",
892
+ file: "components/layout.prop.ts",
893
+ vocabulary: []
894
+ },
839
895
  SidebarItemProp: {
840
896
  group: "layout",
841
897
  file: "components/layout.prop.ts",
842
- vocabulary: ["IdProp", "LabelProp", "DisabledProp", "ChildrenProp"]
898
+ vocabulary: [
899
+ "IdProp",
900
+ "LabelProp",
901
+ "DisabledProp",
902
+ "ChildrenProp",
903
+ {
904
+ field: "badgeTone",
905
+ local: true,
906
+ reason: "Emphasis of the row's count pill (neutral | destructive) \u2014 an Extract<> subset of the shared ToneProp vocabulary, not a new one. It is `badgeTone` rather than `tone` because the item ALSO has `disabled`/`active` row states: a bare `tone` on a nav row would read as the row's colour, and the axis only ever recolours the badge. Mirrors the existing `badge`/`badgeLabel` pairing on OrgSwitcherOrganization."
907
+ }
908
+ ]
843
909
  },
844
910
  SidebarRenderItemProp: {
845
911
  group: "layout",
@@ -920,6 +986,24 @@ const COMPONENT_PROP_REGISTRY = {
920
986
  }
921
987
  ]
922
988
  },
989
+ ActivityProp: {
990
+ group: "general",
991
+ file: "components/general.prop.ts",
992
+ vocabulary: [
993
+ "ActivityVariantProp",
994
+ "SizeProp",
995
+ "TextToneProp",
996
+ "LabelProp",
997
+ "ChildrenProp",
998
+ "ActivityAnnounceProp",
999
+ "ClassNameProp",
1000
+ {
1001
+ field: "announce",
1002
+ local: true,
1003
+ reason: "Ambient live-region opt-in \u2014 ActivityAnnounceProp vocabulary; deliberately NOT a boolean so the value names the politeness level."
1004
+ }
1005
+ ]
1006
+ },
923
1007
  TextProp: {
924
1008
  group: "general",
925
1009
  file: "components/general.prop.ts",
@@ -944,7 +1028,15 @@ const COMPONENT_PROP_REGISTRY = {
944
1028
  TextareaProp: {
945
1029
  group: "data-entry",
946
1030
  file: "components/data-entry.prop.ts",
947
- vocabulary: ["PlaceholderProp", "DisabledProp"]
1031
+ vocabulary: [
1032
+ "PlaceholderProp",
1033
+ "DisabledProp",
1034
+ "ValueProp",
1035
+ "DefaultValueProp",
1036
+ "OnChangeProp",
1037
+ "IdProp",
1038
+ "ClassNameProp"
1039
+ ]
948
1040
  },
949
1041
  NumberInputProp: {
950
1042
  group: "data-entry",
@@ -1215,13 +1307,18 @@ const COMPONENT_PROP_REGISTRY = {
1215
1307
  AvatarProp: {
1216
1308
  group: "data-display",
1217
1309
  file: "components/data-display.prop.ts",
1218
- vocabulary: ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"]
1310
+ vocabulary: ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"]
1219
1311
  },
1220
1312
  AvatarAppearanceProp: {
1221
1313
  group: "data-display",
1222
1314
  file: "components/data-display.prop.ts",
1223
1315
  vocabulary: []
1224
1316
  },
1317
+ AvatarPresenceProp: {
1318
+ group: "data-display",
1319
+ file: "components/data-display.prop.ts",
1320
+ vocabulary: []
1321
+ },
1225
1322
  BadgeProp: {
1226
1323
  group: "data-display",
1227
1324
  file: "components/data-display.prop.ts",
@@ -1283,6 +1380,44 @@ const COMPONENT_PROP_REGISTRY = {
1283
1380
  file: "components/data-display.prop.ts",
1284
1381
  vocabulary: ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"]
1285
1382
  },
1383
+ ScrollAreaAnchorProp: {
1384
+ group: "data-display",
1385
+ file: "components/data-display.prop.ts",
1386
+ vocabulary: [
1387
+ {
1388
+ field: "anchor",
1389
+ local: true,
1390
+ reason: 'Edge the scrolling viewport sticks to as content grows ("none" | "bottom"). A closed union, not a boolean pair \u2014 the third edge ("top", for an inverted feed) is a value, not another flag.'
1391
+ }
1392
+ ]
1393
+ },
1394
+ ScrollAreaProp: {
1395
+ group: "data-display",
1396
+ file: "components/data-display.prop.ts",
1397
+ vocabulary: [
1398
+ "OnValueChangeProp",
1399
+ {
1400
+ field: "viewportRef",
1401
+ local: true,
1402
+ reason: "Ref to the SCROLLING element (the Radix viewport), which the component's own `ref` cannot reach \u2014 the root is overflow:hidden."
1403
+ },
1404
+ {
1405
+ field: "anchor",
1406
+ local: true,
1407
+ reason: "See ScrollAreaAnchorProp \u2014 the sticky edge vocabulary."
1408
+ },
1409
+ {
1410
+ field: "anchorOffset",
1411
+ local: true,
1412
+ reason: 'Per-instance override of --scroll-area-anchor-offset: how close to the bottom still counts as "following".'
1413
+ },
1414
+ {
1415
+ field: "onAnchoredChange",
1416
+ local: true,
1417
+ reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.'
1418
+ }
1419
+ ]
1420
+ },
1286
1421
  ChartSeriesProp: {
1287
1422
  group: "data-display",
1288
1423
  file: "components/charts.prop.ts",
@@ -1664,7 +1799,33 @@ const COMPONENT_PROP_REGISTRY = {
1664
1799
  ToggleProp: {
1665
1800
  group: "data-entry",
1666
1801
  file: "components/ui/toggle.tsx",
1667
- vocabulary: ["SizeProp", "ClassNameProp"]
1802
+ vocabulary: [
1803
+ "SizeProp",
1804
+ "ClassNameProp",
1805
+ {
1806
+ field: "count",
1807
+ local: true,
1808
+ reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp (count/overflowCount/showZero) so a counted filter tab and a counted pressed chip are one vocabulary \u2014 gh#312."
1809
+ },
1810
+ {
1811
+ field: "countLabel",
1812
+ local: true,
1813
+ reason: "Localized unit folded into the accessible name so a counted icon/emoji chip never announces as a bare number."
1814
+ }
1815
+ ]
1816
+ },
1817
+ ToggleGroupItemProp: {
1818
+ group: "data-entry",
1819
+ file: "components/ui/toggle-group.tsx",
1820
+ vocabulary: [
1821
+ "SizeProp",
1822
+ "ClassNameProp",
1823
+ {
1824
+ field: "count",
1825
+ local: true,
1826
+ reason: "Per-item counter pill \u2014 variant/size come from group context, but the number is per-item data (gh#312)."
1827
+ }
1828
+ ]
1668
1829
  },
1669
1830
  CommandPaletteProp: {
1670
1831
  group: "data-entry",
@@ -1,7 +1,7 @@
1
1
  /** Barrel — all vocabulary prop types. */
2
2
  export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
3
3
  export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
4
- export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
5
- export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
4
+ export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, OrientationProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
5
+ export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
6
6
  export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
7
7
  export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";
@@ -76,3 +76,18 @@ export type SortStateProp = {
76
76
  * revealed rows cascades in. Reduced-motion collapses every step to 0 (content stays visible).
77
77
  */
78
78
  export type RevealDelayProp = 0 | 1 | 2 | 3 | 4 | 5 | 6;
79
+ /**
80
+ * Ambient-activity mark for `Activity` — the LOOP counterpart to `RevealDelayProp`'s one-shot
81
+ * ladder. `dots` (default) is the three-dot ellipsis convention (someone is typing); `pulse` a
82
+ * single breathing mark (live / recording); `bar` an indeterminate sweep (syncing).
83
+ */
84
+ export type ActivityVariantProp = "dots" | "pulse" | "bar";
85
+ /**
86
+ * Whether an ambient indicator announces its label to assistive technology.
87
+ *
88
+ * Default `false` — DELIBERATELY. An ambient affordance flickers on and off with every socket
89
+ * event; a live region there re-announces continuously and makes the surface unusable with a
90
+ * screen reader (`Skeleton`'s unconditional `aria-live="polite"` is the anti-pattern this default
91
+ * exists to avoid). `"polite"` opts in for the rare case where the change genuinely must be heard.
92
+ */
93
+ export type ActivityAnnounceProp = false | "polite";
@@ -71,3 +71,11 @@ export type TableDensityProp = Exclude<DensityProp, "default">;
71
71
  * each of which fails the Framework-Component Test) needs no page-local CSS.
72
72
  */
73
73
  export type CenteredShellPresetProp = "default" | "public-landing";
74
+ /**
75
+ * Axis of a rule / track / group — the shared inline↔block vocabulary (gh#308).
76
+ * `"horizontal"` (the default everywhere) runs along the INLINE axis, `"vertical"` along the
77
+ * BLOCK axis, so both flip correctly under `dir="rtl"` with no per-component rule. Promoted out
78
+ * of the inline `"horizontal" | "vertical"` unions each component file used to spell for itself,
79
+ * so `orientation` means one thing across Separator, Steps, RadioGroup and Toolbar.
80
+ */
81
+ export type OrientationProp = "horizontal" | "vertical";
@@ -71,8 +71,8 @@
71
71
  }
72
72
 
73
73
  [data-slot="alert-icon"] {
74
- width: 1.25rem;
75
- height: 1.25rem;
74
+ width: var(--alert-icon-size);
75
+ height: var(--alert-icon-size);
76
76
  flex-shrink: 0;
77
77
  margin-top: 0.125rem;
78
78
  }
@@ -178,12 +178,42 @@
178
178
  }
179
179
  }
180
180
 
181
+ /* Dismiss ✕ — BOTH halves of the affordance now live here. The rest opacity was a hard 0.7 in
182
+ * this file while its `:hover` companion sat on the component as `hover:opacity-100`, so the
183
+ * quiet-at-rest chrome (rule #44) was split across two files and a theme could reach neither.
184
+ * The hover rule is load-bearing: without it the ✕ stays at the rest alpha forever. */
181
185
  [data-slot="alert-dismiss"] {
182
186
  position: absolute;
183
187
  top: var(--alert-dismiss-space-offset);
184
188
  inset-inline-end: var(--alert-dismiss-space-offset);
185
189
  border-radius: var(--radius-sm);
186
- opacity: 0.7;
190
+ opacity: var(--alert-dismiss-rest-alpha);
191
+ transition: opacity var(--duration-fast) ease;
192
+ }
193
+
194
+ [data-slot="alert-dismiss"]:hover {
195
+ opacity: 1;
196
+ }
197
+
198
+ .ui-alert-dismiss-icon {
199
+ inline-size: var(--alert-dismiss-icon-size);
200
+ block-size: var(--alert-dismiss-icon-size);
201
+ }
202
+
203
+ /* AlertContent fills the body column but stays shrinkable, so a long unbroken token truncates
204
+ * instead of widening the alert. Was `min-w-0 flex-1` on the component. */
205
+ [data-slot="alert-content"] {
206
+ min-inline-size: 0;
207
+ flex: 1 1 0%;
208
+ }
209
+
210
+ /* TOAST (Sonner) — the status glyph handed to sonner through its all-or-nothing `icons` config
211
+ * prop. Sonner sizes the `[data-icon]` WRAPPER to a fixed 16px box and only sets `flex-shrink`
212
+ * + margins on the svg inside it, so the glyph's own size is ours to own; the token is what
213
+ * lets a consumer retune it without re-declaring all five icons. */
214
+ .ui-toast-icon {
215
+ inline-size: var(--toast-icon-size);
216
+ block-size: var(--toast-icon-size);
187
217
  }
188
218
 
189
219
  .ui-skeleton-block {
@@ -247,6 +277,42 @@
247
277
  border: 1px solid hsl(var(--border));
248
278
  border-radius: var(--skeleton-radius);
249
279
  padding: var(--skeleton-card-inset);
280
+
281
+ /* Skeleton bars, named for what they stand in for rather than their size (#319). */
282
+ .ui-skeleton-line {
283
+ block-size: var(--skeleton-block-height);
284
+ }
285
+
286
+ .ui-skeleton-caption {
287
+ block-size: var(--skeleton-caption-height);
288
+ }
289
+
290
+ .ui-skeleton-title {
291
+ block-size: var(--skeleton-title-height);
292
+ }
293
+
294
+ .ui-skeleton-detail-label {
295
+ block-size: var(--skeleton-caption-height);
296
+ inline-size: var(--skeleton-label-width);
297
+ }
298
+
299
+ /* Fills its grid track but stops at a readable measure — both are load-bearing: without the
300
+ * fill it would size to content, without the cap it would run the full track. */
301
+ .ui-skeleton-detail-value {
302
+ block-size: var(--skeleton-block-height);
303
+ inline-size: 100%;
304
+ max-inline-size: var(--skeleton-detail-value-max-width);
305
+ }
306
+
307
+ .ui-skeleton-stat-value {
308
+ block-size: var(--control-height);
309
+ inline-size: var(--skeleton-stat-value-width);
310
+ }
311
+
312
+ .ui-skeleton-stat-caption {
313
+ block-size: var(--skeleton-caption-height);
314
+ inline-size: var(--skeleton-stat-caption-width);
315
+ }
250
316
  }
251
317
 
252
318
  @keyframes pulse {
@@ -40,8 +40,8 @@
40
40
  }
41
41
 
42
42
  [data-slot="badge-icon"] {
43
- width: 0.75rem;
44
- height: 0.75rem;
43
+ width: var(--badge-icon-size);
44
+ height: var(--badge-icon-size);
45
45
  flex-shrink: 0;
46
46
  }
47
47
  }
@@ -108,6 +108,12 @@
108
108
  * is never emitted). In-repo the glob scans src; published, it scans dist. */
109
109
  @source "../**/*.{tsx,ts,js}";
110
110
  @import "../tokens/base.css";
111
+ /* The focus ring is FOUNDATION, not a component layer: every focusable control in
112
+ * every layer reads the same four tokens from ONE rule (styles/focus-ring.css).
113
+ * Imported here — not left to index.css — so a consumer that tree-shakes down to
114
+ * `styles/base` + two layout files still gets keyboard-focus affordance (WCAG
115
+ * 2.4.7); shipping it as an optional layer would make a11y opt-in by accident. */
116
+ @import "./focus-ring.css";
111
117
  @import "./density.css";
112
118
 
113
119
  /* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —