@threadlabs/looma 0.4.0 → 0.5.1

package/components/ui-icon/ui-icon.html

@@ -0,0 +1,34 @@
+<template component="ui-icon" controller="./ui-icon.js">
+  <defs>
+    <prop name="name" type="string" default="">The icon's name.</prop>
+    <state name="shapes" :value="[]"></state>
+  </defs>
+  <span aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
+      <g $each="shape of shapes">
+        <path $if="shape.tag = 'path'" :d="shape.d"></path>
+        <circle $if="shape.tag = 'circle'" :cx="shape.cx" :cy="shape.cy" :r="shape.r"></circle>
+        <rect $if="shape.tag = 'rect'" :x="shape.x" :y="shape.y" :width="shape.width" :height="shape.height" :rx="shape.rx"></rect>
+      </g>
+    </svg>
+  </span>
+  <style>
+    :host {
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--ui-icon-size, 1em);
+      block-size: var(--ui-icon-size, 1em);
+    }
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      stroke-width: var(--ui-icon-stroke-width, 2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-icon/ui-icon.js

@@ -0,0 +1,8 @@
+import { icons } from "../shared/editor.js";
+
+// The icon's shapes, from Looma's icon set, for the template to draw.
+export default function controller(host) {
+  return host.effect(() => {
+    host.state.shapes = (icons[host.state.name] ?? []).map(([tag, attributes]) => ({ tag, ...attributes }));
+  });
+}

package/components/ui-icon-button/ui-icon-button.html

@@ -0,0 +1,180 @@
+<template component="ui-icon-button" controller="./ui-icon-button.js">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="label" type="string">Accessible name for the icon.</prop>
+    <prop name="size" type="sm | md | lg" default="md">size token.</prop>
+    <prop name="variant" type="ghost | outline | solid" default="ghost">variant token.</prop>
+    <prop name="anticipatory" type="boolean" default="false">anticipatory token.</prop>
+    <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
+  </defs>
+  <button :disabled="disabled" type="button" :aria-label="label"><slot></slot></button>
+  <style>
+    :host {
+      display: inline-flex;
+      color: var(--ui-text-secondary);
+    }
+
+    :host-state([anticipatory]) {
+      position: relative;
+    }
+
+    :host-state([anticipatory])::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 1;
+      inline-size: var(--ui-affordance-guide-size, 0.25rem);
+      block-size: var(--ui-affordance-guide-size, 0.25rem);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+      pointer-events: none;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
+     * surface and icon. The root is the native button, so hiding it outright would hide the dot
+     * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+    @media (hover: hover) and (pointer: fine) {
+      :host-state([anticipatory]):not(:host-state([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible) {
+        border-color: transparent;
+        background: transparent;
+        box-shadow: none;
+        color: transparent;
+      }
+    }
+
+    :host-state([anticipatory]):is(:host-state([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible)::before {
+      opacity: 0;
+    }
+
+    :host {
+      appearance: none;
+      inline-size: var(--ui-icon-button-size, 2rem);
+      block-size: var(--ui-icon-button-size, 2rem);
+      min-inline-size: var(--ui-icon-button-size, 2rem);
+      min-block-size: var(--ui-icon-button-size, 2rem);
+      padding: 0;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
+      background: var(--ui-icon-button-bg, transparent);
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      :host-state([anticipatory])::before {
+        opacity: 0;
+      }
+    }
+
+    :host-state([size="sm"]) {
+      inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      block-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-block-size: var(--ui-icon-button-size-sm, 1.75rem);
+    }
+
+    :host-state([size="lg"]) {
+      inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      block-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-block-size: var(--ui-icon-button-size-lg, 2.5rem);
+    }
+
+    :host-state([round]) {
+      border-radius: var(--ui-radius-round, 999px);
+    }
+
+    :host-state([variant="outline"]) {
+      border-color: var(--ui-icon-button-border, var(--ui-border-default));
+      background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
+      color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+    }
+
+    :host-state([variant="solid"]) {
+      background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
+      color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-icon-button-solid-shadow,
+        0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
+      );
+    }
+
+    :host:hover:enabled {
+      /* Derived from the text colour so the ghost hover shows on any background. */
+      background: var(--ui-icon-button-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+    }
+
+    :host-state([variant="outline"]):hover:enabled {
+      border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+    }
+
+    :host-state([variant="solid"]):hover:enabled {
+      background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+    }
+
+    :host:active:enabled {
+      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+    }
+
+    :host:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
+    :host:disabled {
+      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
+      color: var(--ui-icon-button-disabled-color, inherit);
+      cursor: not-allowed;
+    }
+
+    :host-state([variant="outline"]):disabled {
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
+    }
+
+    :host-state([variant="solid"]):disabled {
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
+    }
+
+    :host {
+      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+    }
+
+    :host-state([size="sm"]) {
+      --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+    }
+
+    :host-state([size="lg"]) {
+      --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
+    }
+
+    :slotted(svg) {
+      inline-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      block-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      flex-shrink: 0;
+      stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-icon-button/ui-icon-button.js

@@ -0,0 +1,7 @@
+// Marks an anticipatory button for the enclosing ui-affordance-scope, which reveals it on proximity.
+export default function controller(host) {
+  return host.effect(() => {
+    if (host.state.anticipatory) host.element.setAttribute("data-ui-affordance", "button");
+    else host.element.removeAttribute("data-ui-affordance");
+  });
+}

package/components/ui-input/ui-input.html

@@ -0,0 +1,81 @@
+<template component="ui-input" controller="./ui-input.js">
+  <defs>
+    <prop name="value" type="string">Current text value.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents editing and form submission.</prop>
+    <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+    <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
+    <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
+  </defs>
+  <input :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid">
+  <style>
+    :host {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md, 2.5rem);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-input-radius, var(--ui-radius-2));
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-input-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :host::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :host::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :host:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :host:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :host[aria-invalid="true"],
+    :host:user-invalid {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :host:is([aria-invalid="true"], :user-invalid):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :host:disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-input/ui-input.js

@@ -0,0 +1,7 @@
+// The value attribute only sets the default; a controlled value is applied to the live input.
+export default function controller(host) {
+  return host.effect(() => {
+    const value = host.state.value;
+    if (value !== undefined && value !== null && host.element.value !== String(value)) host.element.value = String(value);
+  });
+}

package/components/ui-menu/ui-menu.html

@@ -0,0 +1,87 @@
+<template component="ui-menu" controller="./ui-menu.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the menu is open initially or when set externally.</prop>
+    <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
+    <prop name="placement" type="string" default="bottom-start">Positions an associated menu relative to its trigger.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <event name="select" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="open" type="object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })"></event>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <div role="menu" aria-orientation="vertical"><div class="surface"><slot></slot></div></div>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      inline-size: max-content;
+      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2));
+      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    .surface {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      padding: var(--ui-space-1);
+      background: var(--ui-surface-elevated);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      max-block-size: inherit;
+      overflow: auto;
+    }
+
+    :host:not(:host-state([internalOpen])) {
+      display: none;
+    }
+
+    :host[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      overflow: visible;
+      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :host[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :host[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host[popover] {
+        transition: none;
+      }
+    }
+  </style>
+</template>

package/components/ui-menu/ui-menu.js

@@ -0,0 +1,114 @@
+import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+
+function triggerFor(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+
+function disabled(item) {
+  return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
+}
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
+  const items = () => Array.from(element.querySelectorAll('[data-component~="ui-menu-item"]'));
+  let anchor = null;
+  let surface = null;
+  let lastFor;
+  let lastPlacement;
+  let lastExternalOpen = Boolean(host.state.open);
+  host.state.internalOpen = lastExternalOpen;
+
+  const onAnchorClick = (event) => {
+    const trigger = triggerFor(event);
+    if (host.state.internalOpen) close("action", trigger);
+    else {
+      host.state.internalOpen = true;
+      host.dispatch("open", { open: true, reason: "action", trigger });
+      requestAnimationFrame(() => items().find((item) => !disabled(item))?.focus());
+    }
+  };
+  const close = (reason, trigger) => {
+    if (!host.state.internalOpen) return;
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger });
+    if (reason === "escape") anchor?.focus();
+  };
+  const ids = createIdResolver(document, () => apply());
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    if (nextFor === lastFor && nextPlacement === lastPlacement && surface) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    surface?.destroy();
+    anchor?.removeEventListener("click", onAnchorClick);
+    anchor = ids.get(nextFor);
+    anchor?.addEventListener("click", onAnchorClick);
+    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+  };
+  const apply = () => {
+    const externalOpen = Boolean(host.state.open);
+    if (externalOpen !== lastExternalOpen) {
+      lastExternalOpen = externalOpen;
+      host.state.internalOpen = externalOpen;
+    }
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    if (anchor) {
+      anchor.setAttribute("aria-haspopup", "menu");
+      anchor.setAttribute("aria-expanded", String(open));
+    }
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const select = (item, trigger) => {
+    if (!item || disabled(item)) return;
+    const value = item.getAttribute("data-value") ?? item.getAttribute("value") ?? "";
+    host.dispatch("select", { value, trigger });
+    host.dispatch("close", { open: false, reason: "action", trigger });
+    host.state.internalOpen = false;
+  };
+  const onClick = (event) => select(event.target.closest?.('[data-component~="ui-menu-item"]'), triggerFor(event));
+  const onKeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+      return;
+    }
+    const enabled = items().filter((item) => !disabled(item));
+    const target = event.target.closest?.('[data-component~="ui-menu-item"]');
+    const index = target ? enabled.indexOf(target) : -1;
+    if (["Enter", " "].includes(event.key)) {
+      if (index >= 0) {
+        event.preventDefault();
+        select(target, "keyboard");
+      }
+    } else if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled.length) {
+      event.preventDefault();
+      const next = event.key === "ArrowDown" ? (index < 0 ? 0 : Math.min(index + 1, enabled.length - 1)) : (index <= 0 ? enabled.length - 1 : index - 1);
+      enabled[next]?.focus();
+    }
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    ids.stop();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+    anchor?.removeEventListener("click", onAnchorClick);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}

package/components/ui-menu-item/ui-menu-item.html

@@ -0,0 +1,37 @@
+<template component="ui-menu-item">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="value" type="string" default="">value token.</prop>
+  </defs>
+  <div role="menuitem" tabindex="-1" :aria-disabled="disabled" :data-value="value"><slot></slot></div>
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      text-align: left;
+      border-radius: var(--ui-radius-2);
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium, 500);
+      cursor: pointer;
+      outline: none;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+      background: var(--ui-surface-subtle);
+    }
+
+    :host[aria-disabled="true"] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-popover/ui-popover.html

@@ -0,0 +1,85 @@
+<template component="ui-popover" controller="./ui-popover.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
+    <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
+    <prop name="placement" type="string" default="bottom-start">Positions the surface relative to its trigger.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <event
+      name="open"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <span><div class="surface"><slot></slot></div></span>
+  <style>
+    :host {
+      box-sizing: border-box;
+      max-inline-size: min(
+        20rem,
+        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
+      );
+      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .surface {
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      max-block-size: inherit;
+      overflow: auto;
+      padding: var(--ui-space-3);
+      background: var(--ui-surface-elevated);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+    }
+
+    :host:not(:host-state([internalOpen])) {
+      display: none;
+    }
+
+    :host[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :host[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :host[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host[popover] {
+        transition: none;
+      }
+    }
+  </style>
+</template>