@godxjp/ui 23.1.0 → 23.2.0

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

@@ -185,6 +185,47 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      * only on the narrow side (a compact-only affordance). Omit for no attribute and no rule.
      */
     hideFrom?: BreakpointProp;
+    /**
+     * ESCAPE HATCH: the same drop, at a width in PIXELS that is off every step of the scale — the
+     * `gapRaw`/`padRaw` contract applied to the breakpoint axis (gh#528).
+     *
+     * ## Why the token form stays the default
+     *
+     * An off-scale breakpoint is a LOCAL EXCEPTION, not a new tier. `sm`/`md`/`lg`/`xl` are the
+     * package's canonical steps, shared with `--master-detail-collapse-below` and with every
+     * `collapseBelow`, so two regions asked to fold "at the same place" actually fold together.
+     * A raw width folds one region and nothing else; spend the four named steps FIRST, and reach
+     * here only when the canonical design specifies a width the scale does not have (a nav that
+     * becomes a hamburger at 900px).
+     *
+     * ## The price, and why it is the right one
+     *
+     * It leaves `data-hide-below-raw` on the DOM, exactly like `data-gap-raw`/`data-pad-raw`, so
+     * every escape is COUNTABLE — grep the source or scan the DOM and a repo drifting off the scale
+     * shows up as a number instead of a feeling. Before this prop the only move left was
+     * `className="hidden min-[901px]:flex"`, which `ui-audit` blocks and which counts as nothing.
+     *
+     * It also prints ONE media rule per distinct width (a media query cannot read a `var()`, so an
+     * off-scale width can only reach CSS as a literal).
+     *
+     * ## The seam
+     *
+     * `hideBelowRaw` hides while `width < N`, `hideFromRaw` hides while `width >= N` — the SAME pair
+     * of comparisons as the token steps, so the two are exact complements and at exactly N the
+     * `hideBelowRaw` region is the visible one. Do NOT reach for an inclusive `<= N` here: pairing
+     * `<= N` with `>= N` leaves BOTH regions hidden at exactly N, which is the one-pixel hole a
+     * consumer measured on a hand-rolled `max-[900px]:` pair (gh#528).
+     *
+     * When present it WINS over `hideBelow`, which then emits no attribute, so the two cannot both
+     * match at one width.
+     */
+    hideBelowRaw?: number;
+    /**
+     * The inverse of `hideBelowRaw` — drop the region FROM a raw pixel width upwards. Same contract,
+     * same price, same seam (`width >= N`); it wins over `hideFrom` and leaves `data-hide-from-raw`
+     * on the DOM.
+     */
+    hideFromRaw?: number;
     /**
      * Take the space the siblings leave — the Flex becomes the row's ELASTIC column.
      *
@@ -802,6 +843,21 @@ export type SidebarItemProp = {
      * merely unread: an @mention, a direct message, a failure waiting on them.
      */
     badgeTone?: SidebarBadgeToneProp;
+    /**
+     * TRAILING 16px glyph — the disclosure mark of a row that opens something (the `⌃⌄` of a
+     * workspace switcher, a `→` on a row that leaves the app). Pinned to the same box as `icon`,
+     * and hidden on the collapsed rail exactly like `badge`.
+     *
+     * It is NOT `badge`, and the difference is the pill: `badge` wraps whatever it is given in
+     * `.sb-badge` — a 9999px-radius `hsl(var(--secondary))` capsule sized for a COUNT — so a
+     * chevron passed there renders as a grey lozenge with a 24px SVG inside it (measured 36×24 with
+     * a 24×24 glyph, beside a 16×16 leading icon in the same 32px row). A glyph draws no surface,
+     * so it gets its own slot rather than a size tier on the count pill.
+     *
+     * Takes the COMPONENT, like `icon` — not an element. That is what lets the rail pin the size;
+     * a `ReactNode` hole is how `badge` ended up carrying an unsized 24px SVG.
+     */
+    trailingIcon?: ComponentType<SVGProps<SVGSVGElement>>;
     disabled?: boolean;
     /**
      * Destination of the row. It is the SOLE interactive element (no nested `<button>`), so
@@ -1164,7 +1220,22 @@ export type SidebarProp = {
      * canonical row.
      */
     renderItem?: (item: SidebarItemData, rowProps: SidebarRenderItemProp) => ReactNode;
-    footer?: ReactNode;
+    /**
+     * Footer slot pinned BELOW the scroll area — identity, status, a mode switch.
+     *
+     * Takes a FUNCTION for the same reason `brand` does, and it is the same reason twice because
+     * both slots live INSIDE the collapsible rail: a plain node is built outside this component and
+     * cannot see the EFFECTIVE collapsed state, so the consumer has no correct move. Reading their
+     * own `collapsed` boolean renders a glyph-only footer inside the full-width drawer (`AppShell`
+     * hands the same Sidebar to both surfaces and the drawer un-collapses); building a second
+     * Sidebar for `AppShell.mobileNav` is the override that switches `railInDrawer` off; doing
+     * neither leaves the expanded footer to reflow inside a 64px rail (measured: a two-line identity
+     * block went 255×66 docked → 63×111 collapsed, wrapping the name across three lines).
+     *
+     * The function is called with the surface-effective value. A plain `ReactNode` still works
+     * unchanged.
+     */
+    footer?: ReactNode | ((collapsed: boolean) => ReactNode);
     /** Override the nav landmark's accessible name. Defaults to a localized "Main navigation". */
     "aria-label"?: string;
 };

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[];
@@ -391,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

@@ -1940,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";
@@ -2080,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";
@@ -2202,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

@@ -2239,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",
@@ -2392,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",
@@ -2544,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/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;