@godxjp/ui 27.3.1 → 27.5.0

package/dist/props/registry.d.ts

@@ -434,6 +434,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Text size — golden-ratio type-scale steps (2xs…2xl), never an arbitrary px";
     };
+    readonly IconSizeProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Icon size — the nine --icon-size-* scale steps (2xs…4xl), never an arbitrary px or a size- utility";
+    };
     readonly TextToneProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
@@ -746,6 +751,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly FlexMarkerProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly FlexAlignProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -767,6 +777,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "direction";
             readonly local: true;
             readonly reason: "Flex-specific axis control.";
+        }, {
+            readonly field: "marker";
+            readonly local: true;
+            readonly reason: 'List-marker seam for as="ul"/"ol" (disc | decimal | none). marker="none" emits no data-list, so a list keeps its element, its <li> semantics and its gap token while losing the bullet and the --space-5 indent — the home <ListRow as="li"> had none of, which forced a raw <ul> (gh#714).';
         }, "GapProp", {
             readonly field: "align";
             readonly local: true;
@@ -1203,6 +1217,23 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Ambient live-region opt-in — ActivityAnnounceProp vocabulary; deliberately NOT a boolean so the value names the politeness level.";
         }];
     };
+    readonly IconGlyphProp: {
+        readonly group: "general";
+        readonly file: "components/general.prop.ts";
+        readonly vocabulary: readonly ["IconProp", "IconSizeProp", "TextToneProp", "LabelProp", "ClassNameProp", {
+            readonly field: "label";
+            readonly local: true;
+            readonly reason: "LabelProp narrowed to string: this becomes the glyph's aria-label, and an accessible name is TEXT — a ReactNode cannot be one.";
+        }, {
+            readonly field: "as";
+            readonly local: true;
+            readonly reason: "The glyph COMPONENT to render — the IconProp concept, widened to a component that also forwards SVG props and a ref, because Icon renders ONTO the glyph (the sized element is the <svg> itself) rather than wrapping it.";
+        }, {
+            readonly field: "size";
+            readonly local: true;
+            readonly reason: "IconSizeProp, the nine-step icon scale — deliberately NOT the four-step control SizeProp: a glyph beside 2xs caption text and a 48px empty-state mark are the same primitive.";
+        }];
+    };
     readonly FloatButtonTypeProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
@@ -1619,6 +1650,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly UploadListTypeProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly TreeOptionProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -1677,7 +1713,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AvatarProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["AvatarShapeProp", "SizeProp", "LabelProp", "ChildrenProp", "ClassNameProp"];
     };
     readonly AvatarAppearanceProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -433,6 +433,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Text size \u2014 golden-ratio type-scale steps (2xs\u20262xl), never an arbitrary px"
   },
+  IconSizeProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Icon size \u2014 the nine --icon-size-* scale steps (2xs\u20264xl), never an arbitrary px or a size- utility"
+  },
   TextToneProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
@@ -767,6 +772,7 @@ const COMPONENT_PROP_REGISTRY = {
     ]
   },
   FlexDirectionProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  FlexMarkerProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexAlignProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexJustifyProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexProp: {
@@ -779,6 +785,11 @@ const COMPONENT_PROP_REGISTRY = {
         reason: "Closed tag seam (div | span) so a Flex stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders \u2014 same shape as ListRow's `as` (gh#354)."
       },
       { field: "direction", local: true, reason: "Flex-specific axis control." },
+      {
+        field: "marker",
+        local: true,
+        reason: 'List-marker seam for as="ul"/"ol" (disc | decimal | none). marker="none" emits no data-list, so a list keeps its element, its <li> semantics and its gap token while losing the bullet and the --space-5 indent \u2014 the home <ListRow as="li"> had none of, which forced a raw <ul> (gh#714).'
+      },
       "GapProp",
       { field: "align", local: true, reason: "Flex-specific align-items keyword subset." },
       { field: "justify", local: true, reason: "Flex-specific justify-content keyword subset." },
@@ -1328,6 +1339,32 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  IconGlyphProp: {
+    group: "general",
+    file: "components/general.prop.ts",
+    vocabulary: [
+      "IconProp",
+      "IconSizeProp",
+      "TextToneProp",
+      "LabelProp",
+      "ClassNameProp",
+      {
+        field: "label",
+        local: true,
+        reason: "LabelProp narrowed to string: this becomes the glyph's aria-label, and an accessible name is TEXT \u2014 a ReactNode cannot be one."
+      },
+      {
+        field: "as",
+        local: true,
+        reason: "The glyph COMPONENT to render \u2014 the IconProp concept, widened to a component that also forwards SVG props and a ref, because Icon renders ONTO the glyph (the sized element is the <svg> itself) rather than wrapping it."
+      },
+      {
+        field: "size",
+        local: true,
+        reason: "IconSizeProp, the nine-step icon scale \u2014 deliberately NOT the four-step control SizeProp: a glyph beside 2xs caption text and a 48px empty-state mark are the same primitive."
+      }
+    ]
+  },
   FloatButtonTypeProp: {
     group: "general",
     file: "components/general.prop.ts",
@@ -1898,6 +1935,11 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: []
   },
   UploadVariantProp: { group: "data-entry", file: "components/data-entry.prop.ts", vocabulary: [] },
+  UploadListTypeProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   TreeOptionProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2005,7 +2047,7 @@ const COMPONENT_PROP_REGISTRY = {
   AvatarProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"]
+    vocabulary: ["AvatarShapeProp", "SizeProp", "LabelProp", "ChildrenProp", "ClassNameProp"]
   },
   AvatarAppearanceProp: {
     group: "data-display",

package/dist/props/vocabulary/index.d.ts

@@ -2,6 +2,6 @@
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, FlushProp, WidthProp, ControlWidthProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -31,6 +31,17 @@ export type ShapeProp = "default" | "pill" | "sharp";
 export type AvatarShapeProp = "circle" | "square";
 /** Text size — steps of the golden-ratio type scale (NEVER an arbitrary px). `sm` = base. */
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * Icon size — the NINE steps of the `--icon-size-*` scale (docs/TOKENS.md · gh#326), not the four
+ * of the control `SizeProp`.
+ *
+ * The icon axis already had a vocabulary before it had a name, and it is a FIXED LIST rather than
+ * a ratio: 14/16 = 0.875 but 20/16 = 1.25, because a 1px-stroke glyph cannot sit on half a pixel.
+ * Naming the whole list here — as `TextSizeProp` does for type — is what lets a consumer put a
+ * standalone glyph on the scale (`<Icon as={Lock} size="sm" />`) instead of reaching for a
+ * `className="size-4"` the consumer rules forbid.
+ */
+export type IconSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
 /**
  * `inherit` is the one that is NOT a colour: it takes whatever the surface already set (gh#643).

package/dist/styles/control.css

@@ -31,6 +31,12 @@
     padding-inline: var(--space-3);
   }
 
+  .ui-toggle-xs {
+    min-height: var(--control-height-xs);
+    padding-inline: var(--space-1);
+    font-size: var(--toggle-xs-font-size);
+  }
+
   .ui-toggle-sm {
     min-height: var(--control-height-sm);
     padding-inline: var(--space-2);
@@ -3135,6 +3141,12 @@
     justify-content: flex-start;
   }
 
+  .ui-segmented[data-size="xs"] {
+    --control-height: var(--control-height-xs);
+    --segmented-item-padding-inline: var(--segmented-xs-item-padding-inline);
+    font-size: var(--segmented-xs-font-size);
+  }
+
   .ui-segmented[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }

package/dist/styles/core.css

@@ -23,3 +23,5 @@
 @import "./navigation-layout.css";
 @import "./chart-layout.css";
 @import "./float-button-layout.css";
+
+@import "./icon-layout.css";

package/dist/styles/data-display-layout.css

@@ -2,8 +2,8 @@
   .ui-avatar {
     position: relative;
     display: inline-flex;
-    width: var(--control-height);
-    height: var(--control-height);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -13,7 +13,7 @@
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
       var(--avatar-background, hsl(var(--muted)));
     color: hsl(var(--muted-foreground));
-    font-size: var(--font-size-base);
+    font-size: var(--avatar-font-size);
     font-weight: var(--font-weight-medium);
   }
 
@@ -36,6 +36,36 @@
     flex: none;
   }
 
+  .ui-avatar[data-size="xs"] {
+    --avatar-size: var(--avatar-size-xs);
+    --avatar-square-size: var(--avatar-size-xs);
+    --avatar-font-size: var(--avatar-font-size-xs);
+    --avatar-glyph-size: var(--avatar-glyph-size-xs);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-xs);
+  }
+
+  .ui-avatar[data-size="sm"] {
+    --avatar-size: var(--avatar-size-sm);
+    --avatar-square-size: var(--avatar-size-sm);
+    --avatar-font-size: var(--avatar-font-size-sm);
+    --avatar-glyph-size: var(--avatar-glyph-size-sm);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-sm);
+  }
+
+  .ui-avatar[data-size="lg"] {
+    --avatar-size: var(--avatar-size-lg);
+    --avatar-square-size: var(--avatar-size-lg);
+    --avatar-font-size: var(--avatar-font-size-lg);
+    --avatar-glyph-size: var(--avatar-glyph-size-lg);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-lg);
+  }
+
+  .ui-avatar[data-size] svg {
+    inline-size: var(--avatar-glyph-size);
+    block-size: var(--avatar-glyph-size);
+    flex: none;
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;
@@ -1066,8 +1096,8 @@
   }
 
   .ui-prose a {
-    color: hsl(var(--primary));
-    text-decoration: underline;
+    color: hsl(var(--prose-link-color, var(--primary)));
+    text-decoration-line: var(--prose-link-decoration-line);
   }
 
   .ui-prose table {

package/dist/styles/data-entry-layout.css

@@ -199,6 +199,18 @@
     flex-shrink: 0;
   }
 
+  .ui-upload-list-glyph {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--control-height-lg);
+    block-size: var(--control-height-lg);
+    border-radius: var(--radius);
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+    flex-shrink: 0;
+  }
+
   .ui-upload-picture-item {
     inline-size: var(--upload-tile-size);
     overflow-wrap: anywhere;
@@ -336,6 +348,11 @@
     border-color: hsl(var(--primary));
   }
 
+  .ui-upload-picture-empty-icon {
+    inline-size: var(--upload-picture-icon-size);
+    block-size: var(--upload-picture-icon-size);
+  }
+
   .ui-upload-picture-empty-label {
     margin-block-start: var(--upload-picture-empty-label-space-block-start);
     font-size: var(--upload-picture-empty-label-font-size);
@@ -370,6 +387,11 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-upload-avatar-icon {
+    inline-size: var(--upload-avatar-icon-size);
+    block-size: var(--upload-avatar-icon-size);
+  }
+
   .ui-upload-avatar-change {
     position: absolute;
     inset-inline: 0;

package/dist/styles/icon-layout.css

@@ -0,0 +1,37 @@
+
+@layer components {
+  svg.ui-icon[data-slot="icon"] {
+    inline-size: var(--icon-glyph-size);
+    block-size: var(--icon-glyph-size);
+
+    flex: 0 0 auto;
+  }
+
+  .ui-icon[data-size="2xs"] {
+    --icon-glyph-size: var(--icon-size-2xs);
+  }
+  .ui-icon[data-size="xs"] {
+    --icon-glyph-size: var(--icon-size-xs);
+  }
+  .ui-icon[data-size="sm"] {
+    --icon-glyph-size: var(--icon-size-sm);
+  }
+  .ui-icon[data-size="md"] {
+    --icon-glyph-size: var(--icon-size-md);
+  }
+  .ui-icon[data-size="lg"] {
+    --icon-glyph-size: var(--icon-size-lg);
+  }
+  .ui-icon[data-size="xl"] {
+    --icon-glyph-size: var(--icon-size-xl);
+  }
+  .ui-icon[data-size="2xl"] {
+    --icon-glyph-size: var(--icon-size-2xl);
+  }
+  .ui-icon[data-size="3xl"] {
+    --icon-glyph-size: var(--icon-size-3xl);
+  }
+  .ui-icon[data-size="4xl"] {
+    --icon-glyph-size: var(--icon-size-4xl);
+  }
+}

package/dist/styles/index.css

@@ -25,3 +25,5 @@
 @import "./navigation-layout.css";
 @import "./chart-layout.css";
 @import "./float-button-layout.css";
+
+@import "./icon-layout.css";

package/dist/styles/shell-layout.css

@@ -2083,6 +2083,16 @@
     flex: 0 0 auto;
   }
 
+  .ui-topbar-item-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+  .ui-topbar-item-icon svg {
+    inline-size: var(--topbar-icon-size);
+    block-size: var(--topbar-icon-size);
+  }
+
   @media (width <= 68.75rem) {
     .ui-topbar-center {
       display: var(--topbar-center-compact-display);

package/dist/styles/text-layout.css

@@ -51,37 +51,45 @@
   }
 
   [data-slot="text"][data-tone="default"],
-  [data-slot="heading"][data-tone="default"] {
+  [data-slot="heading"][data-tone="default"],
+  [data-slot="icon"][data-tone="default"] {
     color: hsl(var(--foreground));
   }
   [data-slot="text"][data-tone="muted"],
-  [data-slot="heading"][data-tone="muted"] {
+  [data-slot="heading"][data-tone="muted"],
+  [data-slot="icon"][data-tone="muted"] {
     color: hsl(var(--muted-foreground));
   }
 
   [data-slot="text"][data-tone="inherit"],
-  [data-slot="heading"][data-tone="inherit"] {
+  [data-slot="heading"][data-tone="inherit"],
+  [data-slot="icon"][data-tone="inherit"] {
     color: inherit;
   }
   [data-slot="text"][data-tone="primary"],
-  [data-slot="heading"][data-tone="primary"] {
+  [data-slot="heading"][data-tone="primary"],
+  [data-slot="icon"][data-tone="primary"] {
     color: hsl(var(--primary));
   }
 
   [data-slot="text"][data-tone="success"],
-  [data-slot="heading"][data-tone="success"] {
+  [data-slot="heading"][data-tone="success"],
+  [data-slot="icon"][data-tone="success"] {
     color: hsl(var(--text-success));
   }
   [data-slot="text"][data-tone="warning"],
-  [data-slot="heading"][data-tone="warning"] {
+  [data-slot="heading"][data-tone="warning"],
+  [data-slot="icon"][data-tone="warning"] {
     color: hsl(var(--text-warning));
   }
   [data-slot="text"][data-tone="destructive"],
-  [data-slot="heading"][data-tone="destructive"] {
+  [data-slot="heading"][data-tone="destructive"],
+  [data-slot="icon"][data-tone="destructive"] {
     color: hsl(var(--text-error));
   }
   [data-slot="text"][data-tone="info"],
-  [data-slot="heading"][data-tone="info"] {
+  [data-slot="heading"][data-tone="info"],
+  [data-slot="icon"][data-tone="info"] {
     color: hsl(var(--text-info));
   }
 

package/dist/tokens/components/control.css

@@ -166,6 +166,7 @@
   --search-input-label-font-size: var(--font-size-xs);
   --tag-input-chip-font-size: var(--font-size-xs);
   --toggle-sm-font-size: var(--font-size-xs);
+  --toggle-xs-font-size: var(--font-size-xs);
   --button-sm-font-size: var(--font-size-xs);
 }
 

package/dist/tokens/components/data-display.css

@@ -30,6 +30,10 @@
   --prose-code-font-size: calc(1em / var(--font-size-ratio));
   --prose-code-space-inline: var(--space-1);
   --prose-code-radius: var(--radius-sm);
+
+  --prose-link-color: initial;
+
+  --prose-link-decoration-line: underline;
   --prose-image-radius: var(--radius-md);
   --timeline-note-font-size: var(--font-size-xs);
 
@@ -37,6 +41,28 @@
 
   --avatar-tint: transparent;
 
+  --avatar-size: var(--control-height);
+
+  --avatar-size-xs: var(--control-height-xs);
+
+  --avatar-size-sm: var(--control-height-sm);
+
+  --avatar-size-lg: var(--control-height-lg);
+
+  --avatar-font-size: var(--font-size-base);
+
+  --avatar-font-size-xs: var(--font-size-2xs);
+
+  --avatar-font-size-sm: var(--font-size-xs);
+
+  --avatar-font-size-lg: var(--font-size-lg);
+
+  --avatar-glyph-size-xs: calc(var(--icon-size-xs) * var(--scaling));
+
+  --avatar-glyph-size-sm: calc(var(--icon-size-sm) * var(--scaling));
+
+  --avatar-glyph-size-lg: calc(var(--icon-size-lg) * var(--scaling));
+
   --avatar-square-radius: var(--radius-lg);
   --avatar-square-size: var(--control-height);
   --avatar-square-background: initial;

package/dist/tokens/components/segmented.css

@@ -11,6 +11,10 @@
 
   --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
 
+  --segmented-xs-font-size: var(--font-size-xs);
+
+  --segmented-xs-item-padding-inline: calc(var(--control-padding-x-compact) - 1px);
+
   --segmented-item-gap: calc(var(--space-3) / 2);
 
   --segmented-item-color: var(--muted-foreground);

package/dist/tokens/components/upload.css

@@ -30,6 +30,8 @@
   --upload-picture-radius: var(--radius-md);
   --upload-picture-preview-max-height: 12rem;
   --upload-picture-empty-height: 8rem;
+
+  --upload-picture-icon-size: var(--icon-size-2xl);
   --upload-picture-empty-label-space-block-start: var(--space-2);
   --upload-picture-empty-label-font-size: var(--font-size-sm);
   --upload-picture-overlay-font-size: var(--font-size-sm);
@@ -41,6 +43,8 @@
   --upload-picture-badge-font-size: var(--font-size-xs);
 
   --upload-avatar-size: 6rem;
+
+  --upload-avatar-icon-size: var(--icon-size-xl);
   --upload-avatar-border-width: var(--stroke-md);
   --upload-avatar-change-space-block: var(--space-1);
 

package/docs/CONSUMER-RULES.md

@@ -5,9 +5,9 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled, 729 sliced woff2 faces, ~11.7 MB), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all), `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself) or `@import "@godxjp/ui/styles/core-with-jis-level1"` (`core-with-fallbacks` + Noto Sans JP merged to JIS X 0208 level 1: **3 requests, ~1.53 MB, once** instead of ~8 font requests on every navigation — for a Japanese app that wants the bundled face). Never cherry-pick `*-layout.css`.
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
-4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`.
+4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`. A LIST of those rows is `<Flex as="ul" marker="none" direction="col" gap="none">` with `<ListRow as="li">` children — `marker="none"` keeps the `<ul>`, the `<li>` semantics and the gap token while dropping the bullet and the indent. Never a raw `<ul>`/`<ol>` (it carries no gap token), never `<div role="list">` + `<div role="listitem">`, and never a wrapper around each row: the divider is `:not(:last-child)` among siblings, so a row alone in its own wrapper is always the last one and EVERY divider disappears silently. A bulleted prose list is the same `<Flex as="ul">` without `marker`.
 5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below.
-6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`.
+6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`. A STANDALONE glyph is `<Icon as={Lock} size="sm" tone="muted" />` from `@godxjp/ui/general`: a bare lucide icon carries its own `width="24" height="24"` and only four places re-size it for you (`Button`, a `DropdownMenuItem`, a `TopbarItem`, a `ListRow` leading slot), so everywhere else — in a `Text`, a table cell, an `<a>` — it draws at 24px beside 14px type. `size-4` and `w-[16px]` are closed to you by rules 3 and 8, and `size={16}` hard-codes a number the theme owns; `Icon` puts the glyph on the `--icon-size-*` scale (`2xs…4xl`) instead, and is `aria-hidden` unless you give it a `label` (then it is `role="img"` with that name). The audit rule is `lucide-icon-needs-size`.
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.
 9. Logical directions (`ms-`, `me-`, `start-`, `end-`) when a utility is unavoidable; never `ml-` / `left-`.

package/docs/CUSTOMER-THEMING.md

@@ -213,6 +213,32 @@ Density (`<PageContainer density>`) scales component sizes, not the grid. - **Pi
 
 ---
 
+## Selectors the package promises are YOURS
+
+A `data-*` attribute the package never writes is a selector you can hold a stylesheet against — the one place where CSS of your own is the documented route rather than a workaround. Each of these is a promise held by a test, not an accident of the current markup:
+
+| You write | The package promises | Why it exists |
+| --- | --- | --- |
+| `.ui-prose a[data-…]` | Prose writes `data-*` on its **own root only** — never on a descendant. Every `data-*` on an `a` inside it is yours, survives the render, and stays selectable (gh#717) | A renderer knows things about a link that the package cannot: in a wiki, a link whose target **does not exist yet** must read differently from one that resolves |
+| `<TableRow data-expanded-row="">` | The striping counts records, not DOM rows — a row you mark is skipped in the count and wears its record's stripe | A detail row under a record is your composition, not a row of data |
+| `[data-tenant]`, `[data-program]` | Every anchor token re-resolves at the scope (below) | One app, many brands |
+
+**Style a marked link through the knob, not around it.** `--prose-link-color` is read as `hsl(var(--prose-link-color, var(--primary)))` **at the anchor**, so declaring the custom property inside your own higher-specificity selector is enough — you never have to restate the `color` declaration, and a later package change to how the ink is painted still reaches you:
+
+```css
+/* your app's stylesheet */
+.ui-prose a[data-unresolved="true"] {
+  --prose-link-color: var(--text-error); /* the TEXT tier — 7.25:1 light, 5.51:1 dark on a card */
+  text-decoration-style: dashed;
+}
+```
+
+Use `--text-error`, not `--destructive`: the fill tier is tuned for a white label on top of it and measures 2.95:1 as ink on the dark card (gh#610). The whole family is `--prose-link-color` (default `hsl(var(--primary))`, resolved at the anchor so a scoped re-tint reaches it) and `--prose-link-decoration-line` (default `underline`). Set the first on `[data-tenant]` to re-tint every wiki link at once.
+
+There is **no prop** naming the attribute, deliberately: the attribute IS the API, the same way `data-expanded-row` and `data-axe-open` are. A prop would make the package own a name only your renderer knows, and would let exactly one state be marked.
+
+---
+
 ## Multi-tenant (one app, many brands)
 
 Scope the overrides under a tenant attribute instead of `:root`. The colour utilities are declared with `@theme inline`, so a scoped `--primary` (and the other anchors) **re-resolve at the element** — `bg-primary`, `text-success`, every component surface, the focus ring, the brand glow, gradients and the modal scrim all retint inside the scope:

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **163**
-- With ≥1 frame: **142** · zero-frame: **21**
+- Public components: **164**
+- With ≥1 frame: **143** · zero-frame: **21**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -74,6 +74,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Logo | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Reveal | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Activity | ✓ | · | N/A | N/A | · | · | · | · | · | · |
+| Icon | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | DataTable | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Card | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CardContent | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |