@starci/grammar 0.12.0 → 0.12.1

package/README.md

@@ -17,7 +17,7 @@ npm install @starci/grammar @heroui/react react react-dom
 npm install ./.claude/packages/grammar
 ```
 
-The package needs Node.js 20 or newer. Its peer dependencies are React 18+, `@xyflow/react` 12 (for `FlowGraph`) and `@heroui/react`
+The package needs Node.js 22 or newer. Its peer dependencies are React 18+, `@xyflow/react` 12 (for `FlowGraph`) and `@heroui/react`
 3.2+. Load the HeroUI stylesheet once in the app, as HeroUI's own setup describes. Then import
 exactly one Grammar family stylesheet. Each family sheet already imports Common anatomy first.
 
@@ -36,6 +36,18 @@ its root from one place. Heritage does not re-export Common. It exports `heritag
 
 ## Usage
 
+### App shell
+
+The [app-shell canon](../../knowledge/ui/composition/app-shell.yaml) owns `FE-APP-SHELL-1` through `FE-APP-SHELL-7`.
+The `Compositions/App shell` stories show the fixed shell, grouped sidebar, icon rail and mobile drawer.
+
+- `size="control"` is available on `Button`, `IconButton`, `TextAction`, `PlainPressable`, `IdentityLockup`, `Input` and `SearchField`, alongside `Switch`, `Avatar` and `AvatarButton`.
+- `SidebarItem.badge`, `badgeLabel` and `badgeMax` show and announce unread counts in both sidebar presentations. `SidebarGroup.placement="end"` places settings groups after the main groups and pushes them to the bottom.
+- The collapsed Sidebar uses Grammar's internal `AnchoredTooltip` on hover and focus. Its native popover reaches the top layer without leaving the family DOM scope or changing HeroUI's collection anatomy. `onAction` runs for every activated destination, including the selected item, so a drawer can close consistently.
+- A fixed `WorkspaceShell` frames its `compactHeader` slot as the mobile opener band; pass a client `Drawer` with an ellipsis `IconButton` trigger. The `navigationDrawer` form owns the same band when it supplies the opener.
+- `AvatarButton seed` passes the stable identity id to Grammar's shared `Avatar`, which draws the deterministic local DiceBear image; an uploaded `src` takes precedence.
+- `DropdownMenuItem.mark` accepts a decorative identity mark and is mutually exclusive with `iconSource`. A destructive item uses `tone="danger"`; the existing `negative` tone has the same vendor presentation.
+
 ### Common (neutral structure only)
 
 ```tsx
@@ -184,7 +196,7 @@ className and no size. An item takes `id`, `label`, `description`, `shortcut`, `
 - `iconSource`: a glyph component (the app's Heroicons). Grammar draws it in HeroUI's leading position at the canon icon size,
   20px (`size-5`, `Icon` `leading`; the Heroicons rule R93 / FE-ICON). HeroUI's own docs example draws its sample glyph at
   `size-4`, which is example content and not a component default, so 20px is StarCi's icon rule and not a vendor override.
-- `leading`: a node instead of a glyph, e.g. an identity mark (`<Avatar size="sm" shape="rounded" isDecorative />`).
+- `mark`: a decorative node instead of `iconSource`, e.g. an identity mark (`<Avatar size="sm" shape="rounded" isDecorative />`). The public type rejects both props together.
 - `tone: "danger"`: HeroUI's `danger` variant, which colours the label and the glyph. Sign out, delete, remove, leave workspace
   and revoke are destructive; the lint rule `starci-fe/destructive-menu-entry-needs-danger-tone` refuses such an entry without it.
 
@@ -199,7 +211,7 @@ an item with a submenu).
   placement="bottom end"
   entries={[
     { kind: "section", id: "workspace", label: "Workspace", selection: { mode: "single", selectedIds, onChange },
-      items: [{ id: "hakuen", label: "Hakuen", description: "Owner", leading: <Avatar name="Hakuen" size="sm" shape="rounded" isDecorative /> }] },
+      items: [{ id: "hakuen", label: "Hakuen", description: "Owner", mark: <Avatar name="Hakuen" size="sm" shape="rounded" isDecorative /> }] },
     { kind: "section", id: "account", items: [{ id: "profile", label: "Profile", description: "Name and photo", iconSource: UserIcon }] },
     { kind: "section", id: "session", items: [{ id: "sign-out", label: "Sign out", tone: "danger", iconSource: ArrowRightStartOnRectangleIcon }] },
   ]}
@@ -264,7 +276,7 @@ dismissal and focus return.
 shape in any state, no hover effect, a zoom-out on press, a focus ring, and no zoom under
 `prefers-reduced-motion`. `AvatarButton` is a circle-only avatar built on it (an account-menu
 trigger) and `IdentityLockup` a mark beside a title and a muted subtitle with no caret (a workspace
-switcher trigger). All three work as the `trigger` of `DropdownMenu` and `Popover`. `IdentityLockup`'s mark is a transparent, uncropped square by default (`markShape="rounded"` opts in to a
+switcher trigger). All three work as the `trigger` of `DropdownMenu` and `Popover`. `IdentityLockup`'s mark and monogram fallback are transparent, with foreground-colored initials; the mark is an uncropped square by default (`markShape="rounded"` opts in to a
 corner) and `Avatar` takes `shape="square" | "rounded"`.
 
 Personal avatars are circles. Pass the user or identity id as `seed` on `Avatar`, `AvatarButton`
@@ -288,9 +300,8 @@ MarkdownTableFrame, MediaFrame, Rail, SectionHeader, StaticStateRow, SurfaceAcco
 SurfaceCard, SurfaceCopyGroup, SurfaceListCard, VerticalScrollRegion.
 
 **Compositions (9).** BottomNav, ChatWorkspace, Footer, NavigationFeatureNav, PageContainer,
-PrimaryRailLayout, Sidebar, TopBar, WorkspaceShell. Storybook also pins three page recipes to
-each family: a settings form, a data list with a filter drawer and pagination, and a mobile home
-with TopBar, BottomNav and a Toast.
+PrimaryRailLayout, Sidebar, TopBar, WorkspaceShell. Storybook pins settings and data-list content
+recipes to each family; the mobile app recipes reuse the fixed App shell with its left navigation drawer.
 
 `COMMON_GRAMMAR_COMPONENTS` is the frozen registry of the published renderers.
 `COMMON_FORMS_COMPONENTS`, `COMMON_OVERLAYS_COMPONENTS` and `COMMON_NAVIGATION_COMPONENTS` are the

package/dist/.build-stamp.json

@@ -1,9 +1,9 @@
 {
   "schema": "starci/grammar-build-stamp@1",
   "package": "@starci/grammar",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "algorithm": "starci/grammar-source-digest@1",
-  "sourceDigest": "sha256:fd2b712405d87230cd1736101068d562483cd3c0b8b4ef4d629bb9944354842f",
-  "distDigest": "sha256:1a7c5eb6dcb25a1ef5bfba338d3c374fce07a3d1f534fe8f830b66e2ca1893b3",
-  "builtAt": "2026-10-25T11:48:36.769Z"
+  "sourceDigest": "sha256:f6fce286c3f714d14372fa19725d4d9b92b8ed98d49342f022224250b09a1e14",
+  "distDigest": "sha256:53e4a14158e106244c9d13a98bdde5ad226f689c070e7170ecd71d58bb7a0120",
+  "builtAt": "2026-10-25T12:13:44.249Z"
 }

package/dist/common/components-navigation.css

@@ -341,9 +341,11 @@
 
     /* ---------- TopBar ---------- */
     .starci-core-top-bar {
+        box-sizing: border-box;
         display: flex;
         min-width: 0;
-        min-block-size: 3.5rem;
+        block-size: 4rem;
+        min-block-size: 4rem;
         align-items: center;
         gap: var(--grammar-row-gap, 0.75rem);
         padding-block: 0.5rem;
@@ -351,7 +353,7 @@
         padding-inline-start: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-left));
         padding-inline-end: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-right));
         border-block-end: 1px solid var(--separator, var(--border, CanvasText));
-        background: var(--background, Canvas);
+        background: var(--surface, Canvas);
         color: var(--foreground, CanvasText);
     }
 
@@ -673,7 +675,7 @@
 
     /*
      * A square brand mark (Avatar shape="square"): a transparent box with no corner and no clipping; the image is contained, so a round,
-     * square or wide logo shows whole in its own shape. The monogram fallback keeps its tint (see the lockup) so initials stay legible.
+     * square or wide logo shows whole in its own shape.
      */
     .starci-core-avatar[data-grammar-avatar-shape="square"] {
         overflow: visible !important;
@@ -794,10 +796,10 @@
         white-space: nowrap;
     }
 
-    /* A monogram sits on an accent tint. */
+    /* The workspace monogram shares the mark's transparent box and uses the foreground text color. */
     .starci-core-identity-lockup [data-grammar-avatar-fallback] {
-        background-color: var(--accent-soft, Canvas) !important;
-        color: var(--accent-soft-foreground, CanvasText);
+        background-color: transparent !important;
+        color: var(--foreground, CanvasText) !important;
         font-weight: 600;
     }
 

package/dist/common/components-overlays.css

@@ -415,16 +415,6 @@
         justify-content: center;
     }
 
-    /* A leading node (an identity mark) sits in a box at least as big as the 20px a glyph gets (the canon icon rule, `Icon` `leading`), centred. */
-    [data-grammar-menu-leading] {
-        display: inline-flex;
-        flex: none;
-        min-inline-size: 1.25rem;
-        min-block-size: 1.25rem;
-        align-items: center;
-        justify-content: center;
-    }
-
     [data-grammar-menu-mark] > * {
         width: 100%;
         height: 100%;

package/dist/common/registry.d.ts

@@ -21,12 +21,12 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly DragItem: ({ children, isDisabled, onDragStart, onDragEnd, isSelected, isInvalid, isDashed, leadingColor }: import("./renderers-navigation.js").DragItemProps) => import("react").JSX.Element;
     readonly FlowGraph: ({ label, nodes, edges, selectedId, onSelect, height, isInteractive, showControls, layout, emptyLabel, isLoading, className, }: import("./renderers-navigation.js").FlowGraphProps) => import("react").JSX.Element;
     readonly Footer: ({ label, brand, groups, legal, externalHint, children, className }: import("./renderers-navigation.js").FooterProps) => import("react").JSX.Element;
-    readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
+    readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, size, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
     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;
     readonly Link: ({ children, href, kind, isCurrent, visited, externalHint, externalIcon, isDisabled, onFollow, className, }: import("./renderers-navigation.js").LinkProps) => import("react").JSX.Element;
     readonly ListBox: ({ label, items, sections, inset, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
     readonly Pagination: ({ label, page, pageCount, onPageChange, siblingCount, previousLabel, nextLabel, pageLabel, summary, className, }: import("./renderers-navigation.js").PaginationProps) => import("react").JSX.Element;
-    readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
+    readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, size, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
     readonly Rating: ({ label, value, defaultValue, onChange, max, isReadOnly, isDisabled, valueLabel, icon, name, className, }: import("./renderers-navigation.js").RatingProps) => import("react").JSX.Element;
     readonly Stepper: ({ label, steps, currentStepId, orientation, onStepSelect, stateLabel, renderMarker, className, isLoading, }: import("./renderers-navigation.js").StepperProps) => import("react").JSX.Element;
     readonly TagGroup: ({ label, items, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onRemove, removeLabel, emptyContent, size, className, }: import("./renderers-navigation.js").TagGroupProps) => import("react").JSX.Element;
@@ -60,7 +60,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly Form: ({ children, label, id, onSubmit, onReset, action, method, validationErrors, validationBehavior, isPending, }: import("./renderers-forms.js").FormProps) => import("react").JSX.Element;
     readonly NumberField: ({ id, placeholder, value, defaultValue, onValueChange, minValue, maxValue, step, formatOptions, hideSteppers, variant: requestedVariant, isSkeleton, ...field }: import("./renderers-forms.js").NumberFieldProps) => import("react").JSX.Element;
     readonly RadioGroup: ({ options, value, defaultValue, onValueChange, orientation, variant: requestedVariant, ...field }: import("./renderers-forms.js").RadioGroupProps) => import("react").JSX.Element;
-    readonly SearchField: ({ id, placeholder, value, defaultValue, onValueChange, onSubmit, onClear, isPending, clearLabel, variant: requestedVariant, isSkeleton, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
+    readonly SearchField: ({ id, placeholder, value, defaultValue, onValueChange, onSubmit, onClear, isPending, clearLabel, variant: requestedVariant, size, isSkeleton, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
     readonly SegmentedControl: ({ options, value, defaultValue, onValueChange, width, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, isSkeleton, }: import("./renderers-forms.js").SegmentedControlProps) => import("react").JSX.Element;
     readonly Select: ({ options, placeholder, value, defaultValue, onValueChange, isPending, isSkeleton, variant: requestedVariant, ...field }: import("./renderers-forms.js").SelectProps) => import("react").JSX.Element;
     readonly Slider: ({ value, defaultValue, onValueChange, onValueCommit, minValue, maxValue, step, formatOptions, thumbLabels, orientation, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }: import("./renderers-forms.js").SliderProps) => import("react").JSX.Element;
@@ -82,7 +82,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     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;
     readonly IconTile: ({ source, artwork, ariaLabel, tone, size, isSkeleton, }: import("./renderers.js").IconTileProps) => import("react").JSX.Element;
     readonly IncludedMark: ({ className, label, ...props }: import("./renderers.js").IncludedMarkProps) => import("react").JSX.Element;
-    readonly Input: ({ id, name, label, isLabelHidden, kind: kindName, variant: requestedVariant, 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;
+    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;
     readonly Label: ({ id, children, depth, as }: import("./renderers.js").LabelProps) => import("react").DetailedReactHTMLElement<{
         readonly id: string | undefined;
         readonly className: string;

package/dist/common/renderers-forms.d.ts

@@ -33,7 +33,7 @@ export declare const COMMON_FORMS_COMPONENTS: Readonly<{
     readonly Form: ({ children, label, id, onSubmit, onReset, action, method, validationErrors, validationBehavior, isPending, }: import("./renderers-forms.js").FormProps) => import("react").JSX.Element;
     readonly NumberField: ({ id, placeholder, value, defaultValue, onValueChange, minValue, maxValue, step, formatOptions, hideSteppers, variant: requestedVariant, isSkeleton, ...field }: import("./renderers-forms.js").NumberFieldProps) => import("react").JSX.Element;
     readonly RadioGroup: ({ options, value, defaultValue, onValueChange, orientation, variant: requestedVariant, ...field }: import("./renderers-forms.js").RadioGroupProps) => import("react").JSX.Element;
-    readonly SearchField: ({ id, placeholder, value, defaultValue, onValueChange, onSubmit, onClear, isPending, clearLabel, variant: requestedVariant, isSkeleton, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
+    readonly SearchField: ({ id, placeholder, value, defaultValue, onValueChange, onSubmit, onClear, isPending, clearLabel, variant: requestedVariant, size, isSkeleton, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
     readonly SegmentedControl: ({ options, value, defaultValue, onValueChange, width, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, isSkeleton, }: import("./renderers-forms.js").SegmentedControlProps) => import("react").JSX.Element;
     readonly Select: ({ options, placeholder, value, defaultValue, onValueChange, isPending, isSkeleton, variant: requestedVariant, ...field }: import("./renderers-forms.js").SelectProps) => import("react").JSX.Element;
     readonly Slider: ({ value, defaultValue, onValueChange, onValueCommit, minValue, maxValue, step, formatOptions, thumbLabels, orientation, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }: import("./renderers-forms.js").SliderProps) => import("react").JSX.Element;

package/dist/common/renderers-navigation.d.ts

@@ -38,12 +38,12 @@ export declare const COMMON_NAVIGATION_COMPONENTS: Readonly<{
     readonly DragItem: ({ children, isDisabled, onDragStart, onDragEnd, isSelected, isInvalid, isDashed, leadingColor }: import("./renderers-navigation.js").DragItemProps) => import("react").JSX.Element;
     readonly FlowGraph: ({ label, nodes, edges, selectedId, onSelect, height, isInteractive, showControls, layout, emptyLabel, isLoading, className, }: import("./renderers-navigation.js").FlowGraphProps) => import("react").JSX.Element;
     readonly Footer: ({ label, brand, groups, legal, externalHint, children, className }: import("./renderers-navigation.js").FooterProps) => import("react").JSX.Element;
-    readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
+    readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, size, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
     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;
     readonly Link: ({ children, href, kind, isCurrent, visited, externalHint, externalIcon, isDisabled, onFollow, className, }: import("./renderers-navigation.js").LinkProps) => import("react").JSX.Element;
     readonly ListBox: ({ label, items, sections, inset, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
     readonly Pagination: ({ label, page, pageCount, onPageChange, siblingCount, previousLabel, nextLabel, pageLabel, summary, className, }: import("./renderers-navigation.js").PaginationProps) => import("react").JSX.Element;
-    readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
+    readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, size, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
     readonly Rating: ({ label, value, defaultValue, onChange, max, isReadOnly, isDisabled, valueLabel, icon, name, className, }: import("./renderers-navigation.js").RatingProps) => import("react").JSX.Element;
     readonly Stepper: ({ label, steps, currentStepId, orientation, onStepSelect, stateLabel, renderMarker, className, isLoading, }: import("./renderers-navigation.js").StepperProps) => import("react").JSX.Element;
     readonly TagGroup: ({ label, items, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onRemove, removeLabel, emptyContent, size, className, }: import("./renderers-navigation.js").TagGroupProps) => import("react").JSX.Element;

package/dist/common/rule-catalog.generated.d.ts

@@ -12,6 +12,7 @@ export declare const RULE_FAMILY_COUNTS: Readonly<{
     readonly COVERAGE: 1;
     readonly CTA: 5;
     readonly DISCIPLINE: 3;
+    readonly "FE-APP-SHELL": 7;
     readonly FEEDBACK: 3;
     readonly FLOW: 5;
     readonly FOCUS: 6;

package/dist/common/rule-catalog.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-catalog.generated.d.ts","sourceRoot":"","sources":["../../src/common/rule-catalog.generated.ts"],"names":[],"mappings":"AAQA,qFAAqF;AACrF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCpB,CAAA;AAEX,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,MAAM,CA4MnD,CAAA"}
+{"version":3,"file":"rule-catalog.generated.d.ts","sourceRoot":"","sources":["../../src/common/rule-catalog.generated.ts"],"names":[],"mappings":"AAQA,qFAAqF;AACrF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCpB,CAAA;AAEX,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,MAAM,CAoNnD,CAAA"}

package/dist/common/rule-catalog.generated.js

@@ -3,7 +3,7 @@
  * Regenerate with node packages/grammar/scripts/generate-rule-catalog.mjs [knowledgeDir].
  * Canonical declarations are rules[].id in the YAML knowledge topics.
  * References, scale rows, cases and closed addresses contribute no additional rules.
- * 32 families, 171 rules.
+ * 33 families, 178 rules.
  */
 /** The number of declared rule ids in each family, never expanded into addresses. */
 export const RULE_FAMILY_COUNTS = Object.freeze({
@@ -19,6 +19,7 @@ export const RULE_FAMILY_COUNTS = Object.freeze({
     "COVERAGE": 1, // ui/composition/coverage.yaml
     "CTA": 5, // ui/composition/cta.yaml
     "DISCIPLINE": 3, // ui/composition/taste.yaml
+    "FE-APP-SHELL": 7, // ui/composition/app-shell.yaml
     "FEEDBACK": 3, // ui/composition/feedback.yaml
     "FLOW": 5, // ui/presentation/text-flow.yaml
     "FOCUS": 6, // ui/proof/focus.yaml
@@ -97,6 +98,14 @@ export const CANONICAL_RULE_IDS = Object.freeze([
     "DISCIPLINE-1",
     "DISCIPLINE-2",
     "DISCIPLINE-3",
+    // FE-APP-SHELL
+    "FE-APP-SHELL-1",
+    "FE-APP-SHELL-2",
+    "FE-APP-SHELL-3",
+    "FE-APP-SHELL-4",
+    "FE-APP-SHELL-5",
+    "FE-APP-SHELL-6",
+    "FE-APP-SHELL-7",
     // FEEDBACK
     "FEEDBACK-1",
     "FEEDBACK-2",

package/dist/common/rule-catalog.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"rule-catalog.generated.js","sourceRoot":"","sources":["../../src/common/rule-catalog.generated.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rule-catalog.generated.js","sourceRoot":"","sources":["../../src/common/rule-catalog.generated.ts"],"names":[],"mappings":"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"}

package/dist/common/styles.css

@@ -752,6 +752,20 @@
         visibility: hidden;
     }
 
+    /* Collection annotations use the native top layer to escape scroll clipping without leaving Grammar scope. */
+    .starci-core-tooltip-content[data-grammar-tooltip-annotation="true"] {
+        position: fixed;
+        inset: auto;
+        box-sizing: border-box;
+        max-inline-size: calc(100dvw - 1rem);
+        margin: 0;
+        border: 0;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        opacity: 1;
+        visibility: visible;
+    }
+
     .starci-core-tooltip:hover > .starci-core-tooltip-content,
     .starci-core-tooltip:focus-within > .starci-core-tooltip-content {
         opacity: 1;
@@ -1823,9 +1837,10 @@
     }
 
     .starci-core-navigation-feature-nav {
+        box-sizing: border-box;
         width: 100%;
         border-bottom: 1px solid var(--separator, var(--starci-core-separator, GrayText));
-        background: var(--background, var(--starci-core-canvas, Canvas));
+        background: var(--surface, Canvas);
         color: var(--foreground, var(--starci-core-foreground, CanvasText));
     }
 
@@ -1835,33 +1850,18 @@
         top: 0;
     }
 
-    /*
-     * THE BAND PUBLISHES ITS OWN HEIGHT.
-     *
-     * A page under a sticky band needs exactly one number - where the band stops - to pin a rail
-     * beneath it, and until now every consumer RESTATED that number: `calc(4rem + 1px)` for the
-     * primary row and its separator, `calc(4rem + 2rem + 1px)` once a feature layer is stacked.
-     * Restated geometry is wrong the moment the band changes, so the band publishes it instead.
-     *
-     * It is published with `:has()` on the Grammar root, not measured in JS, because presence and
-     * stacking are already spelled by the data attributes these compositions emit, and a custom
-     * property set on the root inherits to every page inside it. The root - not `:root` - keeps the
-     * package inside its own boundary, which is the same reason no rule here touches the document.
-     *
-     * NOTHING is defined when no sticky band is present, so `var(--starci-core-band-offset, X)`
-     * still resolves to a consumer's own X exactly as it did before this property existed.
-     */
+    /* The Grammar root publishes the sticky band offset, including its separator and optional feature layer. */
     .grammar-common-root:has(.starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-position="sticky"]),
     .grammar-common-root:has(.starci-core-subnav[data-grammar-subnav-position="sticky"]) {
         --starci-core-band-offset: calc(var(--starci-core-band-height, 0rem) + var(--starci-core-band-subnav-height, 0rem));
     }
 
     .grammar-common-root:has(.starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-position="sticky"]) {
-        --starci-core-band-height: calc(4rem + 1px);
+        --starci-core-band-height: 4rem;
     }
 
     .grammar-common-root:has(.starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-position="sticky"][data-grammar-navigation-feature-nav-layers="two"]) {
-        --starci-core-band-height: calc(4rem + 2rem + 1px);
+        --starci-core-band-height: 6rem;
     }
 
     /* A sticky Subnav stacks under the band, so it adds its own height and separator to the offset. */
@@ -1871,7 +1871,9 @@
 
     .starci-core-navigation-feature-nav-primary {
         display: grid !important;
-        min-height: 4rem;
+        box-sizing: border-box;
+        block-size: calc(4rem - 1px);
+        min-height: calc(4rem - 1px);
         grid-template-columns: minmax(0, 1fr) auto auto !important;
         align-items: center;
         gap: var(--grammar-row-gap, 0.75rem);
@@ -1882,6 +1884,15 @@
         padding-inline: 0.75rem;
     }
 
+    .starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-layers="one"] {
+        block-size: 4rem;
+    }
+
+    .starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-layers="one"] .starci-core-navigation-feature-nav-primary {
+        block-size: 100%;
+        min-height: 0;
+    }
+
     .starci-core-navigation-feature-nav-identity,
     .starci-core-navigation-feature-nav-navigation,
     .starci-core-navigation-feature-nav-compact-navigation,
@@ -1913,34 +1924,12 @@
         gap: var(--grammar-inline-gap, 0.5rem);
     }
 
-    /*
-     * THE BAND'S OWN CONTROLS MEET THE 44px TOUCH FLOOR.
-     *
-     * Every pressable in the two action slots was the vendor button's own height - 2.25rem on
-     * desktop and 2.5rem compact - so the language menu, the cart, the account button, the compact
-     * drawer trigger and the field-shaped search trigger all sat under the floor, on the surface a
-     * reader is most likely to touch. It is a MINIMUM, not a size: `min-inline-size` and
-     * `min-block-size` are properties the vendor's rules never set, so the glyph, the label, the
-     * paint and the corner are all untouched and no `!important` is owed to the components layer.
-     *
-     * The band does NOT grow. The primary row is 4rem with a 0.5rem block inset on each side, so
-     * 44px is 4px short of the 3rem it already offers a control, and `--starci-core-band-height`
-     * stays `calc(4rem + 1px)`. The floor is spelled on the pressable, never on the slot: a slot
-     * with a min-height would pad a row that has nothing in it.
-     *
-     * The feature layer is deliberately out of scope - its tabs are a Tabs branch, and a tab's
-     * target is that branch's to answer.
-     *
-     * The primary destinations in the `navigation` slot carry the identical selector: a
-     * `route`-appearance TextAction already meets the floor on its own (below), but the slot rule
-     * is the family's general-purpose net for ANY pressable a consumer puts there, the same way the
-     * action slots protect a control regardless of which leaf renders it.
-     */
+    /* Navbar controls share one exact height; the feature layer keeps its own tab geometry. */
     .starci-core-navigation-feature-nav-actions :where(button, [role="button"], a[href]),
     .starci-core-navigation-feature-nav-navigation :where(button, [role="button"], a[href]),
     .starci-core-navigation-feature-nav-compact-navigation :where(button, [role="button"], a[href]) {
-        min-inline-size: 44px;
-        min-block-size: 44px;
+        min-inline-size: var(--starci-core-control-min-size, 2.75rem);
+        min-block-size: var(--starci-core-control-min-size, 2.75rem);
     }
 
     /*
@@ -2284,6 +2273,17 @@
         margin-block-end: 0;
     }
 
+    .starci-core-workspace-shell-header[data-grammar-workspace-header-landmark="shell"] {
+        box-sizing: border-box;
+        display: flex;
+        block-size: 4rem;
+        align-items: center;
+        padding-block: 0.5rem;
+        padding-inline: var(--grammar-page-inset, 1rem);
+        border-block-end: 1px solid var(--separator, GrayText);
+        background: var(--surface, Canvas);
+    }
+
     .starci-core-workspace-shell[data-grammar-workspace-viewport="fixed"] > .starci-core-workspace-shell-layout {
         min-block-size: 0;
         flex: 1 1 0%;
@@ -2300,15 +2300,33 @@
         overscroll-behavior: contain;
     }
 
+    @media (min-width: 48rem) and (max-width: 56rem) {
+        .starci-core-workspace-shell[data-grammar-workspace-viewport="fixed"] > .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="present"] {
+            grid-template-areas: "navigation primary" "navigation rail";
+            grid-template-columns: var(--starci-core-workspace-navigation-track) minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell[data-grammar-workspace-viewport="fixed"] > .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="absent"] {
+            grid-template-areas: "navigation primary";
+        }
+    }
+
     /* The compact opener row: the bar's height, an edge-to-edge divider, the opener at the inline start. */
     .starci-core-workspace-shell-opener {
+        box-sizing: border-box;
         display: flex;
-        min-block-size: var(--starci-core-band-height, 3.5rem);
+        block-size: 4rem;
+        min-block-size: 4rem;
         align-items: center;
         gap: var(--grammar-inline-gap, 0.5rem);
         padding-inline: var(--grammar-page-inset, 1rem);
+        padding-block: 0.5rem;
         border-block-end: 1px solid var(--separator, var(--starci-core-separator, GrayText));
-        background: var(--background, var(--starci-core-canvas, Canvas));
+        background: var(--surface, Canvas);
+    }
+
+    .starci-core-workspace-shell-compact-header.starci-core-workspace-shell-opener {
+        display: none;
     }
 
     .starci-core-workspace-shell-opener-title {
@@ -2349,7 +2367,7 @@
         min-width: 0;
         flex-direction: column;
         overflow: hidden;
-        background: var(--background, var(--starci-core-canvas, Canvas));
+        background: var(--surface, Canvas);
         color: var(--foreground, var(--starci-core-foreground, CanvasText));
     }
 
@@ -2397,6 +2415,7 @@
 
     .starci-core-sidebar[data-collapsed="true"] .starci-core-sidebar-list {
         align-items: center;
+        gap: 1rem;
         padding: 0.5rem !important;
     }
 
@@ -2407,6 +2426,10 @@
         gap: 0.25rem !important;
     }
 
+    .starci-core-sidebar-section[data-grammar-sidebar-end-start="true"] {
+        margin-block-start: auto;
+    }
+
     .starci-core-sidebar[data-collapsed="true"] .starci-core-sidebar-section {
         align-items: center !important;
     }
@@ -2433,6 +2456,7 @@
     }
 
     .starci-core-sidebar-item {
+        position: relative;
         display: flex;
         min-width: 0;
         align-items: center;
@@ -2455,7 +2479,8 @@
         background: var(--default, var(--starci-core-surface-secondary, Canvas));
     }
 
-    .starci-core-sidebar-item[data-selected="true"] {
+    .starci-core-sidebar-item[data-selected="true"],
+    .starci-core-sidebar-item[data-grammar-current="true"] {
         background: var(--accent-soft, var(--starci-core-accent, Highlight)) !important;
         color: var(--accent-soft-foreground, var(--starci-core-accent, HighlightText));
     }
@@ -2483,6 +2508,12 @@
         flex-shrink: 0;
     }
 
+    .starci-core-sidebar:not([data-collapsed="true"]) .starci-core-sidebar-item-badge {
+        position: static;
+        flex: none;
+        box-shadow: none;
+    }
+
     .starci-core-sidebar-footer {
         min-width: 0;
         padding: 0.75rem;
@@ -2638,7 +2669,7 @@
         }
     }
 
-    @media (max-width: 69.999rem) {
+    @media (max-width: 47.999rem) {
         .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"] .starci-core-workspace-shell-navigation {
             display: none;
         }
@@ -2669,6 +2700,10 @@
             display: block;
         }
 
+        .starci-core-workspace-shell-compact-header.starci-core-workspace-shell-opener {
+            display: flex;
+        }
+
         .starci-core-workspace-shell-compact-navigation {
             position: sticky;
             z-index: 40;
@@ -2906,6 +2941,25 @@
     }
 
     /* --- Icon button: a HeroUI `Button` worn as a circle. --- */
+    [data-grammar-control-size="control"],
+    .starci-core-control-size .starci-core-field-skeleton-control {
+        box-sizing: border-box;
+        block-size: var(--starci-core-control-min-size, 2.75rem) !important;
+        min-block-size: var(--starci-core-control-min-size, 2.75rem) !important;
+        max-block-size: var(--starci-core-control-min-size, 2.75rem) !important;
+    }
+
+    .starci-core-icon-button[data-grammar-control-size="control"] {
+        inline-size: var(--starci-core-control-min-size, 2.75rem) !important;
+        min-inline-size: var(--starci-core-control-min-size, 2.75rem) !important;
+        max-inline-size: var(--starci-core-control-min-size, 2.75rem) !important;
+    }
+
+    .starci-core-text-action[data-size="control"] {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+
     .starci-core-icon-button {
         border-radius: var(--starci-core-pill-radius, 999px) !important;
     }

package/dist/core/branch/DropdownMenu/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { type OverlayOpenState } from "../../overlayScope.js";
 import { type IconSource } from "../../primitive/Icon/index.js";
-export type DropdownMenuItemTone = "neutral" | "danger";
+export type DropdownMenuItemTone = "neutral" | "negative" | "danger";
 /** One command, destination or (inside a selectable section) checkable choice. */
 export type DropdownMenuItem = {
     readonly kind?: "item";
@@ -10,12 +10,7 @@ export type DropdownMenuItem = {
     readonly description?: string;
     /** Shortcut chord drawn with `Kbd`, e.g. `["command", "K"]`. Display only: the app binds the keys. */
     readonly shortcut?: readonly string[];
-    /**
-     * A node in the leading position instead of a glyph, e.g. an identity mark. It sits in a 20px slot (the same box a glyph gets) and
-     * wins over `iconSource` or `mark` when also given.
-     */
-    readonly leading?: ReactNode;
-    /** `danger` marks a destructive command (sign out, delete, remove, revoke): HeroUI's danger variant colours its label and glyph. */
+    /** `danger` marks a destructive command; `negative` has the same presentation. */
     readonly tone?: DropdownMenuItemTone;
     readonly isDisabled?: boolean;
     /** A destination: the item renders a real link. */
@@ -32,7 +27,7 @@ export type DropdownMenuItem = {
     /** Decorative identity artwork in the same leading icon box. The item's label supplies its name. */
     readonly mark?: ReactNode;
 });
-/** Checkable items: `single` draws a dot (radio semantics), `multiple` a check (checkbox semantics). */
+/** Checkable items use HeroUI's default checkmark in both selection modes. */
 export type DropdownMenuSelection = {
     readonly mode: "single" | "multiple";
     readonly selectedIds: readonly string[];

package/dist/core/branch/DropdownMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/DropdownMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACpG,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAGrE,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEvD,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,sGAAsG;IACtG,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B,oIAAoI;IACpI,QAAQ,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,0GAA0G;IAC1G,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;CAClD,GAAG,CACE;IACE,4GAA4G;IAC5G,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAA;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CACxB,GACC;IACE,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAA;IAC3B,oGAAoG;IACpG,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC5B,CACJ,CAAA;AAED,wGAAwG;AACxG,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAA;CAC9D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG,mBAAmB,CAAA;AAEtE,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;AAE3F,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IAC/C;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAeD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,yDAM1B,iBAAiB,gCAkInB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/DropdownMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACpG,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAGrE,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEpE,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,sGAAsG;IACtG,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC,kFAAkF;IAClF,QAAQ,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,0GAA0G;IAC1G,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;CAClD,GAAG,CACE;IACE,4GAA4G;IAC5G,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAA;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CACxB,GACC;IACE,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAA;IAC3B,oGAAoG;IACpG,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC5B,CACJ,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAA;CAC9D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG,mBAAmB,CAAA;AAEtE,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;AAE3F,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG;IAC/C;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAeD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,yDAM1B,iBAAiB,gCAgInB,CAAA"}

package/dist/core/branch/DropdownMenu/index.js

@@ -35,11 +35,9 @@ export const DropdownMenu = ({ trigger, entries, onAction, placement = "bottom s
         onAction?.(id);
     };
     const renderItem = (item, selectionMode) => {
-        const tone = item.tone ?? "neutral";
-        const icon = item.leading !== undefined
-            ? _jsx("span", { "aria-hidden": "true", "data-grammar-menu-leading": "true", children: item.leading })
-            : item.iconSource !== undefined ? _jsx(Icon, { source: item.iconSource, usage: "leading" })
-                : item.mark === undefined || item.mark === null ? null : (_jsx("span", { "aria-hidden": "true", className: "starci-core-icon", "data-usage": "leading", "data-grammar-menu-mark": "true", children: item.mark }));
+        const tone = item.tone === "negative" ? "danger" : item.tone ?? "neutral";
+        const icon = item.iconSource !== undefined ? _jsx(Icon, { source: item.iconSource, usage: "leading" })
+            : item.mark === undefined || item.mark === null ? null : (_jsx("span", { "aria-hidden": "true", className: "starci-core-icon", "data-usage": "leading", "data-grammar-menu-mark": "true", children: item.mark }));
         const content = (_jsxs(_Fragment, { children: [selectionMode === undefined ? null : _jsx(HeroDropdown.ItemIndicator, {}), item.description === undefined ? icon : icon === null ? null : _jsx("div", { "data-grammar-menu-icon-slot": "true", children: icon }), item.description === undefined ? _jsx(HeroLabel, { children: item.label }) : (_jsxs("div", { "data-grammar-menu-copy": "true", children: [_jsx(HeroLabel, { children: item.label }), _jsx(HeroDescription, { children: item.description })] })), item.shortcut === undefined ? null : (_jsx(HeroKbd, { "data-grammar-menu-shortcut": "true", slot: "keyboard", variant: "light", children: kbdChordContent(item.shortcut) })), item.submenu === undefined ? null : _jsx(HeroDropdown.SubmenuIndicator, {})] }));
         const itemElement = (_jsx(HeroDropdown.Item, { id: item.id, textValue: item.label, variant: tone === "danger" ? "danger" : "default", isDisabled: item.isDisabled ?? false, ...(item.href === undefined ? {} : { href: item.href }), "data-grammar-menu-item": "true", "data-contract": "FOCUS-1 CTA-2", "data-grammar-tone": tone, children: content }, item.id));
         if (item.submenu === undefined)