@godxjp/ui 23.0.0 → 23.2.0

package/dist/props/components/navigation.prop.d.ts

@@ -1,6 +1,6 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
-import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp } from "../vocabulary/index.js";
+import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
 import type { SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
  * `wrap` (default) stacks on narrow viewports then wraps onto extra rows; `scroll` keeps ONE
@@ -330,6 +330,60 @@ export type TabsOverflowProp = "scroll" | "menu";
  * so an inline `(value, event) => void` leaks its second PARAMETER as a phantom prop.
  */
 export type TabsOnTabClickProp = (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+/**
+ * @see Tabs — Ant Design `animated`, same shape and same two switches.
+ *
+ * `inkBar` (default ON) is the `line` variant's active bar cross-fading between triggers.
+ * `tabPane` (default OFF, as in antd) fades the panel in when the selection moves.
+ *
+ * WHERE IT DIVERGES, and why: antd animates the PANE by laying every pane on one translated
+ * inline track and sliding it, which needs all of them mounted. This component destroys a hidden
+ * panel by default (`destroyOnHidden` — the opposite default from antd), so there is no track to
+ * slide; the pane animation is a token-owned fade-in on the panel that just became active
+ * (`--tabs-pane-motion-*`). The SWITCH is antd's, the motion is this library's, and both switches
+ * are additionally off under `prefers-reduced-motion` — which antd's is not.
+ */
+export type TabsAnimatedProp = boolean | {
+    inkBar?: boolean;
+    tabPane?: boolean;
+};
+/**
+ * @see Tabs — Ant Design `indicator.size`, held to a NAMED axis instead of a pixel length.
+ *
+ * antd takes `number | (origin: number) => number` — a measured px length, or a function of the
+ * tab's own width. Neither can enter this library: a literal is what `no-arbitrary-spacing`
+ * exists to stop, and a function of the measured origin is the free-form escape hatch
+ * `docs/DESIGN-AUTHORITY.md` refuses by name. The two lengths that answer the actual request are
+ * named instead — `full` (the whole trigger, today's bar and the default) and `label` (the
+ * trigger's content box, i.e. minus its own inline padding), which is what
+ * `size: (origin) => origin - 2 * padding` is written to produce.
+ */
+export type TabsIndicatorSizeProp = "full" | "label";
+/**
+ * @see Tabs — Ant Design `indicator`. `align` keeps antd's own name AND its values, which are
+ * already logical, so it reads the shared `TextAlignProp` vocabulary rather than a second
+ * spelling of the same axis. It only has anything to place when `size` is shorter than the
+ * trigger, exactly as in antd.
+ */
+export type TabsIndicatorProp = {
+    size?: TabsIndicatorSizeProp;
+    align?: TextAlignProp;
+};
+/**
+ * @see Tabs — the edge a scroll of the trigger strip moved TOWARDS, on the logical axis.
+ *
+ * antd reports `left | right | top | bottom`; those four cannot mirror for an RTL locale and two
+ * of them are just the other axis of the same event. `start`/`end` say the same thing on whichever
+ * axis the strip is on — the same override that makes `tabPlacement` logical.
+ */
+export type TabsScrollDirectionProp = "start" | "end";
+/**
+ * @see Tabs — Ant Design `onTabScroll`. A NAMED alias for the same reason as `TabsOnEditProp`.
+ * Only fires for the `items` API, which is the path that owns the strip element.
+ */
+export type TabsOnScrollProp = (info: {
+    direction: TabsScrollDirectionProp;
+}) => void;
 /** @see Tabs — high-level tabs with optional `items` array. */
 export type TabsProp = {
     items?: TabItemProp[];
@@ -337,7 +391,14 @@ export type TabsProp = {
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     variant?: TabsVariantProp;
-    /** Ant Design `tabPlacement`. Default `top`. */
+    /**
+     * Ant Design `tabPlacement`. Default `top`.
+     *
+     * `start`/`end` FOLD to `top`/`bottom` at or below
+     * `--tabs-placement-responsive-breakpoint-width` (48rem), arrow keys included — a vertical strip
+     * shares one inline axis with its panel and a phone has no room for both. Ant Design folds the
+     * same pair the same way. Set the token to `0px` to keep the strip vertical at every width.
+     */
     tabPlacement?: TabsPlacementProp;
     /** Control tier of the triggers. Default `md`. Ant Design `size` (`small`/`middle`/`large`). */
     size?: "sm" | "md" | "lg";
@@ -384,6 +445,23 @@ export type TabsProp = {
      * "click" would be a fiction. Use `onValueChange` for selection, whatever moved it.
      */
     onTabClick?: TabsOnTabClickProp;
+    /**
+     * Ant Design `animated`. Default `{ inkBar: true, tabPane: false }` — antd's own default, and
+     * byte for byte what this strip already painted. @see TabsAnimatedProp
+     */
+    animated?: TabsAnimatedProp;
+    /**
+     * Ant Design `indicator`. Governs the `line` variant's active bar only — the other variants
+     * have no bar to place. @see TabsIndicatorProp
+     */
+    indicator?: TabsIndicatorProp;
+    /**
+     * Ant Design `more.icon` — the glyph on the `overflow="menu"` button, flat here for the same
+     * reason `addIcon` and `closeIcon` are flat: `overflow` names the BEHAVIOUR, the icon is a slot.
+     */
+    moreIcon?: React.ReactNode;
+    /** Ant Design `onTabScroll`, on the logical axis. @see TabsOnScrollProp */
+    onTabScroll?: TabsOnScrollProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -584,6 +584,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "data";
         readonly description: "Row ID extractor generic";
     };
+    readonly GetRowLabelProp: {
+        readonly file: "vocabulary/data.prop.ts";
+        readonly category: "data";
+        readonly description: "Row label extractor generic — the accessible name of a row's selection control";
+    };
     readonly OnRowClickProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
@@ -1533,7 +1538,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly DataTableProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
+        readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "GetRowLabelProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
     };
     readonly ListRowDensityProp: {
         readonly group: "data-display";
@@ -1935,6 +1940,45 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/feedback.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly SkeletonProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp", "ChildrenProp"];
+    };
+    readonly SkeletonAvatarProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ClassNameProp"];
+    };
+    readonly SkeletonButtonProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ShapeProp", "ClassNameProp"];
+    };
+    readonly SkeletonInputProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ClassNameProp"];
+    };
+    readonly SkeletonNodeProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp"];
+    };
+    readonly SkeletonImageProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp"];
+    };
+    readonly SkeletonArticleProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", {
+            readonly field: "title";
+            readonly local: true;
+            readonly reason: "antd's Skeleton `title` is the presence/measure of the HEADING LINE, not the string TitleProp names — `false` drops the line and `{ width }` re-measures it.";
+        }];
+    };
     readonly ToolbarProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
@@ -2075,6 +2119,35 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly TabsAnimatedProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly TabsIndicatorSizeProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly TabsIndicatorProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["TextAlignProp", {
+            readonly field: "size";
+            readonly local: true;
+            readonly reason: "The LENGTH of the active bar along the strip (Ant Design `indicator.size`), not a control tier — `SizeProp` is the sm/md/lg band and reusing it here would say something false. Values stay a closed named axis (`full` | `label`) so no pixel length or origin-function enters the API.";
+        }];
+    };
+    readonly TabsScrollDirectionProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly TabsOnScrollProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly ["HandlerProp"];
+    };
     readonly TabItemProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
@@ -2197,6 +2270,56 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ClassNameProp"];
     };
+    readonly SwatchProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp", {
+            readonly field: "color";
+            readonly local: true;
+            readonly reason: "A CSS colour VALUE a person chose (a brand's primary_color, a tag tint) — DATA, the same axis as Badge's `color`, and deliberately not ToneProp: a tone is a closed set of meanings and this colour means only itself (gh#527).";
+        }, {
+            readonly field: "aria-label";
+            readonly local: true;
+            readonly reason: "The sample's accessible NAME, which is what lets a read-only colour be shown with no visible label. Absent, the mark is aria-hidden (Legend's rule) — so colour is never the sole carrier either way.";
+        }];
+    };
+    readonly FeatureStateProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly FeatureItemProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", {
+            readonly field: "state";
+            readonly local: true;
+            readonly reason: "Inclusion axis (included/excluded/limited) — FeatureList's own, not a tone.";
+        }];
+    };
+    readonly FeatureListProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp"];
+    };
+    readonly ThumbnailSizeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["SizeProp"];
+    };
+    readonly ThumbnailProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ClassNameProp", {
+            readonly field: "alt";
+            readonly local: true;
+            readonly reason: "The native img alt contract, made required so it cannot be forgotten.";
+        }, {
+            readonly field: "src";
+            readonly local: true;
+            readonly reason: "The native img src attribute.";
+        }];
+    };
     readonly CodeBlockProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";

package/dist/props/registry.js

@@ -585,6 +585,11 @@ const VOCABULARY_REGISTRY = {
     category: "data",
     description: "Row ID extractor generic"
   },
+  GetRowLabelProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Row label extractor generic \u2014 the accessible name of a row's selection control"
+  },
   OnRowClickProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
@@ -1833,6 +1838,7 @@ const COMPONENT_PROP_REGISTRY = {
       "DensityProp",
       "SortStateProp",
       "SelectedIdsProp",
+      "GetRowLabelProp",
       "HandlerProp",
       "TablePresetProp",
       "TableColumnPriorityProp",
@@ -2233,6 +2239,49 @@ const COMPONENT_PROP_REGISTRY = {
   },
   SheetResponsiveProp: { group: "feedback", file: "components/feedback.prop.ts", vocabulary: [] },
   SkeletonRowsProp: { group: "feedback", file: "components/feedback.prop.ts", vocabulary: [] },
+  SkeletonProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["ClassNameProp", "ChildrenProp"]
+  },
+  SkeletonAvatarProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["SizeProp", "ClassNameProp"]
+  },
+  SkeletonButtonProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["SizeProp", "ShapeProp", "ClassNameProp"]
+  },
+  SkeletonInputProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["SizeProp", "ClassNameProp"]
+  },
+  SkeletonNodeProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["ChildrenProp", "ClassNameProp"]
+  },
+  SkeletonImageProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["ClassNameProp"]
+  },
+  SkeletonArticleProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      {
+        field: "title",
+        local: true,
+        reason: "antd's Skeleton `title` is the presence/measure of the HEADING LINE, not the string TitleProp names \u2014 `false` drops the line and `{ width }` re-measures it."
+      }
+    ]
+  },
   ToolbarProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
@@ -2386,6 +2435,38 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/navigation.prop.ts",
     vocabulary: []
   },
+  TabsAnimatedProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
+  TabsIndicatorSizeProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
+  TabsIndicatorProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: [
+      "TextAlignProp",
+      {
+        field: "size",
+        local: true,
+        reason: "The LENGTH of the active bar along the strip (Ant Design `indicator.size`), not a control tier \u2014 `SizeProp` is the sm/md/lg band and reusing it here would say something false. Values stay a closed named axis (`full` | `label`) so no pixel length or origin-function enters the API."
+      }
+    ]
+  },
+  TabsScrollDirectionProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
+  TabsOnScrollProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: ["HandlerProp"]
+  },
   TabItemProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
@@ -2538,6 +2619,65 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["ClassNameProp"]
   },
+  SwatchProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "ClassNameProp",
+      {
+        field: "color",
+        local: true,
+        reason: "A CSS colour VALUE a person chose (a brand's primary_color, a tag tint) \u2014 DATA, the same axis as Badge's `color`, and deliberately not ToneProp: a tone is a closed set of meanings and this colour means only itself (gh#527)."
+      },
+      {
+        field: "aria-label",
+        local: true,
+        reason: "The sample's accessible NAME, which is what lets a read-only colour be shown with no visible label. Absent, the mark is aria-hidden (Legend's rule) \u2014 so colour is never the sole carrier either way."
+      }
+    ]
+  },
+  FeatureStateProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
+  FeatureItemProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      {
+        field: "state",
+        local: true,
+        reason: "Inclusion axis (included/excluded/limited) \u2014 FeatureList's own, not a tone."
+      }
+    ]
+  },
+  FeatureListProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ClassNameProp"]
+  },
+  ThumbnailSizeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["SizeProp"]
+  },
+  ThumbnailProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "SizeProp",
+      "ClassNameProp",
+      {
+        field: "alt",
+        local: true,
+        reason: "The native img alt contract, made required so it cannot be forgotten."
+      },
+      { field: "src", local: true, reason: "The native img src attribute." }
+    ]
+  },
   CodeBlockProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",

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

@@ -7,6 +7,11 @@ import type { BreakpointProp, ColumnAlignProp, SortDirectionProp } from "./inter
 import type { TableDensityProp } from "./layout.prop.js";
 /** Generic row identifier extractor for tables with selection. */
 export type GetRowIdProp<T> = (row: T) => string;
+/**
+ * Human-readable row name — what a row's selection control is announced as. The row id is a KEY,
+ * not a name: announced, it reads a UUID aloud.
+ */
+export type GetRowLabelProp<T> = (row: T) => string;
 /** Row click navigation handler. */
 export type OnRowClickProp<T> = (row: T) => void;
 /** Column definition for DataTable. */

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

@@ -4,4 +4,4 @@ export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, F
 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, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
-export type { GetRowIdProp, 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, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

package/dist/styles/alert-layout.css

@@ -288,6 +288,145 @@
     }
   }
 
+  .ui-skeleton-block[data-active],
+  .ui-skeleton-article[data-active] .ui-skeleton-block {
+    background-image: var(
+      --skeleton-sweep-gradient,
+      linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--border)) 37%, hsl(var(--muted)) 63%)
+    );
+    background-size: 400% 100%;
+
+    animation: ui-skeleton-sweep var(--duration-loop, 1400ms) ease infinite;
+  }
+
+  @keyframes ui-skeleton-sweep {
+    from {
+      background-position: 100% 50%;
+    }
+    to {
+      background-position: 0 50%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skeleton-block,
+    .ui-skeleton-block[data-active],
+    .ui-skeleton-article[data-active] .ui-skeleton-block {
+      animation: none;
+    }
+  }
+
+  [data-skeleton-element] {
+    --skeleton-element-block-size: var(--control-height);
+
+    display: inline-block;
+    vertical-align: top;
+    block-size: var(--skeleton-element-block-size);
+    border-radius: var(--skeleton-element-radius);
+  }
+
+  [data-skeleton-element][data-size="xs"] {
+    --skeleton-element-block-size: var(--control-height-xs);
+  }
+
+  [data-skeleton-element][data-size="sm"] {
+    --skeleton-element-block-size: var(--control-height-sm);
+  }
+
+  [data-skeleton-element][data-size="lg"] {
+    --skeleton-element-block-size: var(--control-height-lg);
+  }
+
+  [data-skeleton-element="avatar"] {
+    inline-size: var(--skeleton-element-block-size);
+    border-radius: var(--avatar-square-radius);
+  }
+
+  [data-skeleton-element="avatar"][data-shape="circle"] {
+    border-radius: var(--radius-pill);
+  }
+
+  [data-skeleton-element="button"] {
+    inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-button-width-ratio));
+    min-inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-button-width-ratio));
+  }
+
+  [data-skeleton-element="button"][data-shape="pill"] {
+    border-radius: var(--radius-pill);
+  }
+
+  [data-skeleton-element="button"][data-shape="sharp"] {
+    border-radius: var(--radius-sharp);
+  }
+
+  [data-skeleton-element="input"] {
+    inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-input-width-ratio));
+    min-inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-input-width-ratio));
+  }
+
+  [data-skeleton-element][data-block] {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  [data-skeleton-element="node"],
+  [data-skeleton-element="image"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    inline-size: var(--skeleton-node-size);
+    block-size: var(--skeleton-node-size);
+  }
+
+  .ui-skeleton-image-glyph {
+    inline-size: var(--skeleton-image-glyph-size);
+    block-size: var(--skeleton-image-glyph-size);
+    color: var(--skeleton-image-glyph-color, hsl(var(--muted-foreground) / 0.4));
+  }
+
+  .ui-skeleton-article {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skeleton-article-avatar-gap);
+    inline-size: 100%;
+  }
+
+  .ui-skeleton-article-header {
+    flex: 0 0 auto;
+  }
+
+  .ui-skeleton-article-section {
+    display: grid;
+    flex: 1 1 auto;
+    gap: var(--skeleton-article-title-gap);
+    min-inline-size: 0;
+  }
+
+  .ui-skeleton-article[data-avatar] .ui-skeleton-article-title {
+    margin-block-start: var(--skeleton-article-avatar-title-offset);
+  }
+
+  .ui-skeleton-article-paragraph {
+    display: grid;
+    gap: var(--skeleton-article-line-gap);
+  }
+
+  .ui-skeleton-article-title,
+  .ui-skeleton-article-line {
+    block-size: var(--skeleton-block-height);
+    inline-size: var(--skeleton-line-width, 100%);
+  }
+
+  .ui-skeleton-article-line:last-child:not(:first-child):not(:nth-child(2)) {
+    --skeleton-line-width: var(--skeleton-paragraph-last-width);
+  }
+
+  .ui-skeleton-article[data-round] .ui-skeleton-block {
+    border-radius: var(--radius-pill);
+  }
+
   @keyframes pulse {
     50% {
       opacity: 0.5;