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

package/dist/components/content/card/image-card.styles.js

@@ -16,10 +16,13 @@ const base = css `
   }
 
   #card {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    isolation: isolate;
     box-sizing: border-box;
     height: 100%;
-    overflow: hidden;
+    overflow: var(--card-overflow, hidden);
     border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
     border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
       var(--card-border-color, var(--eun-border-color, #dee0e7));
@@ -29,10 +32,14 @@ const base = css `
     text-decoration: none;
     transition: var(
       --card-transition,
-      transform var(--card-hover-duration, 0.3s) ease,
-      box-shadow var(--card-hover-duration, 0.3s) ease,
-      background-color var(--card-hover-duration, 0.3s) ease,
-      border-color var(--card-hover-duration, 0.3s) ease
+      transform var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      box-shadow var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      background-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      border-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease)
     );
   }
 
@@ -49,6 +56,7 @@ const base = css `
   #card:hover,
   #card:focus-visible {
     border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
     background: var(
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
@@ -56,28 +64,63 @@ const base = css `
   }
 
   :host([href]) #card:hover,
-  :host([href]) #card:focus-visible {
+  :host([href]) #card:focus-visible,
+  #card.slotted-link:hover,
+  #card.focus-visible {
     transform: var(--card-hover-transform, translateY(-4px));
   }
 
-  a#card:focus-visible {
+  #card.slotted-link {
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+    cursor: pointer;
+  }
+  #card.focus-visible {
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
+  }
+
+  a#card:focus-visible,
+  #card.focus-visible {
     outline: 2px solid
       var(--card-focus-outline-color, var(--eun-color-primary-500, #3d6fff));
     outline-offset: 2px;
   }
 
+  ::slotted(a[slot="title"]) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
+  }
+  ::slotted(a[slot="title"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
   ::slotted([slot="image"]) {
     display: block;
+    flex: none;
     width: 100%;
     height: var(--image-card-image-height, 180px);
+    aspect-ratio: var(--image-card-image-aspect-ratio, auto);
     object-fit: cover;
   }
 
   #footer {
+    flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--card-gap, var(--eun-space-s, 8px));
-    padding: var(--card-padding, var(--eun-space-m, 16px));
+    padding: var(
+      --card-padding,
+      var(--card-padding-block, var(--eun-space-m, 16px))
+        var(--card-padding-inline, var(--eun-space-m, 16px))
+    );
+  }
+
+  #footer[hidden] {
+    display: none;
   }
 
   ::slotted(h1),
@@ -89,18 +132,26 @@ const base = css `
   ::slotted(p) {
     margin: 0;
     padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
   }
 
-  ::slotted([slot="title"]) {
-    font-weight: var(--eun-font-weight-l, 700);
+  slot[name="title"] {
+    font-weight: var(--image-card-title-weight, var(--eun-font-weight-l, 700));
     font-size: var(--image-card-title-size, var(--eun-font-size-m, 16px));
-    color: var(--eun-text-color, #071621);
+    color: var(--image-card-title-color, var(--eun-text-color, #071621));
   }
 
-  ::slotted([slot="description"]) {
-    font-weight: var(--eun-font-weight-s, 300);
+  slot[name="description"] {
+    font-weight: var(
+      --image-card-description-weight,
+      var(--eun-font-weight-s, 300)
+    );
     font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
-    color: var(--eun-text-secondary, #484e61);
+    color: var(
+      --image-card-description-color,
+      var(--eun-text-secondary, #484e61)
+    );
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/content/card/sliding-card.d.ts

@@ -46,6 +46,8 @@ declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.j
  * @cssprop [--sliding-card-border-radius] - Sets the corner radius of both layers
  * @cssprop [--sliding-card-back-inset] - Sets how far the back layer sits inside the front layer's own edge, on the top/left/right sides. Keeps the back layer fully hidden underneath the front layer at rest, rather than sized to match it exactly, so the front layer's rounded corners never cut through to whatever's behind the card on the page
  * @cssprop [--sliding-card-padding] - Sets the padding of both layers
+ * @cssprop [--sliding-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
+ * @cssprop [--sliding-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
  * @cssprop [--sliding-card-front-background] - Sets the background color of the front layer, and (since the host itself carries no visible box beyond what the front layer already covers) the host's own background showing through the front layer's rounded corners
  * @cssprop [--sliding-card-back-background] - Sets the background color of the back layer
  * @cssprop [--sliding-card-back-color] - Sets the text color of the back layer

package/dist/components/content/card/sliding-card.js

@@ -58,6 +58,8 @@ export const EunomiaSlidingCardTagName = "eun-sliding-card";
  * @cssprop [--sliding-card-border-radius] - Sets the corner radius of both layers
  * @cssprop [--sliding-card-back-inset] - Sets how far the back layer sits inside the front layer's own edge, on the top/left/right sides. Keeps the back layer fully hidden underneath the front layer at rest, rather than sized to match it exactly, so the front layer's rounded corners never cut through to whatever's behind the card on the page
  * @cssprop [--sliding-card-padding] - Sets the padding of both layers
+ * @cssprop [--sliding-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
+ * @cssprop [--sliding-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sliding-card-padding is set
  * @cssprop [--sliding-card-front-background] - Sets the background color of the front layer, and (since the host itself carries no visible box beyond what the front layer already covers) the host's own background showing through the front layer's rounded corners
  * @cssprop [--sliding-card-back-background] - Sets the background color of the back layer
  * @cssprop [--sliding-card-back-color] - Sets the text color of the back layer

package/dist/components/content/card/sliding-card.styles.js

@@ -65,7 +65,11 @@ const base = css `
       --sliding-card-border-radius,
       var(--eun-border-radius-l, 16px)
     );
-    padding: var(--sliding-card-padding, var(--eun-space-l, 32px));
+    padding: var(
+      --sliding-card-padding,
+      var(--sliding-card-padding-block, var(--eun-space-l, 32px))
+        var(--sliding-card-padding-inline, var(--eun-space-l, 32px))
+    );
     overflow: hidden;
   }
 

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

@@ -68,7 +68,16 @@ export declare const EunomiaCollapseTagName = "eun-collapse";
  * @cssprop [--collapse-focus-outline-color] - Sets the focus outline color of the trigger
  * @cssprop [--collapse-disabled-opacity] - Sets the opacity while disabled
  * @cssprop [--collapse-border-radius] - Sets the corner radius of the trigger and panel
- * @cssprop [--collapse-padding] - Sets the padding of the trigger and panel
+ * @cssprop [--collapse-padding] - Sets the padding of the trigger, and of the panel unless --collapse-panel-padding is set
+ * @cssprop [--collapse-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-panel-padding] - Sets the padding of the panel, falling back to the trigger's padding
+ * @cssprop [--collapse-panel-padding-block] - Sets the vertical padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-panel-padding-inline] - Sets the horizontal padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-heading-font-size] - Sets the font size of the heading
+ * @cssprop [--collapse-subheading-font-size] - Sets the font size of the subheading
+ * @cssprop [--collapse-divider-width] - Sets the width of the line between the trigger and the panel. Zero removes it
+ * @cssprop [--collapse-divider-color] - Sets the color of the line between the trigger and the panel
  * @cssprop [--collapse-gap] - Sets the gap between the trigger's leading icon, heading, and actions
  * @cssprop [--collapse-panel-gap] - Sets the gap between the trigger and the panel while open, with independent set
  * @cssprop [--collapse-transition-duration] - Sets the duration of the open, close, and color transitions

package/dist/components/content/collapse/collapse.js

@@ -80,7 +80,16 @@ export const EunomiaCollapseTagName = "eun-collapse";
  * @cssprop [--collapse-focus-outline-color] - Sets the focus outline color of the trigger
  * @cssprop [--collapse-disabled-opacity] - Sets the opacity while disabled
  * @cssprop [--collapse-border-radius] - Sets the corner radius of the trigger and panel
- * @cssprop [--collapse-padding] - Sets the padding of the trigger and panel
+ * @cssprop [--collapse-padding] - Sets the padding of the trigger, and of the panel unless --collapse-panel-padding is set
+ * @cssprop [--collapse-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * @cssprop [--collapse-panel-padding] - Sets the padding of the panel, falling back to the trigger's padding
+ * @cssprop [--collapse-panel-padding-block] - Sets the vertical padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-panel-padding-inline] - Sets the horizontal padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * @cssprop [--collapse-heading-font-size] - Sets the font size of the heading
+ * @cssprop [--collapse-subheading-font-size] - Sets the font size of the subheading
+ * @cssprop [--collapse-divider-width] - Sets the width of the line between the trigger and the panel. Zero removes it
+ * @cssprop [--collapse-divider-color] - Sets the color of the line between the trigger and the panel
  * @cssprop [--collapse-gap] - Sets the gap between the trigger's leading icon, heading, and actions
  * @cssprop [--collapse-panel-gap] - Sets the gap between the trigger and the panel while open, with independent set
  * @cssprop [--collapse-transition-duration] - Sets the duration of the open, close, and color transitions
@@ -167,7 +176,8 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
          * @private
          */
         this.handlePanelTransitionEnd = (event) => {
-            if (event.target !== this.panelEl || event.propertyName !== "grid-template-rows") {
+            if (event.target !== this.panelEl ||
+                event.propertyName !== "grid-template-rows") {
                 return;
             }
             this.panelEl?.removeEventListener("transitionend", this.handlePanelTransitionEnd);

package/dist/components/content/collapse/collapse.styles.d.ts

@@ -17,7 +17,16 @@
  * [--collapse-focus-outline-color] - Set a custom focus outline color for the trigger
  * [--collapse-disabled-opacity] - Set a custom opacity while disabled
  * [--collapse-border-radius] - Set a custom border radius for the trigger and panel
- * [--collapse-padding] - Set a custom padding for the trigger and panel
+ * [--collapse-padding] - Set a custom padding for the trigger, and for the panel unless --collapse-panel-padding is set
+ * [--collapse-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-panel-padding] - Set a custom padding for the panel, falling back to the trigger's padding
+ * [--collapse-panel-padding-block] - Set a custom vertical padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-panel-padding-inline] - Set a custom horizontal padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-heading-font-size] - Set a custom font size for the heading
+ * [--collapse-subheading-font-size] - Set a custom font size for the subheading
+ * [--collapse-divider-width] - Set a custom width for the line between the trigger and the panel. 0 removes it
+ * [--collapse-divider-color] - Set a custom color for the line between the trigger and the panel
  * [--collapse-gap] - Set a custom gap between the trigger's leading icon, heading, and actions
  * [--collapse-panel-gap] - Set a custom gap between the trigger and the panel while open, with `independent` set
  * [--collapse-transition-duration] - Set a custom duration for the open/close and color transitions

package/dist/components/content/collapse/collapse.styles.js

@@ -18,7 +18,16 @@ import { css } from "lit";
  * [--collapse-focus-outline-color] - Set a custom focus outline color for the trigger
  * [--collapse-disabled-opacity] - Set a custom opacity while disabled
  * [--collapse-border-radius] - Set a custom border radius for the trigger and panel
- * [--collapse-padding] - Set a custom padding for the trigger and panel
+ * [--collapse-padding] - Set a custom padding for the trigger, and for the panel unless --collapse-panel-padding is set
+ * [--collapse-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --collapse-padding is set
+ * [--collapse-panel-padding] - Set a custom padding for the panel, falling back to the trigger's padding
+ * [--collapse-panel-padding-block] - Set a custom vertical padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-panel-padding-inline] - Set a custom horizontal padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
+ * [--collapse-heading-font-size] - Set a custom font size for the heading
+ * [--collapse-subheading-font-size] - Set a custom font size for the subheading
+ * [--collapse-divider-width] - Set a custom width for the line between the trigger and the panel. 0 removes it
+ * [--collapse-divider-color] - Set a custom color for the line between the trigger and the panel
  * [--collapse-gap] - Set a custom gap between the trigger's leading icon, heading, and actions
  * [--collapse-panel-gap] - Set a custom gap between the trigger and the panel while open, with `independent` set
  * [--collapse-transition-duration] - Set a custom duration for the open/close and color transitions
@@ -72,8 +81,29 @@ export const collapseStyles = css `
       --collapse-border-radius,
       var(--eun-border-radius-l, 16px)
     );
-    --_padding: var(--collapse-padding, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--collapse-transition-duration, 0.3s);
+    --_padding: var(
+      --collapse-padding,
+      var(--collapse-padding-block, var(--eun-space-m, 16px))
+        var(--collapse-padding-inline, var(--eun-space-m, 16px))
+    );
+    --_panelPadding: var(
+      --collapse-panel-padding,
+      var(
+        --collapse-padding,
+        var(
+            --collapse-panel-padding-block,
+            var(--collapse-padding-block, var(--eun-space-m, 16px))
+          )
+          var(
+            --collapse-panel-padding-inline,
+            var(--collapse-padding-inline, var(--eun-space-m, 16px))
+          )
+      )
+    );
+    --_transitionDuration: var(
+      --collapse-transition-duration,
+      var(--eun-duration-xl, 300ms)
+    );
   }
   #header {
     display: flex;
@@ -93,10 +123,11 @@ export const collapseStyles = css `
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      color var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out,
-      outline-color var(--_transitionDuration) ease-out,
-      border-radius var(--_transitionDuration) ease-out
+      color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out),
+      outline-color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      border-radius var(--_transitionDuration) var(--eun-easing-out, ease-out)
         var(--_transitionDuration);
   }
   #header eun-icon {
@@ -138,7 +169,7 @@ export const collapseStyles = css `
   #heading {
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--collapse-heading-font-size, var(--eun-font-size-s, 14px));
   }
   #heading ::slotted(*) {
     margin: 0;
@@ -146,7 +177,10 @@ export const collapseStyles = css `
     color: inherit;
   }
   #subheading {
-    font-size: var(--eun-font-size-xs, 14px);
+    font-size: var(
+      --collapse-subheading-font-size,
+      var(--eun-font-size-xs, 14px)
+    );
     font-weight: var(--eun-font-weight-m);
     color: var(--_subheadingColor);
   }
@@ -166,7 +200,8 @@ export const collapseStyles = css `
   }
   #chevron {
     display: inline-flex;
-    transition: transform var(--_transitionDuration) ease-out;
+    transition: transform var(--_transitionDuration)
+      var(--eun-easing-out, ease-out);
   }
   #panel {
     display: grid;
@@ -177,17 +212,19 @@ export const collapseStyles = css `
     border-bottom-right-radius: var(--_borderRadius);
     overflow-anchor: none;
     transition:
-      grid-template-rows var(--_transitionDuration) ease-out,
-      margin-top var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out;
+      grid-template-rows var(--_transitionDuration)
+        var(--eun-easing-out, ease-out),
+      margin-top var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out);
   }
   #panel-inner {
     overflow: hidden;
   }
   #panel-content {
-    border-top: var(--eun-border-width-s, 1px) solid
-      var(--eun-color-grey-300, #dee0e7);
-    padding: var(--_padding);
+    border-top: var(--collapse-divider-width, var(--eun-border-width-s, 1px))
+      solid var(--collapse-divider-color, var(--eun-color-grey-300, #dee0e7));
+    padding: var(--_panelPadding);
     color: var(--_contentColor);
     font-size: var(--_contentFontSize);
   }
@@ -209,8 +246,9 @@ export const collapseStyles = css `
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     transition:
-      color var(--_transitionDuration) ease-out,
-      background-color var(--_transitionDuration) ease-out;
+      color var(--_transitionDuration) var(--eun-easing-out, ease-out),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-out, ease-out);
   }
   .open #panel {
     grid-template-rows: 1fr;

package/dist/components/content/description-list/description-list.d.ts

@@ -0,0 +1,87 @@
+import { ReactiveElement } from "lit";
+/**
+ * Tag name of the description list component.
+ */
+export declare const EunomiaDescriptionListTagName = "eun-description-list";
+/**
+ * Where a description list places each label relative to its value.
+ */
+export type EunomiaDescriptionListLayout = "inline" | "stacked";
+/**
+ * How a description list aligns the text of its labels and values.
+ */
+export type EunomiaDescriptionListAlign = "start" | "center" | "end" | "space-between";
+/**
+ * A list of label and value pairs describing a single object, built on a
+ * native `<dl>` (`<eun-description-list><dl>…</dl></eun-description-list>`).
+ * The list keeps its native semantics (`<dt>` for each label, `<dd>` for
+ * each value), renders before any script runs, and holds any content in a
+ * value: text, links, tags, icons.
+ *
+ * `eun-description-list` has no shadow root and no item component of its
+ * own: it only styles the `<dl>` it wraps, from the light DOM, so nothing
+ * stands between assistive technology and the native list. Each pair is
+ * either a bare `<dt>` followed by one or more `<dd>`, or a `<div>`
+ * wrapping them, which HTML allows inside a `<dl>`. `columns` needs the
+ * `<div>` wrappers.
+ *
+ * The label sits beside its value, and above it below the `mobile`
+ * breakpoint, or always with `layout="stacked"`. `columns` also applies
+ * from the `mobile` breakpoint up, the pairs filling a single column
+ * below it.
+ *
+ * @slot [default] - A native `<dl>`, holding `<dt>`/`<dd>` pairs, each optionally wrapped in a `<div>`
+ * @prop {EunomiaDescriptionListLayout} [layout='inline'] - Places each label beside its value (`inline`), or above it (`stacked`)
+ * @prop {EunomiaDescriptionListAlign} [align='start'] - Aligns the text of the labels and values to the start, the center, or the end ; `space-between` keeps each label at the start and pushes its value to the end, when beside it
+ * @prop {number} [columns=1] - Lays the pairs out in up to 4 columns, from the `mobile` breakpoint up ; each pair must be wrapped in a `<div>`
+ * @prop {boolean} [divided=false] - Draws a divider between two pairs, never above the first row
+ * @cssprop [--description-list-font-size] - Sets the font size of the list
+ * @cssprop [--description-list-label-color] - Sets the color of the labels
+ * @cssprop [--description-list-label-font-weight] - Sets the font weight of the labels
+ * @cssprop [--description-list-value-color] - Sets the color of the values
+ * @cssprop [--description-list-label-width] - Sets the width of the label column when the label sits beside its value ; sized to the longest label, up to 40%, by default
+ * @cssprop [--description-list-row-gap] - Sets the space between two pairs
+ * @cssprop [--description-list-column-gap] - Sets the space between a label and the value beside it, and between two columns
+ * @cssprop [--description-list-label-gap] - Sets the space between a label and the value below it
+ * @cssprop [--description-list-divider-color] - Sets the color of the dividers drawn by `divided`
+ * @element eun-description-list
+ */
+export declare class EunomiaDescriptionList extends ReactiveElement {
+    /**
+     * Places each label beside its value (`inline`), or above it (`stacked`).
+     * An `inline` list still stacks below the `mobile` breakpoint.
+     * @default inline
+     */
+    layout: EunomiaDescriptionListLayout;
+    /**
+     * Aligns the text of the labels and values: `start`, `center`, or
+     * `end`. `space-between` keeps each label at the start and pushes its
+     * value to the end, when the label sits beside it.
+     * @default start
+     */
+    align: EunomiaDescriptionListAlign;
+    /**
+     * Number of columns the pairs are laid out in, from 1 to 4, from the
+     * `mobile` breakpoint up. Below it, the pairs fill a single column.
+     * Each pair must be wrapped in a `<div>`.
+     * @default 1
+     */
+    columns: number;
+    /**
+     * Draws a divider between two pairs. With several columns, it runs
+     * between two rows, never above the first one.
+     * @default false
+     */
+    divided: boolean;
+    /**
+     * Renders into the light DOM: the slotted `<dl>` is styled from there.
+     * @internal
+     */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [EunomiaDescriptionListTagName]: EunomiaDescriptionList;
+    }
+}

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

@@ -0,0 +1,107 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { ReactiveElement } from "lit";
+import { descriptionListStyles } from "./description-list.styles.js";
+import { adoptLightDomStyles } from "../../../utils/light-dom-styles.utils.js";
+/**
+ * Tag name of the description list component.
+ */
+export const EunomiaDescriptionListTagName = "eun-description-list";
+/**
+ * A list of label and value pairs describing a single object, built on a
+ * native `<dl>` (`<eun-description-list><dl>…</dl></eun-description-list>`).
+ * The list keeps its native semantics (`<dt>` for each label, `<dd>` for
+ * each value), renders before any script runs, and holds any content in a
+ * value: text, links, tags, icons.
+ *
+ * `eun-description-list` has no shadow root and no item component of its
+ * own: it only styles the `<dl>` it wraps, from the light DOM, so nothing
+ * stands between assistive technology and the native list. Each pair is
+ * either a bare `<dt>` followed by one or more `<dd>`, or a `<div>`
+ * wrapping them, which HTML allows inside a `<dl>`. `columns` needs the
+ * `<div>` wrappers.
+ *
+ * The label sits beside its value, and above it below the `mobile`
+ * breakpoint, or always with `layout="stacked"`. `columns` also applies
+ * from the `mobile` breakpoint up, the pairs filling a single column
+ * below it.
+ *
+ * @slot [default] - A native `<dl>`, holding `<dt>`/`<dd>` pairs, each optionally wrapped in a `<div>`
+ * @prop {EunomiaDescriptionListLayout} [layout='inline'] - Places each label beside its value (`inline`), or above it (`stacked`)
+ * @prop {EunomiaDescriptionListAlign} [align='start'] - Aligns the text of the labels and values to the start, the center, or the end ; `space-between` keeps each label at the start and pushes its value to the end, when beside it
+ * @prop {number} [columns=1] - Lays the pairs out in up to 4 columns, from the `mobile` breakpoint up ; each pair must be wrapped in a `<div>`
+ * @prop {boolean} [divided=false] - Draws a divider between two pairs, never above the first row
+ * @cssprop [--description-list-font-size] - Sets the font size of the list
+ * @cssprop [--description-list-label-color] - Sets the color of the labels
+ * @cssprop [--description-list-label-font-weight] - Sets the font weight of the labels
+ * @cssprop [--description-list-value-color] - Sets the color of the values
+ * @cssprop [--description-list-label-width] - Sets the width of the label column when the label sits beside its value ; sized to the longest label, up to 40%, by default
+ * @cssprop [--description-list-row-gap] - Sets the space between two pairs
+ * @cssprop [--description-list-column-gap] - Sets the space between a label and the value beside it, and between two columns
+ * @cssprop [--description-list-label-gap] - Sets the space between a label and the value below it
+ * @cssprop [--description-list-divider-color] - Sets the color of the dividers drawn by `divided`
+ * @element eun-description-list
+ */
+let EunomiaDescriptionList = class EunomiaDescriptionList extends ReactiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Places each label beside its value (`inline`), or above it (`stacked`).
+         * An `inline` list still stacks below the `mobile` breakpoint.
+         * @default inline
+         */
+        this.layout = "inline";
+        /**
+         * Aligns the text of the labels and values: `start`, `center`, or
+         * `end`. `space-between` keeps each label at the start and pushes its
+         * value to the end, when the label sits beside it.
+         * @default start
+         */
+        this.align = "start";
+        /**
+         * Number of columns the pairs are laid out in, from 1 to 4, from the
+         * `mobile` breakpoint up. Below it, the pairs fill a single column.
+         * Each pair must be wrapped in a `<div>`.
+         * @default 1
+         */
+        this.columns = 1;
+        /**
+         * Draws a divider between two pairs. With several columns, it runs
+         * between two rows, never above the first one.
+         * @default false
+         */
+        this.divided = false;
+    }
+    /**
+     * Renders into the light DOM: the slotted `<dl>` is styled from there.
+     * @internal
+     */
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        adoptLightDomStyles(this, descriptionListStyles);
+    }
+};
+__decorate([
+    property({ reflect: true })
+], EunomiaDescriptionList.prototype, "layout", void 0);
+__decorate([
+    property({ reflect: true })
+], EunomiaDescriptionList.prototype, "align", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], EunomiaDescriptionList.prototype, "columns", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaDescriptionList.prototype, "divided", void 0);
+EunomiaDescriptionList = __decorate([
+    customElement(EunomiaDescriptionListTagName)
+], EunomiaDescriptionList);
+export { EunomiaDescriptionList };

package/dist/components/content/description-list/description-list.styles.d.ts

@@ -0,0 +1 @@
+export declare const descriptionListStyles: import("lit").CSSResult;