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

package/dist/features/table/native-table.css

@@ -78,35 +78,35 @@
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
-  border: var(--eun-borderWidth-s, 1px) solid
+  border: var(--eun-border-width-s, 1px) solid
     var(--table-border-color, var(--eun-border-color, #dee0e7));
-  border-radius: var(--eun-borderRadius-m, 10px);
+  border-radius: var(--eun-border-radius-m, 10px);
   background: var(--table-background, var(--eun-surface-color, #ffffff));
   font-family: var(--eun-font-family, "'Mulish', sans-serif");
-  font-size: var(--eun-fontSize-s, 13px);
+  font-size: var(--eun-font-size-s, 13px);
   color: var(--eun-text-color, #071621);
 }
 
 .eun-table-scroll {
   overflow: auto;
   max-height: var(--table-max-height, none);
-  border-radius: var(--eun-borderRadius-m, 10px);
+  border-radius: var(--eun-border-radius-m, 10px);
 }
 
 .eun-table caption {
   caption-side: top;
   text-align: left;
   padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-  font-weight: var(--eun-fontWeight-m, 500);
+  font-weight: var(--eun-font-weight-m, 500);
 }
 
 .eun-table th,
 .eun-table td {
   padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
   text-align: left;
-  border-bottom: var(--eun-borderWidth-s, 1px) solid
+  border-bottom: var(--eun-border-width-s, 1px) solid
     var(--table-border-color, var(--eun-border-color, #dee0e7));
-  border-right: var(--eun-borderWidth-s, 1px) solid
+  border-right: var(--eun-border-width-s, 1px) solid
     var(--table-column-border-color, transparent);
 }
 
@@ -116,7 +116,7 @@
 
 .eun-table thead th {
   background: var(--table-header-background, var(--eun-surface-color, #ffffff));
-  font-weight: var(--eun-fontWeight-m, 500);
+  font-weight: var(--eun-font-weight-m, 500);
   color: var(--eun-text-secondary, #484e61);
 }
 
@@ -206,7 +206,7 @@
     --table-sticky-column-background,
     var(--table-header-background, var(--eun-surface-color, #ffffff))
   );
-  border-left: var(--eun-borderWidth-s, 1px) solid
+  border-left: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-column-border-color, transparent)
@@ -221,7 +221,7 @@
     --table-sticky-column-background,
     var(--table-background, var(--eun-surface-color, #ffffff))
   );
-  border-left: var(--eun-borderWidth-s, 1px) solid
+  border-left: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-column-border-color, transparent)
@@ -256,7 +256,7 @@
     --table-sticky-row-background,
     var(--table-background, var(--eun-surface-color, #ffffff))
   );
-  border-top: var(--eun-borderWidth-s, 1px) solid
+  border-top: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-border-color, var(--eun-border-color, #dee0e7))

package/dist/features/table/table/table.styles.js

@@ -19,9 +19,9 @@ const base = css `
     grid-template-columns: var(--_columns, none);
     align-items: stretch;
     box-sizing: border-box;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--table-background, var(--eun-surface-color, #ffffff));
     overflow: auto;
     max-height: var(--table-max-height, none);

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-action-bar/table-action-bar.styles.js

@@ -52,11 +52,11 @@ const base = css `
     width: max-content;
     max-width: 100%;
     box-sizing: border-box;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--table-action-bar-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --table-action-bar-border-radius,
-      var(--eun-borderRadius-l, 10px)
+      var(--eun-border-radius-l, 10px)
     );
     background: var(
       --table-action-bar-background,

package/dist/features/table/table-cell/table-cell.styles.js

@@ -21,7 +21,7 @@ const base = css `
     display: flex;
     box-sizing: border-box;
     min-width: 0;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--table-column-border-color, transparent);
   }
 
@@ -38,7 +38,7 @@ const base = css `
     width: 100%;
     min-width: 0;
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     color: var(--table-cell-color, var(--eun-text-color, #071621));
     overflow: hidden;
   }

package/dist/features/table/table-column/table-column.styles.js

@@ -23,7 +23,7 @@ const base = css `
     display: flex;
     box-sizing: border-box;
     min-width: 0;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--table-column-border-color, transparent);
   }
 
@@ -39,8 +39,8 @@ const base = css `
     width: 100%;
     min-width: 0;
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    font-size: var(--eun-fontSize-s, 13px);
-    font-weight: var(--table-column-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--eun-font-size-s, 13px);
+    font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
     color: var(--table-column-color, var(--eun-text-secondary, #484e61));
     text-align: left;
     white-space: nowrap;

package/dist/features/table/table-header/table-header.styles.js

@@ -24,9 +24,9 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
   }
 
@@ -92,7 +92,7 @@ const base = css `
       var(--table-header-background, var(--eun-surface-color, #ffffff))
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -137,7 +137,7 @@ const base = css `
     );
     box-shadow: inset 0 0 0 9999px transparent;
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)

package/dist/features/table/table-item/table-item.styles.js

@@ -99,7 +99,7 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
     transition:
       background-color var(--_table-row-transition-duration) ease,
@@ -128,7 +128,7 @@ const base = css `
     position: sticky;
     bottom: 0;
     z-index: var(--_table-z-sticky-row, 3);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-border-color, var(--eun-border-color, #dee0e7))
@@ -162,7 +162,7 @@ const base = css `
     );
     box-shadow: inset 0 0 0 9999px transparent;
     padding-inline-start: var(--eun-space-s);
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -228,7 +228,7 @@ const base = css `
     position: sticky;
     left: var(--_table-select-offset, 0px);
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -301,7 +301,7 @@ const base = css `
     position: sticky;
     right: 0;
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -312,7 +312,7 @@ const base = css `
     position: sticky;
     right: var(--_table-action-offset, 0px);
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)

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/features/table/table-skeleton-row/table-skeleton-row.styles.js

@@ -17,7 +17,7 @@ export const tableSkeletonRowStyles = css `
     grid-template-columns: subgrid;
     align-items: center;
     box-sizing: border-box;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
     opacity: 0;
     animation: eun-table-skeleton-row-enter

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";
@@ -108,11 +108,11 @@ export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
 export type { EunomiaBreakpoint } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export type { Dictionary } from "./i18n/index.js";
-export { buildPalette, buildTints, initializeTheme, } from "./utils/theme-generator.utils.js";
-export type { EunomiaHexColor, EunomiaThemeShadeValue, EunomiaThemeTints, } from "./utils/theme-generator.utils.js";
+export { buildPalette, buildTints, buildThemeCss, initializeTheme, } from "./utils/theme-generator.utils.js";
+export type { EunomiaHexColor, EunomiaThemeCssOptions, EunomiaThemeShadeValue, EunomiaThemeTints, } from "./utils/theme-generator.utils.js";
 export type { DragReorderOptions, DragReorderController, DragReorderOrientation, DragReorderStartDetail, DragReorderMoveDetail, DragReorderCommitDetail, DragReorderEndDetail, } from "./utils/drag-drop.utils.js";
-export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, RICH_TEXT_COLORS, splitAlign, } from "./utils/rich-text.utils.js";
-export type { RichTextColor, TextAlign } from "./utils/rich-text.utils.js";
+export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, parseInlineNodes, RICH_TEXT_COLORS, splitAlign, toHtml, toPlainText, } from "./utils/rich-text.utils.js";
+export type { InlineNode, RichTextColor, TextAlign, } from "./utils/rich-text.utils.js";
 export { LoadMoreEvent } from "./events/loadmore.event.js";
 export { PageChangeEvent } from "./events/pagechange.event.js";
 export { PageSizeChangeEvent } from "./events/pagesizechange.event.js";

package/dist/index.js

@@ -25,6 +25,9 @@
 // alongside them, composing the others and writing the result onto
 // `document.documentElement`, exported so a consumer doesn't have to
 // reassemble that composition themselves just to apply a custom brand.
+// `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.
@@ -103,8 +106,8 @@ export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
 export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
-export { buildPalette, buildTints, initializeTheme, } from "./utils/theme-generator.utils.js";
-export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, RICH_TEXT_COLORS, splitAlign, } from "./utils/rich-text.utils.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";
 export { LoadMoreEvent } from "./events/loadmore.event.js";
 export { PageChangeEvent } from "./events/pagechange.event.js";
 export { PageSizeChangeEvent } from "./events/pagesizechange.event.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.
@@ -20,14 +20,27 @@
  * erased, so importing it (`import type {} from "@eunomia/elements/jsx"`)
  * never calls `customElements.define(...)` and carries none of the SSR
  * risk a value import of a component does. `react`'s types describe
- * `DOMAttributes`/`Ref` here, but only as a type dependency: this package
- * still doesn't depend on React at runtime, so a non-React consumer never
- * resolves this module at all.
+ * `HTMLAttributes`/`Key`/`Ref` here, but only as a type dependency: this
+ * package still doesn't depend on React at runtime, so a non-React
+ * consumer never resolves this module at all.
  */
-import type { DOMAttributes, Ref } from "react";
+import type { HTMLAttributes, Key, Ref } from "react";
 type EunomiaTagName = Extract<keyof HTMLElementTagNameMap, `eun-${string}`>;
-type EunomiaElementProps<T> = Partial<Omit<T, keyof HTMLElement>> & DOMAttributes<T> & {
+type EunomiaOwnProps<T> = Partial<Omit<T, keyof HTMLElement | keyof HTMLOrSVGElement>>;
+/**
+ * Props allowed on a `<eun-*>` tag in TSX: the element's own reactive
+ * properties, plus every standard HTML/ARIA attribute and event handler
+ * React already knows about (id, style, title, tabIndex, aria-*, onClick,
+ * ...). `className` is deliberately excluded: React only rewrites it to
+ * the `class` attribute for elements it recognizes, not arbitrary custom
+ * elements — `class` is the one that actually works here. Custom events
+ * (`eunnavigate`, `eunchange`, ...) aren't included — those are typed and
+ * wired per-component with a ref, when that component is migrated.
+ */
+type EunomiaElementProps<T> = EunomiaOwnProps<T> & Omit<HTMLAttributes<T>, "className" | keyof EunomiaOwnProps<T>> & {
     ref?: Ref<T>;
+    key?: Key | null;
+    class?: string;
 };
 type EunomiaJSXElements = {
     [K in EunomiaTagName]: EunomiaElementProps<HTMLElementTagNameMap[K]>;

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,15 @@ 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;
     slide?: boolean;

package/dist/mixins/button.mixin.js

@@ -22,10 +22,19 @@ 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 colors.
+             * @default false
+             */
+            this.fixedColor = false;
             /**
              * The button size.
              * @default "m"
@@ -54,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")) {
@@ -147,11 +157,19 @@ 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);
     __decorate([
         property({ reflect: true })
     ], ButtonMixinClass.prototype, "size", 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/check.mixin.d.ts

@@ -21,4 +21,4 @@ export declare class CheckMixinInterface {
  * @template T A LitElement class extended with other mixins (Disabled, Readonly, Validators, Form).
  * @returns A class extending the provided superclass with checkable behavior.
  */
-export declare const CheckMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string>>>(superClass: T) => Constructor<CheckMixinInterface> & T;
+export declare const CheckMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<unknown> & FormMixinInterface<string>>>(superClass: T) => Constructor<CheckMixinInterface> & T;