@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/utils/popover.utils.js

@@ -1,9 +1,10 @@
 /**
  * Any open popover that isn't `manual`, i.e. one the browser light-dismisses
  * on its own (an `eun-select` listbox, a date picker calendar, a dropdown
- * menu, ...).
+ * menu, ...), or a `manual` one marked `data-light-dismiss` that closes
+ * itself on `Escape` the same way (an `eun-nav-menu` panel).
  */
-const OPEN_AUTO_POPOVER_SELECTOR = ':popover-open:not([popover="manual"])';
+const OPEN_AUTO_POPOVER_SELECTOR = ':popover-open:not([popover="manual"]), :popover-open[data-light-dismiss]';
 /**
  * Whether an open `auto` popover sits along `event`'s composed path : either
  * crossed directly (focus is inside the panel) or in a shadow root crossed on

package/dist/utils/scroll-lock.utils.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Whether page scroll is currently locked by at least one overlay. While it
+ * is, `window.scrollY` reads `0` whatever the page's real position, so
+ * anything deriving state from it should wait for the unlock.
+ */
+export declare function isScrollLocked(): boolean;
 /**
  * Locks page scroll. Reference-counted so nested overlays (e.g. a
  * `eun-modal` opened from within an already-open dialog) don't unlock
@@ -14,6 +20,8 @@ export declare function lockScroll(): void;
 /**
  * Releases one scroll lock reference, restoring page scroll (and the exact
  * scroll position captured when the lock was first acquired) once none
- * remain.
+ * remain. The position is only restored on the same page : after a
+ * client-side navigation from inside the overlay, the new page stays at
+ * the top, where its router meant to put it.
  */
 export declare function unlockScroll(): void;

package/dist/utils/scroll-lock.utils.js

@@ -1,5 +1,21 @@
 let lockCount = 0;
 let savedScrollY = 0;
+let savedPageUrl = "";
+/**
+ * The current page URL without its hash, so a same-page anchor jump still
+ * counts as the same page.
+ */
+function currentPageUrl() {
+    return window.location.href.split("#")[0];
+}
+/**
+ * Whether page scroll is currently locked by at least one overlay. While it
+ * is, `window.scrollY` reads `0` whatever the page's real position, so
+ * anything deriving state from it should wait for the unlock.
+ */
+export function isScrollLocked() {
+    return lockCount > 0;
+}
 /**
  * Locks page scroll. Reference-counted so nested overlays (e.g. a
  * `eun-modal` opened from within an already-open dialog) don't unlock
@@ -15,6 +31,7 @@ let savedScrollY = 0;
 export function lockScroll() {
     if (lockCount === 0) {
         savedScrollY = window.scrollY;
+        savedPageUrl = currentPageUrl();
         const { style } = document.body;
         style.position = "fixed";
         style.top = `-${savedScrollY}px`;
@@ -27,7 +44,9 @@ export function lockScroll() {
 /**
  * Releases one scroll lock reference, restoring page scroll (and the exact
  * scroll position captured when the lock was first acquired) once none
- * remain.
+ * remain. The position is only restored on the same page : after a
+ * client-side navigation from inside the overlay, the new page stays at
+ * the top, where its router meant to put it.
  */
 export function unlockScroll() {
     lockCount = Math.max(0, lockCount - 1);
@@ -38,6 +57,6 @@ export function unlockScroll() {
         style.left = "";
         style.right = "";
         style.width = "";
-        window.scrollTo(0, savedScrollY);
+        window.scrollTo(0, currentPageUrl() === savedPageUrl ? savedScrollY : 0);
     }
 }

package/dist/utils/theme-generator.utils.d.ts

@@ -79,6 +79,7 @@ export interface EunomiaThemeCssOptions {
     darkInverseSurfaceColor?: EunomiaHexColor;
     textColor?: EunomiaHexColor;
     darkTextColor?: EunomiaHexColor;
+    pageBackgroundColor?: EunomiaHexColor;
     borderColor?: EunomiaHexColor;
     darkBorderColor?: EunomiaHexColor;
     fontFamily?: string;

package/dist/utils/theme-generator.utils.js

@@ -222,14 +222,21 @@ export function buildTints(primaryHex, isDark, borderColor) {
     };
 }
 /**
- * The muted `--eun-text-secondary` for a custom text color: `text` mixed
- * 30% toward `surface`, backed off in 5% steps until it still clears WCAG
- * AA against that surface.
+ * The dark `--eun-text-secondary`: the near-white translucent text every
+ * theme already defines, rather than a mix that greys out on a dark surface.
  */
-function secondaryText(text, surface) {
-    let percent = 30;
+const DARK_SECONDARY_TEXT = "var(--eun-text-on-dark-secondary)";
+/**
+ * The muted light `--eun-text-secondary` for a custom text color: `text`
+ * mixed 40% toward `surface`, backed off in 5% steps until it still clears WCAG
+ * AA against that surface and against `pageBackground` when one is given.
+ */
+function secondaryText(text, surface, pageBackground) {
+    const backgrounds = pageBackground ? [surface, pageBackground] : [surface];
+    const readable = (color) => backgrounds.every((bg) => contrastRatio(color, bg) >= MIN_CONTRAST);
+    let percent = 40;
     let result = mix(text, surface, percent / 100);
-    while (contrastRatio(result, surface) < MIN_CONTRAST && percent > 0) {
+    while (!readable(result) && percent > 0) {
         percent -= 5;
         result = mix(text, surface, percent / 100);
     }
@@ -244,7 +251,7 @@ function secondaryText(text, surface) {
  * so the inline and the stylesheet output can never drift apart.
  */
 function buildThemeTokens(primary, secondary, isDark, options) {
-    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, borderColor, } = options;
+    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, pageBackgroundColor, borderColor, } = options;
     const tokens = [];
     for (const [type, seed, checkDark] of [
         ["primary", primary, isDark],
@@ -270,7 +277,12 @@ function buildThemeTokens(primary, secondary, isDark, options) {
         tokens.push(["--eun-surface-inverse", inverseSurfaceColor], ["--eun-text-on-inverse", pickOnColor(inverseSurfaceColor)]);
     }
     if (textColor) {
-        tokens.push(["--eun-text-color", textColor], ["--eun-text-secondary", secondaryText(textColor, surfaceColor)]);
+        tokens.push(["--eun-text-color", textColor], [
+            "--eun-text-secondary",
+            isDark
+                ? DARK_SECONDARY_TEXT
+                : secondaryText(textColor, surfaceColor, pageBackgroundColor),
+        ]);
     }
     if (fontFamily) {
         tokens.push(["--eun-font-family", fontFamily]);
@@ -331,7 +343,7 @@ export function initializeTheme(primary, secondary, isDark = false, surfaceColor
  * switching mode is just a `data-theme` change, no regeneration needed.
  */
 export function buildThemeCss(primary, secondary, options = {}) {
-    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, borderColor, darkBorderColor, fontFamily, brand = "custom", } = options;
+    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, pageBackgroundColor, borderColor, darkBorderColor, fontFamily, brand = "custom", } = options;
     const rule = (selector, isDark) => {
         const tokens = buildThemeTokens(primary, secondary, isDark, {
             surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
@@ -341,10 +353,11 @@ export function buildThemeCss(primary, secondary, options = {}) {
                 ? darkInverseSurfaceColor
                 : inverseSurfaceColor,
             textColor: isDark ? darkTextColor : textColor,
+            pageBackgroundColor: isDark ? undefined : pageBackgroundColor,
             borderColor: isDark ? darkBorderColor : borderColor,
         });
         if (isDark && textColor && !darkTextColor) {
-            tokens.push(["--eun-text-color", "var(--eun-color-grey-800)"], ["--eun-text-secondary", "var(--eun-color-grey-700)"]);
+            tokens.push(["--eun-text-color", "var(--eun-color-grey-800)"], ["--eun-text-secondary", DARK_SECONDARY_TEXT]);
         }
         const body = tokens
             .map(([property, value]) => `  ${property}: ${value};`)

package/dist/utils/validity.utils.d.ts

@@ -1,12 +1,21 @@
 import { Validity } from "../mixins/validators.mixin.js";
+import { Dictionary } from "../i18n/index.js";
 /**
  * The shape every native form field element (`<input>`, `<textarea>`, ...)
  * exposes for constraint validation — the common surface
- * {@link pickValidity} reads from.
+ * {@link pickValidity} reads from. The constraint attributes are optional,
+ * read only to fill in the translated message of the matching flag.
  */
 export interface ValidityHost {
     readonly validity: ValidityState;
     readonly validationMessage: string;
+    readonly type?: string;
+    readonly value?: string;
+    readonly minLength?: number;
+    readonly maxLength?: number;
+    readonly min?: string;
+    readonly max?: string;
+    readonly step?: string;
 }
 /**
  * Reads native HTML constraint validation off `field`, picking only `keys`
@@ -14,11 +23,16 @@ export interface ValidityHost {
  * `checkLocalValidators` override that delegates to a native field element :
  * no field yet, or an already-valid one, reports nothing ; an invalid one
  * reports only the flags the caller actually cares about (e.g. `eun-counter`
- * has no `pattern`/`tooShort`, `eun-textarea` has no `min`/`max`), alongside
- * the field's own `validationMessage`.
+ * has no `pattern`/`tooShort`, `eun-textarea` has no `min`/`max`).
+ *
+ * The message is the library's own for the first violated flag of `keys`,
+ * so it follows the field's locale rather than the browser's language. The
+ * field's own `validationMessage` is kept only for a flag the dictionary
+ * has no message for.
  *
  * @param field the native field element to read from, or `undefined` while not yet rendered.
  * @param keys which `ValidityState` flags to report.
+ * @param messages the validation messages of the field's locale.
  * @returns the picked validity state and message.
  */
-export declare function pickValidity(field: ValidityHost | undefined, keys: readonly (keyof ValidityState)[]): Validity;
+export declare function pickValidity(field: ValidityHost | undefined, keys: readonly (keyof ValidityState)[], messages: Dictionary["validation"]): Validity;

package/dist/utils/validity.utils.js

@@ -1,23 +1,93 @@
+/**
+ * The `stepMismatch` message, naming the two valid values around the
+ * field's value, the way the browser's own message does. Steps count from
+ * `min`, or from 0 without one.
+ *
+ * @param field the native field element the flag was read from.
+ * @param messages the validation messages of the field's locale.
+ * @returns the translated message, or `undefined` without a usable step or value.
+ */
+function stepMismatchMessage(field, messages) {
+    const step = Number(field.step);
+    const value = Number(field.value);
+    const base = Number(field.min || 0);
+    if (!(step > 0) || field.value === "" || !Number.isFinite(value)) {
+        return undefined;
+    }
+    // Rounded to the step's and base's precision, so 0.1 steps don't drift.
+    const decimals = Math.max(...[field.step, field.min].map((n) => (n?.split(".")[1] ?? "").length));
+    const lower = base + Math.floor((value - base) / step) * step;
+    return messages.stepMismatch(String(Number(lower.toFixed(decimals))), String(Number((lower + step).toFixed(decimals))));
+}
+/**
+ * The library's own message for a violated `key`, in the locale of
+ * `messages`, or `undefined` when it has none (e.g. a `typeMismatch` on a
+ * type other than `email`/`url`).
+ *
+ * @param field the native field element the flag was read from.
+ * @param key the violated `ValidityState` flag.
+ * @param messages the validation messages of the field's locale.
+ * @returns the translated message, if any.
+ */
+function translateValidity(field, key, messages) {
+    switch (key) {
+        case "valueMissing":
+            return messages.valueMissing;
+        case "typeMismatch":
+            return field.type === "email" || field.type === "url"
+                ? messages.typeMismatch[field.type]
+                : undefined;
+        case "patternMismatch":
+            return messages.patternMismatch;
+        case "tooShort":
+            return field.minLength !== undefined && field.value !== undefined
+                ? messages.tooShort(field.minLength, field.value.length)
+                : undefined;
+        case "tooLong":
+            return field.maxLength !== undefined && field.value !== undefined
+                ? messages.tooLong(field.maxLength, field.value.length)
+                : undefined;
+        case "rangeUnderflow":
+            return field.min ? messages.rangeUnderflow(field.min) : undefined;
+        case "rangeOverflow":
+            return field.max ? messages.rangeOverflow(field.max) : undefined;
+        case "stepMismatch":
+            return stepMismatchMessage(field, messages);
+        case "badInput":
+            return messages.badInput;
+        default:
+            return undefined;
+    }
+}
 /**
  * Reads native HTML constraint validation off `field`, picking only `keys`
  * out of its `ValidityState` — the shared shape behind every
  * `checkLocalValidators` override that delegates to a native field element :
  * no field yet, or an already-valid one, reports nothing ; an invalid one
  * reports only the flags the caller actually cares about (e.g. `eun-counter`
- * has no `pattern`/`tooShort`, `eun-textarea` has no `min`/`max`), alongside
- * the field's own `validationMessage`.
+ * has no `pattern`/`tooShort`, `eun-textarea` has no `min`/`max`).
+ *
+ * The message is the library's own for the first violated flag of `keys`,
+ * so it follows the field's locale rather than the browser's language. The
+ * field's own `validationMessage` is kept only for a flag the dictionary
+ * has no message for.
  *
  * @param field the native field element to read from, or `undefined` while not yet rendered.
  * @param keys which `ValidityState` flags to report.
+ * @param messages the validation messages of the field's locale.
  * @returns the picked validity state and message.
  */
-export function pickValidity(field, keys) {
+export function pickValidity(field, keys, messages) {
     if (!field || field.validity.valid) {
         return { validity: {} };
     }
     const validity = {};
+    let message;
     for (const key of keys) {
         validity[key] = field.validity[key];
+        if (validity[key] && message === undefined) {
+            message = translateValidity(field, key, messages);
+        }
     }
-    return { validity, message: field.validationMessage };
+    return { validity, message: message ?? field.validationMessage };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0",
   "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -145,6 +145,10 @@
       "types": "./dist/components/alert/modal/modal.d.ts",
       "default": "./dist/components/alert/modal/modal.js"
     },
+    "./nav-menu.js": {
+      "types": "./dist/components/navigation/nav-menu/nav-menu.d.ts",
+      "default": "./dist/components/navigation/nav-menu/nav-menu.js"
+    },
     "./pagination.js": {
       "types": "./dist/components/navigation/pagination/pagination.d.ts",
       "default": "./dist/components/navigation/pagination/pagination.js"
@@ -293,6 +297,14 @@
       "types": "./dist/jsx.d.ts",
       "default": "./dist/jsx.js"
     },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./angular": {
+      "types": "./dist/angular/forms.d.ts",
+      "default": "./dist/angular/forms.js"
+    },
     "./styles/*": "./styles/*",
     "./cdn/*": "./dist/cdn/*",
     "./alert-ssr.css": "./dist/ssr/alert-ssr.css",
@@ -306,16 +318,20 @@
     "./chip-ssr.css": "./dist/ssr/chip-ssr.css",
     "./collapse-ssr.css": "./dist/ssr/collapse-ssr.css",
     "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css",
+    "./divider-ssr.css": "./dist/ssr/divider-ssr.css",
     "./field-ssr.css": "./dist/ssr/field-ssr.css",
     "./icon-ssr.css": "./dist/ssr/icon-ssr.css",
     "./image-carousel-ssr.css": "./dist/ssr/image-carousel-ssr.css",
     "./links-ssr.css": "./dist/ssr/links-ssr.css",
+    "./nav-menu-ssr.css": "./dist/ssr/nav-menu-ssr.css",
     "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
     "./pagination-ssr.css": "./dist/ssr/pagination-ssr.css",
     "./rating-ssr.css": "./dist/ssr/rating-ssr.css",
     "./rich-text.css": "./dist/ssr/rich-text.css",
+    "./scheduler-ssr.css": "./dist/ssr/scheduler-ssr.css",
     "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
     "./skeleton-ssr.css": "./dist/ssr/skeleton-ssr.css",
+    "./stepper-ssr.css": "./dist/ssr/stepper-ssr.css",
     "./table-ssr.css": "./dist/ssr/table-ssr.css",
     "./tabs-ssr.css": "./dist/ssr/tabs-ssr.css",
     "./tag-ssr.css": "./dist/ssr/tag-ssr.css",
@@ -333,7 +349,7 @@
     "./dist/features/**/*.js"
   ],
   "scripts": {
-    "build": "tsc --noEmit -p tsconfig.build.json",
+    "build": "tsc --noEmit -p tsconfig.build.json && ngc --noEmit -p tsconfig.angular.json",
     "build:dist": "node scripts/build-dist.mjs",
     "build:dist:watch": "tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs && tsc -p tsconfig.build.json --watch",
     "build:cdn": "node scripts/build-cdn.mjs",
@@ -348,11 +364,19 @@
     "lit": "^3.2.0"
   },
   "peerDependencies": {
-    "@types/react": ">=18"
+    "@types/react": ">=18",
+    "@angular/core": ">=18.0.0",
+    "@angular/forms": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@angular/forms": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -360,9 +384,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@angular/common": "~18.2.14",
+    "@angular/compiler": "~18.2.14",
+    "@angular/compiler-cli": "~18.2.14",
+    "@angular/core": "~18.2.14",
+    "@angular/forms": "~18.2.14",
+    "@angular/platform-browser": "~18.2.14",
     "@material-symbols/svg-400": "0.48.1",
     "@types/react": "^19.3.0",
     "esbuild": "^0.28.2",
+    "rxjs": "^7.8.2",
     "sass": "^1.104.1"
   }
 }

package/styles/themes/mixins/eunomia-neutrals.mixin.scss

@@ -27,7 +27,7 @@
   --eun-disabled-color: #ecedf0;
   --eun-readonly-color: #666e8a;
   --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
+  --eun-text-secondary: #666e8a;
   --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
   --eun-text-disabled-color: #8d93aa;
   --eun-text-readonly-color: #c1c9d6;
@@ -69,7 +69,7 @@
   --eun-disabled-color: var(--eun-color-grey-200);
   --eun-readonly-color: var(--eun-color-grey-600);
   --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
+  --eun-text-secondary: #d2d5de;
   --eun-placeholder-color: var(--eun-color-grey-400);
   --eun-text-disabled-color: var(--eun-color-grey-500);
   --eun-text-readonly-color: var(--eun-color-grey-400);

package/styles/tools/mixins/layout/eunomia-grid.mixin.scss

@@ -1,6 +1,37 @@
+@use "sass:list";
 @use "./../media-queries/eunomia-media-queries.mixin.scss" as *;
 
+$_eunomia-grid-own-properties: (
+  "--eun-grid-track-min",
+  "--_variantCols0",
+  "--_variantCols1",
+  "--_variantCols2",
+  "--_variantCols3",
+  "--_variantCols4",
+  "--_variantTpl0",
+  "--_variantTpl1",
+  "--_variantTpl2",
+  "--_variantTpl3",
+  "--_variantTpl4"
+);
+
+@each $name in ("columns", "template") {
+  @each $suffix in ("", "-mobile", "-tablet", "-laptop", "-desktop") {
+    $_eunomia-grid-own-properties: list.append(
+      $_eunomia-grid-own-properties,
+      "--eun-grid-#{$name}#{$suffix}"
+    );
+  }
+}
+
 @mixin eunomia-grid-layouts {
+  @each $property in $_eunomia-grid-own-properties {
+    @property #{$property} {
+      syntax: "*";
+      inherits: false;
+    }
+  }
+
   :where(.eun-grid) {
     --_cols0: var(--eun-grid-columns, var(--_variantCols0, 1));
     --_cols1: var(
@@ -62,8 +93,65 @@
       )
     );
     --_cols: var(--_cols0);
+    --_tpl0: var(--eun-grid-template, var(--_variantTpl0));
+    --_tpl1: var(
+      --eun-grid-template-mobile,
+      var(--eun-grid-template, var(--_variantTpl1, var(--_variantTpl0)))
+    );
+    --_tpl2: var(
+      --eun-grid-template-tablet,
+      var(
+        --eun-grid-template-mobile,
+        var(
+          --eun-grid-template,
+          var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+        )
+      )
+    );
+    --_tpl3: var(
+      --eun-grid-template-laptop,
+      var(
+        --eun-grid-template-tablet,
+        var(
+          --eun-grid-template-mobile,
+          var(
+            --eun-grid-template,
+            var(
+              --_variantTpl3,
+              var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+            )
+          )
+        )
+      )
+    );
+    --_tpl4: var(
+      --eun-grid-template-desktop,
+      var(
+        --eun-grid-template-laptop,
+        var(
+          --eun-grid-template-tablet,
+          var(
+            --eun-grid-template-mobile,
+            var(
+              --eun-grid-template,
+              var(
+                --_variantTpl4,
+                var(
+                  --_variantTpl3,
+                  var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_tpl: var(--_tpl0);
     display: grid;
-    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
+    grid-template-columns: var(
+      --_tpl,
+      repeat(var(--_cols), minmax(var(--eun-grid-track-min, 0), 1fr))
+    );
     row-gap: var(--eun-grid-row-gap, var(--eun-space-s));
     column-gap: var(--eun-grid-column-gap, var(--eun-space-m));
   }
@@ -71,21 +159,25 @@
   @include eunomia-from(mobile) {
     :where(.eun-grid) {
       --_cols: var(--_cols1);
+      --_tpl: var(--_tpl1);
     }
   }
   @include eunomia-from(tablet) {
     :where(.eun-grid) {
       --_cols: var(--_cols2);
+      --_tpl: var(--_tpl2);
     }
   }
   @include eunomia-from(laptop) {
     :where(.eun-grid) {
       --_cols: var(--_cols3);
+      --_tpl: var(--_tpl3);
     }
   }
   @include eunomia-from(desktop) {
     :where(.eun-grid) {
       --_cols: var(--_cols4);
+      --_tpl: var(--_tpl4);
     }
   }
 
@@ -102,15 +194,31 @@
     grid-auto-flow: row;
   }
 
-  @include eunomia-from(tablet) {
-    :where(.eun-grid--thirds-1-2) {
-      grid-template-columns: 1fr 2fr;
-    }
+  :where(.eun-grid--thirds-1-2) {
+    --_variantTpl2: 1fr 2fr;
+  }
 
-    :where(.eun-grid--thirds-2-1) {
-      grid-template-columns: 2fr 1fr;
-    }
+  :where(.eun-grid--thirds-2-1) {
+    --_variantTpl2: 2fr 1fr;
+  }
+
+  :where(.eun-grid--quarters-1-3) {
+    --_variantTpl2: 1fr 3fr;
+  }
+
+  :where(.eun-grid--quarters-3-1) {
+    --_variantTpl2: 3fr 1fr;
+  }
+
+  :where(.eun-grid--fifths-2-3) {
+    --_variantTpl2: 2fr 3fr;
+  }
 
+  :where(.eun-grid--fifths-3-2) {
+    --_variantTpl2: 3fr 2fr;
+  }
+
+  @include eunomia-from(tablet) {
     :where(.eun-grid--sidebar-left),
     :where(.eun-grid--sidebar-right) {
       grid-template-columns: repeat(2, 1fr);

package/dist/cdn/components/chunks/chunk-4DRU3IYJ.js

@@ -1 +0,0 @@
-import{a as c,b as n}from"./chunk-HGX6GPHM.js";var i=0,r=0;function d(){if(i===0){r=window.scrollY;let{style:t}=document.body;t.position="fixed",t.top=`-${r}px`,t.left="0",t.right="0",t.width="100%"}i+=1}function l(){if(i=Math.max(0,i-1),i===0){let{style:t}=document.body;t.position="",t.top="",t.left="",t.right="",t.width="",window.scrollTo(0,r)}}var v=t=>{class s extends t{constructor(){super(...arguments);this.syncingFromPopover=!1}resolveActiveElement(){let e=document.activeElement===this?this.shadowRoot?.activeElement:document.activeElement;return e instanceof HTMLElement?e:void 0}syncPopoverOpenState(e,o){this.syncingFromPopover||(e?(this.cancelSurfaceClosing(o),o?.matches(":popover-open")||o?.showPopover()):o?.matches(":popover-open")&&this.beginSurfaceClosing(o))}cancelSurfaceClosing(e){this.closeTimer!==void 0&&(window.clearTimeout(this.closeTimer),this.closeTimer=void 0),e?.removeAttribute("closing")}beginSurfaceClosing(e){if(!e)return;e.setAttribute("closing","");let o=Number.parseFloat(getComputedStyle(e).transitionDuration)*1e3||0;this.closeTimer=window.setTimeout(()=>{this.closeTimer=void 0,e.removeAttribute("closing"),e.hidePopover()},o)}openDialogSurface(e){this.previouslyFocusedElement=this.resolveActiveElement(),d(),this.dialogStackEntry=e,c(e)}closeDialogSurface(e){l(),this.dialogStackEntry&&(n(this.dialogStackEntry),this.dialogStackEntry=void 0),(this.previouslyFocusedElement??e)?.focus(),this.previouslyFocusedElement=void 0}teardownDialogSurface(e){e&&l(),this.closeTimer!==void 0&&(window.clearTimeout(this.closeTimer),this.closeTimer=void 0),this.dialogStackEntry&&(n(this.dialogStackEntry),this.dialogStackEntry=void 0)}}return s};export{v as a};

package/dist/cdn/components/chunks/chunk-647ISUF4.js

@@ -1 +0,0 @@
-import{a as l,b as d,f,g,h as S,i as T,k as x,l as v,m as E,q as p,s as h}from"./chunk-MJ4RDZLL.js";var k={low:"success",high:"warning",critical:"critical"},b={pending:"hourglass_empty",confirmed:"check",declined:"close"},A={pending:"warning",confirmed:"success",declined:"critical"};function L(t,e,r){switch(t){case"day":return{start:l(e),end:d(e)};case"week":case"work-week":{let o=h(e,r),i=o.find(a=>a.some(n=>E(n,e)))??o[0],s=t==="work-week"?i.filter(a=>!p(a)):i;return{start:l(s[0]),end:d(s[s.length-1])}}case"month":{let o=h(e,r);return{start:l(o[0][0]),end:d(o[o.length-1][6])}}case"year":return{start:f(e),end:g(e)};default:return{start:l(e),end:d(e)}}}function C(t,e,r){switch(t){case"day":return S(e,r);case"week":case"work-week":return T(e,r);case"month":return x(e,r);case"year":return v(e,r);default:return e}}function y(t){return!!t.allDay||!E(t.start,t.end)}function M(t,e){return t.filter(r=>!y(r)&&E(r.start,e)).sort((r,o)=>r.start.getTime()-o.start.getTime())}function O(t,e){let r=l(e).getTime(),o=d(e).getTime();return t.filter(i=>i.start.getTime()<=o&&i.end.getTime()>=r).sort((i,s)=>i.start.getTime()-s.start.getTime())}function R(t){let e=[...t].sort((a,n)=>a.start.getTime()-n.start.getTime()||a.end.getTime()-n.end.getTime()),r=[],o=[],i=-1/0,s=()=>{if(o.length===0)return;let a=[];for(let u of o){let m=a.find(c=>c[c.length-1].end.getTime()<=u.start.getTime());m?m.push(u):a.push([u])}let n=a.length;a.forEach((u,m)=>{u.forEach(c=>{r.push({event:c,column:m,columnCount:n})})}),o=[]};for(let a of e)o.length>0&&a.start.getTime()>=i&&(s(),i=-1/0),o.push(a),i=Math.max(i,a.end.getTime());return s(),r}function I(t,e){if(e.length===0)return[];let r=l(e[0]).getTime(),o=d(e[e.length-1]).getTime(),i=t.filter(n=>n.start.getTime()<=o&&n.end.getTime()>=r).map(n=>{let u=Math.max(e.findIndex(c=>d(c).getTime()>=n.start.getTime()),0),m=e.length-1;for(let c=0;c<e.length;c+=1)if(l(e[c]).getTime()>n.end.getTime()){m=c-1;break}return{event:n,startIndex:u,endIndex:Math.max(m,u)}}).sort((n,u)=>n.startIndex-u.startIndex||u.endIndex-n.endIndex),s=[],a=[];for(let n of i){let u=s.findIndex(m=>m<n.startIndex);u===-1?(u=s.length,s.push(n.endIndex)):s[u]=n.endIndex,a.push({...n,row:u})}return a}function _(t,e){return I(t.filter(y),e)}function G(t,e){return I(t,e)}function W(t,e){return new Date(1970,0,1,t,0,0,0).toLocaleTimeString(e,{hour:"numeric",minute:t%1===0?void 0:"2-digit"})}function N(t,e){return t.toLocaleTimeString(e,{hour:"numeric",minute:"2-digit"})}export{k as a,b,A as c,L as d,C as e,y as f,M as g,O as h,R as i,_ as j,G as k,W as l,N as m};

package/dist/cdn/components/chunks/chunk-6TIEBY34.js

@@ -1 +0,0 @@
-var e={fromAttribute(t){return t!==null&&t!=="false"},toAttribute(t){return t?"":"false"}};export{e as a};

package/dist/cdn/components/chunks/chunk-E6UOI36Q.js

@@ -1 +0,0 @@
-var o=':popover-open:not([popover="manual"])';function r(t,n){for(let e of t.composedPath()){if(e===n)return!1;if(e instanceof Element&&e.matches(o)||e instanceof ShadowRoot&&e.querySelector(o))return!0}return!1}export{r as a};

package/dist/cdn/components/chunks/chunk-GNAUNTS5.js

@@ -1 +0,0 @@
-var t="en";function n(){return t}var a={common:{close:"Close",cancel:"Cancel",confirm:"Confirm",noValue:"No value set",save:"Save",apply:"Apply",today:"Today",edit:"Edit",delete:"Delete",loading:"Loading\u2026",noResults:"No results",keepEditing:"Keep editing",discard:"Discard"},datePicker:{openCalendar:"Open calendar",previousMonth:"Previous month",chooseMonthYear:"Choose month and year",nextMonth:"Next month",previousYear:"Previous year",chooseYear:"Choose year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",time:"Time",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"},year:{single:"Select a year",range:"Select a year range"}},modalPreview:{day:{single:"Select date",range:"Select date range"},month:{single:"Select month",range:"Select month range"},year:{single:"Select year",range:"Select year range"}},dayPlaceholder:"dd",monthPlaceholder:"mm",yearPlaceholder:"yyyy",hourPlaceholder:"hh",minutePlaceholder:"mm"},timePicker:{openClock:"Open clock",amPm:"AM/PM",hour:"Hour",minute:"Minute",time:"Time",selectATime:"Select a time",increaseHour:"Increase hour",decreaseHour:"Decrease hour",increaseMinute:"Increase minute",decreaseMinute:"Decrease minute",togglePeriod:"Toggle AM/PM",mustBeAtOrAfter:e=>`Time must be at or after ${e}`,mustBeAtOrBefore:e=>`Time must be at or before ${e}`,hourPlaceholder:"hh",minutePlaceholder:"mm"},scheduler:{previous:"Previous period",next:"Next period",calendarView:"Calendar view",newEvent:"New event",viewDay:"Day",viewWeek:"Week",viewWorkWeek:"Work week",viewMonth:"Month",viewYear:"Year",priorities:{low:"Low",medium:"Medium",high:"High",critical:"Critical"}},carousel:{label:"Carousel",ofTotal:(e,r)=>`${e} of ${r}`,slideNavigation:"Slide navigation",previous:"Previous slide",next:"Next slide",goToSlide:(e,r)=>`Go to slide ${e} of ${r}`},imageCarousel:{gallery:"Image gallery",previous:"Previous image",next:"Next image",expand:"View full-size image",lightbox:"Image viewer",selectImage:"Select image",showImage:(e,r)=>`Show image ${e} of ${r}`,imageNavigation:"Image navigation",goToImage:(e,r)=>`Go to image ${e} of ${r}`,allImages:"All images"},chip:{remove:"Remove"},passwordStrength:{label:"Password strength",levels:["Weak","Fair","Good","Strong"],caption:e=>`${e}:`},infiniteList:{loadingMore:"Loading more items\u2026",itemsLoaded:e=>`${e} more item${e>1?"s":""} loaded`},table:{loadingMore:"Loading more rows\u2026",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",rowNumber:"Row number",scrollRegion:"Scrollable table",rowsLoaded:e=>`${e} more row${e>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",drop:"Drag and drop files here, or",browse:"browse files",removeAll:"Remove all",removeSingle:"Remove",selectAll:"Select all",deleteSelected:"Delete selected",count:e=>`${e} file${e>1?"s":""}`},inputPhone:{selectCountry:"Select a country",searchCountry:"Search a country\u2026"},colorPicker:{noColor:"No color selected",swatches:"Presets",custom:"Custom",nativeInput:"Pick a custom color",hexInput:"Hex color"},pagination:{previous:"Previous page",next:"Next page",first:"First page",last:"Last page",page:"Page",label:"Pagination",pageSize:"Items per page"},sidebar:{expand:"Expand sidebar",collapse:"Collapse sidebar",resize:"Resize sidebar"},toolbar:{menuOpen:"Open menu",menuClose:"Close menu",menu:"Menu",skipLink:"Skip to main content",navigation:"Main navigation"},rating:{label:"Rating",valueText:(e,r)=>`${e} out of ${r}`,summary:(e,r)=>`${e}: ${r}`,noValue:"Not rated",clear:"Clear rating"},select:{searchPlaceholder:"Search\u2026",selectPlaceholder:"Select\u2026"},calendar:{moreEvents:"+{count} more"},textarea:{formatToolbar:"Text formatting",bold:"Bold",italic:"Italic",underline:"Underline",align:"Text alignment",alignStart:"Align left",alignCenter:"Center",alignEnd:"Align right",alignJustify:"Justify",textColor:"Text color",highlight:"Highlight",colorClear:"Default"},schedulerEventEditor:{colors:{red:"Red",purple:"Purple",yellow:"Yellow",blue:"Blue",green:"Green",pink:"Pink"},title:"Title",description:"Description",allDay:"All day",date:"Date",endDate:"End date",startTime:"Start time",endTime:"End time",location:"Location",notes:"Notes",priority:"Priority",color:"Color",required:"is required",guests:"Guests",addGuest:"Add guest",removeGuest:"Remove"},breadcrumb:{label:"Breadcrumb"},stepper:{label:"Progress"},validation:{valueMissing:"This field is required",tooShort:(e,r)=>`Please lengthen this text to ${e} characters or more (you are currently using ${r} characters).`,tooLong:(e,r)=>`Please shorten this text to ${e} characters or less (you are currently using ${r} characters).`,invalidDate:"Enter a valid date",invalidTime:"Enter a valid time"}};var i={common:{close:"Fermer",cancel:"Annuler",confirm:"Confirmer",save:"Enregistrer",noValue:"Aucune valeur",apply:"Appliquer",today:"Aujourd'hui",edit:"Modifier",delete:"Supprimer",loading:"Chargement\u2026",noResults:"Aucun r\xE9sultat",keepEditing:"Continuer la modification",discard:"Abandonner"},datePicker:{openCalendar:"Ouvrir le calendrier",previousMonth:"Mois pr\xE9c\xE9dent",chooseMonthYear:"Choisir le mois et l'ann\xE9e",nextMonth:"Mois suivant",previousYear:"Ann\xE9e pr\xE9c\xE9dente",chooseYear:"Choisir l'ann\xE9e",nextYear:"Ann\xE9e suivante",previousYears:"Ann\xE9es pr\xE9c\xE9dentes",nextYears:"Ann\xE9es suivantes",time:"Heure",amPm:"AM/PM",hour:"Heure",minute:"Minute",day:"Jour",month:"Mois",year:"Ann\xE9e",startDate:"Date de d\xE9but",endDate:"Date de fin",heading:{day:{single:"S\xE9lectionner une date",range:"S\xE9lectionner une plage de dates"},month:{single:"S\xE9lectionner un mois",range:"S\xE9lectionner une plage de mois"},year:{single:"S\xE9lectionner une ann\xE9e",range:"S\xE9lectionner une plage d'ann\xE9es"}},modalPreview:{day:{single:"S\xE9lectionner une date",range:"S\xE9lectionner une plage de dates"},month:{single:"S\xE9lectionner un mois",range:"S\xE9lectionner une plage de mois"},year:{single:"S\xE9lectionner une ann\xE9e",range:"S\xE9lectionner une plage d'ann\xE9es"}},dayPlaceholder:"jj",monthPlaceholder:"mm",yearPlaceholder:"aaaa",hourPlaceholder:"hh",minutePlaceholder:"mm"},timePicker:{openClock:"Ouvrir l'horloge",amPm:"AM/PM",hour:"Heure",minute:"Minute",time:"Heure",selectATime:"S\xE9lectionner une heure",increaseHour:"Augmenter l'heure",decreaseHour:"Diminuer l'heure",increaseMinute:"Augmenter les minutes",decreaseMinute:"Diminuer les minutes",togglePeriod:"Basculer AM/PM",mustBeAtOrAfter:e=>`L'heure doit \xEAtre \xE0 ${e} ou apr\xE8s`,mustBeAtOrBefore:e=>`L'heure doit \xEAtre \xE0 ${e} ou avant`,hourPlaceholder:"hh",minutePlaceholder:"mm"},scheduler:{previous:"P\xE9riode pr\xE9c\xE9dente",next:"P\xE9riode suivante",calendarView:"Vue du calendrier",newEvent:"Nouvel \xE9v\xE9nement",viewDay:"Jour",viewWeek:"Semaine",viewWorkWeek:"Semaine de travail",viewMonth:"Mois",viewYear:"Ann\xE9e",priorities:{low:"Basse",medium:"Moyenne",high:"Haute",critical:"Critique"}},carousel:{label:"Carrousel",ofTotal:(e,r)=>`${e} sur ${r}`,slideNavigation:"Navigation des diapositives",previous:"Diapositive pr\xE9c\xE9dente",next:"Diapositive suivante",goToSlide:(e,r)=>`Aller \xE0 la diapositive ${e} sur ${r}`},imageCarousel:{gallery:"Galerie d'images",previous:"Image pr\xE9c\xE9dente",next:"Image suivante",expand:"Voir l'image en taille r\xE9elle",lightbox:"Visionneuse d'images",selectImage:"S\xE9lectionner une image",showImage:(e,r)=>`Afficher l'image ${e} sur ${r}`,imageNavigation:"Navigation des images",goToImage:(e,r)=>`Aller \xE0 l'image ${e} sur ${r}`,allImages:"Toutes les images"},chip:{remove:"Retirer"},passwordStrength:{label:"Robustesse du mot de passe",levels:["Faible","Moyen","Bon","Fort"],caption:e=>`${e}\xA0:`},infiniteList:{loadingMore:"Chargement d'autres \xE9l\xE9ments\u2026",itemsLoaded:e=>e>1?`${e} \xE9l\xE9ments suppl\xE9mentaires charg\xE9s`:`${e} \xE9l\xE9ment suppl\xE9mentaire charg\xE9`},table:{loadingMore:"Chargement d'autres lignes\u2026",selected:"s\xE9lectionn\xE9e(s)",selectAll:"Tout s\xE9lectionner",deselectAll:"Tout d\xE9s\xE9lectionner",selectAllRows:"S\xE9lectionner toutes les lignes",deselectAllRows:"D\xE9s\xE9lectionner toutes les lignes",selectRow:"S\xE9lectionner la ligne",selectionActions:"Actions de s\xE9lection",clearSelection:"Vider la s\xE9lection",rowActions:"Actions de la ligne",rowNumber:"Num\xE9ro de ligne",scrollRegion:"Tableau d\xE9filant",rowsLoaded:e=>e>1?`${e} lignes suppl\xE9mentaires charg\xE9es`:`${e} ligne suppl\xE9mentaire charg\xE9e`},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\xE9lectionner un fichier",open:"Ouvrir dans un nouvel onglet",drop:"Glissez-d\xE9posez des fichiers ici, ou",browse:"parcourez vos fichiers",removeAll:"Tout retirer",removeSingle:"Retirer",selectAll:"Tout s\xE9lectionner",deleteSelected:"Supprimer la s\xE9lection",count:e=>`${e} fichier${e>1?"s":""}`},inputPhone:{selectCountry:"S\xE9lectionner un pays",searchCountry:"Rechercher un pays\u2026"},colorPicker:{noColor:"Aucune couleur s\xE9lectionn\xE9e",swatches:"Pr\xE9d\xE9finies",custom:"Personnalis\xE9e",nativeInput:"Choisir une couleur personnalis\xE9e",hexInput:"Couleur hexad\xE9cimale"},pagination:{previous:"Page pr\xE9c\xE9dente",next:"Page suivante",first:"Premi\xE8re page",last:"Derni\xE8re page",page:"Page",label:"Pagination",pageSize:"\xC9l\xE9ments par page"},sidebar:{expand:"D\xE9plier la barre lat\xE9rale",collapse:"Replier la barre lat\xE9rale",resize:"Redimensionner la barre lat\xE9rale"},toolbar:{menuOpen:"Ouvrir le menu",menuClose:"Fermer le menu",menu:"Menu",skipLink:"Aller au contenu principal",navigation:"Navigation principale"},rating:{label:"Note",valueText:(e,r)=>`${e} sur ${r}`,summary:(e,r)=>`${e}\xA0: ${r}`,noValue:"Non not\xE9",clear:"Effacer la note"},select:{searchPlaceholder:"Rechercher\u2026",selectPlaceholder:"S\xE9lectionner\u2026"},calendar:{moreEvents:"+{count} autres"},textarea:{formatToolbar:"Mise en forme du texte",bold:"Gras",italic:"Italique",underline:"Soulign\xE9",align:"Alignement du texte",alignStart:"Aligner \xE0 gauche",alignCenter:"Centrer",alignEnd:"Aligner \xE0 droite",alignJustify:"Justifier",textColor:"Couleur du texte",highlight:"Surlignage",colorClear:"Par d\xE9faut"},schedulerEventEditor:{colors:{red:"Rouge",purple:"Violet",yellow:"Jaune",blue:"Bleu",green:"Vert",pink:"Rose"},title:"Titre",description:"Description",allDay:"Toute la journ\xE9e",date:"Date",endDate:"Date de fin",startTime:"Heure de d\xE9but",endTime:"Heure de fin",location:"Lieu",notes:"Notes",priority:"Priorit\xE9",color:"Couleur",required:"est obligatoire",guests:"Invit\xE9s",addGuest:"Ajouter un invit\xE9",removeGuest:"Retirer"},breadcrumb:{label:"Fil d'Ariane"},stepper:{label:"Progression"},validation:{valueMissing:"Ce champ est obligatoire",tooShort:(e,r)=>`Saisissez au moins ${e} caract\xE8res (actuellement ${r}).`,tooLong:(e,r)=>`Saisissez au plus ${e} caract\xE8res (actuellement ${r}).`,invalidDate:"Saisissez une date valide",invalidTime:"Saisissez une heure valide"}};var g={en:a,fr:i};export{n as a,g as b};

package/dist/cdn/components/chunks/chunk-IJJ67C66.js

@@ -1 +0,0 @@
-var e=class a extends Event{static{this.eventName="eunperiodchange"}constructor(n,t,r){super(a.eventName,{bubbles:!0,composed:!1}),this.view=n,this.rangeStart=t,this.rangeEnd=r}};export{e as a};