@starci/grammar 0.12.3 → 0.12.4

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 (173) hide show
  1. package/README.md +69 -21
  2. package/dist/.build-stamp.json +4 -4
  3. package/dist/common/components-avatar-group.css +7 -0
  4. package/dist/common/components-forms.css +7 -74
  5. package/dist/common/components-list-panel.css +36 -7
  6. package/dist/common/components-navigation.css +46 -157
  7. package/dist/common/components-overlays.css +1 -85
  8. package/dist/common/registry.d.ts +4 -4
  9. package/dist/common/renderers-navigation.d.ts +6 -5
  10. package/dist/common/renderers-navigation.d.ts.map +1 -1
  11. package/dist/common/renderers-navigation.js.map +1 -1
  12. package/dist/common/renderers.d.ts +4 -0
  13. package/dist/common/renderers.d.ts.map +1 -1
  14. package/dist/common/renderers.js +3 -0
  15. package/dist/common/renderers.js.map +1 -1
  16. package/dist/common/styles.css +7 -57
  17. package/dist/core/branch/AlertDialog/index.d.ts.map +1 -1
  18. package/dist/core/branch/AlertDialog/index.js +4 -1
  19. package/dist/core/branch/AlertDialog/index.js.map +1 -1
  20. package/dist/core/branch/DataTable/index.d.ts +0 -2
  21. package/dist/core/branch/DataTable/index.d.ts.map +1 -1
  22. package/dist/core/branch/DataTable/index.js +3 -2
  23. package/dist/core/branch/DataTable/index.js.map +1 -1
  24. package/dist/core/branch/Dialog/index.d.ts.map +1 -1
  25. package/dist/core/branch/Dialog/index.js +2 -1
  26. package/dist/core/branch/Dialog/index.js.map +1 -1
  27. package/dist/core/branch/DragItem/index.d.ts +2 -1
  28. package/dist/core/branch/DragItem/index.d.ts.map +1 -1
  29. package/dist/core/branch/DragItem/index.js +1 -1
  30. package/dist/core/branch/DragItem/index.js.map +1 -1
  31. package/dist/core/branch/Drawer/index.d.ts.map +1 -1
  32. package/dist/core/branch/Drawer/index.js +2 -1
  33. package/dist/core/branch/Drawer/index.js.map +1 -1
  34. package/dist/core/branch/DropdownMenu/index.d.ts +3 -0
  35. package/dist/core/branch/DropdownMenu/index.d.ts.map +1 -1
  36. package/dist/core/branch/DropdownMenu/index.js +4 -2
  37. package/dist/core/branch/DropdownMenu/index.js.map +1 -1
  38. package/dist/core/branch/FlowGraph/index.d.ts +4 -1
  39. package/dist/core/branch/FlowGraph/index.d.ts.map +1 -1
  40. package/dist/core/branch/FlowGraph/index.js +1 -1
  41. package/dist/core/branch/FlowGraph/index.js.map +1 -1
  42. package/dist/core/branch/ListBox/index.d.ts +22 -3
  43. package/dist/core/branch/ListBox/index.d.ts.map +1 -1
  44. package/dist/core/branch/ListBox/index.js +9 -5
  45. package/dist/core/branch/ListBox/index.js.map +1 -1
  46. package/dist/core/branch/Select/index.d.ts +3 -0
  47. package/dist/core/branch/Select/index.d.ts.map +1 -1
  48. package/dist/core/branch/Select/index.js +5 -1
  49. package/dist/core/branch/Select/index.js.map +1 -1
  50. package/dist/core/branch/SurfaceCard/index.d.ts.map +1 -1
  51. package/dist/core/branch/SurfaceCard/index.js +2 -1
  52. package/dist/core/branch/SurfaceCard/index.js.map +1 -1
  53. package/dist/core/branch/SurfaceListCard/index.d.ts.map +1 -1
  54. package/dist/core/branch/SurfaceListCard/index.js +2 -1
  55. package/dist/core/branch/SurfaceListCard/index.js.map +1 -1
  56. package/dist/core/branch/Tabs/classNames.d.ts +1 -3
  57. package/dist/core/branch/Tabs/classNames.d.ts.map +1 -1
  58. package/dist/core/branch/Tabs/classNames.js +1 -4
  59. package/dist/core/branch/Tabs/classNames.js.map +1 -1
  60. package/dist/core/branch/Tabs/index.d.ts +2 -6
  61. package/dist/core/branch/Tabs/index.d.ts.map +1 -1
  62. package/dist/core/branch/Tabs/index.js +5 -3
  63. package/dist/core/branch/Tabs/index.js.map +1 -1
  64. package/dist/core/buttonIntent.d.ts +27 -0
  65. package/dist/core/buttonIntent.d.ts.map +1 -0
  66. package/dist/core/buttonIntent.js +29 -0
  67. package/dist/core/buttonIntent.js.map +1 -0
  68. package/dist/core/collectionItem.d.ts +16 -0
  69. package/dist/core/collectionItem.d.ts.map +1 -0
  70. package/dist/core/collectionItem.js +12 -0
  71. package/dist/core/collectionItem.js.map +1 -0
  72. package/dist/core/composite/AvatarButton/index.d.ts +5 -4
  73. package/dist/core/composite/AvatarButton/index.d.ts.map +1 -1
  74. package/dist/core/composite/AvatarButton/index.js +2 -2
  75. package/dist/core/composite/AvatarButton/index.js.map +1 -1
  76. package/dist/core/composite/AvatarGroup/index.d.ts +6 -4
  77. package/dist/core/composite/AvatarGroup/index.d.ts.map +1 -1
  78. package/dist/core/composite/AvatarGroup/index.js +4 -3
  79. package/dist/core/composite/AvatarGroup/index.js.map +1 -1
  80. package/dist/core/composite/CollectionItem/index.d.ts +8 -0
  81. package/dist/core/composite/CollectionItem/index.d.ts.map +1 -0
  82. package/dist/core/composite/CollectionItem/index.js +5 -0
  83. package/dist/core/composite/CollectionItem/index.js.map +1 -0
  84. package/dist/core/composite/Fieldset/index.js +2 -2
  85. package/dist/core/composite/Fieldset/index.js.map +1 -1
  86. package/dist/core/composite/IdentityLockup/index.d.ts +2 -2
  87. package/dist/core/composite/IdentityLockup/index.d.ts.map +1 -1
  88. package/dist/core/composite/IdentityLockup/index.js +1 -1
  89. package/dist/core/composite/ItemActions/index.d.ts +8 -0
  90. package/dist/core/composite/ItemActions/index.d.ts.map +1 -0
  91. package/dist/core/composite/ItemActions/index.js +5 -0
  92. package/dist/core/composite/ItemActions/index.js.map +1 -0
  93. package/dist/core/composite/ListRow/index.d.ts.map +1 -1
  94. package/dist/core/composite/ListRow/index.js +2 -1
  95. package/dist/core/composite/ListRow/index.js.map +1 -1
  96. package/dist/core/composite/SegmentedControl/index.d.ts.map +1 -1
  97. package/dist/core/composite/SegmentedControl/index.js +2 -2
  98. package/dist/core/composite/SegmentedControl/index.js.map +1 -1
  99. package/dist/core/composite/TagGroup/index.d.ts +3 -3
  100. package/dist/core/composite/TagGroup/index.d.ts.map +1 -1
  101. package/dist/core/composite/TagGroup/index.js +1 -1
  102. package/dist/core/composite/TagGroup/index.js.map +1 -1
  103. package/dist/core/composite/ToolbarActions/index.d.ts +8 -0
  104. package/dist/core/composite/ToolbarActions/index.d.ts.map +1 -0
  105. package/dist/core/composite/ToolbarActions/index.js +5 -0
  106. package/dist/core/composite/ToolbarActions/index.js.map +1 -0
  107. package/dist/core/composition/ChatWorkspace/index.d.ts.map +1 -1
  108. package/dist/core/composition/ChatWorkspace/index.js +2 -1
  109. package/dist/core/composition/ChatWorkspace/index.js.map +1 -1
  110. package/dist/core/composition/NavigationFeatureNav/index.d.ts.map +1 -1
  111. package/dist/core/composition/NavigationFeatureNav/index.js +2 -1
  112. package/dist/core/composition/NavigationFeatureNav/index.js.map +1 -1
  113. package/dist/core/composition/Sidebar/index.d.ts +4 -0
  114. package/dist/core/composition/Sidebar/index.d.ts.map +1 -1
  115. package/dist/core/composition/Sidebar/index.js +5 -3
  116. package/dist/core/composition/Sidebar/index.js.map +1 -1
  117. package/dist/core/composition/TopBar/index.d.ts.map +1 -1
  118. package/dist/core/composition/TopBar/index.js +2 -1
  119. package/dist/core/composition/TopBar/index.js.map +1 -1
  120. package/dist/core/composition/WorkspaceShell/index.d.ts.map +1 -1
  121. package/dist/core/composition/WorkspaceShell/index.js +3 -2
  122. package/dist/core/composition/WorkspaceShell/index.js.map +1 -1
  123. package/dist/core/dna.d.ts +59 -2
  124. package/dist/core/dna.d.ts.map +1 -1
  125. package/dist/core/dna.js +34 -2
  126. package/dist/core/dna.js.map +1 -1
  127. package/dist/core/primitive/Avatar/index.d.ts +32 -24
  128. package/dist/core/primitive/Avatar/index.d.ts.map +1 -1
  129. package/dist/core/primitive/Avatar/index.js +57 -30
  130. package/dist/core/primitive/Avatar/index.js.map +1 -1
  131. package/dist/core/primitive/Button/index.d.ts +3 -1
  132. package/dist/core/primitive/Button/index.d.ts.map +1 -1
  133. package/dist/core/primitive/Button/index.js +4 -1
  134. package/dist/core/primitive/Button/index.js.map +1 -1
  135. package/dist/core/primitive/Field/index.d.ts +10 -1
  136. package/dist/core/primitive/Field/index.d.ts.map +1 -1
  137. package/dist/core/primitive/Field/index.js +16 -1
  138. package/dist/core/primitive/Field/index.js.map +1 -1
  139. package/dist/core/primitive/FileDropzone/index.d.ts.map +1 -1
  140. package/dist/core/primitive/FileDropzone/index.js +2 -2
  141. package/dist/core/primitive/FileDropzone/index.js.map +1 -1
  142. package/dist/core/primitive/GrammarRoot/index.d.ts.map +1 -1
  143. package/dist/core/primitive/GrammarRoot/index.js +3 -1
  144. package/dist/core/primitive/GrammarRoot/index.js.map +1 -1
  145. package/dist/core/primitive/IconButton/index.d.ts +6 -3
  146. package/dist/core/primitive/IconButton/index.d.ts.map +1 -1
  147. package/dist/core/primitive/IconButton/index.js +4 -1
  148. package/dist/core/primitive/IconButton/index.js.map +1 -1
  149. package/dist/core/primitive/Input/index.d.ts.map +1 -1
  150. package/dist/core/primitive/Input/index.js +3 -18
  151. package/dist/core/primitive/Input/index.js.map +1 -1
  152. package/dist/core/primitive/ListItem/index.d.ts.map +1 -1
  153. package/dist/core/primitive/ListItem/index.js +2 -1
  154. package/dist/core/primitive/ListItem/index.js.map +1 -1
  155. package/dist/core/primitive/Skeleton/index.js +1 -1
  156. package/dist/core/primitive/Skeleton/index.js.map +1 -1
  157. package/dist/core/primitive/Slider/index.d.ts.map +1 -1
  158. package/dist/core/primitive/Slider/index.js +2 -2
  159. package/dist/core/primitive/Slider/index.js.map +1 -1
  160. package/dist/core/primitive/Switch/index.d.ts +3 -6
  161. package/dist/core/primitive/Switch/index.d.ts.map +1 -1
  162. package/dist/core/primitive/Switch/index.js +1 -1
  163. package/dist/core/primitive/Switch/index.js.map +1 -1
  164. package/dist/core/styles.css +0 -2
  165. package/dist/heritage/dna.d.ts +62 -0
  166. package/dist/heritage/dna.d.ts.map +1 -0
  167. package/dist/heritage/dna.js +37 -0
  168. package/dist/heritage/dna.js.map +1 -0
  169. package/dist/offset-pop/dna.d.ts +56 -0
  170. package/dist/offset-pop/dna.d.ts.map +1 -1
  171. package/dist/offset-pop/dna.js +31 -0
  172. package/dist/offset-pop/dna.js.map +1 -1
  173. package/package.json +3 -2
@@ -18,26 +18,18 @@
18
18
 
19
19
  /* ---------- Link ---------- */
20
20
  .starci-core-link {
21
- color: var(--accent, var(--starci-core-accent, LinkText));
22
21
  text-decoration-line: underline;
23
22
  text-decoration-thickness: 1px;
24
23
  text-underline-offset: 0.2em;
25
- border-radius: 0.25rem;
26
24
  overflow-wrap: anywhere;
27
25
  }
28
26
 
29
- .starci-core-link[data-grammar-link-visited="distinct"]:visited {
30
- color: var(--accent-soft-foreground, var(--starci-core-accent, VisitedText));
31
- }
32
-
33
27
  .starci-core-link:hover,
34
28
  .starci-core-link[data-hovered="true"] {
35
29
  text-decoration-thickness: 2px;
36
30
  }
37
31
 
38
32
  .starci-core-link[data-grammar-current="true"] {
39
- color: var(--foreground, var(--starci-core-foreground, CanvasText));
40
- font-weight: 600;
41
33
  text-decoration-line: none;
42
34
  }
43
35
 
@@ -48,9 +40,7 @@
48
40
  }
49
41
 
50
42
  .starci-core-link[aria-disabled="true"] {
51
- color: var(--muted, GrayText);
52
43
  text-decoration-line: none;
53
- cursor: default;
54
44
  }
55
45
 
56
46
  .starci-core-link-external-icon {
@@ -88,7 +78,6 @@
88
78
  min-width: 0;
89
79
  align-items: center;
90
80
  gap: var(--grammar-inline-gap, 0.5rem);
91
- color: var(--muted, var(--starci-core-muted, GrayText));
92
81
  }
93
82
 
94
83
  .starci-core-breadcrumb-label {
@@ -118,8 +107,6 @@
118
107
 
119
108
  .starci-core-breadcrumb-label[data-grammar-current="true"] {
120
109
  max-width: none;
121
- color: var(--foreground, var(--starci-core-foreground, CanvasText));
122
- font-weight: 600;
123
110
  }
124
111
 
125
112
  /* A crumb whose label is not known yet (knowledge STATE-8): a short Skeleton text line of the label's size. */
@@ -156,8 +143,6 @@
156
143
  .starci-core-pagination-page,
157
144
  .starci-core-pagination-step {
158
145
  min-inline-size: 2.75rem;
159
- min-block-size: 2.75rem;
160
- border-radius: var(--radius, 0.5rem);
161
146
  }
162
147
 
163
148
  .starci-core-pagination-step {
@@ -167,20 +152,6 @@
167
152
  padding-inline: 0.75rem;
168
153
  }
169
154
 
170
- .starci-core-pagination-page[data-grammar-current="true"] {
171
- background: var(--accent-soft, var(--starci-core-accent, Highlight));
172
- color: var(--accent-soft-foreground, var(--starci-core-accent, HighlightText));
173
- font-weight: 600;
174
- }
175
-
176
- .starci-core-pagination-page:focus-visible,
177
- .starci-core-pagination-step:focus-visible,
178
- .starci-core-pagination-page[data-focus-visible="true"],
179
- .starci-core-pagination-step[data-focus-visible="true"] {
180
- outline: 2px solid var(--focus, var(--accent, Highlight));
181
- outline-offset: 2px;
182
- }
183
-
184
155
  @media (max-width: 30rem) {
185
156
  .starci-core-pagination-step-label {
186
157
  position: absolute;
@@ -508,11 +479,6 @@
508
479
  opacity: 0.5;
509
480
  }
510
481
 
511
- .starci-core-bottom-nav-item[data-grammar-current="true"] {
512
- color: var(--accent, Highlight);
513
- font-weight: 600;
514
- }
515
-
516
482
  .starci-core-bottom-nav-item:focus-visible {
517
483
  outline: 2px solid var(--focus, var(--accent, Highlight));
518
484
  outline-offset: -2px;
@@ -629,21 +595,14 @@
629
595
 
630
596
  .starci-core-footer-links .starci-core-link {
631
597
  display: inline-flex;
632
- min-block-size: 2.75rem;
633
598
  align-items: center;
634
- color: var(--muted, GrayText);
635
599
  text-decoration-line: none;
636
600
  }
637
601
 
638
602
  .starci-core-footer-links .starci-core-link:hover {
639
- color: var(--foreground, CanvasText);
640
603
  text-decoration-line: underline;
641
604
  }
642
605
 
643
- .starci-core-footer-links .starci-core-link[data-grammar-current="true"] {
644
- color: var(--foreground, CanvasText);
645
- }
646
-
647
606
  .starci-core-footer-legal {
648
607
  color: var(--muted, GrayText);
649
608
  font-size: 0.8125rem;
@@ -654,38 +613,37 @@
654
613
  flex: 0 0 auto;
655
614
  }
656
615
 
657
- /* The control size: the shared control height (2.75rem) over the vendor `lg` avatar, so it lines up with the IconButtons of a bar. */
658
- .starci-core-avatar[data-grammar-avatar-size="control"] {
659
- --avatar-size: var(--starci-core-control-min-size, 2.75rem);
660
- block-size: var(--starci-core-control-min-size, 2.75rem) !important;
661
- inline-size: var(--starci-core-control-min-size, 2.75rem) !important;
616
+ .starci-core-avatar-initials {
617
+ inline-size: 100%;
618
+ block-size: 100%;
619
+ object-fit: cover;
662
620
  }
663
621
 
664
- .starci-core-avatar-skeleton[data-grammar-avatar-size="control"] > * {
665
- block-size: var(--starci-core-control-min-size, 2.75rem);
666
- inline-size: var(--starci-core-control-min-size, 2.75rem);
622
+ .starci-core-avatar-agent-anchor {
623
+ overflow: visible !important;
624
+ background: transparent !important;
625
+ border-radius: 50% !important;
667
626
  }
668
627
 
669
- /* A loading avatar (knowledge STATE-8): the Skeleton circle at the avatar's size. */
670
- .starci-core-avatar-skeleton { display: inline-flex; }
628
+ .starci-core-avatar-agent-badge {
629
+ --badge-border: var(--surface, Canvas) !important;
630
+ box-shadow: 0 0 0 1px var(--surface, Canvas);
631
+ }
671
632
 
672
- .starci-core-avatar[data-grammar-current="true"] {
673
- box-shadow: 0 0 0 2px var(--background, Canvas), 0 0 0 4px var(--accent, Highlight);
633
+ .starci-core-avatar-agent-glyph {
634
+ inline-size: 0.75rem;
635
+ block-size: 0.75rem;
674
636
  }
675
637
 
638
+ /* A loading avatar (knowledge STATE-8): the Skeleton circle at the avatar's size. */
639
+ .starci-core-avatar-skeleton { display: inline-flex; }
640
+
676
641
  /*
677
- * A square brand mark (Avatar shape="square"): a transparent box with no corner and no clipping; the image is contained, so a round,
642
+ * A square brand mark (Avatar shape="square"): no clipping; the image is contained, so a round,
678
643
  * square or wide logo shows whole in its own shape.
679
644
  */
680
645
  .starci-core-avatar[data-grammar-avatar-shape="square"] {
681
646
  overflow: visible !important;
682
- border-radius: 0 !important;
683
- background: transparent !important;
684
- }
685
-
686
- .starci-core-avatar[data-grammar-avatar-shape="square"] > * {
687
- border-radius: 0 !important;
688
- background-color: transparent;
689
647
  }
690
648
 
691
649
  .starci-core-avatar[data-grammar-avatar-shape="square"] img {
@@ -694,15 +652,6 @@
694
652
  object-fit: contain !important;
695
653
  }
696
654
 
697
- /* A rounded brand or workspace mark (Avatar shape="rounded", an explicit opt-in): the image and the initials share the corner. */
698
- .starci-core-avatar[data-grammar-avatar-shape="rounded"] {
699
- border-radius: 0.75rem !important;
700
- }
701
-
702
- .starci-core-avatar[data-grammar-avatar-shape="rounded"] > * {
703
- border-radius: inherit !important;
704
- }
705
-
706
655
  /*
707
656
  * --- PlainPressable: a pressable that does not look like a button ---
708
657
  * No padding, background, border or button shape in any state; NO hover effect; the only feedback is a zoom-out on
@@ -796,13 +745,6 @@
796
745
  white-space: nowrap;
797
746
  }
798
747
 
799
- /* The workspace monogram shares the mark's transparent box and uses the foreground text color. */
800
- .starci-core-identity-lockup [data-grammar-avatar-fallback] {
801
- background-color: transparent !important;
802
- color: var(--foreground, CanvasText) !important;
803
- font-weight: 600;
804
- }
805
-
806
748
  .starci-core-avatar-group {
807
749
  min-width: 0;
808
750
  max-width: 100%;
@@ -837,37 +779,15 @@
837
779
  white-space: nowrap;
838
780
  }
839
781
 
840
- .starci-core-tag[data-selected="true"],
841
- .starci-core-tag:has(> [data-grammar-selected="true"]) {
842
- background: var(--accent-soft, Highlight);
843
- color: var(--accent-soft-foreground, HighlightText);
844
- }
845
-
846
782
  /*
847
- * Selectable chips (0.9.6, selectionMode single or multiple): a group of choices reads as secondary
848
- * buttons with a border. Unselected = the secondary-button face (--default, hover --default-hover,
849
- * the same tokens `.button--secondary` uses) with a 1px inset --border and the default foreground;
850
- * selected = the accent-soft fill plus a 1px inset accent border. Static groups (selectionMode
851
- * "none") and off chips are not matched and keep their look. The vendor `.tag--default` paint lives
852
- * in the later `components` layer, which beats any earlier layer, so only the background takes
853
- * `!important` (the same documented approach as the off chip); a family restyles it through
854
- * `--starci-core-tag-bg` and `--starci-core-tag-bg-hover`, never by out-ranking this rule.
783
+ * Selectable chips (0.9.6, selectionMode single or multiple): a group of choices carries a 1px inset ring,
784
+ * --border when unselected and --accent when selected. The chip face, hover and selected paint are HeroUI's own.
785
+ * Static groups (selectionMode "none") and off chips are not matched and keep their look.
855
786
  */
856
787
  .starci-core-tag-group:is([data-grammar-tag-selection="single"], [data-grammar-tag-selection="multiple"]) .starci-core-tag:not([data-grammar-tag-state="off"]) {
857
788
  box-shadow: inset 0 0 0 1px var(--starci-core-tag-ring, var(--border, GrayText));
858
789
  }
859
790
 
860
- .starci-core-tag-group:is([data-grammar-tag-selection="single"], [data-grammar-tag-selection="multiple"]) .starci-core-tag:not([data-grammar-tag-state="off"]):not([data-selected="true"]):not(:has(> [data-grammar-selected="true"])) {
861
- background: var(--starci-core-tag-bg, var(--default, ButtonFace)) !important;
862
- color: var(--default-foreground, var(--foreground, ButtonText));
863
- }
864
-
865
- @media (hover: hover) {
866
- .starci-core-tag-group:is([data-grammar-tag-selection="single"], [data-grammar-tag-selection="multiple"]) .starci-core-tag:not([data-grammar-tag-state="off"]):not([data-selected="true"]):not([data-disabled="true"]):not(:has(> [data-grammar-selected="true"])):is(:hover, [data-hovered="true"]) {
867
- background: var(--starci-core-tag-bg-hover, var(--default-hover, ButtonFace)) !important;
868
- }
869
- }
870
-
871
791
  .starci-core-tag-group:is([data-grammar-tag-selection="single"], [data-grammar-tag-selection="multiple"]) .starci-core-tag:not([data-grammar-tag-state="off"]):is([data-selected="true"], :has(> [data-grammar-selected="true"])) {
872
792
  --starci-core-tag-ring: var(--accent, Highlight);
873
793
  }
@@ -879,18 +799,7 @@
879
799
  }
880
800
  }
881
801
 
882
- /*
883
- * An off chip (0.6.0, `TagGroupItem.isOff`): HeroUI's tertiary chip - a transparent ground - with a
884
- * 1px --border outline and the muted foreground, so it reads as present-but-off beside its filled
885
- * peers. It stays focusable (no disabled opacity). `!important` because the vendor `.tag--default`
886
- * paint lives in the later `components` layer.
887
- */
888
- .starci-core-tag[data-grammar-tag-state="off"] {
889
- background: transparent !important;
890
- box-shadow: inset 0 0 0 1px var(--border, GrayText) !important;
891
- color: var(--muted, GrayText) !important;
892
- }
893
-
802
+ /* An off chip (`TagGroupItem.isOff`) is HeroUI's `surface` chip variant; only forced-colors needs a mark beyond it. */
894
803
  @media (forced-colors: active) {
895
804
  .starci-core-tag[data-grammar-tag-state="off"] {
896
805
  outline: 1px dashed GrayText;
@@ -905,7 +814,6 @@
905
814
 
906
815
  .starci-core-tag-remove {
907
816
  min-inline-size: 1.5rem;
908
- min-block-size: 1.5rem;
909
817
  }
910
818
 
911
819
  .starci-core-tag-empty {
@@ -940,20 +848,16 @@
940
848
  .starci-core-data-table-content {
941
849
  min-width: 100%;
942
850
  width: max-content;
943
- border-collapse: separate;
944
- border-spacing: 0;
945
851
  }
946
852
 
947
853
  .starci-core-data-table[data-grammar-table-sticky="true"] .starci-core-data-table-header {
948
854
  position: sticky;
949
855
  z-index: 1;
950
856
  top: 0;
951
- background: var(--surface, Canvas);
952
857
  }
953
858
 
954
859
  .starci-core-data-table-column,
955
860
  .starci-core-data-table-cell {
956
- padding: 0.75rem;
957
861
  text-align: start;
958
862
  white-space: nowrap;
959
863
  }
@@ -961,13 +865,11 @@
961
865
  .starci-core-data-table-column[data-grammar-table-align="end"],
962
866
  .starci-core-data-table-cell[data-grammar-table-align="end"] {
963
867
  text-align: end;
964
- font-variant-numeric: tabular-nums;
965
868
  }
966
869
 
967
870
  .starci-core-data-table-column[data-grammar-table-selection="true"],
968
871
  .starci-core-data-table-cell[data-grammar-table-selection="true"] {
969
872
  width: 2.75rem;
970
- padding-inline-end: 0;
971
873
  }
972
874
 
973
875
  .starci-core-data-table-row[data-grammar-selected="true"] {
@@ -975,13 +877,6 @@
975
877
  color: var(--accent-soft-foreground, HighlightText);
976
878
  }
977
879
 
978
- .starci-core-data-table-row[data-focus-visible="true"],
979
- .starci-core-data-table-column[data-focus-visible="true"],
980
- .starci-core-data-table-cell[data-focus-visible="true"] {
981
- outline: 2px solid var(--focus, var(--accent, Highlight));
982
- outline-offset: -2px;
983
- }
984
-
985
880
  .starci-core-data-table-placeholder {
986
881
  display: flex;
987
882
  min-block-size: 8rem;
@@ -993,23 +888,8 @@
993
888
  text-align: center;
994
889
  }
995
890
 
996
- .starci-core-data-table-cell[data-grammar-cell-tone="muted"] {
997
- background: var(--surface-secondary, Canvas);
998
- }
999
-
1000
- .starci-core-data-table-cell[data-grammar-cell-highlighted="true"] {
1001
- background: var(--accent-soft, Highlight);
1002
- }
1003
-
1004
- .starci-core-data-table-cell[data-grammar-cell-interaction="true"] {
1005
- height: 1px;
1006
- padding: 0;
1007
- }
1008
-
1009
891
  .starci-core-data-table-cell-content {
1010
892
  box-sizing: border-box;
1011
- height: 100%;
1012
- padding: 0.75rem;
1013
893
  }
1014
894
 
1015
895
  .starci-core-drag-item {
@@ -1025,11 +905,6 @@
1025
905
  padding: 0.25rem 0.5rem;
1026
906
  }
1027
907
 
1028
- .starci-core-drag-item[data-grammar-selected="true"] {
1029
- outline: 2px solid var(--accent, Highlight);
1030
- outline-offset: 1px;
1031
- }
1032
-
1033
908
  .starci-core-drag-item[data-grammar-invalid="true"] {
1034
909
  border-color: var(--danger, Mark);
1035
910
  border-inline-start-color: var(--starci-drag-item-leading, var(--danger, Mark));
@@ -1194,6 +1069,25 @@
1194
1069
  flex: 0 0 auto;
1195
1070
  }
1196
1071
 
1072
+ .starci-core-list-box-item {
1073
+ --grammar-list-leading-size: 2.5rem;
1074
+ }
1075
+
1076
+ .starci-core-list-box-item[data-grammar-list-size="sm"] {
1077
+ --grammar-list-leading-size: 2rem;
1078
+ }
1079
+
1080
+ .starci-core-list-box-item[data-grammar-list-size="lg"] {
1081
+ --grammar-list-leading-size: 3rem;
1082
+ }
1083
+
1084
+ .starci-core-list-box-item > [data-grammar-list-leading="true"] {
1085
+ inline-size: var(--grammar-list-leading-size);
1086
+ block-size: var(--grammar-list-leading-size);
1087
+ align-items: center;
1088
+ justify-content: center;
1089
+ }
1090
+
1197
1091
  [data-grammar-list-trailing] {
1198
1092
  margin-inline-start: auto;
1199
1093
  }
@@ -1255,6 +1149,9 @@
1255
1149
  justify-content: space-between;
1256
1150
  gap: var(--grammar-row-gap, 0.75rem);
1257
1151
  text-align: start;
1152
+ }
1153
+
1154
+ .starci-core-disclosure-trigger {
1258
1155
  font-weight: 600;
1259
1156
  }
1260
1157
 
@@ -1517,7 +1414,6 @@
1517
1414
 
1518
1415
  .starci-core-calendar-nav {
1519
1416
  min-inline-size: 2.75rem;
1520
- min-block-size: 2.75rem;
1521
1417
  }
1522
1418
 
1523
1419
  .starci-core-calendar-month {
@@ -1525,13 +1421,7 @@
1525
1421
  table-layout: fixed;
1526
1422
  }
1527
1423
 
1528
- .starci-core-calendar-day[data-selected="true"] {
1529
- background: var(--accent, Highlight);
1530
- color: var(--accent-foreground, HighlightText);
1531
- }
1532
-
1533
1424
  .starci-core-calendar-day[data-unavailable="true"] {
1534
- color: var(--muted, GrayText);
1535
1425
  text-decoration-line: line-through;
1536
1426
  }
1537
1427
 
@@ -1582,7 +1472,7 @@
1582
1472
  .starci-core-flow-graph[data-grammar-flow-height="sm"] .starci-core-flow-graph-canvas { block-size: 16rem; }
1583
1473
  .starci-core-flow-graph[data-grammar-flow-height="lg"] .starci-core-flow-graph-canvas { block-size: 32rem; }
1584
1474
 
1585
- .starci-core-flow-graph-loading > .starci-core-skeleton { block-size: 100%; aspect-ratio: auto; border-radius: 0; }
1475
+ .starci-core-flow-graph-loading > .starci-core-skeleton { block-size: 100%; aspect-ratio: auto; }
1586
1476
 
1587
1477
  .starci-core-flow-graph-empty {
1588
1478
  display: flex;
@@ -1713,7 +1603,6 @@
1713
1603
  }
1714
1604
 
1715
1605
  /* Selection and keyboard focus draw the package focus ring on the card, not on the React Flow wrapper. */
1716
- .starci-core-flow-graph-node[data-grammar-selected="true"],
1717
1606
  .starci-core-flow-graph .react-flow__node:focus-visible > .starci-core-flow-graph-node {
1718
1607
  outline: 2px solid var(--focus, var(--starci-core-focus, Highlight));
1719
1608
  outline-offset: 2px;
@@ -104,18 +104,11 @@
104
104
  .starci-core-drawer {
105
105
  display: flex;
106
106
  min-width: 0;
107
- min-height: 0;
108
107
  flex: 1;
109
108
  flex-direction: column;
110
109
  gap: var(--grammar-section-gap, 1rem);
111
- max-height: calc(100dvh - 2 * var(--grammar-page-inset, 1rem));
112
110
  overflow: hidden;
113
- padding: 1.5rem;
114
- border-radius: var(--starci-core-surface-radius, 1rem);
115
- background: var(--surface, Canvas);
116
111
  color: var(--surface-foreground, CanvasText);
117
- box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, 0 8px 28px color-mix(in srgb, var(--foreground, CanvasText) 12%, transparent)));
118
- outline: none;
119
112
  }
120
113
 
121
114
  /* The vendor header is `flex flex-col`; the title group and the close action share one row, the action at the end. */
@@ -143,11 +136,6 @@
143
136
 
144
137
  .starci-core-overlay-title {
145
138
  margin: 0;
146
- color: var(--surface-foreground, CanvasText);
147
- font-size: 1.125rem;
148
- font-weight: 700;
149
- letter-spacing: -0.01em;
150
- line-height: 1.3;
151
139
  overflow-wrap: anywhere;
152
140
  }
153
141
 
@@ -159,12 +147,9 @@
159
147
  }
160
148
 
161
149
  .starci-core-overlay-body {
162
- min-height: 0;
163
150
  flex: 1;
164
151
  overflow-y: auto;
165
152
  overscroll-behavior: contain;
166
- font-size: 0.875rem;
167
- line-height: 1.5;
168
153
  }
169
154
 
170
155
  .starci-core-overlay-footer {
@@ -191,8 +176,6 @@
191
176
  align-items: center;
192
177
  justify-content: center;
193
178
  width: 2.5rem;
194
- height: 2.5rem;
195
- border-radius: 999px;
196
179
  background: color-mix(in srgb, var(--starci-core-overlay-tone) 16%, transparent);
197
180
  color: var(--starci-core-overlay-tone);
198
181
  }
@@ -262,37 +245,10 @@
262
245
  bottom: 0;
263
246
  }
264
247
 
265
- .starci-core-drawer {
266
- max-height: none;
267
- border-radius: 0;
268
- }
269
-
270
- .starci-core-drawer[data-placement="right"] {
271
- border-start-start-radius: var(--starci-core-surface-radius, 1rem);
272
- border-end-start-radius: var(--starci-core-surface-radius, 1rem);
273
- }
274
-
275
- .starci-core-drawer[data-placement="left"] {
276
- border-start-end-radius: var(--starci-core-surface-radius, 1rem);
277
- border-end-end-radius: var(--starci-core-surface-radius, 1rem);
278
- }
279
-
280
- .starci-core-drawer[data-placement="bottom"] {
281
- padding-block-end: max(1.5rem, env(safe-area-inset-bottom));
282
- border-start-start-radius: var(--starci-core-surface-radius, 1rem);
283
- border-start-end-radius: var(--starci-core-surface-radius, 1rem);
284
- }
285
-
286
- .starci-core-drawer[data-placement="top"] {
287
- border-end-start-radius: var(--starci-core-surface-radius, 1rem);
288
- border-end-end-radius: var(--starci-core-surface-radius, 1rem);
289
- }
290
-
291
248
  .starci-core-drawer-handle {
292
249
  display: flex;
293
250
  justify-content: center;
294
251
  margin-block: -0.75rem -0.25rem;
295
- padding-block: 0.5rem;
296
252
  cursor: grab;
297
253
  touch-action: none;
298
254
  }
@@ -348,10 +304,7 @@
348
304
  .starci-core-popover {
349
305
  max-width: min(20rem, calc(100vw - 2rem));
350
306
  overflow: auto;
351
- border-radius: var(--starci-core-control-radius, 0.75rem);
352
- background: var(--surface, Canvas);
353
307
  color: var(--surface-foreground, CanvasText);
354
- box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, 0 8px 28px color-mix(in srgb, var(--foreground, CanvasText) 12%, transparent)));
355
308
  outline: none;
356
309
  }
357
310
 
@@ -363,8 +316,6 @@
363
316
  display: flex;
364
317
  flex-direction: column;
365
318
  gap: var(--grammar-inline-gap, 0.5rem);
366
- padding: 1rem;
367
- outline: none;
368
319
  font-size: 0.875rem;
369
320
  line-height: 1.5;
370
321
  }
@@ -375,10 +326,6 @@
375
326
  overflow-wrap: anywhere;
376
327
  }
377
328
 
378
- .starci-core-popover-dialog > .starci-core-overlay-title {
379
- font-size: 1rem;
380
- }
381
-
382
329
  .starci-core-popover-arrow svg {
383
330
  display: block;
384
331
  fill: var(--surface, Canvas);
@@ -571,8 +518,6 @@
571
518
  */
572
519
  .starci-core-alert[data-grammar-appearance="soft"] {
573
520
  --starci-core-alert-soft: var(--default-soft, var(--default, transparent));
574
- background: color-mix(in srgb, var(--starci-core-alert-soft) 50%, transparent);
575
- box-shadow: none;
576
521
  }
577
522
 
578
523
  .starci-core-alert[data-grammar-appearance="soft"][data-grammar-tone="informative"] {
@@ -595,7 +540,6 @@
595
540
  surface, so the content takes its own height. */
596
541
  .starci-core-alert-content {
597
542
  min-width: min(100%, 12rem);
598
- height: auto;
599
543
  flex: 1;
600
544
  }
601
545
 
@@ -666,19 +610,10 @@
666
610
  .starci-core-kbd {
667
611
  display: inline-flex;
668
612
  min-width: 1.5rem;
669
- height: 1.5rem;
670
613
  align-items: center;
671
614
  justify-content: center;
672
615
  gap: 0.125rem;
673
- padding: 0 0.375rem;
674
616
  border: 1px solid var(--border, CanvasText);
675
- border-radius: 0.375rem;
676
- background: var(--surface-secondary, Canvas);
677
- color: var(--surface-foreground, CanvasText);
678
- font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
679
- font-size: 0.75rem;
680
- font-weight: 500;
681
- line-height: 1;
682
617
  white-space: nowrap;
683
618
  }
684
619
 
@@ -739,9 +674,6 @@
739
674
  position: relative;
740
675
  display: block;
741
676
  overflow: hidden;
742
- border-radius: 0.25rem;
743
- background: color-mix(in srgb, var(--foreground, CanvasText) 9%, transparent);
744
- pointer-events: none;
745
677
  }
746
678
 
747
679
  .starci-core-skeleton-group > .starci-core-skeleton {
@@ -756,7 +688,6 @@
756
688
  .starci-core-skeleton[data-shape="rect"] {
757
689
  width: 100%;
758
690
  aspect-ratio: 16 / 9;
759
- border-radius: var(--starci-core-surface-radius, 1rem);
760
691
  }
761
692
 
762
693
  .starci-core-skeleton[data-shape="rect"][data-ratio="square"] {
@@ -771,7 +702,6 @@
771
702
  flex: none;
772
703
  width: 2.5rem;
773
704
  height: 2.5rem;
774
- border-radius: 999px;
775
705
  }
776
706
 
777
707
  .starci-core-skeleton[data-shape="circle"][data-size="sm"] {
@@ -846,22 +776,10 @@
846
776
 
847
777
  .starci-core-meter-output {
848
778
  color: var(--muted, GrayText);
849
- font-size: 0.875rem;
850
- font-variant-numeric: tabular-nums;
851
779
  }
852
780
 
853
781
  .starci-core-meter-track {
854
782
  overflow: hidden;
855
- height: 0.5rem;
856
- border-radius: 999px;
857
- background: color-mix(in srgb, var(--foreground, CanvasText) 10%, transparent);
858
- }
859
-
860
- .starci-core-meter-fill {
861
- height: 100%;
862
- border-radius: inherit;
863
- background: var(--starci-core-overlay-tone);
864
- transition: width var(--starci-core-motion-duration, 180ms) var(--starci-core-motion-easing, cubic-bezier(0.2, 0, 0, 1));
865
783
  }
866
784
 
867
785
  /* The loading meter root keeps the meter's column (label above the bar) and is inert. */
@@ -878,7 +796,6 @@
878
796
  .starci-core-meter-skeleton-bar > .starci-core-skeleton {
879
797
  block-size: 100%;
880
798
  aspect-ratio: auto;
881
- border-radius: inherit;
882
799
  }
883
800
 
884
801
  /*
@@ -925,8 +842,7 @@
925
842
  animation: none;
926
843
  }
927
844
 
928
- .starci-core-progress-circle [data-slot="progress-circle-fill-circle"],
929
- .starci-core-meter-fill {
845
+ .starci-core-progress-circle [data-slot="progress-circle-fill-circle"] {
930
846
  transition: none;
931
847
  }
932
848
 
@@ -9,8 +9,8 @@ type ExtensionWithoutCommonCollisions<Common extends GrammarRendererRegistry, Ex
9
9
  };
10
10
  export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
11
11
  readonly Accordion: ({ label, items, expandedIds, defaultExpandedIds, onExpandedChange, allowsMultipleExpanded, headingLevel, className, }: import("./renderers-navigation.js").AccordionProps) => import("react").JSX.Element;
12
- readonly Avatar: ({ name, src, seed, fallback, size, shape, isDecorative, isCurrent, className, isSkeleton }: import("./renderers-navigation.js").AvatarProps) => import("react").JSX.Element;
13
- readonly AvatarButton: ({ name, src, seed, fallback, size, onPress, isDisabled }: import("./renderers-navigation.js").AvatarButtonProps) => import("react").JSX.Element;
12
+ readonly Avatar: ({ name, src, seed, kind, fallback, size, shape, isDecorative, isCurrent, className, isSkeleton }: import("./renderers-navigation.js").AvatarProps) => import("react").JSX.Element;
13
+ readonly AvatarButton: ({ name, src, seed, kind, fallback, size, onPress, isDisabled }: import("./renderers-navigation.js").AvatarButtonProps) => import("react").JSX.Element;
14
14
  readonly AvatarGroup: ({ label, items, layout, max, size, overflowLabel, className }: import("./renderers-navigation.js").AvatarGroupProps) => import("react").JSX.Element;
15
15
  readonly BottomNav: ({ label, items, currentId, onSelect, position, visibility, className }: import("./renderers-navigation.js").BottomNavProps) => import("react").JSX.Element;
16
16
  readonly Breadcrumbs: ({ label, items, separator, onAction, className }: import("./renderers-navigation.js").BreadcrumbsProps) => import("react").JSX.Element;
@@ -24,7 +24,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
24
24
  readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, size, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
25
25
  readonly Image: ({ src, alt, aspect, fit, fallback, loading, srcSet, sizes, width, height, onLoadStateChange, plate, className, ...assetSlot }: import("./renderers-navigation.js").ImageProps) => import("react").JSX.Element;
26
26
  readonly Link: ({ children, href, kind, isCurrent, visited, externalHint, externalIcon, isDisabled, onFollow, className, }: import("./renderers-navigation.js").LinkProps) => import("react").JSX.Element;
27
- readonly ListBox: ({ label, items, sections, inset, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
27
+ readonly ListBox: ({ label, items, sections, inset, size, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
28
28
  readonly Pagination: ({ label, page, pageCount, onPageChange, siblingCount, previousLabel, nextLabel, pageLabel, summary, className, }: import("./renderers-navigation.js").PaginationProps) => import("react").JSX.Element;
29
29
  readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, size, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
30
30
  readonly Rating: ({ label, value, defaultValue, onChange, max, isReadOnly, isDisabled, valueLabel, icon, name, className, }: import("./renderers-navigation.js").RatingProps) => import("react").JSX.Element;
@@ -79,7 +79,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
79
79
  readonly Heading: ({ children, level, scale, isSkeleton, isVisuallyHidden, }: import("./renderers.js").HeadingProps) => import("react").JSX.Element;
80
80
  readonly HorizontalScrollRegion: import("react").ForwardRefExoticComponent<Omit<import("./renderers.js").HorizontalScrollRegionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
81
81
  readonly Icon: ({ source: Source, usage, ariaLabel, isSkeleton }: import("./renderers.js").IconProps) => import("react").JSX.Element;
82
- readonly IconButton: ({ source, label, variant, size, isFloating, isActive, isDisabled, isSkeleton, onPress, "aria-controls": controls, "aria-expanded": expanded, badge, badgeLabel, badgeMax, }: import("./renderers.js").IconButtonProps) => import("react").JSX.Element;
82
+ readonly IconButton: ({ source, label, intent, step, variant: legacyVariant, size, isFloating, isActive, isDisabled, isSkeleton, onPress, "aria-controls": controls, "aria-expanded": expanded, badge, badgeLabel, badgeMax, }: import("./renderers.js").IconButtonProps) => import("react").JSX.Element;
83
83
  readonly IconTile: ({ source, artwork, ariaLabel, tone, size, isSkeleton, }: import("./renderers.js").IconTileProps) => import("react").JSX.Element;
84
84
  readonly IncludedMark: ({ className, label, ...props }: import("./renderers.js").IncludedMarkProps) => import("react").JSX.Element;
85
85
  readonly Input: ({ id, name, label, isLabelHidden, kind: kindName, variant: requestedVariant, size, placeholder, defaultValue, value, hint, errorMessage, isError, isDisabled, isRequired, isSkeleton, isReadOnly, isCopyable, copyLabel, copiedLabel, copyIcon: CopyIcon, copiedIcon: CopiedIcon, onCopy, revealLabel, hideLabel, revealIcon: RevealIcon, hideIcon: HideIcon, onValueChange, onBlur, onPaste, autoFocus, }: import("./renderers.js").InputProps) => import("react").JSX.Element;