@opalui/react 0.0.0-stage → 0.0.2

package/dist/components/menu/menu.css

@@ -0,0 +1,112 @@
+/* Shared material. Public variables can be set once on a theme container. */
+:where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, inset 0 0 0 .5px rgb(255 255 255 / 7%), inset .65px 1px .65px rgb(255 255 255 / var(--opal-material-rim, .28)), inset -.4px -.65px .8px rgb(255 255 255 / calc(var(--opal-material-rim, .28) * .43)));
+  --_opal-glass-edge: 0 0 0 .5px rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .16)), -.65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48)), .65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}
+
+/* One light material for resting controls: clear white face, fine contour,
+   a bright inner lip and a broad, low-contrast shadow. */
+:where([data-theme="light"]) {
+  --opal-control-background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 32%, rgb(255 255 255 / 4%) 65%, rgb(255 255 255 / 28%) 100%), rgb(255 255 255 / 32%);
+  --opal-control-active-background: rgb(255 255 255 / 60%);
+  --opal-control-rim-opacity: 1;
+  --opal-button-background: var(--opal-control-background);
+  --opal-button-hover-background: var(--opal-control-active-background);
+  --opal-button-color: #171717;
+  --opal-input-background: var(--opal-control-background);
+  --opal-input-focus-background: var(--opal-control-active-background);
+  --opal-input-color: #171717;
+  --opal-segmented-background: var(--opal-control-background);
+  --opal-glass-shadow: 0 5px 12px -4px rgb(0 0 0 / 4%);
+  --opal-glass-highlight:
+    inset 0 0 0 1px rgb(255 255 255 / 78%),
+    inset 0 1px 0 rgb(255 255 255 / 100%),
+    inset 0 -1px 0 rgb(255 255 255 / 90%);
+}
+
+/* Resolve the contour on each surface, where its material settings live.
+   edge=.5 reproduces the established 8%/24% light contour exactly. */
+:where([data-theme="light"]) :where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, var(--_opal-glass-edge), var(--opal-glass-highlight));
+}
+
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:12px; --opal-material-rim:0.22; --opal-material-edge:0.5; }
+:where(.opal-menu-panel) { --opal-material-frost:24px; --opal-material-rim:0.3; --opal-material-edge:0.5; }
+
+
+.opal-menu { display: inline-flex; vertical-align: middle; }
+.opal-menu-panel {
+  display: none;
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 6px;
+  box-sizing: border-box;
+  width: 228px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100dvh - 16px);
+  overflow: auto;
+  z-index: 1000;
+  border: 0;
+  border-radius: 22px;
+  color: var(--opal-menu-color, #202124);
+  background: var(--opal-menu-background, rgb(250 250 252 / 86%));
+  backdrop-filter: blur(var(--opal-material-frost,24px)) saturate(150%);
+  -webkit-backdrop-filter: blur(var(--opal-material-frost,24px)) saturate(150%);
+  box-shadow: 0 12px 36px rgb(0 0 0 / 18%), inset 0 0 0 .5px var(--opal-menu-edge, rgb(0 0 0 / 12%)), var(--_opal-glass-rim);
+  font: inherit;
+  outline: none;
+  opacity: 0;
+  transform: scale(.6);
+  transition: opacity 160ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), display 300ms allow-discrete, overlay 300ms allow-discrete;
+}
+.opal-menu-panel[data-open] { display: block; opacity: 1; transform: scale(1); }
+@starting-style { .opal-menu-panel[data-open] { opacity: 0; transform: scale(.6); } }
+.opal-menu-highlight {
+  position: absolute;
+  top: 0;
+  inset-inline: 6px;
+  border-radius: 16px;
+  pointer-events: none;
+  background: var(--opal-menu-highlight, rgb(0 0 0 / 7%));
+  transition: transform 220ms cubic-bezier(.22,.61,.36,1), height 220ms cubic-bezier(.22,.61,.36,1);
+}
+.opal-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 38px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 16px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 160ms ease;
+}
+.opal-menu-item:active:not(:disabled) { transform: scale(.98); }
+.opal-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--opal-focus-color, #2885ff); }
+.opal-menu-item[data-destructive] { color: var(--opal-menu-destructive, #d6293e); }
+.opal-menu-item:disabled { opacity: .4; cursor: default; }
+.opal-menu-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
+.opal-menu-icon > svg { width: 100%; height: 100%; }
+.opal-menu-separator { height: 1px; margin: 6px 10px; background: var(--opal-menu-edge, rgb(0 0 0 / 10%)); }
+@media (prefers-reduced-motion: reduce) { .opal-menu-panel, .opal-menu-item { transition: none; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .opal-menu-highlight { transition: none; } }
+@media (prefers-reduced-transparency: reduce) { .opal-menu-panel { background: var(--opal-menu-solid, #fafafa); backdrop-filter: none; -webkit-backdrop-filter: none; } }
+@media (forced-colors: active) {
+  .opal-menu-panel { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
+  .opal-menu-item:focus { outline: 2px solid Highlight; }
+  .opal-menu-highlight { background: transparent; }
+  .opal-menu-item[data-destructive] { color: ButtonText; }
+  .opal-menu-separator { background: ButtonText; }
+}

package/dist/components/menu/menu.css.js

@@ -0,0 +1 @@
+export default ".opal-menu { display: inline-flex; vertical-align: middle; }\n.opal-menu-panel {\n  display: none;\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  padding: 6px;\n  box-sizing: border-box;\n  width: 228px;\n  max-width: calc(100vw - 16px);\n  max-height: calc(100dvh - 16px);\n  overflow: auto;\n  z-index: 1000;\n  border: 0;\n  border-radius: 22px;\n  color: var(--opal-menu-color, #202124);\n  background: var(--opal-menu-background, rgb(250 250 252 / 86%));\n  backdrop-filter: blur(var(--opal-material-frost,24px)) saturate(150%);\n  -webkit-backdrop-filter: blur(var(--opal-material-frost,24px)) saturate(150%);\n  box-shadow: 0 12px 36px rgb(0 0 0 / 18%), inset 0 0 0 .5px var(--opal-menu-edge, rgb(0 0 0 / 12%)), var(--_opal-glass-rim);\n  font: inherit;\n  outline: none;\n  opacity: 0;\n  transform: scale(.6);\n  transition: opacity 160ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), display 300ms allow-discrete, overlay 300ms allow-discrete;\n}\n.opal-menu-panel[data-open] { display: block; opacity: 1; transform: scale(1); }\n@starting-style { .opal-menu-panel[data-open] { opacity: 0; transform: scale(.6); } }\n.opal-menu-highlight {\n  position: absolute;\n  top: 0;\n  inset-inline: 6px;\n  border-radius: 16px;\n  pointer-events: none;\n  background: var(--opal-menu-highlight, rgb(0 0 0 / 7%));\n  transition: transform 220ms cubic-bezier(.22,.61,.36,1), height 220ms cubic-bezier(.22,.61,.36,1);\n}\n.opal-menu-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  min-height: 38px;\n  padding: 8px 12px;\n  border: 0;\n  border-radius: 16px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  line-height: 1.35;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform 160ms ease;\n}\n.opal-menu-item:active:not(:disabled) { transform: scale(.98); }\n.opal-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--opal-focus-color, #2885ff); }\n.opal-menu-item[data-destructive] { color: var(--opal-menu-destructive, #d6293e); }\n.opal-menu-item:disabled { opacity: .4; cursor: default; }\n.opal-menu-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }\n.opal-menu-icon > svg { width: 100%; height: 100%; }\n.opal-menu-separator { height: 1px; margin: 6px 10px; background: var(--opal-menu-edge, rgb(0 0 0 / 10%)); }\n@media (prefers-reduced-motion: reduce) { .opal-menu-panel, .opal-menu-item { transition: none; transform: none; } }\n@media (prefers-reduced-motion: reduce) { .opal-menu-highlight { transition: none; } }\n@media (prefers-reduced-transparency: reduce) { .opal-menu-panel { background: var(--opal-menu-solid, #fafafa); backdrop-filter: none; -webkit-backdrop-filter: none; } }\n@media (forced-colors: active) {\n  .opal-menu-panel { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }\n  .opal-menu-item:focus { outline: 2px solid Highlight; }\n  .opal-menu-highlight { background: transparent; }\n  .opal-menu-item[data-destructive] { color: ButtonText; }\n  .opal-menu-separator { background: ButtonText; }\n}\n";

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export type MenuItem = {
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+} | 'separator';
+export type MenuProps = {
+    'aria-label': string;
+    items: readonly MenuItem[];
+    icon?: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+/** A compact action menu. Styles are included automatically. */
+export declare function Menu({ items, icon, children, disabled, className, 'aria-label': label }: MenuProps): import("react").JSX.Element;

package/dist/components/menu/menu.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Button } from '../button/button.js';
+import { stylesheetHref } from '../../internal/styles.js';
+import componentCss from './menu.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('menu', css);
+/** A compact action menu. Styles are included automatically. */
+export function Menu({ items, icon, children, disabled, className, 'aria-label': label }) {
+    const id = useId();
+    const trigger = useRef(null);
+    const panel = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [highlight, setHighlight] = useState(null);
+    function highlightItem(item) {
+        setHighlight({ top: item.offsetTop, height: item.offsetHeight });
+    }
+    const search = useRef({ text: '', time: 0 });
+    const options = () => Array.from(panel.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []);
+    function close(restoreFocus = true) {
+        panel.current?.hidePopover?.();
+        setOpen(false);
+        setHighlight(null);
+        if (restoreFocus)
+            trigger.current?.focus({ preventScroll: true });
+    }
+    function position() {
+        if (!trigger.current || !panel.current)
+            return;
+        const anchor = trigger.current.getBoundingClientRect();
+        const menu = panel.current;
+        const width = menu.offsetWidth;
+        const height = menu.offsetHeight;
+        menu.style.left = `${Math.max(8, Math.min(anchor.left, window.innerWidth - width - 8))}px`;
+        menu.style.top = `${Math.max(8, Math.min(anchor.top, window.innerHeight - height - 8))}px`;
+        menu.style.transformOrigin = `${Math.max(0, anchor.left - parseFloat(menu.style.left) + anchor.width / 2)}px ${Math.max(0, anchor.top - parseFloat(menu.style.top) + anchor.height / 2)}px`;
+    }
+    function show(last = false) {
+        if (disabled)
+            return;
+        const menu = panel.current;
+        if (!menu)
+            return;
+        menu.dataset.open = 'true';
+        menu.showPopover?.();
+        position();
+        setOpen(true);
+        search.current = { text: '', time: 0 };
+        const enabled = options();
+        (last ? enabled.at(-1) : enabled[0])?.focus({ preventScroll: true });
+        if (!enabled.length)
+            menu.focus({ preventScroll: true });
+    }
+    useEffect(() => {
+        if (!open)
+            return;
+        const outside = (event) => {
+            if (!panel.current?.contains(event.target) && !trigger.current?.contains(event.target))
+                close(false);
+        };
+        const blur = () => close(false);
+        document.addEventListener('pointerdown', outside);
+        window.addEventListener('resize', position);
+        window.addEventListener('scroll', position, true);
+        window.addEventListener('blur', blur);
+        return () => {
+            document.removeEventListener('pointerdown', outside);
+            window.removeEventListener('resize', position);
+            window.removeEventListener('scroll', position, true);
+            window.removeEventListener('blur', blur);
+        };
+    }, [open]);
+    useEffect(() => { if (disabled)
+        close(false); }, [disabled]);
+    useEffect(() => {
+        if (!open || !panel.current)
+            return;
+        const observer = new ResizeObserver(() => {
+            const active = document.activeElement;
+            if (active instanceof HTMLButtonElement && panel.current?.contains(active))
+                highlightItem(active);
+        });
+        observer.observe(panel.current);
+        options().forEach(item => observer.observe(item));
+        return () => observer.disconnect();
+    }, [open, items]);
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), _jsxs("span", { className: ['opal-menu', className].filter(Boolean).join(' '), children: [_jsx(Button, { ref: trigger, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": id, disabled: disabled, icon: icon ?? (children ? undefined : _jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.6" }), _jsx("circle", { cx: "12", cy: "12", r: "1.6" }), _jsx("circle", { cx: "19", cy: "12", r: "1.6" })] })), onClick: () => open ? close() : show(), onKeyDown: event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            show(event.key === 'ArrowUp');
+                        } }, children: children }), _jsxs("div", { ref: panel, id: id, role: "menu", "aria-label": label, tabIndex: -1, popover: "manual", className: "opal-menu-panel", "data-open": open || undefined, onKeyDown: event => {
+                            const enabled = options();
+                            const current = enabled.indexOf(document.activeElement);
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                close();
+                                return;
+                            }
+                            if (event.key === 'Tab') {
+                                close();
+                                return;
+                            }
+                            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                                event.preventDefault();
+                                const index = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+                                    : (current + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length;
+                                enabled[index]?.focus();
+                                return;
+                            }
+                            if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && !event.ctrlKey && !event.altKey) {
+                                event.preventDefault();
+                                const now = Date.now();
+                                search.current.text = (now - search.current.time < 600 ? search.current.text : '') + event.key.toLowerCase();
+                                search.current.time = now;
+                                const query = new Set(search.current.text).size === 1 ? event.key.toLowerCase() : search.current.text;
+                                const ordered = [...enabled.slice(current + 1), ...enabled.slice(0, current + 1)];
+                                ordered.find(item => item.textContent?.trim().toLowerCase().startsWith(query))?.focus();
+                            }
+                        }, children: [highlight && _jsx("span", { className: "opal-menu-highlight", "aria-hidden": "true", style: { transform: `translateY(${highlight.top}px)`, height: highlight.height } }), items.map((item, index) => item === 'separator' ? _jsx("div", { role: "separator", className: "opal-menu-separator" }, index)
+                                : _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, className: "opal-menu-item", "data-destructive": item.destructive || undefined, onFocus: event => highlightItem(event.currentTarget), onPointerMove: event => { if (event.pointerType === 'mouse' && !item.disabled && document.activeElement !== event.currentTarget)
+                                        event.currentTarget.focus({ preventScroll: true }); }, onClick: () => { close(); item.onSelect?.(); }, children: [item.icon && _jsx("span", { className: "opal-menu-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { children: item.label })] }, index))] })] })] });
+}
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react'\nimport { Button } from '../button/button.js'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './menu.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\n\nconst styleHref = stylesheetHref('menu', css)\nexport type MenuItem = { label: string; icon?: ReactNode; onSelect?: () => void; disabled?: boolean; destructive?: boolean } | 'separator'\nexport type MenuProps = {\n  'aria-label': string\n  items: readonly MenuItem[]\n  icon?: ReactNode\n  children?: ReactNode\n  disabled?: boolean\n  className?: string\n}\n\n/** A compact action menu. Styles are included automatically. */\nexport function Menu({ items, icon, children, disabled, className, 'aria-label': label }: MenuProps) {\n  const id = useId()\n  const trigger = useRef<HTMLButtonElement>(null)\n  const panel = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState(false)\n  const [highlight, setHighlight] = useState<{ top: number; height: number } | null>(null)\n  function highlightItem(item: HTMLButtonElement) {\n    setHighlight({ top: item.offsetTop, height: item.offsetHeight })\n  }\n  const search = useRef({ text: '', time: 0 })\n  const options = () => Array.from(panel.current?.querySelectorAll<HTMLButtonElement>('[role=\"menuitem\"]:not(:disabled)') ?? [])\n  function close(restoreFocus = true) {\n    panel.current?.hidePopover?.()\n    setOpen(false)\n    setHighlight(null)\n    if (restoreFocus) trigger.current?.focus({ preventScroll: true })\n  }\n  function position() {\n    if (!trigger.current || !panel.current) return\n    const anchor = trigger.current.getBoundingClientRect()\n    const menu = panel.current\n    const width = menu.offsetWidth\n    const height = menu.offsetHeight\n    menu.style.left = `${Math.max(8, Math.min(anchor.left, window.innerWidth - width - 8))}px`\n    menu.style.top = `${Math.max(8, Math.min(anchor.top, window.innerHeight - height - 8))}px`\n    menu.style.transformOrigin = `${Math.max(0, anchor.left - parseFloat(menu.style.left) + anchor.width / 2)}px ${Math.max(0, anchor.top - parseFloat(menu.style.top) + anchor.height / 2)}px`\n  }\n  function show(last = false) {\n    if (disabled) return\n    const menu = panel.current\n    if (!menu) return\n    menu.dataset.open = 'true'\n    menu.showPopover?.()\n    position()\n    setOpen(true)\n    search.current = { text: '', time: 0 }\n    const enabled = options()\n    ;(last ? enabled.at(-1) : enabled[0])?.focus({ preventScroll: true })\n    if (!enabled.length) menu.focus({ preventScroll: true })\n  }\n  useEffect(() => {\n    if (!open) return\n    const outside = (event: PointerEvent) => {\n      if (!panel.current?.contains(event.target as Node) && !trigger.current?.contains(event.target as Node)) close(false)\n    }\n    const blur = () => close(false)\n    document.addEventListener('pointerdown', outside)\n    window.addEventListener('resize', position)\n    window.addEventListener('scroll', position, true)\n    window.addEventListener('blur', blur)\n    return () => {\n      document.removeEventListener('pointerdown', outside)\n      window.removeEventListener('resize', position)\n      window.removeEventListener('scroll', position, true)\n      window.removeEventListener('blur', blur)\n    }\n  }, [open])\n  useEffect(() => { if (disabled) close(false) }, [disabled])\n  useEffect(() => {\n    if (!open || !panel.current) return\n    const observer = new ResizeObserver(() => {\n      const active = document.activeElement\n      if (active instanceof HTMLButtonElement && panel.current?.contains(active)) highlightItem(active)\n    })\n    observer.observe(panel.current)\n    options().forEach(item => observer.observe(item))\n    return () => observer.disconnect()\n  }, [open, items])\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    <span className={['opal-menu', className].filter(Boolean).join(' ')}>\n      <Button ref={trigger} aria-label={label} aria-haspopup=\"menu\" aria-expanded={open} aria-controls={id}\n        disabled={disabled} icon={icon ?? (children ? undefined : <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"5\" cy=\"12\" r=\"1.6\" /><circle cx=\"12\" cy=\"12\" r=\"1.6\" /><circle cx=\"19\" cy=\"12\" r=\"1.6\" /></svg>)}\n        onClick={() => open ? close() : show()}\n        onKeyDown={event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); show(event.key === 'ArrowUp') } }}>\n        {children}\n      </Button>\n      <div ref={panel} id={id} role=\"menu\" aria-label={label} tabIndex={-1} popover=\"manual\"\n        className=\"opal-menu-panel\" data-open={open || undefined}\n        onKeyDown={event => {\n          const enabled = options()\n          const current = enabled.indexOf(document.activeElement as HTMLButtonElement)\n          if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(); return }\n          if (event.key === 'Tab') { close(); return }\n          if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n            event.preventDefault()\n            const index = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1\n              : (current + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length\n            enabled[index]?.focus(); return\n          }\n          if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && !event.ctrlKey && !event.altKey) {\n            event.preventDefault()\n            const now = Date.now()\n            search.current.text = (now - search.current.time < 600 ? search.current.text : '') + event.key.toLowerCase()\n            search.current.time = now\n            const query = new Set(search.current.text).size === 1 ? event.key.toLowerCase() : search.current.text\n            const ordered = [...enabled.slice(current + 1), ...enabled.slice(0, current + 1)]\n            ordered.find(item => item.textContent?.trim().toLowerCase().startsWith(query))?.focus()\n          }\n        }}>\n        {highlight && <span className=\"opal-menu-highlight\" aria-hidden=\"true\"\n          style={{ transform: `translateY(${highlight.top}px)`, height: highlight.height }} />}\n        {items.map((item, index) => item === 'separator' ? <div key={index} role=\"separator\" className=\"opal-menu-separator\" />\n          : <button key={index} type=\"button\" role=\"menuitem\" tabIndex={-1} disabled={item.disabled}\n            className=\"opal-menu-item\" data-destructive={item.destructive || undefined}\n            onFocus={event => highlightItem(event.currentTarget)}\n            onPointerMove={event => { if (event.pointerType === 'mouse' && !item.disabled && document.activeElement !== event.currentTarget) event.currentTarget.focus({ preventScroll: true }) }}\n            onClick={() => { close(); item.onSelect?.() }}>\n            {item.icon && <span className=\"opal-menu-icon\" aria-hidden=\"true\">{item.icon}</span>}\n            <span>{item.label}</span>\n          </button>)}\n      </div>\n    </span>\n  </>\n}\n"]}

package/dist/components/segmented-control/segmented-control.css

@@ -0,0 +1,136 @@
+/* Shared material. Public variables can be set once on a theme container. */
+:where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, inset 0 0 0 .5px rgb(255 255 255 / 7%), inset .65px 1px .65px rgb(255 255 255 / var(--opal-material-rim, .28)), inset -.4px -.65px .8px rgb(255 255 255 / calc(var(--opal-material-rim, .28) * .43)));
+  --_opal-glass-edge: 0 0 0 .5px rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .16)), -.65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48)), .65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}
+
+/* One light material for resting controls: clear white face, fine contour,
+   a bright inner lip and a broad, low-contrast shadow. */
+:where([data-theme="light"]) {
+  --opal-control-background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 32%, rgb(255 255 255 / 4%) 65%, rgb(255 255 255 / 28%) 100%), rgb(255 255 255 / 32%);
+  --opal-control-active-background: rgb(255 255 255 / 60%);
+  --opal-control-rim-opacity: 1;
+  --opal-button-background: var(--opal-control-background);
+  --opal-button-hover-background: var(--opal-control-active-background);
+  --opal-button-color: #171717;
+  --opal-input-background: var(--opal-control-background);
+  --opal-input-focus-background: var(--opal-control-active-background);
+  --opal-input-color: #171717;
+  --opal-segmented-background: var(--opal-control-background);
+  --opal-glass-shadow: 0 5px 12px -4px rgb(0 0 0 / 4%);
+  --opal-glass-highlight:
+    inset 0 0 0 1px rgb(255 255 255 / 78%),
+    inset 0 1px 0 rgb(255 255 255 / 100%),
+    inset 0 -1px 0 rgb(255 255 255 / 90%);
+}
+
+/* Resolve the contour on each surface, where its material settings live.
+   edge=.5 reproduces the established 8%/24% light contour exactly. */
+:where([data-theme="light"]) :where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, var(--_opal-glass-edge), var(--opal-glass-highlight));
+}
+
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:12px; --opal-material-rim:0.22; --opal-material-edge:0.5; }
+:where(.opal-menu-panel) { --opal-material-frost:24px; --opal-material-rim:0.3; --opal-material-edge:0.5; }
+
+
+.opal-segmented-filter { position: absolute; pointer-events: none; }
+.opal-segmented {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: repeat(var(--opal-segment-count), minmax(0, 1fr));
+  box-sizing: border-box;
+  padding: 3px;
+  border-radius: 999px;
+  background: var(--opal-segmented-background, rgb(0 0 0 / 5%));
+  color: var(--opal-segmented-color, #202020);
+  box-shadow: var(--opal-segmented-shadow, var(--_opal-glass-shadow));
+  vertical-align: middle;
+  max-width: 100%;
+  isolation: isolate;
+}
+.opal-segmented::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--opal-segmented-rim, var(--_opal-glass-rim));
+  opacity: var(--opal-control-rim-opacity, .7);
+}
+.opal-segmented-indicator {
+  position: absolute;
+  inset-block: 3px;
+  inset-inline-start: calc(3px + (100% - 6px) / var(--opal-segment-count) * var(--opal-segment-index));
+  width: calc((100% - 6px) / var(--opal-segment-count));
+  border-radius: 999px;
+  pointer-events: none;
+  background: var(--opal-segmented-thumb, #fff);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), inset 0 0 0 0.5px rgb(255 255 255 / 18%);
+  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;
+}
+.opal-segmented-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 36px;
+  padding: 7px 24px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.opal-segmented-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 170ms ease; }
+.opal-segmented-item[aria-checked="true"] { color: var(--opal-segmented-selected-color, inherit); }
+.opal-segmented-item:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 3px; }
+.opal-segmented:is([data-dragging], :has(.opal-segmented-item:active:not(:disabled))) .opal-segmented-indicator {
+  transform: translateX(var(--opal-segment-pull, 0px)) scale(calc(1.14 + var(--opal-segment-stretch, 0)), calc(1.45 - var(--opal-segment-stretch, 0) * 0.75));
+  background: var(--opal-segmented-lifted, rgb(255 255 255 / 30%));
+  z-index: 0;
+  -webkit-backdrop-filter: blur(.25px) saturate(110%);
+  backdrop-filter: blur(.25px) saturate(110%);
+  box-shadow: 0 5px 12px rgb(0 0 0 / 13%), var(--_opal-glass-rim);
+  transition-duration: 170ms, 170ms, 140ms, 170ms;
+}
+/* Pointer movement is direct; restoring the normal transition on release
+   lets the pill settle onto the nearest enabled segment. */
+.opal-segmented[data-tracking] .opal-segmented-indicator {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 170ms, 140ms, 170ms;
+}
+/* A small overshoot on release gives the resisted pull a soft rebound. */
+.opal-segmented[data-rebounding]:not([data-dragging]) .opal-segmented-indicator {
+  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 1.5, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;
+}
+.opal-segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.opal-segmented[data-disabled] { opacity: 0.4; }
+.opal-segmented[data-disabled] .opal-segmented-item { opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .opal-segmented .opal-segmented-indicator, .opal-segmented .opal-segmented-label { transition: none !important; transform: none !important; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .opal-segmented { background: var(--opal-segmented-solid-background, #ededed); }
+  .opal-segmented .opal-segmented-indicator { z-index: 0; background: var(--opal-segmented-thumb, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
+}
+@media (forced-colors: active) {
+  .opal-segmented::after { display: none; }
+  .opal-segmented { background: Canvas; color: ButtonText; outline: 1px solid ButtonText; }
+  .opal-segmented .opal-segmented-indicator { z-index: 0; background: Highlight !important; box-shadow: none !important; transform: none !important; }
+  .opal-segmented-item[aria-checked="true"] { color: HighlightText; }
+  .opal-segmented-item:disabled { color: GrayText; }
+}
+
+/* An inert visual layer owns the ink; native buttons retain all semantics. */
+.opal-segmented-optical-labels { position:absolute; inset:-24px; padding:27px; display:grid; grid-template-columns:repeat(var(--opal-segment-count),minmax(0,1fr)); pointer-events:none; visibility:hidden; z-index:1; }
+.opal-segmented-optical-label { display:flex; align-items:center; justify-content:center; min-width:0; white-space:nowrap; }
+.opal-segmented-optical-label[data-selected] { color:var(--opal-segmented-selected-color,inherit); }
+.opal-segmented-optical-label[data-disabled] { opacity:.4; }
+.opal-segmented[data-lensing] .opal-segmented-optical-labels { visibility:visible; }
+.opal-segmented[data-lensing] .opal-segmented-label { opacity:0; }

package/dist/components/segmented-control/segmented-control.css.js

@@ -0,0 +1 @@
+export default ".opal-segmented-filter { position: absolute; pointer-events: none; }\n.opal-segmented {\n  position: relative;\n  display: inline-grid;\n  grid-template-columns: repeat(var(--opal-segment-count), minmax(0, 1fr));\n  box-sizing: border-box;\n  padding: 3px;\n  border-radius: 999px;\n  background: var(--opal-segmented-background, rgb(0 0 0 / 5%));\n  color: var(--opal-segmented-color, #202020);\n  box-shadow: var(--opal-segmented-shadow, var(--_opal-glass-shadow));\n  vertical-align: middle;\n  max-width: 100%;\n  isolation: isolate;\n}\n.opal-segmented::after {\n  content: ''; position: absolute; inset: 0; border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--opal-segmented-rim, var(--_opal-glass-rim));\n  opacity: var(--opal-control-rim-opacity, .7);\n}\n.opal-segmented-indicator {\n  position: absolute;\n  inset-block: 3px;\n  inset-inline-start: calc(3px + (100% - 6px) / var(--opal-segment-count) * var(--opal-segment-index));\n  width: calc((100% - 6px) / var(--opal-segment-count));\n  border-radius: 999px;\n  pointer-events: none;\n  background: var(--opal-segmented-thumb, #fff);\n  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), inset 0 0 0 0.5px rgb(255 255 255 / 18%);\n  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;\n}\n.opal-segmented-item {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  min-height: 36px;\n  padding: 7px 24px;\n  border: 0;\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1.25;\n  cursor: pointer;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.opal-segmented-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 170ms ease; }\n.opal-segmented-item[aria-checked=\"true\"] { color: var(--opal-segmented-selected-color, inherit); }\n.opal-segmented-item:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 3px; }\n.opal-segmented:is([data-dragging], :has(.opal-segmented-item:active:not(:disabled))) .opal-segmented-indicator {\n  transform: translateX(var(--opal-segment-pull, 0px)) scale(calc(1.14 + var(--opal-segment-stretch, 0)), calc(1.45 - var(--opal-segment-stretch, 0) * 0.75));\n  background: var(--opal-segmented-lifted, rgb(255 255 255 / 30%));\n  z-index: 0;\n  -webkit-backdrop-filter: blur(.25px) saturate(110%);\n  backdrop-filter: blur(.25px) saturate(110%);\n  box-shadow: 0 5px 12px rgb(0 0 0 / 13%), var(--_opal-glass-rim);\n  transition-duration: 170ms, 170ms, 140ms, 170ms;\n}\n/* Pointer movement is direct; restoring the normal transition on release\n   lets the pill settle onto the nearest enabled segment. */\n.opal-segmented[data-tracking] .opal-segmented-indicator {\n  transition-property: transform, background-color, box-shadow;\n  transition-duration: 170ms, 140ms, 170ms;\n}\n/* A small overshoot on release gives the resisted pull a soft rebound. */\n.opal-segmented[data-rebounding]:not([data-dragging]) .opal-segmented-indicator {\n  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 1.5, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;\n}\n.opal-segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }\n.opal-segmented[data-disabled] { opacity: 0.4; }\n.opal-segmented[data-disabled] .opal-segmented-item { opacity: 1; }\n@media (prefers-reduced-motion: reduce) {\n  .opal-segmented .opal-segmented-indicator, .opal-segmented .opal-segmented-label { transition: none !important; transform: none !important; }\n}\n@media (prefers-reduced-transparency: reduce) {\n  .opal-segmented { background: var(--opal-segmented-solid-background, #ededed); }\n  .opal-segmented .opal-segmented-indicator { z-index: 0; background: var(--opal-segmented-thumb, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }\n}\n@media (forced-colors: active) {\n  .opal-segmented::after { display: none; }\n  .opal-segmented { background: Canvas; color: ButtonText; outline: 1px solid ButtonText; }\n  .opal-segmented .opal-segmented-indicator { z-index: 0; background: Highlight !important; box-shadow: none !important; transform: none !important; }\n  .opal-segmented-item[aria-checked=\"true\"] { color: HighlightText; }\n  .opal-segmented-item:disabled { color: GrayText; }\n}\n\n/* An inert visual layer owns the ink; native buttons retain all semantics. */\n.opal-segmented-optical-labels { position:absolute; inset:-24px; padding:27px; display:grid; grid-template-columns:repeat(var(--opal-segment-count),minmax(0,1fr)); pointer-events:none; visibility:hidden; z-index:1; }\n.opal-segmented-optical-label { display:flex; align-items:center; justify-content:center; min-width:0; white-space:nowrap; }\n.opal-segmented-optical-label[data-selected] { color:var(--opal-segmented-selected-color,inherit); }\n.opal-segmented-optical-label[data-disabled] { opacity:.4; }\n.opal-segmented[data-lensing] .opal-segmented-optical-labels { visibility:visible; }\n.opal-segmented[data-lensing] .opal-segmented-label { opacity:0; }\n";

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type SegmentedControlItem = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type SegmentedControlProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role'> & {
+    items: readonly SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+};
+/** A single-choice control. Supply aria-label or aria-labelledby for its group. */
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "role" | "children" | "onChange"> & {
+    items: readonly SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { stylesheetHref } from '../../internal/styles.js';
+import { useGlassLens } from '../../internal/glass/lens.js';
+import { materials } from '../../internal/glass/material.js';
+import componentCss from './segmented-control.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('segmented-control', css);
+/** A single-choice control. Supply aria-label or aria-labelledby for its group. */
+export const SegmentedControl = forwardRef(function SegmentedControl({ items, value, defaultValue, onValueChange, disabled = false, className, style, ...props }, ref) {
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? items.find(item => !item.disabled)?.value);
+    const [pressed, setPressed] = useState();
+    const [dragPosition, setDragPosition] = useState();
+    const [overdrag, setOverdrag] = useState({ stretch: 0, offset: 0 });
+    const [rebounding, setRebounding] = useState(false);
+    const indicator = useRef(null);
+    const labelSource = useRef(null);
+    const glass = useGlassLens(indicator, materials.selection, { source: labelSource, active: pressed !== undefined && !disabled, ink: true });
+    const pointerClick = useRef(null);
+    const drag = useRef(null);
+    function nearestEnabled(position) {
+        return items.reduce((best, item, i) => item.disabled ? best
+            : best < 0 || Math.abs(i - position) < Math.abs(best - position) ? i : best, -1);
+    }
+    function movePill(clientX) {
+        const active = drag.current;
+        if (!active || disabled)
+            return;
+        const group = active.target.parentElement;
+        if (!group)
+            return;
+        const width = active.target.getBoundingClientRect().width;
+        if (!width)
+            return;
+        const direction = getComputedStyle(group).direction === 'rtl' ? -1 : 1;
+        const rawPosition = active.startIndex + direction * (clientX - active.startX) / width;
+        const position = Math.max(0, Math.min(items.length - 1, rawPosition));
+        const excess = rawPosition - position;
+        // Increasing resistance caps the stretch at 14% of a segment's width.
+        // Shift slightly beyond half the extension so the whole pill drifts with the pull.
+        const stretch = 0.14 * (1 - Math.exp(-Math.abs(excess) / 0.9));
+        setOverdrag({ stretch, offset: direction * Math.sign(excess) * stretch * width * 0.85 });
+        active.position = position;
+        active.stretch = stretch;
+        setDragPosition(position);
+        const nearest = nearestEnabled(position);
+        setPressed(items[nearest]?.value);
+        return stretch;
+    }
+    function endDrag() {
+        const active = drag.current;
+        drag.current = null;
+        setPressed(undefined);
+        setDragPosition(undefined);
+        setOverdrag({ stretch: 0, offset: 0 });
+        setRebounding(false);
+        if (active?.target.hasPointerCapture(active.pointerId))
+            active.target.releasePointerCapture(active.pointerId);
+    }
+    useEffect(() => {
+        window.addEventListener('blur', endDrag);
+        return () => window.removeEventListener('blur', endDrag);
+    }, []);
+    useEffect(() => { if (disabled)
+        endDrag(); }, [disabled]);
+    const selected = value === undefined ? internalValue : value;
+    const selectedIndex = items.findIndex(item => item.value === selected);
+    const pressedIndex = items.findIndex(item => item.value === pressed && !item.disabled);
+    const index = dragPosition ?? (pressedIndex >= 0 ? pressedIndex : selectedIndex);
+    const firstEnabled = items.findIndex(item => !item.disabled);
+    const focusIndex = selectedIndex >= 0 && !items[selectedIndex]?.disabled ? selectedIndex : firstEnabled;
+    function select(next) {
+        if (disabled || items.find(item => item.value === next)?.disabled || next === selected)
+            return;
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }
+    function finishDrag(pointerId, clientX) {
+        const active = drag.current;
+        if (!active || active.pointerId !== pointerId)
+            return;
+        // Cancellation/capture loss may carry empty coordinates; keep the last
+        // tracked position in those cases instead of reverting to the press origin.
+        if (clientX !== undefined)
+            movePill(clientX);
+        const nextIndex = nearestEnabled(active.position);
+        const next = items[nextIndex];
+        const button = active.target.parentElement?.querySelectorAll('.opal-segmented-item')[nextIndex];
+        pointerClick.current = { target: active.target, until: Date.now() + 500 };
+        endDrag();
+        if (next)
+            select(next.value);
+        setRebounding(active.stretch > 0.005);
+        button?.focus({ preventScroll: true });
+    }
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), glass.filter, _jsxs("div", { ...props, ref: ref, role: "radiogroup", "aria-disabled": disabled || undefined, className: ['opal-segmented', className].filter(Boolean).join(' '), "data-lensing": glass.lensing || undefined, "data-disabled": disabled || undefined, "data-dragging": pressed !== undefined && !disabled || undefined, "data-tracking": dragPosition !== undefined && !disabled || undefined, "data-rebounding": rebounding || undefined, style: { '--opal-segment-count': Math.max(1, items.length), '--opal-segment-index': Math.max(0, index),
+                    '--opal-segment-stretch': overdrag.stretch, '--opal-segment-pull': `${overdrag.offset}px`, ...glass.surfaceStyle, ...style }, children: [index >= 0 && _jsx("span", { ref: indicator, className: "opal-segmented-indicator", "aria-hidden": "true", onTransitionEnd: event => { if (event.propertyName === 'transform')
+                            setRebounding(false); } }), _jsx("span", { ref: labelSource, className: "opal-segmented-optical-labels", "aria-hidden": "true", style: glass.sourceStyle, children: items.map(item => _jsx("span", { className: "opal-segmented-optical-label", "data-selected": item.value === selected || undefined, "data-disabled": item.disabled || undefined, children: item.label }, item.value)) }), items.map((item, itemIndex) => _jsx("button", { type: "button", role: "radio", "aria-checked": item.value === selected, disabled: disabled || item.disabled, tabIndex: !disabled && itemIndex === focusIndex ? 0 : -1, className: "opal-segmented-item", "data-pressed": pressed === item.value || undefined, onPointerDown: event => {
+                            if (event.button !== 0 || !event.isPrimary || drag.current || disabled)
+                                return;
+                            setRebounding(false);
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            drag.current = { pointerId: event.pointerId, startX: event.clientX, startIndex: itemIndex, position: itemIndex, stretch: 0, target: event.currentTarget };
+                            setPressed(item.value);
+                            select(item.value);
+                        }, onPointerMove: event => {
+                            const active = drag.current;
+                            if (!active || active.pointerId !== event.pointerId || disabled)
+                                return;
+                            // Fractional segment positions follow the pointer without selecting
+                            // intermediate values. The initial grab offset is preserved.
+                            movePill(event.clientX);
+                        }, onPointerUp: event => {
+                            // A fast release can arrive without a final pointermove.
+                            finishDrag(event.pointerId, event.clientX);
+                        }, onPointerCancel: event => finishDrag(event.pointerId), onLostPointerCapture: event => finishDrag(event.pointerId), onDragStart: event => event.preventDefault(), onClick: event => {
+                            setPressed(undefined);
+                            const pending = pointerClick.current;
+                            pointerClick.current = null;
+                            if (pending?.target === event.currentTarget && Date.now() < pending.until)
+                                return;
+                            // Pointer selection already happened on press. Keep keyboard and
+                            // assistive-technology clicks working without a second callback.
+                            if (event.detail === 0)
+                                select(item.value);
+                        }, onKeyDown: event => {
+                            pointerClick.current = null;
+                            if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key))
+                                return;
+                            event.preventDefault();
+                            const group = event.currentTarget.parentElement;
+                            const rtl = getComputedStyle(group).direction === 'rtl';
+                            const enabled = items.map((entry, i) => entry.disabled ? -1 : i).filter(i => i >= 0);
+                            const position = enabled.indexOf(itemIndex);
+                            const backward = event.key === 'ArrowUp' || event.key === (rtl ? 'ArrowRight' : 'ArrowLeft');
+                            const next = event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1)
+                                : enabled[(position + (backward ? -1 : 1) + enabled.length) % enabled.length];
+                            if (next === undefined)
+                                return;
+                            select(items[next].value);
+                            group.querySelectorAll('.opal-segmented-item')[next]?.focus();
+                        }, children: _jsx("span", { className: "opal-segmented-label", children: item.label }) }, item.value))] })] });
+});
+//# sourceMappingURL=segmented-control.js.map