@godxjp/ui 19.4.2 → 19.6.0

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

@@ -631,6 +631,25 @@ export type SidebarItemProp = {
     /** Nested rows — renders a collapsible submenu group (the parent reads active when any child is). */
     children?: SidebarItemProp[];
 };
+/**
+ * A vertical route navigation that lives INSIDE a page, not in the shell (gh#374).
+ *
+ * Reuses `SidebarItemProp` and `SidebarLinkComponentProp` verbatim rather than minting a parallel
+ * vocabulary: the row is the same row, so a service that learnt the rail's item shape does not
+ * learn a second one, and a fix to the row reaches both.
+ */
+export type NavListProp = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
+    /** Rows, in reading order. `icon` is required by `SidebarItemProp` — the label aligns to it. */
+    items: SidebarItemProp[];
+    /** `SidebarItemProp.id` of the current route; that row gets `aria-current="page"`. */
+    activeId?: string;
+    /** Accessible name for the `<nav>` landmark. Required: a page may hold more than one. */
+    label: string;
+    /** Router link component — same contract as `Sidebar.linkComponent`. */
+    linkComponent?: SidebarLinkComponentProp;
+    /** Reports the activated row's id, for consumers driving navigation themselves. */
+    onSelect?: (id: string) => void;
+};
 /** @see Sidebar */
 export type SidebarItemData = SidebarItemProp;
 /**
@@ -654,8 +673,15 @@ export type SidebarLinkProp = {
     "aria-label"?: string;
     /** `"menuitem"` inside the collapsed rail's portaled flyout menu; absent for ordinary rows. */
     role?: "menuitem";
-    /** Reports selection to `Sidebar.onSelect` after the router link runs its own handler. */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Reports selection to `Sidebar.onSelect` after the router link runs its own handler.
+     *
+     * Typed on `Element`, NOT `HTMLElement`. Handler parameters are contravariant, so a link
+     * component that accepts the wider `MouseEvent<Element>` — Inertia's `<Link>`, react-router's,
+     * TanStack's — cannot receive a prop narrowed to `HTMLElement`, and the anchor-safe contract
+     * this type promises would only hold behind a cast at every call site.
+     */
+    onClick?: React.MouseEventHandler<Element>;
 };
 /**
  * A framework router link component driven by {@link SidebarLinkProp} — Inertia's `<Link href>`,
@@ -809,6 +835,26 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     /** Escape hatch — render fully custom bar content instead of the three slots. */
     children?: ReactNode;
 };
+/**
+ * @see TopbarItem — ONE interactive cell of a {@link TopbarProp} slot: the account button, a
+ * settings trigger, a notifications bell.
+ *
+ * It exists because the alternative is a `Button`, and a Button in a bar is a control that landed
+ * in the bar rather than a part of it — a pill of its own height floating in a taller strip, with
+ * its own hover surface and its own focus ring drawn around that pill. Fluent, SLDS, Atlassian and
+ * antd's ProLayout all draw a top-bar trigger the other way: the cell is as tall as the bar, its
+ * hover is the bar's own surface, and the focus mark is hosted INSIDE the cell because a
+ * full-bleed cell has nothing outside itself to ring.
+ */
+export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /**
+     * Render the bar-cell shape ONTO the child instead of emitting a `<button>` — for a router link,
+     * or for a menu/popover trigger that needs to own the element itself.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    className?: ClassNameProp;
+};
 /**
  * @see LegalDocumentShell — one entry of the table of contents + the matching document section.
  * `id` is the REAL anchor target (`href="#{id}"`, `<section id>`), so it must be unique on the page

package/dist/props/registry.d.ts

@@ -927,6 +927,20 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp"];
     };
+    readonly TopbarItemProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", {
+            readonly field: "asChild";
+            readonly local: true;
+            readonly reason: "Radix Slot passthrough — merges onto the child";
+        }];
+    };
+    readonly NavListProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["IdProp", "ClassNameProp"];
+    };
     readonly ButtonProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
@@ -1734,6 +1748,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/ui/rating.tsx";
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp"];
     };
+    readonly SegmentedProp: {
+        readonly group: "data-entry";
+        readonly file: "components/ui/segmented.tsx";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "NameProp", "IdProp", "ClassNameProp"];
+    };
     readonly TagInputProp: {
         readonly group: "data-entry";
         readonly file: "components/ui/tag-input.tsx";

package/dist/props/registry.js

@@ -1020,6 +1020,20 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["ChildrenProp"]
   },
+  TopbarItemProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "ChildrenProp",
+      "ClassNameProp",
+      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" }
+    ]
+  },
+  NavListProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["IdProp", "ClassNameProp"]
+  },
   ButtonProp: {
     group: "general",
     file: "components/general.prop.ts",
@@ -1938,6 +1952,19 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/ui/rating.tsx",
     vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "ClassNameProp"]
   },
+  SegmentedProp: {
+    group: "data-entry",
+    file: "components/ui/segmented.tsx",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "NameProp",
+      "IdProp",
+      "ClassNameProp"
+    ]
+  },
   TagInputProp: {
     group: "data-entry",
     file: "components/ui/tag-input.tsx",

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

@@ -62,5 +62,14 @@ export type FlushProp = boolean;
  * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).
  */
 export type WidthProp = number | string;
-/** How a control sizes on the inline axis: fill its column, or hug its label. */
-export type ControlWidthProp = "full" | "auto";
+/**
+ * How a control sizes on the inline axis: fill its column, hug its label, or sit at a bounded
+ * width the theme owns.
+ *
+ * `bounded` exists because neither of the other two is right for a control whose VALUE varies in
+ * length — an organization switcher in a shell top bar is the canonical case. `full` swallows the
+ * bar; `auto` makes the bar reflow every time the selected value changes length. `bounded` reads
+ * `--control-bounded-width`, so the width is a knob rather than geometry hand-written at the call
+ * site (gh#375).
+ */
+export type ControlWidthProp = "full" | "auto" | "bounded";

package/dist/styles/alert-layout.css

@@ -191,6 +191,10 @@
     block-size: var(--toast-icon-size);
   }
 
+  [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * {
+    visibility: hidden;
+  }
+
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius);
     background: var(--skeleton-background, hsl(var(--muted)));

package/dist/styles/base.css

@@ -1,6 +1,8 @@
 
 @import "tailwindcss";
 
+@import "tw-animate-css";
+
 @layer godxjp-ui-responsive;
 
 [lang="ja"] {

package/dist/styles/control.css

@@ -106,7 +106,7 @@
   }
 
   .ui-button--default:hover {
-    background: hsl(var(--primary) / 0.9);
+    background: hsl(var(--primary-hover));
   }
 
   .ui-button--destructive {
@@ -550,7 +550,8 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     border-radius: var(--control-radius);
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
@@ -823,33 +824,28 @@
   .ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
     box-shadow: none;
   }
+
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    border-color: hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    border-color: hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) {
+    --focus-ring-color: var(--destructive);
   }
   .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
     .ui-otp-group[data-appearance="grouped"] {
     border-color: hsl(var(--destructive));
   }
-  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
-    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-  }
   .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
     background: hsl(var(--muted));
   }
+
   .ui-otp-slot[data-active="true"] {
     z-index: 1;
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
   }
   .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
     border-color: hsl(var(--destructive));
   }
-  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot[data-active="true"] {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-  }
   .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
     cursor: not-allowed;
     background: hsl(var(--muted));
@@ -917,6 +913,73 @@
     border-radius: var(--radius-sm);
   }
 
+  .ui-segmented {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: stretch;
+    padding: var(--segmented-track-padding);
+    border-radius: var(--segmented-track-radius);
+    background: hsl(var(--segmented-track-background));
+    color: hsl(var(--segmented-item-color));
+    font-size: var(--font-size-base);
+  }
+
+  .ui-segmented-item {
+    display: inline-flex;
+    min-width: 0;
+    height: var(--segmented-item-height);
+    align-items: center;
+    justify-content: center;
+    gap: var(--segmented-item-gap);
+    padding-inline: var(--segmented-item-padding-inline);
+    border: 0;
+    border-radius: var(--segmented-item-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    font: inherit;
+    white-space: nowrap;
+
+    transition: color var(--duration-fast);
+  }
+
+  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):hover {
+    background: hsl(var(--segmented-item-hover-background));
+    color: hsl(var(--segmented-item-hover-color));
+  }
+  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):active {
+    background: hsl(var(--segmented-item-active-background));
+  }
+
+  .ui-segmented-item[data-state="checked"] {
+    background: hsl(var(--segmented-item-selected-background));
+    box-shadow: var(--segmented-item-selected-shadow);
+    color: hsl(var(--segmented-item-selected-color));
+  }
+
+  .ui-segmented-item[data-disabled] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-segmented-item-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ui-segmented-item-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+  .ui-segmented-item-icon > svg {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+    display: inline-block;
+    vertical-align: middle;
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;
@@ -1008,6 +1071,11 @@
     cursor: not-allowed;
   }
 
+  .ui-control-trigger[data-width="bounded"] {
+    inline-size: var(--control-bounded-width);
+    max-inline-size: 100%;
+  }
+
   .ui-control[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }
@@ -1112,16 +1180,16 @@
   }
 
   .ui-search-select-panel {
+    --popover-surface-inline-size: max-content;
+    --popover-space-inset: 0;
     display: flex;
     flex-direction: column;
     max-block-size: var(--radix-popover-content-available-height);
-    inline-size: max-content;
     max-inline-size: min(
       var(--search-select-panel-max-width),
       calc(100vw - var(--search-select-panel-viewport-inset))
     );
     min-inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
   }
 
   .ui-search-select-command {
@@ -1271,9 +1339,9 @@
   }
 
   .ui-cascader-popover {
-    inline-size: auto;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
     min-inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
   }
 
   .ui-cascader-empty {
@@ -1479,13 +1547,13 @@
   }
 
   .ui-time-picker-popover {
-    inline-size: auto;
-    padding: 0;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
   }
 
   .ui-control-panel-flush {
-    inline-size: auto;
-    padding: 0;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
   }
 
   .ui-control-inline-affix-pair-affixed {
@@ -1584,8 +1652,8 @@
 @layer components {
 
   .ui-tree-select-popover {
-    inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
+    --popover-surface-inline-size: var(--radix-popover-trigger-width);
+    --popover-space-inset: 0;
   }
 
   .ui-tree-select-list {
@@ -1968,8 +2036,8 @@
   }
 
   .ui-month-picker-panel {
-    inline-size: auto;
-    padding: var(--month-picker-panel-space-inset);
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: var(--month-picker-panel-space-inset);
   }
 
   .ui-month-picker-nav {

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

@@ -412,7 +412,8 @@
 }
 
 .ui-carousel-viewport {
-  overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: var(--focus-ring-clip-margin);
 }
 
 .ui-carousel-content {

package/dist/styles/dialog-layout.css

@@ -256,7 +256,8 @@
 
   .ui-popover-content {
     z-index: var(--overlay-z-index);
-    width: var(--popover-width);
+
+    width: var(--popover-surface-inline-size, var(--popover-width));
     padding: var(--popover-space-inset);
     border-radius: var(--popover-radius);
     border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));

package/dist/styles/focus-ring.css

@@ -3,11 +3,13 @@
 
   :is(
     .ui-focus-ring,
-    .ui-button,
-    .ui-control,
+    .ui-focus-ring-outline,
     .ui-input,
+    .ui-control,
     .ui-control-multiline,
     .ui-control-trigger,
+    .ui-tag-input,
+    .ui-button,
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
@@ -17,36 +19,86 @@
     .ui-pagination-link,
     .ui-legal-document-toc-link,
     .ui-code-block,
+    .ui-accordion-trigger,
+    .ui-carousel-dot,
+    .ui-rating-star,
+    a.ui-list-row,
+    .ui-text[data-link],
+    .sb-nav-item,
     .sb-user,
     .tb-icon-btn
   ):focus-visible,
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
   .ui-control-composite-field:focus-within,
-  .ui-control-composite-field[data-state="open"] {
-    outline: none;
+  .ui-control-composite-field[data-state="open"],
+  .ui-otp-slot[data-active="true"],
+  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+    outline: var(--focus-ring-width) solid
+      hsl(var(--focus-outline-color) / var(--focus-ring-opacity, 1));
+    outline-offset: var(--focus-ring-offset);
 
-    --tw-ring-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    transition:
+      outline-offset 0s,
+      outline 0s;
   }
 
-  :is(
-    .ui-focus-ring-outline,
-    a.ui-list-row,
-    .ui-accordion-trigger,
-    .ui-carousel-dot,
-    .ui-rating-star,
-    .ui-legal-document-section
-  ):focus-visible {
-    outline: var(--focus-ring-width) solid
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    outline-offset: var(--focus-ring-offset, 0px);
+  :root[data-focus-outline="on"]
+    :is(
+      .ui-focus-ring,
+      .ui-focus-ring-outline,
+      .ui-input,
+      .ui-control,
+      .ui-control-multiline,
+      .ui-control-trigger,
+      .ui-tag-input,
+      .ui-button,
+      .ui-toggle,
+      .ui-checkbox,
+      .ui-radio,
+      .ui-slider-thumb,
+      .ui-switch,
+      .ui-steps-inline-control,
+      .ui-pagination-link,
+      .ui-legal-document-toc-link,
+      .ui-code-block,
+      .ui-accordion-trigger,
+      .ui-carousel-dot,
+      .ui-rating-star,
+      a.ui-list-row,
+      .ui-text[data-link],
+      .sb-nav-item,
+      .sb-user,
+      .tb-icon-btn
+    ):focus-visible,
+  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
+  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"],
+  :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
+  :root[data-focus-outline="on"]
+    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+    --tw-ring-shadow: var(--focus-field-shadow);
+    box-shadow: var(--focus-field-shadow);
+  }
+
+  :root[data-focus-outline="on"]
+    :is(
+      .ui-input,
+      .ui-control,
+      .ui-control-multiline,
+      .ui-control-trigger,
+      .ui-tag-input
+    ):focus-visible,
+  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
+  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"] {
+    --input: var(--focus-ring-color, var(--ring));
   }
 
   .ui-toggle {
-    --focus-ring-width: var(--toggle-focus-ring-width);
+    --focus-ring-weight: var(--toggle-focus-ring-width);
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
 
@@ -58,7 +110,9 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
-  a.ui-list-row {
+  a.ui-list-row,
+  tr.ui-focus-ring,
+  .sb-nav-item {
     --focus-ring-offset: calc(-1 * var(--focus-ring-width));
   }
 
@@ -74,17 +128,24 @@
     --focus-ring-offset: var(--rating-focus-ring-offset);
   }
 
-  .ui-legal-document-section {
-    --focus-ring-offset: var(--legal-document-section-focus-ring-offset);
+  :is(.ui-control, .ui-input, .ui-control-multiline, .ui-tag-input):not(
+    .ui-app-setting-picker-icon,
+    .ui-app-setting-picker-inline
+  ) {
+    --focus-ring-weight: var(--control-focus-ring-width);
   }
 
   .ui-command-input:focus-visible {
-    --focus-ring-width: 0;
+    --focus-field-shadow: none;
+    --focus-ring-weight: 0px;
     outline: none;
     box-shadow: none;
   }
 
   [aria-invalid="true"] {
     --focus-ring-color: var(--destructive);
+    --focus-outline-color: var(--destructive);
+    --focus-ring-glow-color: var(--control-outline-error);
+    --focus-ring-glow-alpha: var(--control-outline-error-alpha);
   }
 }

package/dist/styles/layout.css

@@ -80,7 +80,8 @@
   }
 
   .ui-aspect-ratio {
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
   }
 
   .ui-brand-glow {

package/dist/styles/logo-layout.css

@@ -15,6 +15,62 @@
     user-select: none;
   }
 
+  .ui-logo-glyph {
+    --logo-glyph-advance-width: max(
+      var(--logo-glyph-fullwidth-width),
+      calc(
+        var(--logo-glyph-fullwidth-count, 0) * var(--logo-glyph-fullwidth-width) +
+          var(--logo-glyph-wide-count, 0) * var(--logo-glyph-wide-width) +
+          var(--logo-glyph-narrow-count, 0) * var(--logo-glyph-narrow-width) +
+          var(--logo-glyph-space-count, 0) * var(--logo-glyph-space-width)
+      )
+    );
+
+    white-space: nowrap;
+    font-size: min(
+      var(--logo-font-size-md),
+      calc(var(--logo-size-md) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+    translate: 0 var(--logo-glyph-optical-offset, 0em);
+  }
+
+  .ui-logo[data-size="xs"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-xs),
+      calc(var(--logo-size-xs) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo[data-size="sm"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-sm),
+      calc(var(--logo-size-sm) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo[data-size="lg"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-lg),
+      calc(var(--logo-size-lg) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo-glyph[data-ink="cap-baseline"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-baseline-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="cap-descender"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-descender-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="x-baseline"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-baseline-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="x-descender"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-descender-optical-offset));
+  }
+
   .ui-logo[data-size="xs"] {
     width: var(--logo-size-xs);
     height: var(--logo-size-xs);

package/dist/styles/navigation-layout.css

@@ -127,6 +127,20 @@
     font-size: var(--menu-item-font-size);
   }
 
+  .ui-context-menu-item > svg,
+  .ui-context-menu-checkbox-item > svg,
+  .ui-context-menu-radio-item > svg,
+  .ui-menubar-item > svg,
+  .ui-menubar-checkbox-item > svg,
+  .ui-menubar-radio-item > svg,
+  .ui-dropdown-menu-item > svg,
+  .ui-dropdown-menu-checkbox-item > svg,
+  .ui-dropdown-menu-radio-item > svg {
+    width: var(--menu-icon-size);
+    height: var(--menu-icon-size);
+    flex: 0 0 auto;
+  }
+
   .ui-dropdown-menu-item[data-inset="true"],
   .ui-dropdown-menu-label[data-inset="true"],
   .ui-dropdown-menu-sub-trigger[data-inset="true"] {
@@ -209,6 +223,7 @@
   .ui-context-menu-label,
   .ui-menubar-label,
   .ui-dropdown-menu-label {
+    height: auto;
     min-height: var(--menu-item-height);
     color: hsl(var(--muted-foreground));
     font-weight: var(--font-weight-medium);