@kiefer-tek/sophea-design-system 0.15.1 → 0.15.2

package/dist/index.css

@@ -10683,6 +10683,14 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
   color: var(--text-05);
 }
 
+/* Icon-only (hideLabel): drop the label gap and square up the padding so the
+   glyph reads as a compact icon button. The name is surfaced on hover by the
+   consumer (tooltip) + kept as aria-label. */
+.sn-AppShell-module__railItemIconOnly--SKMyQ {
+  gap: 0;
+  padding: 0.625rem 0;
+}
+
 /* Selection pill — rendered only when selected (absolute inset-0). */
 .sn-AppShell-module__railItemPill--B67qF {
   position: absolute;

package/dist/index.js

@@ -8201,6 +8201,7 @@ const topAccent = "sn-AppShell-module__topAccent--nyV0S";
 const railHeader = "sn-AppShell-module__railHeader--Z-dh6";
 const railItems = "sn-AppShell-module__railItems--q4Ukh";
 const railFooter = "sn-AppShell-module__railFooter--96gh-";
+const railItemIconOnly = "sn-AppShell-module__railItemIconOnly--SKMyQ";
 const railItemPill = "sn-AppShell-module__railItemPill--B67qF";
 const railItemIcon = "sn-AppShell-module__railItemIcon--pLfnP";
 const railItemLabel = "sn-AppShell-module__railItemLabel--1CFas";
@@ -8228,6 +8229,7 @@ const styles$g = {
   railHeader,
   railItems,
   railFooter,
+  railItemIconOnly,
   railItemPill,
   railItemIcon,
   railItemLabel,
@@ -8323,22 +8325,24 @@ const AppShellRail = forwardRef(function AppShellRail2({ collapsed, header: head
 });
 AppShellRail[ROLE] = "drawer";
 const AppShellRailItem = forwardRef(
-  function AppShellRailItem2({ icon: Icon, label: label2, selected: selected2 = false, onSelect, asChild = false, className, children, ...rest }, ref) {
+  function AppShellRailItem2({ icon: Icon, label: label2, selected: selected2 = false, onSelect, asChild = false, hideLabel = false, className, children, "aria-label": ariaLabel, ...rest }, ref) {
     const Comp = asChild ? Slot : "button";
+    const accessibleName = ariaLabel ?? (hideLabel && typeof label2 === "string" ? label2 : void 0);
     return /* @__PURE__ */ jsxs(
       Comp,
       {
         ref,
-        className: cx(styles$g.railItem, className),
+        className: cx(styles$g.railItem, hideLabel && styles$g.railItemIconOnly, className),
         "data-selected": selected2 ? "true" : "false",
         onClick: onSelect,
+        ...accessibleName ? { "aria-label": accessibleName } : {},
         ...asChild ? {} : { type: "button", "aria-pressed": selected2 },
         ...rest,
         children: [
           /* @__PURE__ */ jsx(Slottable, { children: asChild ? children : null }),
           selected2 ? /* @__PURE__ */ jsx("span", { className: styles$g.railItemPill, "aria-hidden": "true" }) : null,
           Icon ? /* @__PURE__ */ jsx(Icon, { className: styles$g.railItemIcon, width: 24, height: 24, "aria-hidden": "true" }) : null,
-          /* @__PURE__ */ jsx("span", { className: styles$g.railItemLabel, children: label2 })
+          hideLabel ? null : /* @__PURE__ */ jsx("span", { className: styles$g.railItemLabel, children: label2 })
         ]
       }
     );