highsoft-ui 1.0.160 → 1.0.162

package/CLAUDE.md

@@ -362,6 +362,38 @@ Standalone, self-bordered text field with a floating label, help text, and error
 - **`hasError` / `success`:** state styling; pair with `helpText`
 - **Touch devices get a 16px field** regardless of `size`. iOS Safari zooms the whole viewport when you focus a field whose text is under 16px, and doesn't zoom back out — so sizes `100` and `200` are floored under `@media (pointer: coarse)`. **Don't "fix" this at the page level** with a `maximum-scale=1` / `user-scalable=no` viewport meta: that buys it by disabling pinch-zoom for everyone, which fails WCAG 1.4.4 (Resize Text).
 
+### Dropdown
+Menu popover (Radix DropdownMenu) hung off any trigger — single-select with a check column, or a plain action menu.
+```tsx
+<Dropdown
+  trigger={<Button variant="neutral" size={300} iconRight={<ChevronDown />}>Theme</Button>}
+  value={theme} onValueChange={setTheme}
+  options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
+/>
+
+// Action menu — no selection state, closes on pick
+<Dropdown trigger={…} closeOnSelect>
+  <DropdownItem onSelect={rename}>Rename</DropdownItem>
+</Dropdown>
+
+// Compact menu under a small trigger (SidebarSwitcher)
+<Dropdown trigger={<SidebarSwitcher … />} size={100} width="trigger" closeOnSelect options={…} />
+```
+- **`options`** (`{ value, label, icon?, disabled? }[]`) or composable **`DropdownItem`** children
+- **`value` / `onValueChange`**: single-select mode (items become radio items)
+- **`indicator`:** how the selected row is marked; the default follows the variant (`plain` → `fill`, `divided` → `check`). `fill` gives it the brand selected pair — `--HS-surface-brand-background-100` with `--HS-text-brand-selected`, stepping to background-200 on hover — the same pair the Sidebar's active row uses, with no leading column. `check` renders a check glyph in a leading column and leaves the row unfilled; use it when the menu sits on a brand-tinted surface or the rows already carry colour. `showCheck` is a deprecated alias (`true` → `check`, `false` → `fill`).
+- **`closeOnSelect`**: default `false` so users can change their mind; set `true` for action menus and switchers
+- **`variant`:** `plain` (default) is a padded white panel with transparent, rounded rows — hover and keyboard focus are one soft inset wash (`--HS-surface-ui-background-50`), the selected row is marked by the check alone, and disabled rows fade. It uses the same surface language as the Button or `SidebarSwitcher` it hangs off, so the menu reads as a floating menu rather than a list. `divided` is the list treatment: edge-to-edge rows separated by hairlines, hover lifts a row to white, keyboard focus adds a 3px brand bar down the left. Use it for dense pickers that should read as a list.
+- **`size`:** `200` (default) is the menu for a size-300 Button: 14px medium labels on ~30px rows (`divided`: 14px semi on 37px rows). `100` is the compact menu for small triggers like `SidebarSwitcher`: 12px medium labels on ~26px rows with a 12px check glyph, so the list reads at the trigger's label size instead of two steps above it. Don't shrink the default instead — every Button-triggered menu would drop below its trigger.
+- **`width`:** omit to hug the widest item, `'trigger'` to match the trigger, or a CSS length; **`side`/`align`/`sideOffset`**
+
+**Accessibility:**
+- Built on Radix `DropdownMenu`: the trigger gets `aria-haspopup="menu"` + `aria-expanded`, the panel is `role="menu"`, and in single-select mode items are `role="menuitemradio"` with `aria-checked` — so the selected row is announced whichever `indicator` draws it. Disabled items carry `aria-disabled` and stay in the list.
+- Keyboard: Enter/Space/ArrowDown open the menu and focus the first item; arrows move, Home/End jump, Enter/Space select, Escape closes and returns focus to the trigger. Typing jumps to the first matching label.
+- Hover and keyboard focus share one highlight (Radix sets `data-highlighted` for both), so the focused row is always visible. The `plain` variant's wash is `--HS-surface-ui-background-50` on white; `divided` adds a 3px brand bar on keyboard focus. The `fill` selected pair (`brand-background-100` + `text-brand-selected`) is the same pair the Sidebar's active row uses and inverts in dark mode.
+- The check glyph is decorative (the state lives in `aria-checked`); leading icons are decorative too. Open/close animate on the shared tokens and drop to instant under `prefers-reduced-motion`.
+- **Focus return after a pointer pick shows no ring.** Radix returns focus to the trigger when the menu closes; that move happens by script outside the click handler, so WebKit (and Chromium after a keyboard-focused menu) paints it as keyboard focus and a mouse user sees the trigger light up. Dropdown remembers whether the closing interaction was a pointer (item pick, outside click) and, if so, takes over the focus return and sets `data-hs-pointer-focus` on the trigger until its next keydown or blur. `Button` and `SidebarSwitcher` scope their `:focus-visible` ring with `:not([data-hs-pointer-focus])`; a custom trigger that wants the same quiet return should do likewise. Keyboard closes (Enter, Escape) keep the ring, and focus always lands on the trigger either way.
+
 ### SearchDropdown
 Combobox / autocomplete: a search field (built on `InputSolo`) with a filtered, keyboard-navigable results popover and match highlighting.
 ```tsx
@@ -489,10 +521,24 @@ Browser-window chrome around embedded content — a real `<iframe>` via `src`, o
 ```
 
 ### Notification
+Full-width banner at the top of the page (the Header renders these). Supports a single item or a rotating carousel, an optional link, and dismissal.
 ```tsx
-<Notification variant="success" title="Saved" />
-<Notification variant="danger" title="Error" message="Something went wrong" />
+<Notification
+  content={{ title: 'Highcharts v12 is here!', description: 'See what changed.', url: '/blog/v12', tag: 'new' }}
+  variant="brand"
+  closable
+  onClose={() => dismiss(id)}
+/>
 ```
+- **`content`:** one `NotificationItem` or an array (rotates every 15s, pauses on hover/focus) — `{ title?, description?, url?, tag? }`
+- **`variant`:** `brand` (default) | `success` | `danger` | `attention`
+- **`closable`** (default `true`) + **`onClose`**: shows the close button
+
+**Accessibility:**
+- The wrapper is a `<div>`, never a link: when an item has a `url`, the link is an **inner stretched link** (an inset-0 `::after` spans the banner) and the close button is its **sibling** stacked above it — a `<button>` may not nest inside an `<a>` (invalid HTML; Next.js flags it, and nested interactive controls confuse AT). The whole banner stays clickable and the close button still works.
+- The link takes its accessible name from the visible banner text; the close button is a real `Button` with `aria-label="Close notification"`.
+- `:focus-visible` on the link draws the ring via the stretched `::after`, so it wraps the full banner like the old wrapper-level outline did. Hover highlight applies only while the *link* is hovered (via `:has`) — hovering the close button no longer suggests the banner will navigate.
+- Inactive carousel slides are `aria-hidden` with `pointer-events: none`; rotation pauses on hover and while focus is inside the banner.
 
 ### VideoPlayer
 Sutro-inspired media player with a brand-accent scrubber, floating volume, auto-hiding chrome, and fullscreen. One custom control bar drives **self-hosted files, YouTube and Vimeo** — provider SDKs load lazily and their branded start screens are masked with an unbranded thumbnail until first play.
@@ -591,12 +637,73 @@ import { BarChart01 } from '@untitled-ui/icons-react'
 - **`SidebarMain`** — the fluid content column beside the sidebar.
 - **`Sidebar`** — the `<aside>`; becomes the bottom sheet on mobile and auto-renders the resize handle, the grab handle and the close button.
 - **`SidebarHeader` / `SidebarBody`** — fixed top region / scrollable body.
-- **`SidebarSection`** — labelled group. `collapsible` surfaces a "Minimize" control that collapses its open `NavGroup`s; `action` slots a custom control instead.
-- **`NavItem`** — polymorphic nav link (`as`, default `<a>`); `active`, `icon`. Closes the mobile sheet on click, after a ~350ms beat so the row visibly takes its selected state under the finger rather than the sheet vanishing out from under the tap. **Touch only** (`pointer: coarse`) — the same breakpoint fires on a narrow desktop window, where hover has already shown which row is which and the pause would just read as lag. Open parents pin to the top while their list scrolls.
+- **`SidebarSection`** — labelled group. `collapsible` surfaces a "Minimize" control that collapses its open `NavGroup`s; `action` slots a custom control instead. `expandable` lets the whole section fold away behind its label (a chevron toggle; `defaultOpen` true, or controlled `open`/`onOpenChange`).
+- **`SidebarSwitcher`** — the header picker trigger: an icon tile, a two-line text block and a selector chevron. See below.
+- **`NavItem`** — polymorphic nav link (`as`, default `<a>`); `active`, `icon`, `badge` (a trailing node after the label — typically `<Label variant="success" iconLeft={false} border>Pro</Label>`). Closes the mobile sheet on click, after a ~350ms beat so the row visibly takes its selected state under the finger rather than the sheet vanishing out from under the tap. **Touch only** (`pointer: coarse`) — the same breakpoint fires on a narrow desktop window, where hover has already shown which row is which and the pause would just read as lag. Open parents pin to the top while their list scrolls.
 - **`NavGroup`** — expandable tree node (`defaultOpen`, controlled `open`/`onOpenChange`, `active` to tint the guide-line on the active path).
 - **`NavDisclosure`** — collapses behind a tap-toggle on narrow screens, inert on desktop.
 - The sidebar imposes **no background** of its own — set `--hs-sidebar-bg` (the mobile sheet keeps an opaque fallback). Colours use `--HS-*` tokens, so dark mode is automatic.
 
+#### The documentation navigation: `SidebarSwitcher`, `NavGroup`, compact `Dropdown`
+
+This is the structure `DocsShell` in documentation-pages renders, and what the
+Storybook `Documentation` story mirrors: standard nav rows (hover wash, brand
+pill for the current page) under a header of two pickers — framework first,
+then product — each a `SidebarSwitcher` driving a compact `Dropdown`. The body
+is one `collapsible` section named after the product, whose areas are
+`NavGroup`s, closed unless they hold the current page. `SidebarSection
+expandable` (the whole section folding behind its label) exists too, but the
+docs site doesn't use it.
+
+```tsx
+<SidebarLayout defaultWidth={300} mobileTriggerLabel="Documentation"
+               mobileTriggerIcon={<ProductIcon icon={product} theme="monochrome" size={20} />}>
+  <Sidebar aria-label="Documentation">
+    <SidebarHeader>
+      {/* Header pickers, framework first then product. The switcher is a plain
+          <button>, so it slots straight into Dropdown's trigger and Radix wires
+          aria-expanded/haspopup. */}
+      <Dropdown value={framework} onValueChange={setFramework} closeOnSelect width="trigger" size={100}
+        options={frameworks.map((f) => ({ ...f, icon: <FrameworkIcon icon={f.value} size={16} /> }))}
+        trigger={
+          <SidebarSwitcher icon={<FrameworkIcon icon={framework} size={20} />}
+                           label="JavaScript" description="Framework" />
+        } />
+      <Dropdown value={product} onValueChange={setProduct} closeOnSelect width="trigger" size={100}
+        options={products.map((p) => ({ ...p, icon: <ProductIcon icon={p.value} theme="monochrome" size={16} /> }))}
+        trigger={
+          <SidebarSwitcher icon={<ProductIcon icon={product} theme="monochrome" size={20} />}
+                           label="Highcharts Core" description="Product" />
+        } />
+    </SidebarHeader>
+    <SidebarBody>
+      <SidebarSection label="Highcharts Core" collapsible>
+        <NavGroup label="Getting started" active defaultOpen>
+          <NavItem href="/installation" active>Installation</NavItem>
+          <NavItem href="/first-chart">Your first chart</NavItem>
+        </NavGroup>
+        <NavGroup label="Chart concepts">
+          <NavItem href="/tooltip" badge={<Label variant="success" iconLeft={false} border>Pro</Label>}>
+            Tooltip
+          </NavItem>
+        </NavGroup>
+      </SidebarSection>
+    </SidebarBody>
+  </Sidebar>
+  <SidebarMain>{children}</SidebarMain>
+</SidebarLayout>
+```
+
+- **`SidebarSwitcher`** props: `icon` (goes in a 32px tile with 6px padding — a `ProductIcon`/`FrameworkIcon` at `20`, or an `Icon` at `16`), `label`, `description`, `chevron` (default `true`), `interactive` (default `true`; `false` renders a static row with no button, chevron or hover for when there's nothing to switch to). Everything else is a button prop (`aria-label`, `onClick`, …) and the ref lands on the `<button>`. Hover is the same translucent wash the nav rows use (`--hs-nav-hover-bg`), arriving in 100ms with no easing and held while the menu is open, so the switchers and the list below read as one surface; the chevron darkens with the text and turns brand while open. The icon tile is a white chip — `--HS-surface-ui-background-0` with a `--HS-surface-ui-border-100` hairline — so the icon keeps a clean ground under the wash, and every tile looks the same. The two text lines sit tight (line-height 1.2, no gap) so they read as one unit.
+- **`SidebarSection expandable`**: the label becomes the toggle, filling the head so the whole row is the target with the chevron at its far end. The body slides closed on the same 0fr→1fr grid transition `NavGroup` uses (clipped only while sliding, so sticky group toggles inside an open section still pin). A Minimize/`action` control, if any, sits beside the toggle as a sibling.
+- Product icons in the switcher use `theme="monochrome"` (the brand duotone), so the tile reads as one tone next to the framework logo.
+
+**Accessibility (switcher / expandable):**
+- `SidebarSwitcher` is a real `<button>`, named by its visible text — label then description, "JavaScript, Framework" — pass `aria-label` to override. The tile and chevron are `aria-hidden`. As a `Dropdown` trigger it gets `aria-expanded` + `aria-haspopup` from Radix, and the menu is keyboard-operable as usual. `interactive={false}` renders a `<div>`, so nothing focusable is left behind.
+- An expandable section's label is a `<button>` inside its `<h3>` with `aria-expanded` and `aria-controls` pointing at the body. The folded body is **`inert`** as well as clipped, so its links leave the tab order and the accessibility tree; a screen reader's headings list still shows the section.
+- State never rests on hover: the active row keeps `aria-current="page"` and the filled brand pill; hover only previews.
+- All three controls show the brand `:focus-visible` ring. Under `prefers-reduced-motion: reduce` the section slide, chevron turn and switcher wash are instant.
+
 #### Mobile (≤760px): the bar and the sheet
 
 A page that has a site `<Header>` already spends the top of a phone screen on the site menu. A second hamburger 40px below it reads as one navigation split in half, whatever the second one is called — so the section nav takes the **opposite end of the screen**: a bar fixed in thumb reach that **names its own contents and where you currently are**, and a sheet that rises from it. Different place, different shape, different words, so the two are legible as different controls at a glance.

package/dist/{BrowserFrame-BUneieY7.js → BrowserFrame-D-DoBOXv.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { G as t, L as n, R as r, k as i } from "./esm-LCYnNVvi.js";
-import { t as a } from "./Button-CjxX21gW.js";
+import { G as t, L as n, R as r, k as i } from "./esm-CUgR2iUX.js";
+import { t as a } from "./Button-BCbWIPg1.js";
 import { forwardRef as o, useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 var p = {

package/dist/{Button-CjxX21gW.js → Button-BCbWIPg1.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { F as t } from "./esm-LCYnNVvi.js";
+import { F as t } from "./esm-CUgR2iUX.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {

package/dist/{ButtonGroup-DanFXfXA.js → ButtonGroup-DGEDf4ic.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-CjxX21gW.js";
+import { t } from "./Button-BCbWIPg1.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {

package/dist/{Checkbox-BkxibNey.js → Checkbox-CO0SRaAZ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { P as t } from "./esm-LCYnNVvi.js";
+import { P as t } from "./esm-CUgR2iUX.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = {

package/dist/{CodeBlock-BkSyiiCb.js → CodeBlock-Ugik4xMM.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { $ as r, q as i } from "./esm-LCYnNVvi.js";
-import { t as a } from "./Button-CjxX21gW.js";
+import { et as r, q as i } from "./esm-CUgR2iUX.js";
+import { t as a } from "./Button-BCbWIPg1.js";
 import { t as o } from "./FrameworkIcon-B8GmMx0r.js";
 import { Fragment as s, forwardRef as c, useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ var h = {
 }, g = null;
 function _() {
 	return g ||= Promise.all([
-		import("./prism-light-CqF2CLQS.js"),
-		import("./create-element-Bftz4UxU.js").then((e) => e.n),
+		import("./prism-light-Czk1yGD_.js"),
+		import("./create-element-DxkdwAGs.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),

package/dist/{CookiePolicyModal-9p_OGcpB.js → CookiePolicyModal-TdrVbP_E.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-LCYnNVvi.js";
-import { t } from "./Button-CjxX21gW.js";
+import { t as e } from "./esm-CUgR2iUX.js";
+import { t } from "./Button-BCbWIPg1.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-f0z6DapB.js";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/dist/{CopyCode-90z6BfV0.js → CopyCode-_sKjpGqB.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { $ as r, q as i } from "./esm-LCYnNVvi.js";
-import { t as a } from "./Button-CjxX21gW.js";
+import { et as r, q as i } from "./esm-CUgR2iUX.js";
+import { t as a } from "./Button-BCbWIPg1.js";
 import { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {