@kenlo/sds-design-system 0.9.9

package/components/Select/Select.css

@@ -0,0 +1,427 @@
+/* SDS Select.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Select/Select.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-select__search-input
+ *//* ============================================================
+   SDS Dropdown
+   Same visual spec as Input — 56px height, floating label,
+   radius-md border, chevron-right icon
+   ============================================================ */
+
+.sds-select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  position: relative;
+}
+.sds-select-wrapper--hug   { width: fit-content; }
+.sds-select-wrapper--fill  { width: 100%; }
+.sds-select-wrapper--trigger-input.sds-select-wrapper--hug { min-width: 200px; }
+.sds-select-wrapper--fill .sds-floating { width: 100%; }
+/* ── Disabled wrapper — cursor on the wrapper; the trigger (Pill/Input) already blocks on its own ── */
+.sds-select-wrapper--disabled {
+  cursor: not-allowed;
+}
+/* ── Loading wrapper (pill trigger) ── */
+.sds-select-wrapper--loading,
+.sds-select-wrapper--loading .sds-pill {
+  cursor: wait;
+}
+/* ── Trigger input wrapper ── */
+.sds-select-input-wrap {
+  outline: none;
+  cursor: pointer;
+}
+.sds-select-input-wrap .sds-input,
+.sds-select-input-wrap .sds-input__native {
+  cursor: pointer;
+}
+.sds-select-input-wrap--loading,
+.sds-select-input-wrap--loading .sds-input,
+.sds-select-input-wrap--loading .sds-input__native {
+  cursor: wait;
+}
+/* disabled wins over the trigger input's cursor:pointer (higher specificity) */
+.sds-select-wrapper--disabled .sds-select-input-wrap,
+.sds-select-wrapper--disabled .sds-select-input-wrap .sds-input,
+.sds-select-wrapper--disabled .sds-select-input-wrap .sds-input__native {
+  cursor: not-allowed;
+}
+.sds-select-input-wrap--open .sds-input:not(.sds-input--disabled) {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+.sds-select-input-wrap:focus-visible .sds-input:not(.sds-input--disabled) {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* ── Chevron rotation when open ── */
+.sds-select-input-wrap .sds-input__icon--right:not(.sds-input__icon--right--clickable),
+.sds-select-wrapper .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transition: transform 200ms ease;
+}
+.sds-select-input-wrap--open .sds-input__icon--right:not(.sds-input__icon--right--clickable),
+.sds-select-wrapper--open .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transform: rotate(180deg);
+}
+/* ── Trigger nav — same visual recipe as .sds-menu__btn--navButton ── */
+.sds-select__trigger--nav {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: 40px;
+  padding: var(--spacing-2) var(--spacing-4);
+  border: none;
+  background: transparent;
+  border-radius: 11px;  /* soft, the install default */
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);
+  color: var(--color-neutral-80);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+  user-select: none;
+  box-sizing: border-box;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.sds-select__trigger-nav-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sds-select__trigger--nav:hover:not(:disabled) { background-color: var(--color-opacity-05); }
+.sds-select__trigger--nav:active:not(:disabled) { background-color: var(--color-opacity-10); }
+.sds-select__trigger--nav:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+/* Divergence: opening does not change the weight, only being the active item does — the
+   same split the Menu's nav trigger makes, for the same reason. Bold is wider, so bolding
+   on open widened the trigger while it was open and shifted everything after it on the
+   row. Which item is current does not change while you press it, so `--active` keeps its
+   weight; open is already said by the chevron and by the panel. */
+.sds-select__trigger--nav.sds-select__trigger--open {
+  color: var(--color-neutral-90);
+}
+.sds-select__trigger--nav.sds-select__trigger--active {
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+.sds-select__trigger--nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.sds-select__trigger-nav-chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: transform 120ms ease;
+}
+.sds-select__trigger--nav.sds-select__trigger--open .sds-select__trigger-nav-chevron {
+  transform: rotate(180deg);
+}
+/* ── Menu ──
+   Positioning (top/bottom/left, z-index, flip) is Floating's
+   responsibility. The menu only keeps the visual box and the widths:
+   min-width = max(200px, trigger width via Floating's matchTriggerWidth)
+   and it grows with the content (max-content). */
+.sds-select__menu {
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-drop-md);
+  /* Its own size, not the trigger's. `max(200px, 100%)` was carried from KDLS and is a
+     trap here: the panel is inside a position:fixed box, so a percentage resolves against
+     the viewport rather than the trigger. The input trigger gets its width matched by
+     sds-floating instead, in pixels it measured. */
+  min-width: 200px;
+  width: max-content;
+
+  display: flex;
+  flex-direction: column;
+}
+/* ── Header (search + select-all) ── */
+.sds-select__header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-5);
+  border-bottom: 1px solid var(--border-static-color);
+}
+/* ── Search ── */
+
+.sds-select__search-field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 40px;
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+.sds-select__search-field:hover {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-select__search-field:focus-within {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+.sds-select__search-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+  color: var(--color-neutral-90);
+}
+.sds-select__search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-90);
+  caret-color: var(--color-primary-50-solid);
+  min-width: 0;
+}
+.sds-select__search-input::placeholder { color: var(--placeholder-color); }
+/* ── List ── */
+/* The inset follows the radius scheme, or the corners clip.
+
+   A rounded rectangle of radius R has no material within about 0.29R of its corner along
+   the diagonal. A row inset by a flat 4px therefore has its top corners cut off by the
+   panel's own curve, and the more rounded the scheme the worse it gets: at `rounded` the
+   panel's radius is 32px and 4px of inset leaves the first and last rows visibly clipped.
+
+   0.3 of --radius-md is the smallest inset that clears it, and the max() keeps the flat and
+   soft schemes at the 4px they were designed with. */
+.sds-select__list {
+  margin: 0;
+  padding: max(var(--spacing-1), calc(var(--radius-md) * 0.3));
+  list-style: none;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+/* The list takes focus so the keyboard has somewhere to land, and shows nothing for it.
+   Said no other way, the browser draws its own ring — an orange box around the whole
+   panel, which says "these" where the reader needs "this one". The option the reader is
+   on wears the ring instead, below. Menu carries the same pair for the same reason. */
+.sds-select__list:focus,
+.sds-select__list:focus-visible {
+  outline: none;
+}
+/* ── Select all — fixed header above the scrollable list ── */
+
+/* ── Section header ── */
+.sds-select__section-header {
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-50);
+  list-style: none;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+/* ── Option ── */
+/* Native chrome reset for the option rows.
+   KDLS drew its options as <li> elements with click handlers; SDS renders a real <button>
+   inside each <li>, so keyboard activation, focus and the disabled state come from the
+   browser. Without this rule the browser's own styling shows through — measured in
+   Chromium: a 2px outset border, an #efefef background and centred text, which turns a
+   list of options into a column of OS push-buttons.
+
+   It sits *above* the rules that paint the option, not at the end of the file: `background:
+   none` has the same specificity as `.sds-select__option--selected`, so from below it would
+   erase the selected row's own background. */
+.sds-select__option {
+  appearance: none;
+  border: 0;
+  background: none;
+  text-align: left;
+  /* A <button> sizes to fit-content even at display:flex, so without this the row
+     highlights only under its text — 140px of a 202px panel, measured. */
+  width: 100%;
+}
+
+.sds-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  /* 40px, like every other row in a menu or a dropdown — the padding plus the line box
+     came to 38, so this row was two pixels shorter than the same row in an sds-menu and
+     than the navButton it sits under. Rafael, measuring the theme bar. */
+  min-height: var(--sds-menu-item-height, 40px);
+  border-radius: 11px;  /* soft, the install default — schemes at the end */
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-80);
+  cursor: pointer;
+  transition: background 120ms ease;
+  list-style: none;
+  box-sizing: border-box;
+}
+.sds-select__option:hover {
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-10-on);
+}
+/* The design system's ring, never the browser's. Inset rather than around: the row lives
+   in a scroll container, and a ring drawn outside its box is clipped at the panel edge. */
+.sds-select__option:focus {
+  outline: none;
+}
+.sds-select__option:focus-visible {
+  outline: none;
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-10-on);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-select__option--selected {
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-10-on);
+  font-weight: var(--font-weight-bold);
+}
+.sds-select__option-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+/* ── Empty state ── */
+.sds-select__empty {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-50);
+  list-style: none;
+  box-sizing: border-box;
+}
+/* ── Loading state ── */
+.sds-select__loading {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-50);
+  list-style: none;
+  box-sizing: border-box;
+}
+/* ── Footer ── */
+.sds-select__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-5);
+  border-top: 1px solid var(--border-static-color);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-select__menu {
+  background: var(--color-neutral-10);
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-select__header {
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-select__search-field {
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-select__footer {
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-select__option:hover,
+[data-theme="dark"] .sds-select__option--selected {
+  background: var(--color-neutral-20);
+}
+
+/* The clear control.
+   KDLS reaches clearing through the Input's own right icon. This Select puts the chevron
+   there, so the clear affordance is its own button — a divergence, and this is the rule
+   behind it rather than a class with nothing under it. */
+.sds-select__clear {
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-10, 40px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: var(--spacing-1);
+  border-radius: var(--radius-xs);
+  color: var(--color-neutral-60);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.sds-select__clear:hover { background-color: var(--color-opacity-05); }
+.sds-select__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+/* The trigger keeps one width.
+   Its visible text is the current choice, so without this it grows and shrinks as the
+   visitor uses it and everything beside it in the toolbar moves. The invisible spacer
+   reserves the widest option the trigger could ever show — the same technique the field
+   shell uses for its label, pointed at a different string.
+
+   Zero height and overflow hidden, so it takes part in the width calculation and in
+   nothing else. */
+.sds-select__trigger-nav-label[data-widest]::before {
+  content: attr(data-widest);
+  display: block;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+  font-weight: var(--font-weight-bold);
+}
+
+/* The hint under a pill or nav trigger. The input trigger gets its own from sds-input;
+   these two had an aria-describedby pointing at a hint that was never rendered. */
+.sds-select__hint {
+  display: block;
+  margin-top: var(--spacing-1);
+  color: var(--color-neutral-60);
+}
+
+/* 40px tall, so the Pill's ladder: 0 / 11 / 15 / capsule. See Pill.css for the arithmetic
+   — the numbers are a fraction of the control's own height, which is what keeps every
+   40px control in the system reading as one family. `--radius-sm` stopped at 16px here,
+   so `rounded` was a rounded rectangle instead of a capsule. The bare value is `soft`'s,
+   because an install that never picks a scheme has no attribute to match on. */
+[data-radius="flat"] .sds-select__trigger--nav { border-radius: 0; }
+[data-radius="soft"] .sds-select__trigger--nav { border-radius: 11px; }
+[data-radius="medium"] .sds-select__trigger--nav { border-radius: 15px; }
+[data-radius="rounded"] .sds-select__trigger--nav { border-radius: var(--radius-full); }
+
+/* ── Corner radius: the 40px family ───────────────────────────────────────────
+   A row in a menu, a select or a dropdown is 40px tall, which makes it the same control
+   as the Pill and the navButton — so it takes the same four values. Rafael, pointing at
+   the theme bar's own menu: these are reactive, but not in the right way; they should be
+   40px like the navButton and have the radius resolved here.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   `--radius-sm` was what they had, and it tops out at 16px — so `rounded` drew a rounded
+   rectangle where every other 40px control in the system drew a capsule. See Pill.css for
+   the arithmetic; the numbers are a fraction of the control's own height, which is what
+   keeps the family reading as one thing.
+
+   The bare value is `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to it. */
+[data-radius="flat"] .sds-select__option { border-radius: 0; }
+[data-radius="soft"] .sds-select__option { border-radius: 11px; }
+[data-radius="medium"] .sds-select__option { border-radius: 15px; }
+[data-radius="rounded"] .sds-select__option { border-radius: var(--radius-full); }

package/components/Select/select-options.js

@@ -0,0 +1,163 @@
+/**
+ * Option handling for the Select — normalising, searching and toggling.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Select/Select.tsx, where it
+ * lived inside the component. Pulled out for the same reason as the Input's masks: it is
+ * pure, it is where a subtle mistake hides, and it can be tested on its own.
+ */
+
+import { fold } from '../../foundations/text.js';
+
+export const SELECT_TRIGGERS = ['pill', 'input', 'navButton'];
+export const SELECT_WIDTHS = ['hug', 'fill'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown select ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertTrigger = (v) => assertOneOf('trigger', v, SELECT_TRIGGERS);
+export const assertWidth = (v) => assertOneOf('width', v, SELECT_WIDTHS);
+
+/**
+ * Options arrive three ways and leave as one shape.
+ *
+ * KDLS took a plain array of strings, an array of { label, value } objects, or the same
+ * under caller-chosen key names via `fieldNames`. All three survive, plus attribute tags,
+ * because a select built from an API response and one written out by hand are both real.
+ */
+export function normaliseOptions({ options = [], option, fieldNames = {} } = {}) {
+  const labelKey = fieldNames.label ?? 'label';
+  const valueKey = fieldNames.value ?? 'value';
+  const iconKey = fieldNames.icon ?? 'icon';
+
+  const fromArray = options.map((entry) => {
+    if (entry === null || typeof entry !== 'object') {
+      const text = String(entry);
+      return { label: text, value: text };
+    }
+    return {
+      label: String(entry[labelKey] ?? entry[valueKey] ?? ''),
+      value: entry[valueKey] ?? entry[labelKey],
+      // `iconLeft` as a fallback: that is the key KDLS's options carry, and an options
+      // array copied over from there rendered with no icons at all and no error. `icon` is
+      // still the name this system uses; the other is accepted, not documented.
+      icon: entry[iconKey] ?? entry.iconLeft,
+      // The trailing icon KDLS allows per row — carried, so a row can end in a glyph.
+      iconRight: entry.iconRight,
+      // Carried through because Marko has no pre-instantiated element: KDLS passes
+      // `icon={<RadiusCornerIcon r={r} />}`, props and all, and the nearest thing here is
+      // the template plus the props to render it with. Dropping these silently rendered
+      // the icon with no input at all.
+      iconProps: entry.iconProps,
+      disabled: Boolean(entry.disabled),
+      section: entry.section,
+    };
+  });
+
+  const tags = option === undefined ? [] : [].concat(option);
+  const fromTags = tags.map((tag) => ({
+    label: tag.label ?? String(tag.value ?? ''),
+    value: tag.value ?? tag.label,
+    icon: tag.icon,
+    disabled: Boolean(tag.disabled),
+    section: tag.section,
+    renderBody: tag.renderBody,
+  }));
+
+  return [...fromArray, ...fromTags];
+}
+
+/** Case- and accent-insensitive, because "Sao Paulo" should find "São Paulo". */
+export function matches(option, query) {
+  if (!query) return true;
+  return fold(option.label).includes(fold(query));
+}
+
+export const filterOptions = (options, query) => options.filter((o) => matches(o, query));
+
+/** The current selection as an array, whatever shape it arrived in. */
+export function toArray(value) {
+  if (value === undefined || value === null || value === '') return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+/** Adds or removes one value from a multiple selection. */
+export function toggleValue(current, value) {
+  const list = toArray(current);
+  return list.includes(value) ? list.filter((v) => v !== value) : [...list, value];
+}
+
+export const isSelected = (value, optionValue) => toArray(value).includes(optionValue);
+
+/** What the trigger reads when it is closed. */
+export function displayLabel(options, value, { placeholder = '', separator = ', ' } = {}) {
+  const selected = toArray(value);
+  if (!selected.length) return placeholder;
+  const labels = selected
+    .map((v) => options.find((o) => o.value === v)?.label ?? String(v));
+  return labels.join(separator);
+}
+
+/** Every value that can be chosen — a disabled option is not one of them. */
+export const selectableValues = (options) => options
+  .filter((o) => !o.disabled && !o.section)
+  .map((o) => o.value);
+
+/**
+ * The state of a "select all" control: checked when everything selectable is chosen,
+ * indeterminate when some of it is, unchecked when none.
+ */
+export function selectAllState(options, value) {
+  const all = selectableValues(options);
+  const chosen = toArray(value).filter((v) => all.includes(v));
+  if (!all.length || !chosen.length) return { checked: false, indeterminate: false };
+  if (chosen.length === all.length) return { checked: true, indeterminate: false };
+  return { checked: false, indeterminate: true };
+}
+
+/**
+ * What a pill trigger shows.
+ *
+ * Not displayLabel: a pill is a chip, and a chip that grows to "São Paulo, Rio de Janeiro,
+ * Salvador" stops being one. So it shows the first choice and the count of the rest goes
+ * to the notification badge — which is KDLS's behaviour, and the reason Pill has a
+ * notificationCount at all.
+ *
+ * With nothing chosen it falls back to the field's own name rather than the placeholder:
+ * an unselected chip reading "Cidade" is a filter waiting to be used, one reading
+ * "Selecione" is a form field that wandered into a toolbar.
+ */
+export function pillLabel(options, value, { label = '' } = {}) {
+  const selected = toArray(value);
+  if (!selected.length) return label;
+  const first = options.find((o) => o.value === selected[0]);
+  return first ? first.label : String(selected[0]);
+}
+
+/** How many choices the pill is not showing. */
+export const hiddenChoiceCount = (value) => Math.max(0, toArray(value).length - 1);
+
+/**
+ * The widest thing the trigger will ever have to show.
+ *
+ * A trigger whose label is the current choice changes width every time the choice changes,
+ * and everything beside it in the toolbar jumps. Reserving the widest option up front is
+ * what stops that — the same invisible-spacer technique the field shell uses for its label,
+ * pointed at a different string.
+ *
+ * Longest by character count, not by rendered width: the real answer needs a font and a
+ * canvas, and this is close enough that the reserved box is never visibly wrong. Ties go
+ * to the first, which keeps it stable across renders.
+ */
+export function widestLabel(options, fallback = '') {
+  let widest = fallback;
+  for (const option of options) {
+    if (option.section) continue;
+    const label = String(option.label ?? '');
+    if (label.length > widest.length) widest = label;
+  }
+  return widest;
+}