@milktop/react-ui 0.1.2 → 0.2.1

package/dist/sidebar/sidebar.css

@@ -1,14 +1,19 @@
 @layer ui {
   [data-scope=sidebar][data-part=root] { display: flex; flex-direction: column; width: var(--ui-sidebar-width); height: 100dvh;
     position: sticky; top: 0; z-index: 35; flex-shrink: 0; box-sizing: border-box; overflow: hidden;
-    background: var(--ui-sidebar-surface); border-right: 1px solid var(--ui-border); font-size: 14px; }
+    background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text); border-right: 1px solid var(--ui-sidebar-border); font-size: 14px; }
   [data-scope=sidebar][data-part=root] {
     transition: width 200ms ease;
+    /* Sticky makes it a stacking context (z-index 35: over the page, under the
+       top bar's popups), so its flyouts can't rise out of it. While it's in
+       use it goes over the top bar, which would otherwise cover those near
+       the top. They're its children, so hovering one still counts. */
+    &:is(:hover, :focus-within) { z-index: 37; }
     /* The rail: icons only. */
     &[data-rail] { width: var(--ui-sidebar-rail-width); }
     /* The drawer, on phones. */
     &[data-mobile] { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: min(18rem, 85vw); display: none;
-      box-shadow: var(--ui-shadow); background: var(--ui-surface); }
+      box-shadow: var(--ui-shadow); background: var(--ui-sidebar-surface); }
     &[data-mobile][data-open] { display: flex; animation: ui-drawer-in 200ms ease-out; } }
   @keyframes ui-drawer-in { from { translate: -100% 0; } }
   [data-scope=sidebar][data-part=header] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
@@ -21,10 +26,17 @@
     &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
     [data-part=footer] > & { margin: 0 auto; } }
   [data-scope=sidebar][data-part=nav] { display: flex; flex-direction: column; gap: 1rem; flex-grow: 1; overflow-y: auto; padding: 0.5rem; }
-  [data-scope=sidebar][data-part=footer] { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.5rem; flex-shrink: 0; }
+  /* A faint line above the footer (SidebarUser), like the top bar's. */
+  [data-scope=sidebar][data-part=footer] { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.5rem; flex-shrink: 0;
+    border-top: 1px solid var(--ui-sidebar-divider); }
 
   [data-scope=nav-section][data-part=root] { display: flex; flex-direction: column; gap: 0.125rem; }
-  [data-scope=nav-section][data-part=heading-row] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 1.5rem; padding-right: 0.25rem; }
+  [data-scope=nav-section][data-part=heading-row] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 1.5rem; padding-right: 0.25rem;
+    transition: height 150ms, margin 150ms;
+    /* In the rail the heading row shrinks to a divider that keeps sections
+       apart (none above the first), rather than leaving its height as a gap. */
+    [data-rail] & { height: 1px; margin: 0.375rem 0.5rem; background: var(--ui-sidebar-divider); overflow: hidden; }
+    [data-rail] [data-part=root]:first-child > & { display: none; } }
   [data-scope=nav-section][data-part=heading] { display: flex; align-items: center; flex-grow: 1; padding: 0 0.75rem;
     font-size: 12px; font-weight: 600; color: var(--ui-sidebar-heading); white-space: nowrap; overflow: hidden; }
   [data-scope=nav-section][data-part=collapse-all] { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
@@ -48,7 +60,8 @@
     &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; }
     [data-active] > & { background: var(--ui-sidebar-active); color: var(--ui-sidebar-active-text);
       font-weight: var(--ui-sidebar-active-weight); box-shadow: var(--ui-sidebar-active-shadow); } }
-  [data-scope=nav-item][data-part=icon] { font-size: 16px; width: 1rem; height: 1rem; flex-shrink: 0; }
+  [data-scope=nav-item][data-part=icon] { font-size: 16px; width: 1rem; height: 1rem; flex-shrink: 0;
+    [data-active] > [data-part=link] > & { color: var(--ui-sidebar-active-icon); } }
   [data-scope=nav-item][data-part=text] { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }
   [data-scope=nav-item][data-part=badge] { flex-shrink: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; box-sizing: border-box;
     display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
@@ -70,20 +83,25 @@
     [data-flyout] > & { background: var(--ui-sidebar-active); color: var(--ui-sidebar-active-text); box-shadow: var(--ui-sidebar-active-shadow); } }
   [data-scope=nav-group][data-part=icon] { font-size: 16px; width: 1rem; height: 1rem; flex-shrink: 0; }
   [data-scope=nav-group][data-part=text] { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }
-  [data-scope=nav-group][data-part=indicator] { color: var(--ui-muted); font-size: 14px; transition: rotate 200ms;
+  [data-scope=nav-group][data-part=indicator] { color: var(--ui-sidebar-muted); font-size: 14px; transition: rotate 200ms;
     [data-open] > [data-part=trigger] > & { rotate: 180deg; } }
   [data-scope=nav-group][data-part=panel] { display: flex; flex-direction: column; gap: 0.125rem;
-    margin: 0.125rem 0 0 1.25rem; padding-left: 0.5rem; border-left: 1px solid var(--ui-border); }
+    margin: 0.125rem 0 0 1.25rem; padding-left: 0.5rem; border-left: 1px solid var(--ui-sidebar-border); }
 
   /* In the rail: a panel beside the toggle. The wrapper's left padding
      bridges the gap, so the pointer can cross to it without closing it. */
   [data-scope=nav-group][data-part=children] {
     [data-rail] > & { position: fixed; top: var(--flyout-top); left: var(--flyout-left); z-index: 50; padding-left: 0.5rem; } }
   [data-scope=nav-group][data-part=panel] {
-    [data-rail] > [data-part=children] > & { margin: 0; padding: 0.375rem; min-width: 11rem; border: 1px solid var(--ui-border);
-      border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); box-shadow: var(--ui-shadow); animation: ui-flyout-in 120ms ease-out;
-      /* On the white flyout, the plain (not inset) colours again. */
-      --ui-sidebar-hover: var(--ui-hover); --ui-sidebar-active: var(--ui-hover); --ui-sidebar-active-shadow: none; } }
+    [data-rail] > [data-part=children] > & { margin: 0; padding: 0.375rem; min-width: 11rem; max-height: calc(100vh - 16px); box-sizing: border-box;
+      overflow-y: auto; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface);
+      box-shadow: var(--ui-shadow); animation: ui-flyout-in 120ms ease-out;
+      /* On the white flyout, the plain (not inset) colours again, and the
+         page's text colours, should the sidebar be coloured. */
+      --ui-sidebar-hover: var(--ui-hover); --ui-sidebar-active: var(--ui-hover); --ui-sidebar-active-shadow: none;
+      --ui-sidebar-text: var(--ui-text); --ui-sidebar-muted: var(--ui-muted); --ui-sidebar-border: var(--ui-border); --ui-sidebar-divider: var(--ui-border);
+      --ui-sidebar-item-text: var(--ui-muted); --ui-sidebar-hover-text: var(--ui-text); --ui-sidebar-active-text: var(--ui-text);
+      color: var(--ui-text); } }
   [data-scope=nav-group][data-part=flyout-heading] { padding: 0.25rem 0.75rem 0.375rem; font-size: 12px; font-weight: 600; color: var(--ui-muted); }
   /* Inside the flyout, items show their labels again. */
   [data-scope=sidebar][data-rail] [data-part=panel] :is([data-scope=nav-item][data-part=link]) { justify-content: flex-start; padding: var(--ui-sidebar-item-padding); }
@@ -92,7 +110,7 @@
 
   [data-scope=sidebar-user][data-part=root] { display: block; width: 100%; }
   [data-scope=sidebar-user][data-part=trigger] { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem; box-sizing: border-box;
-    border: none; border-radius: var(--ui-radius); background: transparent; color: var(--ui-text); font-family: inherit; font-size: 13px;
+    border: none; border-radius: var(--ui-radius); background: transparent; color: var(--ui-sidebar-text); font-family: inherit; font-size: 13px;
     text-align: left; white-space: nowrap; cursor: pointer;
     &:hover { background: var(--ui-sidebar-hover); }
     &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; }
@@ -101,9 +119,52 @@
   [data-scope=sidebar-user][data-part=text] { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; line-height: 1.3;
     [data-rail] > [data-part=trigger] > & { display: none; } }
   [data-scope=sidebar-user][data-part=name] { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
-  [data-scope=sidebar-user][data-part=description] { font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; }
-  [data-scope=sidebar-user][data-part=indicator] { flex-shrink: 0; color: var(--ui-muted); font-size: 14px;
+  [data-scope=sidebar-user][data-part=description] { font-size: 12px; color: var(--ui-sidebar-muted); overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=sidebar-user][data-part=indicator] { flex-shrink: 0; color: var(--ui-sidebar-muted); font-size: 14px;
     [data-rail] > [data-part=trigger] > & { display: none; } }
   /* As wide as the trigger when it opens upwards, and never narrower than 13rem. */
   [data-scope=sidebar-user] [data-scope=menu][data-part=content] { min-width: max(13rem, var(--reference-width)); }
+
+  /* The sidebar styles `appearance` sets (data-ui-sidebar-style on <html>):
+     the sidebar tokens for both layouts (the plain one's surface and the
+     inset one's background), in light mode. They're set on the sidebar
+     itself, so they win over tokens set on <html>. */
+  /* Grey, the current page's icon in the accent (neutral-accent: the old
+     name, which a page may still paint before the bundle loads). */
+  :root:not(.dark):is([data-ui-sidebar-style=neutral], [data-ui-sidebar-style=neutral-accent]) [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-hover: #eef0f3; --ui-sidebar-inset-hover: #eef0f3;
+    --ui-sidebar-active: #e6e9ee; --ui-sidebar-inset-active: #e6e9ee; --ui-sidebar-inset-active-shadow: none;
+    --ui-sidebar-active-icon: var(--ui-accent); }
+  :root:not(.dark)[data-ui-sidebar-style=soft] [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-hover: var(--ui-accent-soft); --ui-sidebar-inset-hover: var(--ui-accent-soft);
+    --ui-sidebar-active: var(--ui-accent-soft); --ui-sidebar-inset-active: var(--ui-accent-soft); --ui-sidebar-inset-active-shadow: none; }
+  :root:not(.dark)[data-ui-sidebar-style=tint] [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-surface: var(--ui-accent-50); --ui-sidebar-bg: var(--ui-accent-50);
+    --ui-sidebar-hover: color-mix(in srgb, var(--ui-accent-100) 60%, transparent);
+    --ui-sidebar-inset-hover: color-mix(in srgb, var(--ui-accent-100) 60%, transparent);
+    --ui-sidebar-active: var(--ui-accent-100); --ui-sidebar-inset-active: var(--ui-accent-100); --ui-sidebar-inset-active-shadow: none;
+    --ui-sidebar-active-text: var(--ui-accent-800); }
+  /* The coloured ones: white text and translucent white hovers. */
+  :root:not(.dark):is([data-ui-sidebar-style=accent], [data-ui-sidebar-style=dark], [data-ui-sidebar-style=deep]) [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-text: white; --ui-sidebar-muted: rgba(255, 255, 255, 0.6);
+    --ui-sidebar-border: transparent; --ui-sidebar-divider: rgba(255, 255, 255, 0.12);
+    --ui-sidebar-item-text: rgba(255, 255, 255, 0.88); --ui-sidebar-heading: rgba(255, 255, 255, 0.55); --ui-sidebar-icon: rgba(255, 255, 255, 0.7);
+    --ui-sidebar-hover-text: white; --ui-sidebar-active-text: white;
+    --ui-sidebar-hover: rgba(255, 255, 255, 0.08); --ui-sidebar-inset-hover: rgba(255, 255, 255, 0.08);
+    --ui-sidebar-active-shadow: none; --ui-sidebar-inset-active-shadow: none; }
+  :root:not(.dark)[data-ui-sidebar-style=accent] [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-surface: var(--ui-accent-600); --ui-sidebar-bg: var(--ui-accent-600);
+    --ui-sidebar-item-text: white; --ui-sidebar-heading: rgba(255, 255, 255, 0.7); --ui-sidebar-icon: rgba(255, 255, 255, 0.85);
+    /* Like the dark ones (below), a little stronger on the lighter colour. */
+    --ui-sidebar-hover: rgba(255, 255, 255, 0.1); --ui-sidebar-inset-hover: rgba(255, 255, 255, 0.1);
+    --ui-sidebar-active: rgba(255, 255, 255, 0.18); --ui-sidebar-inset-active: rgba(255, 255, 255, 0.18); }
+  /* The dark ones: the current page a stronger version of the hover, so it
+     stays quiet whatever the accent. */
+  :root:not(.dark):is([data-ui-sidebar-style=dark], [data-ui-sidebar-style=deep]) [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-hover: rgba(255, 255, 255, 0.06); --ui-sidebar-inset-hover: rgba(255, 255, 255, 0.06);
+    --ui-sidebar-active: rgba(255, 255, 255, 0.12); --ui-sidebar-inset-active: rgba(255, 255, 255, 0.12); }
+  :root:not(.dark)[data-ui-sidebar-style=dark] [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-surface: var(--ui-accent-900); --ui-sidebar-bg: var(--ui-accent-900); }
+  :root:not(.dark)[data-ui-sidebar-style=deep] [data-scope=sidebar][data-part=root] {
+    --ui-sidebar-surface: var(--ui-accent-950); --ui-sidebar-bg: var(--ui-accent-950); }
 }

package/dist/sortable-list/SortableList.d.ts

@@ -21,7 +21,7 @@
  * - `disabled`: no reordering; `label`: the list's accessible name
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './sortable-list.css';

package/dist/sortable-list/SortableList.js

@@ -25,7 +25,7 @@ import { useRef } from 'react';
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/stat/Stat.d.ts

@@ -19,7 +19,7 @@
  * Group stats in Stats for a responsive grid.
  */
 import type { HTMLAttributes, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './stat.css';

package/dist/stat/Stat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { formatNumber } from '../format/format.js';
 import { useLocale, useMessages } from '../format/LocaleProvider.js';
 import { RollingNumber } from '../rolling-number/RollingNumber.js';

package/dist/swatch-picker/SwatchPicker.d.ts

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

package/dist/swatch-picker/SwatchPicker.js

@@ -24,7 +24,7 @@ import { useId, useState } from 'react';
 import { Popover } from '../popover/Popover.js';
 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, partsOf, useControllable } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/swatch-picker/swatch-picker.css

@@ -20,8 +20,9 @@
   /* The popover variant: a field showing the colour, like our inputs. */
   [data-scope=swatch-picker][data-part=field] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
   [data-scope=swatch-picker][data-part=trigger] { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; box-sizing: border-box;
-    height: var(--ui-control-height); padding: 0 0.625rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
-    background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
+    height: var(--ui-control-height); padding: 0 0.625rem; border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
+    background: var(--ui-field-bg); color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-visible, &[aria-expanded=true] { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[aria-invalid=true] { border-color: var(--ui-danger); }
     &:disabled { opacity: 0.5; cursor: not-allowed; }

package/dist/table/Table.d.ts

@@ -37,7 +37,7 @@
  * sorting, selection or loading states); `data-align` on cells works too.
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './table.css';

package/dist/table/Table.js

@@ -38,7 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * sorting, selection or loading states); `data-align` on cells works too.
  */
 import { useEffect, useRef } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
 import { Skeleton } from '../skeleton/Skeleton.js';
 import { cx, partsOf, useControllable } from '../utils.js';

package/dist/tabs/Tabs.d.ts

@@ -30,7 +30,7 @@
  */
 import { type ReactElement, type ReactNode } from 'react';
 import { Tabs as Ark, type TabsValueChangeDetails } from '@ark-ui/react/tabs';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './tabs.css';

package/dist/tabs/Tabs.js

@@ -31,7 +31,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { Children, isValidElement, useEffect } from 'react';
 import { Tabs as Ark } from '@ark-ui/react/tabs';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
 import '../theme.css';
 import './tabs.css';

package/dist/tags-input/TagsInput.d.ts

@@ -33,7 +33,7 @@
  */
 import { type ReactNode } from 'react';
 import { TagsInput as Ark, type TagsInputValueChangeDetails } from '@ark-ui/react/tags-input';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './tags-input.css';

package/dist/tags-input/TagsInput.js

@@ -35,7 +35,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { TagsInput as Ark, useTagsInput } from '@ark-ui/react/tags-input';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/tags-input/tags-input.css

@@ -7,9 +7,11 @@
     &[data-variant=outline] { --tag-bg: var(--ui-surface); --tag-border: var(--ui-border); } }
   [data-scope=tags-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=tags-input][data-part=control] { display: flex; align-items: center; gap: 0.25rem; min-height: var(--ui-control-height);
-    padding: 0.25rem 0.25rem 0.25rem 0.375rem; box-sizing: border-box; background: var(--ui-surface);
-    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px; cursor: text;
+    padding: 0.25rem 0.25rem 0.25rem 0.375rem; box-sizing: border-box; background: var(--ui-field-bg);
+    border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius); font-size: 14px; cursor: text;
+    &: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]), &[data-rejected] { border-color: var(--ui-danger); }
     &[data-rejected] { animation: ui-shake 300ms; }
     &[data-disabled] { opacity: 0.5; } }
@@ -28,7 +30,8 @@
     color: inherit; font-family: inherit; font-size: 13px; outline: none; }
   [data-scope=tags-input][data-part=input] { flex: 1; min-width: 4rem; height: 1.625rem; padding: 0 0.25rem; 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=tags-input][data-part=clear-trigger] { display: grid; place-items: center; flex-shrink: 0; align-self: center;
     width: 1.75rem; height: 1.75rem; border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
     &:hover { background: var(--ui-hover); color: var(--ui-text); } }

package/dist/textarea/textarea.css

@@ -2,8 +2,9 @@
   [data-scope=textarea][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
   [data-scope=textarea][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=textarea][data-part=control] { display: block; min-width: 0; padding: 0.5rem 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: 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([aria-invalid=true]) { border-color: var(--ui-danger); }
     &:has(:disabled) { opacity: 0.5; } }

package/dist/theme-toggle/ThemeToggle.d.ts

@@ -24,7 +24,7 @@
  */
 import { type ComponentProps } from 'react';
 import { Menu } from '../menu/Menu.js';
-import 'iconify-icon';
+import '../icons.js';
 import { type Scheme } from '../color-scheme.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';

package/dist/theme-toggle/ThemeToggle.js

@@ -25,7 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { useEffect, useState } from 'react';
 import { Menu } from '../menu/Menu.js';
-import 'iconify-icon';
+import '../icons.js';
 import { Segmented } from '../segment-group/Segmented.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { useColorScheme } from '../color-scheme.js';

package/dist/theme.css

@@ -23,18 +23,44 @@
     --ui-sidebar-bg: #f8f9fb;
     --ui-frame: white;
     --ui-border: #e4e4e7;
+    /* Form controls (inputs, selects, checkboxes, …): their fill and border, and
+       the border on hover. Light, they match cards; dark, they sit a step below
+       the card with a stronger edge, so they read as places to type. */
+    --ui-field-bg: var(--ui-surface);
+    --ui-field-border: var(--ui-border);
+    --ui-field-border-hover: #d4d4d8;
+    /* Text inputs the browser autofilled: a faint accent tint in place of its
+       own colour (--ui-field-bg hides it). */
+    --ui-field-autofill-bg: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-field-bg));
     --ui-hover: #f4f4f5;
     /* Loading placeholders: visible on the canvas and on cards alike. */
     --ui-skeleton: #e4e4e7;
-    --ui-accent: #2563eb;
+    /* The accent as an 11-step scale (Tailwind's blue until `appearance`, or
+       your own CSS, sets another); the accent tokens below are steps of it,
+       so setting the scale recolours them all, in light and dark.
+       --ui-accent-500-text is the text that reads on the 500 (dark mode's
+       accent): white, or the 950 for light accents like teal. */
+    --ui-accent-50: #eff6ff;
+    --ui-accent-100: #dbeafe;
+    --ui-accent-200: #bfdbfe;
+    --ui-accent-300: #93c5fd;
+    --ui-accent-400: #60a5fa;
+    --ui-accent-500: #3b82f6;
+    --ui-accent-600: #2563eb;
+    --ui-accent-700: #1d4ed8;
+    --ui-accent-800: #1e40af;
+    --ui-accent-900: #1e3a8a;
+    --ui-accent-950: #172554;
+    --ui-accent-500-text: white;
+    --ui-accent: var(--ui-accent-600);
     --ui-accent-text: white;
-    --ui-accent-soft: #dbeafe;
-    --ui-accent-soft-text: #1e40af;
+    --ui-accent-soft: var(--ui-accent-100);
+    --ui-accent-soft-text: var(--ui-accent-800);
     /* Selected text, and Highlight's marks. */
     --ui-selection: color-mix(in srgb, var(--ui-accent) 24%, transparent);
     --ui-highlight: color-mix(in srgb, var(--ui-accent) 22%, transparent);
-    --ui-ring: #3b82f6;
-    --ui-ring-soft: #3b82f633;
+    --ui-ring: var(--ui-accent-500);
+    --ui-ring-soft: color-mix(in srgb, var(--ui-accent-500) 20%, transparent);
     --ui-danger: #dc2626;
     --ui-success: #16a34a;
     --ui-warning: #d97706;
@@ -52,6 +78,8 @@
     --ui-control-height: 2.25rem;
     --ui-control-height-sm: 2rem;
     --ui-control-height-lg: 2.75rem;
+    /* Stroke icons' line weight (Lucide's own is 2, in a 24-unit grid). */
+    --ui-icon-stroke: 2;
     /* Sidebar and its items. */
     --ui-sidebar-width: 15rem;
     --ui-sidebar-rail-width: 3.5rem;
@@ -63,6 +91,13 @@
        its section headings, its own icon buttons, and hovered items' text.
        With the item tokens, enough for a coloured sidebar. */
     --ui-sidebar-surface: var(--ui-surface);
+    /* Its text outside the nav items (the logo, SidebarUser), muted text, and
+       its edge and nested groups' rule: for a coloured sidebar. */
+    --ui-sidebar-text: var(--ui-text);
+    --ui-sidebar-muted: var(--ui-muted);
+    --ui-sidebar-border: var(--ui-border);
+    /* The line above its footer. */
+    --ui-sidebar-divider: var(--ui-border);
     --ui-sidebar-heading: var(--ui-muted);
     --ui-sidebar-icon: var(--ui-muted);
     --ui-sidebar-hover-text: var(--ui-text);
@@ -71,6 +106,8 @@
     --ui-sidebar-active-text: var(--ui-text);
     --ui-sidebar-active-weight: 500;
     --ui-sidebar-active-shadow: none;
+    /* The current page's icon (its text colour by default). */
+    --ui-sidebar-active-icon: currentColor;
     /* The inset layout's sidebar is grey, so its hovered and current items go white. */
     --ui-sidebar-inset-hover: color-mix(in srgb, var(--ui-surface) 75%, transparent);
     --ui-sidebar-inset-active: var(--ui-surface);
@@ -85,15 +122,19 @@
     --ui-sidebar-bg: #0c0c0e;
     --ui-frame: #0c0c0e;
     --ui-border: #2b2b31;
+    --ui-field-bg: #17171b;
+    --ui-field-border: #3a3a42;
+    --ui-field-border-hover: #4a4a53;
     --ui-hover: #27272d;
     --ui-skeleton: #303036;
-    --ui-accent: #3b82f6;
-    --ui-accent-soft: #1e3a8a;
-    --ui-accent-soft-text: #bfdbfe;
+    --ui-accent: var(--ui-accent-500);
+    --ui-accent-text: var(--ui-accent-500-text);
+    --ui-accent-soft: var(--ui-accent-900);
+    --ui-accent-soft-text: var(--ui-accent-200);
     --ui-selection: color-mix(in srgb, var(--ui-accent) 40%, transparent);
     --ui-highlight: color-mix(in srgb, var(--ui-accent) 35%, transparent);
-    --ui-ring: #60a5fa;
-    --ui-ring-soft: #60a5fa33;
+    --ui-ring: var(--ui-accent-400);
+    --ui-ring-soft: color-mix(in srgb, var(--ui-accent-400) 20%, transparent);
     --ui-danger: #f87171;
     --ui-success: #4ade80;
     --ui-warning: #fbbf24;

package/dist/timeline/Timeline.d.ts

@@ -22,7 +22,7 @@
  *   under the title
  */
 import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './timeline.css';

package/dist/timeline/Timeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import '../theme.css';
 import './timeline.css';

package/dist/toast/Toaster.d.ts

@@ -18,7 +18,7 @@
  */
 import type { ReactNode } from 'react';
 import { Toast, createToaster, type CreateToasterReturn, type ToastOptions } from '@ark-ui/react/toast';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './toast.css';

package/dist/toast/Toaster.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toaster as ArkToaster, Toast, createToaster } from '@ark-ui/react/toast';
 import { Portal } from '@ark-ui/react/portal';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/tooltip/tooltip.css

@@ -1,6 +1,8 @@
 @layer ui {
   [data-scope=tooltip][data-part=trigger] { display: inline-flex; }
-  /* 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=tooltip][data-part=positioner] { z-index: 60; --z-index: 60; }
   [data-scope=tooltip][data-part=content] {
     z-index: 60; max-width: 16rem; padding: 0.25rem 0.5rem; white-space: normal; font-weight: 400;
     background: var(--ui-text); color: var(--ui-surface); font-family: var(--ui-font); font-size: 12px; line-height: 1.4;

package/dist/tree-view/TreeView.d.ts

@@ -24,7 +24,7 @@
  */
 import { type ReactNode } from 'react';
 import { TreeView as Ark, createTreeCollection } from '@ark-ui/react/tree-view';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './tree-view.css';

package/dist/tree-view/TreeView.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { TreeView as Ark, createTreeCollection, useTreeViewNodeContext } from '@ark-ui/react/tree-view';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",
@@ -22,7 +22,8 @@
   ],
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/icons.js"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -52,10 +53,10 @@
     "prepublishOnly": "npm run build:lib",
     "preversion": "npm run check && npm run build:lib",
     "postversion": "git push --follow-tags",
-    "release:patch": "npm version patch && npm publish",
-    "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish",
-    "release:beta": "npm version prerelease --preid beta && npm publish --tag beta"
+    "release:patch": "npm version patch",
+    "release:minor": "npm version minor",
+    "release:major": "npm version major",
+    "release:beta": "npm version prerelease --preid beta"
   },
   "peerDependencies": {
     "react": "^19.0.0",