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

package/dist/ssr/tag-ssr.css

@@ -0,0 +1,197 @@
+eun-tag:not(:defined) {
+  --_bg-default: var(--_tint);
+  --_fg-default: var(--_accent);
+  --_bg-fill: var(--_solid);
+  --_fg-fill: var(--_onSolid);
+  --_bg-outline: transparent;
+  --_fg-outline: var(--_accent);
+  --_bd-outline: var(--_solid);
+  --_bg-flat: var(--eun-content-hover, #edeff0);
+  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: color-mix(
+    in srgb,
+    var(--eun-color-grey-700, #484e61) 20%,
+    transparent
+  );
+  --_accent: var(--eun-color-grey-900, #000000);
+}
+eun-tag[color="primary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-primary-500, #3d6fff);
+  --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+  --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+  --_accent: var(--eun-color-primary-500, #3d6fff);
+}
+eun-tag[color="secondary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-secondary-500, #e5a030);
+  --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+  --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+  --_accent: var(--eun-color-secondary-500, #e5a030);
+}
+eun-tag[color="light"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-0, #ffffff);
+  --_onSolid: var(--eun-color-grey-900, #000000);
+}
+eun-tag[color="light"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #ffffff;
+  --_onSolid: #000000;
+}
+eun-tag[color="dark"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-800, #071621);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+}
+eun-tag[color="dark"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #071621;
+  --_onSolid: #ffffff;
+}
+eun-tag:is([color="light"], [color="dark"]):not([severity]):not(:defined) {
+  --_accent: var(--_solid);
+  --_tint: color-mix(in srgb, var(--_solid) 16%, transparent);
+  --_bg-default: var(--_solid);
+  --_fg-default: var(--_onSolid);
+  --_bg-flat: var(--_tint);
+  --_fg-flat: var(--_solid);
+}
+eun-tag[severity="info"]:not(:defined) {
+  --_solid: var(--eun-color-info-text, #097aa8);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-info-alpha-5, #097faf0d);
+  --_accent: var(--eun-color-info-text, #097aa8);
+}
+eun-tag[severity="success"]:not(:defined) {
+  --_solid: var(--eun-color-success-text, #167f3c);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+  --_accent: var(--eun-color-success-text, #167f3c);
+}
+eun-tag[severity="warning"]:not(:defined) {
+  --_solid: var(--eun-color-warning-text, #b94c06);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+  --_accent: var(--eun-color-warning-text, #b94c06);
+}
+eun-tag[severity="critical"]:not(:defined) {
+  --_solid: var(--eun-color-critical-text, #aa0014);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_accent: var(--eun-color-critical-text, #aa0014);
+}
+eun-tag[severity="neutral"]:not(:defined) {
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: var(--eun-surface-sunken-strong, #ecedf0);
+  --_accent: var(--eun-color-grey-700, #484e61);
+}
+
+eun-tag:not([appearance]):not(:defined),
+eun-tag[appearance="default"]:not(:defined) {
+  --_bg: var(--_bg-default);
+  --_fg: var(--_fg-default);
+  --_bd: transparent;
+}
+eun-tag[appearance="fill"]:not(:defined) {
+  --_bg: var(--_bg-fill);
+  --_fg: var(--_fg-fill);
+  --_bd: transparent;
+}
+eun-tag[appearance="outline"]:not(:defined) {
+  --_bg: var(--_bg-outline);
+  --_fg: var(--_fg-outline);
+  --_bd: var(--_bd-outline);
+}
+eun-tag[appearance="flat"]:not(:defined) {
+  --_bg: var(--_bg-flat);
+  --_fg: var(--_fg-flat);
+  --_bd: transparent;
+}
+
+eun-tag:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: calc(var(--eun-space-m, 16px) / 2);
+  --_fontSize: var(--eun-font-size-s, 14px);
+  --_gap: var(--eun-space-xs, 4px);
+  --_iconSize: 18px;
+  --_radius: var(--eun-border-radius-m, 5px);
+  --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
+  display: inline-flex;
+  align-items: center;
+  background: var(--tag-background-color, var(--_bg));
+  color: var(--tag-color, var(--_fg));
+  border: var(--_borderWidth) solid var(--tag-border-color, var(--_bd));
+  border-radius: var(--tag-border-radius, var(--_radius));
+  padding: max(
+      0px,
+      calc(var(--tag-padding-block, var(--_padV)) - var(--_borderWidth))
+    )
+    max(
+      0px,
+      calc(var(--tag-padding-inline, var(--_padH)) - var(--_borderWidth))
+    );
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tag-font-size, var(--_fontSize));
+  font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
+  gap: var(--tag-gap, var(--_gap));
+  user-select: none;
+}
+eun-tag[size="s"]:not(:defined) {
+  --_padV: var(--eun-space-xs, 4px);
+  --_padH: var(--eun-space-s, 8px);
+  --_fontSize: var(--eun-font-size-xs, 12px);
+  --_iconSize: 14px;
+}
+eun-tag[size="l"]:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: var(--eun-space-m, 16px);
+  --_fontSize: var(--eun-font-size-m, 16px);
+  --_gap: var(--eun-space-s, 8px);
+  --_iconSize: 22px;
+}
+eun-tag[rounded]:not(:defined) {
+  --_radius: var(--eun-border-radius-xl, 999px);
+}
+eun-tag[uppercase]:not(:defined) {
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+eun-tag:not(:defined) > * {
+  margin: 0 !important;
+}
+
+eun-tag:not(:defined) > [slot="icon"] {
+  order: -1;
+}
+eun-tag[hide-icon]:not(:defined) > [slot="icon"] {
+  display: none;
+}
+:where(
+  eun-tag:not(:defined) > eun-icon[slot="icon"]:not([size]):not(:defined)
+) {
+  display: inline-block;
+  width: var(--icon-size, 1rem);
+  height: var(--icon-size, 1rem);
+}
+eun-tag:is([icon], [severity], [icon-only]):not([hide-icon]):not(
+    :has(> [slot="icon"])
+  ):not(:defined)::before {
+  content: "";
+  order: -1;
+  flex-shrink: 0;
+  width: var(--_iconSize);
+  height: var(--_iconSize);
+}
+
+eun-tag[icon-only]:not(:defined) {
+  --_padV: var(--eun-space-s, 8px);
+  --_padH: var(--eun-space-s, 8px);
+  justify-content: center;
+  font-size: 0;
+  gap: 0;
+}
+eun-tag[icon-only][size="s"]:not(:defined) {
+  --_padV: var(--eun-space-xs, 4px);
+  --_padH: var(--eun-space-xs, 4px);
+}
+eun-tag[icon-only]:not(:defined) > :not([slot="icon"]) {
+  display: none;
+}

package/dist/ssr/toggle-group-ssr.css

@@ -0,0 +1,182 @@
+eun-toggle-group:not(:defined) {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
+  padding: var(--toggle-group-padding, var(--toggle-group-padding-block, 4px))
+    var(--toggle-group-padding, var(--toggle-group-padding-inline, 4px));
+  overflow: hidden;
+  border-radius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  background: var(
+    --toggle-group-background,
+    var(--eun-surface-sunken, #f7f8fa)
+  );
+  border: var(--eun-border-width-s, 1px) solid
+    var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
+  box-shadow: var(--toggle-group-box-shadow, none);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+}
+
+eun-toggle-group:is([appearance="outline"], [appearance="flat"]):not(:defined) {
+  padding: 0;
+  overflow: visible;
+  background: var(--toggle-group-background, transparent);
+  border: none;
+  border-radius: 0;
+}
+
+eun-toggle-group[full]:not(:defined) {
+  display: flex;
+  width: 100%;
+}
+
+eun-toggle-group[disabled]:not(:defined) {
+  opacity: 0.5;
+}
+
+eun-toggle-item:not(:defined) {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--eun-space-xs, 4px);
+  box-sizing: border-box;
+  padding: 6px 14px;
+  border-radius: calc(
+    var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
+  );
+  color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  font-weight: var(--eun-font-weight-m, 500);
+  white-space: nowrap;
+  --_customTint: color-mix(
+    in srgb,
+    var(--toggle-group-active-background) 15%,
+    transparent
+  );
+}
+
+eun-toggle-item:not(:defined) > [slot="icon"] {
+  order: -1;
+}
+
+:is(
+  eun-toggle-group:is([appearance="outline"], [appearance="flat"])
+    > eun-toggle-item,
+  eun-toggle-item:is([appearance="outline"], [appearance="flat"])
+):not(:defined) {
+  border: var(--eun-border-width-s, 1px) solid
+    var(--toggle-group-border-color, transparent);
+  border-radius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+}
+
+:is(
+  eun-toggle-group[appearance="outline"] > eun-toggle-item,
+  eun-toggle-item[appearance="outline"]
+):not(:defined) {
+  border-color: var(
+    --toggle-group-border-color,
+    var(--eun-color-grey-300, #dee0e7)
+  );
+}
+
+:is(eun-toggle-group[full] > eun-toggle-item, eun-toggle-item[full]):not(
+  :defined
+) {
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+:is(
+  eun-toggle-group:not(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    )
+    > eun-toggle-item[checked],
+  eun-toggle-group:is(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    )
+    > eun-toggle-item:nth-child(1 of [checked]),
+  eun-toggle-group:is(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    ):not([value], :has(> eun-toggle-item[checked]))
+    > eun-toggle-item:first-of-type
+):not(:defined) {
+  background: var(
+    --toggle-group-active-background,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+  color: var(
+    --toggle-group-active-color,
+    var(--eun-color-on-primary-500, #ffffff)
+  );
+}
+
+:is(
+    eun-toggle-group:not(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item[checked],
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item:nth-child(1 of [checked]),
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      ):not([value], :has(> eun-toggle-item[checked]))
+      > eun-toggle-item:first-of-type
+  ):is(
+    eun-toggle-group:is([appearance="outline"], [appearance="flat"])
+      > eun-toggle-item,
+    eun-toggle-item:is([appearance="outline"], [appearance="flat"])
+  ):not(:defined) {
+  background: var(--_customTint, var(--eun-color-primary-alpha-20, #3d6fff33));
+  color: var(
+    --toggle-group-active-color,
+    var(--toggle-group-active-background, var(--eun-color-primary-500, #3d6fff))
+  );
+  font-weight: var(--eun-font-weight-b, 700);
+}
+
+:is(
+    eun-toggle-group:not(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item[checked],
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item:nth-child(1 of [checked]),
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      ):not([value], :has(> eun-toggle-item[checked]))
+      > eun-toggle-item:first-of-type
+  ):is(
+    eun-toggle-group[appearance="outline"] > eun-toggle-item,
+    eun-toggle-item[appearance="outline"]
+  ):not(:defined) {
+  border-color: var(
+    --toggle-group-active-background,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+}
+
+eun-toggle-item[disabled]:not(:defined) {
+  opacity: 0.5;
+}

package/dist/ssr/toolbar-ssr.css

@@ -12,10 +12,43 @@ eun-toolbar:not(:defined) {
   gap: var(--toolbar-gap, 16px);
   width: 100%;
   height: var(--toolbar-height, 72px);
-  padding: var(--toolbar-padding, 0 24px);
+  padding: var(
+    --toolbar-padding,
+    var(--toolbar-padding-block, 0) var(--toolbar-padding-inline, 24px)
+  );
   position: sticky;
   top: 0;
   z-index: var(--toolbar-z-index, 100);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  background: var(
+    --toolbar-background,
+    var(--toolbar-background-light, var(--eun-surface-color, #ffffff))
+  );
+  color: var(
+    --toolbar-color,
+    var(--toolbar-color-light, var(--eun-text-color, #071621))
+  );
+  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);
+}
+
+eun-toolbar[theme="dark"]:not(:defined) {
+  background: var(
+    --toolbar-background,
+    var(--toolbar-background-dark, var(--eun-surface-inverse, #0b1620))
+  );
+  color: var(
+    --toolbar-color,
+    var(--toolbar-color-dark, var(--eun-text-on-inverse, #f5f7fa))
+  );
+}
+
+/* A page loads scrolled to the top, where the upgraded bar is transparent. */
+eun-toolbar[transparent-at-top]:not(:defined) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
 }
 
 eun-toolbar[position="fixed"]:not(:defined) {

package/dist/utils/drag-drop.utils.js

@@ -3,7 +3,7 @@ const DEFAULT_ACTIVATION_DISTANCE = 4;
 const DEFAULT_DRAGGING_ATTRIBUTE = "data-dragging";
 const DEFAULT_AUTO_SCROLL_EDGE = 48;
 const DEFAULT_AUTO_SCROLL_SPEED = 12;
-const SETTLE_TRANSITION = "transform 150ms ease";
+const SETTLE_TRANSITION = "transform var(--eun-duration-s, 150ms) var(--eun-easing-default, ease)";
 const SR_ONLY_STYLE = {
     position: "absolute",
     width: "1px",
@@ -52,16 +52,32 @@ function isScrollable(el) {
     const style = getComputedStyle(el);
     return /(auto|scroll)/.test(style.overflowY + style.overflowX);
 }
+/**
+ * Walks up the flat tree (through slots and shadow hosts) rather than the
+ * plain DOM tree, so a container slotted into a component that scrolls
+ * inside its own shadow root, such as the rows of an `eun-table`, finds
+ * that inner scroll container.
+ */
 function findScrollableAncestor(from) {
     let el = from;
     while (el) {
         if (isScrollable(el)) {
             return el;
         }
-        el = el.parentElement;
+        el = flatTreeParent(el);
     }
     return document.scrollingElement;
 }
+function flatTreeParent(el) {
+    if (el.assignedSlot) {
+        return el.assignedSlot;
+    }
+    if (el.parentElement) {
+        return el.parentElement;
+    }
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
 /**
  * Attaches drag-to-reorder behavior to `container`'s items. See the module
  * doc comment for what this does and doesn't cover.

package/dist/utils/dropdown-menu.utils.d.ts

@@ -125,8 +125,8 @@ export declare function handleMenuKeydown(event: KeyboardEvent, entries: HTMLEle
  * `eun-dropdown-button` (its root menu and `options`-sourced submenus) and
  * `eun-dropdown-item` (its own submenu) : `0` under `prefers-reduced-motion:
  * reduce`, otherwise `--dropdown-menu-transition-duration` (default
- * `160ms`) — see `dropdown-button.styles.ts`'s own doc for why the open/
- * close visual is a JS `Animation` rather than a CSS transition.
+ * `--eun-duration-s`) — see `dropdown-button.styles.ts`'s own doc for why
+ * the open/close visual is a JS `Animation` rather than a CSS transition.
  *
  * @param el the menu/submenu to read `--dropdown-menu-transition-duration` off.
  */

package/dist/utils/dropdown-menu.utils.js

@@ -1,3 +1,4 @@
+import { resolveDurationMs } from "./motion.utils.js";
 /**
  * DOM-only menu mechanics shared by `eun-dropdown-button` (its root menu and
  * `options`-sourced submenus) and `eun-dropdown-item` (its own
@@ -186,8 +187,8 @@ export function handleMenuKeydown(event, entries, handlers) {
  * `eun-dropdown-button` (its root menu and `options`-sourced submenus) and
  * `eun-dropdown-item` (its own submenu) : `0` under `prefers-reduced-motion:
  * reduce`, otherwise `--dropdown-menu-transition-duration` (default
- * `160ms`) — see `dropdown-button.styles.ts`'s own doc for why the open/
- * close visual is a JS `Animation` rather than a CSS transition.
+ * `--eun-duration-s`) — see `dropdown-button.styles.ts`'s own doc for why
+ * the open/close visual is a JS `Animation` rather than a CSS transition.
  *
  * @param el the menu/submenu to read `--dropdown-menu-transition-duration` off.
  */
@@ -195,16 +196,5 @@ export function dropdownMenuAnimationDuration(el) {
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
         return 0;
     }
-    const raw = getComputedStyle(el)
-        .getPropertyValue("--dropdown-menu-transition-duration")
-        .trim();
-    if (raw) {
-        const parsed = raw.endsWith("ms")
-            ? Number.parseFloat(raw)
-            : Number.parseFloat(raw) * 1000;
-        if (Number.isFinite(parsed) && parsed >= 0) {
-            return parsed;
-        }
-    }
-    return 160;
+    return resolveDurationMs(el, "--dropdown-menu-transition-duration", "s", 160);
 }

package/dist/utils/implicit-submission.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Whether a key press should trigger implicit submission: Enter, outside
+ * of an IME composition, and not already handled by something else.
+ *
+ * @param event - The keydown event to check.
+ * @returns Whether the event asks for implicit submission.
+ */
+export declare function isImplicitSubmissionKey(event: KeyboardEvent): boolean;
+/**
+ * Submits a form the way the browser does when Enter is pressed in one of
+ * its text fields, since a field whose native input lives in a shadow root
+ * never triggers it on its own. Clicks the form's default button when it
+ * has one, unless that button is disabled. Without one, submits only when
+ * the form holds a single text field.
+ *
+ * @param form - The form to submit.
+ */
+export declare function submitImplicitly(form: HTMLFormElement): void;

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

@@ -0,0 +1,79 @@
+/**
+ * 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(", ");
+/**
+ * Native input types that block implicit submission, per the HTML spec.
+ */
+const BLOCKING_INPUT_TYPES = new Set([
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "date",
+    "month",
+    "week",
+    "time",
+    "datetime-local",
+    "number",
+]);
+/**
+ * Library fields standing in for one of the native inputs above, and so
+ * blocking implicit submission the same way it does.
+ */
+const BLOCKING_FIELDS = [
+    "eun-input",
+    "eun-search",
+    "eun-input-phone",
+    "eun-counter",
+    "eun-date-picker",
+    "eun-time-picker",
+].join(", ");
+/**
+ * Whether a key press should trigger implicit submission: Enter, outside
+ * of an IME composition, and not already handled by something else.
+ *
+ * @param event - The keydown event to check.
+ * @returns Whether the event asks for implicit submission.
+ */
+export function isImplicitSubmissionKey(event) {
+    return (event.key === "Enter" &&
+        !event.isComposing &&
+        event.keyCode !== 229 &&
+        !event.defaultPrevented);
+}
+/**
+ * Submits a form the way the browser does when Enter is pressed in one of
+ * its text fields, since a field whose native input lives in a shadow root
+ * never triggers it on its own. Clicks the form's default button when it
+ * has one, unless that button is disabled. Without one, submits only when
+ * the form holds a single text field.
+ *
+ * @param form - The form to submit.
+ */
+export function submitImplicitly(form) {
+    const defaultButton = form.querySelector(SUBMIT_BUTTONS);
+    if (defaultButton) {
+        if (!defaultButton.matches(":disabled, [disabled]")) {
+            defaultButton.click();
+        }
+        return;
+    }
+    const blockingFields = Array.from(form.elements).filter((element) => (element instanceof HTMLInputElement &&
+        BLOCKING_INPUT_TYPES.has(element.type)) ||
+        element.matches(BLOCKING_FIELDS));
+    if (blockingFields.length <= 1) {
+        form.requestSubmit();
+    }
+}

package/dist/utils/light-dom-styles.utils.d.ts

@@ -0,0 +1,14 @@
+import { CSSResult } from "lit";
+/**
+ * Adopts a light DOM sheet into `host`'s root node (the document, or the
+ * shadow root it lives in), once per root. A component whose native
+ * content (a `<table>`, a `<dl>`) stays in the light DOM styles it this
+ * way, since its own shadow root can't reach slotted descendants.
+ *
+ * Falls back to a `<style>` element where constructable stylesheets
+ * aren't supported.
+ *
+ * @param host the connected element whose root node receives the sheet.
+ * @param styles the sheet to adopt.
+ */
+export declare function adoptLightDomStyles(host: Node, styles: CSSResult): void;

package/dist/utils/light-dom-styles.utils.js

@@ -0,0 +1,37 @@
+/**
+ * Root nodes each light DOM sheet was already adopted into.
+ * @internal
+ */
+const styledRoots = new WeakMap();
+/**
+ * Adopts a light DOM sheet into `host`'s root node (the document, or the
+ * shadow root it lives in), once per root. A component whose native
+ * content (a `<table>`, a `<dl>`) stays in the light DOM styles it this
+ * way, since its own shadow root can't reach slotted descendants.
+ *
+ * Falls back to a `<style>` element where constructable stylesheets
+ * aren't supported.
+ *
+ * @param host the connected element whose root node receives the sheet.
+ * @param styles the sheet to adopt.
+ */
+export function adoptLightDomStyles(host, styles) {
+    const root = host.getRootNode();
+    let roots = styledRoots.get(styles);
+    if (!roots) {
+        roots = new WeakSet();
+        styledRoots.set(styles, roots);
+    }
+    if (roots.has(root)) {
+        return;
+    }
+    roots.add(root);
+    const sheet = styles.styleSheet;
+    if (sheet && "adoptedStyleSheets" in root) {
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+        return;
+    }
+    const style = document.createElement("style");
+    style.textContent = styles.cssText;
+    (root instanceof Document ? root.head : root).appendChild(style);
+}

package/dist/utils/listbox-options.utils.d.ts

@@ -31,3 +31,14 @@ export declare function parseListboxOptions(children: Iterable<Element>): Listbo
  * @returns the rendered template, or the plain `label` when nothing matches.
  */
 export declare function renderHighlightedLabel(label: string, query: string): TemplateResult | string;
+/**
+ * Renders a listbox's option rows, wrapping each run of options sharing an
+ * `optgroup` in a `role="group"` row named by that group's label, so
+ * assistive technology announces which group an option belongs to.
+ * Options outside any group are rendered as they are.
+ *
+ * @param options the options to render, in display order.
+ * @param renderOption renders one option row, given its index in `options`.
+ * @returns the rendered rows.
+ */
+export declare function renderListboxRows<T extends ListboxOption>(options: T[], renderOption: (option: T, index: number) => TemplateResult): TemplateResult[];