@godxjp/ui 27.7.0 → 27.8.0

package/dist/components/layout/topbar-item.d.ts

@@ -13,6 +13,8 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     hideBelow?: import("../../props/index.js").BreakpointProp;
     icon?: React.ReactNode;
+    iconHideFrom?: import("../../props/index.js").BreakpointProp;
+    labelHideBelow?: import("../../props/index.js").BreakpointProp;
     badge?: React.ReactNode;
     badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;

package/dist/components/layout/topbar-item.js

@@ -2,10 +2,40 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, icon, badge, badgeTone, children, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({
+  asChild = false,
+  className,
+  type,
+  hideBelow,
+  icon,
+  iconHideFrom,
+  labelHideBelow,
+  badge,
+  badgeTone,
+  children,
+  ...props
+}, ref) {
   const Comp = asChild ? Slot : "button";
   const showBadge = !asChild && badge !== void 0 && badge !== "";
-  const iconNode = !asChild && icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx("span", { "data-slot": "topbar-item-icon", className: "ui-topbar-item-icon", children: icon }) : null;
+  const iconNode = icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-icon",
+      className: "ui-topbar-item-icon",
+      "data-hide-from": iconHideFrom,
+      children: icon
+    }
+  ) : null;
+  const labelOf = (label) => labelHideBelow === void 0 || label === void 0 || label === null || label === false ? label : /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-label",
+      className: "ui-topbar-item-label",
+      "data-hide-below": labelHideBelow,
+      children: label
+    }
+  );
+  const slotted = asChild && (iconNode !== null || labelHideBelow !== void 0) && React.isValidElement(children) ? React.cloneElement(children, void 0, iconNode, labelOf(children.props.children)) : children;
   const badgeNode = showBadge ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -24,9 +54,9 @@ const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, clas
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: asChild ? slotted : /* @__PURE__ */ jsxs(Fragment, { children: [
         iconNode,
-        children,
+        labelOf(children),
         badgeNode
       ] })
     }

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": "27.7.0",
+  "version": "27.8.0",
   "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

@@ -1354,8 +1354,24 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * visible label, not from the glyph. For a glyph that must carry a name, or one that needs a
      * step other than the bar's, pass `<Icon as={…} size=… label=… />` — as this prop's value or as
      * a child — and it keeps its own metric and its own semantics.
+     *
+     * Rendered under `asChild` too: the slot is inserted ahead of the child element's own children,
+     * and the child element stays the cell (gh#726).
      */
     icon?: ReactNode;
+    /**
+     * Drop the `icon` slot FROM a breakpoint step upwards — `Flex hideFrom`'s contract, scoped to
+     * the cell's glyph, so a cell reads label-only on a wide bar without the consumer wrapping the
+     * glyph (gh#726). Purely decorative: the accessible name is unaffected.
+     */
+    iconHideFrom?: BreakpointProp;
+    /**
+     * Visually hide the cell's label BELOW a breakpoint step — `Flex hideBelow`'s contract, scoped to
+     * the label — so the cell collapses to icon-only on a narrow bar (gh#726). The label stays in the
+     * accessibility tree (visually hidden, not `display: none`), so the collapsed cell keeps its
+     * accessible name. Under `asChild` the child element's own children are the label.
+     */
+    labelHideBelow?: BreakpointProp;
     /**
      * 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

@@ -1187,6 +1187,14 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "asChild";
             readonly local: true;
             readonly reason: "Radix Slot passthrough — merges onto the child";
+        }, "BreakpointProp", {
+            readonly field: "iconHideFrom";
+            readonly local: true;
+            readonly reason: "Flex `hideFrom` scoped to the cell's icon slot — label-only from a breakpoint up without hand-wrapping the glyph (gh#726).";
+        }, {
+            readonly field: "labelHideBelow";
+            readonly local: true;
+            readonly reason: "Flex `hideBelow` scoped to the cell's label — icon-only below a breakpoint; visually hidden so the accessible name survives (gh#726).";
         }];
     };
     readonly NavListProp: {

package/dist/props/registry.js

@@ -1284,7 +1284,18 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: [
       "ChildrenProp",
       "ClassNameProp",
-      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" }
+      { field: "asChild", local: true, reason: "Radix Slot passthrough \u2014 merges onto the child" },
+      "BreakpointProp",
+      {
+        field: "iconHideFrom",
+        local: true,
+        reason: "Flex `hideFrom` scoped to the cell's icon slot \u2014 label-only from a breakpoint up without hand-wrapping the glyph (gh#726)."
+      },
+      {
+        field: "labelHideBelow",
+        local: true,
+        reason: "Flex `hideBelow` scoped to the cell's label \u2014 icon-only below a breakpoint; visually hidden so the accessible name survives (gh#726)."
+      }
     ]
   },
   NavListProp: {

package/dist/styles/layout.css

@@ -1485,28 +1485,84 @@
   }
 
   @media (width >= 40rem) {
-    .ui-flex[data-hide-from="sm"] {
+    .ui-flex[data-hide-from="sm"],
+    .ui-topbar-item-icon[data-hide-from="sm"] {
       display: none;
     }
   }
 
   @media (width >= 48rem) {
-    .ui-flex[data-hide-from="md"] {
+    .ui-flex[data-hide-from="md"],
+    .ui-topbar-item-icon[data-hide-from="md"] {
       display: none;
     }
   }
 
   @media (width >= 64rem) {
-    .ui-flex[data-hide-from="lg"] {
+    .ui-flex[data-hide-from="lg"],
+    .ui-topbar-item-icon[data-hide-from="lg"] {
       display: none;
     }
   }
 
   @media (width >= 80rem) {
-    .ui-flex[data-hide-from="xl"] {
+    .ui-flex[data-hide-from="xl"],
+    .ui-topbar-item-icon[data-hide-from="xl"] {
       display: none;
     }
   }
+
+  @media (width < 40rem) {
+    .ui-topbar-item-label[data-hide-below="sm"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 48rem) {
+    .ui-topbar-item-label[data-hide-below="md"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 64rem) {
+    .ui-topbar-item-label[data-hide-below="lg"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 80rem) {
+    .ui-topbar-item-label[data-hide-below="xl"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
 }
 
 @layer components {

package/docs/layout/topbar-item.tsx

@@ -29,6 +29,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   Settings,
+  Target,
   Users,
 } from "lucide-react";
 
@@ -178,6 +179,42 @@ export default function Demo() {
               />
             </CardContent>
           </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>リンクのセルと、幅で畳むセル</CardTitle>
+              <CardDescription>
+                `asChild` でもセルは `icon`
+                スロットを子要素の中に差し込み、リンクそのものがセルです。 `labelHideBelow`
+                はその幅未満でラベルを視覚的にだけ隠すので、アイコンだけになっても
+                ラベルがアクセシブルネームとして残ります。`iconHideFrom`
+                はその幅以上でアイコンを外します。 ビューポートを 640px
+                の前後に動かして確認してください。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <>
+                    <TopbarItem asChild icon={<Target aria-hidden="true" />}>
+                      <a href="#topbar-item-goals">目標</a>
+                    </TopbarItem>
+                    <TopbarItem
+                      asChild
+                      icon={<Target aria-hidden="true" />}
+                      labelHideBelow="sm"
+                      iconHideFrom="sm"
+                    >
+                      <a href="#topbar-item-goals-responsive">今期の目標</a>
+                    </TopbarItem>
+                    <TopbarItem icon={<Building2 aria-hidden="true" />} labelHideBelow="md">
+                      東京本社
+                    </TopbarItem>
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
         </Flex>
       </PageContainer>
     </AppShell>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "27.7.0",
-  "godxUiMcp": "27.7.0",
+  "version": "27.8.0",
+  "godxUiMcp": "27.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",