@kenlo/sds-design-system 0.9.9

package/components/Uploader/Uploader.css

@@ -0,0 +1,180 @@
+/* SDS Uploader.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Uploader/Uploader.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-uploader--dragging
+ */
+
+/* Three literals snapped to the system. The overlay that dims a preview is --color-scrim,
+   black in both themes for the same reason the modal's veil is. The two hover states on it
+   sit on that dark overlay rather than on the page, so they read --color-opacity-inverse-*,
+   the family that runs against the theme — the ordinary one would draw a dark veil on an
+   already dark surface. The alphas move from .15/.25 to the .10/.20 the scale offers. *//* ============================================================
+   SDS Uploader
+   ============================================================ */
+
+.sds-uploader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-height: 140px;
+  padding: var(--spacing-5) var(--spacing-4);
+  border: 2px dashed var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--color-neutral-10);
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-sm);
+  color: var(--body-color);
+  text-align: center;
+  transition: border-color 120ms ease, background-color 120ms ease;
+  box-sizing: border-box;
+}
+.sds-uploader:hover,
+.sds-uploader--dragging {
+  border-color: var(--color-primary-50-solid);
+  background: var(--color-primary-10);
+}
+.sds-uploader:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+/* ── Hidden input ── */
+.sds-uploader__input {
+  display: none;
+}
+/* ── Icon ── */
+.sds-uploader__icon {
+  display: inline-flex;
+  font-size: 24px;
+  margin-bottom: var(--spacing-1);
+}
+/* ── Hint text ── */
+.sds-uploader__hint {
+  color: var(--color-neutral-50);
+}
+/* ── Formats ── */
+.sds-uploader__formats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-top: var(--spacing-1);
+}
+/* ── Filled state ── */
+.sds-uploader--filled {
+  padding: 0;
+  border: 1px solid var(--border-interactive-color);
+  border-style: solid;
+  overflow: hidden;
+  min-height: unset;
+  cursor: default;
+  position: relative;
+  display: block;
+}
+.sds-uploader__preview {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+/* ── Overlay actions ── */
+.sds-uploader__overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  background: var(--color-scrim);
+}
+.sds-uploader__overlay .sds-icon-button--neutral .sds-icon-button__icon {
+  color: var(--color-white);
+}
+.sds-uploader__overlay .sds-icon-button--24:hover:not(:disabled)::before {
+  background: var(--color-opacity-inverse-10);
+}
+.sds-uploader__overlay .sds-icon-button--24:active:not(:disabled)::before {
+  background: var(--color-opacity-inverse-20);
+}
+/* ── Edit modal body ── */
+.sds-uploader__edit-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+.sds-uploader__edit-canvas {
+  position: relative;
+  background: repeating-conic-gradient(var(--color-neutral-20) 0% 25%, var(--component-bg-color) 0% 50%)
+    0 0 / 16px 16px;
+  border: 1px solid var(--color-neutral-50);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  overflow: hidden;
+}
+.sds-uploader__edit-img {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+  display: block;
+  transform-origin: center center;
+  transform: scale(var(--img-zoom, 1)) rotate(var(--img-rotate, 0deg));
+  transition: transform 200ms ease;
+  pointer-events: none;
+}
+/* ── Crop overlay ── */
+.sds-uploader__crop-box {
+  position: absolute;
+  left: var(--crop-x, 10%);
+  top: var(--crop-y, 10%);
+  width: var(--crop-w, 80%);
+  height: var(--crop-h, 80%);
+  border: 2px solid var(--color-white);
+  box-shadow: 0 0 0 9999px var(--color-scrim);
+  cursor: move;
+  box-sizing: border-box;
+}
+.sds-uploader__crop-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--color-white);
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px var(--color-scrim);
+}
+.sds-uploader__crop-handle--nw { top: -5px;    left: -5px;   cursor: nw-resize; }
+.sds-uploader__crop-handle--ne { top: -5px;    right: -5px;  cursor: ne-resize; }
+.sds-uploader__crop-handle--sw { bottom: -5px; left: -5px;   cursor: sw-resize; }
+.sds-uploader__crop-handle--se { bottom: -5px; right: -5px;  cursor: se-resize; }
+/* ── Edit controls ── */
+.sds-uploader__edit-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+}
+
+/* The drop zone is a <button>, which brings the browser's own control styling — these take
+   it off. KDLS uses a div with role="button" and does not need them. */
+button.sds-uploader {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  text-align: center;
+  width: 100%;
+}
+
+/* A file that could not be read. KDLS has no error path at all, so the visitor is left
+   looking at an unchanged drop zone with nothing to explain it. */
+.sds-uploader__error {
+  color: var(--color-error-50);
+}

package/components/Uploader/crop-geometry.js

@@ -0,0 +1,161 @@
+/**
+ * Where the crop box sits and how it moves.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Uploader/Uploader.tsx, where
+ * it lives inside two closures and a useEffect. Pulled out because it is pure arithmetic
+ * with a dozen edge cases — the corner that is being dragged decides which side moves, a
+ * ratio constraint makes the height follow the width, and everything has to stay inside
+ * the canvas — and every one of those is a place an off-by-one hides behind a picture that
+ * looks roughly right.
+ *
+ * Everything is in percentages of the canvas, which is how the CSS positions it. The only
+ * place pixels appear is in converting a ratio, because an aspect ratio is a statement
+ * about pixels and the canvas is rarely square.
+ */
+
+/** The smallest the box may get, in percent, so it cannot be dragged out of existence. */
+export const MIN_SIZE = 10;
+
+export const HANDLES = ['nw', 'ne', 'sw', 'se', 'center'];
+
+/** The default box when there is no constraint: centred, filling most of the canvas. */
+export const FREE_BOX = { x: 10, y: 10, w: 80, h: 80 };
+
+/**
+ * An aspect ratio expressed in the percentage space the box lives in.
+ *
+ * "16:9" is a statement about pixels. The box is measured in percentages of a canvas that
+ * is usually not square, so the ratio has to be scaled by the canvas's own proportions or
+ * a 16:9 crop comes out the wrong shape on every canvas but one.
+ */
+export function ratioInPercentSpace(crop, rect) {
+  if (!crop || !rect?.width || !rect?.height) return null;
+
+  if (typeof crop === 'string') {
+    const parts = crop.split(':').map(Number);
+    if (parts.length !== 2 || parts.some(Number.isNaN) || !parts[1]) return null;
+    return (parts[0] / parts[1]) * (rect.height / rect.width);
+  }
+
+  if (typeof crop === 'object' && crop.width && crop.height) {
+    return (crop.width / crop.height) * (rect.height / rect.width);
+  }
+
+  return null;
+}
+
+/**
+ * The box to start from: centred, and as large as it can be at 80% of the canvas.
+ *
+ * The 80% is KDLS's, and it is the right shape of answer — a crop frame that touches the
+ * edges gives nowhere to grab it from.
+ */
+export function initialCropBox(crop, rect) {
+  if (!crop) return { ...FREE_BOX };
+  if (!rect?.width || !rect?.height) return null;
+
+  const centred = (wPct, hPct) => ({ x: (100 - wPct) / 2, y: (100 - hPct) / 2, w: wPct, h: hPct });
+
+  if (typeof crop === 'string') {
+    const parts = crop.split(':').map(Number);
+    if (parts.length !== 2 || parts.some(Number.isNaN) || !parts[1]) return null;
+    const ratio = parts[0] / parts[1];
+    const widthPx = rect.width * 0.8;
+    const heightPx = widthPx / ratio;
+    // Fit by width if that leaves room; otherwise the height is what is short.
+    if (heightPx <= rect.height * 0.8) {
+      return centred((widthPx / rect.width) * 100, (heightPx / rect.height) * 100);
+    }
+    const cappedHeight = rect.height * 0.8;
+    const cappedWidth = cappedHeight * ratio;
+    return centred((cappedWidth / rect.width) * 100, (cappedHeight / rect.height) * 100);
+  }
+
+  if (typeof crop === 'object' && crop.width && crop.height) {
+    const scale = Math.min(rect.width * 0.8 / crop.width, rect.height * 0.8 / crop.height);
+    return centred(
+      (crop.width * scale / rect.width) * 100,
+      (crop.height * scale / rect.height) * 100,
+    );
+  }
+
+  return null;
+}
+
+/**
+ * The box after a drag, given where it started and how far the pointer has moved.
+ *
+ * `dx` and `dy` are already in percent. `ratio` is the percentage-space ratio from
+ * ratioInPercentSpace, or null for free resizing.
+ */
+export function dragCropBox(start, handle, dx, dy, ratio = null) {
+  let { x, y, w, h } = start;
+
+  if (handle === 'center') {
+    // Moving, not resizing: the size is fixed and only the position is clamped.
+    return {
+      x: Math.max(0, Math.min(100 - w, start.x + dx)),
+      y: Math.max(0, Math.min(100 - h, start.y + dy)),
+      w,
+      h,
+    };
+  }
+
+  // Width: the east handles push the right edge, the west handles pull the left one.
+  if (handle === 'se' || handle === 'ne') {
+    w = Math.max(MIN_SIZE, Math.min(100 - start.x, start.w + dx));
+  } else {
+    const newX = Math.max(0, Math.min(start.x + start.w - MIN_SIZE, start.x + dx));
+    w = start.x + start.w - newX;
+    x = newX;
+  }
+
+  if (ratio !== null) {
+    // Constrained: the height is whatever the ratio says, and a north handle grows upward.
+    h = w / ratio;
+    if (handle === 'nw' || handle === 'ne') y = Math.max(0, start.y + start.h - h);
+  } else if (handle === 'se' || handle === 'sw') {
+    h = Math.max(MIN_SIZE, Math.min(100 - start.y, start.h + dy));
+  } else {
+    const newY = Math.max(0, Math.min(start.y + start.h - MIN_SIZE, start.y + dy));
+    h = start.y + start.h - newY;
+    y = newY;
+  }
+
+  // Whatever the above produced, it has to fit on the canvas.
+  if (x < 0) { w += x; x = 0; }
+  if (y < 0) { h += y; y = 0; }
+  if (x + w > 100) w = 100 - x;
+  if (y + h > 100) h = 100 - y;
+
+  return { x, y, w, h };
+}
+
+export const ZOOM_MIN = 0.5;
+export const ZOOM_MAX = 4;
+export const ZOOM_STEP = 0.25;
+
+export const zoomIn = (zoom) => Math.min(ZOOM_MAX, +(zoom + ZOOM_STEP).toFixed(2));
+export const zoomOut = (zoom) => Math.max(ZOOM_MIN, +(zoom - ZOOM_STEP).toFixed(2));
+export const rotateLeft = (deg) => (deg - 90 + 360) % 360;
+export const rotateRight = (deg) => (deg + 90) % 360;
+
+/** What each mode will take, and how to say so. */
+export const UPLOADER_MODES = ['image', 'document'];
+
+export const ACCEPT = {
+  image: '.jpg,.jpeg,.png,image/jpeg,image/png',
+  document: '.pdf,.docx,.doc,.jpeg,.jpg,.png',
+};
+
+export const FORMATS = {
+  image: 'JPG, JPEG ou PNG',
+  document: 'PDF, DOCX, JPEG ou PNG',
+};
+
+export function assertUploaderMode(mode) {
+  if (!UPLOADER_MODES.includes(mode)) {
+    throw new Error(`Unknown uploader mode: "${mode}". Allowed: ${UPLOADER_MODES.join(', ')}`);
+  }
+  return mode;
+}

package/components/Uploader/uploader.marko

@@ -0,0 +1,269 @@
+<!-- sds-uploader — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Uploader/Uploader.tsx.
+
+     Two states in one component, as in KDLS: a drop zone when there is nothing, and a
+     preview with an editor when there is. The editor is an sds-modal with zoom, rotation
+     and a draggable crop frame.
+
+     The geometry is in crop-geometry.js and tested there — the corner being dragged decides
+     which side moves, a ratio makes the height follow the width, and everything has to stay
+     on the canvas. Each of those is a place an off-by-one hides behind a picture that looks
+     roughly right, and a crop that is subtly wrong is a photograph published with someone's
+     head cut off.
+
+     Divergences:
+
+     The empty state is a <button>, not a div with role="button" and tabIndex. KDLS's needs
+     three hand-written behaviours to imitate one — Enter, Space and focus — and it still
+     announces nothing about what it does. This one is a real control with a label.
+
+     KDLS's download button has no handler at all: it renders, it is focusable, and clicking
+     it does nothing. Here it is rendered only when the caller passes onDownload, because a
+     control that cannot be told what to do should not be drawn.
+
+     The file reader reports failure. KDLS attaches onload and nothing else, so a file that
+     cannot be read leaves the visitor looking at an unchanged drop zone with no idea why. -->
+
+import {
+  initialCropBox, dragCropBox, ratioInPercentSpace, zoomIn, zoomOut, rotateLeft, rotateRight,
+  assertUploaderMode, ACCEPT, FORMATS, FREE_BOX,
+} from "./crop-geometry.js";
+import deleteIcon from "../../icons/generated/fluent-delete-regular.marko";
+import downloadIcon from "../../icons/generated/fluent-arrow-download-regular.marko";
+import cropIcon from "../../icons/generated/fluent-crop-regular.marko";
+import zoomOutIcon from "../../icons/generated/fluent-zoom-out-regular.marko";
+import zoomInIcon from "../../icons/generated/fluent-zoom-in-regular.marko";
+import rotateLeftIcon from "../../icons/generated/fluent-arrow-rotate-counterclockwise-regular.marko";
+import rotateRightIcon from "../../icons/generated/fluent-arrow-rotate-clockwise-regular.marko";
+import imageIcon from "../../icons/generated/fluent-image-regular.marko";
+import documentIcon from "../../icons/generated/fluent-document-regular.marko";
+import infoIcon from "../../icons/generated/fluent-info-regular.marko";
+
+class {
+  onCreate() {
+    this.state = {
+      dragging: false,
+      editing: false,
+      zoom: 1,
+      rotate: 0,
+      cropBox: { ...FREE_BOX },
+      error: null,
+    };
+  }
+
+  openEditor() {
+    this.state.zoom = 1;
+    this.state.rotate = 0;
+    this.state.editing = true;
+    if (!this.input.crop) {
+      this.state.cropBox = { ...FREE_BOX };
+      return;
+    }
+    // One frame, so the canvas is painted and can be measured.
+    requestAnimationFrame(() => {
+      const canvas = this.getEl("canvas");
+      if (!canvas) return;
+      const box = initialCropBox(this.input.crop, canvas.getBoundingClientRect());
+      if (box) this.state.cropBox = box;
+    });
+  }
+
+  closeEditor() { this.state.editing = false; }
+
+  startCropDrag(handle, event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const canvas = this.getEl("canvas");
+    if (!canvas) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const start = { ...this.state.cropBox };
+    const ratio = ratioInPercentSpace(this.input.crop, rect);
+
+    const move = (moveEvent) => {
+      const dx = ((moveEvent.clientX - startX) / rect.width) * 100;
+      const dy = ((moveEvent.clientY - startY) / rect.height) * 100;
+      this.state.cropBox = dragCropBox(start, handle, dx, dy, ratio);
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  read(file) {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      this.state.error = null;
+      this.input.onChange?.(event.target?.result ?? null);
+    };
+    // KDLS attaches no error handler, so an unreadable file leaves the visitor looking at
+    // an unchanged drop zone with nothing to explain it.
+    reader.onerror = () => {
+      this.state.error = "Não foi possível ler o arquivo.";
+      this.input.onError?.(reader.error);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  handleInput(event) {
+    const file = event.target.files?.[0];
+    if (file) this.read(file);
+    // Cleared so choosing the same file twice in a row still fires a change.
+    event.target.value = "";
+  }
+
+  handleDragOver(event) {
+    event.preventDefault();
+    this.state.dragging = true;
+  }
+
+  handleDragLeave() { this.state.dragging = false; }
+
+  handleDrop(event) {
+    event.preventDefault();
+    this.state.dragging = false;
+    const file = event.dataTransfer?.files?.[0];
+    if (file) this.read(file);
+  }
+
+  pick() { this.getEl("file")?.click(); }
+
+  remove() { this.input.onChange?.(null); }
+
+  zoomIn() { this.state.zoom = zoomIn(this.state.zoom); }
+  zoomOut() { this.state.zoom = zoomOut(this.state.zoom); }
+  turnLeft() { this.state.rotate = rotateLeft(this.state.rotate); }
+  turnRight() { this.state.rotate = rotateRight(this.state.rotate); }
+}
+
+$ {
+  const {
+    mode = "image",
+    value = null,
+    crop,
+    onDownload,
+    removeLabel = "Remover",
+    downloadLabel = "Baixar",
+    editLabel = "Tratar",
+    previewAlt = "Arquivo enviado",
+    class: extraClass = "",
+  } = input;
+
+  assertUploaderMode(mode);
+
+  const linkLabel = mode === "image" ? "Adicionar imagem" : "Adicionar arquivo";
+  const box = state.cropBox;
+  const cropStyle = `--crop-x:${box.x}%;--crop-y:${box.y}%;--crop-w:${box.w}%;--crop-h:${box.h}%`;
+  const imageStyle = `--img-zoom:${state.zoom};--img-rotate:${state.rotate}deg`;
+}
+
+<if(value)>
+  <div class=`sds-uploader sds-uploader--filled ${extraClass}`.trim()>
+    <img src=value alt=previewAlt class="sds-uploader__preview"/>
+    <div class="sds-uploader__overlay">
+      <sds-icon-button aria-label=removeLabel onClick=() => component.remove()>
+        <@icon><${deleteIcon}/></@icon>
+      </sds-icon-button>
+      <if(onDownload)>
+        <sds-icon-button aria-label=downloadLabel onClick=onDownload>
+          <@icon><${downloadIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+      <sds-icon-button aria-label=editLabel onClick=() => component.openEditor()>
+        <@icon><${cropIcon}/></@icon>
+      </sds-icon-button>
+    </div>
+  </div>
+
+  <sds-modal
+    isOpen=state.editing
+    title="Editar imagem"
+    primaryLabel="Salvar"
+    secondaryLabel="Cancelar"
+    onClose=() => component.closeEditor()
+    onPrimary=() => component.closeEditor()
+    onSecondary=() => component.closeEditor()
+  >
+    <div class="sds-uploader__edit-body">
+      <div key="canvas" class="sds-uploader__edit-canvas">
+        <img src=value alt=previewAlt class="sds-uploader__edit-img" style=imageStyle/>
+
+        <if(crop)>
+          <div
+            class="sds-uploader__crop-box"
+            style=cropStyle
+            on-mousedown("startCropDrag", "center")
+          >
+            <for|handle| of=["nw", "ne", "sw", "se"]>
+              <div
+                class=`sds-uploader__crop-handle sds-uploader__crop-handle--${handle}`
+                on-mousedown("startCropDrag", handle)
+              />
+            </for>
+          </div>
+        </if>
+      </div>
+
+      <div class="sds-uploader__edit-controls">
+        <sds-icon-button aria-label="Diminuir zoom" onClick=() => component.zoomOut()>
+          <@icon><${zoomOutIcon}/></@icon>
+        </sds-icon-button>
+        <sds-icon-button aria-label="Aumentar zoom" onClick=() => component.zoomIn()>
+          <@icon><${zoomInIcon}/></@icon>
+        </sds-icon-button>
+        <sds-icon-button aria-label="Girar esquerda" onClick=() => component.turnLeft()>
+          <@icon><${rotateLeftIcon}/></@icon>
+        </sds-icon-button>
+        <sds-icon-button aria-label="Girar direita" onClick=() => component.turnRight()>
+          <@icon><${rotateRightIcon}/></@icon>
+        </sds-icon-button>
+      </div>
+    </div>
+  </sds-modal>
+</if>
+<else>
+  <!-- A real <button>, not a div wearing role="button": KDLS hand-writes Enter, Space and
+       a tabindex to imitate one, and still announces nothing about what it does. -->
+  <button
+    type="button"
+    class=[
+      "sds-uploader",
+      state.dragging ? "sds-uploader--dragging" : "",
+      extraClass,
+    ].filter(Boolean).join(" ")
+    on-dragover("handleDragOver")
+    on-dragleave("handleDragLeave")
+    on-drop("handleDrop")
+    on-click("pick")
+  >
+    <input
+      key="file"
+      type="file"
+      accept=ACCEPT[mode]
+      class="sds-uploader__input"
+      aria-hidden="true"
+      tabindex="-1"
+      on-change("handleInput")
+    />
+    <span class="sds-uploader__icon" aria-hidden="true">
+      <sds-icon><${mode === "image" ? imageIcon : documentIcon}/></sds-icon>
+    </span>
+    <sds-text as="span" variant="titleSm">${linkLabel}</sds-text>
+    <span class="sds-uploader__hint">ou arraste e solte aqui.</span>
+    <span class="sds-uploader__formats">
+      <sds-icon><${infoIcon}/></sds-icon>
+      <sds-text as="span" variant="labelRegular">Formatos suportados: ${FORMATS[mode]}</sds-text>
+    </span>
+    <if(state.error)>
+      <sds-text as="span" variant="labelRegular" class="sds-uploader__error" role="alert">
+        ${state.error}
+      </sds-text>
+    </if>
+  </button>
+</else>

package/foundations/Scrollbar/Scrollbar.css

@@ -0,0 +1,26 @@
+/* ============================================================
+   KDLS Scrollbar — styled scrollbar
+
+   Two widths:
+     .sds-scroll          normal width (auto)
+     .sds-scroll--thin    thin bar
+
+   Thumb color: neutral-30 (auto-inverts in dark — no dark block).
+   Uses the system's native bar, so it keeps the arrow.
+
+   Where to apply it (the container needs its own overflow):
+     <div className="sds-scroll sds-scroll--thin">…</div>
+     <html class="sds-scroll">   (page's root bar)
+
+   Support: Chrome, Edge and Firefox (scrollbar-width + scrollbar-color).
+   Safari doesn't support these properties → shows the default native bar.
+   ============================================================ */
+
+.sds-scroll {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-neutral-30) transparent;
+}
+
+.sds-scroll--thin {
+  scrollbar-width: thin;
+}

package/foundations/attrs.js

@@ -0,0 +1,27 @@
+/**
+ * Putting a hyphenated attribute back together.
+ *
+ * Marko camelCases a hyphenated attribute written on a *component* tag: `aria-live` arrives
+ * in `input` as `ariaLive`. A component that forwards its leftover input onto a native
+ * element with a spread therefore writes `arialive="polite"` — an attribute with no meaning
+ * to anything, silently, with no error and nothing visibly wrong.
+ *
+ * It was found on the bulk action bar's count, where `aria-live` was the whole point: the
+ * number changing is the one thing a screen reader needs told when rows are selected.
+ *
+ * Only `aria-*` and `data-*` are converted. Those are the two families where a hyphen is
+ * part of the contract and a camelCase key is always a mangled one; everything else is left
+ * exactly as the caller wrote it.
+ */
+export function rehyphenate(attributes) {
+  const out = {};
+  for (const key of Object.keys(attributes)) {
+    if (/^(aria|data)[A-Z]/.test(key)) {
+      const hyphenated = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+      out[hyphenated] = attributes[key];
+    } else {
+      out[key] = attributes[key];
+    }
+  }
+  return out;
+}

package/foundations/breakpoints.js

@@ -0,0 +1,27 @@
+/**
+ * Where the layout changes, and which width is being asked about.
+ *
+ * Two different questions live here, and confusing them is the bug this module exists to
+ * make hard.
+ *
+ * **The viewport's width** is what `@media` asks about, and it is the right question for
+ * anything that fills the screen: the grid's columns, a modal that becomes a bottom sheet,
+ * a drawer that becomes full-bleed. Those numbers are `BREAKPOINT_MIN_WIDTH`, in
+ * components/Grid/grid-variants.js, because the stylesheet is where they are enforced.
+ *
+ * **A component's own width** is what a ResizeObserver asks about, and it is the right
+ * question for anything that can be put in a column. A table in a 400px sidebar is a
+ * narrow table on a 2560px screen, and a header inside a narrow shell is a narrow header.
+ * `@media` cannot see that — it only knows the window. That is what `OWN_WIDTH_MOBILE` is.
+ *
+ * It lived in components/Table/table-logic.js, which made the Header import its mobile
+ * threshold from the Table. The number is not the table's; it is the width below which a
+ * row of controls stops fitting side by side, which is a fact about fingers and about
+ * this design language, not about tables.
+ */
+export const OWN_WIDTH_MOBILE = 680;
+
+/** True when an element is narrow enough to need the stacked layout. */
+export function isNarrow(width) {
+  return width > 0 && width <= OWN_WIDTH_MOBILE;
+}