# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

## [3.1.0] - 2026-08-16

### Added

- **`ars-input`: host attributes are now forwarded to the native input.**
  Any attribute the component does not own (`autocomplete`,
  `autocapitalize`, `spellcheck`, `inputmode`, `maxlength`, `name`, …) is
  passed through to the shadow `<input>` at render time. Consumers no
  longer need the component to explicitly enumerate every native input
  attribute; setting `<ars-input autocomplete="off" inputmode="numeric">`
  just works.

  Excluded from forwarding, by design:
  - component-owned control attributes (`type`, `value`, `placeholder`,
    `label`, `error`, `disabled`, `readonly`, `clearable`, `min`, `max`,
    `step`, `pattern`, `required`) — these flow through the component's own
    channels;
  - host mechanics (`id`, `class`, `style`, `slot`, `part`, `exportparts`,
    `tabindex`);
  - `aria-*` and `on*` attributes — the component owns accessibility and
    events, and forwarding `on*` would re-enable inline handlers.

- **`ars-input`: a `MutationObserver` keeps forwarded attributes in sync.**
  Attributes added or changed *after* the element is connected trigger a
  re-render (custom elements only observe their declared
  `observedAttributes`, and Chromium has no `"*"` wildcard). The observer
  only fires for attributes outside the observed set and is disconnected on
  `disconnectedCallback`.

- **Tests** for attribute forwarding: pass-through of arbitrary attributes,
  late-added attributes (post-connect), exclusion of component-owned and
  host attributes, and rejection of `on*`/`aria-*`.

### Fixed

- **Test suite runs again under Vite 8.** The lockfile update that shipped
  with 3.0.3 silently pulled Vite 8, whose oxc transformer requires every
  transformed TypeScript file to be covered by the nearest `tsconfig.json`.
  `test/setup.ts` and the co-located `src/**/*.test.ts` files were not
  covered (excluded from the project), so all 52 test files failed to load
  with `Tsconfig not found` — the 3.0.3 release was published with a suite
  that could not run. Configuration was restructured:
  - `tsconfig.json` now covers `src/**/*` **and** `test/**/*`, including test
    files (with `vitest/globals` in `types` to match `globals: true` in the
    vitest config);
  - new `tsconfig.build.json` keeps the previous restrictive include/exclude,
    and `npm run build` (`tsc -p tsconfig.build.json`) emits the exact same
    `dist/` output as before — no test files leak into the published build.

- **Eliminated the legacy strict-mode debt in test files.** With the root
  tsconfig now covering the tests, ~830 strict-mode diagnostics surfaced in
  19 legacy test files that had never been type-checked (the `tsconfig.json`
  of 3.0.3 excluded `**/*.test.ts`, and `tsconfig.eslint.json` type-checks
  nothing at lint time). All were fixed without changing runtime behaviour:
  - explicit types on test locals and mock objects (`let element: RollMixin`,
    `document.createElement(...) as unknown as ArsCalendar`, typed mock
    events/targets);
  - `test/setup.ts` mocks (`PointerEvent`, `ResizeObserver`,
    `IntersectionObserver`, `getContext`) now declare their fields and
    parameters and install via `globalThis` casts;
  - protected-member access in chart tests (`initGPU`, `gpuRenderer`,
    `parseJsonAttribute`, `gpuDraw*`) uses bracket element access, the
    documented escape hatch from TypeScript's protected-visibility check;
  - numeric-vs-string argument mismatches in validation tests now pass
    strings, matching the `parseInt`-based signatures with identical
    runtime semantics.

  `tsc --noEmit -p tsconfig.json` is now clean; the 1115-test suite passes
  unchanged. (Remaining strict diagnostics in `demos/**/*.ts` are pre-
  existing demo-page debt, unchanged by this release.)

## [3.0.3] - 2026-08-12

### Fixed

- **`MixinBase`: stopped asserting on class names, which broke every minified
  build.** The constructor required `this.constructor.name` to end with
  `'Mixin'`. `Function.prototype.name` is a build-time artifact — minifiers
  rename classes freely, because names are unobservable to code that does not
  reflect on them — so the check passed in dev and tests (which never minify)
  and threw in production bundles with messages like
  `Test failed: Class name 'Kb' must end with 'Mixin'`. Because the throw came
  from a custom element constructor, it aborted the element's upgrade rather
  than merely logging, leaving the mixin non-functional.

  The tag-name assertion is unchanged and still enforced: a mixin's tag must
  end in `-mixin`. Unlike the class name it is a real runtime value the author
  chose, it survives minification, and it is what the rest of the class keys
  on.

- **`MixinBase.isMixin()`: removed the same class-name heuristic, which failed
  silently.** Detection fell back to `constructor.name.endsWith('Mixin')` when
  the tag check did not match. In a minified bundle every mangled class made
  that fallback answer `false` with nothing thrown, so nested-mixin traversal
  in `findActualTargetComponent()` quietly misbehaved. Detection is now by tag
  suffix only, which the constructor guarantees.

### Notes for consumers

- No API change and no migration needed. Mixins that already follow the
  documented convention — registered with a tag ending in `-mixin` — keep
  working unchanged.
- Build workarounds for this bug can be removed. If you enabled esbuild's
  `keepNames`, terser's `keep_classnames`, or an equivalent option solely to
  keep `ars-web-components` working, it is no longer required (dropping it also
  makes bundles smaller).
- Mixin class names are now free to be anything; only the registered tag name
  is enforced.

## [3.0.2] - 2026-06-26

### Changed

- **`ars-calendar`: exposed additional CSS variables for theming.**
  The component's inline default stylesheet now reads the following properties
  from CSS custom properties before falling back to the previous hardcoded
  values, so consumers can override spacing, sizing, badge layout, and hover
  scale without rewriting the whole component CSS:
  - `--ars-calendar-header-padding` (default `15px`)
  - `--ars-calendar-title-font-size` (default `1.2em`)
  - `--ars-calendar-nav-padding` (default `8px 12px`)
  - `--ars-calendar-nav-prev-left` (default `15px`)
  - `--ars-calendar-nav-next-right` (default `15px`)
  - `--ars-calendar-today-margin` (default `10px 5px 0 5px`)
  - `--ars-calendar-today-font-size` (default `0.9em`)
  - `--ars-calendar-weekday-padding` (default `10px`)
  - `--ars-calendar-weekday-font-size` (default `0.9em`)
  - `--ars-calendar-day-padding` (default `10px`)
  - `--ars-calendar-day-min-height` (default `40px`)
  - `--ars-calendar-day-hover-scale` (default `1.05`)
  - `--ars-calendar-event-badge-top` (default `4px`)
  - `--ars-calendar-event-badge-right` (default `6px`)
  - `--ars-calendar-event-badge-min-width` (default `16px`)
  - `--ars-calendar-event-badge-height` (default `16px`)
  - `--ars-calendar-event-badge-padding` (default `0 4px`)
  - `--ars-calendar-event-badge-font-size` (default `0.7em`)
  - `--ars-calendar-event-badge-line-height` (default `16px`)

### Fixed

- **`ars-calendar`: collapsed empty trailing day cells.** Months that only need
  five weeks previously reserved a blank sixth row because every `.calendar-day`
  cell kept its `min-height`. The default stylesheet now collapses truly empty
  cells (`.calendar-day:empty { min-height: 0; padding: 0; }`) so the calendar
  shrinks to fit the month's weeks. The grid's 1px gap keeps the layout stable
  when a month genuinely needs a sixth row.

## [3.0.1] - 2026-06-20

### Changed

- **Enabled `strict: true` in `tsconfig.json`.** The entire source tree now
  type-checks under TypeScript strict mode.

- **Added explicit type annotations across components and mixins.** This
  includes event-handler signatures, DOM element parameters, static base-class
  members (`observedAttributes`, `defaultAttributeValue`, `parseAttributeValue`),
  and utility helpers such as `calendar-utils.ts`.

- **Added `DOM.Iterable` to `tsconfig.json` libs** so DOM collections can be
  iterated with `for...of` under strict settings.

### Fixed

- **Eliminated strict-mode errors surfaced when consumers type-check the raw
  source.** Nexus and other workspace consumers can now enable `strict: true`
  without errors propagating from `ars-web-components` source files.

- **Guarded potentially-null `shadowRoot` and `getContext('2d')` results**
  in components and mixins that attach or query shadow roots.

## [3.0.0] - 2026-06-19

### Added

- **`registerArsWebComponents()` central custom-element registry.**
  All component and mixin tags are now registered by an explicit
  `registerArsWebComponents()` function exported from the package barrel and
  from `ars-web-components/register`. Calling it is now required before any
  `<ars-*>` tag is used in the DOM.

- **`sideEffects: false`** in `package.json` so bundlers can tree-shake
  unused component classes.

- **Regression tests** for `registerArsWebComponents()` in
  `src/register.test.ts`.

- **`ars-info-tile`: `displayValues` support for formatted property rendering.**
  The `data` object now accepts an optional `displayValues` record. When a
  property key exists in `displayValues`, the tile renders that string in
  **view mode** instead of the raw value from `properties`. **Edit mode**
  continues to use the raw value, so inline edits are persisted unchanged.
  This lets hosts (e.g. Nexus) present human-readable dates
  (`"Jun 2, 2026, 5:00 PM"`) while keeping ISO-8601 raw values for editing
  and storage.

### Changed

- **Component and mixin modules are side-effect-free.**
  Importing a component class no longer registers its custom element tag.
  This enables tree-shaking but is a breaking change for consumers that
  relied on import-time registration.

- **`initializeArsWebComponents()` no longer registers custom elements.**

### Fixed

- **Demo pages for mixins and `ars-page` now register their custom elements**
  explicitly. Pages that previously relied on import-time registration (e.g.
  draggable, swipeable, roll, localized, pressed-effect, remote-call,
  show-if-property-true, and ars-page) were updated to call
  `customElements.define(...)` after importing the class.

- **The `ars-toast` demo page was rebuilt to follow the standard demo layout**
  and showcases the full API: severity levels, positions, stacking,
  auto-dismiss duration, progress bar, non-dismissible toasts, declarative
  usage, custom mount targets, and event monitoring.
  It only applies the design adapter (CSS variables and root attributes).
  Consumers must call `registerArsWebComponents()` separately.

- **README and demo mixin examples corrected.** The previous examples showed
  mixins being invoked as factory functions (`MixinName(HTMLElement)`), which
  does not match the concrete custom-element classes shipped by the library.
  The README now explains that mixins are standalone wrapper elements or base
  classes, and shows how to register them via `registerArsWebComponents()` or
  `customElements.define(...)`. The `show-if-property-true-mixin` demo's custom
  property creation was also fixed to wrap content with the mixin element.

### Migration from 2.x

Replace:

```ts
import { initializeArsWebComponents } from "ars-web-components";
initializeArsWebComponents({ designAdapter: ... });
```

With:

```ts
import {
  initializeArsWebComponents,
  registerArsWebComponents,
} from "ars-web-components";

registerArsWebComponents();
initializeArsWebComponents({ designAdapter: ... });
```

For consumers that only need a subset of components, import the classes
and register them manually instead of calling `registerArsWebComponents()`.

## [2.3.0] - 2026-05-22

### Added

- **Shared demo infrastructure (`demos/css/demo-layout.css`, `demos/js/demo-utils.js`, `demos/template.html`)**
  - `demo-layout.css` — shared layout primitives extracted from 25 demo pages:
    `.demo-section`, `.demo-row`, `.demo-grid`, `.code-block`, `.event-log`,
    `.event-log-light`, `.controls`, `.demo-output`.
  - `demo-utils.js` — three shared helpers:
    - `initDesignSystem(mode)` — initializes components with light/dark adapter.
    - `initThemeToggles()` — wires `#theme-light` / `#theme-dark` buttons.
    - `createEventLog(logId, clearId, opts)` — returns `{ append, clear }` event-log helper.
  - `template.html` — copy-paste starter skeleton for new demo pages using all shared assets.

- **`ars-data-roller`: comprehensive test suite (2026-05-22).**
  33 tests covering data parsing (strings, title-value objects, key-value objects),
  rendering, public API (`startRolling`, `stopRolling`, `nextItem`, `setData`,
  `setInterval`, `setAnimationDuration`), attribute changes, lifecycle
  (`connectedCallback` / `disconnectedCallback`), shadow DOM structure, and
  edge cases (empty data, invalid JSON, single-item data, rapid updates,
  animation guard).  Fills the last gap in component test coverage.

- **`ars-info-tile`: collapse/expand toggle (2026-05-19).**
  New `collapsed` boolean property/attribute and `collapsible` boolean
  property/attribute (stored as `not-collapsible` so the default is
  collapsible).  When `collapsible` is true a small caret button appears
  in the header.  Clicking it fires a composed `ars-info-tile:toggle-collapse`
  event carrying the *requested* next state (`detail.collapsed`).  The tile
  does **not** self-mutate — the host owns the authoritative state and
  reflects it back via the `collapsed` property.  Double-clicking the
  button is intercepted so it does not bubble to the shadow-root
  activation listener.  Tests:
  `ars-info-tile.test.ts::Collapsibility` and `ars-info-tile.test.ts::Collapse toggle` suites.

- **`ars-info-tile`: `selected` JS property setter (2026-05-18).**
  Mirrors the existing attribute path (`setSelected` / `selected` HTML
  attribute) so host integrations can flip selection through a plain
  property assignment.  The setter delegates to `setSelected`, which
  toggles the attribute and triggers a re-render.  Tests:
  `ars-info-tile.test.ts::supports the selected property getter/setter`.

### Changed

- **`ars-info-tile`: all comments and documentation decoupled from host
  applications (2026-05-19).**
  Removed references to internal consuming apps (brainiac-engine,
  nexus-rules, Rust reconciler) from source comments, test docstrings,
  and aria-labels.  The component is now fully generic: collapse is
  described as "collapse/expand content" rather than "connected nodes";
  host ownership is described in framework-agnostic terms.

- **`ars-info-tile`: selection highlight made unmistakable (2026-05-18).**
  Replaced the prior 1 px @ 50%-alpha box-shadow ring (which read as a
  faint tint against dark surfaces) with a 3 px solid accent-coloured
  ring rendered outside the border-box, plus a full-opacity accent
  border-colour and a deeper drop shadow.  Border-width stays at 1 px
  so the interior column does not jitter when selection toggles
  (`box-sizing: border-box` would otherwise reflow content by 2 px).

## [2.1.0] - 2026-04-09

### Added

- **`ars-candlestick-chart`: indicator line overlays**
  - New `indicators` property: `{ data: number[] | Float64Array, color: string }[]`.
    Renders line overlays (e.g. moving averages) on the same canvas using the
    price scale.  Each indicator is drawn as connected line segments with 2px
    width, sharing the candle chart's price mapping.

- **`ars-candlestick-chart`: `orderStartIndex` property**
  - Limits order overlay lines to a candle region starting at the given index.
    Prevents false overlaps when orders belong to a specific generation within
    the visible data window.

- **`ars-candlestick-chart`: `dataBuffer` property (Float64Array fast path)**
  - Accepts a flat `Float64Array` with interleaved
    `[open, high, low, close, volume, time]` × N candles.
  - Zero-copy path from WASM — no JS object allocation per candle.
  - When set, takes priority over the object-based `data` property.

- **`ars-line-chart`: `dataBuffer` property (Float64Array fast path)**
  - Accepts a `Float64Array` of values.  When set, takes priority over
    the `data` property.  Zero-copy from WASM.

- **`ars-line-chart`: `slotAlign` property / `slot-align` attribute**
  - When set to `true` (or attribute `slot-align="candlestick"`), uses the
    same padding as `ars-candlestick-chart` and centers data points within
    slot columns, enabling pixel-perfect overlay alignment.

- **`ars-line-chart`: `yDomain` property**
  - Fixed `[min, max]` Y-axis range that overrides auto-scaling.  Useful for
    aligning multiple overlay charts to the same scale.

### Changed

- **`ars-candlestick-chart`: inlined price/volume extent computation**
  - Removed `priceExtent()` and `maxVolume()` helper functions.  Min/max
    values are now computed inline during the paint loop using the
    buffer-aware accessor functions (`bOpen`, `bHigh`, etc.), supporting
    both object arrays and flat `Float64Array` inputs.

- **`ars-line-chart`: inlined data extent computation**
  - Removed `dataExtent()` helper function.  Min/max values are now computed
    inline using the `val()` accessor, supporting both `number[]` and
    `Float64Array` inputs.

### Updated

- Demo pages for both chart components updated with new interactive sections
  showcasing indicators, orderStartIndex, dataBuffer, slotAlign, and yDomain.

## [2.0.0] - 2026-04-08

### Changed (BREAKING)

- **Chart rendering migrated from Canvas 2D to WebGPU**
  - `ars-line-chart` and `ars-candlestick-chart` now render entirely via
    WebGPU instanced rendering.  Each frame submits a single render pass
    with 3 draw calls (rect pipeline, line pipeline, text pipeline) instead
    of hundreds of sequential Canvas 2D method calls through the browser's
    Skia pipeline.
  - **Requires a WebGPU-capable browser** (Chrome 113+, Safari 17+,
    Firefox 141+).  There is no Canvas 2D fallback.
  - `ChartBase` no longer exposes `ensureCanvas()`, `drawBackground()`,
    `drawHorizontalGrid()`, or `drawYAxisLabels()` Canvas 2D helpers.
    Subclasses use `gpuRenderer.pushRect/pushLine/pushText` instead.
  - First `paint()` call triggers async GPU device initialization.
    Subsequent frames render synchronously from the cached device.

### Added

- **WebGPU rendering infrastructure** (`src/components/chart-base/gpu/`)
  - `ChartGPUContext` — GPUDevice lifecycle with external injection
    (for host-app integration) or lazy shared singleton (standalone).
  - `ChartGPURenderer` — orchestrates rect, line, and text pipelines.
    Provides a high-level command API: `pushRect`, `pushLine`,
    `pushDashedLine`, `pushCircle`, `pushText`.
  - `RectPipeline` — instanced filled rectangles and circles.  Circles
    use SDF anti-aliasing in the fragment shader.
  - `LinePipeline` — instanced oriented quads for lines with controllable
    width and shader-based dashing (avoids WebGPU's 1px line-list limit).
  - `TextPipeline` + `ChartGlyphAtlas` — SDF text rendering using the
    Felzenszwalb & Huttenlocher 2012 exact Euclidean distance transform.
    Preloads a fixed charset at init (digits, punctuation, letters) into
    a 512x512 r8unorm GPU texture atlas.
  - WGSL shaders: `chart-rect.wgsl`, `chart-line.wgsl`, `chart-text.wgsl`
    (inlined as string literals for bundler-independent loading).
  - `parseCssColor()` — converts CSS color strings (`#hex`, `rgb()`,
    `rgba()`, named colors) to float4 tuples for GPU uniform data.

- **`gpuDevice` property on `ChartBase`** — allows external GPUDevice
  injection so hosts can share their device with chart components,
  avoiding redundant adapter negotiation.

- **`ChartGPUContext` export from `index.ts`** — consumers can call
  `ChartGPUContext.setDevice(device)` before any chart renders to inject
  a shared GPUDevice.

- **`@webgpu/types` devDependency** — TypeScript type definitions for
  the WebGPU API.

- **WebGPU mock infrastructure in `test/setup.ts`** — mock GPUDevice,
  GPUCanvasContext, GPUBufferUsage/GPUTextureUsage/GPUShaderStage
  constants, and `navigator.gpu` for jsdom-based testing.

### Performance

| Metric | Canvas 2D (v1.1) | WebGPU (v2.0) |
|--------|-------------------|---------------|
| Draw calls per chart | ~50-200 sequential | 3 instanced |
| 120 candles + 4 indicators | ~3ms CPU | <0.1ms GPU |
| 1440-point metrics x4 | ~8ms CPU | <0.2ms GPU |
| Total per frame (15 charts) | ~15ms | <1ms |

## [1.1.0] - 2026-04-08

### Changed

- **WebComponentBase: repaint coalescing and array comparison utilities**
  - Added `scheduleRepaint()` to `WebComponentBase` — coalesces multiple
    property updates within a single animation frame into one repaint.
    Previously only available in `ChartBase`; now all components inherit it.
  - Added `arraysMatch(a, b, key?)` to `WebComponentBase` — cheap
    comparison (length + first/last element) that lets property setters
    skip redundant updates when the DOMSidebandReconciler re-sets
    identical data every frame.

- **ChartBase now extends WebComponentBase**
  - `ChartBase` inherits `scheduleRepaint()` and `arraysMatch()` from
    `WebComponentBase` instead of implementing its own copies.
  - All chart components now participate in the same base-class hierarchy
    as non-chart components.

- **Zero-copy property accessors in chart components**
  - `ars-line-chart` and `ars-candlestick-chart` property getters and
    setters no longer spread-copy arrays (`[...value]`). They store and
    return references directly, eliminating O(n) copies per property
    access.  With 15 chart components × 2-4 properties × 60fps, this
    removes ~240 array copies per second.
  - Property setters use `arraysMatch()` to skip `scheduleRepaint()`
    entirely when data hasn't changed, avoiding redundant canvas repaints.

### Performance impact

Before: every frame triggered 15 canvas repaints with full array copies,
regardless of whether data changed.
After: canvas repaints only occur when data actually changes. Property
updates are O(1) reference assignments instead of O(n) array copies.

## [1.0.0] - 2026-03-25

### Added

- **7 new foundational components:**
  - **ars-button** — Styled, accessible button with variant (primary/secondary/danger/ghost), size (sm/md/lg), disabled, and loading states. Shadow DOM with delegated focus, composed `ars-button:click` event, prefix/suffix slots.
  - **ars-toggle** — Boolean switch control with `role="switch"`, `aria-checked`, keyboard navigation (Space/Enter), label positioning, composed `ars-toggle:change` event.
  - **ars-input** — Text input with label, validation feedback (`aria-invalid`, `aria-describedby`), clearable mode, prefix/suffix slots, and composed input/change/clear events. Supports text, number, email, password, search, url, tel types.
  - **ars-toast** — Notification toast with severity levels (info/success/warning/error), auto-dismiss timers, stacking containers per position, enter/exit CSS animations, `ArsToast.show()` static API, custom mount targets, `role="alert"`, reduced-motion support.
  - **ars-tabs** / **ars-tab-panel** — Tabbed navigation with 4 placement directions (top/bottom/start/end), ARIA tablist/tab/tabpanel roles, keyboard navigation (Arrow/Home/End with wrapping), disabled tabs, dynamic panel add/remove via MutationObserver.
  - **ars-select** — Dropdown select with single/multiple selection, searchable filtering, option groups, disabled options, keyboard navigation (Arrow/Enter/Escape/Home/End), ARIA combobox semantics, error state.
  - **ars-table** — Data table with sortable columns, single/multiple row selection, striped/compact modes, virtual scrolling (windowed rendering for large datasets), auto-sort, custom cell render functions, ARIA grid roles, empty state slot.

- **Design token extensions (Section 3 of Development Plan):**
  - Semantic colors: `--arswc-color-danger`, `--arswc-color-success`, `--arswc-color-warning`, `--arswc-color-disabled`, `--arswc-color-disabled-bg`
  - Typography scale: `--arswc-font-size-sm`, `--arswc-font-size-md`, `--arswc-font-size-lg`
  - Spacing scale: `--arswc-spacing-xs` through `--arswc-spacing-xl`
  - Animation/focus: `--arswc-transition-duration`, `--arswc-focus-ring`
  - All tokens added to both light and dark default adapters with appropriate values.

- **8 new demo pages:**
  - Combined "Form Primitives" demo for ars-button and ars-toggle with live dark mode binding
  - Dedicated demos for ars-input, ars-toast, ars-tabs, ars-select, ars-table
  - ars-info-tile demo (backfill for existing component)
  - All demos follow the template (header, info box, demo sections, theme toggle, event monitor, usage)

- **Gallery index updated** with cards for all new components in both Quick Access and Components Demo grids.

- **docs/EMBEDDING.md** — Covers programmatic mount/unmount, attribute vs property data flow, event forwarding with detail reference, shell-only component caveats, and design adapter usage in iframe/shadow root contexts.

- **docs/PUBLISH_CHECKLIST.md** — Release process covering code quality, documentation, demos, and publish steps.

### Changed

- **ars-color-select redesigned** as a horizontal carousel picker:
  - Replaced fullscreen overlay grid with inline carousel strip of circular swatches in spectrum order
  - Added navigation buttons, position track indicator, keyboard navigation (Arrow/Home/End), ARIA listbox semantics
  - Custom palette support via `palette` property/attribute, swatch sizes (sm/md/lg), `visible-count`, disabled state
  - `prefers-reduced-motion` support
  - Removed arslib dependency (no longer uses `EArray.choice`)
  - Backwards compatible: `color` attribute and `ars-color-select:change` event unchanged; `previousColor` added to event detail
  - Deprecated: `toggleColorSelection()` (no-op), `setBackgroundColor()` (delegates to color setter)

### Fixed

- Fixed duplicate `vi` import in 6 mixin test files causing parse errors
- Fixed unused variable warnings in `ars-page-controller-internal.ts` and `remote-call-caller-mixin.ts`
- Fixed `tsconfig.eslint.json` to include `demos/**/*.ts` files, resolving ESLint parsing errors
- All 26 test files (681 tests) passing, 0 lint errors, clean TypeScript build

## [0.9.1] - 2026-03-10

### Changed

- Refined `ars-calendar`, removed `eval`, and hardened attribute parsing.
- Standardized tests on Vite/Vitest and cleaned up demos/docs/package exports.

## [0.9.0] - 2026-02-26

### Added

- **Design Adapter Initialization API** for explicit, design-system-agnostic setup
  - `initializeArsWebComponents(...)`
  - `ArsDesignAdapter` contract
  - `getArsWebComponentsDefaultAdapter("light" | "dark")`
- **Vite Demo Dev Workflow**
  - `npm run dev` serves demos with live reload from `src/`
  - dev-only `/dist -> /src` request rewrites for existing demo pages
- **Default Theme Templates (public)**
  - `theme-default-light.css`
  - `theme-default-dark.css`
- **README documentation for custom design-system integration**
  - `--arswc-*` variable contract
  - explicit initialization examples
  - design contract coverage section

### Changed

- **Design System Compatibility**: Components now resolve default styles through the library-level `--arswc-*` design contract (when available) before using hardcoded fallbacks.
- **Demo Styling**: Shared demo buttons/forms now follow the active design adapter and default templates.
- **Demo Test Layout**: Tests were moved to live alongside the source they cover (shared setup/mocks remain in `test/`).

### Fixed

- **Calendar Demo Theming**: Improved template switching behavior and dark-mode day-cell text visibility.
- **Dialog Demo Layouts**: Fixed multiple theme/layout regressions in `ars-dialog` demos (input, rich content, custom styled, long content, form dialog width/overflow).
- **Demo Button Consistency**: Fixed secondary actions in demos that were missing base `.btn` styling.
- **Vite Dev Badge**: Prevented false positives under `npm start` by detecting real Vite dev context.

## [0.8.0] - 2026-02-25

### Added

- **TypeScript Migration**: Entire codebase ported from JavaScript to TypeScript
  - All source files moved to `src/` directory and renamed from `.js` to `.ts`
  - Full type declarations generated via `tsc` (`.d.ts` files in `dist/`)
  - Source maps for debugging (`*.js.map` in `dist/`)
- **Build Toolchain**: Added `tsc`-based build pipeline
  - `npm run build` compiles TypeScript to `dist/`
  - `tsconfig.json` configured with ESNext target, NodeNext modules, and strict-lite settings
- **Vitest Testing**: Migrated test framework from Jest to Vitest
  - All 323 tests passing
  - `npm run test` — single run
  - `npm run test:watch` — watch mode
  - `npm run test:coverage` — coverage report
  - `vitest.config.ts` with jsdom environment and custom setup
  - `test/setup.ts` with mocks for `ResizeObserver`, `IntersectionObserver`, `matchMedia`, and `HTMLCanvasElement.getContext`
- **WebComponentBase Inheritance**: `ArsPageController`, `DemoReceiver`, and `SimpleLocalizedElement` now extend `WebComponentBase` instead of raw `HTMLElement`

### Changed

- **BREAKING — Directory Structure**: Source files moved from root to `src/` directory
  - Components: `src/components/`
  - Mixins: `src/mixins/`
  - CSS: `src/css/`
- **BREAKING — Build Output**: Compiled JavaScript now emitted to `dist/` directory
  - `package.json` `main` → `dist/index.js`
  - `package.json` `types` → `dist/index.d.ts`
- **Module System**: `package.json` `"type": "module"` with `server.js` updated to ES module imports
- **Demo Pages**: All demo `index.html` files updated with:
  - Absolute `/dist/` paths for compiled component scripts
  - Absolute `/src/css/` paths for stylesheets
  - Import maps for `arslib` browser bundle resolution
  - Correct navigation links between demos and the main gallery

### Fixed

- **Demo Navigation**: All 12 component and mixin demo links now work correctly from the main gallery page
- **Demo Interactivity**: All demos fully functional with proper script loading from the `dist/` build output

### Technical Improvements

- **Type Safety**: TypeScript compilation catches errors at build time
- **Source Maps**: Full source map support for debugging compiled output
- **Test Infrastructure**: Comprehensive mock setup for browser APIs in jsdom environment
- **`.gitignore`**: Added `dist/` to keep build artifacts out of version control

## [0.7.3] - 2025-02-24

### Added

- Added unit tests and test support

## [0.7.2] - 2025-08-04

### Added

- **Dialog Event System**: Added `dialog-activated` event to ArsDialog component
  - Dialog now emits a custom event when fully activated and rendered
  - Event includes dialog ID in detail for component identification
  - Enables reliable timing for post-render operations like scrolling
  - Bubbles through shadow DOM for easy event listening

### Changed

- **Dialog Activation**: Enhanced dialog activation process with event emission
  - Event fired after shadow DOM creation, rendering, and overlay display
  - Provides reliable signal for when dialog content is ready for manipulation
  - Supports complex dialog interactions that require precise timing

### Technical Improvements

- **Event-driven Architecture**: Better separation of concerns with event-based communication
- **Reliable Timing**: Eliminates need for arbitrary timeouts in dialog-dependent code
- **Component Integration**: Enables other components to react to dialog state changes

## [0.7.1] - 2025-07-29

- ars-page: checking nested route

## [0.7.0] - 2025-07-09

- ars-page now synchronizes with the browser's url

## [0.6.2] - 2025-07-09

- Adding input verification to ars-data-roller

## [0.6.1] - 2025-07-09

### Fixed

- **Mixin Coordination**: Fixed double-counting issue in gesture mixins

  - SwipeableMixin and DraggableMixin now properly handle redispatched events
  - Each mixin processes events exactly once, preventing duplicate event counts
  - Improved logic to distinguish between direct and redispatched events
  - Added `hasPointerCapture()` method to PointerCoordinator for better event filtering

- **Event Processing**: Enhanced event handling logic
  - Mixins that capture pointers only process direct events (not redispatched ones)
  - Mixins that don't capture pointers only process redispatched events
  - Prevents infinite loops and double processing
  - Maintains proper coordination regardless of mixin order (parent/child)

### Technical Improvements

- **PointerCoordinator**: Added `hasPointerCapture(element, pointerId)` method
- **Event Filtering**: Improved logic to prevent mixins from processing their own redispatched events
- **Order Independence**: Coordination system now works regardless of mixin nesting order
- **Demo Enhancement**: Added reversed order coordination demo to test mixin order flexibility

## [0.6.0] - 2025-07-09

### Added

- **New DraggableMixin**: Complete drag gesture detection system with customizable thresholds

  - Drag start, move, and end events with detailed coordinate data
  - Direction detection (left, right, up, down) with distance tracking
  - Configurable drag threshold via `drag-threshold` attribute
  - Real-time drag feedback with `dragmove` events
  - Comprehensive demo page with interactive examples

- **New PointerCoordinator**: Shared coordination system for multiple mixins

  - Prevents conflicts when multiple mixins try to capture the same pointer
  - Event redispatching system to prevent infinite loops
  - Smart scroll prevention that only activates during active gestures
  - Early gesture detection for responsive touch interactions
  - Debug tools and status monitoring for development

- **Enhanced SwipeableMixin**: Refactored to use PointerCoordinator

  - Removed built-in drag functionality (now separate DraggableMixin)
  - Improved coordination with other mixins
  - Better mobile scroll prevention during swipe gestures
  - Maintains all existing swipe functionality

- **Mobile Scroll Prevention**: Intelligent scroll management
  - Only prevents scrolling when gestures are actively being processed
  - Allows normal page scrolling when not interacting with mixins
  - Threshold-based prevention (prevents only when gesture meets minimum distance)
  - Automatic cleanup when gestures end
  - Works seamlessly with multiple mixins on the same element

### Changed

- **BREAKING**: SwipeableMixin no longer includes drag functionality

  - Drag events moved to new DraggableMixin
  - SwipeableMixin now focuses purely on swipe detection
  - Both mixins can be used together on the same element

- **Enhanced Mixin Coordination**: All gesture mixins now use PointerCoordinator
  - Prevents conflicts between multiple gesture mixins
  - Shared pointer capture management
  - Event redispatching prevents infinite loops
  - Better performance and reliability

### Technical Improvements

- **Pointer Event Management**: Robust pointer capture and release system
- **Event Loop Prevention**: Smart redispatching with event marking
- **Mobile UX**: Natural scrolling behavior with intelligent gesture detection
- **Debug Support**: Comprehensive logging and status monitoring
- **Performance**: Optimized event handling with minimal overhead

## [0.5.0] - 2025-07-07

- Added new ars-data-roller component
- Removed a checking with mapping from web-component-base that was
  causing recursion.

## [0.4.10] - 2025-07-07

- Fixed remote-call-mixin and roll-mixin demos layout on mobile

## [0.4.9] - 2025-07-07

- Fixed ars-page and localized demos layout on mobile

## [0.4.8] - 2025-07-06

- Fixed ars-calendar footer layout on mobile

## [0.4.7] - 2025-07-06

- Fixed remote call mixin on mobile

## [0.4.6] - 2025-07-05

- Fixed swipeable on mobile

## [0.4.5] - 2025-07-03

- fixed index.js paths

## [0.4.4] - 2025-07-03

- fixed link to demo

## [0.4.3] - 2025-07-03

- Added live demo link to README.md

## [0.4.2] - 2025-07-03

- Removed reference to removed component

## [0.4.1] - 2025-07-03

- Moving components to its own dir

## [0.4.0] - 2025-07-03

### Added

- **New Roll Mixin**: Added `RollMixin` for adding roll animation effects to components
- **Enhanced Demo System**: Comprehensive demo pages for all mixins with interactive examples
- **Mixin Base Utility**: New `mixin-base.js` common utility for shared mixin functionality
- **ArsPage Debug Tools**: New debug and test pages for ars-page components (`debug.html`, `minimal-test.html`, `test.html`)
- **ArsCalendar Documentation**: Added comprehensive README.md for the calendar component
- **Stop Script**: Added `npm run stop` command to kill the development server
- **Enhanced Remote Call Demo**: New comprehensive demo with multiple sections and real-time logging

### Changed

- **BREAKING**: Complete mixin directory restructuring - all mixins moved to `-mixin` suffix directories
  - `mixins/localized/` → `mixins/localized-mixin/`
  - `mixins/pressed-effect/` → `mixins/pressed-effect-mixin/`
  - `mixins/remote-call/` → `mixins/remote-call-mixin/`
  - `mixins/show-if-property-true/` → `mixins/show-if-property-true-mixin/`
  - `mixins/swipeable/` → `mixins/swipeable-mixin/`
- **BREAKING**: Removed `ArsButton` component entirely (component and demo files deleted)
- **Enhanced Mixin Architecture**: All mixins refactored with improved structure and better demo integration
- **Improved Demo Experience**: All mixin demos now feature comprehensive examples with better UI/UX

### Removed

- **ArsButton Component**: Complete removal of button component and related files
- **Legacy Mixin Directories**: All old mixin directories and files removed
- **VSCode Launch Configuration**: Removed development-specific launch.json file

### Technical Improvements

- **Better Organization**: Consistent naming convention with `-mixin` suffix for all mixin directories
- **Enhanced Demos**: Interactive demos with real-time feedback and comprehensive examples
- **Improved Maintainability**: Better separation of concerns and cleaner architecture

## [0.3.5] - 2025-06-30

### Changed

- **Remote Call System**: Now uses only component IDs for all remote method calls. The `remote-call-id` attribute is no longer required or supported.
- **Mixins Simplified**: `RemoteCallCallerMixin` and `RemoteCallReceiverMixin` have been refactored to remove all `remote-call-id` and timeout logic. Communication is now strictly ID-based.
- **API Consistency**: All related demos and documentation updated to use the new ID-based API for remote calls.

### Added

- **Assertions**: Components using remote call mixins now assert that they have a valid `id` attribute at runtime, improving reliability and developer feedback.

### Removed

- **Legacy Code**: All code and documentation related to `remote-call-id`, promise-based remote calls, and unnecessary lifecycle/attribute handling have been removed for clarity and simplicity.

## [0.3.4] - 2025-06-29

### Fixed

- **Missing Component Exports**: Added `ArsPage` and `ArsPageController` exports to the main index.js file, making them available for import in applications using the library.
- **Router Integration**: Fixed issue where ars-page and ars-page-controller components were not accessible when imported from the main library entry point.

### Added

- **Component Exports**: `ArsPage` and `ArsPageController` are now properly exported from the main library index.js file.
- **Enhanced Router Support**: Better integration support for applications using the ars-page components for client-side routing.

## [0.3.3] - 2025-06-29

### Changed

- **Remote Call API Modernization**: All remote call events now use `remote-call-result` with a `result` property for responses, replacing the old `remote-call-response`/`data` pattern.
- **Auto-generated callId**: Each remote call now uses a unique, auto-generated callId, preventing collisions and supporting concurrent calls.
- **Robust Navigation**: Navigation components now update reliably after page changes, with improved event bubbling and promise resolution.
- **Event Handling**: All event dispatching and listening is now consistent and robust across shadow DOM and document scopes.

### Fixed

- **Timeouts and UI Sync**: Fixed remote call timeouts and UI sync issues by ensuring correct event propagation and callId usage.

## [0.3.2] - 2025-06-29

### Added

- **Modern Color Palette UI**: Color blocks are now displayed in a responsive grid with borders, shadows, and animated hover effects.
- **Dismiss on Overlay Click**: The color palette overlay can be dismissed by clicking outside the color blocks.
- **Event-driven Integration**: Demo and documentation now show how to update UI text in response to color changes using the `ars-color-select:change` event.

### Changed

- **Improved Accessibility and Usability**: Larger, touch-friendly color blocks with reduced spacing and better alignment.
- **Demo Page**: Updated to show best practices for integrating the color picker and updating UI on color change.

## [0.3.1] - 2025-06-29

### Added

- Minimal, intent-revealing demo for Show If Property True Mixin: each property toggle controls a single bar/button.
- `keep-space-when-hidden` attribute: allows elements to remain in the layout (using `visibility: hidden`) when hidden.
- Improved documentation and usage examples for the mixin.

### Changed

- Demo refactored for clarity and simplicity.

## [0.3.0] - 2025-06-27

### Added

- **Functional Programming Architecture**: Refactored all components and mixins to use pure functions and functional programming principles
- **Private Static Methods**: Encapsulated utility functions as private static methods (`static #methodName`) for better organization
- **Private Instance Methods**: Converted underscore-prefixed methods to proper private methods (`#methodName`) for better encapsulation
- **Enhanced Testability**: Extracted pure utility functions that can be tested independently
- **Improved Maintainability**: Better separation of concerns with functional utility functions
- **Zero Breaking Changes**: All refactoring maintains complete API compatibility

### Changed

- **Component Architecture**: All components now use functional utility functions while maintaining class structure required by Custom Elements API
- **Method Encapsulation**:
  - Public static methods: Only methods meant to be called from outside the class
  - Private static methods: Internal utility functions and helpers
  - Private instance methods: Internal component logic using `#` prefix
- **Import/Export System**: Fixed all ES module imports to use named exports instead of default exports
- **Demo Error Handling**: Added comprehensive error handling to all demo pages to prevent undefined function errors
- **Console Cleanup**: Removed debug console.log statements from demo pages for cleaner development experience

### Fixed

- **Import Errors**: Fixed all mixin import statements to use proper named exports
- **Undefined Function Errors**: Added error handling to onclick handlers in demo pages
- **Module Compatibility**: Ensured all components work properly with ES modules in browser environment
- **Demo Functionality**: Fixed all demo pages to work without Node.js dependencies
- **Remote Call Mixin**: Added missing `_callRemote` method and fixed event handling system
- **Browser Compatibility**: Removed Node.js-specific code and dependencies

### Technical Improvements

- **Functional Refactoring**: Extracted pure functions for better testability and reusability
- **Method Organization**: Clear distinction between public API and internal implementation
- **Code Quality**: Improved maintainability through better function organization
- **Development Experience**: Cleaner console output and better error handling in demos

## [0.2.4] - 2025-06-27

### Changed

- **README**: Improved demo access instructions with clear setup steps using `npm start` command
- **README**: Replaced non-functional GitHub Pages link with practical clone-and-run instructions
- **Documentation**: Enhanced user experience for accessing the interactive demo without complex setup

### Added

- **README**: Added prominent "Live Demo" section with quick start instructions
- **README**: Comprehensive mixins documentation with usage examples and demo links
- **README**: Updated available exports section to include all mixin exports

### Fixed

- **Demo Access**: Resolved issue where users couldn't view demo due to ES module requirements
- **Documentation**: Fixed demo link that pointed to non-existent GitHub Pages setup

## [0.2.3] - 2025-06-27

### Fixed

- **PressedEffect Mixin Demo**: Fixed pressed effect animation issues where only one button showed the effect. Replaced gradient backgrounds with solid colors and simplified color detection logic for better compatibility.
- **Localized Mixin Demo**: Completely refactored demo to use actual Localized mixin instead of custom localization system. Created custom elements extending Localized mixin with mock localization system for dynamic language switching.
- **RemoteCall Mixin Demo**: Replaced placeholder demo with comprehensive interactive demo featuring caller and receiver components, method calls, error handling, and real-time logging. Fixed event listener issues and implemented component ID-based targeting system.

### Added

- **PressedEffect Demo**: Added debugging logs to verify event listeners and animation triggers, confirming proper functionality.
- **Localized Demo**: Implemented mock localization system with dynamic language switching, custom elements extending Localized mixin, and proper event handling.
- **RemoteCall Demo**: Created full-featured demo with:
  - Interactive caller and receiver components
  - Method call functionality with parameter passing
  - Error handling and validation
  - Real-time logging system
  - Component ID-based targeting (allowing multiple instances)
  - Color-coded UI for better user experience
  - Individual and simultaneous method calling capabilities
- **Enhanced Demo Architecture**: Improved demo structure with better error handling, lifecycle management, and user feedback systems.

### Technical Changes

- **PressedEffect**: Enhanced color detection to work with solid background colors instead of gradients
- **Localized**: Implemented proper mixin inheritance and mock localization system
- **RemoteCall**: Switched from tag name-based to component ID-based event targeting for better component isolation
- **Demo Infrastructure**: Added comprehensive debugging and logging systems across all mixin demos

## [0.2.2] - 2025-06-27

### Fixed

- **Dialog**: Fixed styling for form elements (`input`, `select`, `textarea`) inside dialogs, even when content is injected as light DOM HTML.
- **Dialog**: Prevented content overflow in dialog area with improved box-sizing and max-width rules.

### Added

- **Dialog**: Automatic injection of form element CSS into dialog content for light DOM HTML, ensuring consistent appearance.
- **Dialog**: Enhanced documentation for dialog theming, CSS variables, and light DOM styling system.

### Technical Changes

- Dialog component now injects a `<style>` tag with form element CSS into the `.content` area after rendering, so form fields are always styled.
- Updated dialog CSS to use `box-sizing: border-box` and `max-width: 100%` for containers.
- Updated README.md to document dialog styling and theming system.

## [0.2.1] - 2025-06-26

### Added

- **New**: Built-in CSS and HTML template integration for ArsCalendar
- **New**: Comprehensive CSS customization system with CSS variables support
- **New**: `custom-css` attribute for adding custom styles to calendar
- **New**: `css-vars` attribute for JSON-based CSS variable theming
- **New**: `setCustomTemplate()` method for complete HTML template override
- **New**: `setCSSVars()` and `getCSSVars()` methods for programmatic theming
- **New**: Three preset themes in test suite: Dark, Blue, and Green
- Enhanced calendar test page with live theme switching demonstration

### Changed

- ArsCalendar now includes default CSS styles directly in the component
- Removed dependency on external CSS and HTML template files
- Improved component self-containment while maintaining customization flexibility
- Updated component architecture to support both default and custom styling

### Fixed

- Enhanced template rendering with better error handling
- Improved CSS variable application and inheritance
- Fixed calendar cell selection styling with proper class management

### Technical Changes

- Default CSS uses CSS custom properties for easy theming
- Template function now supports dynamic content injection
- Better separation of concerns between default and custom styling
- Improved component modularity and reusability

## [0.2.0] - 2025-06-26

### Added

- **New**: Professional test suite interface with comprehensive component overview
- **New**: `npm start` script using http-server for instant development setup
- **New**: Beautiful landing page (index.html) linking all component tests
- Direct script import support for loading components without ES module imports
- Enhanced README.md with comprehensive documentation and usage examples
- Better component integration examples for real-world applications
- Co-development setup documentation with symlink instructions

### Changed

- **BREAKING**: ArsButton component is now purely CSS-agnostic (no inline styling)
- Removed `base-color` attribute from ArsButton to separate functionality from styling
- Added `effect-color` attribute for pressed effect animations
- Improved component architecture to work better with external CSS frameworks

### Fixed

- **Critical**: Fixed `setTimeout` parameter order bug in PressedEffect mixin
- Fixed constructor call order in both ArsButton and PressedEffect classes
- Enhanced color parsing in PressedEffect to handle hex, rgb, and rgba formats
- Added fallback color handling when background color detection fails
- Fixed component registration issues in complex application environments

### Technical Changes

- Components now work seamlessly with both ES module imports and direct script loading
- Improved symlink support for co-development scenarios
- Better integration with import maps in modern web applications
- Enhanced cross-project compatibility

## [0.1.0] - Initial Release

### Added

- ArsButton component with custom events and pressed effects
- ArsCalendar interactive calendar component
- ArsDialog modal component
- ArsColorSelect color picker component
- WebComponentBase foundation class
- Multiple mixins: Localized, PressedEffect, RemoteCallCallerMixin, etc.
- Basic ES module support
- Initial test pages for all components