@godxjp/ui 28.9.0 → 28.12.0

package/dist/lib/image-loading-status.js

@@ -0,0 +1,41 @@
+"use client";
+import { useLayoutEffect } from "@react-aria/utils";
+function getImageLoadingStatus(image) {
+  if (!image.complete) {
+    return "loading";
+  }
+  return image.naturalWidth > 0 ? "loaded" : "error";
+}
+function useImageLoadingStatus(src, {
+  loadingStatus,
+  setLoadingStatus,
+  referrerPolicy,
+  crossOrigin
+}) {
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus("error");
+      return;
+    }
+    const image = new window.Image();
+    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
+    const handleError = () => setLoadingStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    image.crossOrigin = crossOrigin ?? null;
+    image.src = src;
+    setLoadingStatus(getImageLoadingStatus(image));
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+      setLoadingStatus("idle");
+    };
+  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
+  return loadingStatus;
+}
+export {
+  useImageLoadingStatus
+};

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

@@ -157,9 +157,28 @@ export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"
     prefix?: React.ReactNode;
     /** antd `suffix` — content pinned INSIDE the end of the field (%, 円, a hint glyph). */
     suffix?: React.ReactNode;
-    /** antd `addonBefore` — a segment welded OUTSIDE the start of the box (`https://`, a currency). */
+    /**
+     * antd `addonBefore` — a LABEL segment welded OUTSIDE the start of the box (`https://`, a
+     * currency code, a unit). For a glyph, use `prefix`: it sits INSIDE the field, so there is one
+     * box, one border and no seam to get wrong.
+     *
+     * KEPT, NOT DEPRECATED — the verdict gh#841 asked for, so the next reviewer does not re-litigate
+     * it. Verified in `ant-design@master`, not on the docs page: `components/input/Input.tsx` marks
+     * both addons `@deprecated Use Space.Compact instead` on the type AND fires a dev-time
+     * `devUseWarning('Input').deprecated(…)` for each, while still rendering them; both locale docs
+     * strike the rows through and the `addon` demo is flagged `debug`, i.e. hidden from the
+     * published page. So the deprecation is real, and it is a REFACTOR onto `Space.Compact` —
+     * a component this library does not have. Deprecating a prop whose replacement does not exist
+     * would leave the joined control with no supported spelling at all, and removing a public prop
+     * is breaking. `Input addonBefore` IS this library's joined control: it renders the
+     * `.ui-input-group` that squares the seam (gh#841). If a `Space`/compact primitive is ever
+     * ported, revisit this line — the antd steer is then followable and this becomes a migration.
+     */
     addonBefore?: React.ReactNode;
-    /** antd `addonAfter` — a segment welded OUTSIDE the end of the box (`.com`, a unit, a button). */
+    /**
+     * antd `addonAfter` — a segment welded OUTSIDE the end of the box (`.com`, a unit, a button).
+     * Deprecated upstream alongside `addonBefore`, and kept for the reason written there.
+     */
     addonAfter?: React.ReactNode;
     /** Character counter — antd `count`. */
     count?: ControlCountProp;

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

@@ -126,6 +126,16 @@ export type FlexDirectionProp = "row" | "col";
 export type FlexMarkerProp = "disc" | "decimal" | "none";
 export type FlexAlignProp = "start" | "center" | "end" | "stretch" | "baseline";
 export type FlexJustifyProp = "start" | "center" | "end" | "between" | "around" | "evenly";
+/**
+ * The bounded inline MEASURE of a centred column, named for the `--page-measure-*` token it reads
+ * — the same three words `PageContainer measure` uses, plus the marketing step that has no
+ * `PageContainer` branch (gh#839).
+ *
+ * It is the token family, not a new one: `narrow` (42rem) and `medium` (48rem) bracket
+ * Bringhurst's 45–75 character reading band, `wide` (72rem) is the MARKETING measure. Do not give
+ * a reading column `wide` — that rule is `--page-measure-wide`'s own, and it travels with the word.
+ */
+export type FlexMeasureProp = "narrow" | "medium" | "wide";
 /** @see Flex */
 export type FlexProp = React.HTMLAttributes<HTMLElement> & {
     /**
@@ -295,6 +305,38 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      * call site đều ĐẾM ĐƯỢC, nên một kho đang trôi khỏi thang tự lộ ra bằng con số.
      */
     width?: WidthProp;
+    /**
+     * CENTRE this box and CAP it at a page measure — the inner half of "full-bleed outside, measured
+     * column inside" (gh#839).
+     *
+     * ## Why it is here and not on `PageContainer`
+     *
+     * `--page-measure-wide` shipped in 28.8.0 with no prop that reads it, and `PageContainer
+     * measure="wide"` was deliberately refused: a marketing page is a stack of full-bleed
+     * `<section>`s, and `PageContainer` owns page padding plus a header/toolbar/footer scaffold, so
+     * the pages that are the prop's proof could not have consumed it. That reasoning holds and is
+     * not reopened here. What it left behind is that NOTHING owned the centred inner column, and
+     * three unrelated pages each hand-wrote the same four declarations for it —
+     * `docs/showcase/marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as
+     * `.tx-shell` and `futurelastic-web.tsx` as `.fl-shell`. By `docs/TOKENS.md` a shape that
+     * appears in more than one place is tier 1.
+     *
+     * ## What it does, and what it deliberately does NOT
+     *
+     * `margin-inline: auto` + `inline-size: 100%` + `max-inline-size: var(--page-measure-{value})`.
+     * It does **not** add a gutter: the page inset is `pad={{ inline: 6 }}`, which already exists,
+     * and two owners for one padding is how a measure and a gutter drift apart. It is a MAX, so
+     * below the cap the box is fluid and nothing binds at 390px.
+     *
+     * An explicit `width` wins (it lands in the style attribute), which is the right order: a fixed
+     * column is a stronger statement than a cap.
+     *
+     * ## When NOT to reach for it
+     *
+     * Inside a `Card`, a `Dialog` or any surface that already owns its measure. This is PAGE
+     * geometry; a Flex that is a row of controls has no business carrying it.
+     */
+    measure?: FlexMeasureProp;
 };
 /** Container column counts; omitted steps inherit from the previous step. Base defaults to 1. */
 export type ResponsiveGridColumnsProp = number | {

package/dist/props/registry.d.ts

@@ -786,6 +786,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly FlexMeasureProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly FlexProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -821,6 +826,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "hideFrom";
             readonly local: true;
             readonly reason: "Inverse of hideBelow — keeps a compact-only region off the wide layout.";
+        }, {
+            readonly field: "measure";
+            readonly local: true;
+            readonly reason: 'The CENTRED, CAPPED column (narrow | medium | wide), backed by --page-measure-* — the inner half of "full-bleed outside, measured column inside" (gh#839). Same word and same three token steps as PageContainer `measure`, on the primitive a full-bleed <section> can actually use: PageContainer owns page padding and a header scaffold, which is why measure="wide" was refused there, and the refusal left the centred column with no owner at all — three showcases hand-wrote the same four declarations. It adds NO gutter (that is `pad`), and an explicit `width` wins over it.';
         }];
     };
     readonly ResponsiveGridFlowProp: {
@@ -3161,7 +3170,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ServiceLauncherCardProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/service-launcher-card.tsx";
-        readonly vocabulary: readonly ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp"];
+        readonly vocabulary: readonly ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp", {
+            readonly field: "logo";
+            readonly local: true;
+            readonly reason: "URL of the service's OWN uploaded mark, distinct from `icon` (the LucideIcon for its kind) and deliberately NOT folded into it: `icon` is the fallback the tile needs when the upload 404s or does not exist yet, so the two cannot be one prop. A `string` URL rather than a ReactNode because the medallion owns the box, the object-fit and the decode hint (gh#850).";
+        }];
     };
     readonly ServiceCatalogCtaProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -795,6 +795,7 @@ const COMPONENT_PROP_REGISTRY = {
   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: [] },
+  FlexMeasureProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -824,6 +825,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "hideFrom",
         local: true,
         reason: "Inverse of hideBelow \u2014 keeps a compact-only region off the wide layout."
+      },
+      {
+        field: "measure",
+        local: true,
+        reason: 'The CENTRED, CAPPED column (narrow | medium | wide), backed by --page-measure-* \u2014 the inner half of "full-bleed outside, measured column inside" (gh#839). Same word and same three token steps as PageContainer `measure`, on the primitive a full-bleed <section> can actually use: PageContainer owns page padding and a header scaffold, which is why measure="wide" was refused there, and the refusal left the centred column with no owner at all \u2014 three showcases hand-wrote the same four declarations. It adds NO gutter (that is `pad`), and an explicit `width` wins over it.'
       }
     ]
   },
@@ -3757,7 +3763,18 @@ const COMPONENT_PROP_REGISTRY = {
   ServiceLauncherCardProp: {
     group: "data-display",
     file: "components/data-display/service-launcher-card.tsx",
-    vocabulary: ["TitleProp", "ToneProp", "IconProp", "ClassNameProp", "DisabledProp"]
+    vocabulary: [
+      "TitleProp",
+      "ToneProp",
+      "IconProp",
+      "ClassNameProp",
+      "DisabledProp",
+      {
+        field: "logo",
+        local: true,
+        reason: "URL of the service's OWN uploaded mark, distinct from `icon` (the LucideIcon for its kind) and deliberately NOT folded into it: `icon` is the fallback the tile needs when the upload 404s or does not exist yet, so the two cannot be one prop. A `string` URL rather than a ReactNode because the medallion owns the box, the object-fit and the decode hint (gh#850)."
+      }
+    ]
   },
   ServiceCatalogCtaProp: {
     group: "data-display",

package/dist/styles/card-layout.css

@@ -264,13 +264,13 @@
     padding-bottom: var(--card-space-body-y);
   }
 
-  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-action"])
-    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
+  [data-slot="card-header"]:has([data-slot="card-action"])
+    + [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: 0;
   }
 
-  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-description"])
-    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
+  [data-slot="card-header"]:has([data-slot="card-description"])
+    + [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: var(--card-space-body-y);
   }
 
@@ -574,6 +574,12 @@
     height: var(--card-service-launcher-icon-glyph-size);
   }
 
+  [data-slot="service-launcher-logo"] {
+    width: var(--card-service-launcher-icon-glyph-size);
+    height: var(--card-service-launcher-icon-glyph-size);
+    object-fit: contain;
+  }
+
   [data-slot="service-launcher-identity"] {
     display: flex;
     min-width: 0;

package/dist/styles/control.css

@@ -560,7 +560,9 @@
 
   .ui-switch-thumb {
     pointer-events: none;
-    display: block;
+
+    display: grid;
+    place-items: center;
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
     border-radius: var(--radius-pill);
@@ -1158,7 +1160,7 @@
     align-items: stretch;
     padding: var(--segmented-track-padding);
     border-radius: var(--segmented-track-radius);
-    background: hsl(var(--segmented-track-background));
+    background: hsl(var(--segmented-track-background, var(--muted)));
     color: hsl(var(--segmented-item-color));
     font-size: var(--font-size-base);
   }
@@ -1194,9 +1196,14 @@
   }
 
   .ui-segmented-item[data-state="checked"] {
-    background: hsl(var(--segmented-item-selected-background));
-    box-shadow: var(--segmented-item-selected-shadow);
+    background: hsl(var(--segmented-item-selected-background, var(--background)));
+
+    box-shadow:
+      var(--segmented-item-selected-shadow),
+      inset 0 0 0 1px hsl(var(--segmented-item-selected-border-color, var(--input)));
     color: hsl(var(--segmented-item-selected-color));
+
+    font-weight: var(--segmented-item-selected-font-weight);
   }
 
   .ui-segmented-item[data-disabled] {
@@ -1332,6 +1339,13 @@
     cursor: pointer;
   }
 
+  .ui-toggle > svg,
+  .ui-control-trigger > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-control-trigger:disabled,
   .ui-control-trigger[data-disabled] {
     cursor: not-allowed;
@@ -2102,6 +2116,13 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-input-leading > svg,
+  .ui-input-trailing > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-trailing {
     inset-inline-end: var(--control-inline-affix-inset-inline);
   }
@@ -2873,6 +2894,12 @@
     white-space: nowrap;
   }
 
+  .ui-input-addon > svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    flex-shrink: 0;
+  }
+
   .ui-input-group > [data-slot="input-addon-before"] {
     border-start-start-radius: var(--control-radius);
     border-end-start-radius: var(--control-radius);
@@ -2887,12 +2914,14 @@
 
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input-affix-wrapper {
+    --input-radius-start: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input,
   .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input-affix-wrapper {
+    --input-radius-end: 0;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }

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

@@ -1232,7 +1232,7 @@
 
   .ui-prose :is(th, td) {
     border: var(--stroke-hairline) solid hsl(var(--border));
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: top;
   }

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

@@ -1,7 +1,250 @@
 @layer components {
 
-  .ui-attachments-input {
-    min-block-size: var(--touch-target-min);
+  .ui-attachments {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .ui-attachments-list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--attachments-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-attachments-list > li {
+    position: relative;
+    display: flex;
+    flex: none;
+    min-inline-size: 0;
+  }
+
+  .ui-attachments-list[data-overflow="wrap"] {
+    flex-wrap: wrap;
+  }
+
+  .ui-attachments-list[data-overflow="scrollX"] {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .ui-attachments-list[data-overflow="scrollY"] {
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-block-size: var(--attachments-card-block-size);
+  }
+
+  .ui-attachments-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--attachments-card-gap);
+    inline-size: var(--attachments-card-size);
+
+    max-inline-size: 100%;
+    block-size: var(--attachments-card-block-size);
+    padding-block: var(--space-3);
+    padding-inline: var(--space-4);
+    border: var(--stroke-hairline) solid transparent;
+    border-radius: var(--attachments-card-radius);
+    background-color: hsl(var(--muted));
+    overflow: hidden;
+  }
+
+  .ui-attachments-card-preview,
+  .ui-attachments-card-placeholder {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon-size-2xl);
+    block-size: var(--icon-size-2xl);
+  }
+
+  .ui-attachments-card-preview {
+    border-radius: var(--radius-md);
+    object-fit: cover;
+  }
+
+  .ui-attachments-card-placeholder {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-card-placeholder > svg {
+    inline-size: var(--icon-size-2xl);
+    block-size: var(--icon-size-2xl);
+  }
+
+  .ui-attachments-card-content {
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .ui-attachments-card-name {
+    display: flex;
+    max-inline-size: 100%;
+    font-size: var(--font-size-base);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-attachments-card-name-prefix {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-attachments-card-name-suffix {
+    flex: none;
+  }
+
+  .ui-attachments-card-meta {
+    overflow: hidden;
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    color: hsl(var(--muted-foreground));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-attachments-card[data-status="error"] {
+    border-color: hsl(var(--text-error));
+  }
+
+  .ui-attachments-card[data-status="error"] .ui-attachments-card-meta {
+    color: hsl(var(--text-error));
+  }
+
+  .ui-attachments-card-progress {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: block;
+  }
+
+  .ui-attachments-card-remove {
+    flex: none;
+  }
+
+  .ui-attachments-card-remove > svg {
+    inline-size: var(--attachments-remove-icon-size);
+    block-size: var(--attachments-remove-icon-size);
+  }
+
+  .ui-attachments-upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: var(--attachments-card-block-size);
+    block-size: var(--attachments-card-block-size);
+    border: var(--stroke-hairline) dashed hsl(var(--border));
+    border-radius: var(--attachments-card-radius);
+    background-color: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+
+  .ui-attachments-upload-btn:hover:not(:disabled) {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+  }
+
+  .ui-attachments-upload-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ui-attachments-upload-btn > svg {
+    inline-size: var(--icon-size-xl);
+    block-size: var(--icon-size-xl);
+  }
+
+  .ui-attachments-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--attachments-placeholder-gap);
+    padding: var(--attachments-placeholder-space-inset);
+    border: var(--stroke-md) dashed hsl(var(--border));
+    border-radius: var(--attachments-placeholder-radius);
+    background-color: hsl(var(--muted) / 0.4);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      background-color 150ms ease;
+  }
+
+  .ui-attachments-placeholder[data-drag-active="true"] {
+    border-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / 0.05);
+  }
+
+  .ui-attachments-placeholder:not([data-drag-active="true"]):hover {
+    border-color: hsl(var(--primary) / 0.5);
+  }
+
+  .ui-attachments-placeholder[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.25;
+    pointer-events: none;
+  }
+
+  .ui-attachments-placeholder-icon {
+    display: flex;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-placeholder-icon > svg {
+    inline-size: var(--attachments-placeholder-icon-size);
+    block-size: var(--attachments-placeholder-icon-size);
+  }
+
+  .ui-attachments-placeholder-title {
+    font-size: var(--attachments-placeholder-title-font-size);
+    font-weight: var(--font-weight-medium);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-attachments-placeholder-description {
+    font-size: var(--attachments-placeholder-description-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-attachments-drop-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border: var(--stroke-md) dashed hsl(var(--primary));
+    border-radius: var(--attachments-placeholder-radius);
+    background: var(
+      --attachments-drop-overlay-background,
+      color-mix(in srgb, hsl(var(--background)) 85%, transparent)
+    );
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .ui-attachments-drop-layer[data-active="true"] {
+    opacity: 1;
+    backdrop-filter: blur(10px);
+  }
+
+  .ui-attachments-drop-layer[data-scope="viewport"] {
+    position: fixed;
   }
 
   .ui-combobox-content {

package/dist/styles/layout.css

@@ -142,6 +142,23 @@
     flex: none;
   }
 
+  .ui-flex[data-measure] {
+    margin-inline: auto;
+    inline-size: 100%;
+  }
+
+  .ui-flex[data-measure="narrow"] {
+    max-inline-size: var(--page-measure-narrow);
+  }
+
+  .ui-flex[data-measure="medium"] {
+    max-inline-size: var(--page-measure-medium);
+  }
+
+  .ui-flex[data-measure="wide"] {
+    max-inline-size: var(--page-measure-wide);
+  }
+
   .ui-flex[data-align="start"] {
     align-items: flex-start;
   }

package/dist/styles/navigation-layout.css

@@ -441,7 +441,9 @@
   }
 
   .ui-pagination .ui-button svg,
-  .ui-pagination .ui-pagination-link svg {
+  .ui-pagination .ui-pagination-link svg,
+
+  .ui-pagination .ui-pagination-ellipsis svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }

package/dist/styles/shell-layout.css

@@ -1741,6 +1741,8 @@
   .sb-nav-group-trigger .sb-chevron {
     margin-inline-start: auto;
     flex: 0 0 auto;
+    inline-size: var(--sidebar-nav-icon-size);
+    block-size: var(--sidebar-nav-icon-size);
     opacity: 0.6;
     transition: transform 150ms ease;
   }