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

package/dist/components/content/description-list/description-list.styles.js

@@ -0,0 +1,185 @@
+import { css } from "lit";
+import { cssFrom } from "../../../utils/media.styles.js";
+/**
+ * Light DOM style of the native `<dl>` slotted into `eun-description-list`.
+ * The component has no shadow root, so this one sheet styles it entirely:
+ * `eun-description-list` adopts it into its own root node (the document,
+ * or the shadow root it lives in), and the exact same rules are published
+ * as `description-list-ssr.css`, so a server-rendered list looks final
+ * before any script runs.
+ *
+ * Mobile first: the label sits above its value and the pairs fill a
+ * single column by default. From the `mobile` breakpoint up, the label
+ * moves beside its value unless `layout="stacked"`, and `columns` takes
+ * effect. A pair is either a bare `<dt>`/`<dd>` run or a `<div>` wrapping
+ * one; `columns` needs the `<div>` wrappers, since each one becomes a grid
+ * cell, and its first row gets no divider.
+ *
+ * Every rule is scoped to `eun-description-list > dl`, so it never touches
+ * a `<dl>` outside of it, and stays at a low specificity a consumer class
+ * overrides easily.
+ *
+ * Custom css variables:
+ * [--description-list-font-size] - Set a custom font size
+ * [--description-list-label-color] - Set a custom label (`<dt>`) color
+ * [--description-list-label-font-weight] - Set a custom label (`<dt>`) font weight
+ * [--description-list-value-color] - Set a custom value (`<dd>`) color
+ * [--description-list-label-width] - Set a custom label column width, beside the value
+ * [--description-list-row-gap] - Set a custom space between two pairs
+ * [--description-list-column-gap] - Set a custom space between a label and its value, and between two columns
+ * [--description-list-label-gap] - Set a custom space between a label and its value, above it
+ * [--description-list-divider-color] - Set a custom divider color, with `divided`
+ */
+const base = css `
+  eun-description-list {
+    --_dl-row-gap: var(--description-list-row-gap, var(--eun-space-m, 1rem));
+    --_dl-column-gap: var(
+      --description-list-column-gap,
+      var(--eun-space-l, 2rem)
+    );
+    --_dl-label-gap: var(
+      --description-list-label-gap,
+      var(--eun-space-xs, 0.25rem)
+    );
+    --_dl-label-width: var(--description-list-label-width, fit-content(40%));
+    --_dl-divider: var(--eun-border-width-s, 1px) solid
+      var(--description-list-divider-color, var(--eun-border-color, #dee0e7));
+    --_dl-columns: 1;
+    display: block;
+  }
+
+  eun-description-list > dl {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: baseline;
+    margin: 0;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--description-list-font-size, var(--eun-font-size-s, 13px));
+    color: var(--description-list-value-color, var(--eun-text-color, #071621));
+  }
+
+  eun-description-list > dl > div {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: baseline;
+  }
+
+  eun-description-list > dl > dt,
+  eun-description-list > dl > div > dt {
+    grid-column: 1;
+    margin: 0;
+    font-weight: var(--description-list-label-font-weight, inherit);
+    color: var(
+      --description-list-label-color,
+      var(--eun-text-secondary, #484e61)
+    );
+  }
+
+  eun-description-list > dl > dd,
+  eun-description-list > dl > div > dd {
+    grid-column: 1;
+    min-width: 0;
+    margin: var(--_dl-label-gap) 0 0;
+    overflow-wrap: anywhere;
+  }
+
+  eun-description-list > dl > dd + dt,
+  eun-description-list > dl > div + div {
+    margin-top: var(--_dl-row-gap);
+  }
+
+  eun-description-list[divided] > dl > dd + dt,
+  eun-description-list[divided] > dl > div + div {
+    padding-top: var(--_dl-row-gap);
+    border-top: var(--_dl-divider);
+  }
+
+  @media ${cssFrom("mobile")} {
+    eun-description-list:not([layout="stacked"]) > dl {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd {
+      grid-column: 2;
+      margin-top: 0;
+      padding-inline-start: var(--_dl-column-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd + dd {
+      margin-top: var(--_dl-label-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dt + dd {
+      margin-top: var(--_dl-row-gap);
+    }
+
+    eun-description-list[divided]:not([layout="stacked"]) > dl > dd + dt + dd {
+      padding-top: var(--_dl-row-gap);
+      border-top: var(--_dl-divider);
+    }
+  }
+
+  eun-description-list[align="center"] > dl {
+    text-align: center;
+  }
+
+  eun-description-list[align="end"] > dl {
+    text-align: end;
+  }
+
+  eun-description-list[columns="2"] {
+    --_dl-columns: 2;
+  }
+
+  eun-description-list[columns="3"] {
+    --_dl-columns: 3;
+  }
+
+  eun-description-list[columns="4"] {
+    --_dl-columns: 4;
+  }
+
+  @media ${cssFrom("mobile")} {
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > dd,
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > div
+      > dd {
+      text-align: end;
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]) > dl {
+      grid-template-columns: repeat(var(--_dl-columns), minmax(0, 1fr));
+      column-gap: var(--_dl-column-gap);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"])
+      > dl
+      > div {
+      grid-column: auto;
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]):not(
+        [layout="stacked"]
+      )
+      > dl
+      > div {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list[columns="2"] > dl > div:nth-child(-n + 2),
+    eun-description-list[columns="3"] > dl > div:nth-child(-n + 3),
+    eun-description-list[columns="4"] > dl > div:nth-child(-n + 4) {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+  }
+`;
+export const descriptionListStyles = base;

package/dist/components/content/icon/icon.d.ts

@@ -30,7 +30,10 @@ export declare function setIconBaseUrl(url: string): void;
  * @cssprop [--icon-color] - Sets the color of the icon, defaulting to the surrounding text color
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
+ * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
+ * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon
  */
 export declare class EunomiaIcon extends LitElement {
@@ -60,9 +63,18 @@ export declare class EunomiaIcon extends LitElement {
     /**
      * Sets the size of the icon. Accepts any valid CSS size unit.
      * - If size ends with `%`, it will be converted to `rem`.
-     * - If no size is provided, defaults to `1rem`.
+     * - If no size is provided, falls back to `--icon-size`, then `1rem`.
+     *
+     * Applied on the internal wrapper (see {@link cssSize}) rather than as an
+     * inline style on the host, which an SSR framework would report as a
+     * hydration mismatch.
      */
     set size(size: string | undefined);
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    private get cssSize();
     /**
      * Gets the current size value set for the icon.
      */
@@ -149,7 +161,7 @@ export declare class EunomiaIcon extends LitElement {
      * Renders the icon component. If no `name` is set, renders nothing.
      * If SVG markup is available, it is rendered using `unsafeSVG`.
      */
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/content/icon/icon.js

@@ -4,21 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var _EunomiaIcon_size;
 import { html, LitElement, nothing } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { iconStyles } from "./icon.style.js";
 /**
  * Tag name of the icon component.
@@ -48,6 +49,14 @@ let iconBaseUrl;
  * that already tried to load before the base URL was set.
  */
 const connectedIcons = new Set();
+/**
+ * SVG markup already requested, keyed by URL, so every icon sharing a name
+ * (the same glyph repeated down a list, or rendered again after a
+ * re-mount) shares one request and renders from memory afterwards instead
+ * of waiting on its own round trip. A failed request is dropped, so a
+ * later attempt (after `setIconBaseUrl`, say) retries it.
+ */
+const svgCache = new Map();
 /**
  * Sets the URL the icon SVGs are served from, laid out as
  * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
@@ -77,7 +86,10 @@ export function setIconBaseUrl(url) {
  * @cssprop [--icon-color] - Sets the color of the icon, defaulting to the surrounding text color
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
+ * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
+ * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon
  */
 let EunomiaIcon = class EunomiaIcon extends LitElement {
@@ -92,24 +104,33 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
     /**
      * Sets the size of the icon. Accepts any valid CSS size unit.
      * - If size ends with `%`, it will be converted to `rem`.
-     * - If no size is provided, defaults to `1rem`.
+     * - If no size is provided, falls back to `--icon-size`, then `1rem`.
+     *
+     * Applied on the internal wrapper (see {@link cssSize}) rather than as an
+     * inline style on the host, which an SSR framework would report as a
+     * hydration mismatch.
      */
     set size(size) {
+        const previous = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         __classPrivateFieldSet(this, _EunomiaIcon_size, size, "f");
-        let cssSize;
+        this.requestUpdate("size", previous);
+    }
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    get cssSize() {
+        const size = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         if (!size) {
-            cssSize = "1rem";
-        }
-        else if (/%$/.test(size)) {
-            cssSize = `${parseFloat(size) / 100}rem`;
+            return undefined;
         }
-        else if (/^\d+(\.\d+)?$/.test(size)) {
-            cssSize = `${size}px`;
+        if (/%$/.test(size)) {
+            return `${parseFloat(size) / 100}rem`;
         }
-        else {
-            cssSize = size;
+        if (/^\d+(\.\d+)?$/.test(size)) {
+            return `${size}px`;
         }
-        this.style.setProperty("--_size", cssSize);
+        return size;
     }
     /**
      * Gets the current size value set for the icon.
@@ -215,11 +236,18 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
             moduleUrl.pathname = `${moduleDir}/icons/${shape}/${name}.svg`;
             url = moduleUrl.href;
         }
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error(`Icon not found: ${url}`);
+        let svg = svgCache.get(url);
+        if (!svg) {
+            svg = fetch(url).then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Icon not found: ${url}`);
+                }
+                return response.text();
+            });
+            svgCache.set(url, svg);
+            svg.catch(() => svgCache.delete(url));
         }
-        return response.text();
+        return svg;
     }
     /**
      * Determines the shape to render : the explicit `shape` property always
@@ -273,7 +301,11 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
         if (!this.name) {
             return nothing;
         }
-        return html `<span part="wrapper" aria-hidden="true">
+        return html `<span
+      part="wrapper"
+      aria-hidden="true"
+      style=${styleMap({ "--_size": this.cssSize })}
+    >
       ${this.svgMarkup ? unsafeSVG(this.svgMarkup) : nothing}
     </span>`;
     }
@@ -296,7 +328,7 @@ __decorate([
     state()
 ], EunomiaIcon.prototype, "svgMarkup", void 0);
 __decorate([
-    property({ hasChanged: () => false })
+    property({ attribute: "size" })
 ], EunomiaIcon.prototype, "size", null);
 EunomiaIcon = __decorate([
     customElement(EunomiaIconTagName)

package/dist/components/content/icon/icon.style.d.ts

@@ -8,5 +8,7 @@
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export declare const iconStyles: import("lit").CSSResult;

package/dist/components/content/icon/icon.style.js

@@ -9,6 +9,8 @@ import { css } from "lit";
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export const iconStyles = css `
   :host {
@@ -21,15 +23,19 @@ export const iconStyles = css `
     box-sizing: content-box;
     width: var(--_size);
     height: var(--_size);
-    padding: var(--icon-padding, 0);
+    padding: var(
+      --icon-padding,
+      var(--icon-padding-block, 0) var(--icon-padding-inline, 0)
+    );
     fill: var(--_color);
     color: var(--_color);
     background-color: var(--_background);
     border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
+    white-space: normal;
     display: inline-block;
     user-select: none;
-    transition: 0.2s;
+    transition: var(--icon-transition, 0.2s);
   }
   svg {
     width: 100%;

package/dist/components/content/image-carousel/image-carousel.d.ts

@@ -60,22 +60,26 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @prop {boolean} [autoplay=false] - Automatically advances to the next image on a set interval. Pauses on hover or focus and while the lightbox is open, but renders no pause or play control of its own, so pair this with a visible control calling the public pause and resume methods, since a moving gallery nobody can stop fails accessibility guidelines
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
- * @attr {string} aria-label - The accessible name for the main stage. Defaults to "Image gallery"
- * @prop {string} [ariaLabelPrevious='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-previous='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelNext='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-next='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelExpand='View full-size image'] - The accessible label of the main stage's expand control
- * @attr {string} [aria-label-expand='View full-size image'] - The accessible label of the main stage's expand control
- * @prop {string} [ariaLabelLightbox='Image viewer'] - The accessible name of the lightbox dialog
- * @attr {string} [aria-label-lightbox='Image viewer'] - The accessible name of the lightbox dialog
+ * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
+ * @prop {string} [ariaLabelPrevious] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [aria-label-previous] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [ariaLabelNext] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [aria-label-next] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [ariaLabelExpand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [aria-label-expand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [aria-label-lightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
  * @cssprop [--image-carousel-border-radius] - Sets the corner radius of the main stage
  * @cssprop [--image-carousel-background] - Sets the background color behind the main stage, visible when the image is set to fit without cropping
+ * @cssprop [--image-carousel-border-width] - Sets the border width of the main stage, once a border color is set
+ * @cssprop [--image-carousel-border-color] - Sets the border color of the main stage, which has no border by default
  * @cssprop [--image-carousel-thumbnail-size] - Sets the size of each thumbnail
  * @cssprop [--image-carousel-thumbnail-gap] - Sets the gap between thumbnails, and between the strip and the main stage
+ * @cssprop [--image-carousel-thumbnail-border-color] - Sets the border color of the thumbnails and of the lightbox's grid items at rest, transparent by default
+ * @cssprop [--image-carousel-thumbnail-active-border-color] - Sets the border color of the active thumbnail and of the lightbox's active grid item
  * @cssprop [--image-carousel-nav-color] - Sets the icon color of the main stage's previous and next controls
  * @cssprop [--image-carousel-transition-duration] - Sets the duration of the transition animation between images, for click, keyboard, and autoplay changes only, since a touch swipe never plays this
  * @cssprop [--image-carousel-swipe-duration] - Sets the duration of the main stage's touch swipe settling into place on release, whether committing or springing back. Forced to zero under reduced motion settings or when transitions are turned off
@@ -85,6 +89,7 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @cssprop [--image-carousel-lightbox-image-radius] - Sets the corner radius of the lightbox's own image
  * @cssprop [--image-carousel-grid-width] - Sets the width of the lightbox's grid column
  * @cssprop [--image-carousel-grid-columns] - Sets the column count of the lightbox's grid
+ * @cssprop [--image-carousel-divider-color] - Sets the color of the line between the lightbox's main image and its grid
  * @cssprop [--image-carousel-dot-size] - Sets the size of the pagination dots
  * @cssprop [--image-carousel-dot-gap] - Sets the gap between pagination dots
  * @cssprop [--image-carousel-dot-color] - Sets the color of the pagination dots
@@ -182,24 +187,30 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
     autoplayInterval: number;
     /**
      * Accessible label of the Previous controls (main stage and lightbox).
-     * @default Previous image
+     * Resolved from the locale dictionary when unset, so it follows
+     * `locale` automatically.
+     * @default {i18n:imageCarousel.previous}
      */
-    ariaLabelPrevious: string;
+    ariaLabelPrevious?: string;
     /**
      * Accessible label of the Next controls (main stage and lightbox).
-     * @default Next image
+     * Resolved from the locale dictionary when unset, so it follows
+     * `locale` automatically.
+     * @default {i18n:imageCarousel.next}
      */
-    ariaLabelNext: string;
+    ariaLabelNext?: string;
     /**
-     * Accessible label of the main stage's expand control.
-     * @default View full-size image
+     * Accessible label of the main stage's expand control. Resolved from the
+     * locale dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:imageCarousel.expand}
      */
-    ariaLabelExpand: string;
+    ariaLabelExpand?: string;
     /**
-     * Accessible name of the lightbox dialog.
-     * @default Image viewer
+     * Accessible name of the lightbox dialog. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:imageCarousel.lightbox}
      */
-    ariaLabelLightbox: string;
+    ariaLabelLightbox?: string;
     /**
      * Text of the visually-hidden live region, debounced so rapid prev/next
      * clicks announce once rather than flooding it.