@godxjp/ui 27.1.0 → 27.4.1

package/dist/props/registry.js

@@ -350,7 +350,12 @@ const VOCABULARY_REGISTRY = {
   TablePaginationProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: "DataTable pagination object surface \u2014 1-based current | pageSize | total | pageSizeOptions | showSizeChanger | onChange (antd TablePaginationConfig); `false` hides the pager"
+    description: "DataTable pagination object surface \u2014 1-based current | pageSize | total | pageSizeOptions | showSizeChanger | showTotal | position | onChange (antd TablePaginationConfig); `false` hides the pager. Without a composed DataTable.Pagination the table renders its own Pagination footer (total + page numbers, density-sized); total > data.length \u2264 pageSize reads as server paging"
+  },
+  TablePaginationPositionProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "DataTable pagination footer position (antd TablePaginationPosition, logical) \u2014 topStart | topCenter | topEnd | bottomStart | bottomCenter | bottomEnd (default) | none"
   },
   TableCellIndentProp: {
     file: "vocabulary/data.prop.ts",
@@ -428,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",
@@ -762,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: {
@@ -774,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." },
@@ -794,6 +810,7 @@ const COMPONENT_PROP_REGISTRY = {
   ResponsiveGridFlowProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   ResponsiveGridColumnsProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   ResponsiveGridPresetProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  ResponsiveGridAlignProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   MasterDetailRailWidthProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -1322,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",
@@ -1499,6 +1542,17 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: ["PlaceholderProp", "ValueProp", "DisabledProp"]
   },
+  CommandProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "split",
+        local: true,
+        reason: "antd List `split` \u2014 ruled-list presentation (row dividers, 0 list padding) for option/checkbox lists; the rest of the root API is cmdk's (gh#699)."
+      }
+    ]
+  },
   TextareaProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2045,6 +2099,7 @@ const COMPONENT_PROP_REGISTRY = {
       "TableStickyProp",
       "OnRowProp",
       "TablePaginationProp",
+      "TablePaginationPositionProp",
       "SortDirectionProp",
       "OnColumnFilterChangeProp"
     ]
@@ -3385,7 +3440,12 @@ const COMPONENT_PROP_REGISTRY = {
       {
         field: "columns",
         local: true,
-        reason: "Labels and positive numeric unit counts define a consumer-supplied axis."
+        reason: "Labels, positive numeric unit counts and an optional muted flag (non-working period) define a consumer-supplied axis."
+      },
+      {
+        field: "bordered",
+        local: true,
+        reason: "Rules the body as a grid (row rules, header rule, a vertical rule per column); default true, same name and default as Calendar bordered."
       },
       {
         field: "bands",

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

@@ -265,18 +265,44 @@ export type OnRowProp<T> = (row: T, index: number) => (React.HTMLAttributes<HTML
  * Pagination object surface (antd `TablePaginationConfig`). 1-BASED `current`, like antd — the
  * TanStack-shaped `{ pageIndex, pageSize }` form the prop already accepted is still accepted and
  * is told apart by its `pageIndex` field. `false` hides the pager entirely.
+ *
+ * Given WITHOUT a composed `<DataTable.Pagination>`, the table renders its own antd footer: the
+ * real `Pagination` (total + page numbers) at `position`, sized from the table's `density`.
+ * A composed `<DataTable.Pagination>` keeps its own footer and wins — never two pagers.
  */
 export type TablePaginationProp = {
     /** 1-based current page. */
     current?: number;
     pageSize?: number;
-    /** Total row count on the server — drives the page count under manual pagination. */
+    /**
+     * Total row count on the server — drives the page count. As in antd, a `total` larger than
+     * `data.length` with no more than `pageSize` rows is read as SERVER paging: `data` is the current
+     * page, shown as is, and the footer offers `ceil(total / pageSize)` pages.
+     */
     total?: number;
     pageSizeOptions?: number[];
     /** Default `true`. `false` drops the rows-per-page select. */
     showSizeChanger?: boolean;
+    /** antd `showTotal` — `true` for the localized total label, or a `(total, range)` render. */
+    showTotal?: boolean | ((total: number, range: [number, number]) => React.ReactNode);
+    /**
+     * antd `hideOnSinglePage`, whose antd default is `false` — and that default is kept HERE, in the
+     * table footer, although the standalone `Pagination` defaults it to `true` (gh#711). A list
+     * screen's footer carries the total and the rows-per-page select, so hiding it on the last page
+     * of a shrinking filter makes the row count disappear exactly when the user is checking it.
+     */
+    hideOnSinglePage?: boolean;
+    /** antd `position`, logical spelling. Default `["bottomEnd"]` (antd `bottomRight`). */
+    position?: TablePaginationPositionProp[];
     onChange?: (page: number, pageSize: number) => void;
 };
+/**
+ * Where DataTable's own pagination footer sits (antd `TablePaginationPosition`). antd's physical
+ * `topLeft` / `bottomRight` become `topStart` / `bottomEnd` here — the same logical respelling as
+ * `DropdownMenuPlacementProp` — so an RTL table puts the pager on its reading end with no second
+ * value. `none` renders no footer while the pagination state stays live.
+ */
+export type TablePaginationPositionProp = "topStart" | "topCenter" | "topEnd" | "bottomStart" | "bottomCenter" | "bottomEnd" | "none";
 /**
  * Descriptions column count (antd `column`). A plain number keeps this library's own mobile-first
  * ladder; the `{ sm, md, lg, xl }` object is antd's responsive form, expressed against this

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, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.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

@@ -377,6 +377,14 @@
     line-height: 0;
   }
 
+  .ui-choice-field > .ui-choice-control {
+    display: flex;
+    align-items: center;
+    font-size: var(--font-size-base);
+    line-height: var(--control-label-line-height);
+    min-block-size: 1lh;
+  }
+
   .ui-choice-input {
     position: absolute;
     inset: 0;
@@ -770,6 +778,30 @@
     opacity: 0.5;
   }
 
+  .ui-command[data-split] .ui-command-group {
+    padding: var(--command-list-split-padding);
+  }
+
+  .ui-command[data-split] .ui-command-item {
+    border-radius: 0;
+    margin-inline: calc(-1 * var(--command-list-split-inset));
+    padding-inline: calc(var(--command-list-split-inset) + var(--command-input-padding-x));
+  }
+
+  .ui-command[data-split] .ui-command-group [cmdk-group-heading] {
+    padding-inline: calc(var(--command-list-split-inset) + var(--command-input-padding-x));
+  }
+
+  .ui-command[data-split] .ui-command-item:has(+ .ui-command-item) {
+    border-block-end: var(--command-item-divider-width) solid
+      hsl(var(--command-item-divider-color, var(--border)));
+  }
+
+  .ui-command[data-split] .ui-command-group:not([hidden]) ~ .ui-command-group:not([hidden]) {
+    border-block-start: var(--command-item-divider-width) solid
+      hsl(var(--command-item-divider-color, var(--border)));
+  }
+
   [data-slot="dialog-content"].ui-command-palette {
     top: var(--command-palette-inset-top);
     width: min(
@@ -1060,7 +1092,9 @@
     border: 0;
     padding: 0;
     cursor: pointer;
-    color: hsl(var(--rating-star-empty-color, var(--muted-foreground)) / var(--rating-star-empty-alpha));
+    color: hsl(
+      var(--rating-star-empty-color, var(--muted-foreground)) / var(--rating-star-empty-alpha)
+    );
     line-height: 0;
   }
   .ui-rating-star:disabled {
@@ -1509,6 +1543,10 @@
     padding: var(--search-select-list-space-inset);
   }
 
+  .ui-command[data-split] .ui-search-select-list {
+    padding: var(--command-list-split-padding);
+  }
+
   .ui-search-select-option-slot {
     min-inline-size: 0;
     flex: 1 1 0%;
@@ -1702,6 +1740,11 @@
     display: contents;
   }
 
+  .ui-select-root > [data-react-aria-prevent-focus][aria-hidden="true"] {
+    position: absolute !important;
+    inset: auto !important;
+  }
+
   .ui-select-content {
     position: relative;
     z-index: var(--overlay-z-index);

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

@@ -1328,12 +1328,69 @@
     min-inline-size: 0;
     overflow: hidden;
     padding: var(--space-2);
-    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+    border-inline-end: var(--range-timeline-grid-width) solid
+      hsl(var(--range-timeline-border-color));
   }
   .ui-range-timeline-track {
     position: relative;
     min-inline-size: 0;
   }
+
+  .ui-range-timeline-body {
+    position: relative;
+    isolation: isolate;
+  }
+  .ui-range-timeline-grid {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: grid;
+    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
+    pointer-events: none;
+  }
+  .ui-range-timeline-grid-column {
+    min-inline-size: 0;
+    padding-inline: var(--space-2);
+    border-inline-end: var(--range-timeline-grid-width) solid transparent;
+  }
+  .ui-range-timeline-grid-column[data-muted="true"] {
+    background: var(--range-timeline-muted-column-background, hsl(var(--muted)));
+  }
+
+  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
+  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
+  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
+    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input)));
+  }
+  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
+  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
+    border-block-start: var(--range-timeline-grid-width) solid
+      var(--range-timeline-grid-color, hsl(var(--input)));
+  }
+  .ui-range-timeline-outside {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline: var(--space-2);
+    color: hsl(var(--muted-foreground));
+  }
+  .ui-range-timeline-outside[data-direction="before"] {
+    inset-inline-start: 0;
+  }
+  .ui-range-timeline-outside[data-direction="after"] {
+    inset-inline-end: 0;
+  }
+  .ui-range-timeline-outside-icon {
+    inline-size: var(--icon-size-sm);
+    block-size: var(--icon-size-sm);
+    flex-shrink: 0;
+  }
+
+  [dir="rtl"] .ui-range-timeline-outside-icon {
+    transform: scaleX(-1);
+  }
   .ui-range-timeline-bar {
     position: absolute;
     inset-block-start: 50%;

package/dist/styles/form-layout.css

@@ -110,6 +110,11 @@
     > * {
     max-inline-size: 100%;
   }
+
+  .ui-form-field[data-collapse-below="false"][data-layout="horizontal"]
+    > .ui-form-field-control:first-child {
+    grid-column-start: 2;
+  }
   .ui-form-field[data-collapse-below="false"][data-label-align="end"]:is(
       [data-layout="horizontal"],
       [data-layout="inline"]
@@ -139,6 +144,10 @@
       > * {
       max-inline-size: 100%;
     }
+    .ui-form-field[data-collapse-below="sm"][data-layout="horizontal"]
+      > .ui-form-field-control:first-child {
+      grid-column-start: 2;
+    }
     .ui-form-field[data-collapse-below="sm"][data-label-align="end"]:is(
         [data-layout="horizontal"],
         [data-layout="inline"]
@@ -169,6 +178,10 @@
       > * {
       max-inline-size: 100%;
     }
+    .ui-form-field[data-collapse-below="md"][data-layout="horizontal"]
+      > .ui-form-field-control:first-child {
+      grid-column-start: 2;
+    }
     .ui-form-field[data-collapse-below="md"][data-label-align="end"]:is(
         [data-layout="horizontal"],
         [data-layout="inline"]
@@ -199,6 +212,10 @@
       > * {
       max-inline-size: 100%;
     }
+    .ui-form-field[data-collapse-below="lg"][data-layout="horizontal"]
+      > .ui-form-field-control:first-child {
+      grid-column-start: 2;
+    }
     .ui-form-field[data-collapse-below="lg"][data-label-align="end"]:is(
         [data-layout="horizontal"],
         [data-layout="inline"]
@@ -229,6 +246,10 @@
       > * {
       max-inline-size: 100%;
     }
+    .ui-form-field[data-collapse-below="xl"][data-layout="horizontal"]
+      > .ui-form-field-control:first-child {
+      grid-column-start: 2;
+    }
     .ui-form-field[data-collapse-below="xl"][data-label-align="end"]:is(
         [data-layout="horizontal"],
         [data-layout="inline"]

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/layout.css

@@ -321,6 +321,13 @@
     align-items: start;
   }
 
+  .ui-responsive-grid[data-align="start"] {
+    align-items: start;
+  }
+  .ui-responsive-grid[data-align="stretch"] {
+    align-items: stretch;
+  }
+
   .ui-responsive-grid[data-gap="none"] {
     gap: 0;
   }

package/dist/styles/navigation-layout.css

@@ -338,8 +338,12 @@
     justify-content: safe flex-end;
   }
 
+  .ui-pagination[data-align="end"] > .ui-pagination-total {
+    margin-inline-end: 0;
+  }
+
   .ui-pagination[data-size="sm"] {
-    --control-height: var(--pagination-control-height-sm);
+    --control-height: var(--pagination-control-height-sm, var(--control-height-sm));
   }
 
   .ui-pagination-jumper {

package/dist/styles/shell-layout.css

@@ -1165,14 +1165,11 @@
   }
 
   .ui-org-switcher-command {
+    --command-list-split-inset: var(--org-switcher-list-inset);
     width: 100%;
     padding-inline: calc(var(--org-switcher-list-inset) - var(--org-switcher-list-offset));
   }
 
-  .ui-org-switcher-command .ui-command-group {
-    padding: 0;
-  }
-
   .ui-org-switcher-command .ui-command-input-wrapper {
 
     border: 1px solid hsl(var(--input));
@@ -1183,16 +1180,6 @@
     background: hsl(var(--background));
   }
 
-  .ui-org-switcher-command .ui-command-item {
-    border-radius: 0;
-    margin-inline: calc(-1 * var(--org-switcher-list-inset));
-    padding-inline: calc(var(--org-switcher-list-inset) + var(--command-input-padding-x));
-  }
-
-  .ui-org-switcher-command .ui-command-item + .ui-command-item {
-    border-block-start: 1px solid hsl(var(--border));
-  }
-
   [data-slot="dialog-footer"]:has(> .ui-org-switcher-legend),
   [data-slot="sheet-footer"]:has(> .ui-org-switcher-legend) {
     justify-content: flex-start;
@@ -2096,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/table-layout.css

@@ -40,7 +40,47 @@
   }
 
   .ui-table-row[data-tone] {
-    background: hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha));
+    background-image: linear-gradient(
+      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha)),
+      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+    );
+  }
+
+  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row]))) {
+    background-color: color-mix(
+      in srgb,
+      var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+      transparent
+    );
+  }
+
+  :where(
+    [data-slot="table"]
+      > tbody
+      > tr:nth-child(even of :not([data-expanded-row]))
+      + tr[data-expanded-row]
+      > td
+  ) {
+    background-image: linear-gradient(
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      )
+    );
+  }
+
+  [data-slot="table"][data-striped=""] {
+    --table-row-striped-alpha: 100%;
+  }
+
+  [data-slot="table"][data-striped="false"] {
+    --table-row-striped-alpha: 0%;
   }
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
@@ -172,6 +212,14 @@
     min-width: 0;
   }
 
+  .ui-data-table-pagination--footer > .ui-pagination {
+    flex: 1 1 auto;
+  }
+
+  .ui-data-table-pagination--footer:empty {
+    display: none;
+  }
+
   .ui-data-table-page-size {
     flex: 0 0 auto;
     flex-wrap: nowrap;
@@ -213,10 +261,6 @@
     min-inline-size: var(--table-surface-min-inline-size);
   }
 
-  .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
-    background-color: var(--table-row-striped-background, hsl(var(--muted) / 0.4));
-  }
-
   .ui-data-table-empty {
     padding: var(--empty-state-space-y) var(--empty-state-space-x);
   }
@@ -332,6 +376,13 @@
     box-shadow: var(--table-fixed-shadow-start);
   }
 
+  [data-slot="card"]
+    .ui-data-table-surface
+    tbody
+    :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
+    background-color: hsl(var(--card-background, var(--card)));
+  }
+
   th.ui-data-table-pin-end,
   th.ui-data-table-pin-start {
     background-color: hsl(var(--secondary));
@@ -345,11 +396,27 @@
     box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
   }
 
+  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row])))
+    > :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
+    background-image: linear-gradient(
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      )
+    );
+  }
+
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
     background-image: linear-gradient(
-      var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
-      var(--table-row-hover-background, hsl(var(--muted) / 0.5))
+      var(--table-row-hover-background, hsl(var(--accent) / 0.7)),
+      var(--table-row-hover-background, hsl(var(--accent) / 0.7))
     );
   }
 
@@ -385,7 +452,12 @@
   }
 
   .ui-data-table-expanded-row > [data-slot="table-cell"] {
-    background-color: var(--table-row-expanded-background, hsl(var(--muted) / 0.3));
+    background-color: color-mix(
+      in srgb,
+      var(--table-row-expanded-background, hsl(var(--muted) / 0.3))
+        calc(100% - var(--table-row-striped-alpha)),
+      transparent
+    );
   }
 
   .ui-data-table-summary {