@kenlo/sds-design-system 0.9.9 → 1.0.2

package/components/Table/Table.css

@@ -215,6 +215,36 @@
   flex-direction: column;
   margin: -3px 0;
 }
+/* ── sortIndicator="hover" — the pair on an unsorted header is hidden rather than removed.
+
+   Removed, the header would be narrower until the pointer arrived and then push the header
+   beside it sideways; hidden, it keeps its room and nothing moves. The two chevrons also
+   overlap into roughly one glyph's height here, so the clean header does not carry a
+   column-tall gap where a mark might appear.
+
+   The hover selector is on the cell and the focus one on the button, because in SDS the
+   header's control IS a button inside the cell — KDLS puts tabindex on the cell itself and
+   can write both on one selector. ── */
+.sds-table__sort--compact {
+  color: var(--color-neutral-40);
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+.sds-table__sort--compact .sds-icon + .sds-icon {
+  margin-top: calc(-1 * var(--spacing-2));
+}
+.sds-table__col--sortable:hover .sds-table__sort--compact,
+.sds-table__sort-button:focus-visible .sds-table__sort--compact {
+  opacity: 1;
+}
+/* ── loading — the rows that are on screen stay there, dimmed, while the next ones come.
+
+   Not a spinner in their place: a reader who asked for a different sort order would watch
+   the list vanish and come back, and lose where they were in it. The header keeps its full
+   colour, so the column titles stay readable while the body is provisional. ── */
+.sds-table--loading .sds-table__row:not(.sds-table__row--header) {
+  opacity: 0.5;
+}
 /* ── Ellipsis (single-line truncation + Tooltip on hover) ── */
 .sds-table__col--ellipsis .sds-tooltip-wrapper {
   display: flex;
@@ -254,8 +284,8 @@
 }
 
 .sds-table__sort-button:focus-visible {
-  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
-  outline-offset: 2px;
+  outline: var(--focus-ring-outline);
+  outline-offset: var(--focus-ring-outline-offset);
   border-radius: var(--radius-xs);
 }
 
@@ -268,3 +298,44 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-body-md);
 }
+
+/* ── Column picker ──────────────────────────────────────────────────────
+   sds-table-column-picker's panel. Ported from KDLS 2.9.0's Table.css.
+   BEM root: .sds-table__column-picker
+   ─────────────────────────────────────────────────────────────────── */
+.sds-table__column-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 240px;
+}
+/* The rows scroll and nothing else does: the reset link below stays put, and the cap is
+   the same seven and a half rows every other list in the system shows. The padding is
+   there so a focus ring on the first or last checkbox is not clipped by the scroller, and
+   the negative margin takes the space back so the rows still line up with the title. */
+.sds-table__column-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  max-height: var(--menu-max-height);
+  overflow-y: auto;
+  padding: var(--spacing-1);
+  margin: calc(-1 * var(--spacing-1));
+}
+/* A <fieldset>, for the grouping a screen reader needs — and a fieldset arrives with a
+   browser border, a browser margin and a browser padding that no design asked for. */
+.sds-table__column-picker-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+/* Same reason: a <legend> is laid out as part of the border it no longer has, so without
+   this the group title sits indented and cannot be reached by the flex gap above. */
+.sds-table__column-picker-group-title {
+  display: contents;
+  padding: 0;
+}

package/components/Table/table-column-picker.marko

@@ -0,0 +1,161 @@
+<!-- sds-table-column-picker — ported from kdls-design-system components/Table/TableColumnPicker.tsx
+     (added there in 2.9.0 by Valdir Primo; read at commit 245652b).
+
+     A pill that opens the table's columns, grouped, one per line, to show or hide. It
+     applies on the tick — there is no "Aplicar" button, because a reader who ticks a box
+     and watches nothing happen ticks it again.
+
+     Divergences from KDLS, all of them consequences of how SDS already works:
+
+     The checkboxes report to ONE listener here, not one handler each. sds-checkbox does not
+     hydrate on purpose — it takes no onChange and lets the native change event bubble — so
+     the picker listens once on the panel and reads which box fired out of the input's own
+     name and value. sds-table does exactly this, for the same reason: a component per
+     checkbox is a component serialised per checkbox.
+
+     The ordering rule lives in table-logic.js as `toggleColumn`, tested without a DOM.
+     KDLS writes it inline in the component, where the rule that the caller gets its keys
+     back in the groups' order can only be checked by rendering React.
+
+     KDLS watches the floating portal with a MutationObserver to know when the panel has
+     been placed, because a portalled panel is hidden until then and a hidden element drops
+     focus(). SDS has no portal — Marko 5 has none — but it has the same wait for a
+     different reason: sds-floating renders its panel `visibility: hidden` until it has
+     measured and placed it, and focus() on a hidden element does nothing and reports
+     nothing. Confirmed in Chromium on 2026-09-17, where opening this picker left the caret
+     on `<body>`. The rule and its measurement are in Floating/focus-when-ready.js, shared
+     with sds-select, which met it too.
+
+     Escape is handled twice on purpose: sds-floating already closes on it, and this adds
+     the half KDLS also adds — putting focus back on the trigger. Closing a panel while the
+     focus stays inside it leaves a keyboard reader standing on nothing. -->
+
+import { pickerKeys, toggleColumn } from "./table-logic.js";
+import { focusWhenReady } from "../Floating/focus-when-ready.js";
+import columnTriple from "../../icons/generated/fluent-column-triple-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { open: false };
+  }
+
+  setOpen(open) {
+    this.state.open = open;
+  }
+
+  /**
+   * Every box in the panel reports here.
+   *
+   * The name is the picker's own, so a checkbox belonging to something else that happens
+   * to sit inside the panel is not mistaken for a column.
+   */
+  handleChange(event) {
+    const target = event.target;
+    if (target.type !== "checkbox" || target.name !== this.checkboxName) return;
+    const { groups = [], value = [], onChange } = this.input;
+    onChange?.(toggleColumn(groups, value, target.value, target.checked));
+  }
+
+  get checkboxName() {
+    return `sds-table-column-picker-${this.id}`;
+  }
+
+  /**
+   * The first column the reader can actually change, so the keyboard lands on a control
+   * rather than on the panel — and it keeps asking until the panel can take the caret.
+   */
+  focusFirst() {
+    focusWhenReady(() => {
+      if (!this.state.open) return null;
+      const panel = this.getEl("panel");
+      return panel && panel.querySelector("input[type=checkbox]:not(:disabled)");
+    });
+  }
+
+  handleKey(event) {
+    if (event.key !== "Escape") return;
+    this.setOpen(false);
+    this.getEl("trigger")?.querySelector("button, [role=button]")?.focus();
+  }
+
+  onUpdate() {
+    if (this.state.open && !this.focused) {
+      this.focused = true;
+      this.focusFirst();
+    }
+    if (!this.state.open) this.focused = false;
+  }
+}
+
+$ {
+  const {
+    label = "Colunas",
+    groups,
+    value = [],
+    onReset,
+    class: extraClass = "",
+  } = input;
+
+  if (!Array.isArray(groups) || !groups.length) {
+    throw new Error("sds-table-column-picker needs `groups`.");
+  }
+
+  const open = state.open;
+  const offered = pickerKeys(groups);
+  const name = component.checkboxName;
+}
+
+<sds-popover
+  title=label
+  placement="bottomRight"
+  trigger="click"
+  arrow=false
+  open=open
+  onOpenChange=(next) => component.setOpen(next)
+  class=extraClass
+>
+  <@content>
+    <div key="panel" class="sds-table__column-picker" on-change("handleChange") on-keydown("handleKey")>
+      <!-- The list scrolls, the reset link does not: `--menu-max-height` caps the rows so
+           the same seven and a half of them show whether or not there is a link below. -->
+      <div class="sds-table__column-picker-list sds-scroll sds-scroll--thin">
+        <for|group, index| of=groups>
+          <!-- A fieldset, so a screen reader announces the group a box belongs to instead
+               of reading fourteen unrelated checkboxes. -->
+          <fieldset class="sds-table__column-picker-group">
+            <if(group.title)>
+              <legend class="sds-table__column-picker-group-title">
+                <sds-text as="span" variant="labelSemiBold">${group.title}</sds-text>
+              </legend>
+            </if>
+            <for|column| of=group.columns>
+              <sds-checkbox
+                label=column.label
+                width="fill"
+                name=name
+                value=column.key
+                checked=value.includes(column.key)
+                disabled=column.disabled
+                hint=column.hint
+              />
+            </for>
+          </fieldset>
+        </for>
+      </div>
+      <if(onReset)>
+        <sds-button variant="link" size="md" label="Restaurar padrão" onClick=() => onReset()/>
+      </if>
+    </div>
+  </@content>
+
+  <span key="trigger">
+    <sds-pill
+      label=label
+      active=open
+      aria-haspopup="dialog"
+      aria-expanded=(open ? "true" : "false")
+    >
+      <@icon-left><${columnTriple}/></@icon-left>
+    </sds-pill>
+  </span>
+</sds-popover>

package/components/Table/table-logic.js

@@ -29,6 +29,28 @@ export const SORT_DIRECTIONS = [
   { label: 'Decrescente', value: 'desc' },
 ];
 
+/**
+ * How a sortable header wears its sort mark. From KDLS 2.8.0.
+ *
+ * `always` draws the up/down pair on every sortable header — the reader can see which
+ * columns sort before touching any of them, at the cost of a row of chevrons.
+ * `hover` keeps the unsorted headers clean and shows the pair only while a header is
+ * pointed at or focused, in the room it already occupies so nothing moves; the sorted
+ * header gets a single filled chevron instead of a coloured half of a pair.
+ *
+ * `always` stays the default: it is what the table did before the choice existed, and a
+ * new option that changes an existing table's appearance is not an option, it is a change.
+ */
+export const SORT_INDICATORS = ['always', 'hover'];
+
+export function assertSortIndicator(value) {
+  if (!SORT_INDICATORS.includes(value)) {
+    throw new Error(
+      `Unknown table sortIndicator: "${value}". Allowed: ${SORT_INDICATORS.join(', ')}`,
+    );
+  }
+}
+
 /**
  * The mobile layout triggers off the table's own width, not the viewport's.
  *
@@ -127,3 +149,37 @@ export function ariaSortFor(column, sort) {
   if (sort?.key !== column.key) return 'none';
   return sort.direction === 'asc' ? 'ascending' : 'descending';
 }
+
+/* ── Column picker ──────────────────────────────────────────────────────────
+   The arithmetic behind sds-table-column-picker. From KDLS 2.9.0, where it lives inside
+   the component; here it is a pair of pure functions so the ordering rule can be tested
+   without a DOM, and so the component stays a template. ─────────────────────── */
+
+/** Every key the picker offers, in the order the groups list them. */
+export function pickerKeys(groups = []) {
+  return groups.flatMap((group) => group.columns.map((column) => column.key));
+}
+
+/**
+ * The visible columns after one box is ticked or unticked.
+ *
+ * Two rules, and both matter to what the reader sees:
+ *
+ * The result comes back in the GROUPS' order, never the order the boxes were clicked. The
+ * caller renders the columns in the order it is handed, so appending would let the table's
+ * column order depend on the sequence somebody happened to tick things in.
+ *
+ * A key the caller shows but no group offers is kept, at the end. That is the fixed first
+ * column, or an actions column — a column the picker deliberately does not let anyone turn
+ * off, and therefore one it must not turn off by omission either.
+ */
+export function toggleColumn(groups, value = [], key, checked) {
+  const offered = pickerKeys(groups);
+  const next = new Set(value);
+  if (checked) next.add(key);
+  else next.delete(key);
+  return [
+    ...offered.filter((k) => next.has(k)),
+    ...value.filter((k) => !offered.includes(k) && next.has(k)),
+  ];
+}

package/components/Table/table.marko

@@ -29,11 +29,13 @@
 
 import {
   gridTemplate, nextSort, sortRows, rowId, toggleId, toggleAll, headerCheckState,
-  sortFieldOptions, ariaSortFor, SORT_DIRECTIONS, NONE_SORT, MOBILE_BREAKPOINT,
-  SELECT_ALL_NAME, SELECT_ROW_NAME,
+  sortFieldOptions, ariaSortFor, assertSortIndicator, 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";
+import chevronUpFilled from "../../icons/generated/fluent-chevron-up-filled.marko";
+import chevronDownFilled from "../../icons/generated/fluent-chevron-down-filled.marko";
 
 class {
   onCreate(input) {
@@ -132,6 +134,8 @@ $ {
     rowSelection = false,
     selectedIds = [],
     onRowClick,
+    sortIndicator = "always",
+    loading = false,
     pagination,
     emptyMessage = "Nenhum resultado",
     label = "Tabela",
@@ -142,6 +146,7 @@ $ {
   if (variant !== "default" && variant !== "cardLines") {
     throw new Error(`Unknown table variant: "${variant}". Allowed: default, cardLines`);
   }
+  assertSortIndicator(sortIndicator);
 
   const sort = component.sort;
   const ordered = sortRows(rows, columns, sort);
@@ -164,11 +169,20 @@ $ {
     "sds-table",
     variant !== "default" ? `sds-table--${variant}` : "",
     bordered ? "sds-table--bordered" : "",
+    loading ? "sds-table--loading" : "",
     extraClass,
   ].filter(Boolean).join(" ");
 }
 
-<div key="root" class=rootClass role="table" aria-label=label aria-rowcount=String(ordered.length) on-change("handleChange")>
+<div
+  key="root"
+  class=rootClass
+  role="table"
+  aria-label=label
+  aria-rowcount=String(ordered.length)
+  aria-busy=(loading ? "true" : null)
+  on-change("handleChange")
+>
   <if(input.header)>
     <${input.header}/>
   </if>
@@ -245,15 +259,39 @@ $ {
                 <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>
+                     column is sorted at all or just sortable.
+
+                     Under sortIndicator="hover" the sorted column is the exception: it
+                     already answers "is it sorted" by being the only marked header, so it
+                     shows one filled arrow instead of a pair with one half greyed. Every
+                     other header keeps the pair, hidden by opacity rather than removed —
+                     taking it out of the DOM would let the header resize when the pointer
+                     arrives, and a header that grows on hover pushes the one beside it. -->
+                <if(sortIndicator === "hover" && sort?.key === column.key)>
+                  <span class="sds-table__sort" aria-hidden="true">
+                    <sds-icon size="sm" color="primary">
+                      <if(sort.direction === "asc")>
+                        <${chevronUpFilled}/>
+                      </if>
+                      <else>
+                        <${chevronDownFilled}/>
+                      </else>
+                    </sds-icon>
+                  </span>
+                </if>
+                <else>
+                  <span
+                    class=["sds-table__sort", sortIndicator === "hover" ? "sds-table__sort--compact" : ""].filter(Boolean).join(" ")
+                    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>
+                </else>
               </button>
             </if>
             <else>

package/components/TextEditor/TextEditor.css

@@ -71,8 +71,8 @@
    KDLS gives it no focus style: a contenteditable div with no ring is a control a keyboard
    user cannot tell they have reached. */
 .sds-text-editor__body:focus-visible {
-  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
-  outline-offset: -2px;
+  outline: var(--focus-ring-outline);
+  outline-offset: calc(var(--focus-ring-outline-offset) * -1);
 }
 
 /* The toolbar's own buttons are sds-icon-button and sds-menu, which carry their own. */

package/components/Toggle/Toggle.css

@@ -167,3 +167,43 @@
   box-shadow: var(--focus-ring);
 }
 
+/* ── The site's gradient, on the stroke ────────────────────────────────────────
+
+   `border-color` rejects a gradient, so a stroke normally reads the `-solid` companion —
+   the gradient's first stop, flat. These rules paint it properly instead: the gradient on
+   `border-box`, the surface colour on `padding-box`, over a transparent border. Only the
+   border's own 2px show the gradient, and `border-radius` still works, which is what
+   `border-image` would cost.
+
+   `[data-primary-gradient]` is written by `applyCustomGradient` and removed by
+   `applyCustomColor` — a stylesheet cannot ask what a custom property contains, so the
+   code that fills the slot says so. KDLS wrote the same rules under
+   `[data-color-scheme="lya"]`, its own brand gradient; SDS deleted every `lya` block with
+   the brand and these went with them. Keyed on the marker they serve any site's gradient.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+[data-primary-gradient] .sds-toggle:hover:not(.sds-toggle--disabled) {
+  background:
+    linear-gradient(var(--component-bg-color), var(--component-bg-color)) padding-box,
+    var(--color-primary-50) border-box;
+  border-color: transparent;
+}
+
+/* ── And when the gradient FILLS this, it has no border to fight ──────────────
+
+   Filled from the slot and ringed with the `-solid` companion: the same colour while the
+   slot is solid, and a flat hoop of the first stop once it is a gradient. `border: none`
+   because under a gradient the fill IS the whole control.
+
+   Touched states brighten or darken rather than stepping to tone 60 or 70 — stepping a
+   gradient's tone moves every stop at once and reads as a different colour, not as the
+   same control being pressed. Same answer as the checked checkbox. ─────────── */
+[data-primary-gradient] .sds-toggle__item--active {
+  background: var(--color-primary-50);
+  border: none;
+}
+[data-primary-gradient] .sds-toggle__item--active:hover:not(:disabled) {
+  background: var(--color-primary-50);
+  border: none;
+  filter: brightness(1.1);
+}

package/components/Tooltip/Tooltip.css

@@ -110,6 +110,6 @@
 }
 
 .sds-tooltip-wrapper__trigger:focus-visible {
-  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
-  outline-offset: 2px;
+  outline: var(--focus-ring-outline);
+  outline-offset: var(--focus-ring-outline-offset);
 }

package/components/Uploader/Uploader.css

@@ -178,3 +178,26 @@ button.sds-uploader {
 .sds-uploader__error {
   color: var(--color-error-50);
 }
+
+/* ── The site's gradient, on the stroke ────────────────────────────────────────
+
+   `border-color` rejects a gradient, so a stroke normally reads the `-solid` companion —
+   the gradient's first stop, flat. These rules paint it properly instead: the gradient on
+   `border-box`, the surface colour on `padding-box`, over a transparent border. Only the
+   border's own 2px show the gradient, and `border-radius` still works, which is what
+   `border-image` would cost.
+
+   `[data-primary-gradient]` is written by `applyCustomGradient` and removed by
+   `applyCustomColor` — a stylesheet cannot ask what a custom property contains, so the
+   code that fills the slot says so. KDLS wrote the same rules under
+   `[data-color-scheme="lya"]`, its own brand gradient; SDS deleted every `lya` block with
+   the brand and these went with them. Keyed on the marker they serve any site's gradient.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+[data-primary-gradient] .sds-uploader:hover,
+[data-primary-gradient] .sds-uploader--dragging {
+  background:
+    var(--color-primary-10) padding-box,
+    var(--color-primary-50) border-box;
+  border-color: transparent;
+}