@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/action/toggle/toggle-group.js

@@ -16,14 +16,20 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _EunomiaToggleGroup_resizeObserver, _EunomiaToggleGroup_hasSeededInitialValue;
-import { customElement, property, query, queryAssignedElements, } from "lit/decorators.js";
+import { customElement, property, query, queryAssignedElements, state, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
+import { NavigationOverflowMixin } from "../../../mixins/overflow-navigation.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { debounce } from "../../../utils/time.utils.js";
 import { toggleGroupStyles } from "./toggle-group.styles.js";
+/**
+ * Room kept between a revealed entry and the row's edge, so the overflow
+ * arrows (24px wide) never sit over it.
+ */
+const ARROW_CLEARANCE = 28;
 /**
  * Tag name of the toggle group component.
  */
@@ -55,6 +61,8 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * the Examples tab for what each shape looks like.
  *
  * @slot [default] - Toggle item elements, used instead of or alongside options
+ * @prop {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
+ * @attr {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
  * @prop {Array<EunomiaToggleGroupOption>} options - The choices to render, in order
  * @prop {Array<string>} value - The currently selected choices' values. Always exactly one entry in exclusive mode
  * @prop {boolean} [single=false] - Forces the exclusive, sliding indicator mode regardless of choice count. Already the case for exactly two choices without setting this
@@ -62,26 +70,29 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @prop {boolean} [disabled=false] - Whether the whole group is disabled
  * @attr {string} [aria-label] - The accessible label for the group, required since the group has no visible legend of its own
  * @fires {ChangeEvent} eunchange - Fired whenever the selection changes
- * @cssprop [--toggle-group-background] - Sets the background color of the track. Ignored once appearance isn't default, which has no shared background
- * @cssprop [--toggle-group-border-color] - Sets the border color of the track, and the border color of each option at rest in the outline appearance
+ * @cssprop [--toggle-group-background] - Sets the background color of the track, for every appearance (transparent by default in outline and flat)
+ * @cssprop [--toggle-group-border-color] - Sets the border color of the track in the default appearance, and the border color of each option at rest in the outline and flat appearances
  * @cssprop [--toggle-group-color] - Sets the text color of unselected options
- * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. Also sets the primary variant's selected color in the outline and flat appearances, for an option that sets no variant of its own
- * @cssprop [--toggle-group-active-color] - Sets the text color of selected options in the default appearance. Ignored in the outline and flat appearances, where the selected text color always follows the option's own color instead
+ * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own color
+ * @cssprop [--toggle-group-active-color] - Sets the text color of selected options, for every appearance
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
- * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover, in the default appearance. Ignored in the outline and flat appearances, where hover and focus text color always follow the option's own color instead, exactly like the selected state
+ * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
+ * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default
  * @cssprop [--toggle-group-shadow] - Sets a box shadow on every option, and the sliding indicator in exclusive mode. None by default
  * @cssprop [--toggle-group-shadow-hover] - Sets the box shadow of an unselected option on hover, falling back to toggle-group-shadow when unset
+ * @cssprop [--toggle-group-arrows-color] - Sets the background color the overflow arrows fade out to, once the group overflows its container
  * @element eun-toggle-group
  */
-let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitElement) {
+let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixin(DisabledMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
          * The choices to render, in order. Also reflected as a JSON-serialized
-         * `options` attribute (Lit's default `Array` converter).
+         * `options` attribute (Lit's default `Array` converter), left out while
+         * empty so an SSR framework doesn't see an attribute it never rendered.
          * @default []
          */
         this.options = [];
@@ -106,6 +117,13 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Stretches the group to 100% of its parent's width, dividing that width
+         * equally between every choice instead of sizing to content. A label
+         * that doesn't fit its share makes the row overflow rather than shrink.
+         * @default false
+         */
+        this.full = false;
         /**
          * Keeps the indicator aligned when the track is resized (a responsive
          * layout change, a custom font loading in, ...) without a value/options
@@ -125,6 +143,14 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
          * @internal
          */
         _EunomiaToggleGroup_hasSeededInitialValue.set(this, false);
+        /**
+         * Whether the initial selection has been painted once. Until then, the
+         * choices and their icons skip their color transitions (see the
+         * `#scrollable:not(.settled)` rule), so the selected one appears in its
+         * final state on load instead of fading in from the unselected color.
+         * @internal
+         */
+        this.settled = false;
         /**
          * Debounced wrapper around {@link moveIndicator}, used by the resize
          * observer so a burst of layout changes doesn't retrigger it constantly.
@@ -184,8 +210,15 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         __classPrivateFieldGet(this, _EunomiaToggleGroup_resizeObserver, "f")?.disconnect();
         super.disconnectedCallback?.();
     }
-    firstUpdated() {
-        this.settleAndSync(false);
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.settleAndSync(false)
+            .then(() => Promise.all((this.items ?? []).map((item) => this.whenItemReady(item))))
+            .then(() => {
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.settled = true;
+            }));
+        });
     }
     updated(_changedProperties) {
         super.updated(_changedProperties);
@@ -195,7 +228,8 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         if (_changedProperties.has("value") ||
             _changedProperties.has("options") ||
             _changedProperties.has("single") ||
-            _changedProperties.has("appearance")) {
+            _changedProperties.has("appearance") ||
+            _changedProperties.has("full")) {
             this.settleAndSync(true);
         }
         if (_changedProperties.has("disabled") && this.disabled) {
@@ -235,11 +269,12 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
      * @private
      */
     settleAndSync(animate) {
-        this.whenItemsReady().then(() => {
+        return this.whenItemsReady().then(() => {
             this.seedInitialValue();
             this.applyExclusiveDefault();
             this.syncItems();
             this.refreshIndicator(animate);
+            this.updateScroll();
         });
     }
     /**
@@ -345,6 +380,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
             item.checked = this.value.includes(item.value);
             item.toggleAttribute("exclusive", this.exclusive);
             item.setAttribute("appearance", this.appearance);
+            item.toggleAttribute("full", this.full);
         });
         if (this.exclusive) {
             this.applyRovingTabindex();
@@ -416,15 +452,52 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
      * @private
      */
     refreshIndicator(animate) {
-        if (!this.exclusive || this.appearance !== "default") {
+        if (!this.exclusive) {
             return;
         }
+        const settle = () => {
+            if (this.appearance === "default") {
+                this.moveIndicator(animate);
+            }
+            this.revealActive(animate);
+        };
         const active = this.entries.find((entry) => entry.value === this.value[0]);
         if (active && active.element.tagName !== "BUTTON") {
-            this.whenItemReady(active.element).then(() => this.moveIndicator(animate));
+            this.whenItemReady(active.element).then(settle);
+            return;
+        }
+        settle();
+    }
+    /**
+     * Scrolls the row just enough to bring the selected entry into view, once
+     * the group overflows its container, leaving room for the arrows.
+     *
+     * @param animate whether to scroll smoothly, or jump there instantly.
+     * @private
+     */
+    revealActive(animate) {
+        const track = this.trackEl;
+        const active = this.entries.find((entry) => entry.value === this.value[0]);
+        if (!track || !active || track.scrollWidth <= track.clientWidth) {
             return;
         }
-        this.moveIndicator(animate);
+        const trackRect = track.getBoundingClientRect();
+        const rect = active.element.getBoundingClientRect();
+        const left = rect.left - trackRect.left - track.clientLeft;
+        const right = left + rect.width;
+        let delta = 0;
+        if (left < ARROW_CLEARANCE) {
+            delta = left - ARROW_CLEARANCE;
+        }
+        else if (right > track.clientWidth - ARROW_CLEARANCE) {
+            delta = right - (track.clientWidth - ARROW_CLEARANCE);
+        }
+        if (delta) {
+            track.scrollBy({
+                left: delta,
+                behavior: animate ? "smooth" : "instant",
+            });
+        }
     }
     /**
      * Slides the highlight behind the currently selected entry, resizing it
@@ -448,12 +521,16 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         }
         const trackRect = this.trackEl.getBoundingClientRect();
         const activeRect = active.element.getBoundingClientRect();
+        const offset = activeRect.left -
+            trackRect.left -
+            this.trackEl.clientLeft +
+            this.trackEl.scrollLeft;
         if (!animate) {
             indicator.style.transition = "none";
         }
         indicator.style.opacity = "1";
-        indicator.style.width = `${Math.floor(activeRect.width)}px`;
-        indicator.style.transform = `translateX(${Math.floor(activeRect.left - trackRect.left)}px)`;
+        indicator.style.width = `${activeRect.width}px`;
+        indicator.style.transform = `translateX(${offset}px)`;
         if (!animate) {
             indicator.getBoundingClientRect();
             indicator.style.transition = "";
@@ -543,52 +620,98 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         this.activateValue(next.value);
         next.element.focus();
     }
+    /**
+     * Whether a given overflow arrow should currently be visible : hidden
+     * when nothing overflows, and once scrolled all the way to that edge.
+     *
+     * @param arrowPosition the position of the arrow to check.
+     * @returns true if it should be visible, false otherwise.
+     * @private
+     */
+    arrowVisible(arrowPosition) {
+        if (!this.overflowState) {
+            return false;
+        }
+        const overflowPositions = [
+            "middle",
+            arrowPosition === "start" ? "end" : "start",
+        ];
+        return overflowPositions.includes(String(this.overflowState));
+    }
+    /**
+     * The row mixes internal `<button>`s (`options`) with slotted items, so the
+     * mixin's slot-based measurement can't see every choice : compares the
+     * scrollable's own sizes instead.
+     * @protected
+     */
+    isOnOverflow() {
+        const el = this.trackEl;
+        return !!el && el.scrollWidth > el.clientWidth;
+    }
     render() {
         const exclusive = this.exclusive;
         const showIndicator = exclusive && this.appearance === "default";
         return html `
-      <div
-        id="track"
-        role=${exclusive ? "radiogroup" : "group"}
-        part="track"
-        aria-label=${this.ariaLabel ?? nothing}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        @keydown=${(event) => this.handleKeydown(event)}
-      >
-        ${showIndicator
+      <div id="scrollable-wrapper">
+        <div
+          id="scrollable"
+          class=${classMap({ settled: this.settled })}
+          role=${exclusive ? "radiogroup" : "group"}
+          part="track"
+          aria-label=${this.ariaLabel ?? nothing}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          @keydown=${(event) => this.handleKeydown(event)}
+          @scroll=${this.updateScroll}
+        >
+          ${showIndicator
             ? html `<span
-              id="indicator"
-              part="indicator"
-              aria-hidden="true"
-            ></span>`
+                id="indicator"
+                part="indicator"
+                aria-hidden="true"
+              ></span>`
             : nothing}
-        ${this.options.map((option, index) => {
+          ${this.options.map((option, index) => {
             const checked = this.value.includes(option.value);
             const iconOnly = !!option.icon && !option.showLabel;
             return html `
-            <button
-              type="button"
-              class=${classMap({ active: checked, "icon-only": iconOnly })}
-              data-value=${option.value}
-              data-variant=${ifDefined(option.variant)}
-              role=${exclusive ? "radio" : "checkbox"}
-              aria-checked=${checked ? "true" : "false"}
-              aria-label=${ifDefined(iconOnly ? option.label : undefined)}
-              title=${ifDefined(iconOnly ? option.label : undefined)}
-              tabindex=${ifDefined(exclusive
+              <button
+                type="button"
+                class=${classMap({ active: checked, "icon-only": iconOnly })}
+                data-value=${option.value}
+                data-color=${ifDefined(option.color)}
+                role=${exclusive ? "radio" : "checkbox"}
+                aria-checked=${checked ? "true" : "false"}
+                aria-label=${ifDefined(iconOnly ? option.label : undefined)}
+                title=${ifDefined(iconOnly ? option.label : undefined)}
+                tabindex=${ifDefined(exclusive
                 ? this.exclusiveTabIndex(option.value, index)
                 : undefined)}
-              ?disabled=${this.disabled}
-              @click=${() => this.activateValue(option.value)}
-            >
-              ${option.icon
+                ?disabled=${this.disabled}
+                @click=${() => this.activateValue(option.value)}
+              >
+                ${option.icon
                 ? html `<eun-icon name=${option.icon} size="16"></eun-icon>`
                 : nothing}
-              ${iconOnly ? nothing : option.label}
-            </button>
-          `;
+                ${iconOnly ? nothing : option.label}
+              </button>
+            `;
         })}
-        <slot @slotchange=${this.handleSlotChange}></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div id="arrows">
+          <arrow-container
+            class=${classMap({ visible: this.arrowVisible("start") })}
+            @click=${this.scrollItem("back")}
+          >
+            <eun-icon name="chevron_left"></eun-icon>
+          </arrow-container>
+          <arrow-container
+            class=${classMap({ visible: this.arrowVisible("end") })}
+            @click=${this.scrollItem("front")}
+          >
+            <eun-icon name="chevron_right"></eun-icon>
+          </arrow-container>
+        </div>
       </div>
     `;
     }
@@ -604,10 +727,22 @@ _EunomiaToggleGroup_hasSeededInitialValue = new WeakMap();
  */
 EunomiaToggleGroup.styles = [toggleGroupStyles];
 __decorate([
-    property({ type: Array, reflect: true })
+    property({
+        type: Array,
+        reflect: true,
+        converter: {
+            toAttribute: (value) => value?.length ? JSON.stringify(value) : null,
+        },
+    })
 ], EunomiaToggleGroup.prototype, "options", void 0);
 __decorate([
-    property({ type: Array, reflect: true })
+    property({
+        type: Array,
+        reflect: true,
+        converter: {
+            toAttribute: (value) => value?.length ? JSON.stringify(value) : null,
+        },
+    })
 ], EunomiaToggleGroup.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -615,15 +750,21 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], EunomiaToggleGroup.prototype, "appearance", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaToggleGroup.prototype, "full", void 0);
 __decorate([
     queryAssignedElements()
 ], EunomiaToggleGroup.prototype, "items", void 0);
 __decorate([
-    query("#track")
+    query("#scrollable")
 ], EunomiaToggleGroup.prototype, "trackEl", void 0);
 __decorate([
     query("#indicator")
 ], EunomiaToggleGroup.prototype, "indicatorEl", void 0);
+__decorate([
+    state()
+], EunomiaToggleGroup.prototype, "settled", void 0);
 EunomiaToggleGroup = __decorate([
     customElement(EunomiaToggleGroupTagName)
 ], EunomiaToggleGroup);

package/dist/components/action/toggle/toggle-group.styles.d.ts

@@ -2,17 +2,19 @@
  * Base style for the toggle group component.
  *
  * Custom css variables:
- * [--toggle-group-background] - Set a custom background color for the track ; ignored once `appearance` isn't `default`
- * [--toggle-group-border-color] - Set a custom border color for the track ; also the per-option border color at rest in `outline` appearance
+ * [--toggle-group-background] - Set a custom background color for the track, for every appearance (transparent by default in `outline`/`flat`)
+ * [--toggle-group-border-color] - Set a custom border color for the track in `default` appearance, and for each option's border at rest in `outline` and `flat` appearance
  * [--toggle-group-color] - Set a custom text color for unselected options
- * [--toggle-group-active-background] - Set a custom background color for selected options (and the sliding indicator, in exclusive mode) in `default` appearance ; also the `primary` variant's selected color in `outline`/`flat` appearance
- * [--toggle-group-active-color] - Set a custom text color for selected options in `default` appearance ; ignored in `outline`/`flat` appearance
+ * [--toggle-group-active-background] - Set a custom background color for selected options (and the sliding indicator, in exclusive mode) in `default` appearance ; in `outline`/`flat` appearance, the selected color of every option, over its own color
+ * [--toggle-group-active-color] - Set a custom text color for selected options, for every appearance
  * [--toggle-group-border-radius] - Set a custom border radius for the track and its options
  * [--toggle-group-gap] - Set a custom gap between the options
  * [--toggle-group-padding] - Set a custom padding for the track ; also used as the indicator's inset, so it stays flush with the track's edge. Ignored once `appearance` isn't `default`
- * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, in `default` appearance ; ignored in `outline`/`flat` appearance, where hover (and keyboard focus) text color always follows the option's own variant color instead
+ * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, for every appearance
  * [--toggle-group-hover-background] - Set a custom background color on hover state, for an unselected option ; transparent by default. Applies regardless of `appearance`
+ * [--toggle-group-box-shadow] - Set a custom box shadow on the track itself, for every appearance, none by default
  * [--toggle-group-shadow] - Set a custom box shadow on every option (and the sliding indicator, in exclusive mode), none by default
  * [--toggle-group-shadow-hover] - Set a custom box shadow on hover state, for an unselected option ; falls back to `--toggle-group-shadow`
+ * [--toggle-group-arrows-color] - Set a custom background color the overflow arrows fade out to, once the group overflows its container ; defaults to the track color laid over `--eun-surface-color`, so set it when the group sits on another background
  */
 export declare const toggleGroupStyles: import("lit").CSSResult;