@synopackageland/ui 0.14.7 → 0.14.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.14.9 (2026-10-23)
+
+- `Link` keeps short labels on one line inside content-sized wrappers, including inline-flex parents. Its horizontal hit padding and keyboard focus ring remain; long labels still wrap within the container.
+
+## 0.14.8 (2026-10-23)
+
+Visual change: the page behind cards, corners and shadows. Props, slots and exports stay as they were.
+
+- `--ui-bg` is a cool page grey (`#f0f2f5`, the hue of Storage Manager's Overview one step deeper) instead of white. A page of cards sits on it in every presentation: `PageContent surface="flat"`, and now `surface="auto"` when the page holds a `Card` or `Surface`; those top-level cards keep a 1px frame (`--ui-border`, the same grey as the web border) and take `--ui-shadow-card`. Pages without cards (lists, Control Panel style forms) and `surface="card"` stay white. The web canvas defaults to `--ui-bg`.
+- Shadows are one soft, layered set: `--ui-shadow-card`, `--ui-shadow-menu` and `--ui-shadow-dialog` use a low-opacity blue-grey instead of 16% / 30% / 60% black. The web card shadow, the phone drawer and the `Slider` and `Switch` thumbs use these tokens instead of their own values.
+- Corners stay within 2px of a card: a message box is 6px (was 8px). The web and phone presentations use 6px for cards and navigation rows (were 10px and 8px) and 8px for dialogs and bottom sheets (were 3px/8px and 12px). Literal 2px and 8px radii now use the radius tokens.
+- `InfoMask` keeps DSM's white mask (it was drawn from `--ui-bg`).
+- Workbench dark mode: three layers (page `#11161c`, card `#1f2832`, menu and dialog `#2b3541`), quieter card frames (`--ui-border-subtle`), a dark inset fill and a dark shadow set.
+
 ## 0.14.7 (2026-10-23)
 
 Visual change: buttons in `SettingsSection` and `Card` footers and `Notification` actions change shape. Props, slots and exports stay as they were.

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** Web/portal: auto/card use the white content area; flat uses the dashboard canvas. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
+    /** card uses the white content area; flat uses the page grey; auto is white unless the page holds a card, then grey like flat. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
     surface?: 'auto' | 'flat' | 'card' | 'none';
     /**
      * `'fill'` takes the container's height and does not scroll: the header,

package/dist/index.js

@@ -18556,7 +18556,7 @@ const Z_ = ["disabled", "aria-label"], J_ = { class: "relative min-w-0 flex-1" }
             }, 8, ["class"]),
             I(i(_b), ne(i(D)(), {
               class: i(Oe)(
-                "block size-4 rounded-full border border-[var(--ui-border-strong)] bg-[var(--ui-surface-raised)] shadow-sm outline-none focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)]",
+                "block size-4 rounded-full border border-[var(--ui-border-strong)] bg-[var(--ui-surface-raised)] shadow-[var(--ui-shadow-card)] outline-none focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)]",
                 i(n).disabled ? "cursor-default opacity-50" : "cursor-pointer hover:border-[var(--ui-control-border-hover)] hover:bg-[var(--ui-surface-hover)] active:bg-[var(--ui-control-bg-active)]"
               ),
               onFocus: R[0] || (R[0] = (F) => p.value = !0),
@@ -18801,7 +18801,7 @@ const Z_ = ["disabled", "aria-label"], J_ = { class: "relative min-w-0 flex-1" }
               onClick: W
             }), [
               V("span", {
-                class: "relative block size-4 shrink-0 overflow-hidden rounded-[2px] border border-[var(--ui-border)]",
+                class: "relative block size-4 shrink-0 overflow-hidden rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)]",
                 style: ke(C.value < 1 ? { backgroundImage: _1, backgroundSize: "8px 8px" } : void 0),
                 "data-testid": "color-picker-preview"
               }, [
@@ -18867,7 +18867,7 @@ const Z_ = ["disabled", "aria-label"], J_ = { class: "relative min-w-0 flex-1" }
                     onClick: (de) => R(se.value)
                   }, [
                     V("span", {
-                      class: "block size-full rounded-[2px] border border-[var(--ui-border-strong)]",
+                      class: "block size-full rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-strong)]",
                       style: ke({ backgroundColor: se.value })
                     }, null, 4)
                   ], 42, g1))), 128))
@@ -19025,7 +19025,7 @@ const Z_ = ["disabled", "aria-label"], J_ = { class: "relative min-w-0 flex-1" }
         })
       }), {
         default: _(() => [
-          I(i(F0), { class: "block size-3.5 translate-x-[1px] rounded-full bg-white shadow-sm transition-transform duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:translate-x-[15px]" })
+          I(i(F0), { class: "block size-3.5 translate-x-[1px] rounded-full bg-white shadow-[var(--ui-shadow-card)] transition-transform duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:translate-x-[15px]" })
         ]),
         _: 1
       }, 16, ["model-value", "disabled"]),
@@ -25122,7 +25122,7 @@ const Pc = "-ml-1 flex items-center justify-start gap-1", GE = ["data-ui-data-vi
           "data-ui-cell-primary": "",
           "data-ui-tooltip-hint": e.openLabel,
           disabled: e.openDisabled,
-          class: te([o.value, "m-0 -mx-0.5 min-w-0 max-w-full rounded-[2px] border-0 bg-transparent px-0.5 py-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline"]),
+          class: te([o.value, "m-0 -mx-0.5 min-w-0 max-w-full rounded-[var(--ui-radius-sm)] border-0 bg-transparent px-0.5 py-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline"]),
           onClick: l[0] || (l[0] = (s) => r.$emit("open"))
         }, [
           S(r.$slots, "default", {}, () => [
@@ -25163,7 +25163,7 @@ const Pc = "-ml-1 flex items-center justify-start gap-1", GE = ["data-ui-data-vi
 }, uT = {
   "data-ui-cell-status-label": "",
   tabindex: "0",
-  class: "-mx-0.5 min-w-0 truncate rounded-[2px] px-0.5 outline-none focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)]"
+  class: "-mx-0.5 min-w-0 truncate rounded-[var(--ui-radius-sm)] px-0.5 outline-none focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)]"
 }, dT = {
   key: 1,
   "data-ui-cell-status-label": "",
@@ -28161,7 +28161,7 @@ const oP = { class: "mb-3 flex flex-wrap items-start justify-between gap-3" }, r
                 onClick: (fe) => ue(Te)
               }, [
                 V("span", {
-                  class: te(["size-3.5 shrink-0 rounded-[2px] border border-[var(--ui-border)]", L(String(Te.index))]),
+                  class: te(["size-3.5 shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)]", L(String(Te.index))]),
                   style: ke(R(String(Te.index))),
                   "aria-hidden": "true"
                 }, null, 6),
@@ -28285,7 +28285,7 @@ const oP = { class: "mb-3 flex flex-wrap items-start justify-between gap-3" }, r
 }, kP = ["inert", "aria-hidden"], CP = {
   key: 0,
   class: "z-[1] flex [grid-area:1/1] items-center justify-center overflow-auto p-4",
-  style: { background: "color-mix(in srgb, var(--ui-bg) 72%, transparent)" }
+  style: { background: "color-mix(in srgb, var(--ui-surface) 72%, transparent)" }
 }, SP = ["aria-label"], II = /* @__PURE__ */ q({
   __name: "InfoMask",
   props: {
@@ -33145,7 +33145,7 @@ const KO = {
       rel: s.value,
       "aria-disabled": e.disabled || void 0,
       tabindex: e.disabled ? -1 : void 0,
-      class: te(["-mx-0.5 inline-flex max-w-full items-center gap-1 rounded-[var(--ui-radius-sm)] text-[var(--ui-primary)] underline underline-offset-2 px-0.5 outline-none hover:text-[var(--ui-primary-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]", e.disabled ? "cursor-default opacity-50" : "cursor-pointer"]),
+      class: te(["inline-flex max-w-full items-center gap-1 rounded-[var(--ui-radius-sm)] text-[var(--ui-primary)] underline underline-offset-2 px-0.5 outline-none hover:text-[var(--ui-primary-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]", e.disabled ? "cursor-default opacity-50" : "cursor-pointer"]),
       "data-syno-pkg-land-ui": "",
       onClick: u
     }, [

package/dist/json-preview/preview.js

@@ -22255,7 +22255,7 @@ const dP = ["for"], fP = {
         })
       }), {
         default: I(() => [
-          W(p(eP), { class: "block size-3.5 translate-x-[1px] rounded-full bg-white shadow-sm transition-transform duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:translate-x-[15px]" })
+          W(p(eP), { class: "block size-3.5 translate-x-[1px] rounded-full bg-white shadow-[var(--ui-shadow-card)] transition-transform duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:translate-x-[15px]" })
         ]),
         _: 1
       }, 16, ["model-value", "disabled"]),
@@ -24261,7 +24261,7 @@ const EI = "-ml-1 flex items-center justify-start gap-1", PI = ["data-ui-data-vi
           "data-ui-cell-primary": "",
           "data-ui-tooltip-hint": e.openLabel,
           disabled: e.openDisabled,
-          class: te([o.value, "m-0 -mx-0.5 min-w-0 max-w-full rounded-[2px] border-0 bg-transparent px-0.5 py-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline"]),
+          class: te([o.value, "m-0 -mx-0.5 min-w-0 max-w-full rounded-[var(--ui-radius-sm)] border-0 bg-transparent px-0.5 py-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline"]),
           onClick: a[0] || (a[0] = (s) => i.$emit("open"))
         }, [
           R(i.$slots, "default", {}, () => [
@@ -24302,7 +24302,7 @@ const EI = "-ml-1 flex items-center justify-start gap-1", PI = ["data-ui-data-vi
 }, KI = {
   "data-ui-cell-status-label": "",
   tabindex: "0",
-  class: "-mx-0.5 min-w-0 truncate rounded-[2px] px-0.5 outline-none focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)]"
+  class: "-mx-0.5 min-w-0 truncate rounded-[var(--ui-radius-sm)] px-0.5 outline-none focus-visible:shadow-[0_0_0_1px_var(--ui-primary),0_0_0_3px_var(--ui-focus-ring)]"
 }, ZI = {
   key: 1,
   "data-ui-cell-status-label": "",

package/dist/reka-runtime.json

@@ -3,7 +3,7 @@
   "version": "2.10.5",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "14f10159b60d48ac7a0686f58faf7a30e99898dc267b3c032cf2bdd6052dc52b",
-  "bundleSha256": "31923fb1aa37038cbb1c76cc2609d1d3c95dd1e7481e99f5f13b67aff922a680",
+  "bundleSha256": "52e3a1467592c4c601118becdd6c7bacaa68d5a777758af8acb9958e0a22ad6c",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "657592f283cb6fd25454abd284a0024af21936cb56e05b762ff0d22b6a979d32",
     "DismissableLayer/DismissableLayer.js": "da05ca544d9822a8e2b71057e78c0e1ef59423aa3893534338fb58e1ecbd1a8d",