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

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, useDefault: true })
+], EunomiaDescriptionList.prototype, "layout", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], EunomiaDescriptionList.prototype, "align", void 0);
+__decorate([
+    property({ type: Number, reflect: true, useDefault: 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;

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,8 +30,13 @@ 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-border-width] - Sets the border width of the background box. Zero by default
+ * @cssprop [--icon-border-color] - Sets the border color of the background box, once --icon-border-width is set
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
+ * @csspart wrapper - The background box around the icon, for effects its CSS custom properties don't cover
  * @element eun-icon
  */
 export declare class EunomiaIcon extends LitElement {

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

@@ -86,8 +86,13 @@ 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-border-width] - Sets the border width of the background box. Zero by default
+ * @cssprop [--icon-border-color] - Sets the border color of the background box, once --icon-border-width is set
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
+ * @csspart wrapper - The background box around the icon, for effects its CSS custom properties don't cover
  * @element eun-icon
  */
 let EunomiaIcon = class EunomiaIcon extends LitElement {

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

@@ -8,6 +8,8 @@
  * --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-border-width : border width of the background box. Zero by default.
+ * --icon-border-color : border color of the background box.
  * --icon-transition : transition applied to the icon's color, background,
  *   and size changes. 0.2s by default.
  */

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-border-width : border width of the background box. Zero by default.
+ * --icon-border-color : border color of the background box.
  * --icon-transition : transition applied to the icon's color, background,
  *   and size changes. 0.2s by default.
  */
@@ -23,10 +25,15 @@ 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: var(--icon-border-width, 0) solid
+      var(--icon-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
     white-space: normal;