@kenlo/sds-design-system 0.9.9 → 1.0.2

package/components/Input/Input.css

@@ -443,7 +443,7 @@
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-drop-md);
   min-width: 220px;
-  max-height: 320px;
+  max-height: var(--menu-max-height);
   overflow-y: auto;
   padding: var(--spacing-1);
 }
@@ -524,7 +524,7 @@
    in the common case, and the cut-off row is what says there is more. The cap is on the
    body rather than the panel so the search box above it stays put while the rows move. */
 .sds-input__country .sds-menu__panel-body {
-  max-height: calc(7.5 * var(--sds-menu-item-height));
+  max-height: var(--menu-max-height);
 }
 /* Only a minimum width — the padding is the menu header's, and so is the full width. */
 .sds-input__country-search {
@@ -545,3 +545,26 @@
 .sds-input--disabled .sds-input__country-ddi {
   color: var(--color-neutral-40);
 }
+
+/* ── 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-input:hover:not(:focus-within):not(.sds-input--disabled),
+[data-primary-gradient] .sds-input:focus-within:not(.sds-input--feedback-success):not(.sds-input--feedback-alert):not(.sds-input--feedback-error) {
+  background:
+    linear-gradient(var(--component-bg-color), var(--component-bg-color)) padding-box,
+    var(--color-primary-50) border-box;
+  border-color: transparent;
+}

package/components/Menu/Menu.css

@@ -12,10 +12,6 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  /* The row height, named rather than written twice. A caller that wants a panel "seven
-     rows tall" can only say so in terms of this — and a pixel count copied out of here
-     would go stale the moment the row changed. */
-  --sds-menu-item-height: 40px;
 }
 /* ── Built-in trigger button ── */
 .sds-menu__btn {
@@ -86,6 +82,7 @@
   text-align: left;
 }
 .sds-menu__panel--inline .sds-menu__panel-body {
+  max-height: none;
   overflow-y: hidden;
 }
 .sds-nav--vertical .sds-menu__panel--inline .sds-menu__item {
@@ -164,7 +161,6 @@
   z-index: var(--z-floating);
   min-width: 200px;
   max-width: 380px;
-  max-height: 480px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -208,7 +204,21 @@
 .sds-menu__panel-body {
   flex: 1;
   min-height: 0;
+  max-height: var(--menu-max-height);
   overflow-y: auto;
+  /* The box that scrolls is also the box that CONTAINS.
+
+     A custom row may hold a control, and every toggle, switch and radio in this system is
+     a visually hidden `position: absolute` input. With this box static, that input's
+     containing block is the panel instead — so it sits outside the box that scrolls, and
+     the panel, which is `overflow: hidden`, becomes scrollable. It then scrolls the moment
+     the control takes focus, with no scrollbar to show it, no cause a reader can see, and
+     nothing to drag it back: the first rows end up clipped above the top edge and an equal
+     band of blank white sits below the last one.
+
+     Measured with the portal's colour menu: panel scrollHeight 502 against a clientHeight
+     of 300. With this line, 300. */
+  position: relative;
   padding: max(var(--spacing-1), calc(var(--radius-md) * 0.3)) 0;
 }
 .sds-menu__panel-footer {
@@ -221,13 +231,13 @@
   z-index: var(--z-floating);
 }
 .sds-menu__panel-bare .sds-menu__panel-body {
+  max-height: none;
   overflow: visible;
   padding: 0;
 }
 /* ── SubMenu panel — one layer above main panel ── */
 .sds-menu__submenu-panel {
   z-index: calc(var(--z-floating) + 1);
-  max-height: 480px;
 }
 /* ── Search (fixed header — does not scroll with list) ── */
 .sds-menu__search {
@@ -286,7 +296,7 @@ a.sds-menu__item {
   align-items: center;
   gap: var(--spacing-3);
   padding: var(--spacing-2) var(--spacing-4);
-  min-height: var(--sds-menu-item-height);
+  min-height: var(--menu-item-height);
   cursor: pointer;
   color: var(--color-neutral-80);
   font-family: var(--font-family-base);
@@ -557,8 +567,8 @@ a.sds-menu__item {
 }
 
 .sds-menu__trigger-custom: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);
 }
 
@@ -582,8 +592,8 @@ a.sds-menu__item {
 }
 
 .sds-menu__avatar-btn: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);
 }
 
 /* ── A row that opens the rows under it ───────────────────────────────────────

package/components/Menu/menu-variants.js

@@ -87,3 +87,15 @@ export function flattenRows(rows, expanded = {}) {
 /** Rows a keyboard can land on — a divider or a section header is not one of them. */
 export const isSelectable = (row) =>
   row.type !== 'divider' && row.type !== 'section' && row.type !== 'custom' && !row.disabled;
+
+/**
+ * What counts as the panel's search box.
+ *
+ * Narrower than "an input", because `<@item custom>` lets a caller put a real control in
+ * the panel and a radio or a checkbox is an input too. It has to be a field the reader
+ * types into, or the menu hands the caret to something nobody asked to type in — and
+ * focusing it scrolls the panel, which is `overflow: hidden` and shows no scrollbar to say
+ * so. Measured once, in the portal's colour menu: 202.5px of silent scroll, five rows
+ * clipped above the top edge and a blank band below the last one.
+ */
+export const SEARCH_FIELD = "input[type='text'], input[type='search'], input:not([type]), textarea, [contenteditable='true']";

package/components/Menu/menu.marko

@@ -34,7 +34,8 @@ after hydration is a menu that jumps. The three placements KDLS offers are all b
 trigger, so CSS does them — and when Popover lands with real collision detection, this
 grows into it. -->
 
-import { assertPlacement, assertTrigger, assertIntent, normaliseItems, flattenRows, isSelectable }
+import { assertPlacement, assertTrigger, assertIntent, normaliseItems, flattenRows, isSelectable,
+  SEARCH_FIELD }
   from "./menu-variants.js";
 
 import chevronIcon from "../../icons/generated/fluent-chevron-down-regular.marko";
@@ -140,14 +141,17 @@ class {
     const panel = this.getEl("panel");
     if (!panel) return;
 
-    const field = panel.querySelector("input, textarea, [contenteditable='true']");
+    // A field that takes TEXT, not any input. A custom row may hold a control — a toggle,
+    // a checkbox — and a radio is an `input`, so asking for one found the reader's control
+    // and focused it believing it was the search box.
+    const field = panel.querySelector(SEARCH_FIELD);
     if (field) {
-      field.focus();
+      field.focus({ preventScroll: true });
       return;
     }
 
     this.state.activeIndex = this.rows.findIndex((row) => isSelectable(row));
-    panel.querySelector("[role='listbox']")?.focus();
+    panel.querySelector("[role='listbox']")?.focus({ preventScroll: true });
   }
 
   toggle() {
@@ -195,19 +199,19 @@ class {
     if (event.key === "ArrowDown") {
       event.preventDefault();
       this.move(1);
-      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus();
+      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus({ preventScroll: true });
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
       this.move(-1);
-      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus();
+      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus({ preventScroll: true });
       return;
     }
     if (event.key === "Escape") {
       event.preventDefault();
       this.close();
-      this.getEl("trigger")?.focus();
+      this.getEl("trigger")?.focus({ preventScroll: true });
       return;
     }
     if (event.key === "Enter" || (event.key === " " && !typing)) {

package/components/Pill/Pill.css

@@ -191,3 +191,49 @@
 [data-theme="dark"] .sds-pill--off:active:not(:disabled):not(.sds-pill--loading) {
   background-color: var(--color-neutral-30);
 }
+
+/* ── 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-pill--off:hover:not(:disabled):not(.sds-pill--loading) {
+  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-pill--on {
+  background: var(--color-primary-50);
+  border: none;
+}
+[data-primary-gradient] .sds-pill--on:hover:not(:disabled):not(.sds-pill--loading) {
+  background: var(--color-primary-50);
+  border: none;
+  filter: brightness(1.1);
+}
+[data-primary-gradient] .sds-pill--on:active:not(:disabled):not(.sds-pill--loading) {
+  background: var(--color-primary-50);
+  border: none;
+  filter: brightness(0.85);
+}

package/components/Radio/Radio.css

@@ -228,3 +228,78 @@
   transform: scale(0);
   transition: transform 120ms ease;
 }
+
+/* ── 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-radio:hover:not(.sds-radio--disabled):not(.sds-radio--selected) .sds-radio__circle,
+[data-primary-gradient] .sds-radio:active:not(.sds-radio--disabled):not(.sds-radio--selected) .sds-radio__circle {
+  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. ─────────── */
+/* The dot is drawn as a hole rather than as a mark: the circle carries the gradient and
+   `::after` punches the surface colour out of the middle. Painting the dot instead would
+   need a second gradient that lines up with the first, which it never quite does. */
+/* Both spellings of "selected", because this component has two: `--selected` when the
+   caller controls it, and the native `:checked` when it controls itself. The base rules
+   below cover both, and so must these — a radio ticked by a click carries only the second,
+   which is how the first version of this rule looked right in a test and did nothing on
+   the page. */
+[data-primary-gradient] .sds-radio--selected .sds-radio__circle,
+[data-primary-gradient] .sds-radio__input:checked ~ .sds-radio__circle {
+  position: relative;
+  background: var(--color-primary-50);
+  border: none;
+  box-shadow: none;
+}
+[data-primary-gradient] .sds-radio--selected .sds-radio__circle::after,
+[data-primary-gradient] .sds-radio__input:checked ~ .sds-radio__circle::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background: var(--component-bg-color);
+  inset: 5px;
+}
+[data-primary-gradient] .sds-radio--md.sds-radio--selected .sds-radio__circle::after,
+[data-primary-gradient] .sds-radio--md .sds-radio__input:checked ~ .sds-radio__circle::after {
+  inset: 7px;
+}
+[data-primary-gradient] .sds-radio--selected:hover:not(.sds-radio--disabled) .sds-radio__circle,
+[data-primary-gradient] .sds-radio--selected:active:not(.sds-radio--disabled) .sds-radio__circle,
+[data-primary-gradient] .sds-radio:hover:not(.sds-radio--disabled) .sds-radio__input:checked ~ .sds-radio__circle,
+[data-primary-gradient] .sds-radio:active:not(.sds-radio--disabled) .sds-radio__input:checked ~ .sds-radio__circle {
+  background: var(--color-primary-50);
+  border: none;
+  box-shadow: none;
+  filter: brightness(1.1);
+}
+/* The ring sits outside now — the fill is the whole circle, so an inset one would be
+   hidden under it. */
+[data-primary-gradient] .sds-radio--selected:focus-visible .sds-radio__circle,
+[data-primary-gradient] .sds-radio__input:focus-visible:checked ~ .sds-radio__circle {
+  box-shadow: var(--focus-ring);
+}

package/components/Select/Select.css

@@ -209,6 +209,10 @@
   list-style: none;
   flex: 1;
   min-height: 0;
+  /* The panel carries no height of its own, so without this the list grew by one row per
+     option until it ran past the bottom of the window — and the rows past the fold are
+     rows nobody scrolls to, because nothing said there were any. */
+  max-height: var(--menu-max-height);
   overflow-y: auto;
 }
 /* The list takes focus so the keyboard has somewhere to land, and shows nothing for it.
@@ -261,7 +265,7 @@
   /* 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);
+  min-height: var(--menu-item-height);
   border-radius: 11px;  /* soft, the install default — schemes at the end */
   font-family: var(--font-family-base);
   font-size: var(--font-size-body-md);
@@ -287,6 +291,22 @@
   color: var(--color-neutral-10-on);
   box-shadow: var(--focus-ring-inset);
 }
+/* `:focus`, not `:focus-visible`, and on the LIST rather than on the row.
+
+   The arrow keys move a highlight, not the caret: focus stays on the list, which is what
+   hears the next arrow, and `aria-activedescendant` names the row for a screen reader.
+   That means the row the reader is on never matches `:focus-visible` — the browser only
+   marks focus it moved itself — so without this rule the arrows walked an invisible
+   highlight. The list is the only thing that can say "the keyboard is in here", and
+   `[data-active]` is the only thing that can say which row.
+
+   Identical in shape to Menu's `.sds-menu__list:focus .sds-menu__item[data-active]`, which
+   met the same problem first and wrote the same answer. */
+.sds-select__list:focus .sds-select__option[data-active="true"] {
+  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);

package/components/Select/select-options.js

@@ -101,9 +101,18 @@ export function displayLabel(options, value, { placeholder = '', separator = ',
   return labels.join(separator);
 }
 
+/**
+ * A row the keyboard can land on — a section header is a label, not a choice, and a
+ * disabled option is a dead end the reader would have to guess their way out of.
+ *
+ * Written once and read by both the arrow keys and `selectableValues`, so "selectable"
+ * cannot come to mean two things. Menu states the same rule as `isSelectable`.
+ */
+export const isOptionSelectable = (option) => !option.section && !option.disabled;
+
 /** 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)
+  .filter(isOptionSelectable)
   .map((o) => o.value);
 
 /**

package/components/Select/select.marko

@@ -25,9 +25,10 @@ strings only, which fails on exactly the words a Brazilian visitor types without
 
 import { normaliseOptions, filterOptions, toArray, toggleValue, isSelected,
   displayLabel, pillLabel, hiddenChoiceCount, widestLabel, selectableValues, selectAllState,
-  assertTrigger, assertWidth }
+  isOptionSelectable, assertTrigger, assertWidth }
   from "./select-options.js";
 import { assertFeedback as assertInputFeedback } from "../Input/input-types.js";
+import { focusWhenReady } from "../Floating/focus-when-ready.js";
 import chevronIcon from "../../icons/generated/fluent-chevron-down-regular.marko";
 import clearIcon from "../../icons/generated/fluent-dismiss-regular.marko";
 
@@ -36,6 +37,10 @@ class {
     this.state = {
       open: false,
       query: "",
+      // Where the arrow keys are, as an index into `rows`. -1 is "nowhere", which is what a
+      // panel opened with the mouse starts at: nothing is highlighted until the reader
+      // moves, so Enter can never commit a row nobody has looked at.
+      activeIndex: -1,
       value: input.value ?? input.defaultValue ?? (input.multiple ? [] : undefined),
     };
   }
@@ -44,10 +49,22 @@ class {
   setOpen(next) {
     if (this.input.disabled) return;
     this.state.open = next;
+    this.state.activeIndex = -1;
     if (!next) this.state.query = "";
     if (next) this.wantsFocus = true;
   }
 
+  /**
+   * The list's size as it stands, before anything has changed it.
+   *
+   * Without this the FIRST update looks like the list changed size — it was `undefined`
+   * and is now a number — so the highlight was cleared on the very update that opening the
+   * panel causes, and an arrow on a closed Select opened it onto nothing.
+   */
+  onMount() {
+    this.lastSize = this.rows.length;
+  }
+
   /**
    * An opened list puts the caret where the next keystroke belongs: the search box when
    * there is one, the list itself otherwise, so the arrow keys work without a click.
@@ -56,13 +73,35 @@ class {
    * state changes.
    */
   onUpdate() {
+    // A filtered list is a different list, and the highlight was an index into the old one
+    // — after typing it would point at whatever happened to land in that position. Menu hit
+    // exactly this and says so in its own source.
+    //
+    // It drops to "nowhere" rather than to the first match, which is where this Select
+    // diverges from Menu: nothing here is ever highlighted until the reader asks for it, so
+    // their next Enter is always about a row they have seen. One more ArrowDown reaches the
+    // first match, and that keystroke is the reader saying they looked.
+    const size = this.rows.length;
+    if (size !== this.lastSize) {
+      this.lastSize = size;
+      this.state.activeIndex = -1;
+    }
+
     if (!this.wantsFocus || !this.state.open) return;
     this.wantsFocus = false;
 
     const panel = this.getEl("panel");
     if (!panel) return;
 
-    (panel.querySelector("input") ?? panel.querySelector("[role='listbox']"))?.focus();
+    // Asking once is not enough: sds-floating keeps the panel `visibility: hidden` until it
+    // has measured and placed it, and focus() on a hidden element does nothing and says
+    // nothing. The rule, and the measurement behind it, are in focus-when-ready.js.
+    focusWhenReady(() => {
+      if (!this.state.open) return null;
+      const current = this.getEl("panel");
+      return current
+        && (current.querySelector("input") ?? current.querySelector("[role='listbox']"));
+    });
   }
 
   get currentValue() {
@@ -79,6 +118,40 @@ class {
     return this.input.filterOption === false ? all : filterOptions(all, this.state.query);
   }
 
+  /**
+   * What the arrow keys walk, and what `activeIndex` indexes into.
+   *
+   * The same list the template renders, `loading` included: while the spinner is up there
+   * are no rows on screen, so an index would point into a list nobody has seen yet.
+   */
+  get rows() {
+    return this.input.loading ? [] : this.visibleOptions;
+  }
+
+  /**
+   * Moves the highlight, skipping section headers and disabled options, wrapping at both
+   * ends. Menu's `move`, deliberately identical — two lists in the same product answering
+   * the same key differently is the kind of difference nobody decides on purpose.
+   */
+  move(step) {
+    const selectable = this.rows
+      .map((row, index) => (isOptionSelectable(row) ? index : -1))
+      .filter((index) => index !== -1);
+    if (!selectable.length) return;
+
+    const current = selectable.indexOf(this.state.activeIndex);
+    const next = current === -1
+      ? (step > 0 ? 0 : selectable.length - 1)
+      : (current + step + selectable.length) % selectable.length;
+
+    this.state.activeIndex = selectable[next];
+  }
+
+  /** The row the arrows are on, or null when they are nowhere. */
+  get activeOption() {
+    return this.rows[this.state.activeIndex] ?? null;
+  }
+
   togglePanel() {
     this.setOpen(!this.state.open);
   }
@@ -86,6 +159,7 @@ class {
   closePanel() {
     this.state.open = false;
     this.state.query = "";
+    this.state.activeIndex = -1;
   }
 
   commit(next) {
@@ -156,9 +230,33 @@ class {
       this.getEl("trigger")?.focus();
       return;
     }
-    if (!this.state.open && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+    if (!this.state.open) {
+      if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.setOpen(true);
+        // Opening and then asking for one more arrow to reach the first row is a keystroke
+        // that says nothing. Menu's trigger does the same.
+        this.move(1);
+      }
+      return;
+    }
+
+    // Inside a search box Space is a space, and an arrow means "leave the box and go to the
+    // rows" rather than moving a highlight nobody is looking at. The same split Menu makes.
+    const typing = event.target.matches?.("input, textarea");
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      this.move(event.key === "ArrowDown" ? 1 : -1);
+      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus();
+      return;
+    }
+
+    if (event.key === "Enter" || (event.key === " " && !typing)) {
+      const option = this.activeOption;
+      if (!option) return;
       event.preventDefault();
-      this.state.open = true;
+      this.choose(option, event);
     }
   }
 }
@@ -379,6 +477,10 @@ $ {
         // Focusable, not tabbable: an opened list with no search box takes the caret so
         // the arrow keys work without a click, and the tab order is unchanged.
         tabindex="-1"
+        // The list holds focus and NAMES the option the arrows are on. Moving real focus
+        // onto the option instead would take it off the list, and the list is what hears
+        // the next arrow — and a screen reader would hear the list and never the row.
+        aria-activedescendant=(state.activeIndex >= 0 ? `${listboxId}-option-${state.activeIndex}` : null)
       >
         <if(loading)>
           <li class="sds-select__loading"><sds-spinner size="sm" label="Carregando opções"/></li>
@@ -387,7 +489,7 @@ $ {
           <li class="sds-select__empty">${emptyMessage}</li>
         </else-if>
 
-        <for|option| of=(loading ? [] : visible)>
+        <for|option, index| of=(loading ? [] : visible)>
           <if(option.section)>
             <li class="sds-select__section-header" role="presentation">${option.label}</li>
           </if>
@@ -395,9 +497,14 @@ $ {
             <li role="none">
               <button
                 type="button"
+                id=`${listboxId}-option-${index}`
                 class=`sds-select__option ${isSelected(value, option.value) ? "sds-select__option--selected" : ""}`.trim()
                 role="option"
                 aria-selected=(isSelected(value, option.value) ? "true" : "false")
+                // What the stylesheet rings. It cannot be `:focus-visible` here: focus
+                // stays on the list, and a highlight the component moved is not something
+                // the browser marks as visible focus.
+                data-active=(index === state.activeIndex ? "true" : null)
                 disabled=(option.disabled || null)
                 on-click("choose", option)
               >