@synopackageland/ui 0.25.18 → 0.25.19

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.25.19 (2026-11-14)
+
+### Button
+
+- **A button label is never cut with an ellipsis; it wraps instead.** Button keeps its label's width in a flex row (`shrink-0`, was `min-w-0`) and is never wider than its container; only a label wider than the container wraps, centred, and the size is now a minimum height with block padding (`min-h-*` and `py-*`, was `h-*`). SplitButton, NewItemsPill, the phone bar's text action and the phone FAB's pills wrap the same way. The rule is [button-policy](docs/button-policy.md) rule 13, checked in a browser by `pnpm check:button-wrap`.
+
 ## 0.25.18 (2026-11-14)
 
 ### InputSteppers

package/dist/index.js

@@ -2599,7 +2599,11 @@ const lw = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
     onClick: {}
   },
   setup(e) {
-    const n = e, t = ya(() => n.disabled), { pending: a, onClick: o } = Fv(() => n.onClick), i = h(() => n.loading || a.value), l = { sm: "h-[var(--ui-button-sm,var(--ui-control-sm))] px-2", md: "h-[var(--ui-button-md,var(--ui-control-md))] px-3", lg: "h-[var(--ui-button-lg,var(--ui-control-lg))] px-4" }, s = I(null), u = I(null), c = I(!1), f = I(!1), p = I(!1), v = (b) => b instanceof Element && (b.localName === "svg" || b.hasAttribute("data-icon"));
+    const n = e, t = ya(() => n.disabled), { pending: a, onClick: o } = Fv(() => n.onClick), i = h(() => n.loading || a.value), l = {
+      sm: "min-h-[var(--ui-button-sm,var(--ui-control-sm))] py-[max(0px,calc((var(--ui-button-sm,var(--ui-control-sm))_-_2px_-_1lh)_/_2))] px-2",
+      md: "min-h-[var(--ui-button-md,var(--ui-control-md))] py-[max(0px,calc((var(--ui-button-md,var(--ui-control-md))_-_2px_-_1lh)_/_2))] px-3",
+      lg: "min-h-[var(--ui-button-lg,var(--ui-control-lg))] py-[max(0px,calc((var(--ui-button-lg,var(--ui-control-lg))_-_2px_-_1lh)_/_2))] px-4"
+    }, s = I(null), u = I(null), c = I(!1), f = I(!1), p = I(!1), v = (b) => b instanceof Element && (b.localName === "svg" || b.hasAttribute("data-icon"));
     function m() {
       const b = s.value, k = b ? [...b.childNodes].filter((K) => K.nodeType === Node.ELEMENT_NODE || K.nodeType === Node.TEXT_NODE && K.textContent?.trim()) : [], C = !!b?.textContent?.trim(), _ = !!b && !C && k.some(v), A = C && k.length > 1 && v(k[0]), V = C && k.length > 1 && v(k[k.length - 1]);
       _ !== c.value && (c.value = _), A !== f.value && (f.value = A), V !== p.value && (p.value = V);
@@ -2607,7 +2611,7 @@ const lw = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
     Re(m), Xo(m);
     const g = h(() => n.variant === "primary" || n.variant === "danger"), w = rw(() => n.kind), x = h(
       () => tt(
-        "relative inline-flex max-w-full min-w-0 select-none items-center justify-center gap-2 whitespace-nowrap border text-[length:var(--ui-font-size)] font-normal outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+        "relative inline-flex max-w-full shrink-0 select-none items-center justify-center gap-2 border text-[length:var(--ui-font-size)] font-normal outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none focus-visible:shadow-[var(--ui-shadow-focus)]",
         n.variant === "text" ? "px-1 py-0.5" : l[n.size],
         (w.value === "tool" || n.variant === "text") && "rounded-[var(--ui-radius-control)]",
         w.value === "action" && n.variant !== "text" && "rounded-[var(--ui-radius-pill)]",
@@ -2619,7 +2623,7 @@ const lw = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
         // primary colour's text with no frame or fill, as iOS's plain tinted button
         // and Material's text button draw it. A press dims it; the tap box stays 44
         // on touch (data-ui-hit) while it is drawn its text's size.
-        n.variant === "text" && "shrink-0 whitespace-nowrap border-transparent bg-transparent font-medium text-[var(--ui-primary)] [--ui-spin-color:var(--ui-primary)] hover:text-[var(--ui-primary-hover)] active:opacity-50 data-[disabled]:text-[var(--ui-text-disabled)]",
+        n.variant === "text" && "border-transparent bg-transparent font-medium text-[var(--ui-primary)] [--ui-spin-color:var(--ui-primary)] hover:text-[var(--ui-primary-hover)] active:opacity-50 data-[disabled]:text-[var(--ui-text-disabled)]",
         n.variant === "danger" && "border-[var(--ui-danger)] bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger-foreground)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-hover)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-active)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:shadow-none data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[color-mix(in_srgb,var(--ui-danger)_12%,var(--ui-surface))] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))]",
         // A destructive choice beside the main action (Replace theirs next to Save as copy): the grey control with a red edge and label.
         n.variant === "danger-outline" && "border-[var(--ui-danger)] bg-[var(--ui-control-bg)] text-[var(--ui-danger-text)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-soft)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-soft)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[var(--ui-control-bg-disabled)] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))] data-[disabled]:shadow-none"
@@ -2647,7 +2651,7 @@ const lw = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
       L("span", {
         ref_key: "labelEl",
         ref: s,
-        class: ie(["ui-button-label min-w-0 truncate", f.value && "[&>:first-child]:mr-2", p.value && "[&>:last-child]:ml-2"]),
+        class: ie(["ui-button-label min-w-0 whitespace-normal text-center [overflow-wrap:break-word]", f.value && "[&>:first-child]:mr-2", p.value && "[&>:last-child]:ml-2"]),
         "data-icon-only": c.value || void 0,
         "data-lead": f.value || void 0,
         "data-trail": p.value || void 0
@@ -28370,7 +28374,10 @@ const V2 = {
       }), null, 16, ["open", "items", "title", "checked-keys", "radio-values", "radio-indicator"])) : M("", !0)
     ], 64));
   }
-}), yB = ["data-variant"], bB = ["disabled"], wB = { class: "min-w-0 truncate" }, xB = ["disabled", "aria-label"], Ap = "inline-flex h-[var(--ui-button-md,var(--ui-control-md))] items-center border text-[length:var(--ui-font-size)] outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] whitespace-nowrap disabled:pointer-events-none", fG = /* @__PURE__ */ U({
+}), yB = ["data-variant"], bB = ["disabled"], wB = {
+  class: "min-w-0 whitespace-normal text-center [overflow-wrap:break-word]",
+  "data-split-label": ""
+}, xB = ["disabled", "aria-label"], Ap = "inline-flex min-h-[var(--ui-button-md,var(--ui-control-md))] items-center border text-[length:var(--ui-font-size)] outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none", fG = /* @__PURE__ */ U({
   inheritAttrs: !1,
   __name: "SplitButton",
   props: {
@@ -28383,7 +28390,7 @@ const V2 = {
   setup(e, { emit: n }) {
     const t = Jo(), a = () => Object.fromEntries(Object.entries(t).filter(([c]) => c !== "class" && c !== "style")), i = pt(e, { menuLabel: "More options" }), l = n, s = () => i.variant === "primary" ? "border-[var(--ui-primary-hover)] bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] group-hover:border-[var(--ui-primary-active)] group-hover:bg-[var(--ui-primary-hover)] group-active:border-[var(--ui-primary-active)] group-active:bg-[var(--ui-primary-active)] disabled:border-[color-mix(in_srgb,var(--ui-primary)_30%,var(--ui-surface))] disabled:bg-[color-mix(in_srgb,var(--ui-primary)_12%,var(--ui-surface))] disabled:text-[color-mix(in_srgb,var(--ui-primary)_55%,var(--ui-text))]" : "focus-visible:border-[var(--ui-primary)] disabled:border-[var(--ui-control-border)] disabled:bg-[var(--ui-control-bg-disabled)] border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--ui-text)] group-hover:border-[var(--ui-control-border-hover)] group-hover:bg-[var(--ui-control-bg-hover)] group-active:border-[var(--ui-control-border-active)] group-active:bg-[var(--ui-control-bg-active)] disabled:text-[var(--ui-text-disabled)]", u = () => i.variant === "primary" ? i.disabled ? "bg-[color-mix(in_srgb,var(--ui-primary)_30%,var(--ui-surface))]" : "bg-[var(--ui-control-divider-on-accent)]" : i.disabled ? "opacity-50 bg-[var(--ui-control-divider)]" : "bg-[var(--ui-control-divider)]";
     return (c, f) => (d(), y("span", {
-      class: ie([r(t).class, "group inline-flex items-stretch"]),
+      class: ie([r(t).class, "group inline-flex max-w-full shrink-0 items-stretch"]),
       style: Ee(r(t).style),
       "data-variant": r(i).variant,
       "data-syno-pkg-land-ui": ""
@@ -28393,7 +28400,7 @@ const V2 = {
         "data-split-main": "",
         "data-ui-hit": "",
         disabled: r(i).disabled,
-        class: [Ap, s(), "relative min-w-0 rounded-l-[var(--ui-radius-control)] border-r-0 px-3 focus-visible:z-10 focus-visible:shadow-[var(--ui-shadow-focus)]"],
+        class: [Ap, s(), "relative min-w-0 rounded-l-[var(--ui-radius-control)] border-r-0 px-3 py-[max(0px,calc((var(--ui-button-md,var(--ui-control-md))_-_2px_-_1lh)_/_2))] focus-visible:z-10 focus-visible:shadow-[var(--ui-shadow-focus)]"],
         onClick: f[0] || (f[0] = (p) => l("click", p))
       }), [
         L("span", wB, [
@@ -34709,7 +34716,10 @@ const yL = ["data-ui-data-view", "data-fill", "data-ui-natural-height"], bL = {
       ])
     ], 8, Eq));
   }
-}), qq = ["data-edge"], Fq = { class: "truncate" }, pY = /* @__PURE__ */ U({
+}), qq = ["data-edge"], Fq = {
+  class: "min-w-0 whitespace-normal text-center [overflow-wrap:break-word]",
+  "data-ui-new-items-pill-label": ""
+}, pY = /* @__PURE__ */ U({
   __name: "NewItemsPill",
   props: {
     label: {},
@@ -34721,7 +34731,7 @@ const yL = ["data-ui-data-view", "data-fill", "data-ui-natural-height"], bL = {
       type: "button",
       "data-edge": e.edge,
       class: ie([
-        "ui-new-items-pill absolute left-1/2 z-[3] inline-flex h-[var(--ui-control-md)] max-w-[calc(100%-16px)] -translate-x-1/2 items-center gap-2 rounded-[var(--ui-radius-pill)] border border-[var(--ui-primary)] bg-[var(--ui-primary)] px-3 text-[length:var(--ui-font-size)] whitespace-nowrap text-[var(--ui-primary-foreground)] shadow-[var(--ui-shadow-menu)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-primary-hover)] active:bg-[var(--ui-primary-active)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+        "ui-new-items-pill absolute left-1/2 z-[3] inline-flex min-h-[var(--ui-control-md)] w-max max-w-[calc(100%-16px)] -translate-x-1/2 items-center gap-2 rounded-[var(--ui-radius-pill)] border border-[var(--ui-primary)] bg-[var(--ui-primary)] px-3 py-[max(0px,calc((var(--ui-control-md)_-_2px_-_1lh)_/_2))] text-[length:var(--ui-font-size)] text-[var(--ui-primary-foreground)] shadow-[var(--ui-shadow-menu)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-primary-hover)] active:bg-[var(--ui-primary-active)] focus-visible:shadow-[var(--ui-shadow-focus)]",
         e.edge === "top" ? "top-2" : "bottom-2"
       ]),
       "aria-live": "polite",

package/dist/json-preview/preview.js

@@ -14723,7 +14723,11 @@ const _T = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
     onClick: {}
   },
   setup(e) {
-    const t = e, n = ma(() => t.disabled), { pending: o, onClick: a } = Uy(() => t.onClick), r = x(() => t.loading || o.value), i = { sm: "h-[var(--ui-button-sm,var(--ui-control-sm))] px-2", md: "h-[var(--ui-button-md,var(--ui-control-md))] px-3", lg: "h-[var(--ui-button-lg,var(--ui-control-lg))] px-4" }, s = /* @__PURE__ */ L(null), l = /* @__PURE__ */ L(null), c = /* @__PURE__ */ L(!1), u = /* @__PURE__ */ L(!1), f = /* @__PURE__ */ L(!1), p = (y) => y instanceof Element && (y.localName === "svg" || y.hasAttribute("data-icon"));
+    const t = e, n = ma(() => t.disabled), { pending: o, onClick: a } = Uy(() => t.onClick), r = x(() => t.loading || o.value), i = {
+      sm: "min-h-[var(--ui-button-sm,var(--ui-control-sm))] py-[max(0px,calc((var(--ui-button-sm,var(--ui-control-sm))_-_2px_-_1lh)_/_2))] px-2",
+      md: "min-h-[var(--ui-button-md,var(--ui-control-md))] py-[max(0px,calc((var(--ui-button-md,var(--ui-control-md))_-_2px_-_1lh)_/_2))] px-3",
+      lg: "min-h-[var(--ui-button-lg,var(--ui-control-lg))] py-[max(0px,calc((var(--ui-button-lg,var(--ui-control-lg))_-_2px_-_1lh)_/_2))] px-4"
+    }, s = /* @__PURE__ */ L(null), l = /* @__PURE__ */ L(null), c = /* @__PURE__ */ L(!1), u = /* @__PURE__ */ L(!1), f = /* @__PURE__ */ L(!1), p = (y) => y instanceof Element && (y.localName === "svg" || y.hasAttribute("data-icon"));
     function h() {
       const y = s.value, E = y ? [...y.childNodes].filter((T) => T.nodeType === Node.ELEMENT_NODE || T.nodeType === Node.TEXT_NODE && T.textContent?.trim()) : [], k = !!y?.textContent?.trim(), w = !!y && !k && E.some(p), _ = k && E.length > 1 && p(E[0]), O = k && E.length > 1 && p(E[E.length - 1]);
       w !== c.value && (c.value = w), _ !== u.value && (u.value = _), O !== f.value && (f.value = O);
@@ -14731,7 +14735,7 @@ const _T = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
     je(h), Ga(h);
     const v = x(() => t.variant === "primary" || t.variant === "danger"), m = bT(() => t.kind), b = x(
       () => on(
-        "relative inline-flex max-w-full min-w-0 select-none items-center justify-center gap-2 whitespace-nowrap border text-[length:var(--ui-font-size)] font-normal outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+        "relative inline-flex max-w-full shrink-0 select-none items-center justify-center gap-2 border text-[length:var(--ui-font-size)] font-normal outline-none transition-[background-color,border-color,color,box-shadow,opacity] duration-[var(--ui-motion-fast)] active:transition-none ease-[var(--ui-motion-ease)] disabled:pointer-events-none focus-visible:shadow-[var(--ui-shadow-focus)]",
         t.variant === "text" ? "px-1 py-0.5" : i[t.size],
         (m.value === "tool" || t.variant === "text") && "rounded-[var(--ui-radius-control)]",
         m.value === "action" && t.variant !== "text" && "rounded-[var(--ui-radius-pill)]",
@@ -14743,7 +14747,7 @@ const _T = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
         // primary colour's text with no frame or fill, as iOS's plain tinted button
         // and Material's text button draw it. A press dims it; the tap box stays 44
         // on touch (data-ui-hit) while it is drawn its text's size.
-        t.variant === "text" && "shrink-0 whitespace-nowrap border-transparent bg-transparent font-medium text-[var(--ui-primary)] [--ui-spin-color:var(--ui-primary)] hover:text-[var(--ui-primary-hover)] active:opacity-50 data-[disabled]:text-[var(--ui-text-disabled)]",
+        t.variant === "text" && "border-transparent bg-transparent font-medium text-[var(--ui-primary)] [--ui-spin-color:var(--ui-primary)] hover:text-[var(--ui-primary-hover)] active:opacity-50 data-[disabled]:text-[var(--ui-text-disabled)]",
         t.variant === "danger" && "border-[var(--ui-danger)] bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger-foreground)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-hover)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-active)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:shadow-none data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[color-mix(in_srgb,var(--ui-danger)_12%,var(--ui-surface))] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))]",
         // A destructive choice beside the main action (Replace theirs next to Save as copy): the grey control with a red edge and label.
         t.variant === "danger-outline" && "border-[var(--ui-danger)] bg-[var(--ui-control-bg)] text-[var(--ui-danger-text)] shadow-[var(--ui-shadow-control)] [--ui-spin-color:var(--ui-danger)] hover:border-[var(--ui-danger-hover)] hover:bg-[var(--ui-danger-soft)] active:border-[var(--ui-danger-active)] active:bg-[var(--ui-danger-soft)] active:shadow-[var(--ui-shadow-control-active)] data-[disabled]:border-[color-mix(in_srgb,var(--ui-danger)_30%,var(--ui-surface))] data-[disabled]:bg-[var(--ui-control-bg-disabled)] data-[disabled]:text-[color-mix(in_srgb,var(--ui-danger)_55%,var(--ui-text))] data-[disabled]:shadow-none"
@@ -14771,7 +14775,7 @@ const _T = ["type", "disabled", "data-disabled", "data-loading", "data-kind", "d
       se("span", {
         ref_key: "labelEl",
         ref: s,
-        class: le(["ui-button-label min-w-0 truncate", u.value && "[&>:first-child]:mr-2", f.value && "[&>:last-child]:ml-2"]),
+        class: le(["ui-button-label min-w-0 whitespace-normal text-center [overflow-wrap:break-word]", u.value && "[&>:first-child]:mr-2", f.value && "[&>:last-child]:ml-2"]),
         "data-icon-only": c.value || void 0,
         "data-lead": u.value || void 0,
         "data-trail": f.value || void 0

package/dist/reka-runtime.json

@@ -3,7 +3,7 @@
   "version": "2.11.0",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "254a74449fede8e26aa864e795730dad7fdf41447853995f72f401cf9eba4e77",
-  "bundleSha256": "dbeb13fb02f04d8b92cddbbfb738c1cbb7abe8ca4cd39328a7940534a3a61818",
+  "bundleSha256": "36ed6ae51061b6ce7bd7074f74ac406cba8cf01e91b0d8f9e7ed8f4c4b2b0a71",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "287bfb604318c4202769e4b5191896eaf0e52a952e1de898967cbe09467fcfda",
     "DismissableLayer/DismissableLayer.js": "3c8d248f0a32e01f89ca1f6202b1bb691bf5d0e4012a92535e161c35e69cdc32",