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

package/dist/i18n/en.js

@@ -6,7 +6,15 @@
  * silent runtime fallback.
  */
 export const en = {
+    common: {
+        close: "Close",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        noValue: "No value set",
+        save: "Save",
+    },
     datePicker: {
+        openCalendar: "Open calendar",
         previousMonth: "Previous month",
         chooseMonthYear: "Choose month and year",
         nextMonth: "Next month",
@@ -19,6 +27,11 @@ export const en = {
         amPm: "AM/PM",
         hour: "Hour",
         minute: "Minute",
+        day: "Day",
+        month: "Month",
+        year: "Year",
+        startDate: "Start date",
+        endDate: "End date",
         heading: {
             day: { single: "Select a date", range: "Select a date range" },
             month: { single: "Select a month", range: "Select a month range" },
@@ -31,6 +44,7 @@ export const en = {
         },
     },
     timePicker: {
+        openClock: "Open clock",
         amPm: "AM/PM",
         hour: "Hour",
         minute: "Minute",
@@ -40,14 +54,23 @@ export const en = {
         mustBeAtOrBefore: (time) => `Time must be at or before ${time}`,
     },
     scheduler: {
+        previous: "Previous period",
+        next: "Next period",
         calendarView: "Calendar view",
     },
     carousel: {
         ofTotal: (index, total) => `${index} of ${total}`,
         slideNavigation: "Slide navigation",
+        previous: "Previous slide",
+        next: "Next slide",
         goToSlide: (index, total) => `Go to slide ${index} of ${total}`,
     },
     imageCarousel: {
+        gallery: "Image gallery",
+        previous: "Previous image",
+        next: "Next image",
+        expand: "View full-size image",
+        lightbox: "Image viewer",
         selectImage: "Select image",
         showImage: (index, total) => `Show image ${index} of ${total}`,
         imageNavigation: "Image navigation",
@@ -57,7 +80,83 @@ export const en = {
     chip: {
         remove: "Remove",
     },
+    passwordStrength: {
+        label: "Password strength",
+        levels: ["Weak", "Fair", "Good", "Strong"],
+        caption: (label) => `${label}:`,
+    },
+    infiniteList: {
+        loadingMore: "Loading more items…",
+        itemsLoaded: (count) => `${count} more item${count > 1 ? "s" : ""} loaded`,
+    },
+    table: {
+        loadingMore: "Loading more rows…",
+        selected: "selected",
+        selectAll: "Select all",
+        deselectAll: "Deselect all",
+        selectAllRows: "Select all rows",
+        deselectAllRows: "Deselect all rows",
+        selectRow: "Select row",
+        selectionActions: "Selection actions",
+        clearSelection: "Clear selection",
+        rowActions: "Row actions",
+        rowsLoaded: (count) => `${count} more row${count > 1 ? "s" : ""} loaded`,
+    },
     link: {
         opensInNewTab: "opens in a new tab",
     },
+    input: {
+        clear: "Clear field",
+        showPassword: "Show password",
+        hidePassword: "Hide password",
+    },
+    search: {
+        panel: "Search",
+    },
+    counter: {
+        increment: "Increase value",
+        decrement: "Decrease value",
+    },
+    inputFile: {
+        remove: "Remove file",
+        select: "Select file",
+        open: "Open in a new tab",
+    },
+    inputPhone: {
+        selectCountry: "Select a country",
+    },
+    colorPicker: {
+        noColor: "No color selected",
+    },
+    pagination: {
+        previous: "Previous page",
+        next: "Next page",
+        first: "First page",
+        last: "Last page",
+        page: "Page",
+    },
+    sidebar: {
+        expand: "Expand sidebar",
+        collapse: "Collapse sidebar",
+        resize: "Resize sidebar",
+    },
+    toolbar: {
+        menuOpen: "Open menu",
+        menuClose: "Close menu",
+        menu: "Menu",
+    },
+    rating: {
+        label: "Rating",
+        valueText: (value, max) => `${value} out of ${max}`,
+        summary: (label, valueText) => `${label}: ${valueText}`,
+        noValue: "Not rated",
+        clear: "Clear rating",
+    },
+    validation: {
+        valueMissing: "This field is required",
+        tooShort: (min, length) => `Please lengthen this text to ${min} characters or more (you are currently using ${length} characters).`,
+        tooLong: (max, length) => `Please shorten this text to ${max} characters or less (you are currently using ${length} characters).`,
+        invalidDate: "Enter a valid date",
+        invalidTime: "Enter a valid time",
+    },
 };

package/dist/i18n/fr.js

@@ -4,7 +4,15 @@
  * error here, not a silent fallback to English at runtime.
  */
 export const fr = {
+    common: {
+        close: "Fermer",
+        cancel: "Annuler",
+        confirm: "Confirmer",
+        save: "Enregistrer",
+        noValue: "Aucune valeur",
+    },
     datePicker: {
+        openCalendar: "Ouvrir le calendrier",
         previousMonth: "Mois précédent",
         chooseMonthYear: "Choisir le mois et l'année",
         nextMonth: "Mois suivant",
@@ -17,6 +25,11 @@ export const fr = {
         amPm: "AM/PM",
         hour: "Heure",
         minute: "Minute",
+        day: "Jour",
+        month: "Mois",
+        year: "Année",
+        startDate: "Date de début",
+        endDate: "Date de fin",
         heading: {
             day: {
                 single: "Sélectionner une date",
@@ -31,8 +44,6 @@ export const fr = {
                 range: "Sélectionner une plage d'années",
             },
         },
-        // French keeps the article in both contexts, unlike English's shorter
-        // "Select date" — same phrasing as `heading` above.
         modalPreview: {
             day: {
                 single: "Sélectionner une date",
@@ -49,6 +60,7 @@ export const fr = {
         },
     },
     timePicker: {
+        openClock: "Ouvrir l'horloge",
         amPm: "AM/PM",
         hour: "Heure",
         minute: "Minute",
@@ -58,14 +70,23 @@ export const fr = {
         mustBeAtOrBefore: (time) => `L'heure doit être à ${time} ou avant`,
     },
     scheduler: {
+        previous: "Période précédente",
+        next: "Période suivante",
         calendarView: "Vue du calendrier",
     },
     carousel: {
         ofTotal: (index, total) => `${index} sur ${total}`,
         slideNavigation: "Navigation des diapositives",
+        previous: "Diapositive précédente",
+        next: "Diapositive suivante",
         goToSlide: (index, total) => `Aller à la diapositive ${index} sur ${total}`,
     },
     imageCarousel: {
+        gallery: "Galerie d'images",
+        previous: "Image précédente",
+        next: "Image suivante",
+        expand: "Voir l'image en taille réelle",
+        lightbox: "Visionneuse d'images",
         selectImage: "Sélectionner une image",
         showImage: (index, total) => `Afficher l'image ${index} sur ${total}`,
         imageNavigation: "Navigation des images",
@@ -75,7 +96,87 @@ export const fr = {
     chip: {
         remove: "Retirer",
     },
+    passwordStrength: {
+        label: "Robustesse du mot de passe",
+        levels: ["Faible", "Moyen", "Bon", "Fort"],
+        caption: (label) => `${label}\u00A0:`,
+    },
+    infiniteList: {
+        loadingMore: "Chargement d'autres éléments…",
+        itemsLoaded: (count) => count > 1
+            ? `${count} éléments supplémentaires chargés`
+            : `${count} élément supplémentaire chargé`,
+    },
+    table: {
+        loadingMore: "Chargement d'autres lignes…",
+        selected: "sélectionnée(s)",
+        selectAll: "Tout sélectionner",
+        deselectAll: "Tout désélectionner",
+        selectAllRows: "Sélectionner toutes les lignes",
+        deselectAllRows: "Désélectionner toutes les lignes",
+        selectRow: "Sélectionner la ligne",
+        selectionActions: "Actions de sélection",
+        clearSelection: "Vider la sélection",
+        rowActions: "Actions de la ligne",
+        rowsLoaded: (count) => count > 1
+            ? `${count} lignes supplémentaires chargées`
+            : `${count} ligne supplémentaire chargée`,
+    },
     link: {
         opensInNewTab: "ouvre dans un nouvel onglet",
     },
+    input: {
+        clear: "Effacer le champ",
+        showPassword: "Afficher le mot de passe",
+        hidePassword: "Masquer le mot de passe",
+    },
+    search: {
+        panel: "Rechercher",
+    },
+    counter: {
+        increment: "Augmenter la valeur",
+        decrement: "Diminuer la valeur",
+    },
+    inputFile: {
+        remove: "Retirer le fichier",
+        select: "Sélectionner un fichier",
+        open: "Ouvrir dans un nouvel onglet",
+    },
+    inputPhone: {
+        selectCountry: "Sélectionner un pays",
+    },
+    colorPicker: {
+        noColor: "Aucune couleur sélectionnée",
+    },
+    pagination: {
+        previous: "Page précédente",
+        next: "Page suivante",
+        first: "Première page",
+        last: "Dernière page",
+        page: "Page",
+    },
+    sidebar: {
+        expand: "Déplier la barre latérale",
+        collapse: "Replier la barre latérale",
+        resize: "Redimensionner la barre latérale",
+    },
+    toolbar: {
+        menuOpen: "Ouvrir le menu",
+        menuClose: "Fermer le menu",
+        menu: "Menu",
+    },
+    rating: {
+        label: "Note",
+        valueText: (value, max) => `${value} sur ${max}`,
+        summary: (label, valueText) => `${label}\u00A0: ${valueText}`,
+        noValue: "Non noté",
+        clear: "Effacer la note",
+    },
+    validation: {
+        valueMissing: "Ce champ est obligatoire",
+        tooShort: (min, length) => `Saisissez au moins ${min} caractères (actuellement ${length}).`,
+        tooLong: (max, length) => `Saisissez au plus ${max} caractères (actuellement ${length}).`,
+        invalidDate: "Saisissez une date valide",
+        invalidTime: "Saisissez une heure valide",
+    },
 };

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.
 export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export type { EunomiaIconName, EunomiaIconType, } from "./components/content/icon/icon.type.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
+export { EunomiaDescriptionList, EunomiaDescriptionListTagName, } from "./components/content/description-list/description-list.js";
+export type { EunomiaDescriptionListAlign, EunomiaDescriptionListLayout, } from "./components/content/description-list/description-list.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export type { EunomiaChipColor, EunomiaChipAppearance, EunomiaChipSeverity, EunomiaChipSize, EunomiaChipAvatarShape, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";
@@ -41,8 +43,6 @@ export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigatio
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export type { EunomiaCarouselLayout } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
-export type { EunomiaBreadcrumbItemData } from "./components/navigation/breadcrumb/breadcrumb.js";
-export { EunomiaBreadcrumbItem, EunomiaBreadcrumbItemTagName, } from "./components/navigation/breadcrumb/breadcrumb-item.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export type { EunomiaStepperItemState, EunomiaStepperOrientation, EunomiaStepperStepData, EunomiaStepperSubstepData, EunomiaStepperVariant, } from "./components/navigation/stepper/stepper.js";
@@ -83,6 +83,8 @@ export { EunomiaColorPicker, EunomiaColorPickerTagName, } from "./components/for
 export { EunomiaInputFile, EunomiaInputFileTagName, } from "./components/form/input-file/input-file.js";
 export type { EunomiaInputFileKind } from "./components/form/input-file/input-file.js";
 export { EunomiaSlider, EunomiaSliderTagName, } from "./components/form/slider/slider.js";
+export { EunomiaRating, EunomiaRatingTagName, } from "./components/form/rating/rating.js";
+export type { EunomiaRatingStep } from "./components/form/rating/rating.js";
 export { EunomiaLoader, EunomiaLoaderTagName, } from "./components/loader/loader/loader.js";
 export type { EunomiaLoaderVariant } from "./components/loader/loader/loader.js";
 export { EunomiaSkeleton, EunomiaSkeletonTagName, } from "./components/loader/skeleton/skeleton.js";
@@ -94,17 +96,11 @@ export type { EunomiaSchedulerEventAppearance } from "./features/scheduler/sched
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
 export type { EunomiaSchedulerEvent, EunomiaSchedulerEventColor, EunomiaSchedulerEventPriority, EunomiaSchedulerGuest, EunomiaSchedulerGuestStatus, EunomiaSchedulerView, } from "./features/scheduler/shared/scheduler.types.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
-export { EunomiaTableHeader, EunomiaTableHeaderTagName, } from "./features/table/table-header/table-header.js";
-export { EunomiaTableColumn, EunomiaTableColumnTagName, } from "./features/table/table-column/table-column.js";
-export type { EunomiaTableColumnSort } from "./features/table/table-column/table-column.js";
-export { EunomiaTableItem, EunomiaTableItemTagName, } from "./features/table/table-item/table-item.js";
-export { EunomiaTableCell, EunomiaTableCellTagName, } from "./features/table/table-cell/table-cell.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
-export { EunomiaTableSkeletonRow, EunomiaTableSkeletonRowTagName, } from "./features/table/table-skeleton-row/table-skeleton-row.js";
-export type { EunomiaTableAction, EunomiaTableColumnDef, EunomiaTableRowButtonActionDef, EunomiaTableRowDropdownActionDef, EunomiaTableRowActionDef, } from "./features/table/table/table.types.js";
+export type { EunomiaTableAction, EunomiaTableColumnDef, EunomiaTableColumnSort, EunomiaTableRowButtonActionDef, EunomiaTableRowDropdownActionDef, EunomiaTableRowActionDef, } from "./features/table/table/table.types.js";
 export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
-export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
+export { EUNOMIA_BREAKPOINTS, mediaBelow, mediaFrom } from "./breakpoints.js";
 export type { EunomiaBreakpoint } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export type { Dictionary } from "./i18n/index.js";

package/dist/index.js

@@ -28,9 +28,10 @@
 // `buildThemeCss` is its pure counterpart, returning the same tokens as a
 // stylesheet so an SSR app can ship the brand in the HTML itself instead
 // of flashing the base theme until `initializeTheme` runs after hydration.
-// `EUNOMIA_BREAKPOINTS` is exported so a consumer's own responsive layout
-// code can switch at the exact same pixel widths the components already
-// react to internally, instead of guessing or duplicating those numbers.
+// `EUNOMIA_BREAKPOINTS`, `mediaBelow` and `mediaFrom` are exported so a
+// consumer's own responsive code switches at the exact same widths the
+// components react to internally. They're also published on their own as
+// the `./breakpoints.js` subpath, which registers no component.
 export { EunomiaAnimate, EunomiaAnimateTagName, } from "./components/layout/animate/animate.js";
 export { EunomiaInfiniteList, EunomiaInfiniteListTagName, } from "./components/layout/infinite-list/infinite-list.js";
 export { EunomiaDivider, EunomiaDividerTagName, } from "./components/layout/divider/divider.js";
@@ -44,6 +45,7 @@ export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/act
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
 export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
+export { EunomiaDescriptionList, EunomiaDescriptionListTagName, } from "./components/content/description-list/description-list.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";
 export { EunomiaCollapse, EunomiaCollapseTagName, } from "./components/content/collapse/collapse.js";
@@ -60,7 +62,6 @@ export { EunomiaTab, EunomiaTabTagName, } from "./components/navigation/tabs/tab
 export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigation/tabs/tab-panel/tab-panel.js";
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
-export { EunomiaBreadcrumbItem, EunomiaBreadcrumbItemTagName, } from "./components/navigation/breadcrumb/breadcrumb-item.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export { EunomiaStep, EunomiaStepTagName, } from "./components/navigation/stepper/step.js";
@@ -89,6 +90,7 @@ export { EunomiaSelect, EunomiaSelectTagName, } from "./components/form/select/s
 export { EunomiaColorPicker, EunomiaColorPickerTagName, } from "./components/form/color-picker/color-picker.js";
 export { EunomiaInputFile, EunomiaInputFileTagName, } from "./components/form/input-file/input-file.js";
 export { EunomiaSlider, EunomiaSliderTagName, } from "./components/form/slider/slider.js";
+export { EunomiaRating, EunomiaRatingTagName, } from "./components/form/rating/rating.js";
 export { EunomiaLoader, EunomiaLoaderTagName, } from "./components/loader/loader/loader.js";
 export { EunomiaSkeleton, EunomiaSkeletonTagName, } from "./components/loader/skeleton/skeleton.js";
 export { EunomiaScheduler, EunomiaSchedulerTagName, } from "./features/scheduler/scheduler/scheduler.js";
@@ -96,15 +98,10 @@ export { EunomiaCalendar, EunomiaCalendarTagName, } from "./features/scheduler/c
 export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./features/scheduler/scheduler-event/scheduler-event.js";
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
-export { EunomiaTableHeader, EunomiaTableHeaderTagName, } from "./features/table/table-header/table-header.js";
-export { EunomiaTableColumn, EunomiaTableColumnTagName, } from "./features/table/table-column/table-column.js";
-export { EunomiaTableItem, EunomiaTableItemTagName, } from "./features/table/table-item/table-item.js";
-export { EunomiaTableCell, EunomiaTableCellTagName, } from "./features/table/table-cell/table-cell.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
-export { EunomiaTableSkeletonRow, EunomiaTableSkeletonRowTagName, } from "./features/table/table-skeleton-row/table-skeleton-row.js";
 export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
-export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
+export { EUNOMIA_BREAKPOINTS, mediaBelow, mediaFrom } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export { buildPalette, buildTints, buildThemeCss, initializeTheme, } from "./utils/theme-generator.utils.js";
 export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, parseInlineNodes, RICH_TEXT_COLORS, splitAlign, toHtml, toPlainText, } from "./utils/rich-text.utils.js";

package/dist/mixins/button.mixin.js

@@ -36,7 +36,8 @@ export const ButtonMixin = (superClass) => {
              */
             this.fixedColor = false;
             /**
-             * The button size.
+             * The button size. The default isn't reflected, so an SSR framework
+             * doesn't see an attribute it never rendered.
              * @default "m"
              */
             this.size = "m";
@@ -171,7 +172,7 @@ export const ButtonMixin = (superClass) => {
         property({ type: Boolean, reflect: true, attribute: "fixed-color" })
     ], ButtonMixinClass.prototype, "fixedColor", void 0);
     __decorate([
-        property({ reflect: true })
+        property({ reflect: true, useDefault: true })
     ], ButtonMixinClass.prototype, "size", void 0);
     __decorate([
         property({ type: Boolean, reflect: true })

package/dist/mixins/check.mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from "lit/decorators.js";
+import { hasErrorDisplayChange } from "./form.mixin.js";
 import { ChangeEvent } from "../events/change.event.js";
 /**
  * Mixin adding "checkable" behavior to a component.
@@ -29,6 +30,17 @@ export const CheckMixin = (superClass) => {
              * @default true
              */
             this.checkable = true;
+            /**
+             * The host is the control, so its hint or error goes on its own
+             * `aria-description`.
+             * @internal
+             */
+            this.descriptionOnHost = true;
+            /**
+             * Every change is a complete choice, so its error shows right away.
+             * @internal
+             */
+            this.errorOnChange = true;
             /**
              * Overrides `ValidatorsMixin`'s own `required` check, which validates
              * emptiness of `this.value` — meaningless here, since a checkable
@@ -47,7 +59,7 @@ export const CheckMixin = (superClass) => {
                 if (this.required && !this.checked) {
                     return {
                         validity: { valueMissing: true },
-                        message: "Field value is missing",
+                        message: this.validationDictionary.validation.valueMissing,
                     };
                 }
                 return { validity: {} };
@@ -98,10 +110,8 @@ export const CheckMixin = (superClass) => {
                 this.setAttribute("aria-checked", String(this.checked));
                 this.updateInternals();
             }
-            if (_changedProperties.has("valid") ||
-                _changedProperties.has("hideError") ||
-                _changedProperties.has("disabled")) {
-                this.setAttribute("aria-invalid", String(!this.hideError && !this.disabled && !this.valid));
+            if (hasErrorDisplayChange(_changedProperties)) {
+                this.setAttribute("aria-invalid", String(this.showError));
             }
             if (_changedProperties.has("required")) {
                 this.setAttribute("aria-required", String(this.required));
@@ -121,7 +131,6 @@ export const CheckMixin = (superClass) => {
          * - Prevents propagation.
          * - Ignores action if `disabled` or `readonly`.
          * - Toggles the `checked` state.
-         * - Updates ARIA attributes (`aria-description`).
          * - Dispatches a custom `ChangeEvent`.
          *
          * @param event The triggered mouse or keyboard event
@@ -135,15 +144,6 @@ export const CheckMixin = (superClass) => {
             this.checked = !this.checked;
             this.updateInternals();
             this.checkValidity(this.checked);
-            if (this.description) {
-                const attribute = this.description instanceof Array
-                    ? this.description.join(",")
-                    : this.description;
-                this.setAttribute("aria-description", attribute);
-            }
-            else {
-                this.removeAttribute("aria-description");
-            }
             this.dispatchEvent(new ChangeEvent(this.checked));
         }
         /**

package/dist/mixins/disabled.mixin.d.ts

@@ -13,6 +13,11 @@ export declare class DisabledMixinInterface {
  * - `tabindex` (to prevent focus when disabled),
  * - `aria-disabled` for accessibility, only present while disabled.
  *
+ * A component whose host is the control itself (a checkbox, a button) gets
+ * `tabindex="0"` while enabled. One rendering its own focusable controls
+ * inside its shadow root overrides {@link hostTabStop} to `false`, so the
+ * host never becomes an extra, empty stop in front of them.
+ *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
  */

package/dist/mixins/disabled.mixin.js

@@ -12,6 +12,11 @@ import { property } from "lit/decorators.js";
  * - `tabindex` (to prevent focus when disabled),
  * - `aria-disabled` for accessibility, only present while disabled.
  *
+ * A component whose host is the control itself (a checkbox, a button) gets
+ * `tabindex="0"` while enabled. One rendering its own focusable controls
+ * inside its shadow root overrides {@link hostTabStop} to `false`, so the
+ * host never becomes an extra, empty stop in front of them.
+ *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
  */
@@ -26,6 +31,13 @@ export const DisabledMixin = (superClass) => {
              */
             this.disabled = false;
         }
+        /**
+         * Whether the host itself is a tab stop while enabled. `false` for a
+         * component whose focusable controls live inside its shadow root.
+         */
+        get hostTabStop() {
+            return true;
+        }
         /**
          * LitElement lifecycle method.
          * Called when reactive properties are updated.
@@ -35,7 +47,15 @@ export const DisabledMixin = (superClass) => {
         updated(_changedProperties) {
             super.updated(_changedProperties);
             if (_changedProperties.has("disabled")) {
-                this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+                if (this.disabled) {
+                    this.setAttribute("tabindex", "-1");
+                }
+                else if (this.hostTabStop) {
+                    this.setAttribute("tabindex", "0");
+                }
+                else {
+                    this.removeAttribute("tabindex");
+                }
                 if (this.disabled) {
                     this.setAttribute("aria-disabled", "true");
                 }

package/dist/mixins/editable.mixin.js

@@ -4,6 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 import { property } from "lit/decorators.js";
 import { CommitEvent } from "../events/commit.event.js";
 /**
@@ -22,9 +27,11 @@ import { CommitEvent } from "../events/commit.event.js";
  * @returns A class extending the provided superclass with editable behavior.
  */
 export const EditableMixin = (superClass) => {
+    var _EditableMixinClass_instances, _EditableMixinClass_leaveEdit, _EditableMixinClass_ownsFocus;
     class EditableMixinClass extends superClass {
         constructor() {
             super(...arguments);
+            _EditableMixinClass_instances.add(this);
             /**
              * Whether the field can switch between a static read display and an
              * editable one. When false, the field always renders as fully editable.
@@ -50,15 +57,19 @@ export const EditableMixin = (superClass) => {
         }
         /**
          * Confirms the current edit. Runs validation first; if it fails, the
-         * field stays in edit mode and the error is shown instead of committing.
-         * On success, dispatches a {@link CommitEvent} so consumers can persist
-         * the new value.
+         * field stays in edit mode, shows its error and gets the focus back
+         * instead of committing. On success, dispatches a {@link CommitEvent}
+         * so consumers can persist the new value.
          */
         confirmEdit() {
             if (!this.checkValidity(this.value)) {
+                this.validationRequested = true;
+                if (__classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_ownsFocus).call(this)) {
+                    this.focus();
+                }
                 return;
             }
-            this.editing = false;
+            __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_leaveEdit).call(this);
             this.dispatchEvent(new CommitEvent());
         }
         /**
@@ -67,9 +78,21 @@ export const EditableMixin = (superClass) => {
          */
         cancelEdit() {
             this.value = this.valueOnEditStart;
-            this.editing = false;
+            __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_leaveEdit).call(this);
         }
     }
+    _EditableMixinClass_instances = new WeakSet(), _EditableMixinClass_leaveEdit = function _EditableMixinClass_leaveEdit() {
+        const restoreFocus = __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_ownsFocus).call(this);
+        this.editing = false;
+        if (restoreFocus) {
+            void this.updateComplete.then(() => this.shadowRoot
+                ?.querySelector("#readonly-display")
+                ?.focus());
+        }
+    }, _EditableMixinClass_ownsFocus = function _EditableMixinClass_ownsFocus() {
+        const active = document.activeElement;
+        return (!active || active === document.body || this.matches(":focus-within"));
+    };
     __decorate([
         property({
             type: Boolean,

package/dist/mixins/field-appearance.mixin.js

@@ -20,13 +20,14 @@ export const FieldAppearanceMixin = (superClass) => {
             super(...arguments);
             /**
              * How the field's surface is drawn.
-             * By default, set to "outline".
+             * By default, set to "outline". The default isn't reflected, so an SSR
+             * framework doesn't see an attribute it never rendered.
              */
             this.appearance = "outline";
         }
     }
     __decorate([
-        property({ reflect: true })
+        property({ reflect: true, useDefault: true })
     ], FieldAppearanceMixinClass.prototype, "appearance", void 0);
     return FieldAppearanceMixinClass;
 };