@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/ssr/scheduler-ssr.css

@@ -0,0 +1,182 @@
+:where(
+  :is(
+    eun-calendar,
+    eun-scheduler,
+    eun-scheduler-event,
+    eun-scheduler-event-editor
+  ):not(:defined)
+) {
+  display: block;
+}
+
+:is(eun-calendar, eun-scheduler):not(:defined) {
+  --_bodyHeight: var(--scheduler-body-max-height, 640px);
+  --_viewHeight: var(--_bodyHeight);
+  --_headerHeight: 0px;
+  --_frameHeight: 0px;
+  box-sizing: border-box;
+  container-type: inline-size;
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+}
+
+:is(eun-calendar, eun-scheduler):not(:defined) > * {
+  display: none;
+}
+
+:is(eun-calendar, eun-scheduler):not(:defined)::before {
+  content: "";
+  display: block;
+  height: calc(var(--_headerHeight) + var(--_viewHeight));
+}
+
+:is(eun-calendar, eun-scheduler)[view="month"]:not(:defined) {
+  --_viewHeight: min(653px, var(--scheduler-body-max-height, 653px));
+}
+
+eun-calendar:is([day-start-hour], [day-end-hour]):not(:defined)::before {
+  content: none;
+}
+
+eun-scheduler:not(:defined) {
+  --_headerHeight: 103px;
+  border: 1px solid
+    var(--scheduler-border-color, var(--eun-border-color, #dee0e7));
+  border-radius: var(--eun-border-radius-m, 10px);
+  background: var(--scheduler-background, var(--eun-surface-color, #ffffff));
+}
+
+@media (width >= 768px) {
+  eun-scheduler[readonly]:not(:defined) {
+    --_headerHeight: 101px;
+  }
+}
+
+@container (width >= 768px) {
+  :is(eun-calendar, eun-scheduler)[view="year"]:not(:defined)::before {
+    height: calc(var(--_headerHeight) + var(--_bodyHeight) + 32px);
+  }
+}
+
+@media (width < 768px) {
+  eun-scheduler:not(:defined) {
+    --_headerHeight: 84px;
+  }
+
+  :is(eun-calendar, eun-scheduler):is(
+      :not([view]),
+      [view="week"],
+      [view="work-week"]
+    ):not(:defined) {
+    --_viewHeight: calc(var(--_bodyHeight) + 54px);
+  }
+}
+
+eun-scheduler-event:not(:defined) {
+  --_accent: var(--eun-color-blue-600, #0aa5a8);
+  --_tintBase: var(--eun-color-blue-500, #3bb3b9);
+  box-sizing: border-box;
+  padding: var(
+    --scheduler-event-padding,
+    var(--scheduler-event-padding-block, var(--eun-space-xs, 4px))
+      var(--scheduler-event-padding-inline, var(--eun-space-xs, 4px))
+  );
+  padding-inline-start: calc(
+    var(--scheduler-event-padding-inline, var(--eun-space-xs, 4px)) +
+      var(--scheduler-event-bar-width, 3px) +
+      var(--scheduler-event-gap, var(--eun-space-xs, 4px))
+  );
+  overflow: hidden;
+  border-radius: var(--scheduler-event-radius, var(--eun-border-radius-s, 5px));
+  background:
+    linear-gradient(var(--_accent), var(--_accent))
+      var(--scheduler-event-padding-inline, var(--eun-space-xs, 4px)) center /
+      var(--scheduler-event-bar-width, 3px)
+      calc(100% - 2 * var(--eun-space-xs, 4px)) no-repeat,
+    color-mix(
+      in srgb,
+      var(--_tintBase) var(--scheduler-event-opaque-tint, 16%),
+      var(--eun-surface-color, #ffffff)
+    );
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+eun-scheduler-event[color="red"]:not(:defined) {
+  --_accent: var(--eun-color-red-600, #ed1b2f);
+  --_tintBase: var(--eun-color-red-500, #f14959);
+}
+eun-scheduler-event[color="purple"]:not(:defined) {
+  --_accent: var(--eun-color-purple-600, #991bed);
+  --_tintBase: var(--eun-color-purple-500, #9562e3);
+}
+eun-scheduler-event[color="yellow"]:not(:defined) {
+  --_accent: var(--eun-color-yellow-600, #e0e000);
+  --_tintBase: var(--eun-color-yellow-500, #f0f050);
+}
+eun-scheduler-event[color="green"]:not(:defined) {
+  --_accent: var(--eun-color-green-600, #1bed22);
+  --_tintBase: var(--eun-color-green-500, #49f15f);
+}
+eun-scheduler-event[color="pink"]:not(:defined) {
+  --_accent: var(--eun-color-pink-600, #c300ff);
+  --_tintBase: var(--eun-color-pink-500, #d05df3);
+}
+
+eun-scheduler-event[appearance="transparent"]:not(:defined) {
+  background-color: color-mix(
+    in srgb,
+    var(--_tintBase) var(--scheduler-event-transparent-tint, 22%),
+    transparent
+  );
+}
+eun-scheduler-event[appearance="ghost"]:not(:defined) {
+  background-color: transparent;
+}
+
+eun-scheduler-event:not(:defined)::before {
+  content: attr(label) "\200b";
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--scheduler-event-title-color, var(--eun-text-color, #071621));
+  font-size: 12px;
+  font-weight: var(--eun-font-weight-m, 600);
+}
+
+eun-scheduler-event:not([hide-time]):not([direction="row"]):not(
+    :defined
+  )::after {
+  content: "\200b";
+  display: block;
+  font-size: 11px;
+}
+
+/*
+ * The editor's ten field labels, as many lines of text so they follow the
+ * font, and its row of color swatches, standing on the text baseline as
+ * they do. Then its fixed part : the field boxes, the gaps between fields,
+ * the two 6rem text areas and, unless hidden, the action buttons.
+ */
+eun-scheduler-event-editor:not(:defined) {
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
+}
+
+eun-scheduler-event-editor:not(:defined)::before {
+  content: "\200b\A\200b\A\200b\A\200b\A\200b\A\200b\A\200b\A\200b\A\200b\A\200b";
+  display: block;
+  padding-block-end: calc(12rem + 417px);
+  white-space: pre;
+  line-height: normal;
+}
+
+eun-scheduler-event-editor:not([hide-actions]):not(:defined)::before {
+  padding-block-end: calc(12rem + 483px);
+}
+
+eun-scheduler-event-editor:not(:defined)::after {
+  content: "";
+  display: inline-block;
+  height: 20px;
+}

package/dist/ssr/stepper-ssr.css

@@ -0,0 +1,136 @@
+:where(eun-stepper:not(:defined)) {
+  display: block;
+  width: 100%;
+}
+
+eun-stepper:not(:defined) {
+  min-height: var(--stepper-indicator-size, 24px);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+}
+
+eun-stepper[steps*='"description"']:not([variant="progress"]):not(
+    :defined
+  )::before {
+  content: "\200b\A\200b";
+  display: block;
+  padding-block-end: 2px;
+  white-space: pre;
+  font-size: var(
+    --stepper-description-font-size,
+    var(--eun-font-size-xs, 12px)
+  );
+}
+
+eun-stepper[steps*='"description"']:not([variant="progress"]):not(
+    :defined
+  )::first-line {
+  font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+}
+
+eun-stepper[variant="progress"]:not(:defined) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--progress-bar-corner-gap, var(--eun-space-xs, 4px));
+  min-height: 0;
+}
+
+eun-stepper[variant="progress"]:not(:defined)::before {
+  content: "\200b";
+  font-size: var(
+    --progress-bar-corner-font-size,
+    var(--eun-font-size-xs, 12px)
+  );
+}
+
+eun-stepper[variant="progress"]:not(:defined)::after {
+  content: "";
+  height: var(--progress-bar-track-height, 8px);
+  border-radius: var(
+    --progress-bar-border-radius,
+    var(--eun-border-radius-full, 999px)
+  );
+  background: var(
+    --progress-bar-track-color,
+    var(--eun-surface-sunken-strong, #ecedf0)
+  );
+}
+
+eun-stepper[variant="progress"]:not(:defined) > eun-step {
+  display: none;
+}
+
+eun-stepper:not([variant="progress"]):not(:defined):has(> eun-step) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--stepper-gap, 0);
+  counter-reset: eun-step;
+}
+
+eun-stepper[orientation="vertical"]:not([variant="progress"]):not(:defined):has(
+    > eun-step
+  ) {
+  flex-direction: column;
+  gap: var(--stepper-gap, var(--eun-space-l, 32px));
+}
+
+eun-stepper:not(:defined) > eun-step:not(:defined) {
+  --_indicatorSize: var(--stepper-indicator-size, 24px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  min-height: var(--_indicatorSize);
+  padding-inline-start: calc(var(--_indicatorSize) + var(--eun-space-s, 8px));
+  counter-increment: eun-step;
+  color: var(--stepper-label-color, var(--eun-text-color, #071621));
+  font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--stepper-label-font-weight, var(--eun-font-weight-m, 500));
+}
+
+eun-stepper:not(:defined) > eun-step:not(:defined)::before {
+  content: counter(eun-step);
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_indicatorSize);
+  height: var(--_indicatorSize);
+  border-radius: var(
+    --stepper-indicator-border-radius,
+    var(--eun-border-radius-xl, 999px)
+  );
+  background: var(
+    --stepper-indicator-background,
+    var(--eun-content-hover, #edeff0)
+  );
+  color: var(--stepper-indicator-color, var(--eun-text-secondary, #666e8a));
+  font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
+  font-weight: var(
+    --stepper-indicator-font-weight,
+    var(--eun-font-weight-m, 500)
+  );
+}
+
+eun-stepper:not(:defined) > eun-step:not(:defined):has(> [slot="description"]) {
+  justify-content: flex-start;
+}
+
+eun-stepper:not(:defined) > eun-step:not(:defined) > [slot="description"] {
+  order: 1;
+  color: var(--stepper-description-color, var(--eun-text-secondary, #666e8a));
+  font-size: var(
+    --stepper-description-font-size,
+    var(--eun-font-size-xs, 12px)
+  );
+  font-weight: normal;
+}
+
+eun-stepper:not([orientation="vertical"]):not(:defined)
+  > eun-step:not(:defined) {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/dist/ssr/table-ssr.css

@@ -286,7 +286,7 @@ eun-table {
     );
     text-align: center;
     font-size: var(--eun-font-size-s, 13px);
-    color: var(--table-empty-color, var(--eun-text-secondary, #484e61));
+    color: var(--table-empty-color, var(--eun-text-secondary, #666e8a));
   }
 
   eun-table:not(:defined):is([loading], :has(> table > tbody > tr))
@@ -354,7 +354,10 @@ eun-table {
       var(--eun-surface-color, #ffffff)
     );
     font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
-    color: var(--table-column-color, var(--eun-text-secondary, #484e61));
+    color: var(
+      --table-header-color,
+      var(--table-column-color, var(--eun-text-secondary, #666e8a))
+    );
     white-space: nowrap;
   }
 
@@ -477,7 +480,7 @@ eun-table {
     text-align: center;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    color: var(--table-row-number-color, var(--eun-text-secondary, #484e61));
+    color: var(--table-row-number-color, var(--eun-text-secondary, #666e8a));
     background-color: var(
       --table-sticky-column-background,
       var(--table-row-background, var(--eun-surface-color, #ffffff))
@@ -584,7 +587,7 @@ eun-table {
     --_table-action-opacity: 0 !important;
   }
 
-  @media (hover: none) {
+  @media (hover: none), (width < 1024px) {
     eun-table > table > tbody > tr > [data-table-select] eun-checkbox {
       opacity: 1;
     }

package/dist/ssr/tag-ssr.css

@@ -7,7 +7,7 @@ eun-tag:not(:defined) {
   --_fg-outline: var(--_accent);
   --_bd-outline: var(--_solid);
   --_bg-flat: var(--eun-content-hover, #edeff0);
-  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_fg-flat: var(--eun-text-secondary, #666e8a);
   --_solid: var(--eun-color-grey-700, #484e61);
   --_onSolid: var(--eun-color-grey-0, #ffffff);
   --_tint: color-mix(

package/dist/ssr/toolbar-ssr.css

@@ -1,7 +1,8 @@
 eun-toolbar:not(:defined) > :not([slot]),
 eun-toolbar:not(:defined) > [slot="skip-links"],
 eun-toolbar:not(:defined) > [slot="menu-icon"],
-eun-toolbar:not(:defined) > [slot="close-icon"] {
+eun-toolbar:not(:defined) > [slot="close-icon"],
+eun-toolbar:not(:defined) > [slot="burger-icon"] {
   display: none;
 }
 
@@ -25,6 +26,8 @@ eun-toolbar:not(:defined) {
   border-block-end: var(--eun-border-width-s, 1px) solid
     var(--toolbar-border-color, var(--eun-border-color, #dee0e7));
   box-shadow: var(--toolbar-shadow, none);
+  backdrop-filter: blur(var(--toolbar-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--toolbar-backdrop-blur));
 }
 :where(eun-toolbar:not(:defined)) {
   display: flex;
@@ -46,9 +49,8 @@ eun-toolbar[theme="dark"]:not(:defined) {
   );
 }
 
-/* A page loads scrolled to the top, where the upgraded bar is transparent. */
 eun-toolbar[transparent-at-top]:not(:defined) {
-  background: transparent;
+  background: var(--toolbar-background-at-top, transparent);
   border-color: transparent;
   box-shadow: none;
 }
@@ -90,7 +92,7 @@ eun-toolbar:not(:defined):where(:not(:has(> [slot="center"])))
 }
 
 eun-toolbar:not(:defined):where(
-    :has(> [slot="start"]):has(> [slot="end"]):not(
+    :not([layout="between"]):has(> [slot="start"]):has(> [slot="end"]):not(
         :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
       )
   )
@@ -99,7 +101,7 @@ eun-toolbar:not(:defined):where(
 }
 
 eun-toolbar:not(:defined):where(
-    :has(> [slot="start"]):has(> [slot="end"]):not(
+    :not([layout="between"]):has(> [slot="start"]):has(> [slot="end"]):not(
         :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
       )
   )

package/dist/utils/css-length.utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Reads a length custom property off an element, in pixels. The computed
+ * value of an unregistered custom property is the raw text it was set to,
+ * so a token such as `var(--eun-space-l)` reads back as `2rem`, and parsing
+ * it as a number would give `2` instead of `32`. Anything other than a plain
+ * number or pixel value is resolved by the browser on a hidden probe, so
+ * `rem`, `em`, viewport units and `calc()` all come back in pixels. The
+ * probe is appended and removed synchronously, never left in the DOM.
+ *
+ * @param element the element the custom property is read from.
+ * @param name the custom property's name, such as `--carousel-nav-icon-size`.
+ * @returns the length in pixels, or `NaN` when unset or not a length.
+ */
+export declare function readCssLength(element: Element, name: string): number;

package/dist/utils/css-length.utils.js

@@ -0,0 +1,32 @@
+/**
+ * Reads a length custom property off an element, in pixels. The computed
+ * value of an unregistered custom property is the raw text it was set to,
+ * so a token such as `var(--eun-space-l)` reads back as `2rem`, and parsing
+ * it as a number would give `2` instead of `32`. Anything other than a plain
+ * number or pixel value is resolved by the browser on a hidden probe, so
+ * `rem`, `em`, viewport units and `calc()` all come back in pixels. The
+ * probe is appended and removed synchronously, never left in the DOM.
+ *
+ * @param element the element the custom property is read from.
+ * @param name the custom property's name, such as `--carousel-nav-icon-size`.
+ * @returns the length in pixels, or `NaN` when unset or not a length.
+ */
+export function readCssLength(element, name) {
+    const raw = getComputedStyle(element).getPropertyValue(name).trim();
+    if (!raw) {
+        return Number.NaN;
+    }
+    if (/^-?(\d+\.?\d*|\.\d+)(px)?$/.test(raw)) {
+        return Number.parseFloat(raw);
+    }
+    const probe = document.createElement("div");
+    probe.style.display = "none";
+    probe.style.setProperty("scroll-margin-top", raw);
+    if (!probe.style.getPropertyValue("scroll-margin-top")) {
+        return Number.NaN;
+    }
+    (element.shadowRoot ?? element).append(probe);
+    const px = Number.parseFloat(getComputedStyle(probe).scrollMarginTop);
+    probe.remove();
+    return px;
+}

package/dist/utils/form-validation.utils.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Buttons that can submit a form, in the order the browser looks for the
+ * form's default button. `eun-button` and `eun-fab` aren't form-associated,
+ * so they're found in the form's own subtree rather than in `form.elements`.
+ */
+export declare const SUBMIT_BUTTONS: string;
+/**
+ * Runs `report` with `target` marked as reporting its validity, so the
+ * `invalid` events it fires are told apart from a silent check.
+ *
+ * @param target - The form or field reporting its validity.
+ * @param report - The call firing the `invalid` events.
+ * @returns What `report` returns.
+ */
+export declare function reportingValidity<T>(target: Element, report: () => T): T;
+/**
+ * Whether `target` is reporting its validity to the user right now.
+ *
+ * @param target - The form or field to check.
+ * @returns true during a submit attempt or a `reportValidity()` call.
+ */
+export declare function isReportingValidity(target: Element): boolean;
+/**
+ * Watches the clicks on every submit button of the document, native or
+ * not, so their form's validation counts as a submit attempt. Installed
+ * once, by the first form field to connect.
+ */
+export declare function watchSubmissions(): void;
+/**
+ * Focuses the first invalid field of `form` in document order, once all
+ * the `invalid` events of the current validation have fired, as the
+ * browser does for a form of native controls only.
+ *
+ * @param form - The form whose submission failed.
+ */
+export declare function focusFirstInvalid(form: HTMLFormElement): void;

package/dist/utils/form-validation.utils.js

@@ -0,0 +1,113 @@
+/**
+ * Buttons that can submit a form, in the order the browser looks for the
+ * form's default button. `eun-button` and `eun-fab` aren't form-associated,
+ * so they're found in the form's own subtree rather than in `form.elements`.
+ */
+export const SUBMIT_BUTTONS = [
+    "button:not([type])",
+    'button[type="submit"]',
+    'input[type="submit"]',
+    'input[type="image"]',
+    'eun-button[type="submit"]',
+    'eun-fab[type="submit"]',
+].join(", ");
+/**
+ * Forms and fields whose validity is being reported to the user right now:
+ * on a submit attempt or a field's own `reportValidity()`, as opposed to a
+ * silent `checkValidity()`, which fires the same `invalid` events.
+ */
+const reporting = new WeakSet();
+/**
+ * Forms whose first invalid field is already about to receive focus.
+ */
+const pendingFocus = new WeakSet();
+/**
+ * Whether the submit button listener is installed.
+ */
+let watchingSubmissions = false;
+/**
+ * Runs `report` with `target` marked as reporting its validity, so the
+ * `invalid` events it fires are told apart from a silent check.
+ *
+ * @param target - The form or field reporting its validity.
+ * @param report - The call firing the `invalid` events.
+ * @returns What `report` returns.
+ */
+export function reportingValidity(target, report) {
+    reporting.add(target);
+    try {
+        return report();
+    }
+    finally {
+        reporting.delete(target);
+    }
+}
+/**
+ * Whether `target` is reporting its validity to the user right now.
+ *
+ * @param target - The form or field to check.
+ * @returns true during a submit attempt or a `reportValidity()` call.
+ */
+export function isReportingValidity(target) {
+    return reporting.has(target);
+}
+/**
+ * The form a submit button submits: its `form` attribute's target, or its
+ * closest ancestor form.
+ *
+ * @param button - The submit button.
+ * @returns The form, or `null` when the button belongs to none.
+ */
+function formOf(button) {
+    const id = button.getAttribute("form");
+    const form = id
+        ? button.getRootNode().getElementById?.(id)
+        : button.closest("form");
+    return form instanceof HTMLFormElement ? form : null;
+}
+/**
+ * Marks the form of a clicked submit button as reporting its validity until
+ * the click's default action, which runs the browser's validation, is over.
+ *
+ * @param event - The click event.
+ */
+function markSubmission(event) {
+    const button = event.target?.closest?.(SUBMIT_BUTTONS);
+    const form = button && formOf(button);
+    if (!form) {
+        return;
+    }
+    reporting.add(form);
+    setTimeout(() => reporting.delete(form));
+}
+/**
+ * Watches the clicks on every submit button of the document, native or
+ * not, so their form's validation counts as a submit attempt. Installed
+ * once, by the first form field to connect.
+ */
+export function watchSubmissions() {
+    if (watchingSubmissions || typeof document === "undefined") {
+        return;
+    }
+    watchingSubmissions = true;
+    document.addEventListener("click", markSubmission, true);
+}
+/**
+ * Focuses the first invalid field of `form` in document order, once all
+ * the `invalid` events of the current validation have fired, as the
+ * browser does for a form of native controls only.
+ *
+ * @param form - The form whose submission failed.
+ */
+export function focusFirstInvalid(form) {
+    if (pendingFocus.has(form)) {
+        return;
+    }
+    pendingFocus.add(form);
+    setTimeout(() => {
+        pendingFocus.delete(form);
+        const first = Array.from(form.elements).find((element) => element.willValidate &&
+            !element.validity.valid);
+        first?.focus();
+    });
+}

package/dist/utils/implicit-submission.utils.js

@@ -1,16 +1,4 @@
-/**
- * Buttons that can submit a form, in the order the browser looks for the
- * form's default button. `eun-button` and `eun-fab` aren't form-associated,
- * so they're found in the form's own subtree rather than in `form.elements`.
- */
-const SUBMIT_BUTTONS = [
-    "button:not([type])",
-    'button[type="submit"]',
-    'input[type="submit"]',
-    'input[type="image"]',
-    'eun-button[type="submit"]',
-    'eun-fab[type="submit"]',
-].join(", ");
+import { reportingValidity, SUBMIT_BUTTONS } from "./form-validation.utils.js";
 /**
  * Native input types that block implicit submission, per the HTML spec.
  */
@@ -74,6 +62,6 @@ export function submitImplicitly(form) {
         BLOCKING_INPUT_TYPES.has(element.type)) ||
         element.matches(BLOCKING_FIELDS));
     if (blockingFields.length <= 1) {
-        form.requestSubmit();
+        reportingValidity(form, () => form.requestSubmit());
     }
 }

package/dist/utils/interactive-content.utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether `event` comes from interactive content slotted into `host`, such
+ * as a link in a checkbox's label. Like a native `<label>`, the control
+ * then leaves the event to that content instead of toggling.
+ *
+ * @param event - The click or keydown event.
+ * @param host - The control receiving the event.
+ * @returns true when interactive content inside `host` was hit first.
+ */
+export declare function isFromInteractiveContent(event: Event, host: Element): boolean;

package/dist/utils/interactive-content.utils.js

@@ -0,0 +1,43 @@
+/**
+ * Interactive content a click or a key press reaches before the control
+ * wrapping it, per the HTML spec, plus the library's own links and buttons.
+ */
+const INTERACTIVE_CONTENT = [
+    "a[href]",
+    "area[href]",
+    "button",
+    "details",
+    "summary",
+    "input:not([type='hidden'])",
+    "select",
+    "textarea",
+    "iframe",
+    "embed",
+    "audio[controls]",
+    "video[controls]",
+    "[contenteditable]:not([contenteditable='false'])",
+    "eun-link",
+    "eun-button",
+].join(", ");
+/**
+ * Whether `event` comes from interactive content slotted into `host`, such
+ * as a link in a checkbox's label. Like a native `<label>`, the control
+ * then leaves the event to that content instead of toggling.
+ *
+ * @param event - The click or keydown event.
+ * @param host - The control receiving the event.
+ * @returns true when interactive content inside `host` was hit first.
+ */
+export function isFromInteractiveContent(event, host) {
+    for (const target of event.composedPath()) {
+        if (target === host) {
+            return false;
+        }
+        if (target instanceof Element &&
+            host.contains(target) &&
+            target.matches(INTERACTIVE_CONTENT)) {
+            return true;
+        }
+    }
+    return false;
+}