@ai-matrx/design-system 0.86.355 → 0.86.356

package/CHANGELOG.md

@@ -1,9 +1,29 @@
 # Changelog
 
+## 0.86.356
+
+- Slider forwards an explicitly supplied `aria-valuetext` to its focusable thumb, so controls such as PageCompare announce their formatted value. Keyboard and numeric value behavior are unchanged. Consumer action: none.
+
+- SwipeDeck: a full deck (`fill` / `fullscreen`) takes keyboard focus back when the card changes, so the arrows keep
+  answering after an answer left focus outside the deck (a menu portal, a host control). Never from a field being
+  typed in, an open dialog or menu. The deck root carries `tabIndex={-1}` (no ring). Consumer action: none.
+
 ## 0.86.355
 
-UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
-Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/design-system/src`.
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff bd26bcae0e 83b6419fe3 -- apps/shared/design-system/src`
+
+Changed shipped source files (9):
+- `apps/shared/design-system/src/desktop/desktop.css`
+- `apps/shared/design-system/src/desktop/split-view.tsx`
+- `apps/shared/design-system/src/desktop/state.tsx`
+- `apps/shared/design-system/src/error-box.tsx`
+- `apps/shared/design-system/src/error-notice.tsx`
+- `apps/shared/design-system/src/error-sentence.ts`
+- `apps/shared/design-system/src/index.ts`
+- `apps/shared/design-system/src/notice-material.css`
+- `apps/shared/design-system/src/styles.css`
 
 ## 0.86.354
 

package/dist/carousel.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   IconButton
-} from "./chunk-XXZA2JUP.js";
+} from "./chunk-2PO3N42Q.js";
 import "./chunk-6NOLVA4E.js";
 import "./chunk-5IR3BZOS.js";
-import "./chunk-ZRHVA3DL.js";
+import "./chunk-AV5C4YLL.js";
 import "./chunk-XERGQT2M.js";
 import "./chunk-WQ2QCMMA.js";
 import "./chunk-YRF22M5S.js";

package/dist/{chunk-XXZA2JUP.js → chunk-2PO3N42Q.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-5IR3BZOS.js";
 import {
   Slider
-} from "./chunk-ZRHVA3DL.js";
+} from "./chunk-AV5C4YLL.js";
 import {
   Label
 } from "./chunk-XERGQT2M.js";
@@ -4007,4 +4007,4 @@ export {
   TileCard,
   TileCardGrid
 };
-//# sourceMappingURL=chunk-XXZA2JUP.js.map
+//# sourceMappingURL=chunk-2PO3N42Q.js.map

package/dist/{chunk-ZRHVA3DL.js → chunk-AV5C4YLL.js}

@@ -57,6 +57,7 @@ var Slider = React.forwardRef(({ className, size = "md", ...props }, ref) => {
           {
             "data-slot": "slider-thumb",
             ...props["aria-label"] ? { "aria-label": props["aria-label"] } : {},
+            ...props["aria-valuetext"] !== void 0 ? { "aria-valuetext": props["aria-valuetext"] } : {},
             className: cn(
               "relative block cursor-grab rounded-full border border-primary/50 bg-background shadow transition-colors active:cursor-grabbing",
               "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -79,4 +80,4 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 export {
   Slider
 };
-//# sourceMappingURL=chunk-ZRHVA3DL.js.map
+//# sourceMappingURL=chunk-AV5C4YLL.js.map

package/dist/{chunk-ZRHVA3DL.js.map → chunk-AV5C4YLL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/slider.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Slider — the range control (46 host import sites).\n *\n * Ported from matrx-frontend `components/ui/slider.tsx`. Two things the host\n * copy could not do, both fixed here rather than in a fork:\n *\n * 1. A 16px THUMB IS NOT A TOUCH TARGET. The stock thumb is `h-4 w-4`, well\n *    under the 44px Apple HIG minimum, so a slider that worked with a mouse\n *    was a coin-flip with a thumb. The visible thumb keeps its size (`size`\n *    controls it), and an invisible `::after` pseudo-target expands the hit\n *    area to 44px on coarse pointers without changing the layout — the same\n *    trick `ResizableHandle` uses for mouse tolerance.\n *\n * 2. DENSITY IS A PROP, NOT A FORK (C18). `size=\"sm|md|lg\"` picks the track\n *    height and thumb diameter together, so a dense admin panel and a\n *    touch-first settings screen use ONE component.\n *\n * Multi-thumb ranges work: a `Thumb` is rendered per value, which is what\n * Radix requires and what the host copy (a single hardcoded Thumb) got wrong\n * for any `value` array longer than one.\n */\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\n\nimport { cn } from \"./cn\";\n\nexport type SliderSize = \"sm\" | \"md\" | \"lg\";\n\nconst TRACK_CLASSES: Record<SliderSize, string> = {\n  sm: \"h-1\",\n  md: \"h-1.5\",\n  lg: \"h-2.5\",\n};\n\nconst THUMB_CLASSES: Record<SliderSize, string> = {\n  sm: \"h-3.5 w-3.5\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n};\n\nexport interface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n  /** Track + thumb scale. Default `md`. */\n  size?: SliderSize;\n}\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size = \"md\", ...props }, ref) => {\n  // One Thumb per value — controlled `value` wins, then `defaultValue`, then\n  // the single-thumb default. Radix renders nothing sensible if the count is\n  // wrong, which is how the host copy silently dropped a range's upper thumb.\n  const thumbCount = Math.max(\n    1,\n    (props.value ?? props.defaultValue ?? [0]).length,\n  );\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      data-slot=\"slider\"\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"relative w-full grow overflow-hidden rounded-full bg-primary/20\",\n          TRACK_CLASSES[size],\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute h-full bg-primary data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, index) => (\n        <SliderPrimitive.Thumb\n          key={index}\n          data-slot=\"slider-thumb\"\n          // The thumb is the focusable slider: it carries the control's name (a label on the root alone leaves it unnamed).\n          {...(props[\"aria-label\"] ? { \"aria-label\": props[\"aria-label\"] } : {})}\n          className={cn(\n            \"relative block cursor-grab rounded-full border border-primary/50 bg-background shadow transition-colors active:cursor-grabbing\",\n            \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n            \"disabled:pointer-events-none disabled:opacity-50\",\n            // Ruling 1 — invisible 44px target, coarse pointers only, so a\n            // dense desktop row keeps its exact hit behavior.\n            \"after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']\",\n            \"pointer-coarse:after:h-11 pointer-coarse:after:w-11\",\n            THUMB_CLASSES[size],\n          )}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n});\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n"],"mappings":";;;;;;AAwBA,YAAY,qBAAqB;AACjC,YAAY,WAAW;AAqCnB,SAkBI,KAlBJ;AA/BJ,IAAM,gBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQA,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AAI/C,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,KACC,MAAM,SAAS,MAAM,gBAAgB,CAAC,CAAC,GAAG;AAAA,EAC7C;AAEA,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAiB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,cAAc,IAAI;AAAA,cAClB;AAAA,YACF;AAAA,YAEA;AAAA,cAAiB;AAAA,cAAhB;AAAA,gBACC,aAAU;AAAA,gBACV,WAAU;AAAA;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QACC,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,UACtC;AAAA,UAAiB;AAAA,UAAhB;AAAA,YAEC,aAAU;AAAA,YAET,GAAI,MAAM,YAAY,IAAI,EAAE,cAAc,MAAM,YAAY,EAAE,IAAI,CAAC;AAAA,YACpE,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA,cAGA;AAAA,cACA;AAAA,cACA,cAAc,IAAI;AAAA,YACpB;AAAA;AAAA,UAbK;AAAA,QAcP,CACD;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,OAAO,cAA8B,qBAAK;","names":[]}
+{"version":3,"sources":["../src/slider.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Slider — the range control (46 host import sites).\n *\n * Ported from matrx-frontend `components/ui/slider.tsx`. Two things the host\n * copy could not do, both fixed here rather than in a fork:\n *\n * 1. A 16px THUMB IS NOT A TOUCH TARGET. The stock thumb is `h-4 w-4`, well\n *    under the 44px Apple HIG minimum, so a slider that worked with a mouse\n *    was a coin-flip with a thumb. The visible thumb keeps its size (`size`\n *    controls it), and an invisible `::after` pseudo-target expands the hit\n *    area to 44px on coarse pointers without changing the layout — the same\n *    trick `ResizableHandle` uses for mouse tolerance.\n *\n * 2. DENSITY IS A PROP, NOT A FORK (C18). `size=\"sm|md|lg\"` picks the track\n *    height and thumb diameter together, so a dense admin panel and a\n *    touch-first settings screen use ONE component.\n *\n * Multi-thumb ranges work: a `Thumb` is rendered per value, which is what\n * Radix requires and what the host copy (a single hardcoded Thumb) got wrong\n * for any `value` array longer than one.\n */\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\n\nimport { cn } from \"./cn\";\n\nexport type SliderSize = \"sm\" | \"md\" | \"lg\";\n\nconst TRACK_CLASSES: Record<SliderSize, string> = {\n  sm: \"h-1\",\n  md: \"h-1.5\",\n  lg: \"h-2.5\",\n};\n\nconst THUMB_CLASSES: Record<SliderSize, string> = {\n  sm: \"h-3.5 w-3.5\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n};\n\nexport interface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n  /** Track + thumb scale. Default `md`. */\n  size?: SliderSize;\n}\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size = \"md\", ...props }, ref) => {\n  // One Thumb per value — controlled `value` wins, then `defaultValue`, then\n  // the single-thumb default. Radix renders nothing sensible if the count is\n  // wrong, which is how the host copy silently dropped a range's upper thumb.\n  const thumbCount = Math.max(\n    1,\n    (props.value ?? props.defaultValue ?? [0]).length,\n  );\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      data-slot=\"slider\"\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"relative w-full grow overflow-hidden rounded-full bg-primary/20\",\n          TRACK_CLASSES[size],\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute h-full bg-primary data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, index) => (\n        <SliderPrimitive.Thumb\n          key={index}\n          data-slot=\"slider-thumb\"\n          // The thumb is the focusable slider: it carries the control's name (a label on the root alone leaves it unnamed).\n          {...(props[\"aria-label\"] ? { \"aria-label\": props[\"aria-label\"] } : {})}\n          {...(props[\"aria-valuetext\"] !== undefined ? { \"aria-valuetext\": props[\"aria-valuetext\"] } : {})}\n          className={cn(\n            \"relative block cursor-grab rounded-full border border-primary/50 bg-background shadow transition-colors active:cursor-grabbing\",\n            \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n            \"disabled:pointer-events-none disabled:opacity-50\",\n            // Ruling 1 — invisible 44px target, coarse pointers only, so a\n            // dense desktop row keeps its exact hit behavior.\n            \"after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']\",\n            \"pointer-coarse:after:h-11 pointer-coarse:after:w-11\",\n            THUMB_CLASSES[size],\n          )}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n});\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n"],"mappings":";;;;;;AAwBA,YAAY,qBAAqB;AACjC,YAAY,WAAW;AAqCnB,SAkBI,KAlBJ;AA/BJ,IAAM,gBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQA,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AAI/C,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,KACC,MAAM,SAAS,MAAM,gBAAgB,CAAC,CAAC,GAAG;AAAA,EAC7C;AAEA,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAiB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,cAAc,IAAI;AAAA,cAClB;AAAA,YACF;AAAA,YAEA;AAAA,cAAiB;AAAA,cAAhB;AAAA,gBACC,aAAU;AAAA,gBACV,WAAU;AAAA;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QACC,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,UACtC;AAAA,UAAiB;AAAA,UAAhB;AAAA,YAEC,aAAU;AAAA,YAET,GAAI,MAAM,YAAY,IAAI,EAAE,cAAc,MAAM,YAAY,EAAE,IAAI,CAAC;AAAA,YACnE,GAAI,MAAM,gBAAgB,MAAM,SAAY,EAAE,kBAAkB,MAAM,gBAAgB,EAAE,IAAI,CAAC;AAAA,YAC9F,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA,cAGA;AAAA,cACA;AAAA,cACA,cAAc,IAAI;AAAA,YACpB;AAAA;AAAA,UAdK;AAAA,QAeP,CACD;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,OAAO,cAA8B,qBAAK;","names":[]}

package/dist/controls.cjs

@@ -3960,6 +3960,7 @@ var Slider = React21.forwardRef(({ className, size = "md", ...props }, ref) => {
           {
             "data-slot": "slider-thumb",
             ...props["aria-label"] ? { "aria-label": props["aria-label"] } : {},
+            ...props["aria-valuetext"] !== void 0 ? { "aria-valuetext": props["aria-valuetext"] } : {},
             className: cn(
               "relative block cursor-grab rounded-full border border-primary/50 bg-background shadow transition-colors active:cursor-grabbing",
               "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",