@kenlo/sds-design-system 0.9.9

package/components/Card/card.marko

@@ -0,0 +1,124 @@
+<!-- sds-card — ported from kdls-design-system v2.5.1 (0f3edf8) components/Card/Card.tsx.
+
+The shell. Header, Body, Footer, Section, InfoRow, InfoPair and Collapsible are sibling
+tags that nest inside it as ordinary children: the card has nothing to tell them, so
+there is nothing for it to intercept.
+
+No state of its own. KDLS's Card held useState for the collapsible section — that state
+moved with it, into sds-card-collapsible, so a card with no collapsible section costs
+nothing. A property listing renders twenty of these.
+
+It is a <button> when it has a click handler, rather than a div with a handler and no
+keyboard path. -->
+
+import { assertCardSize } from "./card-variants.js";
+
+$ {
+  const {
+    cover,
+    coverWidth,
+    coverHeight,
+    coverBadges,
+    horizontal = false,
+    size = "md",
+    bordered = true,
+    hoverable = false,
+    onClick,
+    clickLabel,
+    loading = false,
+    loadingRows = 3,
+    loadingTitleRows = 2,
+    class: extraClass = "",
+  } = input;
+
+  assertCardSize(size);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const interactive = Boolean(onClick);
+
+  // The hit area has no text of its own — it is an empty box over the card — so it cannot
+  // borrow a name from its contents the way a normal button does. A control announced as
+  // just "button" tells a screen-reader user nothing about which card they are on, and in
+  // a listing of twenty cards that is twenty identical buttons. Same rule the icon button
+  // already applies.
+  if (interactive && !clickLabel) {
+    throw new Error("sds-card needs a `clickLabel` when it takes an `onClick` — the click target covers the card and has no text to be named by.");
+  }
+
+  const classes = [
+    "sds-card",
+    size === "sm" ? "sds-card--sm" : "",
+    horizontal ? "sds-card--horizontal" : "",
+    bordered ? "sds-card--bordered" : "",
+    hoverable || interactive ? "sds-card--hoverable" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  // Each dimension belongs to the orientation that can honour it, which is the gate KDLS
+  // applies and the port dropped. A horizontal card's cover is a fixed-width column beside
+  // the content; a vertical one's is a fixed-height band above it. Applying both meant a
+  // `coverHeight` written for the vertical case silently squashed the horizontal one.
+  const coverStyle = [
+    horizontal && coverWidth ? `width: ${coverWidth}px` : "",
+    !horizontal && coverHeight ? `height: ${coverHeight}px` : "",
+  ].filter(Boolean).join("; ") || null;
+}
+
+<macro|{ }| name="inner">
+  // `cover`, not `cover || loading`. A loading card with no cover drew a cover-shaped
+  // skeleton block, promising a picture that was never going to arrive — and once loaded
+  // the card jumped as that block disappeared. KDLS gates on the cover alone.
+  <if(cover)>
+    <div class="sds-card__cover" style=coverStyle>
+      <if(loading)>
+        <sds-skeleton-image fill/>
+      </if>
+      <else>
+        <${renderable(cover)}/>
+      </else>
+      <if(coverBadges && !loading)>
+        <div class="sds-card__cover-badges"><${renderable(coverBadges)}/></div>
+      </if>
+    </div>
+  </if>
+
+  <div class="sds-card__content">
+    <if(loading)>
+      // `loadingTitleRows` is a count, and it was being spent as a yes/no: 1, 2 and 10 all
+      // drew the same single title line, and the default of 2 lost its second row. The
+      // first row is the title; whatever remains are lines under it.
+      <sds-skeleton
+        title=(loadingTitleRows >= 1)
+        rows=(Math.max(0, loadingTitleRows - 1) + loadingRows)
+        label="Carregando"
+      />
+    </if>
+    <else>
+      <${input.renderBody}/>
+    </else>
+  </div>
+</macro>
+
+<div class=classes aria-busy=(loading ? "true" : null)>
+  <if(interactive)>
+    // The click target covers the card and sits BESIDE the content, never around it.
+    //
+    // It used to be a <button> wrapping everything, which is invalid HTML the moment the
+    // card holds a button or a link of its own — and a card in a listing almost always
+    // does. In the browser it does not merely warn: the parser closes the outer button at
+    // the inner one and the inner control becomes the card's SIBLING. Rendered on the
+    // server and read back, a card with one "Ver imóvel" button came out as an empty card
+    // followed by a loose button. Proven in card.test.js.
+    //
+    // So the card is a plain <div> again and this covers it instead. The content is
+    // painted above the hit area, and interactive children above that, so clicking the
+    // card works everywhere except on a control that had its own answer.
+    <button
+      type="button"
+      class="sds-card__hit"
+      aria-label=clickLabel
+      on-click(onClick)
+    />
+  </if>
+  <inner/>
+</div>

package/components/Checkbox/Checkbox.css

@@ -0,0 +1,249 @@
+/* SDS Checkbox.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Checkbox/Checkbox.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-checkbox--indeterminate .sds-checkbox__box
+     [data-color-scheme="lya"] .sds-checkbox--indeterminate:active:not(.sds-checkbox--disabled) .sds-checkbox__box
+     [data-color-scheme="lya"] .sds-checkbox:active:not(.sds-checkbox--disabled):not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate) .sds-checkbox__box
+ */.sds-checkbox {
+  display: inline-flex;
+  /* A column, because the hint is a sibling of the clickable row rather than part of it —
+     the row is `__control` and it is still a row. This was `align-items: center` on a flex
+     row, so a hint sat BESIDE the label on the same line, reading as a second label. */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-family-base);
+  outline: none;
+}
+.sds-checkbox--disabled {
+  cursor: not-allowed;
+}
+/* Box */
+.sds-checkbox__box {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-xs);
+  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+  background: var(--component-bg-color);
+}
+/* Size: small — 24px row height */
+.sds-checkbox--sm {
+  min-height: 24px;
+  --checkbox-box-size: 24px;
+}
+.sds-checkbox--sm .sds-checkbox__box {
+  width: 24px;
+  height: 24px;
+}
+/* Size: medium — 32px row height */
+.sds-checkbox--md {
+  min-height: 32px;
+  --checkbox-box-size: 32px;
+}
+.sds-checkbox--md .sds-checkbox__box {
+  width: 32px;
+  height: 32px;
+}
+/* ── Checked: the input says so, not a class ──────────────────────────────────
+   `--checked` comes from the `checked` prop, which is fixed at render. The component
+   holds no state and does not hydrate, so clicking marked the native input — the browser
+   does that — and the box did not fill. `:checked` is the browser's own answer, and it is
+   right with no JavaScript at all.
+
+   The class stays alongside it, so a caller that controls `checked` gets the visual on
+   the first render, before the input is touched. */
+/* Unchecked states */
+.sds-checkbox:hover:not(.sds-checkbox--disabled):not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate):not(:has(:checked)) .sds-checkbox__box,
+.sds-checkbox:active:not(.sds-checkbox--disabled):not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate):not(:has(:checked)) .sds-checkbox__box {
+  border-color: var(--color-primary-50-solid);
+}
+/* Checked states */
+.sds-checkbox--checked .sds-checkbox__box,
+.sds-checkbox--indeterminate .sds-checkbox__box,
+.sds-checkbox__input:checked ~ .sds-checkbox__box {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-50-solid);
+  color: var(--color-on-primary);
+}
+.sds-checkbox--checked:hover:not(.sds-checkbox--disabled) .sds-checkbox__box,
+.sds-checkbox--indeterminate:hover:not(.sds-checkbox--disabled) .sds-checkbox__box,
+.sds-checkbox:hover:not(.sds-checkbox--disabled) .sds-checkbox__input:checked ~ .sds-checkbox__box {
+  background: var(--color-primary-60);
+  border-color: var(--color-primary-60-solid);
+}
+.sds-checkbox--checked:active:not(.sds-checkbox--disabled) .sds-checkbox__box,
+.sds-checkbox--indeterminate:active:not(.sds-checkbox--disabled) .sds-checkbox__box,
+.sds-checkbox:active:not(.sds-checkbox--disabled) .sds-checkbox__input:checked ~ .sds-checkbox__box {
+  background: var(--color-primary-60);
+  border-color: var(--color-primary-60-solid);
+}
+/* ── Feedback (validation) — box border when unchecked and not indeterminate ── */
+.sds-checkbox--feedback-error:not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate) .sds-checkbox__box   { border-color: var(--color-error-50); }
+.sds-checkbox--feedback-alert:not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate) .sds-checkbox__box   { border-color: var(--color-alert-50); }
+.sds-checkbox--feedback-success:not(.sds-checkbox--checked):not(.sds-checkbox--indeterminate) .sds-checkbox__box { border-color: var(--color-success-50); }
+/* ── Disabled ── */
+.sds-checkbox--disabled .sds-checkbox__box {
+  background: var(--color-neutral-20);
+  border-color: var(--border-interactive-color);
+}
+.sds-checkbox--checked.sds-checkbox--disabled .sds-checkbox__box,
+.sds-checkbox--indeterminate.sds-checkbox--disabled .sds-checkbox__box {
+  background: var(--color-neutral-30);
+  border-color: var(--border-interactive-color);
+}
+.sds-checkbox--disabled .sds-checkbox__label {
+  color: var(--color-neutral-40);
+}
+.sds-checkbox__label--required::after {
+  content: ' *';
+  color: var(--color-error-50);
+}
+/* Focus ring */
+.sds-checkbox:focus-visible .sds-checkbox__box {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* Checkmark icon */
+.sds-checkbox__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  color: var(--color-on-primary);
+  transition: opacity 120ms ease;
+}
+.sds-checkbox--checked .sds-checkbox__icon,
+.sds-checkbox--indeterminate .sds-checkbox__icon,
+.sds-checkbox__input:checked ~ .sds-checkbox__box .sds-checkbox__icon {
+  opacity: 1;
+}
+/* Container */
+.sds-checkbox-container {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+}
+.sds-checkbox-container--disabled {
+  border-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-checkbox-container {
+  border-color: var(--color-neutral-60);
+}
+/* Hint */
+.sds-checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+/* Width modifier */
+.sds-checkbox-wrapper--fill  { width: 100%; }
+.sds-checkbox-wrapper--fill > .sds-checkbox-container { width: 100%; }
+/* Container variant stretches to fill available width */
+.sds-checkbox-wrapper > .sds-checkbox-container {
+  align-self: stretch;
+}
+/* Label position: left — box moves to the right */
+.sds-checkbox--label-left {
+  flex-direction: row-reverse;
+}
+.sds-checkbox-container .sds-checkbox--label-left {
+  width: 100%;
+  justify-content: space-between;
+}
+/* Content column (label + hint stacked, no-container case) */
+/* Divergence: the clickable row is `__control`, and `__content` is gone.
+
+   KDLS puts the box and the label straight inside the root and uses `__content` for a
+   different job — it appears only when there is a hint, and stacks the label above it.
+   This port moved the hint out of the label (a hint is not part of the thing you click),
+   so the element that needed a name was the row, and it inherited the KDLS name along
+   with the KDLS rule: `flex-direction: column`. The box sat on top of its own label in
+   every checkbox and radio in the product. Rafael found it on the portal. */
+.sds-checkbox__control {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+/* Hint.
+
+   Secondary by default: it explains the label, and when it reads in the same ink at the
+   same weight it competes with it instead. The template used to pass `color="inherit"`,
+   so it took the page's body colour and the feedback classes below never matched anything
+   — they were written at the port and have been dead since.
+
+   Indented past the box, so it lines up with the label rather than with the control. */
+.sds-checkbox__hint {
+  padding-left: calc(var(--checkbox-box-size, 24px) + var(--spacing-2));
+  color: var(--color-neutral-60);
+}
+.sds-checkbox--label-left .sds-checkbox__hint {
+  padding-left: 0;
+}
+.sds-checkbox-container + .sds-checkbox__hint {
+  padding-left: var(--spacing-4);
+}
+.sds-checkbox__hint.sds-checkbox__hint--success { color: var(--color-success-50); }
+.sds-checkbox__hint.sds-checkbox__hint--alert   { color: var(--color-alert-50); }
+.sds-checkbox__hint.sds-checkbox__hint--error   { color: var(--color-error-50); }
+.sds-checkbox__hint.sds-checkbox__hint--disabled {
+  color: var(--color-neutral-40);
+}
+[data-theme="dark"] .sds-checkbox-container--disabled {
+  border-color: var(--border-interactive-color);
+}
+/* ── The native input ──────────────────────────────────────────────────────────
+   SDS renders a real <input type="checkbox">, which KDLS did not: it drew a
+   <div role="checkbox"> and bolted a hidden <input> alongside so a form could still
+   submit the value. The native element brings keyboard activation, focus, the disabled
+   state, label association and form participation — all of which KDLS rebuilt by hand.
+
+   The input itself is visually hidden rather than display:none, because a hidden input
+   cannot be focused and an unfocusable checkbox cannot be reached by keyboard. The box
+   the visitor sees is .sds-checkbox__box, drawn beside it and driven by :checked. */
+.sds-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sds-checkbox__input:checked ~ .sds-checkbox__box,
+.sds-checkbox--indeterminate .sds-checkbox__box {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-50-solid);
+}
+
+.sds-checkbox__input:focus-visible ~ .sds-checkbox__box {
+  box-shadow: var(--focus-ring);
+}
+
+.sds-checkbox__input:checked ~ .sds-checkbox__box .sds-checkbox__icon,
+.sds-checkbox--indeterminate .sds-checkbox__box .sds-checkbox__icon {
+  opacity: 1;
+}
+
+.sds-checkbox__icon {
+  opacity: 0;
+  color: var(--color-on-primary);
+  display: inline-flex;
+}
+
+/* Indeterminate is drawn from a class rather than the :indeterminate pseudo-class.
+   That property can only be set from JavaScript, and this component does not hydrate —
+   with appearance:none the browser draws nothing here anyway, so the class is enough. */

package/components/Checkbox/checkbox-variants.js

@@ -0,0 +1,21 @@
+/**
+ * The Checkbox vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Checkbox/Checkbox.tsx.
+ */
+export const CHECKBOX_SIZES = ['sm', 'md'];
+export const CHECKBOX_FEEDBACKS = ['none', 'success', 'alert', 'error'];
+export const CHECKBOX_WIDTHS = ['hug', 'fill'];
+export const CHECKBOX_LABEL_POSITIONS = ['right', 'left'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown checkbox ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertCheckboxSize = (v) => assertOneOf('size', v, CHECKBOX_SIZES);
+export const assertLabelPosition = (v) => assertOneOf('labelPosition', v, CHECKBOX_LABEL_POSITIONS);
+export const assertFeedback = (v) => assertOneOf('feedback', v, CHECKBOX_FEEDBACKS);
+export const assertWidth = (v) => assertOneOf('width', v, CHECKBOX_WIDTHS);

package/components/Checkbox/checkbox.marko

@@ -0,0 +1,128 @@
+<!-- sds-checkbox — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Checkbox/Checkbox.tsx.
+
+A real <input type="checkbox">, which KDLS's was not: it drew a <div role="checkbox"> and
+bolted a hidden <input> alongside so a form could still submit. The native element brings
+keyboard activation, focus, the disabled state, label association and form participation —
+everything KDLS rebuilt by hand — and with appearance:none the box on screen is still
+entirely ours.
+
+It does not hydrate, and takes no onChange. The native `change` event bubbles: a form, or
+a Select rendering a list of these, listens once on its own container instead of every
+checkbox carrying a listener. On a page with twenty filter checkboxes that is the
+difference between one listener and twenty serialised components.
+
+`indeterminate` is a class, not the DOM property. That property can only be set from
+JavaScript, and since appearance:none means the browser draws nothing here, the class is
+what the visual comes from anyway. -->
+
+import { assertCheckboxSize, assertFeedback, assertWidth, assertLabelPosition } from "./checkbox-variants.js";
+
+$ {
+  const {
+    label,
+    // A checkbox in a table row needs a name and no visible text — KDLS renders those with
+    // no label at all, so a screen reader announces "checkbox" and nothing about which row.
+    hideLabel = false,
+    size = "sm",
+    width = "hug",
+    labelPosition = "right",
+    checked = false,
+    indeterminate = false,
+    disabled = false,
+    required = false,
+    container = false,
+    feedback = "none",
+    hint,
+    name,
+    value,
+    // `component.id`, not a random string. Marko gives every component an id that is the
+    // same on the server and in the browser; a random one drawn inside the render block is
+    // a different value on each side, so every `for` and `aria-*` pointing at it resolved
+    // to nothing after hydration — and changed again on every re-render.
+    id = `sds-checkbox-${component.id}`,
+    class: extraClass = "",
+  } = input;
+
+  assertLabelPosition(labelPosition);
+
+  assertCheckboxSize(size);
+  assertFeedback(feedback);
+  assertWidth(width);
+
+  const hintId = hint ? `${id}-hint` : null;
+
+  const classes = [
+    "sds-checkbox",
+    `sds-checkbox--${size}`,
+    checked && !indeterminate ? "sds-checkbox--checked" : "",
+    indeterminate ? "sds-checkbox--indeterminate" : "",
+    disabled ? "sds-checkbox--disabled" : "",
+    container ? "sds-checkbox-container" : "",
+    width === "fill" ? "sds-checkbox-wrapper--fill" : "",
+    labelPosition === "left" ? "sds-checkbox--label-left" : "",
+    feedback !== "none" ? `sds-checkbox--feedback-${feedback}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <label class="sds-checkbox__control" for=id>
+    <input
+      class="sds-checkbox__input"
+      type="checkbox"
+      id=id
+      name=name
+      value=value
+      checked=(checked || null)
+      disabled=(disabled || null)
+      required=(required || null)
+      aria-checked=(indeterminate ? "mixed" : null)
+      aria-describedby=hintId
+      // Said to a screen reader, not only drawn. The box turned red and nothing announced
+      // that the field was wrong.
+      aria-invalid=(feedback === "error" ? "true" : null)
+    />
+
+    <span class="sds-checkbox__box" aria-hidden="true">
+      <span class="sds-checkbox__icon">
+        <if(indeterminate)>
+          <sds-icon size="xs"><fluent-subtract-regular/></sds-icon>
+        </if>
+        <else>
+          <sds-icon size="xs"><fluent-checkmark-regular/></sds-icon>
+        </else>
+      </span>
+    </span>
+
+    <if(label)>
+      <sds-text
+        as="span"
+        variant="bodyMd"
+        color="inherit"
+        class=(hideLabel ? "sds-visually-hidden" : "sds-checkbox__label")
+      >
+        ${label}
+      </sds-text>
+    </if>
+  </label>
+
+  <if(hint)>
+    // The feedback modifier is what colours it, and it was never written: the hint carried
+    // `color="inherit"` and took the page's ink, so an error message read like an ordinary
+    // note. The rules for `--error`, `--alert`, `--success` and `--disabled` have been in
+    // the stylesheet since the port with nothing to match. Same fault the Input had.
+    <sds-text
+      as="span"
+      id=hintId
+      variant="labelRegular"
+      // No `color="inherit"`: that writes `sds-text--inherit`, which reads `color: inherit`
+      // and beats the hint's own rule on equal specificity by coming later in the sheet.
+      // The hint's colour is the hint's to decide — secondary by default, and the feedback
+      // colour when there is one.
+      class=`sds-checkbox__hint sds-checkbox__hint--${disabled ? "disabled" : feedback}`
+    >
+      ${hint}
+    </sds-text>
+  </if>
+</div>