aidos-ui 5.0.10 → 5.0.12

package/dist/index.js

@@ -1,6 +1,7 @@
-import React35, { useState, Children, useId, useContext, useMemo, cloneElement, useRef, useEffect, useCallback, useSyncExternalStore, createContext, startTransition } from 'react';
+import React35, { useState, Children, useId, useContext, useMemo, cloneElement, useRef, createContext, useCallback, useEffect, useSyncExternalStore, startTransition } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Icon as Icon$1 } from '@iconify/react';
+import { createPortal } from 'react-dom';
 
 // src/Avatar.tsx
 
@@ -28,50 +29,32 @@ function hash(source, modulus) {
 function isServer() {
   return typeof window === "undefined" || window.document == null;
 }
-var aliases = {
-  margin: (value) => {
-    if (value == null) {
-      return [];
-    }
-    const matches = typeof value === "string" ? Array.from(value.matchAll(/(.+) (.+)$/g))[0] : null;
-    if (matches) {
-      return [
-        ["margin-top", matches[1]],
-        ["margin-bottom", matches[1]],
-        ["margin-left", matches[2]],
-        ["margin-right", matches[2]]
-      ];
-    } else {
-      return [
-        ["margin-top", value],
-        ["margin-bottom", value],
-        ["margin-left", value],
-        ["margin-right", value]
-      ];
-    }
-  },
-  padding: (value) => {
-    if (value == null) {
-      return [];
-    }
-    const matches = typeof value === "string" ? Array.from(value.matchAll(/(.+) (.+)$/g))[0] : null;
-    if (matches) {
-      return [
-        ["padding-top", matches[1]],
-        ["padding-bottom", matches[1]],
-        ["padding-left", matches[2]],
-        ["padding-right", matches[2]]
-      ];
-    } else {
-      return [
-        ["padding-top", value],
-        ["padding-bottom", value],
-        ["padding-left", value],
-        ["padding-right", value]
-      ];
-    }
+function spacingEntries(key, value) {
+  const values = [];
+  let token = "";
+  let depth = 0;
+  let quote = "";
+  for (const char of String(value)) {
+    if (quote) {
+      if (char === quote && !token.endsWith("\\")) quote = "";
+    } else if (char === '"' || char === "'") quote = char;
+    else if (char === "(") depth++;
+    else if (char === ")") depth--;
+    if (/\s/.test(char) && depth === 0 && !quote) {
+      if (token) values.push(token);
+      token = "";
+    } else token += char;
   }
-};
+  if (token) values.push(token);
+  if (values.length < 1 || values.length > 4) return [[key, value]];
+  const [top, right = top, bottom = top, left = right] = values;
+  return [
+    [`${key}Top`, top],
+    [`${key}Right`, right],
+    [`${key}Bottom`, bottom],
+    [`${key}Left`, left]
+  ];
+}
 var rawHashMap = /* @__PURE__ */ new Map();
 function createStyleNode(content) {
   if (isServer()) {
@@ -108,7 +91,41 @@ var pixelStyles = /* @__PURE__ */ new Set([
   "outline-offset",
   "gap",
   "row-gap",
-  "column-gap"
+  "column-gap",
+  "padding-inline",
+  "padding-block",
+  "padding-inline-start",
+  "padding-inline-end",
+  "padding-block-start",
+  "padding-block-end",
+  "margin-inline",
+  "margin-block",
+  "margin-inline-start",
+  "margin-inline-end",
+  "margin-block-start",
+  "margin-block-end",
+  "inline-size",
+  "block-size",
+  "min-inline-size",
+  "min-block-size",
+  "max-inline-size",
+  "max-block-size",
+  "inset",
+  "inset-inline",
+  "inset-block",
+  "inset-inline-start",
+  "inset-inline-end",
+  "inset-block-start",
+  "inset-block-end",
+  "border-width",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "outline-width",
+  "flex-basis",
+  "letter-spacing",
+  "text-indent"
 ]);
 var toPixelValue = (key, value) => {
   const stringValue = value.toString();
@@ -126,11 +143,12 @@ var flattenJSS = (jss) => {
   } else if (Array.isArray(jss)) {
     const result = {};
     for (const item of jss) {
-      const styles15 = flattenJSS(item);
-      for (const [key, value] of Object.entries(styles15)) {
+      const styles12 = flattenJSS(item);
+      for (const [key, value] of Object.entries(styles12)) {
         const current = result[key];
+        delete result[key];
         if (typeof current === "object" && current != null && typeof value === "object" && value != null) {
-          result[key] = { ...current, ...value };
+          result[key] = flattenJSS([current, value]);
         } else {
           result[key] = value;
         }
@@ -138,22 +156,33 @@ var flattenJSS = (jss) => {
     }
     return result;
   } else {
-    return jss;
+    const result = {};
+    for (const [key, value] of Object.entries(jss)) {
+      if (value == null) continue;
+      const entries = key === "padding" || key === "margin" ? spacingEntries(key, value) : [[key, typeof value === "object" ? flattenJSS(value) : value]];
+      for (const [property, entry] of entries) {
+        delete result[property];
+        result[property] = entry;
+      }
+    }
+    return result;
   }
 };
 var toClassnames = (jss, componentName) => {
   jss = flattenJSS(jss);
-  const stylesStack = Object.entries(jss);
+  const spacing = {};
+  const stylesStack = Object.entries(jss).filter(([key, value]) => {
+    if (!/^(padding|margin)([A-Z-]|$)/.test(key)) return true;
+    spacing[key] = value;
+    return false;
+  });
+  if (Object.keys(spacing).length) stylesStack.push(["", spacing]);
   const classNames = [];
   if (componentName) {
     classNames.push(componentName);
   }
   while (stylesStack.length) {
     const [key, value] = stylesStack.pop();
-    if (aliases[key]) {
-      stylesStack.push(...aliases[key](value));
-      continue;
-    }
     const inputKey = (key.startsWith("@media") ? "specific:" : "") + key + JSON.stringify(value);
     const rawHash = hash(inputKey).toString(32);
     const cached = rawHashMap.get(rawHash);
@@ -194,15 +223,15 @@ function JSSProvider({
   themes,
   children
 }) {
-  const [styles15] = useState(() => getBaseStyles(themes));
+  const [styles12] = useState(() => getBaseStyles(themes));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    styles15.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)),
+    styles12.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)),
     children
   ] });
 }
 function JSServerStyles() {
-  const [styles15] = useState(() => serverStyles);
-  return /* @__PURE__ */ jsx(Fragment, { children: styles15.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)) });
+  const [styles12] = useState(() => serverStyles);
+  return /* @__PURE__ */ jsx(Fragment, { children: styles12.map((style, i) => /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: style } }, i)) });
 }
 function cssVar(string) {
   return `var(${string})`;
@@ -303,7 +332,7 @@ var lightTheme = {
   /* Effects */
   ["--warning"]: "rgb(166, 107, 0)",
   ["--highlight"]: "rgb(0, 122, 255)",
-  ["--outline"]: "rgb(103, 176, 255)",
+  ["--outline"]: "rgb(112, 140, 170)",
   ["--light-highlight"]: "rgb(220, 232, 245)",
   ["--light-highlight-hovered"]: "rgb(209, 226, 244)",
   ["--light-highlight-pressed"]: "rgb(197, 218, 240)",
@@ -367,7 +396,7 @@ var darkTheme = {
   /* Effects */
   ["--warning"]: "rgb(255, 204, 0)",
   ["--highlight"]: "rgb(50, 140, 220)",
-  ["--outline"]: "rgb(91, 170, 255)",
+  ["--outline"]: "rgb(125, 170, 220)",
   ["--light-highlight"]: "rgba(49, 57, 63)",
   ["--light-highlight-hovered"]: "rgb(54, 68, 80)",
   ["--light-highlight-pressed"]: "rgb(60, 78, 96)",
@@ -422,10 +451,6 @@ var baseStyles = `
   -moz-osx-font-smoothing: grayscale;
 }
 
-*:focus {
-  outline-color: ${cssVar("--highlight")};
-}
-
 button,
 input,
 textarea,
@@ -443,6 +468,7 @@ html {
 }
 
 body {
+  color: ${cssVar("--primary-text")};
   margin: 0;
   min-height: 100%;
   width: 100%;
@@ -481,6 +507,17 @@ body {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  @keyframes dialogFadeIn { from { opacity: 1; } to { opacity: 1; } }
+  @keyframes popoverFadeIn { from { opacity: 1; } to { opacity: 1; } }
+  @keyframes backdropFadeIn { from { opacity: 1; } to { opacity: 1; } }
+}
+
+[data-aidos-action-scope]:is(:hover, :focus-within) [data-aidos-actions] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 `;
 var backgroundStyles = {
   highlight: {
@@ -1039,8 +1076,7 @@ var styles3 = {
       backgroundColor: cssVar("--background-button-secondary")
     },
     ":focus-visible": {
-      outlineWidth: "2px",
-      outlineStyle: "solid",
+      outline: `2px solid ${cssVar("--outline")}`,
       outlineOffset: 2
     }
   },
@@ -1101,6 +1137,7 @@ function getInteractableJSS({
 }) {
   return [
     styles3.root,
+    getTextColor(getGlyphColor(color, disabled, bare)),
     color === "primary" && styles3.primary,
     color === "secondary" && styles3.secondary,
     color === "negative" && styles3.negative,
@@ -1252,6 +1289,7 @@ var BaseButton = React35.forwardRef(function BaseButton2({
       ref,
       onClick: (event) => {
         if (disabled) {
+          event.preventDefault();
           return;
         }
         onClick?.(event);
@@ -1330,6 +1368,7 @@ var BaseLink = React35.forwardRef(function BaseLink2({
       ref,
       onClick: (event) => {
         if (disabled) {
+          event.preventDefault();
           return;
         }
         onClick?.(event);
@@ -1480,7 +1519,11 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
   children,
   jss,
   headline,
-  headlineSize = "medium",
+  size = "medium",
+  indent,
+  jssPrimary,
+  jssAddOn,
+  headlineSize = size === "small" || size === "xsmall" ? "small" : "medium",
   headlineColor = "primary",
   headlineAddOn,
   body,
@@ -1490,9 +1533,10 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
   icon,
   iconPosition = "start",
   iconSize = "medium",
+  iconJss,
   addOn,
   disabled = false,
-  padding = "medium",
+  padding = size === "medium" || size === "large" ? "medium" : "small",
   gap = "medium",
   selected,
   headlineBold,
@@ -1505,7 +1549,15 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
       headlineBold,
       padding,
       gap,
-      addOn: icon ? /* @__PURE__ */ jsx(Icon, { icon, size: iconSize, color: contentColor }) : void 0,
+      addOn: icon ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon,
+          size: iconSize,
+          color: contentColor,
+          jss: iconJss
+        }
+      ) : void 0,
       addOnPosition: iconPosition,
       headline,
       headlineSize,
@@ -1516,7 +1568,8 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
       bodyColor: disabled || selected ? contentColor : bodyColor,
       bodyEllipsis,
       grow: true,
-      shrink: false
+      shrink: false,
+      jss: jssPrimary
     }
   );
   return /* @__PURE__ */ jsxs(
@@ -1525,9 +1578,15 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
       ...otherProps,
       ref,
       relative: true,
+      "data-aidos-action-scope": true,
       tag: "li",
       role: "row",
-      jss: [getTextColor(contentColor), jss],
+      jss: [
+        getTextColor(contentColor),
+        { minHeight: { xsmall: 28, small: 32, medium: 36, large: 44 }[size] },
+        indent != null && { paddingInlineStart: indent },
+        jss
+      ],
       children: [
         /* @__PURE__ */ jsx(
           Row,
@@ -1540,7 +1599,17 @@ var BaseListItem = React35.forwardRef(function BaseListItem2({
             children: children({ content })
           }
         ),
-        addOn && /* @__PURE__ */ jsx(BaseListAddOn, { role: "gridcell", children: addOn })
+        addOn && /* @__PURE__ */ jsx(
+          BaseListAddOn,
+          {
+            role: "gridcell",
+            jss: [
+              { minWidth: 24, height: "auto", alignSelf: "stretch" },
+              jssAddOn
+            ],
+            children: addOn
+          }
+        )
       ]
     }
   );
@@ -1561,6 +1630,14 @@ function Box({
     }
   );
 }
+
+// src/controlSize.ts
+var controlSizes = {
+  xsmall: { height: 24, icon: 12, padding: 6, text: "small" },
+  small: { height: 28, icon: 14, padding: 8, text: "small" },
+  medium: { height: 34, icon: 18, padding: 14, text: "medium" },
+  large: { height: 40, icon: 20, padding: 16, text: "large" }
+};
 var Button = React35.forwardRef(function Button2({
   children,
   color,
@@ -1568,12 +1645,18 @@ var Button = React35.forwardRef(function Button2({
   disabled,
   icon,
   iconPosition = "left",
+  size = "medium",
+  leading,
+  trailing,
+  rowProps,
   align = "center",
   gap = "medium",
   justify = "center",
   jss,
   ...otherProps
 }, ref) {
+  const metrics = controlSizes[size];
+  const glyph = getGlyphColor(color, disabled, bare);
   return /* @__PURE__ */ jsx(
     BaseButton,
     {
@@ -1585,69 +1668,86 @@ var Button = React35.forwardRef(function Button2({
       padding: "none",
       jss: [
         {
-          height: 34,
-          padding: "0 14px",
+          height: metrics.height,
+          minWidth: 0,
+          maxWidth: "100%",
+          padding: `0 ${metrics.padding}px`,
           borderRadius: cssVar("--border-radius-l"),
           justifyContent: "center",
           userSelect: "none"
         },
         jss
       ],
-      children: /* @__PURE__ */ jsxs(Row, { grow: true, align, gap, justify, children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon,
-            size: "medium",
-            color: getGlyphColor(color, disabled, bare)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "medium",
-            color: getGlyphColor(color, disabled, bare),
-            jss: {
-              fontWeight: 600,
-              letterSpacing: "-0.01em"
-            },
-            children
-          }
-        ),
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon,
-            size: "medium",
-            color: getGlyphColor(color, disabled, bare)
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        Row,
+        {
+          ...rowProps,
+          direction: "row",
+          grow: true,
+          align,
+          gap,
+          justify,
+          jss: [{ minWidth: 0 }, rowProps?.jss],
+          children: [
+            leading,
+            icon && iconPosition === "left" && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon,
+                size: "medium",
+                jss: { width: metrics.icon, height: metrics.icon, flexShrink: 0 },
+                color: glyph
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: metrics.text,
+                color: glyph,
+                jss: {
+                  minWidth: 0,
+                  fontWeight: 600,
+                  letterSpacing: "-0.01em"
+                },
+                children
+              }
+            ),
+            icon && iconPosition === "right" && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon,
+                size: "medium",
+                jss: { width: metrics.icon, height: metrics.icon, flexShrink: 0 },
+                color: glyph
+              }
+            ),
+            trailing
+          ]
+        }
+      )
     }
   );
 });
 
 // src/aria.ts
 function queryFocusables(root) {
-  const focusables = Array.from(
+  return Array.from(
     root.querySelectorAll(
-      "button,input,textarea,a,[tabindex='0'],[tabindex='-1']"
+      'button, input, textarea, select, a[href], [tabindex], [contenteditable="true"]'
     )
+  ).filter(
+    (element) => !element.matches(':disabled, input[type="hidden"]') && !element.closest("[inert], [hidden]") && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden"
   );
-  return focusables.filter((element) => !element["disabled"]);
 }
-var normalizeElements = (focusables, index) => {
-  for (const element2 of focusables) {
-    element2.tabIndex = -1;
-  }
-  const element = focusables[index] ?? focusables[focusables.length - 1];
-  element.tabIndex = 0;
-};
-var focusElement = (focusables, index) => {
-  normalizeElements(focusables, index);
-  const element = focusables[index] ?? focusables[focusables.length - 1];
-  element.focus();
-};
+function normalizeElements(elements, index) {
+  const selected = elements[Math.max(0, Math.min(index, elements.length - 1))];
+  for (const element of elements)
+    element.tabIndex = element === selected ? 0 : -1;
+}
+function focusElement(elements, index) {
+  normalizeElements(elements, index);
+  elements.find((element) => element.tabIndex === 0)?.focus();
+}
 function useRefEffect(callback) {
   const unsubscribeRef = useRef(null);
   return useCallback(
@@ -1671,81 +1771,74 @@ function useNavigation({
   autofocus = false,
   rowLength = 1,
   enabled = true,
-  initialIndex = 0
+  initialIndex = 0,
+  orientation = "both"
 } = {}) {
   return useRefEffect(
     useCallback(
       (root) => {
-        if (!enabled) {
-          return;
-        }
-        let index = Math.max(
-          0,
-          Math.min(initialIndex, queryFocusables(root).length - 1)
-        );
-        const elements = queryFocusables(root);
-        if (elements.length === 0) {
-          return;
-        }
-        if (elements.length !== 0 && autofocus) {
-          focusElement(elements, index);
-        } else {
+        if (!enabled) return;
+        let current;
+        const normalize = () => {
+          const elements = queryFocusables(root);
+          const activeIndex = elements.indexOf(
+            document.activeElement
+          );
+          const previousIndex = elements.indexOf(current);
+          const index = activeIndex >= 0 ? activeIndex : previousIndex >= 0 ? previousIndex : initialIndex;
           normalizeElements(elements, index);
-        }
-        const onKeyDown = (e) => {
-          const elements2 = queryFocusables(root);
-          if (elements2.length === 0) {
+          current = elements.find((element) => element.tabIndex === 0);
+        };
+        normalize();
+        if (autofocus) current?.focus();
+        const focusin = () => normalize();
+        const keydown = (event) => {
+          if (event.defaultPrevented || event.isComposing || event.altKey || event.metaKey || event.ctrlKey)
             return;
-          }
-          let newIndex = -1;
-          if (e.code === "ArrowUp") {
-            if (index - rowLength < 0) {
-              newIndex = elements2.length - elements2.length % rowLength + index;
-            } else {
-              newIndex = index - rowLength;
-            }
-          } else if (e.code === "ArrowLeft") {
-            if (index <= 0) {
-              newIndex = elements2.length - 1;
-            } else {
-              newIndex = index - 1;
-            }
-          } else if (e.code === "ArrowRight") {
-            if (index >= elements2.length - 1) {
-              newIndex = 0;
-            } else {
-              newIndex = index + 1;
-            }
-          } else if (e.code === "ArrowDown") {
-            if (index + rowLength > elements2.length - 1) {
-              newIndex = (index + rowLength) % rowLength;
-            } else {
-              newIndex = index + rowLength;
-            }
-          }
-          if (newIndex !== -1 && index !== newIndex) {
-            index = newIndex;
-            focusElement(elements2, index);
-            e.preventDefault();
-            e.stopPropagation();
-          }
+          const target = event.target;
+          if (target.matches('input, textarea, select, [contenteditable="true"]'))
+            return;
+          const elements = queryFocusables(root);
+          if (!elements.length) return;
+          const index = Math.max(
+            0,
+            elements.indexOf(document.activeElement)
+          );
+          let next;
+          if (event.key === "Home") next = 0;
+          else if (event.key === "End") next = elements.length - 1;
+          else if (orientation !== "horizontal" && event.key === "ArrowDown")
+            next = index + rowLength;
+          else if (orientation !== "horizontal" && event.key === "ArrowUp")
+            next = index - rowLength;
+          else if (orientation !== "vertical" && event.key === "ArrowRight")
+            next = index + 1;
+          else if (orientation !== "vertical" && event.key === "ArrowLeft")
+            next = index - 1;
+          else return;
+          event.preventDefault();
+          event.stopPropagation();
+          focusElement(
+            elements,
+            (next % elements.length + elements.length) % elements.length
+          );
         };
-        root.addEventListener("keydown", onKeyDown);
-        const observer = new MutationObserver((mutationList) => {
-          if (mutationList.filter((m) => m.type === "childList").length > 0) {
-            const elements2 = queryFocusables(root);
-            if (elements2.length > 0) {
-              normalizeElements(elements2, index);
-            }
-          }
+        root.addEventListener("focusin", focusin);
+        root.addEventListener("keydown", keydown);
+        const observer = new MutationObserver(normalize);
+        observer.observe(root, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["disabled", "aria-disabled", "hidden", "inert"]
         });
-        observer.observe(root, { childList: true });
         return () => {
-          root.removeEventListener("keydown", onKeyDown);
           observer.disconnect();
+          root.removeEventListener("focusin", focusin);
+          root.removeEventListener("keydown", keydown);
         };
       },
-      [autofocus, enabled, initialIndex, rowLength]
+      [autofocus, rowLength, enabled, initialIndex, orientation]
     )
   );
 }
@@ -2090,7 +2183,17 @@ function Circle({
     }
   );
 }
-var IconButton = React35.forwardRef(function IconButton2({ icon, color, bare, disabled, jss, label, ...buttonProps }, ref) {
+var IconButton = React35.forwardRef(function IconButton2({
+  icon,
+  color,
+  bare,
+  disabled,
+  size = "medium",
+  jss,
+  label,
+  ...buttonProps
+}, ref) {
+  const metrics = controlSizes[size];
   return /* @__PURE__ */ jsxs(
     BaseButton,
     {
@@ -2102,9 +2205,12 @@ var IconButton = React35.forwardRef(function IconButton2({ icon, color, bare, di
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          height: 34,
-          width: 34,
-          borderRadius: 17
+          height: metrics.height,
+          width: metrics.height,
+          minWidth: metrics.height,
+          flexShrink: 0,
+          padding: 0,
+          borderRadius: metrics.height / 2
         },
         jss
       ],
@@ -2116,6 +2222,7 @@ var IconButton = React35.forwardRef(function IconButton2({ icon, color, bare, di
           Icon,
           {
             size: "medium",
+            jss: { width: metrics.icon, height: metrics.icon },
             icon,
             color: getGlyphColor(color, disabled, bare)
           }
@@ -2230,19 +2337,19 @@ var InputFrame = React35.forwardRef(function InputFrame2({ children, jss, ...row
           ":hover": {
             borderColor: cssVar("--strong-divider")
           },
-          ":has(:focus-visible)": {
+          ":has(:is(input, textarea, select):focus-visible)": {
             borderColor: cssVar("--outline"),
             outline: `2px solid ${cssVar("--outline")}`,
-            outlineOffset: 1
+            outlineOffset: -2
           },
-          ":has(:disabled)": {
+          ":has(:is(input, textarea, select):disabled)": {
             backgroundColor: cssVar("--secondary-background"),
             borderColor: cssVar("--divider")
           },
-          ":has([aria-invalid=true])": {
+          ":has(:is(input, textarea, select)[aria-invalid=true])": {
             borderColor: cssVar("--negative-text")
           },
-          ":has([aria-invalid=true]:focus-visible)": {
+          ":has(:is(input, textarea, select)[aria-invalid=true]:focus-visible)": {
             outline: `2px solid ${cssVar("--negative-text")}`,
             outlineColor: cssVar("--negative-text")
           }
@@ -2324,97 +2431,185 @@ var NumericInputSegment = React35.forwardRef(
     );
   }
 );
-var styles5 = {
-  popover: {
-    padding: 0,
-    zIndex: 1e3,
-    top: `calc(100% + ${cssVar("--spacing-xs")})`,
-    right: "auto",
-    left: 0,
-    margin: 0,
-    border: 0,
-    overflow: "visible",
-    background: "transparent",
-    animation: "popoverFadeIn 0.15s ease-out"
-  },
-  card: {
-    minWidth: 220,
-    maxWidth: "calc(100vw - 32px)",
-    overflow: "hidden"
-  }
-};
-function Popover({
-  children,
-  close
-}) {
-  const activeElementRef = useRef(null);
-  const focusTrapRoot = useRefEffect(
+function useFloatingPosition(anchor, placement, align, onClose) {
+  const reference = useRef(anchor);
+  reference.current = anchor;
+  const close = useRef(onClose);
+  close.current = onClose;
+  return useRefEffect(
     useCallback(
-      (root) => {
-        activeElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        const selectedElement = root.querySelector(
-          '[aria-selected="true"]'
-        );
-        const autofocusElement = root.querySelector(
-          '[data-autofocus="true"]'
-        );
-        const [firstElement] = queryFocusables(root);
-        const element = selectedElement ?? autofocusElement ?? firstElement;
-        if (element) {
-          element.focus();
-        } else {
-          root.focus();
-        }
-        const keydown = (e) => {
-          if (e.key === "Escape") {
-            close();
-          } else if (e.key === "Tab") {
-            const focusables = queryFocusables(root).filter(
-              (element2) => element2.tabIndex !== -1
+      (element) => {
+        const toggle = () => {
+          if (!element.matches(":popover-open")) close.current();
+        };
+        element.addEventListener("toggle", toggle);
+        element.showPopover?.();
+        const update = () => {
+          if (!reference.current.current) return;
+          const rect = reference.current.current.getBoundingClientRect();
+          const viewport = window.visualViewport;
+          const left = viewport?.offsetLeft ?? 0;
+          const top = viewport?.offsetTop ?? 0;
+          const width = viewport?.width ?? window.innerWidth;
+          const height = viewport?.height ?? window.innerHeight;
+          const gap = 8;
+          const edge = 12;
+          element.style.setProperty(
+            "--aidos-overlay-width",
+            `${Math.max(0, width - edge * 2)}px`
+          );
+          element.style.setProperty(
+            "--aidos-overlay-height",
+            `${Math.max(0, height - edge * 2)}px`
+          );
+          const box = element.getBoundingClientRect();
+          const space = {
+            top: rect.top - top,
+            bottom: top + height - rect.bottom,
+            left: rect.left - left,
+            right: left + width - rect.right
+          };
+          const opposite = {
+            top: "bottom",
+            bottom: "top",
+            left: "right",
+            right: "left"
+          };
+          const vertical = placement === "top" || placement === "bottom";
+          const required = (vertical ? box.height : box.width) + gap + edge;
+          const side = space[placement] < required && space[opposite[placement]] > space[placement] ? opposite[placement] : placement;
+          const cross = (start, size, own) => align === "start" ? start : align === "end" ? start + size - own : start + (size - own) / 2;
+          const available = Math.max(0, space[side] - gap - edge);
+          const boxHeight = vertical ? Math.min(box.height, available) : box.height;
+          const boxWidth = vertical ? box.width : Math.min(box.width, available);
+          const x = vertical ? cross(rect.left, rect.width, boxWidth) : side === "left" ? rect.left - boxWidth - gap : rect.right + gap;
+          const y = vertical ? side === "top" ? rect.top - boxHeight - gap : rect.bottom + gap : cross(rect.top, rect.height, boxHeight);
+          element.style.left = `${Math.max(left + edge, Math.min(x, left + width - boxWidth - edge))}px`;
+          element.style.top = `${Math.max(top + edge, Math.min(y, top + height - boxHeight - edge))}px`;
+          if (vertical)
+            element.style.setProperty(
+              "--aidos-overlay-height",
+              `${available}px`
             );
-            if (focusables.length === 0) {
-              e.stopPropagation();
-              e.preventDefault();
-            }
-            const focusedIndex = focusables.findIndex(
-              (x) => x === document.activeElement
+          else
+            element.style.setProperty(
+              "--aidos-overlay-width",
+              `${available}px`
             );
-            if (focusables.length === 0) {
-              e.stopPropagation();
-              e.preventDefault();
-            } else if (e.shiftKey && focusedIndex === 0) {
-              focusables[focusables.length - 1].focus();
-              e.stopPropagation();
-              e.preventDefault();
-            } else if (!e.shiftKey && focusedIndex === focusables.length - 1) {
-              focusables[0].focus();
-              e.stopPropagation();
-              e.preventDefault();
-            } else ;
-          }
+          element.dataset.placement = side;
         };
-        const click = () => {
-          close();
-        };
-        const timeout = window.setTimeout(() => {
-          window.addEventListener("keydown", keydown);
-          window.addEventListener("click", click);
-        }, 0);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        if (reference.current.current)
+          observer.observe(reference.current.current);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        window.visualViewport?.addEventListener("resize", update);
+        window.visualViewport?.addEventListener("scroll", update);
         return () => {
-          window.clearTimeout(timeout);
-          activeElementRef.current?.focus();
-          window.removeEventListener("keydown", keydown);
-          window.removeEventListener("click", click);
+          element.removeEventListener("toggle", toggle);
+          observer.disconnect();
+          window.removeEventListener("resize", update);
+          window.removeEventListener("scroll", update, true);
+          window.visualViewport?.removeEventListener("resize", update);
+          window.visualViewport?.removeEventListener("scroll", update);
         };
       },
-      [close]
+      [placement, align]
     )
   );
-  return /* @__PURE__ */ jsx(Card, { variant: "floating", padding: "small", gap: "none", jss: styles5.card, children: /* @__PURE__ */ jsx(BaseView, { ref: focusTrapRoot, jss: { width: "100%" }, children }) });
+}
+function Popover({
+  children,
+  close,
+  initialFocus
+}) {
+  const previous = useRef(null);
+  const closeRef = useRef(close);
+  closeRef.current = close;
+  const initial = useRef(initialFocus);
+  initial.current = initialFocus;
+  const mount = useRefEffect(
+    useCallback((root) => {
+      previous.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      let mounted = true;
+      queueMicrotask(() => {
+        if (!mounted || !root.getClientRects().length) return;
+        const items = queryFocusables(root);
+        const selected = root.querySelector(
+          '[aria-selected="true"], [aria-checked="true"]'
+        );
+        (initial.current?.current ?? items.find(
+          (item) => item.matches('[autofocus], [data-autofocus="true"]')
+        ) ?? items.find((item) => item === selected || selected?.contains(item)) ?? items[0] ?? root).focus({ preventScroll: true });
+      });
+      const outside = (event) => {
+        if (!root.contains(event.target) && !previous.current?.contains(event.target))
+          closeRef.current();
+      };
+      const native = root.closest("[popover]");
+      if (!native) document.addEventListener("pointerdown", outside);
+      return () => {
+        mounted = false;
+        if (!native) document.removeEventListener("pointerdown", outside);
+        if (root.contains(document.activeElement) && previous.current?.isConnected)
+          previous.current.focus({ preventScroll: true });
+      };
+    }, [])
+  );
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      ref: mount,
+      "data-aidos-popover": true,
+      tabIndex: -1,
+      variant: "floating",
+      padding: "small",
+      gap: "none",
+      jss: {
+        minWidth: "min(220px, calc(100vw - 24px))",
+        maxWidth: "100%",
+        borderRadius: "calc(var(--border-radius-s) + var(--spacing-s))",
+        ":focus-visible": { outline: "none" }
+      },
+      onKeyDown: (event) => {
+        if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          if (!event.currentTarget.closest("[popover]")?.showPopover) {
+            event.preventDefault();
+            close();
+          }
+        } else if (event.key === "Tab") {
+          const items = queryFocusables(event.currentTarget).filter(
+            (item) => item.tabIndex >= 0
+          );
+          const index = items.indexOf(document.activeElement);
+          if (items.length && (event.shiftKey ? index > 0 : index >= 0 && index < items.length - 1))
+            return;
+          const outside = queryFocusables(document.body).filter(
+            (item) => item.tabIndex >= 0 && !event.currentTarget.contains(item)
+          );
+          const next = outside[outside.indexOf(previous.current) + (event.shiftKey ? -1 : 1)];
+          if (next) {
+            event.preventDefault();
+            next.focus();
+          }
+          close();
+        }
+      },
+      children
+    }
+  );
 }
 function PopoverTrigger({
   PopoverComponent,
+  content,
   ariaLabel,
+  placement = "bottom",
+  align = "start",
+  role = "dialog",
   jss,
   jssDialog,
   grow,
@@ -2422,59 +2617,71 @@ function PopoverTrigger({
   tag,
   children
 }) {
-  const [popover, setPopover] = useState(null);
-  const dialogRef = useRef(null);
-  useEffect(() => {
-    if (popover == null) {
-      dialogRef.current?.close();
-    } else {
-      dialogRef.current?.show();
-    }
-  }, [popover]);
+  const [open, setOpen] = useState(null);
+  const anchor = useRef(null);
+  const surface = useRef(null);
+  const pointerOpen = useRef(false);
+  const id = useId();
+  const close = useCallback(() => setOpen(null), []);
+  const position = useFloatingPosition(anchor, placement, align, close);
   const toggle = (input) => {
-    if (popover == null) {
-      setPopover(
-        /* @__PURE__ */ jsx(
-          PopoverComponent,
-          {
-            ...input,
-            close: () => {
-              setPopover(null);
-            }
-          }
-        )
-      );
-    } else {
-      setPopover(null);
-    }
+    if (open || pointerOpen.current) close();
+    else
+      setOpen({
+        element: PopoverComponent ? /* @__PURE__ */ jsx(PopoverComponent, { ...input, close }) : null
+      });
+    pointerOpen.current = false;
   };
   return /* @__PURE__ */ jsxs(
     BaseView,
     {
+      ref: anchor,
       grow,
       shrink,
       tag,
-      relative: true,
-      jss: [jss, { position: "relative", display: "inline-block" }],
+      jss: [{ display: "inline-block", minWidth: 0 }, jss],
+      onPointerDown: (event) => {
+        if (!surface.current?.contains(event.target))
+          pointerOpen.current = Boolean(open);
+      },
       children: [
-        children({ toggle, expanded: popover != null }),
-        /* @__PURE__ */ jsx(
-          "dialog",
-          {
-            "aria-label": ariaLabel,
-            ref: (ref) => {
-              dialogRef.current = ref;
-            },
-            className: toClassnames([styles5.popover, jssDialog]),
-            onClose: () => {
-              setPopover(null);
-            },
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            },
-            children: popover
-          }
+        children({ toggle, expanded: open != null, id }),
+        open && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id,
+              role,
+              "aria-label": ariaLabel,
+              popover: "auto",
+              ref: (element) => {
+                surface.current = element;
+                position(element);
+              },
+              className: toClassnames([
+                {
+                  position: "fixed",
+                  inset: "auto",
+                  padding: 0,
+                  margin: 0,
+                  border: "1px solid var(--divider)",
+                  boxShadow: "var(--shadow-md)",
+                  zIndex: 1e3,
+                  width: "max-content",
+                  maxWidth: "var(--aidos-overlay-width, calc(100vw - 24px))",
+                  maxHeight: "var(--aidos-overlay-height, calc(100dvh - 24px))",
+                  overflow: "auto",
+                  background: "var(--overlay-background)",
+                  color: "var(--primary-text)",
+                  borderRadius: "calc(var(--border-radius-s) + var(--spacing-s) + 1px)",
+                  " [data-aidos-popover]": { boxShadow: "none" }
+                },
+                jssDialog
+              ]),
+              children: content != null ? /* @__PURE__ */ jsx(Popover, { close, children: typeof content === "function" ? content({ close }) : content }) : open.element
+            }
+          ),
+          anchor.current.closest("dialog[open], [popover]") ?? document.body
         )
       ]
     }
@@ -2974,7 +3181,7 @@ var DateInput = React35.forwardRef(function DateInput2({
     field
   ] });
 });
-var styles6 = {
+var styles5 = {
   root: {
     backgroundColor: "var(--primary-background)"
   },
@@ -2983,7 +3190,10 @@ var styles6 = {
     flexGrow: 1,
     backgroundColor: "var(--primary-background)",
     color: "var(--primary-text)",
-    outline: "none",
+    ":focus-visible": {
+      outline: "2px solid var(--outline)",
+      outlineOffset: -2
+    },
     border: "none",
     fontSize: 20,
     lineHeight: 24 / 20,
@@ -2996,7 +3206,7 @@ var styles6 = {
   }
 };
 var DatetimeInput = React35.forwardRef(function DatetimeInput2({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) {
-  return /* @__PURE__ */ jsxs(Row, { jss: styles6.root, children: [
+  return /* @__PURE__ */ jsxs(Row, { jss: styles5.root, children: [
     icon && /* @__PURE__ */ jsx(Box, { padding: "medium", children: /* @__PURE__ */ jsx(Icon, { size: "medium", color: "secondary", icon }) }),
     /* @__PURE__ */ jsx(
       BaseInput,
@@ -3010,81 +3220,142 @@ var DatetimeInput = React35.forwardRef(function DatetimeInput2({ date, onDateCha
             onDateChange(parseDatetimeInputValue(e.target.value));
           }
         },
-        jss: [styles6.input, jss]
+        jss: [styles5.input, jss]
       }
     ),
     addOn
   ] });
 });
-var styles7 = {
-  root: {
-    width: "100%",
-    borderBottom: "1px solid var(--divider)"
-  }
-};
-function ListDivider() {
-  return /* @__PURE__ */ jsx(BaseView, { jss: styles7.root });
+var DialogTitleContext = createContext(void 0);
+function Modal({ open, ...props }) {
+  return open ? /* @__PURE__ */ jsx(ModalSurface, { ...props }) : null;
 }
-var styles8 = {
-  dialog: {
-    border: "1px solid var(--divider)",
-    borderRadius: "var(--border-radius-l)",
-    padding: 0,
-    boxShadow: "var(--shadow-lg)",
-    animation: "dialogFadeIn 0.2s ease-out",
-    "::backdrop": {
-      backgroundColor: "rgba(0, 0, 0, 0.4)",
-      animation: "backdropFadeIn 0.2s ease-out"
-    }
-  },
-  root: {
-    display: "grid",
-    width: "calc(100vw - 48px)",
-    gridTemplateAreas: `
-        "header"
-        "content"
-    `,
-    "@media (min-width: 750px)": {
-      maxWidth: 750
-    },
-    backgroundColor: "var(--secondary-background)"
-  },
-  header: {
-    gridArea: "header"
-  },
-  content: {
-    gridArea: "content"
-  }
-};
-var Dialog = ({
+function ModalSurface({
   label,
   children,
-  close
-}) => {
-  return /* @__PURE__ */ jsxs(BaseView, { jss: styles8.root, children: [
-    /* @__PURE__ */ jsxs(Column, { jss: styles8.header, children: [
-      /* @__PURE__ */ jsxs(Row, { padding: "medium", justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx(Text, { size: "medium", color: "secondary", children: label }),
-        /* @__PURE__ */ jsx(
-          IconButton,
+  onClose,
+  onAfterClose,
+  closeOnOutsideClick = true,
+  initialFocus,
+  jss
+}) {
+  const titleId = useId();
+  const afterClose = useRef(onAfterClose);
+  afterClose.current = onAfterClose;
+  const initial = useRef(initialFocus);
+  initial.current = initialFocus;
+  const mount = useRefEffect(
+    useCallback((element) => {
+      const previous = document.activeElement;
+      element.showModal();
+      initial.current?.current?.focus({ preventScroll: true });
+      return () => {
+        element.close();
+        queueMicrotask(() => {
+          if (element.isConnected && element.open) return;
+          if (previous instanceof HTMLElement && previous.isConnected && (document.activeElement === document.body || element.contains(document.activeElement)))
+            previous.focus({ preventScroll: true });
+          afterClose.current?.();
+        });
+      };
+    }, [])
+  );
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: mount,
+      "aria-label": label,
+      "aria-labelledby": label ? void 0 : titleId,
+      onCancel: (event) => {
+        event.preventDefault();
+        onClose();
+      },
+      onClose: (event) => {
+        if (!event.currentTarget.open) onClose();
+      },
+      onClick: (event) => {
+        if (!closeOnOutsideClick || event.target !== event.currentTarget)
+          return;
+        const box = event.currentTarget.getBoundingClientRect();
+        if (event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom)
+          onClose();
+      },
+      className: toClassnames([
+        {
+          padding: 0,
+          border: "1px solid var(--divider)",
+          borderRadius: "var(--border-radius-xl)",
+          background: "var(--overlay-background)",
+          color: "var(--primary-text)",
+          maxWidth: "calc(100vw - 32px)",
+          maxHeight: "calc(100dvh - 32px)",
+          boxShadow: "var(--shadow-lg)",
+          overflow: "auto",
+          "::backdrop": { background: "rgba(0, 0, 0, 0.3)" }
+        },
+        jss
+      ]),
+      children: /* @__PURE__ */ jsx(DialogTitleContext.Provider, { value: titleId, children })
+    }
+  );
+}
+function Dialog({
+  label,
+  children,
+  close,
+  header,
+  footer
+}) {
+  const titleId = useContext(DialogTitleContext);
+  return /* @__PURE__ */ jsxs(
+    Column,
+    {
+      gap: "none",
+      jss: {
+        width: "min(640px, calc(100vw - 34px))",
+        maxHeight: "calc(100dvh - 34px)"
+      },
+      children: [
+        header === void 0 ? /* @__PURE__ */ jsxs(
+          Row,
+          {
+            padding: "medium",
+            align: "center",
+            justify: "space-between",
+            jss: { flexShrink: 0, borderBottom: "1px solid var(--divider)" },
+            children: [
+              /* @__PURE__ */ jsx(Text, { id: titleId, type: "h2", size: "medium", bold: true, children: label }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": "Close dialog",
+                  size: "small",
+                  bare: true,
+                  icon: "x",
+                  onClick: close,
+                  color: "secondary"
+                }
+              )
+            ]
+          }
+        ) : header,
+        /* @__PURE__ */ jsx(BaseView, { jss: { minHeight: 0, overflowY: "auto" }, children }),
+        footer && /* @__PURE__ */ jsx(
+          Row,
           {
-            autoFocus: true,
-            bare: true,
-            icon: "x",
-            onClick: close,
-            color: "secondary"
+            padding: "large",
+            gap: "small",
+            justify: "flex-end",
+            jss: { flexShrink: 0, borderTop: "1px solid var(--divider)" },
+            children: footer
           }
         )
-      ] }),
-      /* @__PURE__ */ jsx(ListDivider, {})
-    ] }),
-    /* @__PURE__ */ jsx(BaseView, { jss: styles8.content, children })
-  ] });
-};
-var DialogContext = React35.createContext({
-  setDialog: () => {
-  }
-});
+      ]
+    }
+  );
+}
+var DialogContext = createContext({ setDialog: () => {
+} });
 function DialogProvider({ children }) {
   const [dialog, setDialog] = useState(null);
   const value = useMemo(() => ({ setDialog }), []);
@@ -3095,50 +3366,20 @@ function DialogProvider({ children }) {
 }
 function useDialog(DialogComponent, options) {
   const { setDialog } = useContext(DialogContext);
-  const dialogRef = useRef(null);
-  const activeElementRef = useRef(null);
-  const close = useCallback(() => {
-    dialogRef.current?.close();
-    activeElementRef.current?.focus();
-    dialogRef.current = null;
-    activeElementRef.current = null;
-    setDialog(null);
-  }, [setDialog]);
-  const open = (input) => {
-    activeElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    setDialog(
-      /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          ref: (ref) => {
-            dialogRef.current = ref;
-            ref?.showModal();
-          },
-          className: toClassnames(styles8.dialog),
-          onClose: () => {
-            close();
-          },
-          onClick: (e) => {
-            if (dialogRef.current == null) {
-              return;
-            }
-            const dialogDimensions = dialogRef.current.getBoundingClientRect();
-            if (options.closeOnOutsideClick === false) {
-              return;
-            }
-            if (e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || e.clientY > dialogDimensions.bottom || e.clientY < dialogDimensions.top) {
-              dialogRef.current.close();
-            }
-          },
-          children: /* @__PURE__ */ jsx(DialogComponent, { ...input, close })
-        }
-      )
-    );
-  };
-  return {
-    open,
-    close
-  };
+  const close = useCallback(() => setDialog(null), [setDialog]);
+  const open = (input) => setDialog(
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: true,
+        label: options.label,
+        onClose: close,
+        closeOnOutsideClick: options.closeOnOutsideClick,
+        children: /* @__PURE__ */ jsx(DialogComponent, { ...input, close })
+      }
+    )
+  );
+  return { open, close };
 }
 
 // src/Emitter.ts
@@ -3168,7 +3409,16 @@ function guid() {
     return v.toString(16);
   });
 }
-var IconLink = React35.forwardRef(function IconLink2({ icon, color, bare, disabled, jss, ...otherProps }, ref) {
+var IconLink = React35.forwardRef(function IconLink2({
+  icon,
+  color,
+  bare,
+  disabled,
+  size = "medium",
+  jss,
+  ...otherProps
+}, ref) {
+  const metrics = controlSizes[size];
   return /* @__PURE__ */ jsx(
     BaseLink,
     {
@@ -3179,9 +3429,12 @@ var IconLink = React35.forwardRef(function IconLink2({ icon, color, bare, disabl
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          height: 34,
-          width: 34,
-          borderRadius: 17,
+          height: metrics.height,
+          width: metrics.height,
+          minWidth: metrics.height,
+          flexShrink: 0,
+          padding: 0,
+          borderRadius: metrics.height / 2,
           textDecoration: "none"
         },
         jss
@@ -3193,6 +3446,7 @@ var IconLink = React35.forwardRef(function IconLink2({ icon, color, bare, disabl
         Icon,
         {
           size: "medium",
+          jss: { width: metrics.icon, height: metrics.icon },
           icon,
           color: getGlyphColor(color, disabled, bare)
         }
@@ -3208,6 +3462,10 @@ var Link = React35.forwardRef(function Link2({
   icon,
   underline,
   iconPosition = "left",
+  size = "medium",
+  leading,
+  trailing,
+  rowProps,
   align = "center",
   gap = "medium",
   justify = "center",
@@ -3215,6 +3473,8 @@ var Link = React35.forwardRef(function Link2({
   inline = true,
   ...otherProps
 }, ref) {
+  const metrics = controlSizes[size];
+  const glyph = getGlyphColor(color, disabled, bare);
   return /* @__PURE__ */ jsx(
     BaseLink,
     {
@@ -3226,8 +3486,10 @@ var Link = React35.forwardRef(function Link2({
       padding: "none",
       jss: [
         {
-          height: 34,
-          padding: "0 14px",
+          height: metrics.height,
+          minWidth: 0,
+          maxWidth: "100%",
+          padding: `0 ${metrics.padding}px`,
           borderRadius: cssVar("--border-radius-l"),
           justifyContent: "center",
           userSelect: "none",
@@ -3245,28 +3507,37 @@ var Link = React35.forwardRef(function Link2({
       children: /* @__PURE__ */ jsxs(
         Row,
         {
-          jss: {
-            display: inline ? "inline-flex" : "flex"
-          },
+          ...rowProps,
+          direction: "row",
+          jss: [
+            {
+              display: inline ? "inline-flex" : "flex",
+              minWidth: 0
+            },
+            rowProps?.jss
+          ],
           grow: true,
           align,
           gap,
           justify,
           children: [
+            leading,
             icon && iconPosition === "left" && /* @__PURE__ */ jsx(
               Icon,
               {
                 icon,
                 size: "medium",
-                color: getGlyphColor(color, disabled, bare)
+                jss: { width: metrics.icon, height: metrics.icon, flexShrink: 0 },
+                color: glyph
               }
             ),
             /* @__PURE__ */ jsx(
               Text,
               {
-                size: "medium",
-                color: getGlyphColor(color, disabled, bare),
+                size: metrics.text,
+                color: glyph,
                 jss: {
+                  minWidth: 0,
                   fontWeight: 600,
                   letterSpacing: "-0.01em"
                 },
@@ -3278,9 +3549,11 @@ var Link = React35.forwardRef(function Link2({
               {
                 icon,
                 size: "medium",
-                color: getGlyphColor(color, disabled, bare)
+                jss: { width: metrics.icon, height: metrics.icon, flexShrink: 0 },
+                color: glyph
               }
-            )
+            ),
+            trailing
           ]
         }
       )
@@ -3312,7 +3585,13 @@ var ListButtonItem = React35.forwardRef(function ListButtonItem2({
   onClick,
   color = "secondary",
   disabled = false,
-  padding = "medium",
+  size = "medium",
+  padding = size === "medium" || size === "large" ? "medium" : "small",
+  jssPrimary,
+  "aria-expanded": ariaExpanded,
+  "aria-controls": ariaControls,
+  "aria-haspopup": ariaHasPopup,
+  "aria-label": ariaLabel,
   jss,
   gap,
   selected,
@@ -3322,6 +3601,7 @@ var ListButtonItem = React35.forwardRef(function ListButtonItem2({
   return /* @__PURE__ */ jsx(
     BaseListItem,
     {
+      size,
       disabled,
       padding: "none",
       gap,
@@ -3348,7 +3628,17 @@ var ListButtonItem = React35.forwardRef(function ListButtonItem2({
           color,
           ref,
           "data-list-primary": true,
-          jss: interactableListItemContentJSS,
+          "aria-expanded": ariaExpanded,
+          "aria-controls": ariaControls,
+          "aria-haspopup": ariaHasPopup,
+          "aria-label": ariaLabel,
+          jss: [
+            interactableListItemContentJSS,
+            {
+              minHeight: { xsmall: 28, small: 32, medium: 36, large: 44 }[size]
+            },
+            jssPrimary
+          ],
           onClick,
           children: content
         }
@@ -3356,6 +3646,15 @@ var ListButtonItem = React35.forwardRef(function ListButtonItem2({
     }
   );
 });
+var styles6 = {
+  root: {
+    width: "100%",
+    borderBottom: "1px solid var(--divider)"
+  }
+};
+function ListDivider() {
+  return /* @__PURE__ */ jsx(BaseView, { jss: styles6.root });
+}
 function ListHeaderItem({
   highlight,
   headline,
@@ -3387,7 +3686,13 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
   onClick,
   href,
   disabled = false,
-  padding = "medium",
+  size = "medium",
+  padding = size === "medium" || size === "large" ? "medium" : "small",
+  jssPrimary,
+  "aria-expanded": ariaExpanded,
+  "aria-controls": ariaControls,
+  "aria-haspopup": ariaHasPopup,
+  "aria-label": ariaLabel,
   jss,
   gap,
   selected,
@@ -3399,6 +3704,7 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
   return /* @__PURE__ */ jsx(
     BaseListItem,
     {
+      size,
       disabled,
       "aria-selected": selected,
       padding: "none",
@@ -3428,7 +3734,17 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
           href,
           ref,
           "data-list-primary": true,
-          jss: interactableListItemContentJSS,
+          "aria-expanded": ariaExpanded,
+          "aria-controls": ariaControls,
+          "aria-haspopup": ariaHasPopup,
+          "aria-label": ariaLabel,
+          jss: [
+            interactableListItemContentJSS,
+            {
+              minHeight: { xsmall: 28, small: 32, medium: 36, large: 44 }[size]
+            },
+            jssPrimary
+          ],
           onClick,
           children: content
         }
@@ -3436,7 +3752,7 @@ var ListLinkItem = React35.forwardRef(function ListLinkItem2({
     }
   );
 });
-var styles9 = {
+var styles7 = {
   root: {
     height: "var(--spacing-xl)",
     backgroundColor: "var(--secondary-background)",
@@ -3444,7 +3760,7 @@ var styles9 = {
   }
 };
 function ListSpacer() {
-  return /* @__PURE__ */ jsx(BaseView, { jss: styles9.root });
+  return /* @__PURE__ */ jsx(BaseView, { jss: styles7.root });
 }
 function MenuIcon({ open, color }) {
   return /* @__PURE__ */ jsxs(Column, { gap: "small", children: [
@@ -3745,7 +4061,7 @@ function OnVisible({
   }, [onVisible]);
   return children(refCallback);
 }
-var styles10 = {
+var styles8 = {
   root: {
     width: "100%",
     position: "relative",
@@ -3789,18 +4105,18 @@ function ProgressBar({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(value * 100),
-      jss: [styles10.root, { height: sizes4[size] }, jss],
+      jss: [styles8.root, { height: sizes4[size] }, jss],
       children: /* @__PURE__ */ jsx(
         BaseView,
         {
-          jss: [styles10.fill, getBackground(color)],
+          jss: [styles8.fill, getBackground(color)],
           style: { transform: `scaleX(${value})` }
         }
       )
     }
   );
 }
-var styles11 = {
+var styles9 = {
   root: {
     display: "block"
   },
@@ -3844,7 +4160,7 @@ function ProgressCircle({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(value * 100),
-      className: toClassnames([styles11.root, jss]),
+      className: toClassnames([styles9.root, jss]),
       width: diameter,
       height: diameter,
       viewBox: `0 0 ${diameter} ${diameter}`,
@@ -3852,7 +4168,7 @@ function ProgressCircle({
         /* @__PURE__ */ jsx(
           "circle",
           {
-            className: toClassnames(styles11.track),
+            className: toClassnames(styles9.track),
             strokeWidth: stroke,
             r: radius,
             cx: center,
@@ -3862,7 +4178,7 @@ function ProgressCircle({
         /* @__PURE__ */ jsx(
           "circle",
           {
-            className: toClassnames(styles11.fill),
+            className: toClassnames(styles9.fill),
             stroke: getColorValue(color),
             strokeWidth: stroke,
             strokeLinecap: value === 0 ? "butt" : "round",
@@ -4398,45 +4714,90 @@ function useStream({
     frame
   };
 }
+function Disclosure({
+  expanded,
+  children,
+  jss,
+  ...props
+}) {
+  const [present, setPresent] = useState(expanded);
+  if (expanded && !present) setPresent(true);
+  const mount = useRefEffect(
+    useCallback(
+      (element) => {
+        element.inert = !expanded;
+        if (expanded) return;
+        let current = true;
+        element.getBoundingClientRect();
+        const animations = element.getAnimations();
+        void Promise.allSettled(
+          animations.map((animation) => animation.finished)
+        ).then(() => {
+          if (current) setPresent(false);
+        });
+        return () => {
+          current = false;
+        };
+      },
+      [expanded]
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      ...props,
+      ref: mount,
+      "aria-hidden": !expanded,
+      jss: [
+        {
+          display: "grid",
+          gridTemplateRows: expanded ? "1fr" : "0fr",
+          minWidth: 0,
+          transition: "grid-template-rows 180ms cubic-bezier(0.2, 0.8, 0.2, 1)",
+          "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+        },
+        jss
+      ],
+      children: /* @__PURE__ */ jsx(BaseView, { jss: { minHeight: 0, overflow: "hidden" }, children: (expanded || present) && children })
+    }
+  );
+}
 function Sublist({
   children,
   label,
   labelBold,
   initialState = { collapsed: false },
-  jss,
-  secondaryAddOn
+  expanded: controlledExpanded,
+  onExpandedChange,
+  jss
 }) {
-  const [collapsed, setCollapsed] = React35.useState(initialState.collapsed);
+  const [localExpanded, setExpanded] = useState(!initialState.collapsed);
+  const expanded = controlledExpanded ?? localExpanded;
+  const id = useId();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ListButtonItem,
       {
         headline: label,
         headlineBold: labelBold,
-        onClick: () => setCollapsed((x) => !x),
+        "aria-expanded": expanded,
+        "aria-controls": id,
+        onClick: () => {
+          if (controlledExpanded === void 0) setExpanded(!expanded);
+          onExpandedChange?.(!expanded);
+        },
         jss,
-        addOn: /* @__PURE__ */ jsxs(Row, { gap: "medium", align: "center", children: [
-          secondaryAddOn,
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              padding: "none",
-              jss: [
-                {
-                  transition: "transform 0.15s ease-in"
-                },
-                !collapsed && {
-                  transform: "rotateZ(90deg)"
-                }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { color: "inherit", size: "medium", icon: "chevron-right" })
-            }
-          )
-        ] }),
+        icon: "chevron-right",
+        iconPosition: "end",
+        iconJss: {
+          transition: "transform 180ms ease",
+          transform: expanded ? "rotateZ(90deg)" : "none",
+          "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+        },
         color: "secondary"
       }
     ),
-    collapsed ? null : children
+    /* @__PURE__ */ jsx(Disclosure, { id, tag: "li", role: "rowgroup", expanded, children: /* @__PURE__ */ jsx(BaseList, { role: "presentation", children }) })
   ] });
 }
 function SubmitIconInput({ icon, ...otherProps }) {
@@ -4474,7 +4835,7 @@ function SubmitIconInput({ icon, ...otherProps }) {
     }
   );
 }
-var styles12 = {
+var styles10 = {
   root: {},
   default: {
     backgroundColor: cssVar("--nav-bar")
@@ -4567,11 +4928,11 @@ function TabBar({
       tag: "nav",
       "aria-label": ariaLabel,
       jss: [
-        styles12.root,
-        styles12[variant],
-        variant === "default" && (horizontal ? styles12.horizontal : styles12.vertical),
-        fixed && styles12.fixed,
-        fixed && (horizontal ? styles12.fixedHorizontal : styles12.fixedVertical),
+        styles10.root,
+        styles10[variant],
+        variant === "default" && (horizontal ? styles10.horizontal : styles10.vertical),
+        fixed && styles10.fixed,
+        fixed && (horizontal ? styles10.fixedHorizontal : styles10.fixedVertical),
         jss
       ],
       children: [
@@ -4582,16 +4943,16 @@ function TabBar({
             ...otherProps,
             direction,
             align,
-            jss: horizontal ? styles12.horizontalBar : styles12.verticalBar,
+            jss: horizontal ? styles10.horizontalBar : styles10.verticalBar,
             children: tabs.map((tab) => {
               const { label, icon, href, onClick } = tab;
               const selected = tab.selected === true;
               const color = selected ? "highlight" : "secondary";
               const tabJSS = [
-                styles12.item,
-                horizontal ? styles12.horizontalItem : styles12.verticalItem,
-                variant === "default" && styles12.defaultItem,
-                variant === "floating" && horizontal && styles12.floatingHorizontalItem,
+                styles10.item,
+                horizontal ? styles10.horizontalItem : styles10.verticalItem,
+                variant === "default" && styles10.defaultItem,
+                variant === "floating" && horizontal && styles10.floatingHorizontalItem,
                 selected && {
                   backgroundColor: cssVar("--light-highlight")
                 },
@@ -4642,12 +5003,12 @@ function TabBar({
             })
           }
         ),
-        horizontal && /* @__PURE__ */ jsx(BaseView, { "aria-hidden": true, jss: styles12.safeArea })
+        horizontal && /* @__PURE__ */ jsx(BaseView, { "aria-hidden": true, jss: styles10.safeArea })
       ]
     }
   );
 }
-var styles13 = {
+var styles11 = {
   root: {
     overflowX: "auto",
     overflowY: "hidden",
@@ -4703,135 +5064,242 @@ function Table({
       material,
       padding,
       gap,
-      jss: [styles13.root, jss],
-      children: /* @__PURE__ */ jsx("table", { ...tableProps, className: toClassnames([styles13.table, jssTable]), children })
+      jss: [styles11.root, jss],
+      children: /* @__PURE__ */ jsx("table", { ...tableProps, className: toClassnames([styles11.table, jssTable]), children })
     }
   );
 }
-function Tabs({
+var Tabs = React35.forwardRef(function Tabs2({
   tabs,
   variant = "underline",
   gap = "none",
   padding = "none",
-  tabPadding = "medium",
-  labelSize = "large",
+  tabPadding = variant === "document" ? ["small", "medium"] : "medium",
+  labelSize = variant === "document" ? "small" : "large",
   iconSize = "medium",
   jss,
   jssTab,
   labelRenderer,
-  ["aria-controls"]: ariaControls,
-  ...otherProps
-}) {
-  const root = useNavigation();
+  "aria-controls": ariaControls,
+  onKeyDown,
+  bare = true,
+  ...props
+}, ref) {
+  const root = useRef(null);
+  const lastSelected = useRef(void 0);
+  const instance = useId();
+  const selectedIndex = Math.max(
+    0,
+    tabs.findIndex((tab) => tab.selected)
+  );
+  const selectedId = tabs[selectedIndex]?.id ?? tabs[selectedIndex]?.label;
+  const closeTab = (index) => {
+    const tab = tabs[index];
+    const next = tabs[index + 1] ?? tabs[index - 1];
+    const target = index === selectedIndex ? next : tabs[selectedIndex];
+    const targetIndex = tabs.indexOf(target);
+    root.current?.querySelectorAll('[role="tab"]')[targetIndex]?.focus();
+    if (index === selectedIndex) next?.onClick?.();
+    tab.onClose?.();
+  };
   return /* @__PURE__ */ jsx(
     Row,
     {
+      ...props,
       role: "tablist",
+      ref: (element) => {
+        root.current = element;
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+        if (element && selectedId !== lastSelected.current) {
+          const tab = element.querySelector('[aria-selected="true"]');
+          if (tab && variant === "document") {
+            const box = tab.getBoundingClientRect();
+            const viewport = element.getBoundingClientRect();
+            if (box.left < viewport.left)
+              element.scrollLeft -= viewport.left - box.left;
+            else if (box.right > viewport.right)
+              element.scrollLeft += box.right - viewport.right;
+          }
+          lastSelected.current = selectedId;
+        }
+      },
+      gap,
+      padding,
       jss: [
+        { minWidth: 0, maxWidth: "100%" },
         variant === "segmented" && {
-          isolation: "isolate",
-          backgroundColor: cssVar("--hovered-background"),
+          background: cssVar("--hovered-background"),
           borderRadius: cssVar("--border-radius-l"),
-          maxWidth: "100%",
           padding: cssVar("--spacing-xs"),
           width: "fit-content"
         },
+        variant === "document" && {
+          overflowX: "auto",
+          overscrollBehavior: "contain",
+          scrollbarWidth: "thin",
+          alignItems: "center",
+          gap: 3,
+          padding: 3
+        },
         jss
       ],
-      gap,
-      padding,
-      ref: root,
-      ...otherProps,
-      children: tabs.map(
-        ({
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.nativeEvent.isComposing || event.altKey || event.metaKey || event.ctrlKey)
+          return;
+        const elements = Array.from(
+          event.currentTarget.querySelectorAll('[role="tab"]')
+        );
+        const index = elements.indexOf(event.target);
+        if (index < 0) return;
+        if (event.key === "Delete" && tabs[index].onClose) {
+          event.preventDefault();
+          closeTab(index);
+          return;
+        }
+        const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (index + 1) % tabs.length : event.key === "ArrowLeft" ? (index - 1 + tabs.length) % tabs.length : -1;
+        if (next < 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        elements[next]?.focus();
+        tabs[next]?.onClick?.();
+      },
+      children: tabs.map((tab, index) => {
+        const {
+          id,
           label,
           icon,
           href,
           onClick,
-          selected,
+          onClose,
+          panelId,
           addOn,
           addOnPosition = "start"
-        }) => {
-          const BaseComponent = href != null ? BaseLink : BaseButton;
-          return /* @__PURE__ */ jsxs(
-            BaseComponent,
-            {
-              "aria-controls": ariaControls,
-              role: "tab",
-              "aria-selected": selected ? "true" : void 0,
-              bare: true,
-              color: selected ? "primary" : "secondary",
-              href,
-              onClick,
-              animateInteraction: false,
-              jss: [
+        } = tab;
+        const selected = index === selectedIndex;
+        const BaseComponent = href != null ? BaseLink : BaseButton;
+        return /* @__PURE__ */ jsxs(
+          Row,
+          {
+            "data-aidos-action-scope": true,
+            align: "center",
+            gap: "none",
+            jss: [
+              { minWidth: 0 },
+              variant === "document" && {
+                height: 30,
+                minWidth: 110,
+                maxWidth: 220,
+                flexShrink: 0,
+                borderRadius: 6,
+                background: selected ? cssVar("--light-highlight") : "transparent",
+                ":hover": {
+                  background: selected ? cssVar("--light-highlight") : cssVar("--hovered-background")
+                }
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsxs(
+                BaseComponent,
                 {
-                  alignItems: "center",
-                  gap: cssVar("--spacing-s"),
-                  textDecoration: "none"
-                },
-                variant === "underline" && {
-                  borderBottom: selected ? `3px solid ${cssVar("--highlight")}` : `3px solid transparent`,
-                  ":active span": {
-                    transform: "scale(0.97)"
-                  },
-                  ":first-child": {
-                    borderTopLeftRadius: cssVar("--border-radius-m")
-                  },
-                  ":last-child": {
-                    borderTopRightRadius: cssVar("--border-radius-m")
-                  },
-                  ":hover": {
-                    backgroundColor: cssVar("--hovered-background")
-                  },
-                  ":active:hover": {
-                    backgroundColor: cssVar("--pressed-background")
-                  }
-                },
-                variant === "segmented" && {
-                  position: "relative",
-                  zIndex: selected ? 1 : 0,
-                  borderRadius: cssVar("--border-radius-m"),
-                  backgroundColor: selected ? cssVar("--overlay-background") : "transparent",
-                  boxShadow: selected ? `0 0 0 1px ${cssVar("--divider")}, 0 0 4px color-mix(in srgb, ${cssVar("--primary-text")} 10%, transparent)` : "none",
-                  transition: `background-color ${cssVar("--transition-fast")}, box-shadow ${cssVar("--transition-fast")}`,
-                  ":hover": {
-                    backgroundColor: selected ? cssVar("--overlay-background") : cssVar("--hovered-background")
-                  },
-                  ":active:hover": {
-                    top: 1,
-                    backgroundColor: cssVar("--pressed-background")
-                  }
-                },
-                getPadding(tabPadding),
-                typeof jssTab === "function" ? jssTab({ selected }) : jssTab
-              ],
-              children: [
-                addOnPosition === "start" && addOn,
-                icon && /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon,
-                    size: iconSize,
-                    color: selected ? "primary" : "secondary"
+                  id: id ?? `${instance}-${index}`,
+                  "aria-controls": panelId ?? ariaControls,
+                  role: "tab",
+                  "aria-selected": selected,
+                  tabIndex: selected ? 0 : -1,
+                  bare,
+                  color: selected ? "primary" : "secondary",
+                  href,
+                  onClick,
+                  animateInteraction: false,
+                  jss: [
+                    {
+                      minWidth: 0,
+                      flex: 1,
+                      alignItems: "center",
+                      gap: cssVar("--spacing-s"),
+                      textDecoration: "none",
+                      ":focus-visible": { outlineOffset: -2 }
+                    },
+                    variant === "underline" && {
+                      borderBottom: `3px solid ${selected ? cssVar("--highlight") : "transparent"}`,
+                      borderRadius: "var(--border-radius-s) var(--border-radius-s) 0 0",
+                      ":hover": { background: cssVar("--hovered-background") }
+                    },
+                    variant === "segmented" && {
+                      borderRadius: cssVar("--border-radius-m"),
+                      background: selected ? cssVar("--overlay-background") : "transparent",
+                      boxShadow: selected ? cssVar("--shadow-sm") : "none"
+                    },
+                    variant === "document" && {
+                      height: "100%",
+                      borderRadius: 6,
+                      background: "transparent"
+                    },
+                    getPadding(tabPadding),
+                    typeof jssTab === "function" ? jssTab({ selected }) : jssTab
+                  ],
+                  children: [
+                    addOnPosition === "start" && addOn,
+                    icon && /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon,
+                        size: iconSize,
+                        color: selected ? "primary" : "secondary",
+                        jss: { flexShrink: 0 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: labelSize,
+                        color: selected ? "primary" : "secondary",
+                        jss: { minWidth: 0 },
+                        children: labelRenderer ? labelRenderer(label) : label
+                      }
+                    ),
+                    addOnPosition === "end" && addOn
+                  ]
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "data-aidos-actions": true,
+                  "aria-label": `Close ${label}`,
+                  tabIndex: selected ? 0 : -1,
+                  bare: true,
+                  color: "secondary",
+                  icon: "x",
+                  size: "xsmall",
+                  onClick: () => closeTab(index),
+                  jss: {
+                    borderRadius: 5,
+                    marginInlineEnd: 3,
+                    opacity: selected ? 1 : 0,
+                    ":focus-visible": { opacity: 1, outlineOffset: -2 },
+                    "@media (hover: none)": { opacity: 1 }
                   }
-                ),
-                /* @__PURE__ */ jsx(Text, { size: labelSize, color: selected ? "primary" : "secondary", children: labelRenderer ? labelRenderer(label) : label }),
-                addOnPosition === "end" && addOn
-              ]
-            },
-            label
-          );
-        }
-      )
+                }
+              )
+            ]
+          },
+          id ?? label
+        );
+      })
     }
   );
-}
+});
 var TextArea = React35.forwardRef(function TextArea2({
   jss,
   onValueChange,
   value,
   padding = "medium",
+  size = "medium",
+  autoGrow = false,
+  rows = autoGrow ? 1 : 3,
   ...otherProps
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -4839,29 +5307,43 @@ var TextArea = React35.forwardRef(function TextArea2({
     {
       ...otherProps,
       ref,
+      rows,
       className: toClassnames([
         {
+          display: "block",
+          minWidth: 0,
           flexGrow: 1,
           color: cssVar("--primary-text"),
-          outline: "none",
-          fontSize: 20,
-          lineHeight: 24 / 20,
+          ...getTypography(size),
           backgroundColor: cssVar("--overlay-background"),
           border: `1px solid ${cssVar("--divider")}`,
           borderRadius: cssVar("--border-radius-m"),
-          "::placeholder": {
-            color: cssVar("--subtle-text")
-          },
+          "::placeholder": { color: cssVar("--subtle-text") },
           ":focus-visible": {
-            outline: `2px solid ${cssVar("--highlight")}`,
+            outline: `2px solid ${cssVar("--outline")}`,
             outlineOffset: -2
+          },
+          "[aria-invalid=true]": { borderColor: cssVar("--negative-text") },
+          "[aria-invalid=true]:focus-visible": {
+            outlineColor: cssVar("--negative-text")
+          },
+          ":disabled": {
+            color: cssVar("--subtle-text"),
+            backgroundColor: cssVar("--secondary-background"),
+            cursor: "not-allowed"
           }
         },
+        autoGrow && {
+          fieldSizing: "content",
+          minHeight: `calc(${rows}lh + 2 * ${getSpacing(Array.isArray(padding) ? padding[0] : padding)} + 2px)`,
+          maxHeight: 180,
+          overflowY: "auto"
+        },
         getPadding(padding),
         jss
       ]),
       value,
-      onChange: onValueChange ? (e) => onValueChange(e.target.value) : void 0
+      onChange: onValueChange ? (event) => onValueChange(event.target.value) : void 0
     }
   );
 });
@@ -4871,66 +5353,82 @@ var TextInput = React35.forwardRef(function TextInput2({
   jssRoot,
   jss,
   addOn,
-  gap = "none",
+  gap,
   addOnPosition = "start",
-  padding = "medium",
+  padding,
   size = "medium",
   ...inputProps
 }, ref) {
-  return /* @__PURE__ */ jsxs(InputFrame, { gap, jss: jssRoot, children: [
-    addOnPosition === "start" && addOn && /* @__PURE__ */ jsx(
-      Column,
-      {
-        justify: "center",
-        align: "center",
-        jss: [getPadding(padding), { paddingRight: 0 }],
-        children: addOn
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      BaseInput,
-      {
-        ...inputProps,
-        ref,
-        value,
-        onChange: onValueChange ? (e) => onValueChange(e.target.value) : void 0,
-        jss: [
+  const metrics = controlSizes[size];
+  const inputPadding = padding != null ? getPadding(padding) : { padding: `0 ${metrics?.padding ?? 8}px` };
+  return /* @__PURE__ */ jsxs(
+    InputFrame,
+    {
+      gap: gap ?? (size === "xsmall" || size === "small" ? "small" : "medium"),
+      jss: jssRoot,
+      children: [
+        addOnPosition === "start" && addOn && /* @__PURE__ */ jsx(
+          Column,
           {
-            minWidth: 0,
-            flexGrow: 1,
-            backgroundColor: "transparent",
-            color: cssVar("--primary-text"),
-            outline: "none",
-            border: "none",
-            ...getTypography(size),
-            "::placeholder": {
-              color: cssVar("--subtle-text")
-            },
-            ":disabled": {
-              color: cssVar("--subtle-text"),
-              cursor: "not-allowed"
-            },
-            "[aria-invalid=true]": {
-              color: cssVar("--negative-text")
-            }
-          },
-          getPadding(padding),
-          addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
-          addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
-          jss
-        ]
-      }
-    ),
-    addOnPosition === "end" && addOn && /* @__PURE__ */ jsx(
-      Column,
-      {
-        justify: "center",
-        align: "center",
-        jss: [getPadding(padding), { paddingLeft: 0 }],
-        children: addOn
-      }
-    )
-  ] });
+            justify: "center",
+            align: "center",
+            jss: [
+              padding != null ? getPadding(padding) : { paddingLeft: metrics?.padding ?? 8 },
+              { paddingRight: 0, flexShrink: 0 }
+            ],
+            children: addOn
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BaseInput,
+          {
+            ...inputProps,
+            ref,
+            value,
+            onChange: onValueChange ? (e) => onValueChange(e.target.value) : void 0,
+            jss: [
+              {
+                minWidth: 0,
+                minHeight: metrics ? metrics.height - 2 : void 0,
+                flexGrow: 1,
+                backgroundColor: "transparent",
+                color: cssVar("--primary-text"),
+                outline: "none",
+                border: "none",
+                ...getTypography(metrics?.text ?? size),
+                "::placeholder": {
+                  color: cssVar("--subtle-text")
+                },
+                ":disabled": {
+                  color: cssVar("--subtle-text"),
+                  cursor: "not-allowed"
+                },
+                "[aria-invalid=true]": {
+                  color: cssVar("--negative-text")
+                }
+              },
+              inputPadding,
+              addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
+              addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
+              jss
+            ]
+          }
+        ),
+        addOnPosition === "end" && addOn && /* @__PURE__ */ jsx(
+          Column,
+          {
+            justify: "center",
+            align: "center",
+            jss: [
+              padding != null ? getPadding(padding) : { paddingRight: metrics?.padding ?? 8 },
+              { paddingLeft: 0, flexShrink: 0 }
+            ],
+            children: addOn
+          }
+        )
+      ]
+    }
+  );
 });
 function getInitialValue(valueRef) {
   return valueRef.current;
@@ -5131,99 +5629,93 @@ var Toolbar = React35.forwardRef(function Toolbar2({
   ] });
 });
 Toolbar.displayName = "Toolbar";
-var styles14 = {
-  tooltip: {
-    top: "auto",
-    right: "auto",
-    bottom: `calc(100% + ${cssVar("--spacing-s")})`,
-    left: "50%",
-    margin: 0,
-    translate: "-50% 0",
-    transformOrigin: "bottom center",
-    backgroundColor: cssVar("--primary-background"),
-    padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
-    borderRadius: cssVar("--border-radius-m"),
-    border: `1px solid ${cssVar("--divider")}`,
-    boxShadow: cssVar("--shadow-md"),
-    overflow: "hidden",
-    animation: "popoverFadeIn 0.15s ease-out"
-  }
-};
-function Tooltip({ content, jss, tag, children }) {
-  const [tooltip, setTooltip] = useState(null);
-  const dialogRef = useRef(null);
-  const focusTrapRoot = useRefEffect(
-    useCallback((root) => {
-      dialogRef.current = root;
-      const keydown = (e) => {
-        if (e.key === "Escape") {
-          dialogRef.current?.close();
-        } else if (e.key === "Tab") {
-          dialogRef.current?.close();
-        }
-      };
-      const click = () => {
-        dialogRef.current?.close();
-      };
-      window.addEventListener("keydown", keydown);
-      window.addEventListener("click", click);
-      const activeElement = document.activeElement;
-      root.show();
-      if (activeElement instanceof HTMLElement) {
-        activeElement.focus();
-      }
-      return () => {
-        window.removeEventListener("keydown", keydown);
-        window.removeEventListener("click", click);
-      };
-    }, [])
+function Tooltip({
+  content,
+  jss,
+  tag,
+  children,
+  placement = "top",
+  align = "center"
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const anchor = useRef(null);
+  const surface = useRef(null);
+  const timeout = useRef(void 0);
+  const position = useFloatingPosition(
+    anchor,
+    placement,
+    align,
+    () => setOpen(false)
   );
-  const toggle = () => {
-    if (tooltip == null) {
-      setTooltip(
-        /* @__PURE__ */ jsx(
-          "dialog",
-          {
-            role: "tooltip",
-            ref: (ref) => {
-              dialogRef.current = ref;
-              focusTrapRoot(ref);
-            },
-            className: toClassnames(styles14.tooltip),
-            onClose: () => {
-              setTooltip(null);
-            },
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            },
-            children: /* @__PURE__ */ jsx(Text, { size: "medium", color: "secondary", children: content })
-          }
-        )
-      );
-    } else {
-      setTooltip(null);
-    }
+  const show = () => {
+    clearTimeout(timeout.current);
+    setOpen(true);
+  };
+  const leave = () => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      if (!anchor.current?.contains(document.activeElement) && !surface.current?.matches(":hover"))
+        setOpen(false);
+    }, 120);
   };
   return /* @__PURE__ */ jsxs(
     BaseView,
     {
+      ref: (element) => {
+        anchor.current = element;
+        if (!element) clearTimeout(timeout.current);
+      },
       tag,
-      relative: true,
-      jss: [{ display: "inline-block" }, jss],
-      onMouseEnter: () => {
-        if (tooltip == null) {
-          toggle();
-        }
+      jss: [{ display: "inline-block", minWidth: 0 }, jss],
+      onFocus: show,
+      onKeyDown: (event) => {
+        if (event.key === "Tab") setOpen(false);
       },
-      onMouseLeave: () => {
-        if (tooltip != null) {
-          toggle();
-        }
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget) && !event.currentTarget.matches(":hover") && !surface.current?.matches(":hover"))
+          setOpen(false);
       },
+      onMouseEnter: show,
+      onMouseLeave: leave,
       children: [
-        children,
-        tooltip
+        React35.cloneElement(children, {
+          "aria-describedby": [children.props["aria-describedby"], open && id].filter(Boolean).join(" ") || void 0
+        }),
+        open && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id,
+              role: "tooltip",
+              popover: "hint",
+              ref: (element) => {
+                surface.current = element;
+                position(element);
+              },
+              onMouseEnter: show,
+              onMouseLeave: leave,
+              className: toClassnames({
+                position: "fixed",
+                inset: "auto",
+                margin: 0,
+                zIndex: 1e3,
+                width: "max-content",
+                maxWidth: "min(320px, var(--aidos-overlay-width, calc(100vw - 24px)))",
+                maxHeight: "var(--aidos-overlay-height, calc(100dvh - 24px))",
+                padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
+                border: `1px solid ${cssVar("--divider")}`,
+                borderRadius: cssVar("--border-radius-m"),
+                background: cssVar("--overlay-background"),
+                color: cssVar("--primary-text"),
+                boxShadow: cssVar("--shadow-md"),
+                overflow: "auto"
+              }),
+              children: /* @__PURE__ */ jsx(Text, { size: "small", color: "secondary", ellipsis: false, children: content })
+            }
+          ),
+          anchor.current.closest("dialog[open], [popover]") ?? document.body
+        )
       ]
     }
   );
@@ -5282,7 +5774,610 @@ function usePromise(promiseFactory, inputs, initialValue) {
   });
   return [value, error];
 }
+var Composer = React35.forwardRef(function Composer2({
+  value,
+  onValueChange,
+  onSubmit,
+  footer,
+  action,
+  submitDisabled = false,
+  submitLabel = "Send message",
+  embedded = false,
+  jssRoot,
+  jss,
+  onKeyDown,
+  disabled,
+  readOnly,
+  ...props
+}, ref) {
+  const canSubmit = !disabled && !readOnly && !submitDisabled && Boolean(value.trim());
+  const submit = () => {
+    if (canSubmit) onSubmit();
+  };
+  return /* @__PURE__ */ jsxs(
+    InputFrame,
+    {
+      "data-aidos-composer": true,
+      jss: [
+        {
+          flexDirection: "column",
+          width: "100%",
+          minWidth: 0,
+          borderRadius: 20,
+          overflow: "visible",
+          boxShadow: cssVar("--shadow-sm"),
+          ":hover": {
+            borderColor: "color-mix(in srgb, var(--strong-divider) 60%, var(--divider))"
+          },
+          ":has(:is(input, textarea, select):focus-visible)": {
+            borderColor: cssVar("--strong-divider"),
+            outline: `1px solid ${cssVar("--strong-divider")}`,
+            outlineOffset: -1
+          },
+          ":has(:is(input, textarea, select)[aria-invalid=true]:focus-visible)": {
+            borderColor: cssVar("--negative-text"),
+            outlineWidth: 1
+          }
+        },
+        embedded && {
+          background: "transparent",
+          borderColor: "transparent",
+          boxShadow: "none",
+          borderRadius: cssVar("--border-radius-m")
+        },
+        jssRoot
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            ...props,
+            ref,
+            value,
+            onValueChange,
+            autoGrow: true,
+            disabled,
+            readOnly,
+            "aria-label": props["aria-label"] ?? "Message",
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229 || event.repeat)
+                return;
+              if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault();
+                submit();
+              }
+            },
+            jss: [
+              {
+                width: "100%",
+                minHeight: 44,
+                resize: "none",
+                border: "none",
+                borderRadius: "inherit",
+                background: "transparent",
+                padding: "14px 16px 10px",
+                outline: "none",
+                ":focus-visible": { outline: "none" }
+              },
+              jss
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Row,
+          {
+            align: "center",
+            gap: "small",
+            jss: { minWidth: 0, padding: "0 10px 10px" },
+            children: [
+              /* @__PURE__ */ jsx(
+                Row,
+                {
+                  align: "center",
+                  gap: "xsmall",
+                  grow: true,
+                  jss: { minWidth: 0, flexWrap: "wrap" },
+                  children: footer
+                }
+              ),
+              action ?? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "arrow-up",
+                  color: "primary",
+                  size: "small",
+                  "aria-label": submitLabel,
+                  disabled: !canSubmit,
+                  onClick: submit
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+function ActionScope(props) {
+  return /* @__PURE__ */ jsx(BaseView, { ...props, "data-aidos-action-scope": true });
+}
+function ContextualActions({ jss, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      ...props,
+      "data-aidos-actions": true,
+      align: "center",
+      gap: "xsmall",
+      jss: [
+        {
+          flexShrink: 0,
+          opacity: 0,
+          pointerEvents: "none",
+          ":focus-within": { opacity: 1, pointerEvents: "auto" },
+          ":has([aria-expanded=true])": { opacity: 1, pointerEvents: "auto" },
+          "@media (hover: none)": { opacity: 1, pointerEvents: "auto" }
+        },
+        jss
+      ]
+    }
+  );
+}
+var MenuContext = createContext(() => {
+});
+function Menu({
+  label,
+  onClose = () => {
+  },
+  children,
+  jss,
+  ...props
+}) {
+  const navigation = useNavigation({ orientation: "vertical" });
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: onClose, children: /* @__PURE__ */ jsx(
+    Column,
+    {
+      ...props,
+      ref: navigation,
+      role: "menu",
+      "aria-label": label,
+      gap: "none",
+      jss: [
+        {
+          minWidth: "min(220px, calc(100vw - 32px))",
+          maxHeight: "min(360px, calc(100dvh - 32px))",
+          overflowY: "auto"
+        },
+        jss
+      ],
+      children
+    }
+  ) });
+}
+function MenuItem({
+  children,
+  icon,
+  description,
+  trailing,
+  checked,
+  destructive = false,
+  disabled,
+  jss,
+  onClick,
+  role = checked == null ? "menuitem" : "menuitemcheckbox",
+  ...props
+}) {
+  const close = useContext(MenuContext);
+  return /* @__PURE__ */ jsxs(
+    BaseButton,
+    {
+      ...props,
+      role,
+      "aria-checked": checked,
+      title: description,
+      bare: true,
+      color: destructive ? "negative" : "secondary",
+      disabled,
+      animateInteraction: false,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) close();
+      },
+      jss: [
+        {
+          width: "100%",
+          minHeight: 32,
+          padding: "6px 10px",
+          gap: 8,
+          textAlign: "left",
+          minWidth: 0,
+          borderRadius: cssVar("--border-radius-s"),
+          color: cssVar(
+            disabled ? "--subtle-text" : destructive ? "--negative-text" : "--primary-text"
+          ),
+          ":hover": {
+            background: cssVar("--hovered-background"),
+            filter: "none"
+          },
+          ":focus-visible": { outlineOffset: -2 }
+        },
+        jss
+      ],
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon,
+            size: "small",
+            color: "inherit",
+            jss: { width: 14, height: 14, flexShrink: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx(Span, { size: "small", color: "inherit", jss: { minWidth: 0, flex: 1 }, children }),
+        trailing && /* @__PURE__ */ jsx(Span, { size: "small", color: "secondary", jss: { flexShrink: 0 }, children: trailing }),
+        checked != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { width: 14, flexShrink: 0 }, children: checked && /* @__PURE__ */ jsx(Icon, { icon: "check", size: "small", color: "inherit" }) })
+      ]
+    }
+  );
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      style: {
+        height: 1,
+        margin: "4px 0",
+        background: "var(--divider)",
+        flexShrink: 0
+      }
+    }
+  );
+}
+function Prose({ jss, ...props }) {
+  return /* @__PURE__ */ jsx(
+    BaseView,
+    {
+      ...props,
+      jss: [
+        {
+          minWidth: 0,
+          color: "var(--primary-text)",
+          fontSize: "var(--font-medium)",
+          lineHeight: 1.6,
+          overflowWrap: "anywhere",
+          " > :first-child": { marginTop: 0 },
+          " > :last-child": { marginBottom: 0 },
+          " p": { margin: "0 0 12px" },
+          " h1": {
+            fontSize: "var(--font-xlarge)",
+            lineHeight: 1.3,
+            margin: "20px 0 8px",
+            fontWeight: 600
+          },
+          " h2": {
+            fontSize: "var(--font-large)",
+            lineHeight: 1.4,
+            margin: "16px 0 8px",
+            fontWeight: 600
+          },
+          " :is(h3, h4, h5, h6)": {
+            fontSize: "var(--font-medium)",
+            margin: "12px 0 8px",
+            fontWeight: 600
+          },
+          " :is(ul, ol)": { margin: "0 0 12px", paddingInlineStart: 24 },
+          " li": { marginBlock: 4 },
+          " blockquote": {
+            margin: "12px 0",
+            paddingInlineStart: 14,
+            borderInlineStart: "2px solid var(--divider)",
+            color: "var(--secondary-text)"
+          },
+          " code": {
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            fontSize: "0.92em",
+            padding: "1px 4px",
+            borderRadius: 4,
+            background: "var(--secondary-background)"
+          },
+          " pre": {
+            margin: "12px 0",
+            padding: 12,
+            borderRadius: 8,
+            overflowX: "auto",
+            whiteSpace: "pre",
+            background: "var(--secondary-background)"
+          },
+          " pre code": {
+            padding: 0,
+            background: "transparent",
+            fontSize: "inherit"
+          },
+          " hr": { borderTop: "1px solid var(--divider)", margin: "16px 0" },
+          " a": { color: "var(--highlight-text)", textUnderlineOffset: "2px" },
+          " table": {
+            display: "block",
+            maxWidth: "100%",
+            overflowX: "auto",
+            borderCollapse: "collapse"
+          },
+          " :is(th, td)": {
+            padding: "6px 10px",
+            borderBottom: "1px solid var(--divider)",
+            textAlign: "start"
+          }
+        },
+        jss
+      ]
+    }
+  );
+}
+function SearchList({
+  label,
+  options,
+  onSelect,
+  query: controlledQuery,
+  onQueryChange,
+  filter = true,
+  placeholder = "Search\u2026",
+  loading = false,
+  footer
+}) {
+  const id = useId();
+  const [localQuery, setQuery] = useState("");
+  const query = controlledQuery ?? localQuery;
+  const [selection, setSelection] = useState(
+    null
+  );
+  const results = filter ? options.filter(
+    (option) => `${option.label} ${option.description ?? ""} ${option.keywords ?? ""}`.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
+  ) : options;
+  const active = results.find(
+    (option) => selection?.query === query && option.value === selection.value
+  ) ?? results[0];
+  const optionId = (value) => `${id}-${encodeURIComponent(value)}`;
+  return /* @__PURE__ */ jsxs(Column, { gap: "none", jss: { width: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs(
+      Row,
+      {
+        align: "center",
+        gap: "medium",
+        padding: "large",
+        jss: {
+          flexShrink: 0,
+          borderBottom: "2px solid var(--divider)",
+          ":has(input:focus-visible)": { borderBottomColor: "var(--outline)" }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "search", size: "small", color: "secondary" }),
+          /* @__PURE__ */ jsx(
+            BaseInput,
+            {
+              "data-autofocus": "true",
+              role: "combobox",
+              "aria-label": label,
+              "aria-controls": id,
+              "aria-expanded": true,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": active ? optionId(active.value) : void 0,
+              autoComplete: "off",
+              spellCheck: false,
+              placeholder,
+              value: query,
+              onChange: (event) => {
+                if (controlledQuery === void 0) setQuery(event.target.value);
+                onQueryChange?.(event.target.value);
+              },
+              onKeyDown: (event) => {
+                if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  if (active && !active.disabled) onSelect(active.value);
+                  return;
+                }
+                const control = event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
+                const index = results.indexOf(active);
+                const next = event.key === "ArrowDown" || control && event.key === "j" ? index + 1 : event.key === "ArrowUp" || control && event.key === "k" ? index - 1 : event.key === "Home" && event.ctrlKey ? 0 : event.key === "End" && event.ctrlKey ? results.length - 1 : null;
+                if (next == null || !results.length) return;
+                event.preventDefault();
+                const option = results[(next + results.length) % results.length];
+                setSelection({ query, value: option.value });
+              },
+              jss: {
+                flex: 1,
+                minWidth: 0,
+                background: "transparent",
+                border: 0,
+                outline: "none",
+                color: "var(--primary-text)",
+                fontSize: "var(--font-medium)",
+                lineHeight: 20 / 14
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BaseView,
+      {
+        role: "listbox",
+        "aria-label": label,
+        "aria-busy": loading,
+        id,
+        jss: {
+          minHeight: 0,
+          maxHeight: "min(320px, 50dvh)",
+          overflowY: "auto",
+          padding: 6
+        },
+        ref: (element) => {
+          const row = element?.querySelector('[aria-selected="true"]');
+          if (!row) return;
+          const box = row.getBoundingClientRect();
+          const viewport = element.getBoundingClientRect();
+          if (box.top < viewport.top)
+            element.scrollTop -= viewport.top - box.top;
+          else if (box.bottom > viewport.bottom)
+            element.scrollTop += box.bottom - viewport.bottom;
+        },
+        children: results.map((option) => /* @__PURE__ */ jsxs(
+          Row,
+          {
+            id: optionId(option.value),
+            role: "option",
+            "aria-selected": option === active,
+            "aria-disabled": option.disabled || void 0,
+            align: "center",
+            gap: "medium",
+            padding: "medium",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+              if (!option.disabled) onSelect(option.value);
+            },
+            jss: {
+              minHeight: 36,
+              borderRadius: 8,
+              cursor: option.disabled ? "default" : "pointer",
+              background: option === active ? "var(--light-highlight)" : "transparent",
+              ":hover": { background: "var(--hovered-background)" },
+              "@media (forced-colors: active)": {
+                outline: option === active ? "2px solid Highlight" : "none",
+                outlineOffset: -2
+              }
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsx(Icon, { icon: option.icon, size: "small", color: "secondary" }),
+              /* @__PURE__ */ jsxs(Column, { grow: true, gap: "xsmall", jss: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Text, { color: option.disabled ? "secondary" : "primary", children: option.label }),
+                option.description && /* @__PURE__ */ jsx(Text, { size: "small", color: "secondary", children: option.description })
+              ] }),
+              option.trailing && /* @__PURE__ */ jsx(Text, { size: "small", color: "secondary", jss: { flexShrink: 0 }, children: option.trailing })
+            ]
+          },
+          option.value
+        ))
+      }
+    ),
+    (loading || !results.length) && /* @__PURE__ */ jsx(Text, { role: "status", color: "secondary", jss: { padding: 16 }, children: loading ? "Loading\u2026" : "No results" }),
+    footer && /* @__PURE__ */ jsx(
+      BaseView,
+      {
+        jss: {
+          padding: "8px 16px",
+          borderTop: "1px solid var(--divider)",
+          flexShrink: 0
+        },
+        children: footer
+      }
+    )
+  ] });
+}
+function SearchPalette({
+  open,
+  onClose,
+  onSelect,
+  onAfterClose,
+  footer = /* @__PURE__ */ jsx(Text, { size: "small", color: "secondary", children: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Esc Close" }),
+  ...props
+}) {
+  const pending = useRef(void 0);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      label: props.label,
+      onClose,
+      onAfterClose: () => {
+        const value = pending.current;
+        pending.current = void 0;
+        if (value !== void 0) onSelect(value);
+        onAfterClose?.();
+      },
+      jss: { marginTop: "10dvh", width: "min(640px, calc(100vw - 32px))" },
+      children: /* @__PURE__ */ jsx(
+        SearchList,
+        {
+          ...props,
+          footer,
+          onSelect: (value) => {
+            pending.current = value;
+            onClose();
+          }
+        }
+      )
+    }
+  );
+}
+var Switch = React35.forwardRef(function Switch2({ label, checked, onCheckedChange, disabled, jss, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      ...props,
+      ref,
+      bare: true,
+      color: "secondary",
+      role: "switch",
+      "aria-label": label,
+      "aria-checked": checked,
+      disabled,
+      animateInteraction: false,
+      onClick: () => onCheckedChange(!checked),
+      jss: [
+        {
+          width: 36,
+          height: 24,
+          padding: 2,
+          flexShrink: 0,
+          borderRadius: 12,
+          opacity: disabled ? 0.5 : 1
+        },
+        jss
+      ],
+      children: /* @__PURE__ */ jsx(
+        BaseView,
+        {
+          "aria-hidden": true,
+          jss: {
+            width: 32,
+            height: 20,
+            padding: 2,
+            borderRadius: 10,
+            background: checked ? "var(--background-button-primary)" : "var(--background-button-secondary)",
+            border: "1px solid transparent",
+            display: "flex",
+            alignItems: "center",
+            "@media (forced-colors: active)": {
+              background: checked ? "Highlight" : "Canvas",
+              borderColor: "ButtonText"
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseView,
+            {
+              jss: {
+                width: 14,
+                height: 14,
+                borderRadius: "50%",
+                background: "var(--light-text)",
+                transform: checked ? "translateX(12px)" : "none",
+                boxShadow: "var(--shadow-sm)",
+                transition: "transform 120ms ease",
+                "@media (prefers-reduced-motion: reduce)": { transition: "none" },
+                "@media (forced-colors: active)": {
+                  background: checked ? "HighlightText" : "ButtonText"
+                }
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+});
 
-export { Avatar, AvatarStack, Badge, BaseButton, BaseInput, BaseLink, BaseLinkComponentOverrideContext, BaseList, BaseListAddOn, BaseListItem, BaseView, Box, Button, ButtonGroup, Calendar, Card, Checkbox, Circle, Column, DESKTOP_MEDIA, DarkModeContext, DarkModeProvider, DarkModeToggle, DateInput, DatetimeInput, Dialog, DialogProvider, FlexLayout, H1, H2, H3, H4, Icon, IconButton, IconLink, JSSProvider, JSServerStyles, LAPTOP, LAPTOP_MEDIA, Label, Li, Link, List, ListButtonItem, ListDivider, ListHeaderItem, ListItem, ListLinkItem, ListSpacer, MOBILE, MOBILE_MEDIA, MenuIcon, NavigationSplitView, OnVisible, P, Popover, PopoverTrigger, ProgressBar, ProgressCircle, Providers, RangeInput, RootView, Row, Select, Span, StackContextProvider, StaticCheckbox, Sublist, SubmitIconInput, TABLET, TABLET_MEDIA, TabBar, Table, Tabs, Text, TextArea, TextInput, TextInputWithState, TextPairing, TimeInput, Toggle, Toolbar, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getColorValue, getCookie, getMargin, getMaterial, getPadding, getSize, getSpacing, getSurface, getTextColor, guid, hasCookie, hash, laptop, lightTheme, mobile, numberToBase, sizes3 as sizes, stateMachineContextFactory, tablet, timeFormatter, toClassnames, useCookie, useDialog, useIsTopOfStack, useKeyboard, useNavigation, usePromise, useRefEffect, useStream };
+export { ActionScope, Avatar, AvatarStack, Badge, BaseButton, BaseInput, BaseLink, BaseLinkComponentOverrideContext, BaseList, BaseListAddOn, BaseListItem, BaseView, Box, Button, ButtonGroup, Calendar, Card, Checkbox, Circle, Column, Composer, ContextualActions, DESKTOP_MEDIA, DarkModeContext, DarkModeProvider, DarkModeToggle, DateInput, DatetimeInput, Dialog, DialogProvider, Disclosure, FlexLayout, H1, H2, H3, H4, Icon, IconButton, IconLink, JSSProvider, JSServerStyles, LAPTOP, LAPTOP_MEDIA, Label, Li, Link, List, ListButtonItem, ListDivider, ListHeaderItem, ListItem, ListLinkItem, ListSpacer, MOBILE, MOBILE_MEDIA, Menu, MenuIcon, MenuItem, MenuSeparator, Modal, NavigationSplitView, OnVisible, P, Popover, PopoverTrigger, ProgressBar, ProgressCircle, Prose, Providers, RangeInput, RootView, Row, SearchList, SearchPalette, Select, Span, StackContextProvider, StaticCheckbox, Sublist, SubmitIconInput, Switch, TABLET, TABLET_MEDIA, TabBar, Table, Tabs, Text, TextArea, TextInput, TextInputWithState, TextPairing, TimeInput, Toggle, Toolbar, Tooltip, baseStyles, createEmitter, createStorage, cssVar, darkTheme, desktop, getBackground, getBaseStyles, getColorValue, getCookie, getMargin, getMaterial, getPadding, getSize, getSpacing, getSurface, getTextColor, guid, hasCookie, hash, laptop, lightTheme, mobile, numberToBase, sizes3 as sizes, stateMachineContextFactory, tablet, timeFormatter, toClassnames, useCookie, useDialog, useIsTopOfStack, useKeyboard, useNavigation, usePromise, useRefEffect, useStream };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map