@kenlo/sds-design-system 0.9.9

package/components/Table/table-logic.js

@@ -0,0 +1,129 @@
+/**
+ * What the Table knows that has nothing to do with the DOM.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Table/Table.tsx. The grid
+ * template, the sort cycle, the selection toggles and the local sort are all pure, and all
+ * of them have an edge that is easy to get wrong and hard to see: a column with both a
+ * width and a minWidth, a sort that should clear rather than reverse, a "select all" on an
+ * empty table.
+ */
+
+/** The checkbox column, when there is one. */
+export const CHECK_TRACK = '16px';
+
+/**
+ * The names the selection checkboxes carry.
+ *
+ * sds-checkbox does not hydrate, so the table listens for the native change event once and
+ * reads which box fired out of the input's own name and value. They double as the field
+ * names a form would submit.
+ */
+export const SELECT_ALL_NAME = 'sds-table-select-all';
+export const SELECT_ROW_NAME = 'sds-table-select-row';
+
+/** The value the mobile sort picker uses for "no sorting". */
+export const NONE_SORT = '__none__';
+
+export const SORT_DIRECTIONS = [
+  { label: 'Crescente', value: 'asc' },
+  { label: 'Decrescente', value: 'desc' },
+];
+
+/**
+ * The mobile layout triggers off the table's own width, not the viewport's.
+ *
+ * A table in a narrow column is a narrow table even on a wide screen, and that is the case
+ * the stacked layout exists for. The number lives in foundations/breakpoints.js, because
+ * the Header asks the same question and was importing it from here.
+ */
+export { OWN_WIDTH_MOBILE as MOBILE_BREAKPOINT } from '../../foundations/breakpoints.js';
+
+/** One grid track for one column. */
+export function trackFor(column) {
+  if (column.width != null) {
+    return typeof column.width === 'number' ? `${column.width}px` : column.width;
+  }
+  if (column.minWidth != null || column.maxWidth != null) {
+    const min = column.minWidth != null ? `${column.minWidth}px` : '0px';
+    const max = column.maxWidth != null ? `${column.maxWidth}px` : '1fr';
+    return `minmax(${min}, ${max})`;
+  }
+  return '1fr';
+}
+
+export function gridTemplate(columns, hasCheckbox) {
+  const tracks = hasCheckbox ? [CHECK_TRACK] : [];
+  for (const column of columns) tracks.push(trackFor(column));
+  return tracks.join(' ');
+}
+
+/**
+ * The next sort state for a header that was clicked.
+ *
+ * Three steps, not two: ascending, descending, then none. A sort that can only be reversed
+ * is a sort a visitor cannot undo.
+ */
+export function nextSort(current, key) {
+  if (current?.key !== key) return { key, direction: 'asc' };
+  if (current.direction === 'asc') return { key, direction: 'desc' };
+  return null;
+}
+
+/**
+ * The rows in order.
+ *
+ * `sortable: true` means the server sorts and the rows arrive sorted — the component only
+ * reports the state. Only a comparator function makes it sort here, which is KDLS's rule
+ * and the right one: a component that guesses how to compare a column gets dates wrong.
+ */
+export function sortRows(rows, columns, sort) {
+  if (!sort) return rows;
+  const column = columns.find((c) => c.key === sort.key);
+  if (!column || typeof column.sortable !== 'function') return rows;
+  const result = [...rows].sort(column.sortable);
+  if (sort.direction === 'desc') result.reverse();
+  return result;
+}
+
+export const rowId = (row, keyField = 'id') => String(row?.[keyField]);
+
+/** Selection after one row was toggled. */
+export function toggleId(selected, id) {
+  return selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id];
+}
+
+/** Selection after the header checkbox was toggled. */
+export function toggleAll(rows, selected, keyField = 'id') {
+  const all = rows.map((row) => rowId(row, keyField));
+  const everySelected = all.length > 0 && all.every((id) => selected.includes(id));
+  return everySelected ? [] : all;
+}
+
+/** The header checkbox's state: checked, indeterminate, or neither. */
+export function headerCheckState(rows, selected, keyField = 'id') {
+  const all = rows.map((row) => rowId(row, keyField));
+  // An empty table has nothing selected, not everything: `every` on an empty array is true,
+  // which would draw a ticked "select all" over no rows at all.
+  if (!all.length) return { checked: false, indeterminate: false };
+  const chosen = all.filter((id) => selected.includes(id));
+  if (chosen.length === all.length) return { checked: true, indeterminate: false };
+  return { checked: false, indeterminate: chosen.length > 0 };
+}
+
+/** The options the mobile sort picker offers. */
+export function sortFieldOptions(columns) {
+  return [
+    { label: 'Nenhuma', value: NONE_SORT },
+    ...columns.filter((c) => Boolean(c.sortable)).map((c) => ({
+      label: c.title || c.key,
+      value: c.key,
+    })),
+  ];
+}
+
+/** What a column header should tell a screen reader about its own sorting. */
+export function ariaSortFor(column, sort) {
+  if (!column.sortable) return null;
+  if (sort?.key !== column.key) return 'none';
+  return sort.direction === 'asc' ? 'ascending' : 'descending';
+}

package/components/Table/table.marko

@@ -0,0 +1,372 @@
+<!-- sds-table — ported from kdls-design-system v2.5.1 (0f3edf8) components/Table/Table.tsx.
+
+     A CSS-grid table: sortable headers, row selection, a stacked layout when the table
+     itself is narrow, and pagination. The arithmetic — the grid template, the sort cycle,
+     the selection toggles — is in table-logic.js and tested there.
+
+     The stacked layout triggers off the table's own width, not the viewport's, which is
+     KDLS's decision and the right one: a table inside a narrow column is a narrow table on
+     any screen.
+
+     Divergences:
+
+     Rows are <div>s here as in KDLS, because the layout is a CSS grid and a real <table>
+     cannot be one without losing the column alignment the design depends on. What is added
+     is the semantics the grid throws away: role="table", "row", "columnheader" and "cell",
+     so a screen reader is told how many columns there are and which is which. KDLS renders
+     bare divs, so a table of forty cells is forty unrelated pieces of text.
+
+     A sortable header says aria-sort, which is the only way a screen reader can tell
+     whether a column is sorted and which way. KDLS draws an arrow and says nothing.
+
+     The sort cycles ascending, descending, none — KDLS's behaviour, kept because a sort
+     that can only be reversed is one a visitor cannot undo.
+
+     A clickable row stays a <div role="button">, not a <button>: a real button cannot
+     contain the checkboxes, links and menus that live in these cells. The keyboard handling
+     KDLS writes by hand is kept for the same reason — this is one of the few places where
+     the hand-written version is the only version available. -->
+
+import {
+  gridTemplate, nextSort, sortRows, rowId, toggleId, toggleAll, headerCheckState,
+  sortFieldOptions, ariaSortFor, SORT_DIRECTIONS, NONE_SORT, MOBILE_BREAKPOINT,
+  SELECT_ALL_NAME, SELECT_ROW_NAME,
+} from "./table-logic.js";
+import chevronUp from "../../icons/generated/fluent-chevron-up-regular.marko";
+import chevronDown from "../../icons/generated/fluent-chevron-down-regular.marko";
+
+class {
+  onCreate(input) {
+    this.state = { sort: input.defaultSort ?? null, narrow: false };
+  }
+
+  onMount() {
+    const root = this.getEl("root");
+    if (!root) return;
+    const measure = (width) => { this.state.narrow = width > 0 && width <= MOBILE_BREAKPOINT; };
+    measure(root.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    this.observer = new ResizeObserver(([entry]) => measure(entry.contentRect.width));
+    this.observer.observe(root);
+  }
+
+  onDestroy() {
+    this.observer?.disconnect();
+  }
+
+  get sort() {
+    return this.input.sort !== undefined ? this.input.sort : this.state.sort;
+  }
+
+  commitSort(next) {
+    if (this.input.sort === undefined) this.state.sort = next;
+    this.input.onSortChange?.(next);
+  }
+
+  sortBy(column) {
+    if (!column.sortable) return;
+    this.commitSort(nextSort(this.sort, column.key));
+  }
+
+  sortByKey(key) {
+    if (key === NONE_SORT) {
+      this.commitSort(null);
+      return;
+    }
+    this.commitSort({ key, direction: this.sort?.direction ?? "asc" });
+  }
+
+  sortDirection(direction) {
+    if (!this.sort) return;
+    this.commitSort({ key: this.sort.key, direction });
+  }
+
+  /**
+   * The checkboxes report here, not one by one.
+   *
+   * sds-checkbox does not hydrate on purpose — it takes no onChange and lets the native
+   * change event bubble, which is what keeps a table of forty rows from serialising forty
+   * components. So the table listens once and reads which box fired out of the input's own
+   * name and value, which it needs for form submission anyway.
+   */
+  handleChange(event) {
+    const target = event.target;
+    if (target.type !== "checkbox") return;
+    const { rows = [], selectedIds = [], keyField = "id", onSelectionChange } = this.input;
+    if (target.name === SELECT_ALL_NAME) {
+      onSelectionChange?.(toggleAll(rows, selectedIds, keyField));
+      return;
+    }
+    if (target.name === SELECT_ROW_NAME) {
+      onSelectionChange?.(toggleId(selectedIds, target.value));
+    }
+  }
+
+  /**
+   * A click that landed on a control inside the cell belongs to that control.
+   *
+   * The element comes in as the second argument because Marko delegates events:
+   * `event.currentTarget` is not the element the handler was written on.
+   */
+  clickRow(event, element, row) {
+    if (event.target !== element
+      && event.target.closest("button, a, input, select, textarea, label")) return;
+    this.input.onRowClick?.(row);
+  }
+
+  rowKey(event, element, row) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    if (event.target !== element) return;
+    event.preventDefault();
+    this.input.onRowClick?.(row);
+  }
+}
+
+$ {
+  const {
+    columns = [],
+    rows = [],
+    variant = "default",
+    bordered = false,
+    keyField = "id",
+    rowSelection = false,
+    selectedIds = [],
+    onRowClick,
+    pagination,
+    emptyMessage = "Nenhum resultado",
+    label = "Tabela",
+    class: extraClass = "",
+  } = input;
+
+  if (!columns.length) throw new Error("sds-table needs `columns`.");
+  if (variant !== "default" && variant !== "cardLines") {
+    throw new Error(`Unknown table variant: "${variant}". Allowed: default, cardLines`);
+  }
+
+  const sort = component.sort;
+  const ordered = sortRows(rows, columns, sort);
+  const narrow = state.narrow;
+  const check = headerCheckState(rows, selectedIds, keyField);
+  const template = gridTemplate(columns, rowSelection);
+  const rowStyle = narrow ? "grid-template-columns:1fr" : `grid-template-columns:${template}`;
+  const clickable = Boolean(onRowClick);
+  const sortable = columns.filter((c) => Boolean(c.sortable));
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const cellContent = (column, row, index) => (
+    column.render ? column.render(row[column.key], row, index) : row[column.key]
+  );
+  // A cell is usually text. `<${"Casa"}/>` renders an *element named Casa*, so the two
+  // cases cannot share a branch — the same trap the Popover's title hit.
+  const isMarkup = (value) => value !== null && typeof value === "object";
+
+  const rootClass = [
+    "sds-table",
+    variant !== "default" ? `sds-table--${variant}` : "",
+    bordered ? "sds-table--bordered" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div key="root" class=rootClass role="table" aria-label=label aria-rowcount=String(ordered.length) on-change("handleChange")>
+  <if(input.header)>
+    <${input.header}/>
+  </if>
+
+  <div class="sds-table__list sds-scroll sds-scroll--thin">
+    <if(narrow)>
+      <!-- The label row is gone with the columns, so sorting moves into two pickers driven
+           by the same state. -->
+      <if(sortable.length)>
+        <div class="sds-table__sort-picker">
+          <!-- "Filtro" and not "Ordenar por", and no value while nothing is sorted.
+
+               This chip only exists on a narrow screen, where it stands in for the column
+               headers that have gone: to the reader it is the filter row of the listing,
+               which is what Rafael named it. And a pill with no value shows its own label,
+               so an unsorted table reads "Filtro" rather than "Nenhuma" — which was the
+               NONE row showing as the current choice, complete with a clear button for a
+               choice nobody had made. "Nenhuma" stays in the list, as the way back out.
+
+               Empty string and not `undefined` for the unsorted case: `undefined` is how
+               a Select is told it is uncontrolled, so it kept the last choice in its own
+               state and the chip went on saying "Cidade" after the sort was cleared. The
+               empty string is a value, and it is the one that means nothing is chosen. -->
+          <sds-select
+            trigger="pill"
+            label="Filtro"
+            width="hug"
+            options=sortFieldOptions(columns)
+            value=(sort ? sort.key : "")
+            onChange=(value) => component.sortByKey(value)
+          />
+          <if(sort)>
+            <sds-select
+              trigger="pill"
+              label="Direção"
+              width="hug"
+              options=SORT_DIRECTIONS
+              value=sort.direction
+              onChange=(value) => component.sortDirection(value)
+            />
+          </if>
+        </div>
+      </if>
+    </if>
+    <else>
+      <div class="sds-table__row sds-table__row--header" role="row" style=rowStyle>
+        <if(rowSelection)>
+          <div class="sds-table__col sds-table__col--check" role="columnheader">
+            <sds-checkbox
+              label="Selecionar todas as linhas"
+              hideLabel
+              name=SELECT_ALL_NAME
+              checked=check.checked
+              indeterminate=check.indeterminate
+            />
+          </div>
+        </if>
+
+        <for|column| of=columns>
+          <div
+            class=[
+              "sds-table__col",
+              column.sortable ? "sds-table__col--sortable" : "",
+              column.align === "center" ? "sds-table__col--center" : "",
+              column.align === "end" ? "sds-table__col--end" : "",
+            ].filter(Boolean).join(" ")
+            role="columnheader"
+            aria-sort=ariaSortFor(column, sort)
+          >
+            <if(column.sortable)>
+              <!-- A button, so the header can be reached and pressed from the keyboard.
+                   aria-sort goes on the cell above it, which is where a reader looks. -->
+              <button type="button" class="sds-table__sort-button" on-click("sortBy", column)>
+                <span class="sds-table__col-title">${column.title ?? ""}</span>
+                <!-- Both arrows, with the live one coloured — KDLS's shape, and the
+                     right one: a single arrow leaves a visitor guessing whether the
+                     column is sorted at all or just sortable. -->
+                <span class="sds-table__sort" aria-hidden="true">
+                  <sds-icon size="sm" color=(sort?.key === column.key && sort.direction === "asc" ? "primary" : undefined)>
+                    <${chevronUp}/>
+                  </sds-icon>
+                  <sds-icon size="sm" color=(sort?.key === column.key && sort.direction === "desc" ? "primary" : undefined)>
+                    <${chevronDown}/>
+                  </sds-icon>
+                </span>
+              </button>
+            </if>
+            <else>
+              <span class="sds-table__col-title">${column.title ?? ""}</span>
+            </else>
+          </div>
+        </for>
+      </div>
+    </else>
+
+    <if(!ordered.length)>
+      <div class="sds-table__empty" role="row">
+        <div role="cell">${emptyMessage}</div>
+      </div>
+    </if>
+
+    <for|row, index| of=ordered>
+      <div
+        key=rowId(row, keyField)
+        class=[
+          "sds-table__row",
+          selectedIds.includes(rowId(row, keyField)) ? "sds-table__row--selected" : "",
+          clickable ? "sds-table__row--clickable" : "",
+        ].filter(Boolean).join(" ")
+        role="row"
+        style=rowStyle
+        aria-selected=(rowSelection ? (selectedIds.includes(rowId(row, keyField)) ? "true" : "false") : null)
+        tabindex=(clickable ? 0 : null)
+        on-click(clickable ? (event, element) => component.clickRow(event, element, row) : null)
+        on-keydown(clickable ? (event, element) => component.rowKey(event, element, row) : null)
+      >
+        <if(rowSelection)>
+          <div class="sds-table__col sds-table__col--check" role="cell">
+            <sds-checkbox
+              label=`Selecionar linha ${index + 1}`
+              hideLabel
+              name=SELECT_ROW_NAME
+              value=rowId(row, keyField)
+              checked=selectedIds.includes(rowId(row, keyField))
+            />
+          </div>
+        </if>
+
+        <if(narrow)>
+          <for|column| of=columns.filter((c) => c.mobileAction === "icon")>
+            <div class="sds-table__mobile-icon-actions" role="cell">
+              <if(isMarkup(cellContent(column, row, index)))>
+                <${renderable(cellContent(column, row, index))}/>
+              </if>
+              <else>${cellContent(column, row, index)}</else>
+            </div>
+          </for>
+        </if>
+
+        <for|column| of=(narrow ? columns.filter((c) => !c.mobileAction) : columns)>
+          <div
+            class=[
+              "sds-table__col",
+              !narrow && column.align === "center" ? "sds-table__col--center" : "",
+              !narrow && column.align === "end" ? "sds-table__col--end" : "",
+              column.ellipsis ? "sds-table__col--ellipsis" : "",
+            ].filter(Boolean).join(" ")
+            role="cell"
+          >
+            <if(column.ellipsis)>
+              <sds-tooltip content=String(row[column.key] ?? "")>
+                <span class="sds-table__ellipsis">
+                  <if(isMarkup(cellContent(column, row, index)))>
+                    <${renderable(cellContent(column, row, index))}/>
+                  </if>
+                  <else>${cellContent(column, row, index)}</else>
+                </span>
+              </sds-tooltip>
+            </if>
+            <else>
+              <if(isMarkup(cellContent(column, row, index)))>
+                <${renderable(cellContent(column, row, index))}/>
+              </if>
+              <else>${cellContent(column, row, index)}</else>
+            </else>
+          </div>
+        </for>
+
+        <if(narrow && columns.some((c) => c.mobileAction === "link"))>
+          <div class=[
+            "sds-table__mobile-link-actions",
+            columns.filter((c) => c.mobileAction === "link").length > 1
+              ? "sds-table__mobile-link-actions--split" : "",
+          ].filter(Boolean).join(" ")>
+            <for|column| of=columns.filter((c) => c.mobileAction === "link")>
+              <div class="sds-table__mobile-link-action" role="cell">
+                <if(isMarkup(cellContent(column, row, index)))>
+                  <${renderable(cellContent(column, row, index))}/>
+                </if>
+                <else>${cellContent(column, row, index)}</else>
+              </div>
+            </for>
+          </div>
+        </if>
+      </div>
+    </for>
+  </div>
+
+  <if(pagination)>
+    <sds-pagination
+      currentPage=pagination.currentPage
+      totalItems=pagination.totalItems
+      pageSize=pagination.pageSize
+      siblingCount=pagination.siblingCount
+      showSizeChanger=pagination.showSizeChanger
+      hideOnSinglePage=pagination.hideOnSinglePage
+      disabled=pagination.disabled
+      onChange=pagination.onChange
+    />
+  </if>
+</div>

package/components/Text/Text.css

@@ -0,0 +1,79 @@
+/* SDS Text.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Text/Text.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-text--primary
+ *//* ============================================================
+   SDS Text
+   Semantic typography: `variant` brings font-size + line-height +
+   weight + color (tokens); the tag (`as`) is the dev's choice, it doesn't change the style.
+   ============================================================ */
+
+.sds-text {
+  margin: 0;
+  font-family: var(--font-family-base);
+}
+/* ── Variants: font-size + line-height + weight (tokens) ── */
+.sds-text--displayLg { font-size: var(--font-size-display-lg); line-height: var(--lh-display-lg); font-weight: var(--font-weight-bold); }
+.sds-text--displayMd { font-size: var(--font-size-display-md); line-height: var(--lh-display-md); font-weight: var(--font-weight-bold); }
+.sds-text--displaySm { font-size: var(--font-size-display-sm); line-height: var(--lh-display-sm); font-weight: var(--font-weight-bold); }
+.sds-text--titleLg   { font-size: var(--font-size-title-lg);   line-height: var(--lh-title-lg);   font-weight: var(--font-weight-bold); }
+.sds-text--titleMd   { font-size: var(--font-size-title-md);   line-height: var(--lh-title-md);   font-weight: var(--font-weight-semibold); }
+.sds-text--titleSm   { font-size: var(--font-size-title-sm);   line-height: var(--lh-title-sm);   font-weight: var(--font-weight-semibold); }
+.sds-text--bodyMd    { font-size: var(--font-size-body-md);    line-height: var(--lh-body-md);    font-weight: var(--font-weight-regular); }
+.sds-text--bodySm    { font-size: var(--font-size-body-sm);    line-height: var(--lh-body-sm);    font-weight: var(--font-weight-regular); }
+.sds-text--labelSemiBold { font-size: var(--font-size-label-sm);   line-height: var(--lh-label-sm);   font-weight: var(--font-weight-semibold); }
+.sds-text--labelRegular  { font-size: var(--font-size-label-sm);   line-height: var(--lh-label-sm);   font-weight: var(--font-weight-regular); }
+/* ── Default color per category — each variant group has its own token,
+   even where the value matches another group's today, so they can diverge later ── */
+.sds-text--displayLg,
+.sds-text--displayMd,
+.sds-text--displaySm    { color: var(--display-color); }
+.sds-text--titleLg,
+.sds-text--titleMd,
+.sds-text--titleSm      { color: var(--title-color); }
+.sds-text--bodyMd,
+.sds-text--bodySm       { color: var(--body-color); }
+.sds-text--labelSemiBold,
+.sds-text--labelRegular { color: var(--label-color); }
+/* ── Colors (overrides the default color via the color prop) ── */
+.sds-text--inherit     { color: inherit; }
+.sds-text--primary     { color: var(--color-primary-50-solid); }
+.sds-text--error       { color: var(--color-error-50); }
+.sds-text--success     { color: var(--color-success-50); }
+.sds-text--alert       { color: var(--color-alert-50); }
+
+/* ── color="primary" under a gradient ──────────────────────────────────────────
+   KDLS had a rule making color="primary" paint as a gradient when the active scheme was
+   lya, because lya's primary WAS a gradient. That scheme is gone, but the capability is
+   not: applyCustomGradient can put a gradient in the same slot.
+
+   The clip is layered on top of a solid colour rather than replacing it, so a browser
+   without background-clip:text still renders visible text instead of a transparent hole.
+   In solid mode the clip paints the same colour the fallback already set. */
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .sds-text--primary {
+    background: var(--color-primary-50);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+
+/* ── Forced colours ────────────────────────────────────────────────────────────
+   Windows High Contrast, and any other forced-colours mode, throws the page's colours
+   away and paints its own — including dropping backgrounds. `color: transparent` with
+   `background-clip: text` then has nothing left to show through it, and the text becomes
+   INVISIBLE rather than merely differently coloured.
+
+   The clip is how `color="primary"` paints a gradient when the slot holds one. It stops
+   being worth anything in a mode that has already discarded the gradient, so it is undone
+   here and the text goes back to being text. */
+@media (forced-colors: active) {
+  .sds-text--primary {
+    background: none;
+    color: CanvasText;
+    forced-color-adjust: auto;
+  }
+}

package/components/Text/text-variants.js

@@ -0,0 +1,25 @@
+/**
+ * The Text vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Text/Text.tsx.
+ * Divergence: none. Text carries no brand-specific value — `primary` is the slot, which
+ * is exactly what it was in KDLS.
+ */
+export const TEXT_VARIANTS = [
+  'displayLg', 'displayMd', 'displaySm',
+  'titleLg', 'titleMd', 'titleSm',
+  'bodyMd', 'bodySm',
+  'labelSemiBold', 'labelRegular',
+];
+
+export const TEXT_COLORS = ['default', 'inherit', 'primary', 'error', 'success', 'alert'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown text ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertTextVariant = (v) => assertOneOf('variant', v, TEXT_VARIANTS);
+export const assertTextColor = (v) => assertOneOf('color', v, TEXT_COLORS);

package/components/Text/text.marko

@@ -0,0 +1,48 @@
+<!-- sds-text — ported from kdls-design-system v2.5.1 (0f3edf8) components/Text/Text.tsx.
+
+     Semantic typography: `variant` brings the size, line height and weight; `as` is the
+     element the developer chooses and changes nothing visual.
+
+     Divergences:
+       - `as` is required, as in KDLS, and is validated: rendering a fallback element
+         silently would put the wrong tag in the document outline, which is the one thing
+         this component exists to get right.
+       - no state, no forwardRef. Marko passes the element through directly.
+       - `htmlFor` does not exist here, and should not: it is React's name for the HTML
+         `for` attribute, invented because `for` is a reserved word in JSX. Marko has no
+         such problem, so a label writes `for` and it reaches the element through the
+         attribute spread like any other.
+       - color="primary" reaches a gradient through applyCustomGradient rather than
+         through a lya scheme — see Text.css. -->
+
+import { assertTextVariant, assertTextColor } from "./text-variants.js";
+import { rehyphenate } from "../../foundations/attrs.js";
+
+$ {
+  const {
+    as: tag,
+    variant = "bodyMd",
+    color = "default",
+    class: extraClass = "",
+    ...rest
+  } = input;
+
+  // Marko camelCases a hyphenated attribute written on a component tag, and spreading that
+  // straight onto an element writes `arialive` instead of `aria-live`. See foundations/attrs.js.
+  const attributes = rehyphenate(rest);
+
+  if (!tag) throw new Error('sds-text needs an `as` attribute — the element to render.');
+  assertTextVariant(variant);
+  assertTextColor(color);
+
+  const classes = [
+    "sds-text",
+    `sds-text--${variant}`,
+    color !== "default" ? `sds-text--${color}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<${tag} class=classes ...attributes>
+  <${input.renderBody}/>
+</>