@milktop/react-ui 0.1.2 → 0.2.1

package/dist/input/input.css

@@ -4,10 +4,12 @@
   [data-scope=input][data-part=control] {
     display: flex; align-items: center; gap: 0.5rem; min-width: 0; box-sizing: border-box;
     min-height: var(--ui-control-height); padding: 0 0.75rem;
-    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
     color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
 
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:has(input:autofill) { background: var(--ui-field-autofill-bg); }
     &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
     &:has(:disabled) { opacity: 0.5; }
     [data-round] > & { border-radius: 9999px; padding: 0 0.875rem; }
@@ -17,6 +19,10 @@
   [data-scope=input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent;
     outline: none; color: inherit; font: inherit;
     &::placeholder { color: var(--ui-muted); }
+    /* Browsers paint autofilled inputs their own colour, with !important, which
+       shows as a patch inside the box. Delaying that change indefinitely keeps
+       the input transparent; the box takes --ui-field-autofill-bg instead. */
+    &:autofill { transition-property: background-color, color; transition-delay: 600000s; -webkit-text-fill-color: var(--ui-text); caret-color: var(--ui-text); }
     &[type=number] { appearance: textfield; }
     &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { appearance: none; margin: 0; } }
   [data-scope=input]:is([data-part=prefix], [data-part=suffix]) { display: flex; align-items: center; flex-shrink: 0;

package/dist/menu/Menu.d.ts

@@ -43,7 +43,7 @@
  */
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Menu as Ark } from '@ark-ui/react/menu';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './menu.css';

package/dist/menu/Menu.js

@@ -44,7 +44,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { createContext, useContext, useId, useRef, useState } from 'react';
 import { Menu as Ark, useMenuContext } from '@ark-ui/react/menu';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import '../theme.css';
 import './menu.css';

package/dist/menu/menu.css

@@ -1,7 +1,9 @@
 /* Shared by Menu, its child components and submenus. Zag names most parts:
    item, option-item, trigger-item, separator, item-group-label… */
 @layer ui {
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=menu][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=menu][data-part=content] {
     z-index: 50; font-weight: 400; min-width: 12rem; padding: 0.5rem 0.25rem; box-sizing: border-box; text-align: left; outline: none;
     background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;

package/dist/native-select/NativeSelect.d.ts

@@ -14,7 +14,7 @@
  * - `name`, `required`, `disabled`: as on a <select>
  */
 import { type ReactNode, type SelectHTMLAttributes } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './native-select.css';

package/dist/native-select/NativeSelect.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useId } from 'react';
 import { Field, useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable } from '../utils.js';
 import '../theme.css';
 import './native-select.css';

package/dist/native-select/native-select.css

@@ -3,8 +3,9 @@
   [data-scope=native-select][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=native-select][data-part=control] { position: relative; display: flex; align-items: center; min-width: 0; }
   [data-scope=native-select][data-part=select] { appearance: none; width: 100%; min-width: 0; box-sizing: border-box;
-    height: var(--ui-control-height); padding: 0 2rem 0 0.75rem; background: var(--ui-surface); border: 1px solid var(--ui-border);
+    height: var(--ui-control-height); padding: 0 2rem 0 0.75rem; background: var(--ui-field-bg); border: 1px solid var(--ui-field-border);
     border-radius: var(--ui-radius); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; cursor: pointer;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-visible { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[aria-invalid=true], &[data-invalid] { border-color: var(--ui-danger); }
     &:disabled { opacity: 0.5; cursor: not-allowed; }

package/dist/number-input/NumberInput.d.ts

@@ -25,7 +25,7 @@
  */
 import { type ReactNode } from 'react';
 import { NumberInput as Ark, type NumberInputValueChangeDetails } from '@ark-ui/react/number-input';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './number-input.css';

package/dist/number-input/NumberInput.js

@@ -27,7 +27,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { NumberInput as Ark } from '@ark-ui/react/number-input';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/number-input/number-input.css

@@ -2,14 +2,17 @@
   [data-scope=number-input][data-part=root] { display: inline-block; min-width: 10rem; color: var(--ui-text); font-family: var(--ui-font); }
   [data-scope=number-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=number-input][data-part=control] { display: flex; align-items: center; gap: 0.5rem; height: var(--ui-control-height);
-    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-surface);
-    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px;
+    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-field-bg);
+    border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius); font-size: 14px;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:has(input:autofill) { background: var(--ui-field-autofill-bg); }
     &[data-disabled] { opacity: 0.5; }
     &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); } }
   [data-scope=number-input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
     color: inherit; font: inherit;
-    &::placeholder { color: var(--ui-muted); } }
+    &::placeholder { color: var(--ui-muted); }
+    &:autofill { transition-property: background-color, color; transition-delay: 600000s; -webkit-text-fill-color: var(--ui-text); caret-color: var(--ui-text); } }
   [data-scope=number-input]:is([data-part=prefix], [data-part=suffix]) { display: flex; align-items: center; flex-shrink: 0;
     color: var(--ui-muted); white-space: nowrap; }
   [data-scope=number-input][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; color: var(--ui-muted); flex-shrink: 0; }

package/dist/page/Page.d.ts

@@ -11,6 +11,10 @@
  * - `align`: 'center' or 'start'
  * - `actions`, `breadcrumbs`: shown in the header
  *
+ * When the shell scrolls the page rather than the window, the page can take
+ * focus (so the keyboard scrolls it) and is marked `scroll-region`, so
+ * Inertia resets and restores its scroll on visits as it does the window's.
+ *
  * What's inside a Page isn't the shell's: a Sidebar shown in the page (as an
  * example, say) doesn't collapse or turn into a drawer with the app's.
  */

package/dist/page/Page.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx, partsOf } from '../utils.js';
-import { ShellContext } from '../app-shell/shell.js';
+import { ShellContext, useShell } from '../app-shell/shell.js';
 import '../theme.css';
 import './page.css';
 export function Page({ heading = null, description = null, width = 'default', align = 'center', actions = null, breadcrumbs = null, className, classes, children, ...rest }) {
     const part = partsOf('page', classes);
-    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-width": width, "data-align": align, children: _jsxs("div", { ...part('inner'), children: [(heading || description || actions || breadcrumbs) && (_jsxs("header", { ...part('header'), children: [breadcrumbs && _jsx("div", { ...part('breadcrumbs'), children: breadcrumbs }), _jsxs("div", { ...part('titles'), children: [_jsxs("div", { children: [heading && _jsx("h1", { ...part('heading'), children: heading }), description && _jsx("p", { ...part('description'), children: description })] }), actions && _jsx("div", { ...part('actions'), children: actions })] })] })), _jsx("div", { ...part('content'), children: _jsx(ShellContext, { value: null, children: children }) })] }) }));
+    const scrolls = !!useShell()?.pageScroll;
+    const scrolling = scrolls ? { tabIndex: -1, 'scroll-region': '' } : {};
+    return (_jsx("div", { ...scrolling, ...rest, ...part('root'), className: cx(className, classes?.root), "data-width": width, "data-align": align, children: _jsxs("div", { ...part('inner'), children: [(heading || description || actions || breadcrumbs) && (_jsxs("header", { ...part('header'), children: [breadcrumbs && _jsx("div", { ...part('breadcrumbs'), children: breadcrumbs }), _jsxs("div", { ...part('titles'), children: [_jsxs("div", { children: [heading && _jsx("h1", { ...part('heading'), children: heading }), description && _jsx("p", { ...part('description'), children: description })] }), actions && _jsx("div", { ...part('actions'), children: actions })] })] })), _jsx("div", { ...part('content'), children: _jsx(ShellContext, { value: null, children: children }) })] }) }));
 }

package/dist/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import { Pagination as Ark } from '@ark-ui/react/pagination';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './pagination.css';

package/dist/pagination/Pagination.js

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect } from 'react';
 import { Pagination as Ark, usePagination } from '@ark-ui/react/pagination';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable, withParts } from '../utils.js';
 import { useLocale, useMessages } from '../format/LocaleProvider.js';
 import { formatNumber } from '../format/format.js';

package/dist/password-input/PasswordInput.d.ts

@@ -20,7 +20,7 @@
  */
 import type { ComponentProps, ReactNode } from 'react';
 import { PasswordInput as Ark, type PasswordInputVisibilityChangeDetails } from '@ark-ui/react/password-input';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './password-input.css';

package/dist/password-input/PasswordInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PasswordInput as Ark, usePasswordInput } from '@ark-ui/react/password-input';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/password-input/password-input.css

@@ -2,14 +2,17 @@
   [data-scope=password-input][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
   [data-scope=password-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=password-input][data-part=control] { display: flex; align-items: center; gap: 0.5rem; height: var(--ui-control-height);
-    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-surface);
-    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px;
+    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-field-bg);
+    border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius); font-size: 14px;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:has(input:autofill) { background: var(--ui-field-autofill-bg); }
     &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
     &[data-disabled] { opacity: 0.5; } }
   [data-scope=password-input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
     color: inherit; font: inherit;
-    &::placeholder { color: var(--ui-muted); } }
+    &::placeholder { color: var(--ui-muted); }
+    &:autofill { transition-property: background-color, color; transition-delay: 600000s; -webkit-text-fill-color: var(--ui-text); caret-color: var(--ui-text); } }
   [data-scope=password-input][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; color: var(--ui-muted); flex-shrink: 0; }
   [data-scope=password-input][data-part=visibility-trigger] { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem;
     border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;

package/dist/pin-input/pin-input.css

@@ -3,9 +3,10 @@
   [data-scope=pin-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=pin-input][data-part=control] { display: flex; gap: 0.5rem; }
   [data-scope=pin-input][data-part=input] { width: var(--ui-control-height); height: var(--ui-control-height); padding: 0; box-sizing: border-box;
-    text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    text-align: center; background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
     color: inherit; font-family: inherit; font-size: 16px; font-weight: 500; outline: none;
     &::placeholder { color: var(--ui-muted); }
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &:is([data-invalid], [aria-invalid=true]) { border-color: var(--ui-danger); }
     &[data-complete] { border-color: var(--ui-accent); }

package/dist/popover/Popover.d.ts

@@ -26,7 +26,7 @@
  */
 import type { ReactElement, ReactNode } from 'react';
 import { Popover as Ark, type PopoverOpenChangeDetails } from '@ark-ui/react/popover';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './popover.css';

package/dist/popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as Ark } from '@ark-ui/react/popover';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partOf, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/popover/popover.css

@@ -1,5 +1,7 @@
 @layer ui {
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=popover][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=popover][data-part=content] { z-index: 50; position: relative; width: 18rem; max-width: calc(100vw - 32px);
     padding: 1rem; box-sizing: border-box; outline: none; font-weight: 400;
     background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;

package/dist/radio-group/RadioGroup.d.ts

@@ -24,7 +24,7 @@
  */
 import type { ReactNode } from 'react';
 import { RadioGroup as Ark, type RadioGroupValueChangeDetails } from '@ark-ui/react/radio-group';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './radio-group.css';

package/dist/radio-group/RadioGroup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioGroup as Ark } from '@ark-ui/react/radio-group';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
 import '../theme.css';
 import './radio-group.css';

package/dist/radio-group/radio-group.css

@@ -9,7 +9,7 @@
   [data-scope=radio-group][data-part=item] { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 14px; cursor: pointer;
     &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
   [data-scope=radio-group][data-part=item-control] { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem;
-    margin-top: 0.125rem; box-sizing: border-box; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 9999px;
+    margin-top: 0.125rem; box-sizing: border-box; background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: 9999px;
     &[data-state=checked] { border-color: var(--ui-accent); border-width: 5px; }
     &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
     &[data-invalid] { border-color: var(--ui-danger); } }

package/dist/segment-group/Segmented.d.ts

@@ -28,7 +28,7 @@
  */
 import { type ReactNode } from 'react';
 import { SegmentGroup as Ark, type SegmentGroupValueChangeDetails } from '@ark-ui/react/segment-group';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './segment-group.css';

package/dist/segment-group/Segmented.js

@@ -30,7 +30,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { SegmentGroup as Ark } from '@ark-ui/react/segment-group';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
 import '../theme.css';

package/dist/select/ListSelect.d.ts

@@ -1,4 +1,4 @@
-import 'iconify-icon';
+import '../icons.js';
 import type { InnerProps } from './Select.js';
 import '../theme.css';
 import './select.css';

package/dist/select/ListSelect.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useMemo, useRef } from 'react';
 import { Select as Ark, createListCollection, useSelect } from '@ark-ui/react/select';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, slot } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import { useItems } from './items.js';

package/dist/select/SearchSelect.d.ts

@@ -1,5 +1,5 @@
 import { Combobox as Ark } from '@ark-ui/react/combobox';
-import 'iconify-icon';
+import '../icons.js';
 import type { InnerProps } from './Select.js';
 import '../theme.css';
 import './search-select.css';

package/dist/select/SearchSelect.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Combobox as Ark, createListCollection, useCombobox, } from '@ark-ui/react/combobox';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, slot } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import { useItems } from './items.js';

package/dist/select/search-select.css

@@ -5,8 +5,9 @@
     &[data-variant=outline] { --tag-bg: var(--ui-surface); --tag-border: var(--ui-border); } }
   [data-scope=combobox][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=combobox][data-part=control] { display: flex; align-items: center; gap: 0.25rem; min-height: var(--ui-control-height);
-    padding: 0.125rem 0.25rem 0.125rem 0.5rem; box-sizing: border-box; background: var(--ui-surface);
-    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem; box-sizing: border-box; background: var(--ui-field-bg);
+    border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[data-disabled] { opacity: 0.5; }
     &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); } }
@@ -26,7 +27,9 @@
     &:hover { background: var(--ui-hover); color: var(--ui-text); } }
   [data-scope=combobox][data-part=trigger][data-state=open] { rotate: 180deg; }
 
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=combobox][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=combobox][data-part=content] { z-index: 50; margin: 0; padding: 0.25rem; list-style: none; box-sizing: border-box; outline: none;
     max-height: min(300px, var(--available-height)); overflow-y: auto; font-weight: 400;
     background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow); }

package/dist/select/select.css

@@ -14,8 +14,9 @@
   [data-scope=select][data-part=control] { display: flex; align-items: center; position: relative; }
   [data-scope=select][data-part=trigger] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
     width: 100%; height: var(--ui-control-height); padding: 0 0.75rem; box-sizing: border-box;
-    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
     color: inherit; font-family: var(--ui-font); font-size: 14px; text-align: left; cursor: pointer;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-visible { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
     &[data-invalid], &[aria-invalid=true] { border-color: var(--ui-danger); }
@@ -30,7 +31,9 @@
   [data-scope=select][data-part=indicator] { display: inline-flex; color: var(--ui-muted); transition: rotate 150ms;
     &[data-state=open] { rotate: 180deg; } }
 
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=select][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=select][data-part=content] { z-index: 50; margin: 0; padding: 0.25rem; list-style: none; box-sizing: border-box;
     outline: none; max-height: min(300px, var(--available-height)); overflow-y: auto;
     background: var(--ui-surface); border: 1px solid var(--ui-border);

package/dist/sheet/Sheet.d.ts

@@ -22,7 +22,7 @@
  */
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Dialog as Ark, type DialogOpenChangeDetails } from '@ark-ui/react/dialog';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './sheet.css';

package/dist/sheet/Sheet.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Children, isValidElement } from 'react';
 import { Dialog as Ark } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partOf, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/sidebar/NavGroup.d.ts

@@ -11,10 +11,11 @@
  *
  * In the rail only its icon shows, and its items open beside it as a flyout:
  * on hover, or on click for keyboard and touch. Escape, leaving it or
- * following a link closes it.
+ * following a link closes it. It moves up when it would run past the bottom
+ * of the window, and scrolls when taller than it.
  */
 import { type HTMLAttributes } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './sidebar.css';

package/dist/sidebar/NavGroup.js

@@ -12,10 +12,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * In the rail only its icon shows, and its items open beside it as a flyout:
  * on hover, or on click for keyboard and touch. Escape, leaving it or
- * following a link closes it.
+ * following a link closes it. It moves up when it would run past the bottom
+ * of the window, and scrolls when taller than it.
  */
-import { useContext, useEffect, useId, useRef, useState } from 'react';
-import 'iconify-icon';
+import { useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import '../icons.js';
 import { useShell } from '../app-shell/shell.js';
 import { cx, partsOf, useControllable } from '../utils.js';
 import { FlyoutContext, SectionContext, useSidebar } from './context.js';
@@ -46,7 +47,16 @@ export function NavGroup({ label, icon = null, open: openProp, defaultOpen = fal
     const [position, setPosition] = useState({ top: 0, left: 0 });
     const root = useRef(null);
     const toggleEl = useRef(null);
+    const childrenEl = useRef(null);
     const showing = rail && flyout;
+    // Moved up when it would run past the bottom of the window.
+    useLayoutEffect(() => {
+        if (!showing || !childrenEl.current)
+            return;
+        const top = Math.max(8, Math.min(position.top, innerHeight - childrenEl.current.offsetHeight - 8));
+        if (top !== position.top)
+            setPosition({ ...position, top });
+    }, [showing, position]);
     function showFlyout() {
         if (!rail || !toggleEl.current)
             return;
@@ -73,6 +83,6 @@ export function NavGroup({ label, icon = null, open: openProp, defaultOpen = fal
         setFlyout(false);
         toggleEl.current?.focus();
     }
-    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), ref: root, "data-open": open || undefined, "data-rail": rail || undefined, "data-flyout": showing || undefined, onPointerEnter: showFlyout, onPointerLeave: () => setFlyout(false), onBlur: focusLeft, onKeyDown: escaped, children: [_jsxs("button", { ...part('trigger'), ref: toggleEl, type: "button", "aria-expanded": rail ? showing : open, "aria-controls": `${id}-panel`, "aria-label": rail ? label : undefined, onClick: toggle, children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('text'), children: label }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevron-down", "aria-hidden": "true" })] }), (rail ? showing : open) && (_jsx("div", { ...part('children'), id: `${id}-panel`, role: "presentation", style: { '--flyout-top': `${position.top}px`, '--flyout-left': `${position.left}px` }, onClick: (e) => { if (e.target.closest('a'))
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), ref: root, "data-open": open || undefined, "data-rail": rail || undefined, "data-flyout": showing || undefined, onPointerEnter: showFlyout, onPointerLeave: () => setFlyout(false), onBlur: focusLeft, onKeyDown: escaped, children: [_jsxs("button", { ...part('trigger'), ref: toggleEl, type: "button", "aria-expanded": rail ? showing : open, "aria-controls": `${id}-panel`, "aria-label": rail ? label : undefined, onClick: toggle, children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('text'), children: label }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevron-down", "aria-hidden": "true" })] }), (rail ? showing : open) && (_jsx("div", { ...part('children'), ref: childrenEl, id: `${id}-panel`, role: "presentation", style: { '--flyout-top': `${position.top}px`, '--flyout-left': `${position.left}px` }, onClick: (e) => { if (e.target.closest('a'))
                     setFlyout(false); }, children: _jsxs("div", { ...part('panel'), children: [rail && _jsx("div", { ...part('flyout-heading'), "aria-hidden": "true", children: label }), _jsx(FlyoutContext, { value: true, children: children })] }) }))] }));
 }

package/dist/sidebar/NavItem.d.ts

@@ -17,7 +17,7 @@
  * group's flyout the text stays); in the drawer, following a link closes it.
  */
 import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './sidebar.css';

package/dist/sidebar/NavItem.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * group's flyout the text stays); in the drawer, following a link closes it.
  */
 import { Children, cloneElement, isValidElement, useContext } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { useShell } from '../app-shell/shell.js';
 import { cx, partsOf } from '../utils.js';

package/dist/sidebar/NavSection.d.ts

@@ -8,7 +8,7 @@
  *   all the section's groups at once
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './sidebar.css';

package/dist/sidebar/NavSection.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   all the section's groups at once
  */
 import { useMemo, useRef, useState } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { useShell } from '../app-shell/shell.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';

package/dist/sidebar/Sidebar.d.ts

@@ -25,7 +25,7 @@
  * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import { NavSection } from './NavSection.js';
 import { NavGroup } from './NavGroup.js';

package/dist/sidebar/Sidebar.js

@@ -26,7 +26,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
  */
 import { useMemo, useState } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { useShell } from '../app-shell/shell.js';
 import { cx, partsOf, withParts } from '../utils.js';

package/dist/sidebar/SidebarUser.d.ts

@@ -14,7 +14,7 @@
  * - `letters`, `color`: passed to the Avatar
  */
 import type { ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type MenuProps } from '../menu/Menu.js';
 import { type AvatarColor } from '../avatar/Avatar.js';
 import { type Classes } from '../utils.js';

package/dist/sidebar/SidebarUser.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { Menu } from '../menu/Menu.js';
 import { Avatar } from '../avatar/Avatar.js';
 import { useShell } from '../app-shell/shell.js';