@editora/ui-core 0.1.24 → 0.2.0

package/README.md

@@ -252,11 +252,218 @@ and resize, and a toolbar for zoom, filter and sort. Give it `tasks` and `links`
   <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/gantt.png" alt="A Gantt chart with a task bar for API contracts, a baseline under it, and an arrow to the QA sign-off milestone" width="900">
 </p>
 
-- `zoom`: `day`, `week`, `month`, `quarter` or `year`. `sort`: `none`, `start`, `end`, `label` or `progress`.
-- `bar-variant`: `solid`, `soft`, `striped`, `outline` or `glass`.
-- Dependency types: `e2s`, `s2s`, `e2e` and `s2e`.
-- Also: `readonly`, `show-toolbar`, `show-today`, `filter`, and `virtualized="false"` for small layouts (large task sets are
-  virtualized automatically).
+That is the whole setup for a basic chart. The rest of this section builds on it.
+
+### A full planner
+
+This one turns on most of the features at once: a two-level time header, weekends and a holiday shaded, parents that
+follow their children, scheduling that pushes the tasks after one you move, the critical path, dependencies you draw
+by dragging, and a date the host refuses to let slip. The chart draws what it is given and reports what the user does;
+the plan lives in your code, so every edit arrives as an event and you decide whether to keep it.
+
+```html
+<ui-gantt
+  id="planner"
+  zoom="week"
+  week-start="1"
+  bar-variant="soft"
+  columns='["label", "assignee", "start", "end", "progress"]'
+  non-working-days
+  auto-summary
+  cascade
+  schedule="auto"
+  critical-path
+  linkable
+  creatable
+></ui-gantt>
+
+<script type="module">
+  import '@editora/ui-core';
+
+  const planner = document.getElementById('planner');
+  const day = (offset) => {
+    const date = new Date();
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() + offset);
+    return date;
+  };
+
+  // The chart draws what it is given and reports what the user does; the plan lives here.
+  let tasks = [
+    { id: 'discovery', label: 'Discovery', type: 'summary' },
+    { id: 'research', label: 'User research', parent: 'discovery', start: day(-21), end: day(-12), progress: 100, assignee: 'Mina', baselineStart: day(-21), baselineEnd: day(-13) },
+    { id: 'interviews', label: 'Interviews', parent: 'discovery', start: day(-12), end: day(-5), progress: 100, assignee: 'Jonas' },
+    { id: 'scope', label: 'Scope signed off', parent: 'discovery', start: day(-5), type: 'milestone', tone: 'success' },
+    { id: 'build', label: 'Build', type: 'summary' },
+    { id: 'api', label: 'API and data model', parent: 'build', start: day(-4), end: day(10), progress: 70, assignee: 'Priya' },
+    {
+      id: 'ui',
+      label: 'Planner UI',
+      parent: 'build',
+      start: day(-2),
+      end: day(18),
+      progress: 45,
+      assignee: 'Tomás',
+      segments: [{ start: day(-2), end: day(5) }, { start: day(8), end: day(18) }]
+    },
+    { id: 'integration', label: 'Integration', parent: 'build', start: day(18), end: day(26), progress: 0, assignee: 'Priya' },
+    { id: 'launch', label: 'Launch', type: 'summary' },
+    { id: 'qa', label: 'QA and fixes', parent: 'launch', start: day(26), end: day(33), assignee: 'Aiko' },
+    { id: 'beta', label: 'Beta', parent: 'launch', start: day(33), end: day(40), assignee: 'Aiko' },
+    { id: 'release', label: 'Release', parent: 'launch', start: day(40), type: 'milestone', tone: 'danger' },
+    { id: 'docs', label: 'Write the docs', start: day(30), end: day(38), progress: 20, assignee: 'Sam' }
+  ];
+  let links = [
+    { id: 'l1', source: 'research', target: 'interviews' },
+    { id: 'l2', source: 'interviews', target: 'scope' },
+    { id: 'l3', source: 'scope', target: 'api', lag: 1 },
+    { id: 'l4', source: 'scope', target: 'ui', type: 's2s', lag: 3 },
+    { id: 'l5', source: 'api', target: 'integration' },
+    { id: 'l6', source: 'ui', target: 'integration' },
+    { id: 'l7', source: 'integration', target: 'qa' },
+    { id: 'l8', source: 'qa', target: 'beta' },
+    { id: 'l9', source: 'beta', target: 'release' },
+    { id: 'l10', source: 'beta', target: 'docs' } // docs are planned before beta ends: drawn red
+  ];
+  const sync = () => {
+    planner.tasks = tasks;
+    planner.links = links;
+  };
+  planner.holidays = [{ date: day(12), label: 'Founders day' }];
+  const patch = (id, changes) => {
+    tasks = tasks.map((task) => (task.id === id ? { ...task, ...changes } : task));
+  };
+  sync();
+
+  // Keep the release date: refuse any change that would push it.
+  planner.addEventListener('beforetaskchange', (event) => {
+    if (event.detail.affected.some((change) => change.id === 'release')) event.preventDefault();
+  });
+  planner.addEventListener('taskchange', ({ detail }) => {
+    patch(detail.id, { start: detail.start, end: detail.end });
+    sync();
+  });
+  planner.addEventListener('taskrename', ({ detail }) => {
+    patch(detail.id, { label: detail.label });
+    sync();
+  });
+  planner.addEventListener('taskcreate', ({ detail }) => {
+    const id = `task-${tasks.length + 1}`;
+    tasks = [...tasks, { id, label: 'New task', start: detail.start, end: detail.end, parent: detail.parent }];
+    sync();
+    planner.scrollToTask(id);
+  });
+  planner.addEventListener('linkcreate', ({ detail }) => {
+    links = [...links, { id: `l${links.length + 1}`, ...detail }];
+    sync();
+  });
+  planner.addEventListener('linkdelete', ({ detail }) => {
+    links = links.filter((link) => link.id !== detail.id);
+    sync();
+  });
+</script>
+```
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ajaykr089/Editora/main/packages/ui-core/docs/images/gantt-planner.png" alt="A project planner: three summary rows, red critical-path bars joined by dependency arrows, shaded weekends and a holiday, a Today marker, a red dashed link for a task planned before its predecessor ends, and a tooltip on the Beta bar" width="900">
+</p>
+
+The red bars are the critical path (`critical-path`), the red dashed arrow is a dependency that is already broken
+(Write the docs is planned before Beta ends), the grey strip under User research is its baseline, and the dots on
+Beta are the handles `linkable` adds.
+
+### Timeline and display
+
+- `zoom`: `day`, `week`, `month`, `quarter`, `year` or `fit` (the whole project scaled to the chart's width, re-fitted when it is
+  resized). The time header has two rows (month over days or weeks, year over months or quarters), a pill marks today, and the chart
+  opens on today when it is off the first screen (`initial-scroll="start"` keeps the start).
+- `week-start` (`0` is Sunday) sets the first day of the week; it defaults to the locale's.
+- `bar-variant`: `solid`, `soft`, `striped`, `outline` or `glass`. Progress is drawn inside each bar, and a task with `segments` is drawn in parts,
+  each with its own progress. `sort`: `none`, `start`, `end`, `label` or `progress`.
+- Non-working time: `non-working-days` (the attribute alone means the weekend, or `0,6` / `[1,2]`) and `holidays` (`["2026-12-25", {"date": "2026-12-26", "label": "Boxing Day"}]`)
+  shade those days behind the rows (not at month scales and wider, where a day is a few pixels) and mute them in the day header. They are shown, not scheduled
+  around: task lengths are calendar days.
+- Size: by default the chart grows with its rows up to 620px (`max-height="60vh"` or the `--ui-gantt-max-height` variable change that); add
+  `fill` and give the element a height (or a flex/grid cell) and it fills it, with the rows scrolling inside. Below 640px of width only the
+  name column is kept. Large task sets (over 240 rows) are virtualized automatically; `virtualized="false"` turns that off.
+- Dates are calendar days (`YYYY-MM-DD`). A time or offset after the day (`2026-03-02T23:30:00Z`) is ignored, so a task never moves a
+  day with the viewer's time zone; `taskchange` reports plain `YYYY-MM-DD`.
+- Translate every word with `labels` (a JSON object with any subset of the label keys, e.g. `{"title": "Planning", "zoomWeek": "semaine"}`) and
+  set `locale` (`fr-FR`) for month names, date formats and the first day of the week.
+
+### Task list
+
+- Choose the columns with `columns` (`["label", "assignee", "start", "end", "duration", "progress"]`, or objects with a `label` and a
+  `width`) and size the list with `grid-width`; a splitter on its edge resizes it (mouse, touch, or the arrow keys) and fires `gridresize`.
+- Parents: opening or closing a branch fires `tasktoggle`. `auto-summary` makes a parent span its children and take their progress (weighted by length)
+  when it has none; `cascade` lets you move a parent and everything under it together (`beforetaskchange` lists the tasks it moves in `affected`,
+  `taskchange` fires for each).
+
+### Dependencies and scheduling
+
+- A link may carry a `lag` (days) and its `type` says what it ties: `e2s` (the default), `s2s`, `e2e` or `s2e`. A link whose target is too early is
+  drawn red and dashed.
+- `schedule="auto"` also pushes the tasks that follow a task you move (later only, keeping their length, down the chain, as one change you can
+  refuse in `beforetaskchange`); `schedule="off"` turns both off. The pushing counts calendar days.
+- `critical-path` computes the critical path from the links (no slack on a chain that is tight all the way) and draws those bars as critical, on top of any
+  task you flag `critical`.
+- `linkable` shows dots beside each bar: drag one onto another bar and the chart fires `linkcreate` with the source, the target and the type the two ends
+  give (`e2s`, `s2s`, `e2e`, `s2e`); click a link to select it and press Delete to get `linkdelete`. As with tasks, your code owns the data.
+
+### Editing
+
+- Dragging: a bar can be dragged, resized from its ends, or moved with the arrow keys (Shift extends the end). The chart scrolls when a drag is held
+  near the left or right edge, Escape cancels it, and `snap="week"` or `snap="month"` snaps it to whole weeks or months. `beforetaskchange`
+  (cancelable) fires before the dates change, so a host can refuse the change with `event.preventDefault()`; `taskchange` fires after.
+- Rename in place: double-click a task's name (or press F2 on a row or a bar). Enter or leaving the field keeps it and fires `taskrename`
+  (cancelable), Escape drops it.
+- With `creatable` there is a **+ Add task** button, and a double-click on empty timeline space does the same for that
+  day: the chart fires `taskcreate` with the dates and the neighbour and your code adds the task. Nothing is written to your data by the chart.
+- `readonly` turns all of this off and keeps the browsing.
+
+### Keyboard and accessibility
+
+- Tab enters the task list once (a row) and once more for the bars. On a row, Up/Down, Home/End and PageUp/PageDown move between rows, Right
+  opens a branch or steps into it, Left closes it or climbs to the parent, Enter or Space selects. On a bar the same keys move between rows, and
+  Left/Right move the bar a day (Shift: extend the end), Delete asks to remove it, and Escape closes the tooltip.
+- Each bar is named for assistive technology with its dates, progress, owner and critical flag, and shows the same facts in a tooltip on
+  hover or keyboard focus. While you drag a bar, the tooltip shows the dates it would take. Bars and the touch targets of the splitter and the
+  link handles grow on touch screens.
+
+### Export and print
+
+`exportSvg()` returns the whole chart (not just the part on screen) as a standalone SVG string, and the chart prints as a whole (no scroll
+area, no sticky headers, no controls; use `zoom="fit"` for a wide project).
+
+### Reference
+
+| Attribute | Values |
+| --- | --- |
+| `zoom` | `day`, `week` (default), `month`, `quarter`, `year`, `fit` |
+| `week-start`, `locale`, `labels` | first weekday (`0`-`6`), a locale tag, a JSON object of label overrides |
+| `bar-variant`, `sort`, `variant` | bar skin, sort key, `contrast` for a dark surface |
+| `columns`, `grid-width` | task list columns and width |
+| `fill`, `max-height`, `virtualized` | sizing and row virtualization |
+| `non-working-days`, `holidays` | shaded days: weekdays, dates |
+| `auto-summary`, `cascade` | parents follow their children, parents move their children |
+| `schedule`, `critical-path` | `auto` pushes successors, red critical bars |
+| `linkable`, `creatable`, `readonly`, `snap`, `initial-scroll` | editing and scrolling behaviour |
+| `filter`, `show-toolbar`, `show-today`, `headless` | toolbar |
+
+| Event | `detail` |
+| --- | --- |
+| `beforetaskchange` (cancelable) | `{ id, start, end, previousStart, previousEnd, source, affected }`, `affected` lists the other tasks the change moves in the same shape |
+| `taskchange` | `{ id, start, end }`, once for each task that moved |
+| `taskselect`, `taskdelete` | `{ id }` |
+| `tasktoggle` | `{ id, open }` |
+| `taskrename` (cancelable) | `{ id, label, previousLabel }` |
+| `taskcreate` | `{ start, end, parent, after }` |
+| `linkcreate` | `{ source, target, type }` |
+| `linkselect`, `linkdelete` | `{ id, source, target, type }` |
+| `zoomchange`, `sortchange`, `filterchange`, `gridresize` | `{ zoom }`, `{ sort }`, `{ filter }`, `{ width }` |
+
+Methods: `scrollToDate(date)`, `scrollToTask(id)`, `toggleTask(id, open?)`, `expandAll()`, `collapseAll()` and `exportSvg()`. `tasks`, `links`
+and `holidays` are also properties that take arrays (with `Date`s if you like).
 
 ## Promise dialogs
 
@@ -334,6 +541,130 @@ argument:
 Apply the theme early, before the first render. To theme one part of the page, call
 `applyTheme(tokens, element)`.
 
+### 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-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
@@ -408,6 +739,9 @@ Working examples:
 [guide](https://github.com/ajaykr089/Editora/blob/main/packages/ui-core/docs/FRAMEWORK_DIRECT_USAGE.md). For React,
 use [`@editora/ui-react`](https://www.npmjs.com/package/@editora/ui-react).
 
+`@editora/ui-vue`, `@editora/ui-svelte` and `@editora/ui-angular` are deprecated: they never grew past a few stub
+components. Use `@editora/ui-core` directly instead.
+
 ## Good to know
 
 - Components register when their module is imported, so the package is marked `sideEffects: true`. Import it before the

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) 45%, 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) 45%, 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();