stimeo-ui 0.4.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5c989b2c56e2578e6c05c5e01c29e31cdba141e9a49110701ba4a40dc91198e
-  data.tar.gz: 6b123f7cad0a54ef52b13c525bb53cf2eb43f0cc09748ab0d8cbf7d738e1fca9
+  metadata.gz: 2883d44061c4c7ec8e5cd1a3b021c1d7fa8bf34bf8f2f74df1a3f496fe99f578
+  data.tar.gz: 9024ef97e2802777390ebc1a18cbbc202df8643ccac875d59b49a06bf6ae7f3e
 SHA512:
-  metadata.gz: b95db793fc2a866c4c099f98ca1a689a36b5f15419d6b89b1c2f6423f694e03421c68d1bf930c0920c6d8feeb0c554a430e03523367fdabfa24578769a922c9b
-  data.tar.gz: 06ee52f5e9a6a56c9fea57f9e2f291e58336228e17a5bc5685238be3d98e00718a81837eb4196ddd08a230006492cd5e23d950537285f1e088c6bb2767b4fc12
+  metadata.gz: a6dd511725546fc75ffa9e150ff02640d22c09404238f9ac418b8042eac78fab90bf6c19e8266933a5b2c47178ccc13dea00793c76c7e4184f708e9619afb84c
+  data.tar.gz: 926ccd828054b1e374bc5e9039d94d0eb4b0c398a45b235090af702ce037993e2bff6b774f6932d39e8eabdb27e69ae80fd953e25b2a8ead7525c1ee6a59d585

data/CHANGELOG.md

@@ -7,6 +7,188 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.6.0] - 2026-08-15
+
+Minor release that separates reconciled state from user edits: `change` now
+means the user committed a value, and a controller that re-derives its own state
+reports `reconcile` instead. Several markup contracts tightened, and authored
+prose — remove-button names, announcements — moved out of the library. The
+Inspector manifest stays on schema v11, but **`stimeo check` can report errors on
+views that passed under 0.5.0**, so run it before deploying.
+
+### Upgrade notes
+
+- Listening to `change` to observe controller-driven repair? Subscribe to
+  `reconcile` too: carousel, checkbox, color-picker, multi-select, number-input,
+  radio-group, rating, tags-input, time-picker. Neither fires on connect.
+- rating: delete `max` and every `data-rating-value`. The DOM order of the
+  `symbol` targets is the scale.
+- aspect-ratio: delete the `content` target.
+- toggle-group, radio-group: items must be `<button type="button">` or a
+  non-interactive host with `role="button"` / `role="radio"`. Others are left
+  untouched at runtime.
+- tags-input, multi-select: delete the `status` target, put a
+  `stimeo--announcer` on the page, and set `announceText` /
+  `announceRemovedText`. In the chip template add `label` and `remove` targets
+  and author the remove button's `aria-label` (`{label}` / `{value}` expand).
+  Drop `data-*-slot="label"` and tags-input's `removeTag` action.
+- date-range-picker: declare unavailable days with `disabled-dates`; an
+  `aria-disabled` you write on a cell is overwritten on the next paint.
+- time-picker: AM/PM is a `role="spinbutton"` segment, not an `aria-pressed`
+  toggle. `seconds` only decides whether the composed value carries seconds.
+- List values are read as JSON strings — idle's `events`, password-strength's
+  `levels`, persist's `exclude`, date-range-picker's `disabled-dates`. The
+  markup is unchanged; the manifest reports `String` where it reported `Array`.
+
+### Removed
+
+- **Breaking** — rating: `max` and `data-rating-value`. aspect-ratio: the
+  `content` target. tags-input, multi-select: the `status` target, tags-input's
+  `removeTag` action, and the English `Remove {value}` label the library wrote
+  onto generated remove buttons.
+
+### Added
+
+- A `reconcile` event, carrying the same `detail` as that component's `change`,
+  on carousel, checkbox, color-picker, multi-select, number-input, radio-group,
+  rating, tags-input, and time-picker.
+- checkbox: a group works without a `parent`; the root still reports
+  `all` / `partial` / `none`.
+- rating: `Delete` and `Backspace` clear the rating when `clearable`.
+- date-range-picker: `disabled-dates`, a `monthchange` event,
+  `Shift+PageUp` / `Shift+PageDown` for stepping a year, and month labels
+  formatted from `documentElement.lang`.
+- multi-select: a `fields` target holding one hidden input per selected value,
+  with `name` and `form`, plus `announceText` / `announceRemovedText`.
+  tags-input: `label` and `remove` targets and the same two announce values.
+- avatar: an `empty` state beside `loading`, `loaded`, and `error`.
+- Inspector: `invalid-host` for radio-group and toggle-group items;
+  chip-template parts required *inside* the template; `aria-label` on remove
+  buttons and the group role on toggle groups; at most one checkbox `parent`
+  and one checked radio; a positive integer time-picker `step`. An empty
+  attribute value no longer satisfies a requirement that asks only for the
+  attribute's presence.
+
+### Changed
+
+- **Breaking** — `change` is reserved for user-committed values. DOM
+  normalization, target churn, morphs, and runtime value changes report
+  `reconcile`, and a repair that leaves the committed state unchanged reports
+  nothing.
+- **Breaking** — radio-group, time-picker: the hidden `field` fires a native
+  `change` only for user edits, so a server-rendered repaint cannot drive an
+  `auto-submit` companion into a resubmit loop.
+- **Breaking** — multi-select: `max` is enforced at all times, not only on the
+  click path; surplus options normalize to `aria-selected="false"`.
+- **Breaking** — avatar: a present `src` value wins over an authored `src`, and
+  an empty one means "no image". Remove the attribute to hand the element's own
+  `src` back.
+- **Breaking** — checkbox: a parent toggle sets each child's `checked` without
+  synthesizing a native `change` per child; the root reports one event.
+- toggle-group, radio-group, tags-input, multi-select: interaction is delegated
+  from the container, so items added at runtime work without per-item
+  `data-action`. Existing per-item actions stay compatible.
+- toggle-group, radio-group: `aria-disabled` items stay reachable by arrow keys
+  with activation suppressed; natively disabled and `hidden` items are skipped.
+- number-input, rating, scroll-area, time-picker: ARIA and `tabindex` the
+  controller writes are treated as loans and handed back to their authored
+  values, without overwriting a change you made in the meantime.
+- date-range-picker: a preset that only partly overlaps `min` / `max` is
+  narrowed to the selectable span instead of committing an unavailable endpoint.
+- multi-select, tags-input: `Backspace` in an empty input removes the last chip
+  and keeps focus in the input.
+- time-picker: a unit that wraps past noon or midnight carries AM/PM with it,
+  and one operation reports one `change` with the final value.
+
+### Fixed
+
+- avatar, carousel, checkbox, radio-group, rating, roving, toggle-group: targets
+  added, removed, or morphed at runtime settle on one state — a single tab stop,
+  a single checked or pressed item, and focus on a surviving item.
+- date-range-picker: an unavailable day cannot become a committed endpoint
+  through a preset, a preview, or Enter/Space; a reversed stored range is
+  normalized on connect; a pending selection is rewound before Turbo caches the
+  page.
+- number-input: commits compare numbers rather than the displayed text, and IME
+  composition never commits a value.
+- time-picker: with `wrap` disabled, 11 and 12 no longer step into each other,
+  and an unfinished direct-entry buffer is discarded when focus leaves.
+- multi-select, tags-input: a chip is built only when the template can produce a
+  complete one, only the `remove` target inside a chip acts on it, and a
+  replaced `tags` container is re-wired.
+- file-dropzone, scroll-area: a replaced `list` / `viewport` keeps its state and
+  takes over the listeners; the old element stops responding.
+- idle, password-strength, persist, date-range-picker: a malformed list value
+  falls back to its default instead of stopping the controller from connecting
+  and leaving the whole element inert.
+
+## [0.5.0] - 2026-08-13
+
+### Changed
+
+- **Breaking** — every CSS custom property the library writes now carries the
+  `--stimeo--` namespace (two hyphens). Rename them in your stylesheets: a name
+  you miss raises no error, it just falls back to `var()`'s default and the bar
+  or thumb stops moving.
+  - `--stimeo-range-start` / `--stimeo-range-end` →
+    `--stimeo--range-slider-start` / `--stimeo--range-slider-end`
+  - `--stimeo-<name>` → `--stimeo--<name>` for `aspect-ratio`,
+    `collapsible-content-height`, `color`, `context-menu-x`, `context-menu-y`,
+    `masonry-columns`, `meter-ratio`, `password-strength`, `progress-ratio`,
+    `scroll-progress`, `step-indicator-ratio`, `textarea-rows`,
+    `upload-progress`
+- **Breaking** — spinner's `indicator`, the network-status banners, and
+  countdown's `status` slot are no longer live regions. Drop `role="status"` /
+  `role="alert"` / `aria-live` from them and set `announceText` (and its
+  siblings) with a `stimeo--announcer` on the page; keeping the role reads the
+  change twice.
+- time-picker: committing a field change dispatches a native `change` from the
+  `field` target, and `stimeo--time-picker:change` reports the composed value
+  even when no `field` target is present.
+- tree-view: more native elements count as nested-interactive (`label`,
+  `summary`, `details`, `area[href]`, media with `controls`, `iframe`, `object`,
+  `embed`), so a click or key inside one is left alone instead of moving the
+  tree selection.
+
+### Added
+
+- Inspector: the manifest advances from schema v8 to **v11** — tools that read it
+  raw must accept the new `valueConstraints`, `hosts`, and `valueRelations`
+  fields. Two diagnostics are new, so **re-run `stimeo check` before deploying;
+  it can report errors on views that passed under 0.4.0**:
+  - `invalid-value` — slider, range-slider, and number-input need a finite,
+    positive `step`; range-slider needs finite `min`, `max`, `start`, and `end`
+    with `min` at or below `max`.
+  - `invalid-host` — switch, time-picker, and tree-view report an unsupported
+    host element before it reaches the browser.
+
+### Fixed
+
+- range-slider: two thumbs resting on the same value can be pulled apart with
+  the pointer again, and invalid or reversed bounds fall back to a finite
+  ordered range.
+- slider, range-slider, number-input: an endpoint that does not sit on the step
+  grid is reachable, and an invalid `step` falls back to `1`.
+- slider, range-slider: a Turbo morph that swaps a value repaints instead of
+  freezing, a replaced thumb or track picks up the current state, and a drag
+  stays with the pointer that started it.
+- switch: holding Space no longer scrolls a non-`<button>` host, and an ancestor
+  `fieldset[disabled]` or `aria-disabled` blocks activation.
+- flash: hover and focus pause the auto-dismiss independently, a flash paused
+  after its deadline dismisses instead of staying forever, a second dismiss on a
+  leaving flash is ignored, and a replaced `region` target is picked up.
+- frame-loading: `aria-busy`, the skeleton, and `inert` are rolled back when the
+  controller is detached, instead of burning in with nothing left to finish the
+  load.
+- empty-state: a replaced `list` or `empty` element and a runtime `itemSelector`
+  change are followed, so the placeholder no longer sticks beside a filled list.
+- highlight: a highlight that outlives a Turbo navigation is cleaned up on the
+  way back instead of staying marked.
+- idle: `data-idle` is cleared when a new measurement cycle connects, and
+  `disconnect()` removes the listeners it actually registered even when `events`
+  changed while connected.
+- skeleton: a skeleton moved within the page keeps its ready intent.
+
 ## [0.4.0] - 2026-08-11
 
 The feedback and status components announce through the shared
@@ -391,6 +573,8 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
+[0.6.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.6.0
+[0.5.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.5.0
 [0.4.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.4.0
 [0.3.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.3.0
 [0.2.1]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.2.1

data/dist/controllers/aspect_ratio_controller.js

@@ -1,33 +1,41 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/aspect_ratio_controller.ts
+var DEFAULT_RATIO = "1 / 1";
+var RATIO_PROPERTY = "--stimeo--aspect-ratio";
+var CSS_NUMBER_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)(?:[eE][+-]?\d+)?$/;
 var AspectRatioController = class extends Controller {
-  static targets = ["content"];
   static values = {
     ratio: { type: String, default: "1/1" }
   };
   /** Applies the ratio on connect and whenever the value changes. */
   ratioValueChanged() {
-    this.element.style.setProperty("--stimeo-aspect-ratio", this.#normalizeRatio(this.ratioValue));
+    this.element.style.setProperty(RATIO_PROPERTY, this.#normalizeRatio(this.ratioValue));
   }
   /**
    * Normalizes a ratio string to a valid CSS `<ratio>`:
-   * - `"16/9"` / `"16 / 9"` → `"16 / 9"` (both parts must be positive numbers)
-   * - `"1.5"` → `"1.5"` (a bare positive number)
+   * - `"16/9"` / `"16 / 9"` → `"16 / 9"` (both parts must be positive CSS numbers)
+   * - `"1.5"` → `"1.5"` (a bare positive CSS number)
    * - anything else → `"1 / 1"` (the default), so the custom property is always valid.
    */
   #normalizeRatio(raw) {
     const value = raw.trim();
     if (value.includes("/")) {
-      const [w, h] = value.split("/").map((part) => Number.parseFloat(part.trim()));
-      if (this.#isPositive(w) && this.#isPositive(h)) return `${w} / ${h}`;
-      return "1 / 1";
+      const parts = value.split("/");
+      if (parts.length !== 2) return DEFAULT_RATIO;
+      const width = this.#parsePositiveNumber(parts[0] ?? "");
+      const height = this.#parsePositiveNumber(parts[1] ?? "");
+      return width !== void 0 && height !== void 0 ? `${width} / ${height}` : DEFAULT_RATIO;
     }
-    const single = Number.parseFloat(value);
-    return this.#isPositive(single) ? String(single) : "1 / 1";
+    const single = this.#parsePositiveNumber(value);
+    return single === void 0 ? DEFAULT_RATIO : String(single);
   }
-  #isPositive(value) {
-    return value !== void 0 && Number.isFinite(value) && value > 0;
+  /** Parses one complete CSS `<number>` token and rejects units or trailing syntax. */
+  #parsePositiveNumber(raw) {
+    const token = raw.trim();
+    if (!CSS_NUMBER_PATTERN.test(token)) return void 0;
+    const value = Number(token);
+    return Number.isFinite(value) && value > 0 ? value : void 0;
   }
 };
 

data/dist/controllers/avatar_controller.js

@@ -1,63 +1,218 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/avatar_controller.ts
+
+// src/utils/attribute_lease.ts
+var AttributeLease = class {
+  #attribute;
+  #records = /* @__PURE__ */ new Map();
+  /** @param attribute - The attribute whose temporary values this lease owns. */
+  constructor(attribute) {
+    this.#attribute = attribute;
+  }
+  /** Writes or removes the leased attribute while preserving its authored value. */
+  write(element, value) {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.written = value;
+    } else {
+      this.#records.set(element, {
+        original: element.getAttribute(this.#attribute),
+        written: value
+      });
+    }
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
+  }
+  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    if (element.getAttribute(this.#attribute) !== record.written) return;
+    if (record.original === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, record.original);
+  }
+  /** Returns every outstanding lease using the same ownership check as {@link return}. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+};
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/avatar_controller.ts
 var AvatarController = class extends Controller {
   static targets = ["image", "fallback"];
-  static values = {
-    src: { type: String, default: "" }
-  };
+  static values = { src: String };
   static actions = ["onError", "onLoad"];
   static events = ["error"];
+  /** Collapses one morph's Value, target, and direct-attribute signals into one pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#render());
+  /** Preserves directly-authored source and visibility while targets are controlled. */
+  #src = new AttributeLease("src");
+  #imageHidden = new AttributeLease("hidden");
+  #fallbackHidden = new AttributeLease("hidden");
+  /** True only while target departure means ownership was actually relinquished. */
+  #connected = false;
+  /** Watches the non-Value render input used by the direct `<img src>` form. */
+  #srcObserver = new MutationObserver((records) => {
+    if (records.some((record) => this.hasImageTarget && record.target === this.imageTarget)) {
+      this.#reconcile.schedule();
+    }
+  });
+  /** Starts retained-DOM observation and silently derives the current phase. */
   connect() {
-    if (!this.hasImageTarget) {
-      this.#showFallback();
-      return;
+    this.#connected = true;
+    this.#reconcile.activate();
+    this.#srcObserver.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["src"],
+      subtree: true
+    });
+    this.#render();
+  }
+  /** Cancels asynchronous work while retaining the last materialized visual state. */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.#srcObserver.disconnect();
+  }
+  /** Repaints when application code or a Turbo morph changes the source Value. */
+  srcValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Applies the current source and phase to an image inserted or replaced at runtime. */
+  imageTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Returns attributes borrowed from an image that leaves this live avatar. */
+  imageTargetDisconnected(image) {
+    if (this.#connected) {
+      this.#src.return(image);
+      this.#imageHidden.return(image);
     }
-    if (this.srcValue) {
-      this.imageTarget.src = this.srcValue;
+    this.#reconcile.schedule();
+  }
+  /** Applies the current phase to a fallback inserted or replaced at runtime. */
+  fallbackTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Returns authored visibility when a fallback leaves this live avatar. */
+  fallbackTargetDisconnected(fallback) {
+    if (this.#connected) this.#fallbackHidden.return(fallback);
+    this.#reconcile.schedule();
+  }
+  /** Reveals the current image after its native `load` event. */
+  onLoad(event) {
+    const image = this.#eventImage(event);
+    if (!image) return;
+    if (!image.getAttribute("src")) {
+      this.#render();
+      return;
     }
-    const src = this.imageTarget.getAttribute("src");
+    this.#reflect("loaded");
+  }
+  /**
+   * Reveals the fallback after the current image's native `error` event.
+   *
+   * Dispatches `stimeo--avatar:error` with `{ src: string }`, where `src` is
+   * the attempted attribute value. Empty/stale/detached image events are ignored.
+   */
+  onError(event) {
+    const image = this.#eventImage(event);
+    if (!image) return;
+    const src = image.getAttribute("src");
     if (!src) {
-      this.#showFallback();
+      this.#render();
+      return;
+    }
+    this.#reflect("error");
+    this.dispatch("error", { detail: { src } });
+  }
+  /**
+   * Materializes the phase from the final source/target DOM after one mutation batch.
+   *
+   * Cached success and failure are state reconstruction, not new load events, so
+   * this pass never dispatches the public `error` event.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    if (!this.hasImageTarget) {
+      this.#reflect("empty");
       return;
     }
-    if (this.imageTarget.complete && this.imageTarget.naturalWidth > 0) {
-      this.#showImage();
+    const image = this.imageTarget;
+    const src = this.#applySource(image);
+    if (!src) {
+      this.#reflect("empty");
       return;
     }
-    if (this.imageTarget.complete && this.imageTarget.naturalWidth === 0 && src) {
-      this.onError();
+    if (!image.complete) {
+      this.#reflect("loading");
       return;
     }
-    this.#enterLoading();
+    this.#reflect(image.naturalWidth > 0 ? "loaded" : "error");
   }
-  /** Reveals the image once it has loaded successfully. */
-  onLoad() {
-    this.#showImage();
+  /** Applies Value precedence and returns the effective raw `src` attribute. */
+  #applySource(image) {
+    if (!this.element.hasAttribute("data-stimeo--avatar-src-value")) {
+      this.#src.return(image);
+      return image.getAttribute("src");
+    }
+    const desired = this.srcValue.length > 0 ? this.srcValue : null;
+    if (image.getAttribute("src") !== desired) this.#src.write(image, desired);
+    return desired;
   }
-  /** Swaps to the fallback when the image fails and emits `error`. */
-  onError() {
-    const src = this.hasImageTarget ? this.imageTarget.getAttribute("src") ?? "" : "";
-    this.#showFallback();
-    this.dispatch("error", { detail: { src } });
+  /** Accepts an action only from the singular image target currently controlled. */
+  #eventImage(event) {
+    const candidate = event.currentTarget;
+    if (!(candidate instanceof HTMLImageElement)) return null;
+    if (!this.hasImageTarget || candidate !== this.imageTarget) return null;
+    return candidate;
   }
-  /** Loading phase: keep the image visible (per markup) while it fetches. */
-  #enterLoading() {
-    if (this.hasImageTarget) this.imageTarget.hidden = false;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true;
-    this.element.setAttribute("data-state", "loading");
-  }
-  /** Loaded phase: image visible, fallback hidden. */
-  #showImage() {
-    if (this.hasImageTarget) this.imageTarget.hidden = false;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true;
-    this.element.setAttribute("data-state", "loaded");
-  }
-  /** Error / no-src phase: fallback visible, image hidden. */
-  #showFallback() {
-    if (this.hasImageTarget) this.imageTarget.hidden = true;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = false;
-    this.element.setAttribute("data-state", "error");
+  /** Writes the visibility pair and public root state as one controller-owned output. */
+  #reflect(state) {
+    const showImage = state === "loading" || state === "loaded";
+    if (this.hasImageTarget) {
+      this.#imageHidden.write(this.imageTarget, showImage ? null : "");
+    }
+    if (this.hasFallbackTarget) {
+      this.#fallbackHidden.write(this.fallbackTarget, showImage ? "" : null);
+    }
+    this.element.setAttribute("data-state", state);
   }
 };
 

data/dist/controllers/breadcrumb_controller.js

@@ -287,7 +287,11 @@ var BreadcrumbController = class extends Controller {
     this.ellipsisTarget.hidden = true;
     return this.listTarget.scrollWidth > this.listTarget.clientWidth + OVERFLOW_EPSILON;
   }
-  /** Applies the collapsed/expanded state to the items, ellipsis, and trigger. */
+  /**
+   * Applies the collapsed/expanded state to the items, ellipsis, and trigger.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const collapsed = this.#overflowing && !this.#expanded;
     const showEllipsis = this.#overflowing && this.collapsibleTargets.length > 0;