@godxjp/ui 33.10.1 → 33.11.2

package/dist/components/layout/topbar.js

@@ -11,6 +11,7 @@ function Topbar({
   start,
   center,
   end,
+  identity,
   className,
   children,
   height,
@@ -20,8 +21,10 @@ function Topbar({
   ...props
 }) {
   const barRef = React.useRef(null);
+  const controlsRef = React.useRef(null);
+  const hasIdentity = identity != null && children == null;
   const foldable = overflow === "menu" && children == null;
-  const collapsed = useCollapsesToMenu(barRef, foldable);
+  const collapsed = useCollapsesToMenu(hasIdentity ? controlsRef : barRef, foldable);
   const clusters = /* @__PURE__ */ jsxs(Fragment, { children: [
     start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
     center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
@@ -32,13 +35,26 @@ function Topbar({
     {
       ref: barRef,
       "data-height": height,
+      "data-identity": hasIdentity ? "true" : void 0,
       "data-overflow": overflow,
       "data-collapsed": foldable ? String(collapsed) : void 0,
       style: { ...style, ...padStyle(pad, void 0) },
       "data-slot": "topbar",
       className: cn("ui-topbar", className),
       ...props,
-      children: children ?? (collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters)
+      children: children ?? (hasIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: controlsRef,
+            "data-slot": "topbar-controls",
+            "data-overflow": overflow,
+            className: "ui-topbar ui-topbar-controls",
+            children: collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-slot": "topbar-identity", className: "ui-topbar-identity", children: identity })
+      ] }) : collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters)
     }
   );
 }
@@ -69,7 +85,13 @@ function useCollapsesToMenu(ref, enabled) {
     if (typeof ResizeObserver === "undefined") return void 0;
     const observer = new ResizeObserver(update);
     observer.observe(bar);
-    if (!collapsed) for (const cluster of bar.children) observer.observe(cluster);
+    if (!collapsed)
+      for (const cluster of bar.children) {
+        observer.observe(cluster);
+        if (cluster.getAttribute("data-slot") === "topbar-start") {
+          for (const cell of cluster.children) observer.observe(cell);
+        }
+      }
     return () => observer.disconnect();
   }, [ref, enabled, collapsed]);
   return enabled && collapsed;

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.10.1",
+  "version": "33.11.2",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

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

@@ -1545,6 +1545,14 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     center?: ReactNode;
     /** Inline-end cluster — settings pickers, notifications, the user menu. */
     end?: ReactNode;
+    /**
+     * Opt-in shared-device identity, pinned outside scrolling/overflow menus. Pass one
+     * TopbarItem with `truncate` and an Avatar in `icon`; use a plain string name so its full
+     * title is automatic. Never combine with hideBelow/labelHideBelow/iconHideFrom.
+     * Capped by --topbar-identity-max-inline-size (40%); primary controls retain their floors.
+     * At extreme widths only the other clusters scroll or move to the menu. Ignored with children.
+     */
+    identity?: ReactNode;
     /**
      * What a bar that does not fit does with the cells that do not fit (gh#728).
      *
@@ -1643,6 +1651,11 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * accessible name. Under `asChild` the child element's own children are the label.
      */
     labelHideBelow?: BreakpointProp;
+    /** Ellipse the label in the available width, keeping the icon and control minimum.
+     * Same boolean vocabulary as Text.truncate. Overrides labelHideBelow; the complete text
+     * remains the accessible name. String children automatically supply title (asChild too).
+     */
+    truncate?: boolean;
     /**
      * Unread count OVERLAID on the cell's glyph — the notification-bell affordance the cell's own use
      * cases name (gh#398). Pass the CONTENT ONLY, exactly like `SidebarItemProp.badge`: a number, a

package/dist/props/registry.d.ts

@@ -1433,7 +1433,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TopbarProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "identity";
+            readonly local: true;
+            readonly reason: "Reserved shared-device account slot; bounded and outside the overflow policy.";
+        }, "ChildrenProp", {
             readonly field: "overflow";
             readonly local: true;
             readonly reason: "The bar's overflow contract — `scroll` (default) keeps every cell reachable, `clip` is the pre-gh#728 slicing.";
@@ -1443,6 +1447,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", {
+            readonly field: "truncate";
+            readonly local: true;
+            readonly reason: "Text.truncate boolean vocabulary applied to the bar cell label.";
+        }, {
             readonly field: "asChild";
             readonly local: true;
             readonly reason: "Radix Slot passthrough — merges onto the child";

package/dist/props/registry.js

@@ -1551,6 +1551,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: [
+      {
+        field: "identity",
+        local: true,
+        reason: "Reserved shared-device account slot; bounded and outside the overflow policy."
+      },
       "ChildrenProp",
       {
         field: "overflow",
@@ -1565,6 +1570,11 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: [
       "ChildrenProp",
       "ClassNameProp",
+      {
+        field: "truncate",
+        local: true,
+        reason: "Text.truncate boolean vocabulary applied to the bar cell label."
+      },
       { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" },
       "BreakpointProp",
       {

package/dist/styles/control.css

@@ -1232,7 +1232,10 @@
 
   .ui-search-input-control {
     padding-inline-start: var(--search-input-start-padding);
-    padding-inline-end: var(--search-input-end-padding);
+    padding-inline-end: max(
+      var(--search-input-end-padding),
+      var(--search-input-affix-min-padding, 0px)
+    );
   }
 
   .ui-search-input-clear {
@@ -1263,8 +1266,8 @@
     .ui-search-input-clear::after {
       content: "";
       position: absolute;
-      inset-block: min(0px, calc((100% - var(--control-height-default)) / 2));
-      inset-inline: min(0px, calc((100% - var(--control-height-default)) / 2));
+      inset-block: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
+      inset-inline: min(0px, calc((100% - var(--control-affix-touch-target-size)) / 2));
     }
   }
 
@@ -3767,3 +3770,128 @@
     min-inline-size: var(--control-height-touch);
   }
 }
+
+@layer components {
+  @media (pointer: coarse) {
+    .ui-control-inline-affix-action:not(.ui-badge-remove),
+    .ui-control-affix-action,
+    .ui-tree-select-clear,
+    .ui-password-input-toggle,
+    .ui-search-input-clear,
+    .ui-number-input-step {
+      min-inline-size: var(--control-affix-touch-target-size);
+      min-block-size: var(--control-affix-touch-target-size);
+      flex-shrink: 0;
+    }
+
+    .ui-control-inline-affix-action:not(.ui-badge-remove)::after {
+      inset: 0;
+      translate: none;
+    }
+
+    .ui-input-affix-wrapper:has(.ui-control-inline-affix-action) > .ui-input {
+      min-block-size: var(--control-affix-touch-target-size);
+    }
+
+    .ui-input--trailing-affix {
+      padding-inline-end: max(
+        var(--control-inline-affix-space-inline-end),
+        calc(
+          var(--input-trailing-measured-size, var(--control-affix-touch-target-size)) +
+            var(--control-inline-affix-inset-inline) + var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-control-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: max(
+        var(--control-trigger-space-inline-end),
+        calc(
+          var(--control-affix-touch-target-size) + var(--control-affix-inset-inline-end) +
+            var(--control-inline-affix-space-gap)
+        )
+      );
+    }
+
+    .ui-tree-select-trigger-affixed {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--space-3) +
+          var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-password-input-field {
+      min-block-size: var(--control-affix-touch-target-size);
+      padding-inline-end: calc(
+        var(--control-affix-touch-target-size) + var(--control-inline-affix-space-gap)
+      );
+    }
+
+    .ui-number-input-steppers {
+      flex-direction: row;
+      align-items: center;
+      inset-block: var(--control-border-width, var(--stroke-hairline));
+    }
+
+    .ui-number-input-step {
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .ui-number-input-step:hover {
+      background: hsl(var(--accent));
+      color: hsl(var(--accent-foreground));
+    }
+    .ui-number-input-step::after {
+      inset-block: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inset-inline: calc((100% - var(--control-affix-touch-target-size)) / 2) auto;
+      inline-size: var(--control-affix-touch-target-size);
+      block-size: var(--control-affix-touch-target-size);
+      translate: none;
+    }
+    .ui-search-input-control {
+      min-block-size: var(--control-affix-touch-target-size);
+
+      --search-input-affix-min-padding: max(
+        var(--control-affix-touch-target-size),
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 +
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    [data-slot="textarea-affix-wrapper"]:has(.ui-textarea-clear) > textarea {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 * var(--textarea-clear-inset-block-start)
+      );
+    }
+    .ui-search-input-clear {
+      inset-inline-end: max(
+        0px,
+        calc(
+          var(--search-input-edge-inset) + var(--touch-target-min) / 2 -
+            var(--control-affix-touch-target-size) / 2
+        )
+      );
+    }
+    .ui-number-input-field {
+      min-block-size: calc(
+        var(--control-affix-touch-target-size) + 2 *
+          var(--control-border-width, var(--stroke-hairline))
+      );
+      padding-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]) [data-slot="number-input-suffix"] {
+      inset-inline-end: calc(2 * var(--control-affix-touch-target-size) + var(--space-2));
+    }
+    .ui-number-input:not([data-controls="off"]):has([data-slot="number-input-suffix"])
+      .ui-number-input-field {
+      padding-inline-end: calc(
+        2 * var(--control-affix-touch-target-size) + var(--space-2) +
+          var(--control-inline-affix-size)
+      );
+    }
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.10.1",
+  "version": "33.11.2",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/shell-layout.css

@@ -2272,6 +2272,44 @@
     overflow: visible;
   }
 
+  .ui-topbar[data-identity="true"] {
+    overflow: clip;
+  }
+  .ui-topbar-controls {
+    padding-inline: 0;
+    height: auto;
+    background: none;
+    backdrop-filter: none;
+  }
+
+  .ui-topbar-controls > .ui-topbar-start {
+    display: contents;
+  }
+  .ui-topbar-identity {
+    display: flex;
+    align-self: stretch;
+    flex: 0 0 auto;
+    min-inline-size: 0;
+    max-inline-size: var(--topbar-identity-max-inline-size);
+    margin-inline-start: auto;
+  }
+  .ui-topbar-item[data-truncate="true"] {
+    flex: 0 1 auto;
+    min-inline-size: var(--topbar-item-min-width);
+    max-inline-size: 100%;
+  }
+  .ui-topbar-item[data-truncate="true"] > .ui-topbar-item-label {
+    min-inline-size: 0;
+
+    line-height: var(--line-height-normal);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ui-topbar-identity .ui-topbar-item[data-truncate="true"] > .ui-topbar-item-label {
+    min-inline-size: var(--topbar-identity-min-text-inline-size);
+  }
+
   .ui-topbar-item {
     display: inline-flex;
     min-width: var(--topbar-item-min-width);