@mhmo91/schmancy 0.10.14 → 0.10.16

package/dist/skills/schmancy/form.md

@@ -1,49 +1,145 @@
 # schmancy-form
 
-> Form container that collects data from child controls, validates, and emits submit/reset events.
+> Form container with isolated submit state, typed schema seam, and a unified validation UX contract every field implements.
 
 ## Usage
+
 ```html
-<schmancy-form @submit=${(e) => handleSubmit(e.detail)}>
+<schmancy-form @submit=${(e) => handleSubmit(e.detail.data)}>
   <schmancy-input name="email" label="Email" required></schmancy-input>
   <schmancy-button type="submit">Submit</schmancy-button>
 </schmancy-form>
 ```
 
+The submit detail is `{ data, formData, until }`:
+
+```ts
+type SchmancyFormSubmitDetail<T = Record<string, FormDataEntryValue>> = {
+  data: T                                  // typed when `schema` is set
+  formData: FormData                       // raw payload
+  until(p: Promise<unknown>): void         // gate success/error on async outcome
+}
+```
+
 ## Properties
+
 | Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| novalidate | boolean | `false` | Skip validation on submit |
+|---|---|---|---|
+| `schema` | `ParseSchema` (zod / valibot / ArkType compatible) | — | When set, parses raw FormData on submit; `e.detail.data` is typed `z.infer<TSchema>`. |
+| `novalidate` | `boolean` | `true` | Skip native browser validation popups (we control display). |
 
 ## Events
+
 | Event | Detail | Description |
-|-------|--------|-------------|
-| submit | FormData | Form data from all child controls |
-| reset | - | When the form is reset |
+|---|---|---|
+| `submit` | `SchmancyFormSubmitDetail` | Fired after all registered fields pass validation. |
+| `reset` | `CustomEvent` | Fired after the form resets. |
 
 ## Methods
+
 | Method | Returns | Description |
-|--------|---------|-------------|
-| submit() | boolean | Validates and dispatches submit event. Returns false if invalid. |
-| reset() | void | Resets all child controls to default values |
-| getFormData() | FormData | Collects current form data without submitting |
-| reportValidity() | boolean | Checks and shows validation on all controls |
+|---|---|---|
+| `submit()` | `boolean` | Programmatic submission via the inner form's `requestSubmit()`. |
+| `reset()` | `void` | Resets every registered field. |
+| `setFieldError(name, message)` | `boolean` | RHF `setError(name, ...)`-equivalent: maps a server-side error to a specific field. |
+| `setFormError(message, code?)` | `void` | RHF `setError('root.serverError', ...)`-equivalent: structured form-level error. |
+| `getFormData()` | `FormData` | Snapshot of the registered fields' contributed entries. |
+| `reportValidity()` | `boolean` | Checks every registered field. |
+| `checkValidity()` | `boolean` | Same as `reportValidity` without the side effect. |
+
+## Validation UX (binding contract)
+
+Every field that extends `SchmancyFormField()` implements four phases:
+
+| Phase | Trigger | Behaviour |
+|---|---|---|
+| 1 — Pristine | User hasn't changed the field | **No error shown**, ever. `dirty = false` is the gate. |
+| 2 — Dirty | User typed something then blurred | Validate. **Show error only if invalid.** |
+| 3 — Live correction | User returns to a field with an error | Re-validate on every keystroke. Error clears immediately when valid. |
+| 4 — Submit | User clicks submit | Force-validate **all** fields regardless of `dirty`. Focus the first invalid field. |
+
+The default mode is `validateOn="dirty"`. Override per-field for special cases:
+
+```html
+<schmancy-input validateOn="always" ...></schmancy-input>      <!-- live search -->
+<schmancy-input validateOn="submitted" ...></schmancy-input>   <!-- wizard step -->
+```
+
+After a submit attempt, the field stays in live-correction mode (Phase 3) for the rest of the session — `resetForm()` is the only way back.
+
+## Server-side errors
+
+```ts
+async _onSubmit(e: CustomEvent<SchmancyFormSubmitDetail>) {
+  const form = e.target as SchmancyForm
+  e.detail.until(
+    chargeCard(e.detail.data).catch(err => {
+      if (err.code === 'CARD_DECLINED') {
+        form.setFieldError('card', 'Card declined — check the number')
+      } else {
+        form.setFormError(err.message)
+      }
+      throw err   // re-throw so submit-state flips to 'error'
+    }),
+  )
+}
+```
+
+## CSS state hooks (free)
+
+Every field broadcasts these via `:state(...)`:
+
+```css
+schmancy-input:state(invalid)   { --border-color: var(--color-error); }
+schmancy-input:state(dirty)     { --border-color: var(--color-primary); }
+schmancy-input:state(touched)   { /* user blurred at least once */ }
+schmancy-input:state(submitted) { /* post-submit state */ }
+schmancy-input:state(required)  { /* required visual */ }
+
+schmancy-button[type=submit]:state(submitting) { opacity: 0.6; }   /* form busy */
+```
+
+The `<schmancy-form>` host gets `aria-busy="true"` while submitting (WCAG 2.2 AA — disabled submit buttons drop from tab order; we keep them focusable and signal busy via aria).
+
+## Field-author contract
+
+Components that extend `SchmancyFormField()` get FACE wiring, ARIA reflection (`internals.ariaInvalid` / `ariaRequired`), the validation UX state (`touched/dirty/submitted/validateOn`), the `_shouldShowError()` gate, the form-registry composed event (`FIELD_CONNECT_EVENT`), and reset/disabled propagation — all for free.
+
+The component author must wire only two things:
+
+```ts
+// 1. Call markTouched() on blur — tells the mixin the user has left the field
+this.input.addEventListener('blur', () => this.markTouched())
+
+// 2. Call emitChange() when value changes
+this.value = newValue
+this.emitChange({ value: newValue })
+```
+
+Override only when validity semantics differ (checkbox uses `checked`, switch uses `checked`, date-range uses `dateFrom`/`dateTo`) or when FormData contribution is multi-entry (date-range emits `${name}From` and `${name}To`).
+
+## Submit triggers
+
+`<schmancy-form>` listens on its host for `click` on `<button type=submit>` / `<schmancy-button type=submit>` and `keydown.Enter` on registered fields, then calls the inner shadow-DOM form's `requestSubmit()`. This bridges the gap that native form-association cannot cross from light-DOM slotted children to a shadow-DOM `<form>`.
 
 ## Examples
+
 ```html
-<!-- Form with validation -->
-<schmancy-form @submit=${(e) => save(e.detail)} @reset=${() => clearForm()}>
-  <schmancy-input name="name" label="Name" required></schmancy-input>
-  <schmancy-select name="role" label="Role" required>
-    <schmancy-option value="admin" label="Admin"></schmancy-option>
-    <schmancy-option value="user" label="User"></schmancy-option>
-  </schmancy-select>
-  <schmancy-checkbox name="active" label="Active"></schmancy-checkbox>
-  <div class="flex gap-2">
-    <schmancy-button type="submit">Save</schmancy-button>
-    <schmancy-button type="reset">Reset</schmancy-button>
-  </div>
+<!-- Two independent checkout forms — each <schmancy-form> instance has its own
+     isolated submit state via <schmancy-context>; no cross-contamination. -->
+<schmancy-form @submit=${(e) => pay('primary', e)}>
+  <schmancy-input name="card" required></schmancy-input>
+  <schmancy-button type="submit">Pay £50</schmancy-button>
+</schmancy-form>
+
+<schmancy-form @submit=${(e) => pay('backup', e)}>
+  <schmancy-input name="card" required></schmancy-input>
+  <schmancy-button type="submit">Pay £50</schmancy-button>
 </schmancy-form>
 ```
 
-Submit triggers on Enter key in inputs or clicking a submit-type button.
+## See also
+
+- `form-ux-rules.md` — the Revolute UX contract → mixin API mapping.
+- `mixins.md` — `SchmancyFormField()` factory composition.
+- `state.md` — `formSubmitState` + `<schmancy-context>` isolation pattern.

package/dist/skills/schmancy/input.md

@@ -22,7 +22,10 @@
 | validationMessage | string | `''` | Custom validation message |
 | hint | string | `undefined` | Hint text below the field |
 | size | `'xxs'\|'xs'\|'sm'\|'md'\|'lg'` | `'md'` | Input height (24-56px) |
-| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'touched'` | When to show validation |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When to display validation errors. Default suppresses errors on pristine fields until submit. |
+| touched | boolean (read-only) | `false` | True after first blur — set by `markTouched()`. |
+| dirty | boolean (getter) | — | True when `value` differs from the captured default. |
+| submitted | boolean (read-only) | `false` | Set by `<schmancy-form>` on submit; flips field to live-correction mode. |
 | align | `'left'\|'center'\|'right'` | `'left'` | Text alignment |
 | pattern | string | `undefined` | Regex validation pattern |
 | inputmode | string | `undefined` | Virtual keyboard hint |
@@ -34,9 +37,21 @@
 ## Events
 | Event | Detail | Description |
 |-------|--------|-------------|
-| input | `{ value: string }` | Every keystroke |
-| change | `{ value: string }` | On blur/native change |
-| enter | `{ value: string }` | When Enter key is pressed |
+| input | `{ value: string }` | Every keystroke (bubbles, composed) |
+| change | `{ value: string }` | On blur/native change (bubbles, composed) |
+| enter | `{ value: string }` | Enter key pressed |
+| focus / blur | — | Standard focus events |
+
+## Public API (from `SchmancyFormField`)
+- `markTouched()` / `markSubmitted()` — flip the `_shouldShowError()` gate.
+- `checkValidity()` / `reportValidity()` — return current validity (used by `<schmancy-form>` and native `<form>`).
+- `setCustomValidity(message)` — server-side error path. `<schmancy-form>` calls this from `setFieldError(name, msg)`.
+- `resetForm()` — restores the captured default; clears `error`, `touched`, `submitted`.
+- `internals.ariaInvalid` / `ariaRequired` — set automatically; reaches AT through shadow DOM.
+
+`<schmancy-form>` auto-discovers this field via `FIELD_CONNECT_EVENT` (composed event). No registration needed.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.
 
 ## Examples
 ```html

package/dist/skills/schmancy/range.md

@@ -20,9 +20,15 @@
 | `min` | number | `0` | Minimum value |
 | `max` | number | `1` | Maximum value |
 | `step` | number | `0.01` | Increment per tick |
-| `value` | number | `0` | Current value |
+| `value` | number | `0` | Current value (narrowed override of the mixin's wide union). |
 | `label` | string | — | Optional label (current value displays on the right) |
 | `disabled` | boolean | `false` | Disabled state (38% opacity) |
+| `name` | string | `''` | Form submission name. From `SchmancyFormField`. |
+| `required` | boolean | `false` | Field must have a value to validate. |
+| `validateOn` | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When errors display. |
+| `validationMessage` | string | `''` | Error message. |
+| `hint` | string | `undefined` | Helper text. |
+| `touched / dirty / submitted` | boolean | — | Validation state from `SchmancyFormField`. |
 
 ## Events
 | Event | Payload | When |
@@ -34,6 +40,14 @@
 - Circular thumb with hover halo (8px primary glow at 12% opacity).
 - Disabled state: 38% opacity, not-allowed cursor.
 
+## Form-field contract
+
+Extends `SchmancyFormField()`. FormData contributes `String(value)` under `name`. `markTouched()` fires on every input event (slider drag), so the field transitions to `touched` immediately on interaction — the `dirty` gate opens once value diverges from the captured default.
+
+Auto-discovered by `<schmancy-form>` via `FIELD_CONNECT_EVENT`. Public API: `markTouched()`, `markSubmitted()`, `checkValidity()`, `setCustomValidity()`, `resetForm()`.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.
+
 ## Example — precise float control
 ```html
 <schmancy-range

package/dist/skills/schmancy/select.md

@@ -23,7 +23,11 @@
 | multi | boolean | `false` | Enable multi-select mode |
 | hint | string | `''` | Hint text below the select |
 | size | `'xxs'\|'xs'\|'sm'\|'md'\|'lg'` | `'md'` | Input height |
-| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'touched'` | When to show validation |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Error message — set by `setCustomValidity()` or `<schmancy-form>.setFieldError()`. |
+| error | boolean (read-only) | — | True when invalid AND `_shouldShowError()` gate is open. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
+| readonly | boolean | `false` | Read-only mode. |
 
 ## Events
 | Event | Detail | Description |
@@ -47,3 +51,11 @@
 ```
 
 Children must be `<schmancy-option>` elements with `value` and `label` attributes.
+
+## Form-field contract
+
+Extends `SchmancyFormField()` — auto-discovered by `<schmancy-form>` via `FIELD_CONNECT_EVENT`. Exposes `markTouched()`, `markSubmitted()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `resetForm()`. Multi-select serializes to a comma-joined string for native FormData; `toFormEntries()` emits one `[name, value]` per selection for `<schmancy-form>` consumers.
+
+ARIA combobox attributes (`role="combobox"`, `aria-expanded`, `aria-controls`) plus `aria-invalid` / `aria-required` reflect through `ElementInternals` — target via `:state(invalid)` / `:state(required)` in CSS, not host `[aria-*]` selectors.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.

package/dist/skills/schmancy/state.md

@@ -493,3 +493,8 @@ the element — useful when only one or two namespaces need scoping.
   later moves into a different `<schmancy-context>` subtree, the
   cached reference lags. Read inline (`cart.value`, `cart.$`) instead
   of caching.
+- **NO_DUPLICATE_FIELD_ACROSS_STATES.** Two `state(...)` declarations
+  do not carry the same field; the second declaration is removed and
+  consumers read the first. *Remediation:* delete the second
+  `state(...)` and replace its readers with reads of the field on the
+  pre-existing state.

package/dist/skills/schmancy/switch.md

@@ -17,6 +17,11 @@
 | label | string | `''` | ARIA label on the inner button; also used by axe. |
 | required | boolean | `false` | Must be on for form validity. |
 | disabled | boolean | `false` | Disables interaction. |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Error text — default `'This switch is required.'` when required and off. |
+| error | boolean | `false` | Error state (gated by `validateOn`). |
+| hint | string | `undefined` | Helper text. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
 
 ## Events
 | Event | Detail | Description |
@@ -32,10 +37,24 @@
 ## States
 | State | When |
 |-------|------|
-| `:state(checked)` | While the switch is on. Target via `schmancy-switch:state(checked) { … }`. |
+| `:state(checked)`   | switch is on |
+| `:state(touched)`   | user has blurred the host at least once |
+| `:state(dirty)`     | `checked` differs from initial |
+| `:state(submitted)` | parent `<schmancy-form>` has submitted |
+| `:state(invalid)`   | error flag is set (gated by `validateOn`) |
+| `:state(required)`  | required and not disabled |
+| `:state(disabled)`  | disabled |
 
 ## Form association
-Uses `ElementInternals` — participates in `<form>` submission natively. Contributes `name=value` when checked; omitted when unchecked. `formResetCallback` restores the initial `checked` attribute. `formDisabledCallback` propagates `<fieldset disabled>`.
+Extends `SchmancyFormField()` — participates in `<form>` submission natively. FormData contributes `name=value` when checked; omitted when unchecked.
+
+`dirty` is overridden to mean "`checked` diverged from the snapshot taken at first render," not the mixin's value-vs-default. Under default `validateOn: 'dirty'`, an empty-required switch only shows an error after the user toggles it (or submit forces validation), but `internals.checkValidity()` already reports `false` so `<form>.checkValidity()` is correct.
+
+`resetForm()` restores the snapshot taken in `firstUpdated` (the pre-render `checked` value). `formDisabledCallback` propagates `<fieldset disabled>`. ARIA `aria-invalid` / `aria-required` reflect through `ElementInternals`.
+
+Public API: `markTouched()`, `markSubmitted()`, `checkValidity()`, `setCustomValidity()`, `resetForm()`. Auto-discovered by `<schmancy-form>` via `FIELD_CONNECT_EVENT`.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.
 
 ## Examples
 ```html

package/dist/skills/schmancy/textarea.md

@@ -28,6 +28,11 @@
 | resize | `'none'\|'vertical'\|'horizontal'\|'both'` | `'vertical'` | Resize handle |
 | align | `'left'\|'center'\|'right'` | `'left'` | Text alignment |
 | wrap | `'hard'\|'soft'` | `'soft'` | Text wrapping mode |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Custom error message. Set via `setCustomValidity()` or by `<schmancy-form>.setFieldError()`. |
+| spellcheck | boolean | `false` | Native spellcheck attribute. |
+| dirname | string | `undefined` | Native dirname for RTL form submission. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
 
 ## Events
 | Event | Detail | Description |
@@ -46,3 +51,11 @@
 <!-- Fill container -->
 <schmancy-textarea fillHeight label="Content"></schmancy-textarea>
 ```
+
+## Form-field contract
+
+Extends `SchmancyFormField()` — `markTouched()`, `markSubmitted()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `resetForm()` all available; `internals.ariaInvalid` / `ariaRequired` set automatically; `<schmancy-form>` auto-discovers via `FIELD_CONNECT_EVENT`.
+
+Validation message renders in the same supporting slot as `hint`, with `role="alert"` set when `error` is true so AT announces the change.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.

package/dist/skills/select.md

@@ -23,7 +23,11 @@
 | multi | boolean | `false` | Enable multi-select mode |
 | hint | string | `''` | Hint text below the select |
 | size | `'xxs'\|'xs'\|'sm'\|'md'\|'lg'` | `'md'` | Input height |
-| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'touched'` | When to show validation |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Error message — set by `setCustomValidity()` or `<schmancy-form>.setFieldError()`. |
+| error | boolean (read-only) | — | True when invalid AND `_shouldShowError()` gate is open. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
+| readonly | boolean | `false` | Read-only mode. |
 
 ## Events
 | Event | Detail | Description |
@@ -47,3 +51,11 @@
 ```
 
 Children must be `<schmancy-option>` elements with `value` and `label` attributes.
+
+## Form-field contract
+
+Extends `SchmancyFormField()` — auto-discovered by `<schmancy-form>` via `FIELD_CONNECT_EVENT`. Exposes `markTouched()`, `markSubmitted()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `resetForm()`. Multi-select serializes to a comma-joined string for native FormData; `toFormEntries()` emits one `[name, value]` per selection for `<schmancy-form>` consumers.
+
+ARIA combobox attributes (`role="combobox"`, `aria-expanded`, `aria-controls`) plus `aria-invalid` / `aria-required` reflect through `ElementInternals` — target via `:state(invalid)` / `:state(required)` in CSS, not host `[aria-*]` selectors.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.

package/dist/skills/state.md

@@ -493,3 +493,8 @@ the element — useful when only one or two namespaces need scoping.
   later moves into a different `<schmancy-context>` subtree, the
   cached reference lags. Read inline (`cart.value`, `cart.$`) instead
   of caching.
+- **NO_DUPLICATE_FIELD_ACROSS_STATES.** Two `state(...)` declarations
+  do not carry the same field; the second declaration is removed and
+  consumers read the first. *Remediation:* delete the second
+  `state(...)` and replace its readers with reads of the field on the
+  pre-existing state.

package/dist/skills/switch.md

@@ -17,6 +17,11 @@
 | label | string | `''` | ARIA label on the inner button; also used by axe. |
 | required | boolean | `false` | Must be on for form validity. |
 | disabled | boolean | `false` | Disables interaction. |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Error text — default `'This switch is required.'` when required and off. |
+| error | boolean | `false` | Error state (gated by `validateOn`). |
+| hint | string | `undefined` | Helper text. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
 
 ## Events
 | Event | Detail | Description |
@@ -32,10 +37,24 @@
 ## States
 | State | When |
 |-------|------|
-| `:state(checked)` | While the switch is on. Target via `schmancy-switch:state(checked) { … }`. |
+| `:state(checked)`   | switch is on |
+| `:state(touched)`   | user has blurred the host at least once |
+| `:state(dirty)`     | `checked` differs from initial |
+| `:state(submitted)` | parent `<schmancy-form>` has submitted |
+| `:state(invalid)`   | error flag is set (gated by `validateOn`) |
+| `:state(required)`  | required and not disabled |
+| `:state(disabled)`  | disabled |
 
 ## Form association
-Uses `ElementInternals` — participates in `<form>` submission natively. Contributes `name=value` when checked; omitted when unchecked. `formResetCallback` restores the initial `checked` attribute. `formDisabledCallback` propagates `<fieldset disabled>`.
+Extends `SchmancyFormField()` — participates in `<form>` submission natively. FormData contributes `name=value` when checked; omitted when unchecked.
+
+`dirty` is overridden to mean "`checked` diverged from the snapshot taken at first render," not the mixin's value-vs-default. Under default `validateOn: 'dirty'`, an empty-required switch only shows an error after the user toggles it (or submit forces validation), but `internals.checkValidity()` already reports `false` so `<form>.checkValidity()` is correct.
+
+`resetForm()` restores the snapshot taken in `firstUpdated` (the pre-render `checked` value). `formDisabledCallback` propagates `<fieldset disabled>`. ARIA `aria-invalid` / `aria-required` reflect through `ElementInternals`.
+
+Public API: `markTouched()`, `markSubmitted()`, `checkValidity()`, `setCustomValidity()`, `resetForm()`. Auto-discovered by `<schmancy-form>` via `FIELD_CONNECT_EVENT`.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.
 
 ## Examples
 ```html

package/dist/skills/textarea.md

@@ -28,6 +28,11 @@
 | resize | `'none'\|'vertical'\|'horizontal'\|'both'` | `'vertical'` | Resize handle |
 | align | `'left'\|'center'\|'right'` | `'left'` | Text alignment |
 | wrap | `'hard'\|'soft'` | `'soft'` | Text wrapping mode |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'dirty'` | When validation errors display. From `SchmancyFormField`. |
+| validationMessage | string | `''` | Custom error message. Set via `setCustomValidity()` or by `<schmancy-form>.setFieldError()`. |
+| spellcheck | boolean | `false` | Native spellcheck attribute. |
+| dirname | string | `undefined` | Native dirname for RTL form submission. |
+| touched / dirty / submitted | boolean | — | Validation state from `SchmancyFormField`. |
 
 ## Events
 | Event | Detail | Description |
@@ -46,3 +51,11 @@
 <!-- Fill container -->
 <schmancy-textarea fillHeight label="Content"></schmancy-textarea>
 ```
+
+## Form-field contract
+
+Extends `SchmancyFormField()` — `markTouched()`, `markSubmitted()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `resetForm()` all available; `internals.ariaInvalid` / `ariaRequired` set automatically; `<schmancy-form>` auto-discovers via `FIELD_CONNECT_EVENT`.
+
+Validation message renders in the same supporting slot as `hint`, with `role="alert"` set when `error` is true so AT announces the change.
+
+See `form.md` and `form-ux-rules.md` for the binding 4-phase validation contract.

package/dist/slider.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DvAYa-F7.cjs`),t=require(`./decorate-DpFmy0nm.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/cache.js`);var s=class extends e.s{constructor(...e){super(...e),this.type=`content`,this.src=``,this.alt=``,this.controls=!0,this.autoplay=!1,this.loop=!1,this.muted=!1,this.fit=`cover`}static{this.styles=[a.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BOOu6q2n.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/cache.js`);var s=class extends e.c{constructor(...e){super(...e),this.type=`content`,this.src=``,this.alt=``,this.controls=!0,this.autoplay=!1,this.loop=!1,this.muted=!1,this.fit=`cover`}static{this.styles=[a.css`
 	:host {
 		display: block;
 		scroll-snap-align: center; /* If your slider uses scroll-snap */
@@ -21,7 +21,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					>
 						Your browser does not support HTML video.
 					</video>
-				`;default:return a.html`<slot></slot>`}}};t.t([(0,i.property)({type:String})],s.prototype,`type`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`src`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`alt`,void 0),t.t([(0,i.property)({type:Boolean})],s.prototype,`controls`,void 0),t.t([(0,i.property)({type:Boolean})],s.prototype,`autoplay`,void 0),t.t([(0,i.property)({type:Boolean})],s.prototype,`loop`,void 0),t.t([(0,i.property)({type:Boolean})],s.prototype,`muted`,void 0),t.t([(0,i.property)({type:String})],s.prototype,`fit`,void 0),s=t.t([(0,i.customElement)(`schmancy-slide`)],s);var c=class extends e.s{constructor(...e){super(...e),this.selectedIndex=0,this.showArrows=!0}static{this.styles=[a.css`
+				`;default:return a.html`<slot></slot>`}}};t.a([(0,i.property)({type:String})],s.prototype,`type`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`src`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`alt`,void 0),t.a([(0,i.property)({type:Boolean})],s.prototype,`controls`,void 0),t.a([(0,i.property)({type:Boolean})],s.prototype,`autoplay`,void 0),t.a([(0,i.property)({type:Boolean})],s.prototype,`loop`,void 0),t.a([(0,i.property)({type:Boolean})],s.prototype,`muted`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`fit`,void 0),s=t.a([(0,i.customElement)(`schmancy-slide`)],s);var c=class extends e.c{constructor(...e){super(...e),this.selectedIndex=0,this.showArrows=!0}static{this.styles=[a.css`
 	.slider {
 		/* Lay out slides horizontally, one after another */
 		display: flex;
@@ -79,4 +79,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						`)}
 				</div>
 			</div>
-		`}};t.t([(0,i.state)()],c.prototype,`selectedIndex`,void 0),t.t([(0,i.property)({type:Boolean})],c.prototype,`showArrows`,void 0),t.t([(0,i.query)(`#slider`)],c.prototype,`slider`,void 0),t.t([(0,i.query)(`slot`)],c.prototype,`defaultSlot`,void 0),c=t.t([(0,i.customElement)(`schmancy-slider`)],c),Object.defineProperty(exports,`SchmancySlide`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`SchmancySlider`,{enumerable:!0,get:function(){return c}});
+		`}};t.a([(0,i.state)()],c.prototype,`selectedIndex`,void 0),t.a([(0,i.property)({type:Boolean})],c.prototype,`showArrows`,void 0),t.a([(0,i.query)(`#slider`)],c.prototype,`slider`,void 0),t.a([(0,i.query)(`slot`)],c.prototype,`defaultSlot`,void 0),c=t.a([(0,i.customElement)(`schmancy-slider`)],c),Object.defineProperty(exports,`SchmancySlide`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`SchmancySlider`,{enumerable:!0,get:function(){return c}});

package/dist/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":[],"sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`]\n\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends SchmancyElement {\n\tstatic styles = [css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n      Ensure each slide takes up the full slider width.\n      \"schmancy-slide\" is the child custom element.\n    */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`]\n\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex  space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`]\n\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends SchmancyElement {\n\tstatic styles = [css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n      Ensure each slide takes up the full slider width.\n      \"schmancy-slide\" is the child custom element.\n    */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`]\n\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex  space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"mappings":"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"}

package/dist/slider.js

@@ -1,5 +1,5 @@
-import { s as e } from "./mixins-BV0w2yIE.js";
-import { t } from "./decorate-23nYs4Le.js";
+import { c as e } from "./mixins-BWb9_e1s.js";
+import { a as t } from "./active-host-BP0zy_Y9.js";
 import { fromEvent as n } from "rxjs";
 import { throttleTime as r } from "rxjs/operators";
 import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";

package/dist/{sound.service-kKfsN0m-.js → sound.service-BIN2W7Rv.js}

@@ -1,4 +1,4 @@
-import { o as e } from "./state-BusMG6sM.js";
+import { o as e } from "./state-nm8yzMPp.js";
 import { BehaviorSubject as t, distinctUntilChanged as n, map as r, shareReplay as i } from "rxjs";
 var a = e("schmancy/sound").local({
 	theme: null,