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

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

@@ -49,14 +49,16 @@ export const EunomiaCollapseTagName = "eun-collapse";
  * trigger, so it's never dropped into now-hidden content.
  *
  * @slot [default] - The panel's content, shown when expanded, combining with richText if both are set. Only the panel's own padding and text color apply to it, with no margins, typography, or list styles forced onto slotted content
+ * @slot [heading] - The trigger's heading as light DOM content, so it's part of the server-rendered HTML. Falls back to heading when empty. Keep it to text and inline phrasing, since it renders inside the trigger button
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
- * @slot [tag] - Replaces the trigger's tag entirely, for example with a custom colored tag. Falls back to the plain text tag when empty
+ * @slot [subheading] - The secondary text under the heading as light DOM content, so it's part of the server-rendered HTML. Falls back to subheading when empty
+ * @slot [tag] - The trigger's tag as light DOM content. Plain elements, such as a span of text, keep the default tag style, while a custom element, such as a colored eun-tag, replaces the tag entirely. Falls back to tag when empty
  * @slot [chevron] - Replaces the trailing indicator entirely with any content, not just an icon element. Falls back to chevronIcon when empty. Whatever ends up there still rotates while open, unless that rotation is set to zero
- * @prop {string} heading - The trigger's heading text
- * @prop {string} [subheading] - Optional secondary text shown under the heading
+ * @prop {string} heading - The trigger's heading text. Ignored once something is slotted into heading
+ * @prop {string} [subheading] - Optional secondary text shown under the heading. Ignored once something is slotted into subheading
  * @prop {2 | 3 | 4 | 5 | 6} [level] - Wraps the trigger in a heading element of this level, so screen reader users can jump between items, such as several FAQ entries, by heading. Matches the page's own outline, so it's opt-in rather than assumed
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [icon] - An optional leading icon for the trigger. Ignored once the icon slot has content
- * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Use the tag slot instead for a custom colored badge
+ * @prop {string} [tag] - An optional short label rendered as a default tag in the trigger, such as a count or category. Ignored once something is slotted into tag
  * @prop {import('../icon/icon.type.js').EunomiaIconName} [chevronIcon='add'] - The trailing indicator icon. Ignored once the chevron slot has content. Pair a non-default icon with the chevron rotation custom property, since the default plus-sign-to-cross rotation doesn't suit every icon
  * @prop {string} [richText] - Lightweight formatted content rendered above the default slot. Supports simple lists, links, bold, and italic text
  * @prop {boolean} [open=false] - Whether the panel is currently expanded
@@ -78,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
@@ -143,8 +154,9 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
         this.openedViaFocus = false;
         /**
          * Re-renders when a named slot's assigned content changes, so the
-         * `icon`/`tag`/`chevron` prop fallback correctly appears/disappears as
-         * content is slotted in or removed after the initial render.
+         * `icon`/`subheading`/`tag`/`chevron` prop fallback correctly
+         * appears/disappears as content is slotted in or removed after the
+         * initial render.
          * @private
          */
         this.handleSlotChange = () => {
@@ -164,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);
@@ -364,6 +377,35 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
                 return trigger;
         }
     }
+    /**
+     * Renders the `tag` slot. Plain elements slotted into it (a span of
+     * text, typically) are wrapped in the default tag, so server-rendered
+     * text keeps the tag style ; a custom element (a colored `eun-tag`, a
+     * badge, ...) replaces the tag entirely instead. Read from the light DOM
+     * rather than the slot's assigned elements, so the first render already
+     * picks the right shape before the slot exists.
+     * @private
+     */
+    renderTag() {
+        const slotted = [
+            ...this.querySelectorAll(':scope > [slot="tag"]'),
+        ];
+        const replaced = slotted.some((el) => el.localName.includes("-"));
+        const slot = html `<slot name="tag" @slotchange=${this.handleSlotChange}
+      >${this.tag}</slot
+    >`;
+        if (replaced) {
+            return slot;
+        }
+        if (!this.tag && !slotted.length) {
+            return html `<slot
+        name="tag"
+        class="hidden"
+        @slotchange=${this.handleSlotChange}
+      ></slot>`;
+        }
+        return html `<eun-tag color="primary" size="s" rounded>${slot}</eun-tag>`;
+    }
     render() {
         const trigger = html `
       <button
@@ -388,24 +430,22 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
             : nothing}
           </slot>
           <span id="heading-group">
-            <span id="heading">${this.heading}</span>
-            ${this.subheading
-            ? html `<span id="subheading">${this.subheading}</span>`
-            : nothing}
+            <span id="heading"
+              ><slot name="heading">${this.heading}</slot></span
+            >
+            <span
+              id="subheading"
+              class=${classMap({
+            hidden: !this.subheading && !this.subheadingSlotEls.length,
+        })}
+              ><slot name="subheading" @slotchange=${this.handleSlotChange}
+                >${this.subheading}</slot
+              ></span
+            >
           </span>
         </span>
         <span id="actions">
-          <slot
-            name="tag"
-            class=${classMap({ hidden: !this.tag && !this.tagSlotEls.length })}
-            @slotchange=${this.handleSlotChange}
-          >
-            ${this.tag
-            ? html `<eun-tag color="primary" size="s" rounded
-                  >${this.tag}</eun-tag
-                >`
-            : nothing}
-          </slot>
+          ${this.renderTag()}
           <span id="chevron">
             <slot name="chevron" @slotchange=${this.handleSlotChange}>
               ${this.chevronSlotEls.length
@@ -497,8 +537,8 @@ __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaCollapse.prototype, "iconSlotEls", void 0);
 __decorate([
-    queryAssignedElements({ slot: "tag" })
-], EunomiaCollapse.prototype, "tagSlotEls", void 0);
+    queryAssignedElements({ slot: "subheading" })
+], EunomiaCollapse.prototype, "subheadingSlotEls", void 0);
 __decorate([
     queryAssignedElements({ slot: "chevron" })
 ], EunomiaCollapse.prototype, "chevronSlotEls", void 0);

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,13 +169,29 @@ 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;
+    font: inherit;
+    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);
   }
+  #subheading.hidden {
+    display: none;
+  }
+  #subheading ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
   #actions {
     display: flex;
     align-items: center;
@@ -153,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;
@@ -164,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);
   }
@@ -196,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;