@kenlo/sds-design-system 0.9.9

package/components/Switch/Switch.css

@@ -0,0 +1,209 @@
+/* SDS Switch.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Switch/Switch.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-switch--on .sds-switch__track
+     [data-color-scheme="lya"] .sds-switch--on:not(.sds-switch--disabled):hover .sds-switch__track
+ */.sds-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-family-base);
+  outline: none;
+}
+.sds-switch--disabled {
+  cursor: not-allowed;
+}
+/* Track */
+.sds-switch__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* soft, the install default — see the note by the scheme overrides below */
+  border-radius: 5px;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+  flex-shrink: 0;
+  background: var(--color-neutral-50);
+}
+.sds-switch--sm .sds-switch__track {
+  width: 44px;
+  height: 24px;
+}
+.sds-switch--md .sds-switch__track {
+  width: 56px;
+  height: 32px;
+}
+/* Track states */
+.sds-switch--off .sds-switch__track {
+  background-color: var(--color-neutral-50);
+}
+.sds-switch--off:not(.sds-switch--disabled):hover .sds-switch__track {
+  background-color: var(--color-neutral-60);
+}
+.sds-switch--on .sds-switch__track {
+  background: var(--color-primary-50);
+}
+.sds-switch--on .sds-switch__thumb {
+  background: var(--color-on-primary);
+}
+.sds-switch--on:not(.sds-switch--disabled):hover .sds-switch__track {
+  background: var(--color-primary-60);
+}
+/* ── Disabled ── */
+.sds-switch--disabled .sds-switch__track {
+  background-color: var(--color-neutral-20) !important;
+}
+.sds-switch--disabled .sds-switch__thumb {
+  background-color: var(--color-neutral-40);
+}
+[data-theme="dark"] .sds-switch--disabled .sds-switch__track {
+  background-color: var(--color-neutral-40) !important;
+}
+[data-theme="dark"] .sds-switch--disabled .sds-switch__thumb {
+  background-color: var(--color-neutral-20);
+}
+.sds-switch--disabled .sds-switch__label {
+  color: var(--color-neutral-40);
+}
+/* Thumb */
+.sds-switch__thumb {
+  position: absolute;
+  /* soft, the install default — see the note by the scheme overrides below */
+  border-radius: 4px;
+  /* Off, the track is a mid grey and white reads against it. On, see the `:checked` rule
+     further down — the thumb then sits on the primary colour and cannot stay white. */
+  background: var(--color-white);
+  box-shadow: var(--shadow-drop-sm);
+  transition: transform 200ms ease, background-color 120ms ease;
+}
+.sds-switch--sm .sds-switch__thumb {
+  width: 20px;
+  height: 20px;
+  left: var(--spacing-0-5);
+}
+.sds-switch--sm.sds-switch--on .sds-switch__thumb {
+  transform: translateX(20px);
+}
+.sds-switch--md .sds-switch__thumb {
+  width: 28px;
+  height: 28px;
+  left: var(--spacing-0-5);
+}
+.sds-switch--md.sds-switch--on .sds-switch__thumb {
+  transform: translateX(24px);
+}
+/* Label */
+
+/* Focus ring */
+.sds-switch--on:focus-visible .sds-switch__track,
+.sds-switch--off:focus-visible .sds-switch__track {
+  box-shadow: var(--focus-ring);
+  outline: none;
+}
+/* Container */
+.sds-switch-container {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--color-neutral-40);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+}
+.sds-switch-container--disabled {
+  border-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-switch-container {
+  border-color: var(--color-neutral-60);
+}
+/* Wrapper — vertical stack with tight gap */
+.sds-switch-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+/* Width modifier */
+.sds-switch-wrapper--fill  { width: 100%; }
+.sds-switch-wrapper--fill > .sds-switch-container { width: 100%; }
+/* Content column (label + hint stacked, no-container case) */
+.sds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+}
+/* Hint */
+.sds-switch__hint.sds-switch__hint--disabled { color: var(--color-neutral-40); }
+.sds-switch-container + .sds-switch__hint { padding-left: var(--spacing-4); }
+/* Dark mode */
+[data-theme="dark"] .sds-switch--off .sds-switch__track {
+  background-color: var(--color-neutral-40);
+}
+[data-theme="dark"] .sds-switch--off:not(.sds-switch--disabled):hover .sds-switch__track {
+  background-color: var(--color-neutral-50);
+}
+[data-theme="dark"] .sds-switch-container--disabled {
+  border-color: var(--border-interactive-color);
+}
+/* ── Corner Radius Scheme overrides ── */
+/* The base values above are soft's, not a capsule's: an install with no data-radius
+   attribute gets the default scheme, and SDS's default is soft — KDLS's was `default`,
+   Kenlo's own, which it kept unnamed in :root. `rounded` is explicit for the same reason,
+   because it can no longer fall through to the base. See Pill.css for the long version. */
+/* Valores próprios, e não a escada, porque o trilho pequeno tem 24px de altura: metade
+   é 12px, e QUALQUER raio a partir daí desenha a mesma cápsula. `medium` valia exatamente
+   12px, então ele já era o formato final e ficava idêntico ao `rounded` — foi isso que o
+   Rafael viu. A crescente aqui é 0 → 5 → 9 → cápsula, e o 9 é o maior número que ainda
+   deixa um canto visível no trilho de 24px. */
+[data-radius="flat"] .sds-switch__track { border-radius: 0; }
+[data-radius="flat"] .sds-switch__thumb { border-radius: 0; }
+[data-radius="soft"] .sds-switch__track { border-radius: 5px; }
+[data-radius="soft"] .sds-switch__thumb { border-radius: 4px; }
+[data-radius="medium"] .sds-switch__track { border-radius: 9px; }
+[data-radius="medium"] .sds-switch__thumb { border-radius: 7px; }
+[data-radius="rounded"] .sds-switch__track { border-radius: var(--radius-full); }
+/* The thumb is a circle at rounded, which is what 50% draws on a square box. */
+[data-radius="rounded"] .sds-switch__thumb { border-radius: 50%; }
+
+/* ── The native input ──────────────────────────────────────────────────────────
+   A real checkbox with role="switch". KDLS drew a div with useState and a click handler:
+   unreachable by keyboard, unsubmittable in a form, and announced as nothing in
+   particular. role="switch" is what makes a screen reader say "on" and "off" rather than
+   "checked" and "unchecked".
+
+   Hidden with opacity, not display:none — a hidden input cannot be focused. */
+.sds-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sds-switch__input:checked ~ .sds-switch__track {
+  background: var(--color-primary-50);
+}
+
+/* On, the thumb sits on the primary colour and has to be read against THAT.
+
+   It was a fixed `--color-white`, and `--color-primary-50` inverts: in the dark theme the
+   track is #f2f2f2 and the thumb was #ffffff — measured at 1.12:1, which is not low
+   contrast, it is an invisible thumb. A switch whose knob you cannot see is a switch whose
+   state you cannot read. Rafael found it on the portal.
+
+   `--color-on-primary` is the palette's own answer for what goes on that surface, and this
+   is the same fix the Button, the Notification and the Avatar took. A patch for it used to
+   sit here too, guarded on `[data-color-scheme="neutral"][data-theme="dark"]`, which could
+   never match — see the note in tokens.css. */
+.sds-switch__input:checked ~ .sds-switch__track .sds-switch__thumb {
+  transform: translateX(100%);
+  background: var(--color-on-primary);
+}
+
+.sds-switch__input:focus-visible ~ .sds-switch__track {
+  box-shadow: var(--focus-ring);
+}

package/components/Switch/switch.marko

@@ -0,0 +1,99 @@
+<!-- sds-switch — ported from kdls-design-system v2.5.1 (0f3edf8) components/Switch/Switch.tsx.
+
+A real <input type="checkbox" role="switch">. KDLS drew a div with useState and a click
+handler, so a switch could not be reached by keyboard, could not be submitted with a form,
+and announced itself as nothing in particular.
+
+role="switch" is what makes a screen reader say "on"/"off" rather than "checked"/
+"unchecked" — the same control, named the way a person would name it.
+
+`checked` is the controlled value and `defaultChecked` the uncontrolled starting one, as
+in KDLS. In the DOM they are the same attribute — it sets the *initial* state and the
+browser owns it afterwards — so a caller passing `checked` and never updating it will see
+the switch move anyway. A caller who needs it pinned has to re-render with the value it
+wants, which is what controlled means.
+
+No state: the browser owns checked, and the native change event bubbles for anyone who
+needs to react. -->
+
+$ {
+  const {
+    label,
+    hint,
+    name,
+    value,
+    size = "sm",
+    width = "hug",
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    container = false,
+    // `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-switch-${component.id}`,
+    class: extraClass = "",
+  } = input;
+
+  const isOn = checked !== undefined ? checked : defaultChecked;
+
+  if (size !== "sm" && size !== "md") {
+    throw new Error(`Unknown switch size: "${size}". Allowed: sm, md`);
+  }
+  if (width !== "hug" && width !== "fill") {
+    throw new Error(`Unknown switch width: "${width}". Allowed: hug, fill`);
+  }
+
+  const hintId = hint ? `${id}-hint` : null;
+
+  const classes = [
+    "sds-switch",
+    `sds-switch--${size}`,
+    isOn ? "sds-switch--on" : "sds-switch--off",
+    disabled ? "sds-switch--disabled" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  const wrapperClass = [
+    "sds-switch-wrapper",
+    `sds-switch-wrapper--${width}`,
+    container ? "sds-switch-container" : "",
+    container && disabled ? "sds-switch-container--disabled" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<div class=wrapperClass>
+  <label class=classes for=id>
+    <input
+      class="sds-switch__input"
+      type="checkbox"
+      role="switch"
+      id=id
+      name=name
+      value=value
+      checked=(isOn || null)
+      disabled=(disabled || null)
+      aria-describedby=hintId
+    />
+
+    <span class="sds-switch__track" aria-hidden="true">
+      <span class="sds-switch__thumb"/>
+    </span>
+
+    <if(label)>
+      <span class="sds-switch__content">
+        <sds-text as="span" variant="bodyMd" color="inherit" class="sds-switch__label">
+          ${label}
+        </sds-text>
+      </span>
+    </if>
+  </label>
+
+  <if(hint)>
+    <sds-text as="span" id=hintId variant="labelRegular" color="inherit"
+      class=`sds-switch__hint ${disabled ? "sds-switch__hint--disabled" : ""}`.trim()>
+      ${hint}
+    </sds-text>
+  </if>
+</div>

package/components/Table/Table.css

@@ -0,0 +1,270 @@
+/* SDS Table.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Table/Table.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── Table ──────────────────────────────────────────────────────────────
+   Surface canvas + sortable list with header, rows and column system.
+   BEM root: .sds-table
+   ─────────────────────────────────────────────────────────────────── */
+
+/* ── Canvas wrapper ── */
+.sds-table {
+  width: 100%;
+  background: var(--component-bg-color);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* ── bordered=true — visible neutral-20 stroke ── */
+.sds-table--bordered {
+  border-color: var(--border-static-color);
+}
+.sds-table .sds-pagination {
+  padding: var(--spacing-4) var(--spacing-6);
+}
+/* ── variant="cardLines" — restores the container's own padding/gap and turns each row
+   back into an individual card (own border, radius, gap) ── */
+.sds-table--cardLines {
+  padding: var(--spacing-6);
+  gap: var(--spacing-6);
+}
+.sds-table--cardLines .sds-table__list {
+  gap: var(--spacing-4);
+}
+.sds-table--cardLines .sds-table__header {
+  padding: 0;
+}
+.sds-table--cardLines .sds-table__row--header {
+  padding: 0 var(--spacing-4);
+}
+.sds-table--cardLines .sds-table__row:not(.sds-table__row--header) {
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+.sds-table--cardLines .sds-pagination {
+  padding: 0;
+}
+/* ── Header: title on the left, filters always on the right (margin-left: auto
+   guarantees right alignment even without a title) — wraps to a line
+   below the title when they don't fit side by side (flex-wrap) ── */
+.sds-table__header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-6);
+}
+.sds-table__header-title {
+  flex: 1;
+  min-width: 0;
+}
+/* ── Mobile sort picker — replaces the label row below the 800px breakpoint,
+   only rendered when at least one column is sortable ── */
+.sds-table__sort-picker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-6);
+}
+.sds-table__header-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+  margin-left: auto;
+}
+/* ── List (scrollable table body) ── */
+.sds-table__list {
+  width: 100%;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+}
+/* ── Row ── */
+.sds-table__row {
+  position: relative; /* anchors sds-table__mobile-icon-actions */
+  display: grid;
+  /* grid-template-columns driven entirely by inline style on each row */
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-6);
+  min-height: 56px;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid var(--border-static-color);
+  background: var(--component-bg-color);
+  transition: background-color 120ms ease;
+}
+/* ── Mobile-only action slots (TableColumn.mobileAction) ──
+   'icon' (chevron, •••) pins to the row's top-right corner, independent of the
+   stack's flow — rowSelection's checkbox pushes the stack down but never this.
+   'link' collects into a final row: one button stays left-aligned, more than
+   one split the width evenly. ── */
+.sds-table__mobile-icon-actions {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.sds-table__mobile-link-actions {
+  display: flex;
+  gap: var(--spacing-4);
+}
+.sds-table__mobile-link-actions--split .sds-table__mobile-link-action {
+  flex: 1;
+}
+/* Header row */
+.sds-table__row--header {
+  min-height: auto;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0;
+  padding: var(--spacing-2) var(--spacing-6);
+}
+.sds-table__row--header .sds-table__col {
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-80);
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: left;
+}
+/* Title follows the column's align — same direction as the content below it */
+.sds-table__row--header .sds-table__col--center {
+  align-items: center;
+  text-align: center;
+}
+.sds-table__row--header .sds-table__col--end {
+  align-items: flex-end;
+  text-align: right;
+}
+.sds-table__row:hover:not(.sds-table__row--header) {
+  background: var(--color-neutral-10);
+}
+.sds-table__row--selected {
+  background: transparent;
+  outline: 1px solid var(--color-primary-30-solid);
+  outline-offset: -1px;
+}
+.sds-table__row--selected:hover {
+  background: var(--color-neutral-10);
+}
+/* ── Clickable row (hoverable + onRowClick) — same recipe as Card's hoverable,
+   but with background instead of box-shadow, to match the row's already-existing
+   hover (more subtle than Card's elevation) ── */
+.sds-table__row--clickable {
+  cursor: pointer;
+  outline: none;
+  border-color: var(--border-interactive-color);
+}
+.sds-table__row.sds-table__row--clickable:active {
+  background: var(--color-neutral-20);
+}
+.sds-table__row--clickable:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ── Column ── */
+.sds-table__col {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0; /* grid items don't shrink below content by default — required below */
+  overflow-wrap: anywhere; /* long unbreakable text (email, url) wraps inside the column instead of overflowing into the next one */
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--body-color);
+}
+.sds-table__col--center {
+  align-items: center;
+  text-align: center;
+}
+.sds-table__col--end {
+  align-items: flex-end;
+  text-align: right;
+}
+.sds-table__col--check { padding: 0; }
+/* ── Sortable header ── */
+.sds-table__row--header .sds-table__col--sortable {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-1);
+  cursor: pointer;
+  user-select: none;
+}
+.sds-table__row--header .sds-table__col--sortable.sds-table__col--center {
+  justify-content: center;
+}
+.sds-table__row--header .sds-table__col--sortable.sds-table__col--end {
+  justify-content: flex-end;
+}
+.sds-table__col-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sds-table__sort {
+  display: inline-flex;
+  flex-direction: column;
+  margin: -3px 0;
+}
+/* ── Ellipsis (single-line truncation + Tooltip on hover) ── */
+.sds-table__col--ellipsis .sds-tooltip-wrapper {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+}
+.sds-table__ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
+}
+/* ── Cell text styles ── */
+.sds-table__cell-secondary.sds-table__cell-secondary--alert {
+  color: var(--color-error-50);
+}
+
+
+/* A sortable header is a <button>, not a div with a click handler — so the header can be
+   reached and pressed from the keyboard, which KDLS's cannot. These take the browser's own
+   control styling off and let it fill the cell it sits in. */
+.sds-table__sort-button {
+  appearance: none;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 0;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.sds-table__sort-button:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* A table with no rows. KDLS renders the header row and then nothing at all, which reads
+   as a table still loading rather than one with no results. */
+.sds-table__empty {
+  padding: var(--spacing-6);
+  text-align: center;
+  color: var(--color-neutral-60);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+}

package/components/Table/table-cell.marko

@@ -0,0 +1,28 @@
+<!-- sds-table-cell — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Table/Table.tsx (TableCell).
+
+     Two lines in one cell: the value, and a smaller line under it that can be marked as a
+     problem. Exported so a `render` function can build a cell without knowing the classes. -->
+
+$ {
+  const { primary, secondary, alert = false } = input;
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const secondaryClass = [
+    "sds-table__cell-secondary",
+    alert ? "sds-table__cell-secondary--alert" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<if(primary)>
+  <sds-text as="span" variant="bodyMd">
+    <if(typeof primary === "string")>${primary}</if>
+    <else><${renderable(primary)}/></else>
+  </sds-text>
+</if>
+<if(secondary)>
+  <sds-text as="span" variant="labelRegular" class=secondaryClass>
+    <if(typeof secondary === "string")>${secondary}</if>
+    <else><${renderable(secondary)}/></else>
+  </sds-text>
+</if>

package/components/Table/table-header.marko

@@ -0,0 +1,27 @@
+<!-- sds-table-header — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Table/Table.tsx (TableHeader).
+
+     The bar above a table: a title on the left, filters on the right, and anything else
+     after them. Passed to sds-table as its `header` slot. -->
+
+$ {
+  const { title, filters, class: extraClass = "" } = input;
+  const renderable = (value) => (value && value.renderBody) || value;
+}
+
+<div class=`sds-table__header ${extraClass}`.trim()>
+  <if(title)>
+    <sds-text as="span" variant="titleMd" class="sds-table__header-title">
+      <if(typeof title === "string")>${title}</if>
+      <else><${renderable(title)}/></else>
+    </sds-text>
+  </if>
+  <if(filters)>
+    <div class="sds-table__header-filters">
+      <${renderable(filters)}/>
+    </div>
+  </if>
+  <if(input.renderBody)>
+    <${input.renderBody}/>
+  </if>
+</div>