@godxjp/ui 23.0.0 → 23.2.0

package/dist/components/navigation/tabs.js

@@ -9,6 +9,7 @@ import {
 } from "react-aria-components";
 import { MoreHorizontal, Plus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";
 import {
   DropdownMenu,
@@ -16,10 +17,22 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
-import { useKeepActiveTabVisible, useTabsOverflowValues } from "./tabs-scroll.js";
+import {
+  useKeepActiveTabVisible,
+  useTabsOverflowValues,
+  useTabsScrollReporter
+} from "./tabs-scroll.js";
+function triggerSizeClassName(size) {
+  return cn(
+    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
+    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
+    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
+  );
+}
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
-  selectionSuppressed: false
+  selectionSuppressed: false,
+  size: "md"
 });
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
@@ -45,6 +58,12 @@ function resolveTabsExtra(extra) {
   if (isSlotMap) return extra;
   return { end: extra };
 }
+function resolveTabsAnimated(animated) {
+  if (animated === false) return { inkBar: false, tabPane: false };
+  if (animated === true) return { inkBar: true, tabPane: true };
+  if (animated === void 0) return { inkBar: true, tabPane: false };
+  return { inkBar: animated.inkBar ?? true, tabPane: animated.tabPane ?? false };
+}
 function resolveTabsAxis(tabPlacement, orientation) {
   if (tabPlacement) {
     return {
@@ -57,6 +76,13 @@ function resolveTabsAxis(tabPlacement, orientation) {
     orientation: orientation ?? "horizontal"
   };
 }
+const TABS_PLACEMENT_BREAKPOINT_TOKEN = "--tabs-placement-responsive-breakpoint-width";
+const TABS_PLACEMENT_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
+function foldVerticalPlacement(axis, narrow) {
+  if (!narrow || axis.orientation !== "vertical") return axis;
+  const trailing = axis.placement === "end" || axis.placement === "bottom";
+  return { placement: trailing ? "bottom" : "top", orientation: "horizontal" };
+}
 function Tabs({
   className,
   orientation,
@@ -78,21 +104,32 @@ function Tabs({
   closeIcon,
   onTabClick,
   overflow = "scroll",
+  animated,
+  indicator,
+  moreIcon,
+  onTabScroll,
   listClassName,
   contentClassName,
   children,
   ...props
 }) {
   const { t } = useTranslation();
+  const motion = resolveTabsAnimated(animated);
+  const indicatorSize = indicator?.size ?? "full";
+  const indicatorAlign = indicator?.align ?? "center";
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
-  const { placement, orientation: resolvedOrientation } = resolveTabsAxis(
-    tabPlacement,
-    orientation
+  const narrow = useMaxWidthBreakpoint(
+    TABS_PLACEMENT_BREAKPOINT_TOKEN,
+    TABS_PLACEMENT_BREAKPOINT_FALLBACK_QUERY
+  );
+  const { placement, orientation: resolvedOrientation } = foldVerticalPlacement(
+    resolveTabsAxis(tabPlacement, orientation),
+    narrow
   );
   const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
   const frame = React.useMemo(
-    () => ({ orientation: resolvedOrientation, selectionSuppressed }),
-    [resolvedOrientation, selectionSuppressed]
+    () => ({ orientation: resolvedOrientation, selectionSuppressed, size }),
+    [resolvedOrientation, selectionSuppressed, size]
   );
   const editable = variant === "editable-card";
   const collapsible = items != null && overflow === "menu";
@@ -108,6 +145,7 @@ function Tabs({
     );
   }, []);
   useTabsOverflowValues(listRef, itemValues, handleHiddenChange);
+  useTabsScrollReporter(listRef, resolvedOrientation === "vertical", onTabScroll);
   const [mirroredValue, setMirroredValue] = React.useState(
     value ?? resolvedDefault
   );
@@ -127,11 +165,7 @@ function Tabs({
   const showAdd = editable && !hideAdd && Boolean(onEdit);
   const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
-  const sizeTriggerClassName = cn(
-    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
-    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
-    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
-  );
+  const sizeTriggerClassName = triggerSizeClassName(size);
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
@@ -271,6 +305,10 @@ function Tabs({
       "data-placement": placement,
       "data-size": size,
       "data-centered": centered ? "true" : void 0,
+      "data-animated-ink-bar": motion.inkBar ? "true" : "false",
+      "data-animated-tab-pane": motion.tabPane ? "true" : "false",
+      "data-indicator-size": indicatorSize,
+      "data-indicator-align": indicatorAlign,
       orientation: resolvedOrientation,
       keyboardActivation: activationMode,
       selectedKey: value ?? (collapsible ? mirroredValue : void 0),
@@ -295,7 +333,11 @@ function Tabs({
         "data-variant": variant,
         "data-placement": placement,
         "data-size": size,
-        "data-centered": centered ? "true" : void 0
+        "data-centered": centered ? "true" : void 0,
+        "data-animated-ink-bar": motion.inkBar ? "true" : "false",
+        "data-animated-tab-pane": motion.tabPane ? "true" : "false",
+        "data-indicator-size": indicatorSize,
+        "data-indicator-align": indicatorAlign
       }),
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
         needsBar ? /* @__PURE__ */ jsxs("div", { "data-slot": "tabs-bar", className: "ui-tabs-bar", children: [
@@ -318,7 +360,7 @@ function Tabs({
               {
                 className: "ui-tabs-overflow",
                 "aria-label": t("navigation.tabs.moreTabs"),
-                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
+                children: moreIcon ?? /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
               }
             ),
             /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomEnd", children: overflowItems.map((item) => /* @__PURE__ */ jsx(
@@ -395,7 +437,7 @@ const TabsList = React.forwardRef(
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
   ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
-    const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
+    const { orientation, selectionSuppressed, size } = React.useContext(TabsFrameContext);
     return /* @__PURE__ */ jsx(
       AriaTab,
       {
@@ -422,6 +464,8 @@ const TabsTrigger = React.forwardRef(
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
           "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          // The tier the root was given. Without this the compound form ignored `size` outright.
+          triggerSizeClassName(size),
           className
         ),
         render: (domProps, renderProps) => withDomProps("button", "tabs-trigger", { type: "button", ...props }, domProps, {
@@ -470,7 +514,7 @@ const TabsContent = React.forwardRef(
         ref,
         id: value,
         shouldForceMount: forceMount,
-        className: cn("ui-focus-ring flex-1 outline-none", className),
+        className: cn("ui-focus-ring flex-1", className),
         render: (domProps, renderProps) => withDomProps("div", "tabs-content", props, domProps, {
           // A force-mounted panel whose tab is not selected: Radix marked it `data-state="inactive"`
           // and `hidden`; RAC marks it inert. The state hook is re-emitted so CSS keys the same way.

package/dist/i18n/messages/en.json

@@ -283,6 +283,11 @@
       "dotsLabel": "Choose slide",
       "goToSlide": "Go to slide {index}"
     },
+    "featureList": {
+      "included": "Included",
+      "excluded": "Not included",
+      "limited": "Limited"
+    },
     "listRow": {
       "unread": "Unread",
       "read": "Read"
@@ -341,7 +346,9 @@
     },
     "numberInput": {
       "increment": "Increase",
-      "decrement": "Decrease"
+      "decrement": "Decrease",
+      "incrementField": "Increase {label}",
+      "decrementField": "Decrease {label}"
     }
   },
   "navigation": {
@@ -368,6 +375,7 @@
     },
     "filterBar": {
       "appliedFilters": "Applied filters",
+      "clearFilter": "Clear {label} selection",
       "removeFilter": "Remove filter: {label}",
       "resultCount": {
         "one": "{count} result",
@@ -442,6 +450,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Year / Month / Day (yyyy/MM/dd)",
     "dmy": "Day / Month / Year",
     "mdy": "Month / Day / Year"
   },

package/dist/i18n/messages/ja.json

@@ -276,6 +276,11 @@
       "dotsLabel": "スライドを選択",
       "goToSlide": "{index} 番目のスライドへ"
     },
+    "featureList": {
+      "included": "含む",
+      "excluded": "含まない",
+      "limited": "制限あり"
+    },
     "listRow": {
       "unread": "未読",
       "read": "既読"
@@ -334,7 +339,9 @@
     },
     "numberInput": {
       "increment": "増やす",
-      "decrement": "減らす"
+      "decrement": "減らす",
+      "incrementField": "{label}を増やす",
+      "decrementField": "{label}を減らす"
     }
   },
   "navigation": {
@@ -361,6 +368,7 @@
     },
     "filterBar": {
       "appliedFilters": "適用中のフィルター",
+      "clearFilter": "{label}の選択をクリア",
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
@@ -429,6 +437,7 @@
   },
   "dateFormat": {
     "iso": "YYYY-MM-DD（年-月-日）",
+    "ymd": "YYYY/MM/DD（年/月/日）",
     "dmy": "日/月/年",
     "mdy": "月/日/年"
   },

package/dist/i18n/messages/vi.json

@@ -277,6 +277,11 @@
       "dotsLabel": "Chọn slide",
       "goToSlide": "Đến slide {index}"
     },
+    "featureList": {
+      "included": "Có",
+      "excluded": "Không có",
+      "limited": "Giới hạn"
+    },
     "listRow": {
       "unread": "Chưa đọc",
       "read": "Đã đọc"
@@ -335,7 +340,9 @@
     },
     "numberInput": {
       "increment": "Tăng",
-      "decrement": "Giảm"
+      "decrement": "Giảm",
+      "incrementField": "Tăng {label}",
+      "decrementField": "Giảm {label}"
     }
   },
   "navigation": {
@@ -362,6 +369,7 @@
     },
     "filterBar": {
       "appliedFilters": "Bộ lọc đang áp dụng",
+      "clearFilter": "Xóa lựa chọn {label}",
       "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
@@ -430,6 +438,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Năm / Tháng / Ngày (yyyy/MM/dd)",
     "dmy": "Ngày / Tháng / Năm",
     "mdy": "Tháng / Ngày / Năm"
   },

package/dist/lib/breakpoint-token.d.ts

@@ -0,0 +1,8 @@
+/**
+ * True while the viewport is at or below the width the theme token `token` names.
+ *
+ * The token is read once per mount rather than at module scope: the fallback is what SSR and the
+ * first client render agree on, and the themed value arrives in the effect. Same-value updates
+ * bail out inside React, so a theme that left the default alone re-renders nothing.
+ */
+export declare function useMaxWidthBreakpoint(token: string, fallbackQuery: string): boolean;

package/dist/lib/breakpoint-token.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+import { useMediaQuery } from "./hooks.js";
+function cssLengthToPx(value, rootFontSize) {
+  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
+  if (match == null) return void 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return void 0;
+  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
+}
+function readMaxWidthQuery(token, fallbackQuery) {
+  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
+    return fallbackQuery;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
+  const px = cssLengthToPx(rootStyle.getPropertyValue(token), rootFontSize);
+  return px == null ? fallbackQuery : `(max-width: ${String(px)}px)`;
+}
+function useMaxWidthBreakpoint(token, fallbackQuery) {
+  const [query, setQuery] = React.useState(fallbackQuery);
+  React.useEffect(() => {
+    setQuery(readMaxWidthQuery(token, fallbackQuery));
+  }, [token, fallbackQuery]);
+  return useMediaQuery(query);
+}
+export {
+  useMaxWidthBreakpoint
+};

package/dist/props/components/data-display.prop.d.ts

@@ -28,7 +28,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -47,6 +47,99 @@ export type LegendProp = Omit<React.HTMLAttributes<HTMLUListElement>, "children"
     items: LegendItemProp[];
     className?: ClassNameProp;
 };
+/**
+ * @see Swatch — a READ-ONLY sample of ONE colour a person chose.
+ *
+ * ## Why it is not a Legend, a ColorPicker or a Badge
+ *
+ * `Legend` is a KEY: a closed set of semantic TONES, each with required words beside it, because
+ * there the colour stands FOR something. Here the colour IS the content — a brand's
+ * `primary_color`, a calendar category, a label a user tinted — so there is no tone it maps to and
+ * no second thing for a word to name. `ColorPicker` is the INPUT for the same value, and rendering
+ * a disabled input to display one reads as a control that broke. `Badge` is a chip: tinted fill,
+ * border, clickable affordance — not a sample of the exact colour.
+ *
+ * Its mark is the same square Legend draws, one type step larger, because it stands beside a name
+ * rather than inside an 11px key.
+ */
+export type SwatchProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /**
+     * The colour to show, as a CSS colour VALUE — `#7C3AED`, `rgb(…)`, `oklch(…)`. It is DATA the
+     * same way `Badge`'s `color` is: a value a person picked in a settings screen, so it arrives as
+     * a prop and is never written into a stylesheet. Passing a semantic token's own colour here is
+     * the one thing to avoid — a tone that MEANS something belongs on a component that names the
+     * meaning (`Badge tone`, `Legend`), not on a sample.
+     */
+    color: string;
+    /**
+     * The accessible NAME of the sample, and the reason this component can exist without a visible
+     * label. Say what the colour is FOR and what it is: `aria-label={`${t.primaryColor}: ${hex}`}`.
+     *
+     * With it, the swatch is a `role="img"` that announces that sentence. Without it the swatch is
+     * `aria-hidden` — correct, and the only correct option, when a visible line beside it already
+     * states the colour. Either way colour is never the sole carrier of the meaning (WCAG 1.4.1);
+     * what is NOT offered is a third path where it is.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Whether a `FeatureList` line is in, out, or in with a limit.
+ *
+ * Three members and no fourth: the axis is INCLUSION, and a list that also carried "coming soon",
+ * "beta" or "deprecated" would be encoding a roadmap on the same glyph column as a fact about
+ * today. Those are a `Badge` beside the label, which is content the screen already owns.
+ */
+export type FeatureStateProp = "included" | "excluded" | "limited";
+/**
+ * One line of a `FeatureList`: what state it is in, what it is called, and — optionally — a
+ * sentence about it that WRAPS.
+ *
+ * There is deliberately no field for a quantity ("10,000 req/mo"). Composing it into `label` as
+ * `<>API calls <Text tone="muted" tabular>10,000 req/mo</Text></>` is already legal and already
+ * audit-clean, so a prop for it would fail question 1 of docs/WHAT-BELONGS-HERE.md — the consumer
+ * has a move. What the consumer did NOT have a move for is the glyph column and its alignment,
+ * which is what this component owns.
+ */
+export type FeatureItemProp = {
+    /** In, out, or in with a limit. Drives the glyph, its mark colour and the `sr-only` prefix. */
+    state: FeatureStateProp;
+    /** What the line is about. Wraps. */
+    label: LabelProp;
+    /** An optional muted sentence under the label. Wraps; long unbroken tokens break. */
+    description?: DescriptionProp;
+};
+/**
+ * @see FeatureList — a list of statements, each with a leading state glyph: what a plan includes,
+ * what a tier supports, which requirements a submission met.
+ */
+export type FeatureListProp = Omit<React.HTMLAttributes<HTMLUListElement>, "children"> & {
+    items: FeatureItemProp[];
+    className?: ClassNameProp;
+};
+/**
+ * Fixed BLOCK size of a `Thumbnail`; the inline size stays intrinsic.
+ *
+ * A subset of the shared `SizeProp` ladder — `xs` is off the bottom because a 48px frame with a
+ * 1px hairline is a favicon, not a thumbnail, and nothing in the reported cases wanted one.
+ */
+export type ThumbnailSizeProp = Extract<SizeProp, "sm" | "md" | "lg">;
+/**
+ * @see Thumbnail — a framed image at a FIXED HEIGHT and its own intrinsic width, for a wrapping
+ * row of pictures whose aspect ratios differ.
+ */
+export type ThumbnailProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
+    /** Image URL. */
+    src: string;
+    /**
+     * Required, with no way to omit it. Pass `""` for a picture that carries no information the
+     * page does not already say — the empty string is a DECISION the author has to make, where a
+     * missing attribute is an omission nobody notices (WCAG 1.1.1).
+     */
+    alt: string;
+    /** Frame height. Default `md`. The width follows the picture's own ratio. */
+    size?: ThumbnailSizeProp;
+    className?: ClassNameProp;
+};
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -255,6 +348,13 @@ export type DataTableProp<T> = {
     data: T[];
     columns: ColumnDefProp<T>[];
     getRowId?: GetRowIdProp<T>;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort. `rowSelection.getCheckboxProps`
+     * `aria-label` still overrides a single row.
+     */
+    getRowLabel?: GetRowLabelProp<T>;
     selectable?: boolean;
     selected?: SelectedIdsProp;
     onSelectChange?: OnSelectChangeProp;

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

@@ -1,7 +1,7 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
 import type { QueryErrorCategory } from "../../lib/query-error.js";
-import type { AlertVariantProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ToneProp, TitleProp } from "../vocabulary/index.js";
+import type { AlertVariantProp, AvatarShapeProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /** @see AlertDialog */
 export type AlertDialogProp = {
     open: OpenProp;
@@ -83,3 +83,87 @@ export type SkeletonRowsProp = {
     rows?: number;
     columns?: number;
 };
+/**
+ * A skeleton line's MEASURE. `number` is read as pixels, matching antd's
+ * `SkeletonParagraphProps["width"]` (components/skeleton/Paragraph.tsx); a string is any CSS length
+ * or percentage. It reaches the DOM as the `--skeleton-line-width` custom property rather than a
+ * raw `width`, so the line still resolves its own block size and radius from the token tier.
+ */
+export type SkeletonWidth = number | string;
+/**
+ * @see Skeleton — the placeholder BLOCK. Both fields are antd's, ported onto the block this
+ * library already shipped rather than onto a second component beside it.
+ */
+export type SkeletonProp = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Swap the resting pulse for the travelling SHEEN (antd's `active`). antd's non-active skeleton
+     * is fully static; this library's block has always pulsed, so the default is left alone and
+     * `active` selects the louder of the two motions instead of turning motion on.
+     */
+    active?: boolean;
+    /**
+     * `false` renders `children` in place of the placeholder. An OMITTED `loading` still renders the
+     * placeholder — antd's `loading || !("loading" in props)`.
+     */
+    loading?: boolean;
+};
+/** @see SkeletonAvatar */
+export type SkeletonAvatarProp = {
+    /** Box, from the `--control-height` tier — the same tier the real `Avatar` sizes from. */
+    size?: SizeProp;
+    shape?: AvatarShapeProp;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonButton */
+export type SkeletonButtonProp = {
+    size?: SizeProp;
+    /** Corner, in `Button`'s own vocabulary: `pill` is antd's `shape="round"`. */
+    shape?: ShapeProp;
+    /** Fill the inline axis, for a button that spans its column (antd's `block`). */
+    block?: boolean;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonInput */
+export type SkeletonInputProp = {
+    size?: SizeProp;
+    block?: boolean;
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/** @see SkeletonNode — a square standing in for a media/custom slot; `children` centres in it. */
+export type SkeletonNodeProp = {
+    active?: boolean;
+    children?: ChildrenProp;
+    className?: ClassNameProp;
+};
+/** @see SkeletonImage */
+export type SkeletonImageProp = {
+    active?: boolean;
+    className?: ClassNameProp;
+};
+/**
+ * @see SkeletonArticle — antd's own `<Skeleton>` shape (avatar + title + paragraph). It is a
+ * SIBLING of `Skeleton`, not a replacement: `Skeleton` here is the block antd spells
+ * `Skeleton.Node`, and re-pointing it at the article would change what every existing call site
+ * renders.
+ */
+export type SkeletonArticleProp = {
+    avatar?: boolean | Pick<SkeletonAvatarProp, "size" | "shape">;
+    /** The heading line. NOT a string title — `false` drops the line, `{ width }` re-measures it. */
+    title?: boolean | {
+        width?: SkeletonWidth;
+    };
+    /** `width` as an array measures each row; as a single value it measures the LAST row. */
+    paragraph?: boolean | {
+        rows?: number;
+        width?: SkeletonWidth | SkeletonWidth[];
+    };
+    /** Pill corners on every line (antd's `round`, whose capsule radius is `--radius-pill` here). */
+    round?: boolean;
+    active?: boolean;
+    loading?: boolean;
+    children?: ChildrenProp;
+    className?: ClassNameProp;
+};

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;
 };