@ai-matrx/design-system 0.20.22 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,44 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.21.1
4
+
5
+ Automatic changed-only republish (docs/metadata drift since the last tag — see
6
+ `git diff npm/design-system/v0.21.0..npm/design-system/v0.21.1 -- apps/shared/design-system`).
7
+ No source changes intended and no consumer action required.
8
+
9
+ ## 0.21.0
10
+
11
+ **The Button touch floor.** Every rung of the size scale below `xl` was shorter
12
+ than the 44px platform touch target (`xs` 24, `icon-sm` 28, `sm` 32, `roundIcon`
13
+ 32, `default`/`md` 36, `icon` 36, `lg` 40). Measured live at 390x844 on a
14
+ consumer route, ALL SEVEN design-system Buttons in the viewport were under the
15
+ floor — four at 32px, two at 28px.
16
+
17
+ `Button` now stamps `data-tap-floor` on those rungs (and
18
+ `data-tap-floor-square` on the icon boxes), and `styles.css` lifts them to
19
+ 2.75rem under `@media (pointer: coarse)` ONLY — deliberately without the
20
+ `(max-width: 1023px)` half the dialog-footer floor carries, because a narrow
21
+ desktop window is a small viewport, not a finger. **Desktop density is
22
+ unchanged.**
23
+
24
+ The floor covers every sub-44 rung rather than `sm` alone because lifting one
25
+ rung inverts the scale: `sm` (32) would render taller on a phone than `default`
26
+ (36) and `lg` (40). It grows the control (`min-height`/`min-width`) instead of
27
+ laying an invisible 44px ring over a 32px pill — on a toolbar of adjacent `sm`
28
+ buttons the rings overlap in the gap and one button eats taps aimed at its
29
+ neighbour, which is unacceptable where a neighbour is destructive.
30
+
31
+ `min-width` is raised only on the square rungs, so text labels are not
32
+ stretched. Opt out per control with `data-touch-exempt`.
33
+
34
+ Guard: `src/button.test.tsx` § "Button touch floor" derives each rung's height
35
+ from `buttonVariants` itself — a new short rung fails without being listed —
36
+ and pins the no-inversion ordering. Proven red with the attribute removed.
37
+
38
+ **Consumer action:** none required. Expect touch-device layouts to grow where
39
+ small buttons sit in fixed-height rows; a control that is genuinely not a finger
40
+ target takes `data-touch-exempt` with a reason at the call site.
41
+
3
42
  ## 0.20.22
4
43
 
5
44
  Automatic changed-only republish (docs/metadata drift since the last tag — see
@@ -120,13 +120,28 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
120
120
  }
121
121
  }
122
122
  );
123
+ var TOUCH_FLOOR_SIZES = /* @__PURE__ */ new Set([
124
+ "xs",
125
+ "sm",
126
+ "default",
127
+ "md",
128
+ "lg",
129
+ "icon",
130
+ "icon-sm",
131
+ "roundIcon"
132
+ ]);
133
+ var SQUARE_SIZES = /* @__PURE__ */ new Set(["icon", "icon-sm", "roundIcon"]);
123
134
  var Button = React.forwardRef(
124
135
  ({ className, variant, size, asChild = false, ...props }, ref) => {
125
136
  const Component = asChild ? import_react_slot.Slot : "button";
137
+ const resolvedSize = size ?? "default";
126
138
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
127
139
  Component,
128
140
  {
129
141
  className: cn(buttonVariants({ variant, size, className })),
142
+ "data-matrx-button": "",
143
+ "data-tap-floor": TOUCH_FLOOR_SIZES.has(resolvedSize) ? "" : void 0,
144
+ "data-tap-floor-square": SQUARE_SIZES.has(resolvedSize) ? "" : void 0,
130
145
  ref,
131
146
  ...props
132
147
  }