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

package/dist/features/scheduler/scheduler-event/scheduler-event.js

@@ -27,7 +27,7 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * The accessible name still includes the time either way, only the
  * visual line disappears.
  *
- * There are two visual variants. Default renders an opaque tint, with
+ * There are three appearances. Default renders an opaque tint, with
  * color mixed toward the current theme's own surface color, automatically
  * light in light mode and dark in dark mode with no extra work needed.
  * Transparent mixes the same accent toward transparent instead, for a
@@ -41,7 +41,7 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @prop {Date} start - The event's start time, shown as the chip's compact time label
  * @prop {Date} [end] - The event's end time. Used only to build a fuller accessible name, such as "Team sync, 9:00 AM to 10:00 AM", never shown visually on the chip
  * @prop {string} [color='blue'] - The event's accent color : one of the six preset names (red/purple/yellow/blue/green/pink), each with its own tuned two-tone CSS, or a `#rrggbb` hex string for a fully custom color
- * @prop {'default' | 'transparent' | 'ghost'} [variant='default'] - The visual style to apply
+ * @prop {'default' | 'transparent' | 'ghost'} [appearance='default'] - How the chip's surface is drawn
  * @prop {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead, the title truncating with an ellipsis while the time never does, for the month view's single-day chips on desktop, where a cell is wide but not tall
  * @attr {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead
  * @prop {string} [locale] - The locale used to format the time label. Defaults to the runtime's own
@@ -52,8 +52,8 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @cssprop [--scheduler-event-bar-width] - Sets the width of the color bar
  * @cssprop [--scheduler-event-gap] - Sets the gap between the bar and the text
  * @cssprop [--scheduler-event-padding] - Sets the inner padding
- * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default variant's background
- * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent variant's background
+ * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default appearance's background
+ * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent appearance's background
  * @cssprop [--scheduler-event-title-color] - Sets the title text color
  * @cssprop [--scheduler-event-time-color] - Sets the time text color
  * @element eun-scheduler-event
@@ -75,10 +75,10 @@ let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSched
          */
         this.color = "blue";
         /**
-         * The visual style to apply.
+         * How the chip's surface is drawn.
          * @default default
          */
-        this.variant = "default";
+        this.appearance = "default";
         /**
          * `column` stacks the title above the time (two lines) ; `row` lays them
          * out side by side on one line instead, the title truncating with an
@@ -184,7 +184,7 @@ __decorate([
 ], EunomiaSchedulerEventCard.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
-], EunomiaSchedulerEventCard.prototype, "variant", void 0);
+], EunomiaSchedulerEventCard.prototype, "appearance", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaSchedulerEventCard.prototype, "direction", void 0);

package/dist/features/scheduler/scheduler-event/scheduler-event.styles.js

@@ -7,8 +7,8 @@ import { css } from "lit";
  * [--scheduler-event-bar-width] - Set a custom width for the color bar
  * [--scheduler-event-gap] - Set a custom gap between the bar and the text
  * [--scheduler-event-padding] - Set a custom inner padding
- * [--scheduler-event-opaque-tint] - Set a custom mix percentage for the `default` variant's background (mixed against the current theme's own `--eun-surface-color`, so it's automatically a light tint in light mode and a dark tint in dark mode)
- * [--scheduler-event-transparent-tint] - Set a custom mix percentage for the `transparent` variant's background (mixed against `transparent`)
+ * [--scheduler-event-opaque-tint] - Set a custom mix percentage for the `default` appearance's background (mixed against the current theme's own `--eun-surface-color`, so it's automatically a light tint in light mode and a dark tint in dark mode)
+ * [--scheduler-event-transparent-tint] - Set a custom mix percentage for the `transparent` appearance's background (mixed against `transparent`)
  * [--scheduler-event-title-color] - Set a custom title text color
  * [--scheduler-event-time-color] - Set a custom time text color
  */
@@ -74,7 +74,7 @@ const base = css `
       outline 0.2s ease-out;
   }
 
-  :host([variant="transparent"]) #chip {
+  :host([appearance="transparent"]) #chip {
     background: color-mix(
       in srgb,
       var(--_tintBase) var(--scheduler-event-transparent-tint, 22%),
@@ -82,12 +82,12 @@ const base = css `
     );
   }
 
-  :host([variant="ghost"]) #chip {
+  :host([appearance="ghost"]) #chip {
     background: transparent;
   }
 
-  :host([variant="ghost"]) #chip:hover,
-  :host([variant="ghost"]) #chip:hover {
+  :host([appearance="ghost"]) #chip:hover,
+  :host([appearance="ghost"]) #chip:hover {
     background: color-mix(
       in srgb,
       var(--_tintBase) var(--scheduler-event-transparent-tint, 22%),

package/dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.js

@@ -39,7 +39,7 @@ const PRIORITIES = [
     "high",
     "critical",
 ];
-const PRIORITY_VARIANT = {
+const PRIORITY_COLOR = {
     low: "success",
     high: "warning",
     critical: "critical",
@@ -651,7 +651,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             <eun-button
               appearance="default"
               id="guest-add-button"
-              variant="secondary"
+              color="secondary"
               aria-label=${this.addGuestLabel}
               @click=${this.handleAddGuestClick}
             >
@@ -710,7 +710,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             ${PRIORITIES.map((priority) => html `
                 <eun-toggle-item
                   value=${priority}
-                  variant=${ifDefined(PRIORITY_VARIANT[priority])}
+                  color=${ifDefined(PRIORITY_COLOR[priority])}
                 >
                   ${priorityLabel(priority)}
                 </eun-toggle-item>
@@ -741,7 +741,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             <div id="actions">
               ${this.event
                 ? html `
-                    <eun-button variant="critical" @click=${this.requestDelete}>
+                    <eun-button color="critical" @click=${this.requestDelete}>
                       ${this.deleteLabel}
                     </eun-button>
                   `
@@ -750,7 +750,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
               <eun-button appearance="ghost" @click=${this.handleCancelClick}>
                 ${this.cancelLabel}
               </eun-button>
-              <eun-button variant="primary" @click=${this.handleSaveClick}>
+              <eun-button color="primary" @click=${this.handleSaveClick}>
                 ${this.saveLabel}
               </eun-button>
             </div>

package/dist/features/scheduler/shared/scheduler-event-popover.js

@@ -104,14 +104,14 @@ export function renderEventPopover(props) {
         : html `
           <div class="event-popover-actions">
             <eun-button
-              variant="critical"
+              color="critical"
               size="s"
               appearance="outline"
               rounded
               @click=${onDelete}
               >${deleteLabel}</eun-button
             >
-            <eun-button variant="primary" size="s" rounded @click=${onEdit}
+            <eun-button color="primary" size="s" rounded @click=${onEdit}
               >${editLabel}</eun-button
             >
           </div>

package/dist/features/scheduler/shared/scheduler-hour-grid.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from "lit";
 import { EunomiaSchedulerEvent } from "./scheduler.types.js";
-import type { EunomiaSchedulerEventCardVariant } from "../scheduler-event/scheduler-event.js";
+import type { EunomiaSchedulerEventAppearance } from "../scheduler-event/scheduler-event.js";
 /**
  * Props for {@link renderHourGrid}.
  */
@@ -12,7 +12,7 @@ export interface HourGridProps {
     slotDuration: number;
     locale?: string;
     slotHeight: number;
-    eventVariant: EunomiaSchedulerEventCardVariant;
+    eventAppearance: EunomiaSchedulerEventAppearance;
     onSlotClick: (start: Date) => void;
     onEventClick: (event: EunomiaSchedulerEvent, domEvent: MouseEvent) => void;
     draggingEventId?: string | null;

package/dist/features/scheduler/shared/scheduler-hour-grid.js

@@ -102,7 +102,7 @@ export function renderHourGrid(props) {
                         .start=${slot.event.start}
                         .end=${slot.event.end}
                         color=${slot.event.color}
-                        variant=${props.eventVariant}
+                        appearance=${props.eventAppearance}
                         hide-time
                         @click=${(domEvent) => props.onEventClick(slot.event, domEvent)}
                       ></eun-scheduler-event>
@@ -139,7 +139,7 @@ export function renderHourGrid(props) {
  */
 /* eslint-disable lit-a11y/click-events-have-key-events */
 function renderDayColumn(day, props, now, hourCount) {
-    const { events, dayStartHour, dayEndHour, slotDuration, slotHeight, eventVariant, onSlotClick, onEventClick, draggingEventId, onEventDragStart, } = props;
+    const { events, dayStartHour, dayEndHour, slotDuration, slotHeight, eventAppearance, onSlotClick, onEventClick, draggingEventId, onEventDragStart, } = props;
     const gridStartMinutes = dayStartHour * 60;
     const gridEndMinutes = dayEndHour * 60;
     const dayEvents = timedEventsForDay(events, day);
@@ -210,7 +210,7 @@ function renderDayColumn(day, props, now, hourCount) {
               .start=${slot.event.start}
               .end=${slot.event.end}
               color=${slot.event.color}
-              variant=${eventVariant}
+              appearance=${eventAppearance}
               ?hide-time=${height < CONDENSED_HEIGHT_THRESHOLD}
               @click=${(domEvent) => onEventClick(slot.event, domEvent)}
             ></eun-scheduler-event>

package/dist/features/scheduler/shared/scheduler-month-view.d.ts

@@ -13,10 +13,10 @@ import { EunomiaSchedulerEvent } from "./scheduler.types.js";
 export declare const MONTH_EVENT_ROW_HEIGHT = 22;
 /**
  * Props for {@link renderSchedulerMonthView}. Deliberately has no
- * `eventVariant` field, unlike `HourGridProps` : month view always picks
- * its own bar variant itself (`ghost` unless the event spans multiple
+ * `eventAppearance` field, unlike `HourGridProps` : month view always picks
+ * its own bar appearance itself (`ghost` unless the event spans multiple
  * days — see {@link renderMonthWeek}), regardless of `eun-calendar`'s own
- * `eventVariant` prop, which only reaches day/week/work-week's chips.
+ * `eventAppearance` prop, which only reaches day/week/work-week's chips.
  */
 export interface MonthViewProps {
     displayedMonth: Date;

package/dist/features/scheduler/shared/scheduler-month-view.js

@@ -74,7 +74,7 @@ function slotsTouchingDay(slots, dayIndex) {
  * about and never needs to visually split a bar around a day that ran out
  * of room.
  *
- * Each bar's own variant is `ghost` (no fill, just the accent bar and
+ * Each bar's own appearance is `ghost` (no fill, just the accent bar and
  * text — the density this view actually needs, a whole week's worth of
  * single-day bars packed into a few rows) unless {@link isMultiDay}, which
  * keeps `default`'s opaque tint instead : a bar spanning several day
@@ -120,7 +120,7 @@ function renderMonthWeek(week, props) {
             .start=${slot.event.start}
             .end=${slot.event.end}
             color=${slot.event.color}
-            variant=${isMultiDay(slot.event) ? "default" : "ghost"}
+            appearance=${isMultiDay(slot.event) ? "default" : "ghost"}
             direction=${desktop ? "row" : "column"}
             ?hide-time=${!desktop || !!slot.event.allDay}
             @click=${(domEvent) => onEventClick(slot.event, domEvent)}

package/dist/features/table/table/table.types.d.ts

@@ -2,7 +2,7 @@ import { TemplateResult } from "lit";
 import { EunomiaIconName } from "../../../components/content/icon/icon.type.js";
 import { EunomiaDropdownOption } from "../../../components/action/dropdown-button/dropdown-button.js";
 import { EunomiaTableColumnSort } from "../table-column/table-column.js";
-import { EunomiaActionVariant } from "../../../types/variant.type.js";
+import { EunomiaActionColor } from "../../../types/variant.type.js";
 /**
  * A single action rendered in `eun-table-action-bar`'s center region — a
  * plain button, or a dropdown when `dropdown` is set.
@@ -11,7 +11,7 @@ export interface EunomiaTableAction {
     key: string;
     label: string;
     icon?: EunomiaIconName;
-    variant?: EunomiaActionVariant;
+    color?: EunomiaActionColor;
     dropdown?: EunomiaDropdownOption[];
     disabled?: boolean;
 }
@@ -56,7 +56,11 @@ export interface EunomiaTableRowButtonActionDef<T extends object = Record<string
     type?: "button";
     label: string;
     icon?: EunomiaIconName;
-    variant?: "default" | "danger";
+    /**
+     * The button's color. Once set, the button gets a pale tinted surface in
+     * that color ; left unset, it stays a neutral ghost button.
+     */
+    color?: EunomiaActionColor;
     disabled?: (row: T) => boolean;
     onClick: (row: T, index: number) => void;
 }

package/dist/features/table/table-action-bar/table-action-bar.js

@@ -104,13 +104,13 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
         this.dispatchEvent(new TableActionEvent(action.key, event.key));
     }
     renderAction(action) {
-        const isCritical = action.variant === "critical";
+        const isCritical = action.color === "critical";
         if (action.dropdown) {
             return html `
         <eun-dropdown-button
           label=${action.label}
           icon=${ifDefined(action.icon)}
-          variant=${ifDefined(isCritical ? "critical" : undefined)}
+          color=${ifDefined(isCritical ? "critical" : undefined)}
           appearance=${isCritical ? "default" : "flat"}
           .options=${action.dropdown}
           ?disabled=${action.disabled}
@@ -129,7 +129,7 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LitElement {
         }
         return html `
       <eun-button
-        variant=${ifDefined(isCritical ? "critical" : undefined)}
+        color=${ifDefined(isCritical ? "critical" : undefined)}
         label=${action.label}
         appearance=${isCritical ? "default" : "flat"}
         ?disabled=${action.disabled}

package/dist/features/table/table-managed/table-managed.js

@@ -105,8 +105,8 @@ function buildRowActionElement(action, row, index) {
     const el = document.createElement(EunomiaButtonTagName);
     el.setAttribute("slot", "action");
     el.size = "xs";
-    if (action.variant === "danger") {
-        el.variant = "critical";
+    if (action.color) {
+        el.color = action.color;
         el.appearance = "default";
     }
     else {

package/dist/i18n/en.d.ts

@@ -75,6 +75,9 @@ export declare const en: {
     chip: {
         remove: string;
     };
+    link: {
+        opensInNewTab: string;
+    };
 };
 /**
  * The shape every locale dictionary (see {@link ../i18n/fr.ts}) must match.

package/dist/i18n/en.js

@@ -57,4 +57,7 @@ export const en = {
     chip: {
         remove: "Remove",
     },
+    link: {
+        opensInNewTab: "opens in a new tab",
+    },
 };

package/dist/i18n/fr.js

@@ -75,4 +75,7 @@ export const fr = {
     chip: {
         remove: "Retirer",
     },
+    link: {
+        opensInNewTab: "ouvre dans un nouvel onglet",
+    },
 };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { EunomiaInfiniteList, EunomiaInfiniteListTagName, } from "./components/l
 export { EunomiaDivider, EunomiaDividerTagName, } from "./components/layout/divider/divider.js";
 export type { EunomiaDividerOrientation } from "./components/layout/divider/divider.js";
 export { EunomiaButton, EunomiaButtonTagName, } from "./components/action/button/button.js";
-export type { EunomiaActionVariant, EunomiaSeverity, EunomiaAppearance, EunomiaTone, EunomiaSize, } from "./types/variant.type.js";
+export type { EunomiaActionColor, EunomiaSeverity, EunomiaAppearance, EunomiaFieldAppearance, EunomiaTone, EunomiaSize, } from "./types/variant.type.js";
 export { EunomiaFab, EunomiaFabTagName } from "./components/action/fab/fab.js";
 export type { EunomiaFabPosition } from "./components/action/fab/fab.js";
 export { EunomiaDropdownButton, EunomiaDropdownButtonTagName, } from "./components/action/dropdown-button/dropdown-button.js";
@@ -21,7 +21,7 @@ export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.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";
-export type { EunomiaBadgeSize, EunomiaBadgeVariant, } from "./components/content/badge/badge.js";
+export type { EunomiaBadgeSize, EunomiaBadgeColor, } from "./components/content/badge/badge.js";
 export { EunomiaCollapse, EunomiaCollapseTagName, } from "./components/content/collapse/collapse.js";
 export { EunomiaCard, EunomiaCardTagName, } from "./components/content/card/card.js";
 export { EunomiaImageCard, EunomiaImageCardTagName, } from "./components/content/card/image-card.js";
@@ -90,7 +90,7 @@ export type { EunomiaSkeletonVariant } from "./components/loader/skeleton/skelet
 export { EunomiaScheduler, EunomiaSchedulerTagName, } from "./features/scheduler/scheduler/scheduler.js";
 export { EunomiaCalendar, EunomiaCalendarTagName, } from "./features/scheduler/calendar/calendar.js";
 export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./features/scheduler/scheduler-event/scheduler-event.js";
-export type { EunomiaSchedulerEventCardVariant } from "./features/scheduler/scheduler-event/scheduler-event.js";
+export type { EunomiaSchedulerEventAppearance } from "./features/scheduler/scheduler-event/scheduler-event.js";
 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";

package/dist/jsx.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="index.d.ts" />
 /**
- * JSX/TSX support for every `eun-*` tag: `<eun-button variant="primary">`
+ * JSX/TSX support for every `eun-*` tag: `<eun-button color="primary">`
  * type-checks in a `.tsx` file the same way a native `<button>` does, with
  * prop autocomplete and invalid-prop rejection, once this module has been
  * imported anywhere in the program.

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

@@ -3,29 +3,30 @@ import { CommandMixinInterface } from "./command.mixin.js";
 import { DisabledMixinInterface } from "./disabled.mixin.js";
 import { PopoverMixinInterface } from "./popover.mixin.js";
 import { Constructor } from "../utils/constructor.type.js";
-import { EunomiaActionVariant, EunomiaAppearance, EunomiaSize, EunomiaTone } from "../types/variant.type.js";
+import { EunomiaActionColor, EunomiaAppearance, EunomiaSize, EunomiaTone } from "../types/variant.type.js";
 /**
  * The button's native HTML mechanism when clicked inside a form — distinct
- * from every other component's `variant`/`appearance`, and left as `type`
+ * from every other component's `color`/`appearance`, and left as `type`
  * since it mirrors the real `<button type>` attribute.
  */
 export type ButtonType = "submit" | "reset" | "button";
 /**
- * All available variants for the button component: the semantic
- * {@link EunomiaActionVariant} set, plus the neutral, non-semantic grey tones
+ * All available colors for the button component: the semantic
+ * {@link EunomiaActionColor} set, plus the neutral, non-semantic grey tones
  * borrowed from {@link EunomiaTone} (`light`/`medium`/`dark`), the same
  * vocabulary `eun-tag`'s `color` uses. They cover a de-emphasized action,
  * such as a secondary link next to a colored CTA, without resorting to
  * manual `--button-*` cssprop overrides.
  */
-export type ButtonVariant = EunomiaActionVariant | Extract<EunomiaTone, "light" | "medium" | "dark">;
+export type ButtonColor = EunomiaActionColor | Extract<EunomiaTone, "light" | "medium" | "dark">;
 /**
  * All available sizes for the button component.
  */
 export type ButtonSize = EunomiaSize;
 /**
- * All available button surface treatments — the full six-value
- * {@link EunomiaAppearance} set, since a button (unlike a passive display
+ * All available button surface treatments — every {@link EunomiaAppearance}
+ * value except the field-only `underline` and the scheduler-only
+ * `transparent`, since a button (unlike a passive display
  * component) has a hover/focus/active state for `ghost` to reveal itself
  * on, and can be visually elevated (`raised`) the way a static piece of
  * content never is. Not part of {@link ButtonMixinInterface} itself : only
@@ -33,14 +34,14 @@ export type ButtonSize = EunomiaSize;
  * (a floating action button has no `stroke`/`raised`/`flat`/`ghost` look of
  * its own).
  */
-export type EunomiaButtonAppearance = EunomiaAppearance;
+export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "default" | "fill" | "outline" | "flat" | "raised" | "ghost">;
 /**
  * Interface for the ButtonMixin.
  * Extend this in components if needed.
  */
 export declare class ButtonMixinInterface {
     type?: ButtonType;
-    variant?: ButtonVariant;
+    color?: ButtonColor;
     fixedColor?: boolean;
     size?: ButtonSize;
     rounded?: boolean;

package/dist/mixins/button.mixin.js

@@ -22,14 +22,16 @@ export const ButtonMixin = (superClass) => {
             super(...arguments);
             /**
              * The button type: "submit", "reset", or "button".
-             * Determines behavior when clicked inside a form.
+             * Determines behavior when clicked inside a form. Only reflected once it
+             * differs from the default, so an SSR framework doesn't see an
+             * attribute it never rendered.
              * @default "button"
              */
             this.type = "button";
             /**
              * Keeps a `light` or `dark` button white or black in every theme.
              * Without it, they follow the grey scale, which flips with the active
-             * theme. Has no effect on the other variants.
+             * theme. Has no effect on the other colors.
              * @default false
              */
             this.fixedColor = false;
@@ -61,13 +63,14 @@ export const ButtonMixin = (superClass) => {
          * Lifecycle hook: adds keyboard and click listeners, and sets the
          * default role to "button" if not already defined.
          *
-         * Skipped entirely when `href` is set: the internally-rendered `<a>`
+         * Skipped entirely when `href` is set, or when a native `<a>` is slotted
+         * as a direct child : that anchor (internal or the consumer's own)
          * already provides native role, focus and activation semantics, so the
          * host must stay out of the way rather than duplicate them.
          */
         connectedCallback() {
             super.connectedCallback?.();
-            if (this.href) {
+            if (this.href || this.querySelector(":scope > a")) {
                 return;
             }
             if (!this.hasAttribute("role")) {
@@ -154,11 +157,16 @@ export const ButtonMixin = (superClass) => {
         }
     }
     __decorate([
-        property({ reflect: true })
+        property({
+            reflect: true,
+            converter: {
+                toAttribute: (value) => (value === "button" ? null : value),
+            },
+        })
     ], ButtonMixinClass.prototype, "type", void 0);
     __decorate([
         property({ reflect: true })
-    ], ButtonMixinClass.prototype, "variant", void 0);
+    ], ButtonMixinClass.prototype, "color", void 0);
     __decorate([
         property({ type: Boolean, reflect: true, attribute: "fixed-color" })
     ], ButtonMixinClass.prototype, "fixedColor", void 0);

package/dist/mixins/card-link.mixin.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, nothing, TemplateResult } from "lit";
 import { Constructor } from "../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "./localizable.mixin.js";
 /**
  * The native `target` values a card can be given, mirroring
  * `eun-button`/`eun-link`'s own `target` type.
@@ -15,7 +16,7 @@ export declare class CardLinkMixinInterface {
     get isExternal(): boolean;
     get linkAriaLabel(): string | undefined;
     renderNewTabHint(): TemplateResult | typeof nothing;
-    renderExternalLinkBadge(): TemplateResult | typeof nothing;
+    renderExternalLinkBadge(slottedBlank?: boolean): TemplateResult | typeof nothing;
     renderCardLink(id: string, content: TemplateResult, className?: string): TemplateResult;
 }
 /**
@@ -37,4 +38,4 @@ export declare class CardLinkMixinInterface {
  * @param superClass - The base class to extend (must include LitElement).
  * @returns A class extended with the card link behavior.
  */
-export declare const CardLinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardLinkMixinInterface> & T;
+export declare const CardLinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardLinkMixinInterface & LocalizableMixinInterface> & T;

package/dist/mixins/card-link.mixin.js

@@ -8,6 +8,7 @@ import { html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { handleLinkNavigation } from "../utils/navigation.utils.js";
+import { LocalizableMixin, } from "./localizable.mixin.js";
 /**
  * CardLinkMixin adds the "link state" shared by every card in this family
  * (`eun-card`, `eun-image-card`, `eun-sliding-card`) : `href`/`target`/
@@ -28,7 +29,7 @@ import { handleLinkNavigation } from "../utils/navigation.utils.js";
  * @returns A class extended with the card link behavior.
  */
 export const CardLinkMixin = (superClass) => {
-    class CardLinkMixinClass extends superClass {
+    class CardLinkMixinClass extends LocalizableMixin(superClass) {
         /**
          * Whether the link, if any, opens in a new tab.
          */
@@ -44,7 +45,9 @@ export const CardLinkMixin = (superClass) => {
          */
         get linkAriaLabel() {
             const label = this.ariaLabel ?? undefined;
-            return this.isExternal && label ? `${label} (opens in a new tab)` : label;
+            return this.isExternal && label
+                ? `${label} (${this.dictionary.link.opensInNewTab})`
+                : label;
         }
         /**
          * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...)
@@ -71,16 +74,20 @@ export const CardLinkMixin = (superClass) => {
             if (!(this.href && this.isExternal) || this.ariaLabel) {
                 return nothing;
             }
-            return html `<span class="sr-only"> (opens in a new tab)</span>`;
+            const hint = this.dictionary.link.opensInNewTab;
+            return html `<span class="sr-only"> (${hint})</span>`;
         }
         /**
          * The absolute, top-right external-link badge shown when `href` and
          * `target="_blank"` are both set — purely decorative (`aria-hidden`),
          * the accessible "(opens in a new tab)" wording lives on the `<a>`
          * itself (see {@link linkAriaLabel}/{@link renderNewTabHint}).
+         *
+         * @param slottedBlank whether a slotted anchor, rather than `href`,
+         *   opens in a new tab (its wording goes on its own aria-description).
          */
-        renderExternalLinkBadge() {
-            if (!(this.href && this.isExternal)) {
+        renderExternalLinkBadge(slottedBlank = false) {
+            if (!(this.href && this.isExternal) && !slottedBlank) {
                 return nothing;
             }
             return html `

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

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import { Constructor } from '../utils/constructor.type.js';
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
 /**
  * Interface defining the contract for components using DisabledMixin.
  */
@@ -11,7 +11,7 @@ export declare class DisabledMixinInterface {
  *
  * When the `disabled` property changes, it automatically updates:
  * - `tabindex` (to prevent focus when disabled),
- * - `aria-disabled` for accessibility.
+ * - `aria-disabled` for accessibility, only present while disabled.
  *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.

package/dist/mixins/disabled.mixin.js

@@ -4,13 +4,13 @@ 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;
 };
-import { property } from 'lit/decorators.js';
+import { property } from "lit/decorators.js";
 /**
  * A mixin that adds a `disabled` property to a LitElement component.
  *
  * When the `disabled` property changes, it automatically updates:
  * - `tabindex` (to prevent focus when disabled),
- * - `aria-disabled` for accessibility.
+ * - `aria-disabled` for accessibility, only present while disabled.
  *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
@@ -34,9 +34,14 @@ export const DisabledMixin = (superClass) => {
          */
         updated(_changedProperties) {
             super.updated(_changedProperties);
-            if (_changedProperties.has('disabled')) {
-                this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-                this.setAttribute('aria-disabled', String(this.disabled));
+            if (_changedProperties.has("disabled")) {
+                this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+                if (this.disabled) {
+                    this.setAttribute("aria-disabled", "true");
+                }
+                else {
+                    this.removeAttribute("aria-disabled");
+                }
             }
         }
     }

package/dist/mixins/field-appearance.mixin.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
+import { EunomiaFieldAppearance } from "../types/variant.type.js";
+/**
+ * Interface defining the contract for components using FieldAppearanceMixin.
+ */
+export declare class FieldAppearanceMixinInterface {
+    appearance?: EunomiaFieldAppearance;
+}
+/**
+ * A mixin that adds an `appearance` property to a text-like form field
+ * component, controlling how its surface is drawn: bordered box
+ * (`outline`, default), muted background with no border (`flat`), or a
+ * bottom-only border (`underline`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `appearance` behavior.
+ */
+export declare const FieldAppearanceMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FieldAppearanceMixinInterface> & T;