@eunomia/elements 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/components/form/time-picker/time-picker-columns.js

@@ -73,8 +73,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelHour ?? "Hour",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase hour",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease hour",
+        incrementLabel: props.incrementLabel ?? "Increase hour",
+        decrementLabel: props.decrementLabel ?? "Decrease hour",
         min: hourMin,
         max: hourMax,
         current: display.hour,
@@ -89,8 +89,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelMinute ?? "Minute",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase minute",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease minute",
+        incrementLabel: props.incrementLabel ?? "Increase minute",
+        decrementLabel: props.decrementLabel ?? "Decrease minute",
         min: 0,
         max: 59,
         current: minute,
@@ -106,8 +106,8 @@ export function renderTimePickerColumns(props) {
             disabled,
             noAnimation,
             label: props.ariaLabelPeriod ?? "AM/PM",
-            ariaLabelIncrement: props.ariaLabelIncrement ?? "Toggle AM/PM",
-            ariaLabelDecrement: props.ariaLabelDecrement ?? "Toggle AM/PM",
+            incrementLabel: props.incrementLabel ?? "Toggle AM/PM",
+            decrementLabel: props.decrementLabel ?? "Toggle AM/PM",
             min: 0,
             max: 1,
             current: period === "AM" ? 0 : 1,
@@ -164,7 +164,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-up"
         tabindex="-1"
-        aria-label=${config.ariaLabelIncrement}
+        aria-label=${config.incrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(1)}
       >
@@ -194,7 +194,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-down"
         tabindex="-1"
-        aria-label=${config.ariaLabelDecrement}
+        aria-label=${config.decrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(-1)}
       >

package/dist/components/form/time-picker/time-picker.d.ts

@@ -5,6 +5,8 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -19,7 +21,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,
@@ -40,6 +42,8 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * under a labeled group.
  *
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -65,14 +69,15 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -98,6 +103,7 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-time-picker
@@ -186,14 +192,14 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
     applyLabel: string;
     /**
      * Label of the mobile modal's cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the trailing clock button.
-     * @default Open clock
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClock: string;
+    clockLabel?: string;
     /**
      * Placeholder shown in the empty hour segment.
      * @default hh
@@ -227,6 +233,15 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @internal
      */
     private isOpen;
+    constructor();
+    /**
+     * Submits the owning form on Enter in one of the field's segments, as a
+     * native time input does, since the browser never does it from a
+     * shadow root. Left alone while the panel is open, and on keys a
+     * segment already handles, such as Enter toggling the AM/PM segment.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     /**
      * Whether the mobile modal is open.
      * @internal
@@ -327,6 +342,12 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @returns validity state and optional message.
      */
     checkLocalValidators: () => Validity;
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Returns the first segment element to focus/anchor on validation errors.
      *

package/dist/components/form/time-picker/time-picker.js

@@ -12,6 +12,8 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -26,6 +28,7 @@ import { timePickerListStyles } from "./time-picker-list.styles.js";
 import { renderTimePickerList } from "./time-picker-list.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 import { mediaBelow } from "../../../breakpoints.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the time-picker component.
  */
@@ -36,7 +39,7 @@ export const EunomiaTimePickerTagName = "eun-time-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))))));
 /**
  * A time field entered across segmented numeric hour and minute inputs,
  * plus an AM/PM toggle segment at a 12-hour format, with a trailing clock
@@ -56,6 +59,8 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * under a labeled group.
  *
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -81,14 +86,15 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -114,13 +120,31 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-time-picker
  */
 let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
+    /**
+     * The default value applied on connection and form reset. Overrides the
+     * `defaultValue` accessor inherited from `FormMixin` only to swap its
+     * attribute converter — the mixin's generic one always splits
+     * `default-value` on commas, which would silently produce the wrong thing
+     * for a `Date` ; matches `eun-date-picker`'s identical override. The
+     * actual get/set logic (applying the default when the field resets)
+     * still comes from `FormMixin` itself, via `super`.
+     * @default-value-format an ISO 8601 date-time string
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The minute column's increment step, and which minute values the mobile
          * wheel enumerates (e.g. `15` only ever shows/lands on `:00`/`:15`/`:30`/
@@ -168,16 +192,6 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing clock button.
-         * @default Open clock
-         */
-        this.ariaLabelClock = "Open clock";
         /**
          * Placeholder shown in the empty hour segment.
          * @default hh
@@ -199,6 +213,25 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @internal
          */
         this.isOpen = false;
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native time input does, since the browser never does it from a
+         * shadow root. Left alone while the panel is open, and on keys a
+         * segment already handles, such as Enter toggling the AM/PM segment.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            const origin = event.composedPath()[0];
+            if (!form ||
+                this.isOpen ||
+                !(origin instanceof Element && origin.matches(".segment")) ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Whether the mobile modal is open.
          * @internal
@@ -411,23 +444,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                     break;
             }
         };
-    }
-    /**
-     * The default value applied on connection and form reset. Overrides the
-     * `defaultValue` accessor inherited from `FormMixin` only to swap its
-     * attribute converter — the mixin's generic one always splits
-     * `default-value` on commas, which would silently produce the wrong thing
-     * for a `Date` ; matches `eun-date-picker`'s identical override. The
-     * actual get/set logic (applying the default when the field resets)
-     * still comes from `FormMixin` itself, via `super`.
-     * @default-value-format an ISO 8601 date-time string
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     /**
      * Lifecycle hook called before an update, ahead of render. Keeps the
@@ -482,6 +499,14 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             this.setAttribute("aria-invalid", String(this.showError));
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the first segment element to focus/anchor on validation errors.
      *
@@ -905,7 +930,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <div
           class="segment-group"
           role="group"
-          aria-label=${this.label ?? "Time"}
+          aria-label=${this.label ?? this.dictionary.timePicker.time}
+          aria-describedby=${this.description?.length ? "description" : nothing}
         >
           ${order.map((kind, index) => {
             const previous = order[index - 1];
@@ -924,13 +950,13 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <button
           type="button"
           id="clock-trigger"
-          aria-label=${this.ariaLabelClock}
+          aria-label=${this.clockLabel ?? this.dictionary.timePicker.openClock}
           aria-haspopup=${this.panelMode === "list" ? "listbox" : "dialog"}
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
           @click=${this.handleTriggerClick}
         >
-          <eun-icon name="access_time" size="16"></eun-icon>
+          <eun-icon name="access_time"></eun-icon>
         </button>
       </div>
     `;
@@ -1035,7 +1061,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         ?open=${this.isModalOpen}
         .closeable=${false}
         confirm-label=${this.applyLabel}
-        cancel-label=${this.cancelLabel}
+        cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.dictionary.timePicker.selectATime}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -1053,7 +1079,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             id="cancel"
             @click=${() => this.modalEl?.cancel()}
           >
-            ${this.cancelLabel}
+            ${this.cancelLabel ?? this.dictionary.common.cancel}
           </eun-button>
           <eun-button id="confirm" @click=${() => this.modalEl?.confirm()}>
             ${this.applyLabel}
@@ -1113,8 +1139,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaTimePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-clock" })
-], EunomiaTimePicker.prototype, "ariaLabelClock", void 0);
+    property({ attribute: "clock-label" })
+], EunomiaTimePicker.prototype, "clockLabel", void 0);
 __decorate([
     property({ attribute: "hour-placeholder" })
 ], EunomiaTimePicker.prototype, "hourPlaceholder", void 0);

package/dist/components/form/time-picker/time-picker.styles.js

@@ -18,15 +18,15 @@ const timePicker = css `
     display: flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
-    width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
-    padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
-      var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    padding: var(--_paddingBlock) calc(var(--_defaultPaddingInline) / 2)
+      var(--_paddingBlock) var(--_defaultPaddingInline);
     outline: 1px solid transparent;
-    box-sizing: border-box;
+    box-sizing: content-box;
+    height: var(--_lineHeight);
     transition:
       border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
@@ -81,9 +81,10 @@ const timePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     overflow: visible;
@@ -109,6 +110,7 @@ const timePicker = css `
     padding-inline: 2px;
   }
   #clock-trigger {
+    --icon-size: min(16px, var(--_lineHeight));
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/components/layout/animate/animate.js

@@ -8,6 +8,7 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
 import { mediaBelow } from "../../../breakpoints.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the animate component.
  */
@@ -194,7 +195,7 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
  */
 EunomiaAnimate.styles = animateStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAnimate.prototype, "animation", void 0);
 __decorate([
     property({ type: Number })
@@ -209,7 +210,7 @@ __decorate([
     property({ type: Number, attribute: "mobile-delay" })
 ], EunomiaAnimate.prototype, "mobileDelay", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaAnimate.prototype, "once", void 0);
 __decorate([
     property({ type: Number })

package/dist/components/layout/animate/animate.styles.js

@@ -20,11 +20,11 @@ const base = css `
     transition-property: none;
   }
 
-  :host([animation="fade"]) {
+  :host(:is([animation="fade"], :not([animation]))) {
     opacity: 0;
     transition-property: opacity;
   }
-  :host([animation="fade"][in-view]) {
+  :host(:is([animation="fade"], :not([animation]))[in-view]) {
     opacity: 1;
   }
 

package/dist/components/layout/divider/divider.js

@@ -64,7 +64,7 @@ let EunomiaDivider = class EunomiaDivider extends LitElement {
  */
 EunomiaDivider.styles = dividerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDivider.prototype, "orientation", void 0);
 EunomiaDivider = __decorate([
     customElement(EunomiaDividerTagName)

package/dist/components/layout/divider/divider.styles.js

@@ -13,7 +13,7 @@ const base = css `
     display: block;
   }
 
-  :host([orientation="horizontal"]) {
+  :host(:is([orientation="horizontal"], :not([orientation]))) {
     width: 100%;
     height: 0;
     margin-block: var(--_spacing);

package/dist/components/loader/loader/loader.js

@@ -170,7 +170,7 @@ __decorate([
     property()
 ], EunomiaLoader.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "variant", void 0);
 __decorate([
     property({ hasChanged: () => false })
@@ -182,7 +182,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaLoader.prototype, "sticky", void 0);
 __decorate([
-    property({ attribute: "sticky-position", reflect: true })
+    property({ attribute: "sticky-position", reflect: true, useDefault: true })
 ], EunomiaLoader.prototype, "stickyPosition", void 0);
 EunomiaLoader = __decorate([
     customElement(EunomiaLoaderTagName)

package/dist/components/loader/loader/loader.styles.js

@@ -19,9 +19,9 @@ const base = css `
     font-size: var(--_size);
   }
 
-  :host([variant="dots"]) span,
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span,
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     border-radius: 50%;
     width: 0.5em;
     height: 0.5em;
@@ -30,22 +30,22 @@ const base = css `
     animation: eun-loader-fade 1.4s infinite ease-in-out;
     animation-fill-mode: both;
   }
-  :host([variant="dots"]) span {
+  :host(:is([variant="dots"], :not([variant]))) span {
     position: relative;
     margin: 0 0.75em;
     animation-delay: -0.16s;
   }
-  :host([variant="dots"]) span::before,
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::before,
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     content: "";
     position: absolute;
     top: 0;
   }
-  :host([variant="dots"]) span::before {
+  :host(:is([variant="dots"], :not([variant]))) span::before {
     left: -0.75em;
     animation-delay: -0.32s;
   }
-  :host([variant="dots"]) span::after {
+  :host(:is([variant="dots"], :not([variant]))) span::after {
     left: 0.75em;
   }
   @keyframes eun-loader-fade {
@@ -77,9 +77,9 @@ const base = css `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([variant="dots"]) span,
-    :host([variant="dots"]) span::before,
-    :host([variant="dots"]) span::after {
+    :host(:is([variant="dots"], :not([variant]))) span,
+    :host(:is([variant="dots"], :not([variant]))) span::before,
+    :host(:is([variant="dots"], :not([variant]))) span::after {
       animation-duration: 2.8s;
     }
     :host([variant="spinner"]) span {
@@ -140,7 +140,9 @@ const bar = css `
     z-index: var(--loader-bar-z-index, 10);
   }
 
-  :host([variant="bar"][sticky][sticky-position="top"]) {
+  :host(
+    [variant="bar"][sticky]:is([sticky-position="top"], :not([sticky-position]))
+  ) {
     top: var(--loader-bar-sticky-offset, 0);
   }
 

package/dist/components/loader/skeleton/skeleton.js

@@ -82,7 +82,7 @@ let EunomiaSkeleton = class EunomiaSkeleton extends LitElement {
  */
 EunomiaSkeleton.styles = skeletonStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSkeleton.prototype, "variant", void 0);
 __decorate([
     property()

package/dist/components/navigation/carousel/carousel.d.ts

@@ -64,10 +64,10 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
  * @prop {boolean} [showDots=true] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Defaults to Carousel, and is recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading
- * @prop {string} [ariaLabelPrevious] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @attr {string} [aria-label-previous] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
- * @prop {string} [ariaLabelNext] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
- * @attr {string} [aria-label-next] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
  * @fires {SlideChangeEvent} eunslidechange - Fired once the active slide settles on a new index
  * @cssprop [--carousel-visible-slides] - Sets how many slides are shown at once, overriding visibleSlides. Meant to be changed from your own media or container queries, so the slide count follows the available space without any script
  * @cssprop [--carousel-scroll-step] - Sets how many slides a previous, next, or dot click advances by, overriding scrollStep. Read again whenever the carousel resizes
@@ -170,8 +170,7 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * Fades the viewport's edges to hint there's more to scroll — hidden
      * automatically on whichever side is already at its scroll bound (never
      * shown on the left at the very start, or the right at the very end).
-     * On by default ; set the *property* to `false` to turn it off (see the
-     * Examples tab for the boolean-attribute caveat that applies here too).
+     * On by default ; `edge-fade="false"` turns it off.
      * @default true
      */
     edgeFade: boolean;
@@ -210,13 +209,13 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * dictionary when unset, so it follows `locale` automatically.
      * @default {i18n:carousel.previous}
      */
-    ariaLabelPrevious?: string;
+    previousLabel?: string;
     /**
      * Accessible label of the Next control. Resolved from the locale
      * dictionary when unset, so it follows `locale` automatically.
      * @default {i18n:carousel.next}
      */
-    ariaLabelNext?: string;
+    nextLabel?: string;
     /**
      * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
      * @internal
@@ -369,6 +368,29 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @private
      */
     private getTrackInset;
+    /**
+     * Whether the track lays out right to left. Slides then start from the
+     * track's right edge and `scrollLeft` runs from `0` down to negative
+     * values, so every scroll measurement goes through the logical helpers
+     * below instead of reading `left`/`scrollLeft` directly.
+     * @private
+     */
+    private isRtl;
+    /**
+     * How far the track has scrolled from its inline start, always positive
+     * whatever the direction.
+     * @private
+     */
+    private getScrollProgress;
+    /**
+     * Distance from the track's inline-start edge to a rect's own
+     * inline-start edge (`left` in LTR, `right` in RTL), positive toward the
+     * end of the track.
+     * @param rect the measured element's rect.
+     * @param trackRect the track's own rect.
+     * @private
+     */
+    private getInlineStartOffset;
     /**
      * The highest valid slide index a page can start on, without leaving
      * empty space at the end of the track. Measured from the slides' actual
@@ -563,7 +585,8 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
     private updateFromScrollPosition;
     /**
      * Handles keyboard navigation on the track : arrow keys page by
-     * `scrollStep`, Home/End jump to the bounds.
+     * `scrollStep`, Home/End jump to the bounds. Right to left, the arrows
+     * swap so each one still moves toward the side it points to.
      *
      * @param event the native keyboard event.
      * @private