@kenlo/sds-design-system 0.9.9

package/components/GradientPicker/gradient-picker.marko

@@ -0,0 +1,398 @@
+<!-- sds-gradient-picker — designed for SDS; KDLS has no counterpart.
+
+     KDLS's palette has no gradient to pick: its one gradient was the Lya brand value,
+     fixed, and chosen by selecting the `lya` colour scheme. SDS removed those values and
+     kept the machinery, so the gradient became something a site chooses — and choosing it
+     needs a control. This is that control, built to the design at
+     figma.com/design/HefwQxdw5h6wrhjzC9FHtf?node-id=11362-100508.
+
+     Two stops, side by side, each with a hue rail, a brightness rail and a hex field;
+     under them the gradient itself, at the size it is actually judged at; then Apply.
+
+     Two rails rather than the ColorPicker's saturation canvas, because that is what the
+     design asks for and because a gradient is read as two hues, not as two points in a
+     colour space. Saturation is still carried — a hex typed into the field keeps whatever
+     it has, and the rails move without flattening it — so nothing a caller sets is lost
+     to a control that cannot express it.
+
+     `onChange` fires on Apply, not on every drag: it repaints the whole site, and doing
+     that on each pixel of a drag is a strobe rather than a preview.
+
+`overlay` takes the panel out of the flow entirely: a backdrop over the page with the
+panel centred in it, instead of a panel anchored to the trigger. It is for one situation —
+this control living inside another panel, where anchoring would put a panel on top of the
+panel it came from — and for a phone, where there is no room beside a trigger to anchor
+anything. Whatever opened this is told through `onOpenChange`, so it can get out of the
+way.
+-->
+
+import { hsvToRgb, rgbToHex, hexToRgb, rgbToHsv, startingRgb } from "../ColorPicker/color-maths.js";
+
+/**
+ * A stop remembers the hex it came in as, and gives it back untouched until it is moved.
+ *
+ * hex → HSV → hex does not round-trip: #BF71E5 comes back as #BE70E6, a whole point off
+ * on each channel. Harmless once, and not once — the portal applies, the value returns as
+ * the picker's input, and the next apply rounds it again. A colour nobody touched would
+ * walk. So `source` is the answer until an edit makes it stale.
+ */
+static function readStop(value, fallback) {
+  const source = value ?? fallback;
+  const [r, g, b] = startingRgb(source);
+  const [h, s, v] = rgbToHsv(r, g, b);
+  return { h, s, v, source };
+}
+
+class {
+  onCreate() {
+    this.state = { open: false, stops: this.stopsFrom(undefined), hexDraft: [null, null] };
+  }
+
+  onInput(input) {
+    if (this.seeded) return;
+    this.state.stops = this.stopsFrom(input.value);
+    this.seeded = true;
+  }
+
+  stopsFrom(value) {
+    const [a, b] = Array.isArray(value) ? value : [];
+    return [readStop(a, "#77A6E0"), readStop(b, "#BF71E5")];
+  }
+
+  hexAt(index) {
+    const { h, s, v, source } = this.state.stops[index];
+    return source ?? rgbToHex(...hsvToRgb(h, s, v));
+  }
+
+  get gradient() {
+    return `linear-gradient(91deg, ${this.hexAt(0)} 0%, ${this.hexAt(1)} 100%)`;
+  }
+
+  toggle() {
+    if (this.input.disabled) return;
+    this.setOpen(!this.state.open);
+  }
+
+  // The backdrop dismisses, the panel does not: a drag that starts on a slider and ends
+  // outside it is still a drag. Escape is listened for on the document because the
+  // backdrop only receives key events while something inside it holds focus.
+  onMount() {
+    this.escape = (event) => this.closeOnEscape(event);
+    document.addEventListener("keydown", this.escape);
+  }
+
+  onDestroy() {
+    document.removeEventListener("keydown", this.escape);
+  }
+
+  closeFromBackdrop(event, element) {
+    if (event.target !== element) return;
+    this.setOpen(false);
+  }
+
+  closeOnEscape(event) {
+    if (event.key !== "Escape") return;
+    if (!this.input.overlay || !(this.input.open ?? this.state.open)) return;
+    event.preventDefault();
+    this.setOpen(false);
+  }
+
+  setOpen(next) {
+    // The Floating reports its own open/close too, so the disabled check belongs here and
+    // not only on the trigger's click: a disabled <button> swallows the click, but the
+    // Floating around it does not, and the panel opened anyway.
+    if (next && this.input.disabled) return;
+    if (this.input.open === undefined) this.state.open = next;
+    this.input.onOpenChange?.(next);
+    // Reopening starts from what is applied, not from where the last drag was left.
+    if (next) {
+      this.state.stops = this.stopsFrom(this.input.value);
+      this.state.hexDraft = [null, null];
+    }
+  }
+
+  setStop(index, part, amount) {
+    // Moving a rail is the edit that makes `source` stale.
+    const stops = this.state.stops.map((stop, i) =>
+      (i === index ? { ...stop, [part]: amount, source: null } : stop));
+    this.state.stops = stops;
+    this.state.hexDraft = this.state.hexDraft.map((draft, i) => (i === index ? null : draft));
+  }
+
+  /** Shared by both rails: a press anywhere on the rail moves the thumb there. */
+  track(element, read, event) {
+    if (!element) return;
+    const apply = (moveEvent) => {
+      const rect = element.getBoundingClientRect();
+      read(Math.max(0, Math.min(1, (moveEvent.clientX - rect.left) / rect.width)));
+    };
+    apply(event);
+    const move = (moveEvent) => apply(moveEvent);
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  dragHue(index, event) {
+    this.track(this.getEl(`hue-${index}`), (x) => this.setStop(index, "h", Math.round(x * 360)), event);
+  }
+
+  dragBrightness(index, event) {
+    this.track(this.getEl(`bri-${index}`), (x) => this.setStop(index, "v", Math.round(x * 100)), event);
+  }
+
+  /** Arrows on a rail, Shift for ten at a time — the ColorPicker's rule, same reason. */
+  nudge(index, part, event) {
+    const direction = { ArrowLeft: -1, ArrowDown: -1, ArrowRight: 1, ArrowUp: 1 }[event.key];
+    if (direction === undefined) return;
+    event.preventDefault();
+
+    const max = part === "h" ? 360 : 100;
+    const step = event.shiftKey ? 10 : 1;
+    const next = this.state.stops[index][part] + direction * step;
+    this.setStop(index, part, Math.max(0, Math.min(max, next)));
+  }
+
+  typeHex(index, raw) {
+    const draft = this.state.hexDraft.map((value, i) => (i === index ? raw : value));
+    this.state.hexDraft = draft;
+
+    const rgb = hexToRgb(raw.startsWith("#") ? raw : `#${raw}`);
+    if (!rgb) return;
+
+    const [h, s, v] = rgbToHsv(...rgb);
+    // A typed hex is exact by definition, so it becomes the new source.
+    const source = rgbToHex(...rgb);
+    this.state.stops = this.state.stops.map((stop, i) => (i === index ? { h, s, v, source } : stop));
+  }
+
+  apply() {
+    this.input.onChange?.([this.hexAt(0), this.hexAt(1)]);
+    this.state.open = false;
+  }
+}
+
+$ {
+  const {
+    label,
+    width = "hug",
+    zIndex,
+    disabled = false,
+    applyLabel = "Aplicar",
+    overlay = false,
+    open: openInput,
+    showTrigger = true,
+    class: extraClass = "",
+  } = input;
+
+  if (!label) throw new Error("sds-gradient-picker needs a `label`.");
+  if (width !== "hug" && width !== "fill") {
+    throw new Error(`Unknown gradient picker width: "${width}". Allowed: hug, fill`);
+  }
+
+  // Controlled when the caller passes `open`. An overlay picker usually has to be: it is
+  // opened from somewhere that then gets out of the way, and a picker that owns its own
+  // open state dies with whatever it was rendered inside.
+  const open = openInput !== undefined ? openInput : state.open;
+  const stops = state.stops;
+  const gradient = component.gradient;
+
+  const shown = (index) => state.hexDraft[index] ?? component.hexAt(index).replace("#", "").toUpperCase();
+  // The brightness rail runs from black to this stop's hue at full strength, so its own
+  // colour says what moving it would do.
+  // Black to this stop's hue at full strength: the rail's own colour says what moving it
+  // does. `hsl(h 100% 0%)` rather than a literal black, for the same reason the hue rail
+  // is written in hue angles — this is the axis, not a palette value.
+  const briRail = (stop) =>
+    `linear-gradient(to right, hsl(${stop.h}, 100%, 0%) 0%, ${rgbToHex(...hsvToRgb(stop.h, stop.s, 100))} 100%)`;
+}
+
+<div class=[
+  "sds-gradient-picker",
+  showTrigger ? "" : "sds-gradient-picker--headless",
+  width === "fill" ? "sds-gradient-picker--fill" : "",
+  extraClass,
+].filter(Boolean).join(" ")>
+  <if(showTrigger)>
+  <sds-floating
+    open=open
+    onOpenChange=(next) => component.setOpen(next)
+    placement="bottomLeft"
+    zIndex=zIndex
+  >
+    <@content>
+      <if(!overlay)>
+      <div class="sds-gradient-picker__panel">
+        <div class="sds-gradient-picker__stops">
+          <for|stop, index| of=stops>
+            <if(index > 0)>
+              <div class="sds-gradient-picker__divider" aria-hidden="true"/>
+            </if>
+
+            <div class="sds-gradient-picker__stop">
+              <div
+                key=`hue-${index}`
+                class="sds-gradient-picker__rail sds-gradient-picker__rail--hue"
+                role="slider"
+                aria-label=`Matiz da parada ${index + 1}`
+                aria-valuemin="0"
+                aria-valuemax="360"
+                aria-valuenow=String(stop.h)
+                tabindex="0"
+                on-mousedown("dragHue", index)
+                on-keydown("nudge", index, "h")
+              >
+                <div class="sds-gradient-picker__thumb" style=`left:${(stop.h / 360) * 100}%`/>
+              </div>
+
+              <div
+                key=`bri-${index}`
+                class="sds-gradient-picker__rail"
+                style=`background:${briRail(stop)}`
+                role="slider"
+                aria-label=`Brilho da parada ${index + 1}`
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-valuenow=String(stop.v)
+                tabindex="0"
+                on-mousedown("dragBrightness", index)
+                on-keydown("nudge", index, "v")
+              >
+                <div class="sds-gradient-picker__thumb" style=`left:${stop.v}%`/>
+              </div>
+
+              <sds-input
+                label="HEX"
+                width="fill"
+                value=shown(index)
+                onChange=(event, value) => component.typeHex(index, value)
+              />
+            </div>
+          </for>
+        </div>
+
+        <!-- The gradient as a band. A swatch the size of a chip cannot show where two
+             hues meet, which is the only thing being decided here; 40px can, and keeps
+             the panel short enough for the places that open it. -->
+        <div
+          class="sds-gradient-picker__preview"
+          style=`background:${gradient}`
+          role="img"
+          aria-label=`Prévia: ${component.hexAt(0)} a ${component.hexAt(1)}`
+        />
+
+        <!-- `lg` is 56px, which is the height the design gives this button. -->
+        <sds-button
+          variant="primary"
+          size="lg"
+          width="fill"
+          label=applyLabel
+          onClick=() => component.apply()
+        />
+      </div>
+      </if>
+    </@content>
+
+    <!-- A real button, with its own click: the Floating positions the panel, it does not
+         open it. The ColorPicker's trigger carries the same `on-click`, and leaving it off
+         here produced a control that looked identical and did nothing. -->
+    <button
+      type="button"
+      class="sds-gradient-picker__trigger"
+      disabled=(disabled || null)
+      aria-haspopup="dialog"
+      aria-expanded=(open ? "true" : "false")
+      on-click("toggle")
+    >
+      <span class="sds-gradient-picker__swatch" style=`background:${gradient}` aria-hidden="true"/>
+      <span class="sds-gradient-picker__field">
+        <sds-text as="span" variant="labelRegular">${label}</sds-text>
+      </span>
+    </button>
+  </sds-floating>
+  </if>
+
+  <!-- Centred, over everything, when `overlay` is on. Escape and the backdrop both close
+       it; the panel itself does not, so a drag that ends outside the panel is still a
+       drag rather than a dismissal. -->
+  <if(overlay && open)>
+    <div
+      class="sds-gradient-picker__backdrop"
+      style=(zIndex !== undefined ? `z-index:${zIndex}` : null)
+      on-click("closeFromBackdrop")
+      on-keydown("closeOnEscape")
+    >
+      <div class="sds-gradient-picker__panel">
+          <div class="sds-gradient-picker__stops">
+            <for|stop, index| of=stops>
+              <if(index > 0)>
+                <div class="sds-gradient-picker__divider" aria-hidden="true"/>
+              </if>
+
+              <div class="sds-gradient-picker__stop">
+                <div
+                  key=`hue-${index}`
+                  class="sds-gradient-picker__rail sds-gradient-picker__rail--hue"
+                  role="slider"
+                  aria-label=`Matiz da parada ${index + 1}`
+                  aria-valuemin="0"
+                  aria-valuemax="360"
+                  aria-valuenow=String(stop.h)
+                  tabindex="0"
+                  on-mousedown("dragHue", index)
+                  on-keydown("nudge", index, "h")
+                >
+                  <div class="sds-gradient-picker__thumb" style=`left:${(stop.h / 360) * 100}%`/>
+                </div>
+
+                <div
+                  key=`bri-${index}`
+                  class="sds-gradient-picker__rail"
+                  style=`background:${briRail(stop)}`
+                  role="slider"
+                  aria-label=`Brilho da parada ${index + 1}`
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-valuenow=String(stop.v)
+                  tabindex="0"
+                  on-mousedown("dragBrightness", index)
+                  on-keydown("nudge", index, "v")
+                >
+                  <div class="sds-gradient-picker__thumb" style=`left:${stop.v}%`/>
+                </div>
+
+                <sds-input
+                  label="HEX"
+                  width="fill"
+                  value=shown(index)
+                  onChange=(event, value) => component.typeHex(index, value)
+                />
+              </div>
+            </for>
+          </div>
+
+          <!-- The gradient as a band. A swatch the size of a chip cannot show where two
+               hues meet, which is the only thing being decided here; 40px can, and keeps
+               the panel short enough for the places that open it. -->
+          <div
+            class="sds-gradient-picker__preview"
+            style=`background:${gradient}`
+            role="img"
+            aria-label=`Prévia: ${component.hexAt(0)} a ${component.hexAt(1)}`
+          />
+
+          <!-- `lg` is 56px, which is the height the design gives this button. -->
+          <sds-button
+            variant="primary"
+            size="lg"
+            width="fill"
+            label=applyLabel
+            onClick=() => component.apply()
+          />
+        </div>
+    </div>
+  </if>
+</div>

package/components/Grid/Grid.css

@@ -0,0 +1,161 @@
+/* SDS Grid.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Grid/Grid.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   GRID — sds-grid / sds-col
+   12-column responsive grid system
+   xs: < 800px | sm: 800px+ | md: 1024px+ | lg: 1280px+ | xl: 1440px+
+   ============================================================ */
+
+/* ── Grid container ── */
+.sds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--spacing-4);
+  width: 100%;
+}
+/* ── Column variants ── */
+.sds-grid--cols-1  { grid-template-columns: repeat(1,  1fr); }
+.sds-grid--cols-2  { grid-template-columns: repeat(2,  1fr); }
+.sds-grid--cols-3  { grid-template-columns: repeat(3,  1fr); }
+.sds-grid--cols-4  { grid-template-columns: repeat(4,  1fr); }
+.sds-grid--cols-6  { grid-template-columns: repeat(6,  1fr); }
+.sds-grid--cols-12 { grid-template-columns: repeat(12, 1fr); }
+/* ── Gap variants (spacing scale) ── */
+.sds-grid--gap-1  { gap: var(--spacing-1); }
+.sds-grid--gap-2  { gap: var(--spacing-2); }
+.sds-grid--gap-3  { gap: var(--spacing-3); }
+.sds-grid--gap-4  { gap: var(--spacing-4); }
+.sds-grid--gap-5  { gap: var(--spacing-5); }
+.sds-grid--gap-6  { gap: var(--spacing-6); }
+.sds-grid--gap-7  { gap: var(--spacing-7); }
+.sds-grid--gap-8  { gap: var(--spacing-8); }
+.sds-grid--gap-9  { gap: var(--spacing-9); }
+.sds-grid--gap-10 { gap: var(--spacing-10); }
+.sds-grid--gap-12 { gap: var(--spacing-12); }
+.sds-grid--gap-14 { gap: var(--spacing-14); }
+.sds-grid--gap-16 { gap: var(--spacing-16); }
+/* ── Row gap variants ── */
+.sds-grid--row-gap-1  { row-gap: var(--spacing-1); }
+.sds-grid--row-gap-2  { row-gap: var(--spacing-2); }
+.sds-grid--row-gap-3  { row-gap: var(--spacing-3); }
+.sds-grid--row-gap-4  { row-gap: var(--spacing-4); }
+.sds-grid--row-gap-5  { row-gap: var(--spacing-5); }
+.sds-grid--row-gap-6  { row-gap: var(--spacing-6); }
+.sds-grid--row-gap-7  { row-gap: var(--spacing-7); }
+.sds-grid--row-gap-8  { row-gap: var(--spacing-8); }
+.sds-grid--row-gap-9  { row-gap: var(--spacing-9); }
+.sds-grid--row-gap-10 { row-gap: var(--spacing-10); }
+.sds-grid--row-gap-12 { row-gap: var(--spacing-12); }
+.sds-grid--row-gap-14 { row-gap: var(--spacing-14); }
+.sds-grid--row-gap-16 { row-gap: var(--spacing-16); }
+/* ── Col gap variants ── */
+.sds-grid--col-gap-1  { column-gap: var(--spacing-1); }
+.sds-grid--col-gap-2  { column-gap: var(--spacing-2); }
+.sds-grid--col-gap-3  { column-gap: var(--spacing-3); }
+.sds-grid--col-gap-4  { column-gap: var(--spacing-4); }
+.sds-grid--col-gap-5  { column-gap: var(--spacing-5); }
+.sds-grid--col-gap-6  { column-gap: var(--spacing-6); }
+.sds-grid--col-gap-7  { column-gap: var(--spacing-7); }
+.sds-grid--col-gap-8  { column-gap: var(--spacing-8); }
+.sds-grid--col-gap-9  { column-gap: var(--spacing-9); }
+.sds-grid--col-gap-10 { column-gap: var(--spacing-10); }
+.sds-grid--col-gap-12 { column-gap: var(--spacing-12); }
+.sds-grid--col-gap-14 { column-gap: var(--spacing-14); }
+.sds-grid--col-gap-16 { column-gap: var(--spacing-16); }
+/* ── Align variants ── */
+.sds-grid--align-start   { align-items: start; }
+.sds-grid--align-center  { align-items: center; }
+.sds-grid--align-end     { align-items: end; }
+/* ── Col base ── */
+.sds-col {
+  min-width: 0;
+}
+/* ── Span classes (base / xs default) ── */
+.sds-col--span-1  { grid-column: span 1; }
+.sds-col--span-2  { grid-column: span 2; }
+.sds-col--span-3  { grid-column: span 3; }
+.sds-col--span-4  { grid-column: span 4; }
+.sds-col--span-5  { grid-column: span 5; }
+.sds-col--span-6  { grid-column: span 6; }
+.sds-col--span-7  { grid-column: span 7; }
+.sds-col--span-8  { grid-column: span 8; }
+.sds-col--span-9  { grid-column: span 9; }
+.sds-col--span-10 { grid-column: span 10; }
+.sds-col--span-11 { grid-column: span 11; }
+.sds-col--span-12 { grid-column: span 12; }
+/* ── xs — < 800px ── */
+@media (max-width: 799px) {
+  .sds-col--xs-1  { grid-column: span 1; }
+  .sds-col--xs-2  { grid-column: span 2; }
+  .sds-col--xs-3  { grid-column: span 3; }
+  .sds-col--xs-4  { grid-column: span 4; }
+  .sds-col--xs-5  { grid-column: span 5; }
+  .sds-col--xs-6  { grid-column: span 6; }
+  .sds-col--xs-7  { grid-column: span 7; }
+  .sds-col--xs-8  { grid-column: span 8; }
+  .sds-col--xs-9  { grid-column: span 9; }
+  .sds-col--xs-10 { grid-column: span 10; }
+  .sds-col--xs-11 { grid-column: span 11; }
+  .sds-col--xs-12 { grid-column: span 12; }
+}
+/* ── sm — 800px+ ── */
+@media (min-width: 800px) {
+  .sds-col--sm-1  { grid-column: span 1; }
+  .sds-col--sm-2  { grid-column: span 2; }
+  .sds-col--sm-3  { grid-column: span 3; }
+  .sds-col--sm-4  { grid-column: span 4; }
+  .sds-col--sm-5  { grid-column: span 5; }
+  .sds-col--sm-6  { grid-column: span 6; }
+  .sds-col--sm-7  { grid-column: span 7; }
+  .sds-col--sm-8  { grid-column: span 8; }
+  .sds-col--sm-9  { grid-column: span 9; }
+  .sds-col--sm-10 { grid-column: span 10; }
+  .sds-col--sm-11 { grid-column: span 11; }
+  .sds-col--sm-12 { grid-column: span 12; }
+}
+/* ── md — 1024px+ ── */
+@media (min-width: 1024px) {
+  .sds-col--md-1  { grid-column: span 1; }
+  .sds-col--md-2  { grid-column: span 2; }
+  .sds-col--md-3  { grid-column: span 3; }
+  .sds-col--md-4  { grid-column: span 4; }
+  .sds-col--md-5  { grid-column: span 5; }
+  .sds-col--md-6  { grid-column: span 6; }
+  .sds-col--md-7  { grid-column: span 7; }
+  .sds-col--md-8  { grid-column: span 8; }
+  .sds-col--md-9  { grid-column: span 9; }
+  .sds-col--md-10 { grid-column: span 10; }
+  .sds-col--md-11 { grid-column: span 11; }
+  .sds-col--md-12 { grid-column: span 12; }
+}
+/* ── lg — 1280px+ ── */
+@media (min-width: 1280px) {
+  .sds-col--lg-1  { grid-column: span 1; }
+  .sds-col--lg-2  { grid-column: span 2; }
+  .sds-col--lg-3  { grid-column: span 3; }
+  .sds-col--lg-4  { grid-column: span 4; }
+  .sds-col--lg-5  { grid-column: span 5; }
+  .sds-col--lg-6  { grid-column: span 6; }
+  .sds-col--lg-7  { grid-column: span 7; }
+  .sds-col--lg-8  { grid-column: span 8; }
+  .sds-col--lg-9  { grid-column: span 9; }
+  .sds-col--lg-10 { grid-column: span 10; }
+  .sds-col--lg-11 { grid-column: span 11; }
+  .sds-col--lg-12 { grid-column: span 12; }
+}
+/* ── xl — 1440px+ ── */
+@media (min-width: 1440px) {
+  .sds-col--xl-1  { grid-column: span 1; }
+  .sds-col--xl-2  { grid-column: span 2; }
+  .sds-col--xl-3  { grid-column: span 3; }
+  .sds-col--xl-4  { grid-column: span 4; }
+  .sds-col--xl-5  { grid-column: span 5; }
+  .sds-col--xl-6  { grid-column: span 6; }
+  .sds-col--xl-7  { grid-column: span 7; }
+  .sds-col--xl-8  { grid-column: span 8; }
+  .sds-col--xl-9  { grid-column: span 9; }
+  .sds-col--xl-10 { grid-column: span 10; }
+  .sds-col--xl-11 { grid-column: span 11; }
+  .sds-col--xl-12 { grid-column: span 12; }
+}

package/components/Grid/col.marko

@@ -0,0 +1,36 @@
+<!-- sds-col — ported from kdls-design-system v2.5.1 (0f3edf8) components/Grid/Grid.css.
+
+A column inside sds-grid. `span` is its width at every size; xs, sm, md, lg and xl
+override it from that breakpoint up — xl being 1440px and over.
+
+The tag is named for the class the stylesheet already defines — .sds-col, not
+.sds-grid__item. An earlier draft invented the latter and it matched nothing: a column
+with no rule spans one track and the whole layout quietly collapses. -->
+
+import { BREAKPOINTS } from "./grid-variants.js";
+
+$ {
+  // `span = 12`, which is KDLS's default and the one this file's own header warns about:
+  // a column with no span rule falls to grid auto-placement and takes ONE track of twelve,
+  // so a <sds-col> written with no span at all — the obvious way to write "a full-width
+  // column" — came out a twelfth of the width.
+  //
+  // The five breakpoints are destructured rather than read as `input[bp]`. They were read
+  // dynamically, which works at runtime and is invisible to everything else: the portal
+  // builds its props table and its controls by parsing what a component destructures, so
+  // `xs` through `xl` appeared in neither. A prop nobody can see is a prop nobody uses.
+  const { span = 12, xs, sm, md, lg, xl, class: extraClass = "" } = input;
+  const breakpoints = { xs, sm, md, lg, xl };
+  const classes = [
+    "sds-col",
+    `sds-col--span-${span}`,
+    ...BREAKPOINTS
+      .filter((bp) => breakpoints[bp] !== undefined)
+      .map((bp) => `sds-col--${bp}-${breakpoints[bp]}`),
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <${input.renderBody}/>
+</div>

package/components/Grid/grid-variants.js

@@ -0,0 +1,43 @@
+/**
+ * The Grid vocabulary.
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Grid/Grid.tsx.
+ */
+export const GRID_COLS = [1, 2, 3, 4, 6, 12];
+export const GRID_ALIGNMENTS = ['start', 'center', 'end', 'stretch'];
+export const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * Where each breakpoint starts, in pixels of viewport width.
+ *
+ * `Grid.css` is where these are enforced — CSS cannot read a custom property inside a
+ * `@media` condition, so the numbers have to be written there as literals. This map is
+ * for everything that needs to *know* them without being CSS: the portal's breakpoint
+ * strip, and any code deciding what is on screen.
+ *
+ * `tests/grid-breakpoints.test.js` parses Grid.css and fails if the two disagree. That
+ * test exists because they already did: the portal's strip was drawn at 600/900/1200,
+ * numbers from nowhere, so between 600px and 799px it announced `sm` while the grid was
+ * still laying out `xs`.
+ */
+export const BREAKPOINT_MIN_WIDTH = {
+  xs: 0,
+  sm: 800,
+  md: 1024,
+  lg: 1280,
+  xl: 1440,
+};
+
+export function assertCols(cols) {
+  if (!GRID_COLS.includes(cols)) {
+    throw new Error(`Unknown grid cols: "${cols}". Allowed: ${GRID_COLS.join(', ')}`);
+  }
+  return cols;
+}
+
+export function assertAlign(align) {
+  if (align === undefined) return align;
+  if (!GRID_ALIGNMENTS.includes(align)) {
+    throw new Error(`Unknown grid align: "${align}". Allowed: ${GRID_ALIGNMENTS.join(', ')}`);
+  }
+  return align;
+}

package/components/Grid/grid.marko

@@ -0,0 +1,25 @@
+<!-- sds-grid — ported from kdls-design-system v2.5.1 (0f3edf8) components/Grid/Grid.tsx.
+
+Layout only, no semantics: a grid is not a list and should not claim to be one. -->
+
+import { assertCols, assertAlign } from "./grid-variants.js";
+
+$ {
+  const { cols = 12, gap, rowGap, colGap, align, class: extraClass = "" } = input;
+  assertCols(cols);
+  assertAlign(align);
+
+  const classes = [
+    "sds-grid",
+    `sds-grid--cols-${cols}`,
+    gap !== undefined ? `sds-grid--gap-${gap}` : "",
+    rowGap !== undefined ? `sds-grid--row-gap-${rowGap}` : "",
+    colGap !== undefined ? `sds-grid--col-gap-${colGap}` : "",
+    align ? `sds-grid--align-${align}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <${input.renderBody}/>
+</div>