@kenlo/sds-design-system 0.9.9

package/components/IconButton/IconButton.css

@@ -0,0 +1,85 @@
+/* SDS IconButton.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/IconButton/IconButton.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-icon-button--primary:not(:disabled):not([aria-disabled="true"]) .sds-icon-button__icon svg rect
+ *//* ============================================================
+   SDS IconButton
+   Sizes: 32 | 40 | 48px
+   Variants: primary (colored, default) | neutral (gray)
+   ============================================================ */
+
+.sds-icon-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  /* corner-radius-small = 8px, per Figma spec */
+  border-radius: var(--radius-sm);
+  transition: background-color 120ms ease;
+  padding: 0;
+  flex-shrink: 0;
+  outline: none;
+}
+.sds-icon-button:disabled,
+.sds-icon-button[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+.sds-icon-button--loading {
+  cursor: wait;
+}
+/* ── Sizes ── */
+.sds-icon-button--sm {
+  width: 32px;
+  height: 32px;
+}
+.sds-icon-button--md {
+  width: 40px;
+  height: 40px;
+}
+.sds-icon-button--lg {
+  width: 48px;
+  height: 48px;
+}
+/* ── Icon size ── */
+.sds-icon-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  line-height: 1;
+  position: relative;
+}
+/* Icon is always 24px regardless of button size (sm/md/lg) */
+
+/* ── Hover & Pressed backgrounds ──
+   Figma uses opacity-05 / opacity-10 tokens (rgba 26,26,26)
+   Same for both primary (on) and neutral (off) variants. */
+.sds-icon-button:hover:not(:disabled):not(.sds-icon-button--loading) {
+  background-color: var(--color-opacity-05);
+}
+.sds-icon-button:active:not(:disabled):not(.sds-icon-button--loading) {
+  background-color: var(--color-opacity-10);
+}
+/* ── Primary (default): colored icon ── */
+.sds-icon-button--primary .sds-icon-button__icon {
+  color: var(--color-primary-50-solid);
+}
+/* ── Neutral (off): gray icon ── */
+.sds-icon-button--neutral .sds-icon-button__icon {
+  color: var(--color-neutral-70);
+}
+/* ── Focus ring ── */
+.sds-icon-button:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ── Disabled — always last, overrides primary/neutral icon color via cascade order ── */
+.sds-icon-button:disabled .sds-icon-button__icon,
+.sds-icon-button[aria-disabled="true"] .sds-icon-button__icon {
+  color: var(--color-neutral-40);
+}

package/components/IconButton/icon-button-variants.js

@@ -0,0 +1,18 @@
+/**
+ * The IconButton vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/IconButton/IconButton.tsx.
+ * Divergence: none. `primary` was already the slot, not a Kenlo value.
+ */
+export const ICON_BUTTON_VARIANTS = ['primary', 'neutral'];
+export const ICON_BUTTON_SIZES = ['sm', 'md', 'lg'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown icon button ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertIconButtonVariant = (v) => assertOneOf('variant', v, ICON_BUTTON_VARIANTS);
+export const assertIconButtonSize = (v) => assertOneOf('size', v, ICON_BUTTON_SIZES);

package/components/IconButton/icon-button.marko

@@ -0,0 +1,103 @@
+<!-- sds-icon-button — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/IconButton/IconButton.tsx.
+
+This component hydrates, and unlike the Badge that is not a close call: a button whose
+purpose is to be clicked has to carry its listener, and Marko 5 drops a listener silently
+on a component that does not hydrate. Its input is an aria-label and three flags, so the
+serialised payload is small — the cost scales with what you put in.
+
+Divergences:
+
+The inline <linearGradient> defs are gone. They existed so the lya scheme could fill the
+glyph with a gradient through `fill: url(#...)`, and that scheme does not exist here. A
+gradient reaches the icon through applyCustomGradient and the primary slot instead.
+
+`aria-label` is required and validated. There is no way to derive a label from an
+arbitrary glyph, and an unlabelled icon button is invisible to a screen reader — the one
+failure this component can have that nobody sees. -->
+
+import { assertIconButtonVariant, assertIconButtonSize } from "./icon-button-variants.js";
+import { assertButtonType } from "../Button/button-variants.js";
+
+class {
+  handleClick(event) {
+    const { disabled, isLoading, onClick } = this.input;
+    // The native `disabled` already blocks the click; this guards the loading state,
+    // which must stay focusable and keep its shape.
+    if (disabled || isLoading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  }
+}
+
+$ {
+  const {
+    icon,
+    variant = "primary",
+    size = "sm",
+    isLoading = false,
+    disabled = false,
+    type = "button",
+    class: extraClass = "",
+  } = input;
+
+  // Marko camelCases a hyphenated attribute written on a component tag, capitalising only
+  // the letter after the hyphen — see foundations/attrs.js. Applying the rule beats
+  // remembering the spelling: aria-haspopup arrives as `ariaHaspopup`.
+  assertButtonType(type);
+
+  const aria = (name) => input[`aria-${name}`]
+    ?? input[`aria${name[0].toUpperCase()}${name.slice(1)}`]
+    ?? null;
+
+  const label = aria("label");
+  // A disclosure — a button that opens a panel — has to say so, and say whether the panel
+  // is open. Without these the header's notification and product buttons announce nothing
+  // about what they control, which is KDLS's behaviour.
+  const ariaHasPopup = aria("haspopup");
+  const ariaExpanded = aria("expanded");
+  const ariaControls = aria("controls");
+  if (!label) {
+    throw new Error('sds-icon-button needs an `aria-label` — a glyph carries no name.');
+  }
+
+  assertIconButtonVariant(variant);
+  assertIconButtonSize(size);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const loading = isLoading && !disabled;
+
+  const classes = [
+    "sds-icon-button",
+    `sds-icon-button--${size}`,
+    `sds-icon-button--${variant}`,
+    loading ? "sds-icon-button--loading" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<button
+  type=type
+  class=classes
+  disabled=(disabled || null)
+  aria-label=label
+  aria-haspopup=ariaHasPopup
+  aria-expanded=ariaExpanded
+  aria-controls=ariaControls
+  aria-disabled=(disabled ? "true" : null)
+  aria-busy=(loading ? "true" : null)
+  on-click("handleClick")
+>
+  <if(loading)>
+    <sds-spinner size="sm" decorative/>
+  </if>
+  <span class="sds-icon-button__icon" aria-hidden="true">
+    <if(!loading)>
+      <sds-icon>
+        <${renderable(icon)}/>
+      </sds-icon>
+    </if>
+  </span>
+</button>

package/components/Incrementer/Incrementer.css

@@ -0,0 +1,94 @@
+/* SDS Incrementer.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Incrementer/Incrementer.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-incrementer:hover:not(.sds-incrementer--disabled)
+ *//* ============================================================
+   SDS Incrementer
+   Height:  40px (equal to Pill and Toggle)
+   States:  enabled | hover | disabled (per-button)
+   Theme:   token-based via [data-theme="dark"]
+   ============================================================ */
+
+.sds-incrementer {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 40px;
+  gap: 0;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border-interactive-color);
+  overflow: hidden;
+  font-family: var(--font-family-base);
+  background: var(--component-bg-color);
+  color: var(--body-color);
+  transition: border-color 120ms ease;
+}
+.sds-incrementer:hover:not(.sds-incrementer--disabled) {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-incrementer--disabled {
+  background: var(--color-neutral-20);
+  border-color: var(--border-static-color);
+  color: var(--color-neutral-40);
+  cursor: not-allowed;
+}
+.sds-incrementer__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-full);
+}
+/* ──────────────────────────────────────────────
+   BUTTONS
+────────────────────────────────────────────── */
+.sds-incrementer__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+  outline: none;
+}
+.sds-incrementer__btn:hover:not(:disabled) {
+  background: var(--color-neutral-20);
+}
+.sds-incrementer__btn:active:not(:disabled) {
+  background: var(--color-neutral-30);
+}
+.sds-incrementer__btn:disabled {
+  cursor: not-allowed;
+}
+/* ──────────────────────────────────────────────
+   VALUE DISPLAY
+────────────────────────────────────────────── */
+.sds-incrementer__value {
+  min-width: 36px;
+  text-align: center;
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);
+  padding: 0 var(--spacing-1);
+  user-select: none;
+}
+/* ──────────────────────────────────────────────
+   DARK MODE
+────────────────────────────────────────────── */
+
+[data-theme="dark"] .sds-incrementer__btn:hover:not(:disabled) {
+  background: var(--color-neutral-30);
+}
+[data-theme="dark"] .sds-incrementer__btn:active:not(:disabled) {
+  background: var(--color-neutral-40);
+}
+[data-theme="dark"] .sds-incrementer--disabled {
+  background: var(--color-neutral-30);
+  border-color: var(--border-interactive-color);
+  color: var(--color-neutral-40);
+}

package/components/Incrementer/incrementer.marko

@@ -0,0 +1,70 @@
+<!-- sds-incrementer — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Incrementer/Incrementer.tsx.
+
+Minus, a number, plus. It hydrates because the buttons have to do something, but it holds
+no state: the value comes from the caller and goes back through onChange, which is what
+lets it sit inside a form that already owns that number.
+
+Divergence: the value is a <output> with aria-live, so a screen reader hears the new
+number when a button is pressed. KDLS rendered a plain span, which changes silently —
+someone using a screen reader presses plus and has no idea whether anything happened. -->
+
+class {
+  step(direction) {
+    const { value, step = 1, min, max, disabled, onChange } = this.input;
+    if (disabled) return;
+    const next = value + direction * step;
+    if (min !== undefined && next < min) return;
+    if (max !== undefined && next > max) return;
+    onChange?.(next);
+  }
+
+  subtract() { this.step(-1); }
+  add() { this.step(1); }
+}
+
+$ {
+  const {
+    value,
+    min,
+    max,
+    step = 1,
+    disabled = false,
+    label,
+    class: extraClass = "",
+  } = input;
+
+  if (typeof value !== "number") {
+    throw new Error("sds-incrementer needs a numeric `value`.");
+  }
+
+  const canSubtract = !disabled && (min === undefined || value - step >= min);
+  const canAdd = !disabled && (max === undefined || value + step <= max);
+
+  const classes = ["sds-incrementer", disabled ? "sds-incrementer--disabled" : "", extraClass]
+    .filter(Boolean).join(" ");
+}
+
+<div class=classes role="group" aria-label=label>
+  <button
+    type="button"
+    class="sds-incrementer__btn"
+    disabled=(!canSubtract || null)
+    aria-label="Diminuir"
+    on-click("subtract")
+  >
+    <sds-icon><fluent-subtract-regular/></sds-icon>
+  </button>
+
+  <output class="sds-incrementer__value" aria-live="polite">${value}</output>
+
+  <button
+    type="button"
+    class="sds-incrementer__btn"
+    disabled=(!canAdd || null)
+    aria-label="Aumentar"
+    on-click("add")
+  >
+    <sds-icon><fluent-add-regular/></sds-icon>
+  </button>
+</div>