@kenlo/sds-design-system 0.9.9

package/components/Button/Button.css

@@ -0,0 +1,340 @@
+/* SDS Button.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Button/Button.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-button--primary
+     [data-color-scheme="lya"] .sds-button--primary:hover:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--primary:active:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--primary:focus-visible
+     [data-color-scheme="lya"] .sds-button--ghost
+     [data-color-scheme="lya"] .sds-button--ghost:hover:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--ghost:active:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--ghost:focus-visible
+     [data-color-scheme="lya"] .sds-button--pill:hover:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--pillFilled
+     [data-color-scheme="lya"] .sds-button--pillFilled:hover:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--pillFilled:active:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--pillFilled:focus-visible
+     [data-color-scheme="lya"] .sds-button--link
+     [data-color-scheme="lya"] .sds-button--link:hover:not(:disabled):not(.sds-button--loading)
+     [data-color-scheme="lya"] .sds-button--link:active:not(:disabled):not(.sds-button--loading)
+ *//* ============================================================
+   SDS Button
+   Variants:  primary (filled) | ghost (outlined) | link
+   Sizes:     small (48px) | medium (48px) | large (56px)
+              link: 24px fixed
+   Color:     follows global data-color-scheme on root element
+              (blue by default, override via data-color-scheme)
+   States:    enabled | hover | pressed | focused | disabled
+   ============================================================ */
+
+.sds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    opacity 120ms ease;
+  outline: none;
+  position: relative;
+  letter-spacing: -0.01em;
+  -webkit-font-smoothing: antialiased;
+}
+.sds-button--full {
+  width: 100%;
+}
+.sds-button__tooltip-wrapper--full {
+  display: flex;
+  width: 100%;
+}
+/* ──────────────────────────────────────────────
+   SIZES
+────────────────────────────────────────────── */
+.sds-button--md {
+  height: 48px;
+  padding: 0 var(--spacing-5);
+  gap: var(--spacing-2);
+  font-size: var(--font-size-title-sm);
+  line-height: var(--lh-title-sm);
+  /* soft, the install default — the four schemes are at the end of the file */
+  border-radius: 13px;
+}
+.sds-button--lg {
+  height: 56px;
+  padding: 0 var(--spacing-6);
+  gap: var(--spacing-2);
+  font-size: var(--font-size-title-sm);
+  line-height: var(--lh-title-sm);
+  /* soft, the install default — the four schemes are at the end of the file */
+  border-radius: 15px;
+}
+/* ──────────────────────────────────────────────
+   ICONS
+────────────────────────────────────────────── */
+.sds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+/* ──────────────────────────────────────────────
+   VARIANT: primary  (filled)
+   Uses --color-primary-* → follows data-color-scheme
+────────────────────────────────────────────── */
+.sds-button--primary {
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+}
+.sds-button--primary:hover:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-60);
+}
+.sds-button--primary:active:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-70);
+}
+.sds-button--primary:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ──────────────────────────────────────────────
+   VARIANT: ghost  (outlined / ghost)
+────────────────────────────────────────────── */
+.sds-button--ghost {
+  background-color: transparent;
+  border-color: var(--color-primary-50-solid);
+  color: var(--color-primary-50-solid);
+}
+.sds-button--ghost:hover:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-10);
+  border-color: var(--color-primary-60-solid);
+  color: var(--color-primary-60-solid);
+}
+.sds-button--ghost:active:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-20);
+  border-color: var(--color-primary-70-solid);
+  color: var(--color-primary-70-solid);
+}
+.sds-button--ghost:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-button--link:focus-visible {
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+/* ──────────────────────────────────────────────
+   VARIANT: link  (text only)
+────────────────────────────────────────────── */
+.sds-button--link {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  height: 24px;
+  font-size: var(--font-size-title-sm);
+  line-height: var(--lh-title-sm);
+  color: var(--color-primary-50-solid);
+}
+.sds-button--link:hover:not(:disabled):not(.sds-button--loading) {
+  color: var(--color-primary-60-solid);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.sds-button--link:active:not(:disabled):not(.sds-button--loading) {
+  color: var(--color-primary-70-solid);
+}
+/* ──────────────────────────────────────────────
+   VARIANT: pillFilled  (pill, filled)
+────────────────────────────────────────────── */
+.sds-button--pillFilled {
+  height: 40px;
+  padding: 0 var(--spacing-4);
+  gap: var(--spacing-2);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+  border: 1px solid var(--color-primary-50-solid);
+}
+.sds-button--pillFilled:hover:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-60);
+}
+.sds-button--pillFilled:active:not(:disabled):not(.sds-button--loading) {
+  background: var(--color-primary-70);
+}
+.sds-button--pillFilled:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ──────────────────────────────────────────────
+   VARIANT: pill  (pill, outlined)
+────────────────────────────────────────────── */
+.sds-button--pill {
+  height: 40px;
+  padding: 0 var(--spacing-4);
+  gap: var(--spacing-2);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);
+  background-color: var(--component-bg-color);
+  color: var(--color-neutral-80);
+  border: 1px solid var(--border-interactive-color);
+}
+.sds-button--pill:hover:not(:disabled):not(.sds-button--loading) {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-button--pill:active:not(:disabled):not(.sds-button--loading) {
+  background-color: var(--color-neutral-20);
+  border-color: var(--color-neutral-60);
+  color: var(--color-neutral-90);
+}
+.sds-button--pill:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ──────────────────────────────────────────────
+   LOADING STATE
+────────────────────────────────────────────── */
+.sds-button--loading {
+  cursor: wait;
+}
+.sds-button--loading .sds-button__label,
+.sds-button--loading .sds-button__icon {
+  opacity: 0;
+}
+.sds-button--loading .sds-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+/* Primary/pillFilled have a dark background → white loader */
+.sds-button--primary.sds-button--loading .sds-spinner--solid .sds-spinner__arc,
+.sds-button--pillFilled.sds-button--loading .sds-spinner--solid .sds-spinner__arc {
+  stroke: var(--color-on-primary);
+}
+.sds-button--primary.sds-button--loading .sds-spinner__track,
+.sds-button--pillFilled.sds-button--loading .sds-spinner__track {
+  /* The arc above already reads --color-on-primary, which is white or black by contrast
+     against the button's own fill. The track follows it at 30% rather than assuming
+     white: on a light primary --color-on-primary is black, and a white track there would
+     be invisible. KDLS hardcoded white and had that bug. */
+  stroke: color-mix(in srgb, var(--color-on-primary) 30%, transparent);
+}
+/* ──────────────────────────────────────────────
+   DISABLED
+────────────────────────────────────────────── */
+.sds-button:disabled,
+.sds-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  background-color: var(--color-neutral-20) !important;
+  border-color: var(--border-static-color) !important;
+  color: var(--color-neutral-40) !important;
+  box-shadow: none !important;
+}
+/* Tooltip wraps the button only when disabled: keeps pointer-events:none on the button
+   (lets hover reach the wrapper for the tooltip) and shows the cursor on the wrapper */
+.sds-button__tooltip-wrapper {
+  cursor: help;
+}
+.sds-button__tooltip-wrapper > .sds-button:disabled,
+.sds-button__tooltip-wrapper > .sds-button[aria-disabled="true"] {
+  pointer-events: none;
+}
+.sds-button--link:disabled,
+.sds-button--link[aria-disabled="true"] {
+  background-color: transparent !important;
+  color: var(--color-neutral-40) !important;
+  border-color: transparent !important;
+}
+.sds-button--ghost:disabled,
+.sds-button--ghost[aria-disabled="true"],
+.sds-button--pill:disabled,
+.sds-button--pill[aria-disabled="true"] {
+  background-color: transparent !important;
+  border-color: var(--border-static-color) !important;
+  color: var(--color-neutral-40) !important;
+}
+[data-theme="dark"] .sds-button:disabled,
+[data-theme="dark"] .sds-button[aria-disabled="true"] {
+  background-color: var(--color-neutral-30) !important;
+  border-color: var(--border-interactive-color) !important;
+  color: var(--color-neutral-40) !important;
+}
+[data-theme="dark"] .sds-button--link:disabled,
+[data-theme="dark"] .sds-button--link[aria-disabled="true"] {
+  background-color: transparent !important;
+  color: var(--color-neutral-40) !important;
+  border-color: transparent !important;
+}
+[data-theme="dark"] .sds-button--ghost:disabled,
+[data-theme="dark"] .sds-button--ghost[aria-disabled="true"],
+[data-theme="dark"] .sds-button--pill:disabled,
+[data-theme="dark"] .sds-button--pill[aria-disabled="true"] {
+  background-color: transparent !important;
+  border-color: var(--border-interactive-color) !important;
+  color: var(--color-neutral-40) !important;
+}
+/* ──────────────────────────────────────────────
+   NEUTRAL SCHEME DARK MODE OVERRIDE
+   In dark mode, neutral-80 resolves to light gray —
+   ensure primary button stays legible.
+────────────────────────────────────────────── */
+[data-theme="dark"] .sds-button--pill:hover:not(:disabled):not(.sds-button--loading) {
+  background-color: transparent;
+}
+[data-theme="dark"] .sds-button--pill:active:not(:disabled):not(.sds-button--loading) {
+  background-color: var(--color-neutral-30);
+}
+/* Four more dead rules stood here, and they looked at first like a design intention worth
+   keeping: they set the primary button's own FILL in the dark theme, to `--color-neutral-80`
+   — which reads as "dark" to anyone writing CSS in the light theme.
+
+   It is not. In the dark theme `--color-neutral-80` resolves to #f2f2f2, exactly what
+   `--color-primary-50` resolves to there. Measured side by side in Chrome: both #f2f2f2
+   with #262626 text, indistinguishable. The rules asked for the button that already
+   exists, spelled with different token names, and they never ran anyway. Nothing to
+   preserve. */
+
+/* ── Corner radius schemes ────────────────────────────────────────────────────
+   A fraction of the button's own height, not `--radius-md`, and for the reason the Pill
+   wrote down first: a radius past half the height draws a capsule, and the browser clamps
+   anything beyond it. `--radius-md` is 24px at `medium`, which on the 48px button is
+   EXACTLY half — so `medium` was already the capsule and `rounded` (32px, clamped back to
+   24) drew the identical shape. Rafael, looking at the two side by side: between medium
+   and rounded there is no visual difference, and there has to be.
+
+       fraction   flat 0    soft 0.275    medium 0.375    rounded 0.5 (a capsule)
+       48px       0         13px          18px            capsule
+       56px       0         15px          21px            capsule
+
+   Same fractions as Pill (40px → 11 and 15) and as the 40px rows elsewhere, which is what
+   keeps every control in the system reading as one family at a given scheme.
+
+   `pillFilled` and `pill` are not here on purpose: they are capsules by definition —
+   being round is what those variants ARE, the way it is for a badge or an avatar — so
+   they keep `--radius-full` in every scheme.
+
+   The bare values above are `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to them. */
+[data-radius="flat"] .sds-button--md { border-radius: 0; }
+[data-radius="flat"] .sds-button--lg { border-radius: 0; }
+
+[data-radius="soft"] .sds-button--md { border-radius: 13px; }
+[data-radius="soft"] .sds-button--lg { border-radius: 15px; }
+
+[data-radius="medium"] .sds-button--md { border-radius: 18px; }
+[data-radius="medium"] .sds-button--lg { border-radius: 21px; }
+
+[data-radius="rounded"] .sds-button--md { border-radius: var(--radius-full); }
+[data-radius="rounded"] .sds-button--lg { border-radius: var(--radius-full); }

package/components/Button/button-variants.js

@@ -0,0 +1,25 @@
+/**
+ * The Button vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Button/Button.tsx.
+ * Divergence: none. Every variant already read the primary slot rather than a Kenlo
+ * value — what KDLS added on top was a set of [data-color-scheme="lya"] overrides, and
+ * those are gone with the scheme. A gradient now reaches the button the same way it
+ * reaches everything else: through applyCustomGradient filling the slot.
+ */
+export const BUTTON_VARIANTS = ['primary', 'ghost', 'link', 'pill', 'pillFilled'];
+export const BUTTON_SIZES = ['md', 'lg'];
+export const BUTTON_WIDTHS = ['hug', 'fill'];
+export const BUTTON_TYPES = ['button', 'submit', 'reset'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown button ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertButtonVariant = (v) => assertOneOf('variant', v, BUTTON_VARIANTS);
+export const assertButtonSize = (v) => assertOneOf('size', v, BUTTON_SIZES);
+export const assertButtonWidth = (v) => assertOneOf('width', v, BUTTON_WIDTHS);
+export const assertButtonType = (v) => assertOneOf('type', v, BUTTON_TYPES);

package/components/Button/button.marko

@@ -0,0 +1,139 @@
+<!-- sds-button — ported from kdls-design-system v2.5.1 (0f3edf8) components/Button/Button.tsx.
+
+Hydrates, for the same reason IconButton does: a button exists to be clicked, and Marko 5
+drops a listener silently on a component that does not hydrate. Its input is a label and
+a handful of flags, so the payload is small.
+
+Divergences:
+
+Sixteen [data-color-scheme="lya"] rules are gone with the scheme they served. They gave
+the primary, ghost, pill and pillFilled variants a gradient treatment; a gradient reaches
+the button through applyCustomGradient filling the primary slot now, and the base rules
+already paint backgrounds from that slot.
+
+`disabledTooltip` and `disabledTooltipPosition` are here, and they wrap rather than
+decorate: a disabled <button> dispatches no mouse events and lets none bubble, so a
+tooltip hung on the button itself would never open. KDLS solves it the same way — the
+tooltip's handlers sit on a wrapper and the button inside it is given
+`pointer-events: none`, which is what lets the pointer reach the wrapper at all.
+
+Touch is still unanswered for tooltips in general (see sds-tooltip), so on a phone a
+disabled button still explains itself only to a screen reader, through aria-describedby.
+
+The spinner track follows --color-on-primary at 30% instead of a hardcoded white. KDLS
+wrote rgba(255,255,255,.30), which is invisible on a light primary — where
+--color-on-primary is black. -->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import { assertButtonVariant, assertButtonSize, assertButtonWidth, assertButtonType }
+  from "./button-variants.js";
+
+class {
+  handleClick(event) {
+    const { disabled, isLoading, onClick } = this.input;
+    // `disabled` is already enforced by the browser; this guards the loading state,
+    // which stays focusable and keeps its shape.
+    if (disabled || isLoading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  }
+}
+
+$ {
+  const {
+    label,
+    variant = "primary",
+    size = "md",
+    width = "hug",
+    type = "button",
+    iconLeft,
+    iconRight,
+    isLoading = false,
+    disabled = false,
+    disabledTooltip,
+    disabledTooltipPosition = "top",
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(disabledTooltipPosition);
+
+  assertButtonVariant(variant);
+  assertButtonSize(size);
+  assertButtonWidth(width);
+  assertButtonType(type);
+
+  const ariaLabel = input["aria-label"] ?? input.ariaLabel;
+  if (!label && !ariaLabel) {
+    throw new Error('sds-button needs a `label`, or an `aria-label` when the button shows only an icon.');
+  }
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const loading = isLoading && !disabled;
+
+  // The explanation only appears when there is something to explain.
+  const explains = Boolean(disabledTooltip) && disabled;
+  const wrapperClass = [
+    "sds-button__tooltip-wrapper",
+    width === "fill" ? "sds-button__tooltip-wrapper--full" : "",
+  ].filter(Boolean).join(" ");
+
+  const classes = [
+    "sds-button",
+    `sds-button--${variant}`,
+    `sds-button--${size}`,
+    width === "fill" ? "sds-button--full" : "",
+    loading ? "sds-button--loading" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<macro|{ }| name="theButton">
+  <button
+    type=type
+    class=classes
+    disabled=(disabled || null)
+    aria-label=ariaLabel
+    aria-disabled=(disabled ? "true" : null)
+    aria-busy=(loading ? "true" : null)
+    on-click("handleClick")
+  >
+    <if(loading)>
+      <sds-spinner size="sm" decorative/>
+    </if>
+
+    <if(iconLeft)>
+      <span class="sds-button__icon sds-button__icon--left" aria-hidden="true">
+        <sds-icon>
+          <${renderable(iconLeft)}/>
+        </sds-icon>
+      </span>
+    </if>
+
+    <if(label)>
+      <span class="sds-button__label">${label}</span>
+    </if>
+
+    <if(iconRight)>
+      <span class="sds-button__icon sds-button__icon--right" aria-hidden="true">
+        <sds-icon>
+          <${renderable(iconRight)}/>
+        </sds-icon>
+      </span>
+    </if>
+  </button>
+</macro>
+
+<!-- The tooltip wraps, it does not decorate. A disabled <button> dispatches no mouse
+     events and lets none bubble, so handlers on the button itself would never fire; the
+     wrapper receives them instead, and Button.css gives the disabled button
+     `pointer-events: none` so the pointer reaches the wrapper at all. -->
+<if(explains)>
+  <sds-tooltip content=disabledTooltip placement=disabledTooltipPosition class=wrapperClass>
+    <theButton/>
+  </sds-tooltip>
+</if>
+<else>
+  <theButton/>
+</else>