@editora/ui-core 0.1.25 → 0.2.1

package/README.md

@@ -541,6 +541,138 @@ argument:
 Apply the theme early, before the first render. To theme one part of the page, call
 `applyTheme(tokens, element)`.
 
+Theme a part of the page with `applyTheme(tokens, element)` (or `ThemeProvider` in `@editora/ui-react`), not by
+setting a few `--ui-color-*` variables yourself. The fills, lines and soft accent colours that components read
+(`--ui-color-fill`, `--ui-color-line`, `--ui-color-accent-fill` and the like) are derived from the whole theme, so
+overriding only `--ui-color-text` and `--ui-color-surface` on an element leaves them at the page theme. If you need
+plain CSS, spread `themeToVariables(tokens)` (below) onto the element instead.
+
+### Follow the system light/dark setting
+
+```js
+import { applySystemTheme } from '@editora/ui-core';
+
+const stop = applySystemTheme({ accentPalette: 'blue' }); // stop() ends following the system
+```
+
+It applies the light or dark theme to match the operating system and switches live when the person changes it. The
+mode is also written as `data-ui-mode="light|dark"` and `color-scheme` on the page, so your own CSS can follow it.
+`light` and `dark` take token overrides for each mode.
+
+### As a stylesheet (server rendering)
+
+`themeToCss(tokens, ':root')` returns the same variables as CSS text, to put in a `<style>` tag or a `.css` file so the
+first paint is themed without JavaScript. `themeToVariables(tokens)` returns them as a `{ name: value }` object.
+
+### Tokens to build on
+
+Every value below follows the accent palette, the gray scale and light/dark mode, so custom components that read them
+stay on theme.
+
+| Tokens | Meaning |
+| --- | --- |
+| `--ui-color-fill`, `-fill-hover`, `-fill-active` | resting, hover and pressed fill of a neutral control |
+| `--ui-color-line-subtle`, `-line`, `-line-strong` | borders and separators, from quiet to strong |
+| `--ui-color-text-secondary`, `-text-strong` | secondary and primary text |
+| `--ui-color-accent-subtle`, `-accent-fill`, `-accent-fill-hover`, `-accent-fill-active` | tinted accent backgrounds |
+| `--ui-color-accent-line`, `-accent-solid`, `-accent-solid-hover`, `-accent-text` | accent border, solid fill, solid hover and accent text |
+| `--ui-color-surface-elevated`, `--ui-color-info` | raised surface (menus, popovers) and the informational colour |
+| `--ui-color-placeholder` | placeholder text (62% of the text colour, 4.5:1 or better on the field) |
+| `--ui-color-foreground-on-warning` | text on a solid warning fill: dark when the warning colour is light (amber) |
+| `--ui-color-danger-text`, `-success-text`, `-warning-text`, `-info-text`, `-accent-text` | the status and accent hues as text: pulled toward the text colour until they read at 4.5:1 or better on the surface and on their own tint. The plain `--ui-color-danger` and the like are fill and icon colours (about 3-4:1 as text on white) |
+| `--ui-color-danger-solid`, `-success-solid`, `--ui-color-foreground-on-danger`, `-on-success` | a solid fill that white text reads on, and that text colour |
+| `--ui-ring-color`, `--ui-ring-width`, `--ui-ring-offset` | the focus ring |
+| `--ui-control-height-{1..4}`, `--ui-control-font-size-{1..4}`, `--ui-control-padding-inline-{1..4}`, `--ui-control-radius-{1..4}` | the control scale: 24, 32, 40 and 48px (see below) |
+| `--ui-motion-enter-easing`, `--ui-motion-exit-easing` | easing for things that appear and disappear |
+
+### The default look
+
+Light and dark, with the default amber accent (`radius` is 6px):
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/look-light.png" alt="Buttons, fields, checkboxes, switches, badges, tabs and a card in the light theme" width="49%">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/look-dark.png" alt="The same components in the dark theme" width="49%">
+</p>
+
+- **Buttons** are flat fills with no shadow. `variant` picks the colour (`primary`, `danger`, `success`, `warning`,
+  neutral `secondary`, `ghost`) and `recipe` the style: `solid` (default), `soft`, `surface`, `outline`, `ghost` or
+  `classic`. Status fills are a shade deeper than the status colour so white text reads at 4.5:1.
+- **Fields** (input, select, textarea, combobox, pickers) share a hairline border that darkens on hover, and a 2px
+  focus ring drawn inside it.
+- **`ui-field`** is flat: label, control and message with no box. `variant="surface"`, `outline`, `soft`, `contrast` or
+  `elevated` draw the box.
+- **Tabs** are a line: a hairline under the tabs and a 2px accent line under the selected one. The boxed pill look is
+  `variant="segmented"`; `soft`, `outline`, `solid`, `cards` and `indicator` keep working.
+- **Cards** have a single hairline border and no shadow. **Badges** are soft tinted labels without a border
+  (`variant="solid"` for a filled one).
+- **Alerts** are a tinted fill with a hairline in the tone colour and a plain icon; the coloured bar on the leading edge
+  is opt-in (`indicator="line"`). **Slider**, **progress** and **meter** are flat tracks (4–6px) with a solid fill; the
+  slider thumb is a white circle.
+- **Avatars** are a soft tint with initials. **Breadcrumbs** show the current page in bold, with no pill.
+  **Pagination** is a row of 32px buttons with a solid accent for the current page, no bar around them.
+- **Calendar** days are plain cells; the selected day is solid accent, the range a soft tint.
+- **Accordion** and **collapsible** are one hairline box with dividers; the accent bar on an open item is opt-in
+  (`indicator="line"` on the accordion). **Stepper** steps have no card: the current one is a solid circle.
+- **Toggle** and **toggle group** are outlined buttons that turn a soft accent when pressed (no dot glyph unless you pass
+  `icon-on` / `icon-off`). **Toolbar**, **hover card** and **drawer** take the same flat surface as popovers.
+- **Pin input** slots are 40px (one control tall), **empty state** and **file upload** use a primary button.
+- **Tables** (`ui-table`, `ui-data-table`) are a hairline frame with quiet dividers and a subtle header; **tree** rows are
+  32px with a soft accent for the selected one; **timeline**, **form**, **fieldset** and **stepper** have no box
+  (`variant="surface"`, `outline`, `soft`, `contrast` or `elevated` on `ui-form` and `ui-fieldset` draw it).
+- **Sidebar**, **app header** and **navigation menu** use the 32px control rhythm and a soft accent for the current
+  item; **transfer list**, **chart**, **wizard** and **gantt** drop their nested boxes and heavy shadows.
+- **Command**, **selection popup**, **floating toolbar** and **quick actions** share the flat overlay surface.
+- **Marquee**, **animated list**, **spinning text**, **icon cloud**, **orbiter** and **dock** keep their motion but drop the
+  card chrome: a hairline frame, no shadow. **Layout**, **container** and **section** use the theme radius, and their
+  boxed variants use the theme shadows.
+
+### Control sizes
+
+Buttons and form controls share one scale, so a row of mixed controls lines up:
+
+| `size` | Height | Text |
+| --- | --- | --- |
+| `sm` (or `1`) | 24px | 12px |
+| default (`md`, `2`) | 32px | 14px |
+| `lg` (or `3`) | 40px | 16px |
+
+This covers `ui-button`, `ui-input`, `ui-password-field`, `ui-number-field`, `ui-select`, `ui-combobox`,
+`ui-multi-select`, `ui-tags-input`, `ui-toggle`, `ui-textarea` and the date and time pickers. `ui-button` also takes
+`scale="4"` for 48px. The control radius follows the theme's `radius`.
+
+To change a size for the whole page, set the tokens, for example `:root { --ui-control-height-2: 36px; }`. To
+change one control, use `--ui-control-min-height` (buttons) or `--ui-min-height` (inputs) on it. The older
+`components.button['height-md']`-style theme values still work if you set them.
+
+The 24px size is small for touch. Buttons inside a small field (clear, show password, the dropdown arrow) stay 24px
+tall so they still meet the WCAG 2.2 minimum target size, but prefer the default size on touch screens.
+
+## Overlays
+
+Popovers, menus, dropdowns, selects, comboboxes, tooltips and dialogs share one set of behaviours.
+
+**They animate in and out.** A surface fades and scales in from the side it opens on, and plays a quicker exit before it
+is removed, so it no longer disappears with a pop. With `prefers-reduced-motion: reduce` there is no animation. Tune it
+with CSS variables on the page: `--ui-overlay-in-duration` (150ms), `--ui-overlay-out-duration` (100ms) and
+`--ui-overlay-shift` (4px), plus `--ui-motion-enter-easing` and `--ui-motion-exit-easing`.
+
+**They expose their state for CSS.** The open surface carries `data-state="open"` or `"closed"`, and positioned ones
+also `data-side` (`top`, `right`, `bottom`, `left`) and `data-align` (`start`, `center`, `end`), as Radix does:
+
+```css
+.ui-menu-surface[data-side="top"][data-state="open"] {
+  /* your own rule */
+}
+```
+
+**Popovers, menus, tooltips, dropdown-style menus and dialogs sit in the browser's top layer**, above every `z-index` on
+the page, so a sticky header with `z-index: 9999` can no longer cover them. This uses `popover="manual"` (Chrome 114,
+Safari 17, Firefox 125); older browsers keep the previous `z-index` stacking. Dismissal (Escape, click outside) is still
+handled by the components.
+
+Not in the top layer: the panels of `ui-select`, `ui-dropdown`, `ui-combobox` and `ui-multi-select`, which open inside
+their own field and are clipped like it; `ui-hover-card` and `ui-drawer`. They do have the state attributes and the motion.
+
 ## Floating positioning
 
 The positioning engine behind the menus, popovers and tooltips is available on its own, from

package/dist/accordion.cjs.js

@@ -2,7 +2,7 @@
   ui-accordion[data-ui-accordion-root="true"] {
     display: block;
     overflow-anchor: none;
-    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 6px));
     --ui-accordion-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-accordion-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
     --ui-accordion-border: 1px solid var(--ui-accordion-border-color);
@@ -11,12 +11,12 @@
     --ui-accordion-surface-alt-base: var(--color-surface, var(--ui-color-surface-alt, #f8fafc));
     --ui-accordion-surface: var(--ui-accordion-surface-base);
     --ui-accordion-surface-alt: var(--ui-accordion-surface-alt-base);
-    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt));
-    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 5%, var(--ui-accordion-surface));
+    --ui-accordion-hover-surface: var(--ui-color-fill, color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt)));
+    --ui-accordion-open-surface: var(--ui-accordion-surface);
     --ui-accordion-text: var(--ui-color-text, var(--ui-text, #202020));
     --ui-accordion-muted: var(--ui-color-muted, var(--ui-muted, #646464));
     --ui-accordion-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-accordion-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-accordion-shadow: var(--base-card-shadow, none);
     --ui-accordion-duration: 190ms;
     --ui-accordion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
     --ui-accordion-padding-x: 16px;
@@ -24,7 +24,7 @@
     --ui-accordion-gap: var(--ui-default-gap, 8px);
     --ui-accordion-title-size: var(--ui-default-font-size, 14px);
     --ui-accordion-title-line-height: var(--ui-default-line-height, 20px);
-    --ui-accordion-title-weight: 600;
+    --ui-accordion-title-weight: 500;
     --ui-accordion-description-size: 12px;
     --ui-accordion-description-line-height: 16px;
     --ui-accordion-panel-size: 14px;
@@ -153,7 +153,7 @@
     inset-block: 0;
     inset-inline-start: 0;
     inline-size: 0;
-    background: linear-gradient(180deg, var(--ui-accordion-accent) 0%, color-mix(in srgb, var(--ui-accordion-accent) 70%, #0f172a 30%) 100%);
+    background: var(--ui-accordion-accent);
     transition: inline-size var(--ui-accordion-duration) var(--ui-accordion-easing);
     pointer-events: none;
   }
@@ -166,7 +166,8 @@
     inline-size: var(--ui-accordion-indicator-size);
   }
 
-  ui-accordion[data-ui-accordion-root="true"][indicator="none"] > [data-ui-accordion-item]::before {
+  /* The accent bar on an open item is opt-in: indicator="line". */
+  ui-accordion[data-ui-accordion-root="true"]:not([indicator="line"]) > [data-ui-accordion-item]::before {
     display: none;
   }
 
@@ -199,11 +200,11 @@
   }
 
   ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
-    color: color-mix(in srgb, var(--ui-accordion-text) 82%, var(--ui-accordion-accent) 18%);
+    color: var(--ui-accordion-text);
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:focus-visible {
-    outline: 2px solid var(--ui-accordion-focus-ring);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-accordion-focus-ring));
     outline-offset: -2px;
     position: relative;
     z-index: 1;
@@ -234,12 +235,12 @@
     border-radius: var(--ui-accordion-badge-radius);
     padding: 3px 8px;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 500;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     line-height: 1.2;
     background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-accordion-accent) 68%, var(--ui-accordion-text) 32%);
+    color: color-mix(in srgb, var(--ui-accordion-accent) 32%, var(--ui-color-text-strong, var(--ui-accordion-text)));
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {
@@ -353,7 +354,7 @@
       color: HighlightText;
     }
   }
-`;function u(c){const i=Number(c);if(!Number.isFinite(i))return-1;const r=Math.trunc(i);return r>=0?r:-1}function m(c,i){if(c==null)return i;const r=c.toLowerCase();return r!=="false"&&r!=="0"&&r!=="no"}function v(c,i){if(!c)return[];if(!i){const o=u(c);return o>=0?[o]:[]}try{const o=JSON.parse(c);if(Array.isArray(o))return o.map(u).filter(e=>e>=0)}catch{}const r=u(c);return r>=0?[r]:[]}function h(c,i){return i?JSON.stringify(c):String(c[0]??-1)}function x(c,i="var(--base-card-radius, var(--ui-radius, 4px))"){if(!c||!c.trim())return i;const r=c.trim().toLowerCase();return r==="full"||r==="pill"?"999px":r==="square"||r==="none"?"0px":/^-?\d+(\.\d+)?$/.test(r)?`${r}px`:c.trim()}function y(c){return c instanceof HTMLElement&&c.hasAttribute("data-ui-accordion-item")}class g extends b.ElementBase{constructor(){super(),this._uid=`ui-accordion-${Math.random().toString(36).slice(2,8)}`,this._observer=null,this._panelResizeObserver=null,this._heightSyncRaf=0,this._syncingOpenAttr=!1,this._syncingDom=!1,this._syncingDomResetTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMutations=this._onMutations.bind(this)}static get observedAttributes(){return["open","multiple","collapsible","headless","shape","elevation","variant","size","tone","radius","indicator"]}connectedCallback(){super.connectedCallback(),this.setAttribute("data-ui-accordion-root","true"),this._syncHostStyles(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(this._onMutations),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),typeof ResizeObserver<"u"&&(this._panelResizeObserver=new ResizeObserver(()=>{this._syncPanelHeights()}))}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._heightSyncRaf&&(cancelAnimationFrame(this._heightSyncRaf),this._heightSyncRaf=0),this._syncingDomResetTimer!=null&&(clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=null),super.disconnectedCallback()}attributeChangedCallback(i,r,o){if(r!==o){if(i==="radius"||i==="shape"){this._syncHostStyles();return}if(this.isConnected){if(i==="open"){this._applyOpenState();return}this.requestRender()}}}get multiple(){return this.hasAttribute("multiple")}set multiple(i){i!==this.multiple&&(i?this.setAttribute("multiple",""):this.removeAttribute("multiple"))}get collapsible(){return m(this.getAttribute("collapsible"),!0)}set collapsible(i){this.setAttribute("collapsible",String(!!i))}get open(){const i=this._normalizeOpen(this._sourceItems());return this.multiple?i:i[0]??-1}set open(i){const r=Array.isArray(i)?i:[i];this._commitOpen(r.map(u).filter(o=>o>=0),!1)}_sourceItems(){return Array.from(this.children).filter(y).map((r,o)=>{const e=Array.from(r.children),t=e.find(n=>n.hasAttribute("data-ui-accordion-trigger"))||null,a=e.find(n=>n.hasAttribute("data-ui-accordion-panel"))||null;return{index:o,itemNode:r,trigger:t,panel:a,disabled:r.hasAttribute("disabled")||t?.hasAttribute("disabled")||!1,description:r.getAttribute("description")||r.getAttribute("data-description")||"",badge:r.getAttribute("badge")||r.getAttribute("data-badge")||""}})}_normalizeOpen(i){const r=v(this.getAttribute("open"),this.multiple),o=Array.from(new Set(r.map(u).filter(t=>t>=0&&t<i.length&&!i[t]?.disabled))).sort((t,a)=>t-a),e=i.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||i.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||i.length===0?[]:e>=0?[e]:[]}_normalizeNext(i,r){const o=Array.from(new Set(i.map(u).filter(t=>t>=0&&t<r.length&&!r[t]?.disabled))).sort((t,a)=>t-a),e=r.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||r.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||r.length===0?[]:e>=0?[e]:[]}_commitOpen(i,r){const o=this._sourceItems(),e=this._normalizeNext(i,o),t=h(e,this.multiple),a=this.getAttribute("open")??(this.multiple?"[]":"-1");if(t!==a&&(this._syncingOpenAttr=!0,this.setAttribute("open",t),this._syncingOpenAttr=!1,this._applyOpenState()),!r)return;const n=this.multiple?e:e[0]??-1;this.dispatchEvent(new CustomEvent("toggle",{detail:{open:n},bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:n},bubbles:!0}))}_ensureStyleNode(){let i=this.querySelector(":scope > style[data-ui-accordion-style]");if(!i){i=document.createElement("style"),i.setAttribute("data-ui-accordion-style",""),i.textContent=p,this.prepend(i);return}i.textContent!==p&&(i.textContent=p)}_markSyncingDom(){this._syncingDom=!0,this._syncingDomResetTimer!=null&&clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=window.setTimeout(()=>{this._syncingDom=!1,this._syncingDomResetTimer=null},0)}_syncHostStyles(){const i=this.getAttribute("radius"),r=this.getAttribute("shape");if(i&&i.trim()){this.style.setProperty("--ui-accordion-radius",x(i));return}if(r==="square"){this.style.setProperty("--ui-accordion-radius","4px");return}if(r==="pill"){this.style.setProperty("--ui-accordion-radius","999px");return}this.style.removeProperty("--ui-accordion-radius")}_ensureGeneratedNodes(i){const{trigger:r,itemNode:o,description:e,badge:t}=i;if(!r)return;let a=r.querySelector("[data-ui-accordion-trailing]");a||(a=document.createElement("span"),a.setAttribute("data-ui-accordion-trailing",""),r.appendChild(a));let n=a.querySelector("[data-ui-accordion-generated-badge]");t?(n||(n=document.createElement("span"),n.setAttribute("data-ui-accordion-generated-badge",""),a.appendChild(n)),n.textContent=t):n&&n.remove();let s=a.querySelector("[data-ui-accordion-chevron]");s||(s=document.createElement("span"),s.setAttribute("data-ui-accordion-chevron",""),s.setAttribute("aria-hidden","true"),s.innerHTML=`
+`;function u(c){const i=Number(c);if(!Number.isFinite(i))return-1;const r=Math.trunc(i);return r>=0?r:-1}function v(c,i){if(c==null)return i;const r=c.toLowerCase();return r!=="false"&&r!=="0"&&r!=="no"}function m(c,i){if(!c)return[];if(!i){const o=u(c);return o>=0?[o]:[]}try{const o=JSON.parse(c);if(Array.isArray(o))return o.map(u).filter(e=>e>=0)}catch{}const r=u(c);return r>=0?[r]:[]}function h(c,i){return i?JSON.stringify(c):String(c[0]??-1)}function x(c,i="var(--base-card-radius, var(--ui-radius, 6px))"){if(!c||!c.trim())return i;const r=c.trim().toLowerCase();return r==="full"||r==="pill"?"999px":r==="square"||r==="none"?"0px":/^-?\d+(\.\d+)?$/.test(r)?`${r}px`:c.trim()}function y(c){return c instanceof HTMLElement&&c.hasAttribute("data-ui-accordion-item")}class g extends b.ElementBase{constructor(){super(),this._uid=`ui-accordion-${Math.random().toString(36).slice(2,8)}`,this._observer=null,this._panelResizeObserver=null,this._heightSyncRaf=0,this._syncingOpenAttr=!1,this._syncingDom=!1,this._syncingDomResetTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMutations=this._onMutations.bind(this)}static get observedAttributes(){return["open","multiple","collapsible","headless","shape","elevation","variant","size","tone","radius","indicator"]}connectedCallback(){super.connectedCallback(),this.setAttribute("data-ui-accordion-root","true"),this._syncHostStyles(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(this._onMutations),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),typeof ResizeObserver<"u"&&(this._panelResizeObserver=new ResizeObserver(()=>{this._syncPanelHeights()}))}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._heightSyncRaf&&(cancelAnimationFrame(this._heightSyncRaf),this._heightSyncRaf=0),this._syncingDomResetTimer!=null&&(clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=null),super.disconnectedCallback()}attributeChangedCallback(i,r,o){if(r!==o){if(i==="radius"||i==="shape"){this._syncHostStyles();return}if(this.isConnected){if(i==="open"){this._applyOpenState();return}this.requestRender()}}}get multiple(){return this.hasAttribute("multiple")}set multiple(i){i!==this.multiple&&(i?this.setAttribute("multiple",""):this.removeAttribute("multiple"))}get collapsible(){return v(this.getAttribute("collapsible"),!0)}set collapsible(i){this.setAttribute("collapsible",String(!!i))}get open(){const i=this._normalizeOpen(this._sourceItems());return this.multiple?i:i[0]??-1}set open(i){const r=Array.isArray(i)?i:[i];this._commitOpen(r.map(u).filter(o=>o>=0),!1)}_sourceItems(){return Array.from(this.children).filter(y).map((r,o)=>{const e=Array.from(r.children),t=e.find(n=>n.hasAttribute("data-ui-accordion-trigger"))||null,a=e.find(n=>n.hasAttribute("data-ui-accordion-panel"))||null;return{index:o,itemNode:r,trigger:t,panel:a,disabled:r.hasAttribute("disabled")||t?.hasAttribute("disabled")||!1,description:r.getAttribute("description")||r.getAttribute("data-description")||"",badge:r.getAttribute("badge")||r.getAttribute("data-badge")||""}})}_normalizeOpen(i){const r=m(this.getAttribute("open"),this.multiple),o=Array.from(new Set(r.map(u).filter(t=>t>=0&&t<i.length&&!i[t]?.disabled))).sort((t,a)=>t-a),e=i.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||i.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||i.length===0?[]:e>=0?[e]:[]}_normalizeNext(i,r){const o=Array.from(new Set(i.map(u).filter(t=>t>=0&&t<r.length&&!r[t]?.disabled))).sort((t,a)=>t-a),e=r.findIndex(t=>!t.disabled);return this.multiple?this.collapsible||r.length===0||o.length>0?o:e>=0?[e]:[]:o.length>0?[o[0]]:this.collapsible||r.length===0?[]:e>=0?[e]:[]}_commitOpen(i,r){const o=this._sourceItems(),e=this._normalizeNext(i,o),t=h(e,this.multiple),a=this.getAttribute("open")??(this.multiple?"[]":"-1");if(t!==a&&(this._syncingOpenAttr=!0,this.setAttribute("open",t),this._syncingOpenAttr=!1,this._applyOpenState()),!r)return;const n=this.multiple?e:e[0]??-1;this.dispatchEvent(new CustomEvent("toggle",{detail:{open:n},bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:n},bubbles:!0}))}_ensureStyleNode(){let i=this.querySelector(":scope > style[data-ui-accordion-style]");if(!i){i=document.createElement("style"),i.setAttribute("data-ui-accordion-style",""),i.textContent=p,this.prepend(i);return}i.textContent!==p&&(i.textContent=p)}_markSyncingDom(){this._syncingDom=!0,this._syncingDomResetTimer!=null&&clearTimeout(this._syncingDomResetTimer),this._syncingDomResetTimer=window.setTimeout(()=>{this._syncingDom=!1,this._syncingDomResetTimer=null},0)}_syncHostStyles(){const i=this.getAttribute("radius"),r=this.getAttribute("shape");if(i&&i.trim()){this.style.setProperty("--ui-accordion-radius",x(i));return}if(r==="square"){this.style.setProperty("--ui-accordion-radius","4px");return}if(r==="pill"){this.style.setProperty("--ui-accordion-radius","999px");return}this.style.removeProperty("--ui-accordion-radius")}_ensureGeneratedNodes(i){const{trigger:r,itemNode:o,description:e,badge:t}=i;if(!r)return;let a=r.querySelector("[data-ui-accordion-trailing]");a||(a=document.createElement("span"),a.setAttribute("data-ui-accordion-trailing",""),r.appendChild(a));let n=a.querySelector("[data-ui-accordion-generated-badge]");t?(n||(n=document.createElement("span"),n.setAttribute("data-ui-accordion-generated-badge",""),a.appendChild(n)),n.textContent=t):n&&n.remove();let s=a.querySelector("[data-ui-accordion-chevron]");s||(s=document.createElement("span"),s.setAttribute("data-ui-accordion-chevron",""),s.setAttribute("aria-hidden","true"),s.innerHTML=`
         <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
           <path d="M5 7.5 10 12.5 15 7.5"></path>
         </svg>

package/dist/accordion.esm.js

@@ -3,7 +3,7 @@ const p = `
   ui-accordion[data-ui-accordion-root="true"] {
     display: block;
     overflow-anchor: none;
-    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 6px));
     --ui-accordion-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-accordion-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
     --ui-accordion-border: 1px solid var(--ui-accordion-border-color);
@@ -12,12 +12,12 @@ const p = `
     --ui-accordion-surface-alt-base: var(--color-surface, var(--ui-color-surface-alt, #f8fafc));
     --ui-accordion-surface: var(--ui-accordion-surface-base);
     --ui-accordion-surface-alt: var(--ui-accordion-surface-alt-base);
-    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt));
-    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 5%, var(--ui-accordion-surface));
+    --ui-accordion-hover-surface: var(--ui-color-fill, color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt)));
+    --ui-accordion-open-surface: var(--ui-accordion-surface);
     --ui-accordion-text: var(--ui-color-text, var(--ui-text, #202020));
     --ui-accordion-muted: var(--ui-color-muted, var(--ui-muted, #646464));
     --ui-accordion-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-accordion-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-accordion-shadow: var(--base-card-shadow, none);
     --ui-accordion-duration: 190ms;
     --ui-accordion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
     --ui-accordion-padding-x: 16px;
@@ -25,7 +25,7 @@ const p = `
     --ui-accordion-gap: var(--ui-default-gap, 8px);
     --ui-accordion-title-size: var(--ui-default-font-size, 14px);
     --ui-accordion-title-line-height: var(--ui-default-line-height, 20px);
-    --ui-accordion-title-weight: 600;
+    --ui-accordion-title-weight: 500;
     --ui-accordion-description-size: 12px;
     --ui-accordion-description-line-height: 16px;
     --ui-accordion-panel-size: 14px;
@@ -154,7 +154,7 @@ const p = `
     inset-block: 0;
     inset-inline-start: 0;
     inline-size: 0;
-    background: linear-gradient(180deg, var(--ui-accordion-accent) 0%, color-mix(in srgb, var(--ui-accordion-accent) 70%, #0f172a 30%) 100%);
+    background: var(--ui-accordion-accent);
     transition: inline-size var(--ui-accordion-duration) var(--ui-accordion-easing);
     pointer-events: none;
   }
@@ -167,7 +167,8 @@ const p = `
     inline-size: var(--ui-accordion-indicator-size);
   }
 
-  ui-accordion[data-ui-accordion-root="true"][indicator="none"] > [data-ui-accordion-item]::before {
+  /* The accent bar on an open item is opt-in: indicator="line". */
+  ui-accordion[data-ui-accordion-root="true"]:not([indicator="line"]) > [data-ui-accordion-item]::before {
     display: none;
   }
 
@@ -200,11 +201,11 @@ const p = `
   }
 
   ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
-    color: color-mix(in srgb, var(--ui-accordion-text) 82%, var(--ui-accordion-accent) 18%);
+    color: var(--ui-accordion-text);
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:focus-visible {
-    outline: 2px solid var(--ui-accordion-focus-ring);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-accordion-focus-ring));
     outline-offset: -2px;
     position: relative;
     z-index: 1;
@@ -235,12 +236,12 @@ const p = `
     border-radius: var(--ui-accordion-badge-radius);
     padding: 3px 8px;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 500;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     line-height: 1.2;
     background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-accordion-accent) 68%, var(--ui-accordion-text) 32%);
+    color: color-mix(in srgb, var(--ui-accordion-accent) 32%, var(--ui-color-text-strong, var(--ui-accordion-text)));
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {
@@ -383,7 +384,7 @@ function m(c, i) {
 function h(c, i) {
   return i ? JSON.stringify(c) : String(c[0] ?? -1);
 }
-function v(c, i = "var(--base-card-radius, var(--ui-radius, 4px))") {
+function v(c, i = "var(--base-card-radius, var(--ui-radius, 6px))") {
   if (!c || !c.trim()) return i;
   const r = c.trim().toLowerCase();
   return r === "full" || r === "pill" ? "999px" : r === "square" || r === "none" ? "0px" : /^-?\d+(\.\d+)?$/.test(r) ? `${r}px` : c.trim();