dowel-ui 0.26.1 → 0.28.0

package/dist/theme.css

@@ -618,6 +618,25 @@
   --tracking-caption: 0.085em;
   --tracking-tight: -0.01em;
 
+  /*
+   * A step between the steps.
+   *
+   * The spacing scale runs in fours - 2, 4, 6, 8 - and four different
+   * primitives independently reached past it for three pixels: the gap
+   * between segments of a rating and of an axis, the gap between cells of a
+   * heatmap, and how far a tooltip's arrow tucks under its popup. Four hands
+   * arriving at the same number is not four accidents; it is a step the scale
+   * was missing, and each of them wrote `[3px]` because there was nothing to
+   * name.
+   *
+   * It exists for hairline gaps between things that are themselves small -
+   * where two pixels reads as touching and four as separate objects. Nothing
+   * larger belongs here: this is the bottom of the scale, not a licence to
+   * measure by eye.
+   */
+  --spacing-hair: 3px;
+
+  /*
   /* Easing. `out` for anything the user asked for - it arrives fast and
    * settles, which reads as responsive. `in-out` for something moving on its
    * own. `in` is deliberately absent: it starts slowly, which on a control
@@ -633,6 +652,148 @@
   --shadow-lift: var(--shadow-lift);
   --shadow-raise: var(--shadow-raise);
   --shadow-float: var(--shadow-float);
+
+  /*
+   * The smallest a pointer target may be.
+   *
+   * 24 CSS pixels, which is WCAG 2.2's 2.5.8 at AA. Not a matter of taste, and
+   * measured rather than assumed: a live run of the stand found four different
+   * answers to the same question in one set - a chip's cross at 16, Copyable
+   * at 19, CopyButton at 21, a search field's clear at 24. Three of the four
+   * fail, and the failure is silent. A cross missed by a thumb on a tablet, or
+   * by anyone whose hand is not steady, does not delete the tag and does not
+   * say anything either.
+   *
+   * It is a size token rather than a spacing step because it is a floor, not a
+   * rhythm: nothing is ever `--target-min` tall on purpose, things are at
+   * least that big. `size-target` and `min-size-target` come free from the
+   * namespace, but the way a primitive usually reaches it is `target-min`
+   * below, which grows the hit area without growing the glyph.
+   */
+  --size-target: 24px;
+}
+
+/*
+ * `target-min` - visually smaller, clickably larger.
+ *
+ * The obvious fix for a 16px cross is to make it 24px, and it is the wrong
+ * one: a chip is a small thing by design and a cross a third of its height
+ * reads as a button with a chip around it. The set's appearance is a
+ * decision, and an accessibility floor should not overturn it.
+ *
+ * So the target grows and the glyph does not. The pseudo-element is centred on
+ * the control, takes its size, and refuses to go under the floor - so a
+ * control already large enough is untouched, and a smaller one gains an
+ * invisible margin of hit area on every side.
+ *
+ * `position: relative` comes with it rather than being left to the caller: a
+ * target that silently does nothing because its parent forgot to establish a
+ * containing block is exactly the failure this exists to prevent.
+ *
+ * Not `padding`, which was the other candidate: padding moves the glyph inside
+ * its box and changes how the control sits in a flex row, so every call site
+ * would need a compensating negative margin. This changes nothing about
+ * layout.
+ */
+@utility target-min {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    width: 100%;
+    height: 100%;
+    min-width: var(--size-target);
+    min-height: var(--size-target);
+  }
+}
+
+/*
+ * How tall a control is, and how much room a screen gives each row.
+ *
+ * `h-9` appeared in nine primitives - every field the set has - each spelling
+ * it out, which is why `Input` could not be made compact without editing
+ * `Input`. One decision made nine times gets one name.
+ *
+ * **Not in `@theme`, and that is the whole mechanism.** A token declared there
+ * is inlined by the compiler: `h-control` came out as `height: 36px`, the
+ * override on a container had nothing to bind to, and the density attribute
+ * did exactly nothing. Measured in the browser rather than assumed - the
+ * container's `--row-control` read 32px while the field it contained stayed
+ * 36. Tailwind also writes a fallback for any `var()` it recognises from the
+ * theme, so the name has to live outside the theme's namespaces entirely.
+ *
+ * Declared here as plain custom properties and turned into utilities by hand
+ * below, the reference survives, and an override on an ancestor reaches every
+ * control under it - which is what makes density a property of a region
+ * rather than of a component.
+ */
+:root {
+  --row-control: 36px;
+  --row-control-sm: 32px;
+  --row-control-lg: 40px;
+
+  /* The same question for a table, whose rows are sized by what is above and
+   * below the text rather than by a height. `Table` had its own `density`
+   * prop for this, with its own words - `base` and `dense` - which meant the
+   * set used one word for two mechanisms and a product had to set both. */
+  --row-cell: 10px;
+}
+
+@utility h-control {
+  height: var(--row-control);
+}
+
+@utility py-row {
+  padding-block: var(--row-cell);
+}
+
+@utility h-control-sm {
+  height: var(--row-control-sm);
+}
+
+@utility h-control-lg {
+  height: var(--row-control-lg);
+}
+
+/*
+ * Density.
+ *
+ * Two answers to one question, and the set had neither: a product wanting a
+ * tighter table wrote `h-8` at every call site, which is the drift the scale
+ * exists to stop, one screen at a time.
+ *
+ * **It is an attribute on a container, not a prop on a component.** A prop
+ * would have to be added to every primitive, threaded through every wrapper a
+ * product writes, and passed by hand at each call site - and a primitive
+ * written next year would not have it. An attribute is inherited:
+ *
+ *     <form data-density="compact">   …every field inside it…
+ *
+ * That reaches components which did not exist when the product was built, and
+ * a product's own components too, as long as they measure in `h-control` like
+ * everything else.
+ *
+ * The floor does not move with it. `--size-target` stays 24px at every
+ * density, because WCAG does not care how tight a table is - which is exactly
+ * why `target-min` grows the hit area rather than the control: a compact row
+ * is still one a hand can hit.
+ */
+[data-density='compact'] {
+  --row-control: 32px;
+  --row-control-sm: 28px;
+  --row-control-lg: 36px;
+  --row-cell: 6px;
+}
+
+[data-density='comfortable'] {
+  --row-control: 40px;
+  --row-control-sm: 36px;
+  --row-control-lg: 44px;
+  --row-cell: 14px;
 }
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.26.1",
+  "version": "0.28.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",