@mhmo91/schmancy 0.10.41 → 0.10.43

package/dist/mixins-q4KAL8Xr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins-q4KAL8Xr.js","names":[],"sources":["../mixins/formField.mixin.ts","../mixins/litElement.mixin.ts","../src/surface/surface.styles.ts","../mixins/surface.mixin.ts"],"sourcesContent":["import { CSSResult, LitElement, PropertyValueMap } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\nimport { ITailwindElementMixin } from './tailwind.mixin'\nimport { SchmancyElement } from './SchmancyElement'\n\n/**\n * Cross-realm brand used by `<schmancy-form>` to discover form fields by\n * inheritance rather than tag-name allowlists. `Symbol.for` puts the symbol in\n * the global registry so detection works across module realms/bundles.\n */\nexport const SCHMANCY_FORM_FIELD = Symbol.for('schmancy.form-field')\n\n/**\n * Composed event a field dispatches in `connectedCallback`. `<schmancy-form>`\n * subscribes via `fromEvent(this, FIELD_CONNECT_EVENT)` and adds the field to\n * its registry. No matching disconnect event — composed events from a\n * disconnected node have an empty composed path; cleanup is via `isConnected`\n * filter at iteration time.\n */\nexport const FIELD_CONNECT_EVENT = 'schmancy:field:connect'\n\n/**\n * Validation modes.\n * - `dirty` (default per Revolute) — show errors only after value diverged.\n * - `touched` — show errors after first blur, even if value unchanged.\n * - `always` — show errors immediately (live search).\n * - `submitted` — hold all errors until submit (wizard step).\n * - `length` — fire validation only when `value.length` reaches `maxlength`\n *   (Stripe pattern for predictable-length fields: ZIP, phone, card number).\n */\nexport type ValidateOn = 'always' | 'touched' | 'dirty' | 'submitted' | 'length'\n\n/**\n * Per-field error-message override map. Keys are `ValidityState` flag names;\n * values are the message to display when that flag is set. Unset flags fall\n * back to the mixin's hardcoded defaults (English).\n *\n * Use for i18n or domain-specific copy:\n * ```ts\n * <schmancy-input\n *   .errorMessages=${{ valueMissing: 'Adresse e-mail requise', typeMismatch: 'Format e-mail invalide' }}\n *   type=\"email\" required\n * ></schmancy-input>\n * ```\n */\nexport type ErrorMessages = Partial<Record<keyof ValidityState, string>>\n\n/**\n * Interface defining the properties and methods that the FormFieldMixin adds.\n */\nexport interface IFormFieldMixin extends Element {\n\tname: string\n\tvalue: string | string[] | boolean | number | undefined\n\tlabel: string\n\trequired: boolean\n\tdisabled: boolean\n\treadonly: boolean\n\terror: boolean\n\tvalidationMessage: string\n\thint?: string\n\tid: string\n\n\t/** Set to `true` once the user has blurred the field at least once. */\n\ttouched: boolean\n\t/** `true` when the current value differs from the captured default. */\n\tdirty: boolean\n\t/** Inverse of `dirty`. */\n\tpristine: boolean\n\t/** Set to `true` by `<schmancy-form>` on submit (forces error display). */\n\tsubmitted: boolean\n\t/** Validation mode — controls when errors display. Default `'dirty'`. */\n\tvalidateOn: ValidateOn\n\n\t/**\n\t * Per-field error-message override map (i18n hook). See `ErrorMessages`.\n\t * Unset keys fall back to the mixin's hardcoded English defaults.\n\t */\n\terrorMessages?: ErrorMessages\n\n\t/**\n\t * `ElementInternals` instance attached by the mixin. Exposed so subclasses\n\t * with non-standard validity semantics (date-range, multi-select) can\n\t * surface platform `ValidityStateFlags` directly via\n\t * `internals.setValidity({ valueMissing: true })` rather than rolling their\n\t * own `attachInternals` call.\n\t */\n\tinternals: ElementInternals | undefined\n\n\tform: HTMLFormElement | null\n\n\tcheckValidity(): boolean\n\treportValidity(): boolean\n\tsetCustomValidity(message: string): void\n\n\t/** Mark the field as touched (component should call on blur). */\n\tmarkTouched(): void\n\t/** Mark the field as submitted (called by `<schmancy-form>` on submit). */\n\tmarkSubmitted(): void\n\t/**\n\t * Clear the `submitted` flag without resetting value/touched/error.\n\t * Used by wizards: stepping back from step N to step N-1 should not\n\t * leave step N-1's fields in aggressive \"show all errors\" mode.\n\t */\n\tclearSubmitted(): void\n\n\t/**\n\t * `true` while an async validator is in flight. Broadcast as\n\t * `:state(validating)`. `<schmancy-form>` blocks submit until every\n\t * registered field's `isValidating` is back to `false`.\n\t */\n\tisValidating: boolean\n\n\t/**\n\t * Run an async validator. While the promise is pending, `isValidating` is\n\t * `true` and `:state(validating)` is broadcast. On resolve, the returned\n\t * string is passed to `setCustomValidity` — empty string clears any\n\t * existing custom error; non-empty marks the field invalid with that\n\t * message.\n\t *\n\t * Submitting the form while a validator is pending is queued — the form\n\t * waits for `Promise.all(pending validators)` to settle before proceeding.\n\t */\n\trunAsyncValidator(fn: () => Promise<string>): Promise<void>\n\n\t/**\n\t * Whether the gate for showing validation errors is open right now. Exposed\n\t * so subclasses with custom error-display channels (e.g. select renders\n\t * errors on a child input) can keep their gate consistent with the mixin's.\n\t * Subclasses should not override this — extend the truth table by changing\n\t * `validateOn` instead.\n\t */\n\tshouldShowError(): boolean\n\n\ttoFormEntries(): Array<[string, FormDataEntryValue]>\n\tresetForm(): void\n\n\temitChange(detail: any): void\n}\n\n/** Predicate used by `<schmancy-form>` to detect mixin descendants. */\nexport function isSchmancyFormField(el: unknown): el is IFormFieldMixin {\n\treturn !!el && typeof el === 'object' && (el as any).constructor?.[SCHMANCY_FORM_FIELD] === true\n}\n\n/**\n * A mixin that adds form field capabilities to a LitElement class.\n * Components that extend this mixin are automatically discovered and\n * collected by `<schmancy-form>` — no tag-name registration needed.\n *\n * Subclasses may override `toFormEntries()` to contribute multiple\n * name/value pairs to FormData (e.g. date-range, tag-input).\n *\n * @example\n * ```ts\n * class MyInput extends FormFieldMixin(TailwindElement(css`...`)) {\n *   // Your component code here\n * }\n * ```\n */\nexport function FormFieldMixin<T extends Constructor<LitElement>>(superClass: T) {\n\tclass FormFieldMixinClass extends superClass {\n\t\tstatic formAssociated = true\n\n\t\t/** Brand for cross-realm detection by `<schmancy-form>`. */\n\t\tstatic readonly [SCHMANCY_FORM_FIELD] = true\n\n\t\t// Element internals for form association\n\t\tinternals: ElementInternals | undefined\n\n\t\t/** Value snapshot captured at first render, used by `resetForm()`. */\n\t\tprotected defaultValue: string | string[] | boolean | number | undefined = undefined\n\n\t\t@property({ type: String })\n\t\tname: string = ''\n\n\t\t@property({ reflect: true })\n\t\tvalue: string | string[] | boolean | number | undefined = ''\n\n\t\t@property({ type: String })\n\t\tlabel: string = ''\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\trequired: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\tdisabled: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\treadonly: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\terror: boolean = false\n\n\t\t@property({ type: String })\n\t\tvalidationMessage: string = ''\n\n\t\t@property({ type: String })\n\t\thint?: string\n\n\t\t@property({ reflect: true })\n\t\toverride id: string = `schmancy-field-${Date.now()}-${Math.floor(Math.random() * 1000)}`\n\n\t\t// ----- Validation UX state (Revolute contract) -----\n\n\t\t/** True after the user has blurred the field at least once. */\n\t\t@state() touched: boolean = false\n\n\t\t/** Set by `<schmancy-form>` on submit; persists until `resetForm()`. */\n\t\t@state() submitted: boolean = false\n\n\t\t/**\n\t\t * When errors display. Default `'dirty'` — the autofocus+cancel anti-pattern\n\t\t * is avoided because pristine fields never show errors until submit.\n\t\t */\n\t\t@property({ type: String, reflect: true })\n\t\tvalidateOn: ValidateOn = 'dirty'\n\n\t\t/**\n\t\t * Optional override for the validity-flag → message map. See\n\t\t * `ErrorMessages`. Unset keys fall back to the mixin's defaults.\n\t\t */\n\t\t@property({ attribute: false })\n\t\terrorMessages?: ErrorMessages\n\n\t\t/** True when value has been changed from the captured default. */\n\t\tget dirty(): boolean {\n\t\t\treturn this.defaultValue !== undefined && this.value !== this.defaultValue\n\t\t}\n\n\t\tget pristine(): boolean {\n\t\t\treturn !this.dirty\n\t\t}\n\n\t\tmarkTouched(): void {\n\t\t\tif (!this.touched) this.touched = true\n\t\t}\n\n\t\tmarkSubmitted(): void {\n\t\t\tif (!this.submitted) this.submitted = true\n\t\t}\n\n\t\tclearSubmitted(): void {\n\t\t\tif (this.submitted) this.submitted = false\n\t\t}\n\n\t\t/**\n\t\t * Reactive flag set while an async validator is in flight. Read by\n\t\t * `<schmancy-form>` to gate submit; broadcast as `:state(validating)`\n\t\t * for CSS spinner targeting.\n\t\t */\n\t\t@state() isValidating: boolean = false\n\n\t\tasync runAsyncValidator(fn: () => Promise<string>): Promise<void> {\n\t\t\tif (this.isValidating) {\n\t\t\t\t// Cancel-by-supersede semantics — a new call wins; the previous\n\t\t\t\t// is best-effort and its result is dropped if it resolves later.\n\t\t\t\tthis.asyncValidatorEpoch++\n\t\t\t}\n\t\t\tconst epoch = ++this.asyncValidatorEpoch\n\t\t\tthis.isValidating = true\n\t\t\ttry {\n\t\t\t\tconst message = await fn()\n\t\t\t\tif (epoch !== this.asyncValidatorEpoch) return // superseded\n\t\t\t\tthis.setCustomValidity(message)\n\t\t\t} finally {\n\t\t\t\tif (epoch === this.asyncValidatorEpoch) {\n\t\t\t\t\tthis.isValidating = false\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tprivate asyncValidatorEpoch: number = 0\n\n\t\t/**\n\t\t * Whether `checkValidity()` should display errors right now.\n\t\t * `submitted` overrides every mode — once a submit attempt happens, the\n\t\t * field stays in live-correction mode (Phase 3) for the rest of the\n\t\t * session, and `resetForm()` is the only way back. The leading\n\t\t * underscore marks this as an internal API: subclasses may call it but\n\t\t * should not override it (extend the truth table by changing\n\t\t * `validateOn` instead).\n\t\t */\n\t\tshouldShowError(): boolean {\n\t\t\tif (this.submitted) return true\n\t\t\tswitch (this.validateOn) {\n\t\t\t\tcase 'always':\n\t\t\t\t\treturn true\n\t\t\t\tcase 'touched':\n\t\t\t\t\treturn this.touched\n\t\t\t\tcase 'dirty':\n\t\t\t\t\treturn this.dirty\n\t\t\t\tcase 'submitted':\n\t\t\t\t\treturn false\n\t\t\t\tcase 'length':\n\t\t\t\t\t// Predictable-length fields: validate once value reaches the\n\t\t\t\t\t// maxlength constraint. Stripe pattern. Falls back to dirty\n\t\t\t\t\t// if no maxlength is set.\n\t\t\t\t\tif (typeof this.value === 'string') {\n\t\t\t\t\t\tconst max = (this as unknown as { maxlength?: number }).maxlength\n\t\t\t\t\t\tif (typeof max === 'number' && max > 0) {\n\t\t\t\t\t\t\treturn this.value.length >= max\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.dirty\n\t\t\t}\n\t\t}\n\n\t\tconstructor(...args: any[]) {\n\t\t\tsuper(...args)\n\t\t\ttry {\n\t\t\t\tthis.internals = this.attachInternals()\n\t\t\t} catch {\n\t\t\t\tthis.internals = undefined\n\t\t\t}\n\t\t}\n\n\t\toverride connectedCallback(): void {\n\t\t\tsuper.connectedCallback()\n\t\t\t// Register with any ancestor <schmancy-form> via composed event.\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(FIELD_CONNECT_EVENT, {\n\t\t\t\t\tdetail: this,\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\t/** The form this element is associated with (native FACE behavior). */\n\t\tget form(): HTMLFormElement | null {\n\t\t\treturn this.internals?.form ?? null\n\t\t}\n\n\t\tprotected firstUpdated(changedProps: PropertyValueMap<any>): void {\n\t\t\tsuper.firstUpdated?.(changedProps)\n\t\t\tif (this.defaultValue === undefined) this.defaultValue = this.value\n\t\t\t// Sync platform validity (`internals.setValidity`) once after first\n\t\t\t// render so `<form>.checkValidity()` and `:invalid` reflect truth\n\t\t\t// even when no property change has fired through `willUpdate` yet\n\t\t\t// (e.g. for required-empty fields with class-field-initialized\n\t\t\t// defaults that Lit doesn't see as \"changed\" on the first cycle).\n\t\t\tthis.checkValidity()\n\t\t}\n\n\t\tprotected willUpdate(changedProps: PropertyValueMap<any>): void {\n\t\t\tsuper.willUpdate(changedProps)\n\n\t\t\tif (changedProps.has('value')) {\n\t\t\t\tthis.internals?.setFormValue(this.value as string | File | FormData | null)\n\t\t\t\t// :state(dirty) tracks value-vs-default; recompute on every value change.\n\t\t\t\tif (this.dirty) this.internals?.states.add('dirty')\n\t\t\t\telse this.internals?.states.delete('dirty')\n\t\t\t\t// Always sync platform validity (internals.setValidity) so\n\t\t\t\t// `<form>.checkValidity()` and `:invalid` reflect truth, even\n\t\t\t\t// while the visual `error` gate stays closed for pristine\n\t\t\t\t// fields under `validateOn: 'dirty'`. The visibility gate is\n\t\t\t\t// inside checkValidity() itself.\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('required') || changedProps.has('disabled')) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('isValidating')) {\n\t\t\t\tif (this.isValidating) this.internals?.states.add('validating')\n\t\t\t\telse this.internals?.states.delete('validating')\n\t\t\t}\n\n\t\t\tif (changedProps.has('touched')) {\n\t\t\t\tif (this.touched) this.internals?.states.add('touched')\n\t\t\t\telse this.internals?.states.delete('touched')\n\t\t\t\t// Phase 2 — blur on a dirty field. Validate to surface the error.\n\t\t\t\tif (this.touched && this.dirty) this.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('submitted')) {\n\t\t\t\tif (this.submitted) {\n\t\t\t\t\tthis.internals?.states.add('submitted')\n\t\t\t\t\t// Phase 4 — submit forces error display regardless of dirty/touched.\n\t\t\t\t\tthis.checkValidity()\n\t\t\t\t} else {\n\t\t\t\t\tthis.internals?.states.delete('submitted')\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Note: we do not write to `internals.setValidity` from willUpdate\n\t\t\t// based on `error` / `validationMessage` changes. `checkValidity`\n\t\t\t// and `setCustomValidity` are the sole writers — overwriting the\n\t\t\t// validity flags from willUpdate would clobber structured flags\n\t\t\t// set by subclass overrides (e.g. input.ts surfaces typeMismatch /\n\t\t\t// patternMismatch / tooShort / etc.).\n\n\t\t\tif (changedProps.has('error')) {\n\t\t\t\tif (this.error) this.internals?.states.add('invalid')\n\t\t\t\telse this.internals?.states.delete('invalid')\n\t\t\t\t// ARIA reflection through ElementInternals reaches AT through shadow DOM.\n\t\t\t\tif (this.internals) this.internals.ariaInvalid = this.error ? 'true' : 'false'\n\t\t\t}\n\n\t\t\tif (changedProps.has('required') || changedProps.has('disabled')) {\n\t\t\t\tif (this.required) this.internals?.states.add('required')\n\t\t\t\telse this.internals?.states.delete('required')\n\t\t\t\t// Suppress aria-required when disabled — disabled fields shouldn't\n\t\t\t\t// announce as required to assistive tech.\n\t\t\t\tif (this.internals) {\n\t\t\t\t\tthis.internals.ariaRequired = this.required && !this.disabled ? 'true' : 'false'\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changedProps.has('disabled')) {\n\t\t\t\tif (this.disabled) this.internals?.states.add('disabled')\n\t\t\t\telse this.internals?.states.delete('disabled')\n\t\t\t}\n\t\t\tif (changedProps.has('readonly')) {\n\t\t\t\tif (this.readonly) this.internals?.states.add('readonly')\n\t\t\t\telse this.internals?.states.delete('readonly')\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Native FACE lifecycle — called by the browser when the owning form\n\t\t * is reset. Delegates to `resetForm()` so subclasses have one\n\t\t * override point for both programmatic and user-initiated resets.\n\t\t */\n\t\tformResetCallback(): void {\n\t\t\tthis.resetForm()\n\t\t}\n\n\t\t/** Native FACE lifecycle — called when the form's disabled state changes. */\n\t\tformDisabledCallback(disabled: boolean): void {\n\t\t\tthis.disabled = disabled\n\t\t}\n\n\t\t/**\n\t\t * Native FACE lifecycle — restore value after bfcache / form autofill.\n\t\t */\n\t\tformStateRestoreCallback(state: string | File | FormData | null): void {\n\t\t\tif (state == null) return\n\t\t\tthis.value = state as any\n\t\t}\n\n\t\t/** Override to customize reset behavior; default restores `defaultValue`. */\n\t\tresetForm(): void {\n\t\t\tthis.value = this.defaultValue ?? ''\n\t\t\tthis.error = false\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.touched = false\n\t\t\tthis.submitted = false\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t/**\n\t\t * Contribute entries to a parent FormData. Default: a single\n\t\t * `[name, value]` pair when `name` is set and value is meaningful.\n\t\t * Override for multi-entry controls (e.g. date range).\n\t\t */\n\t\ttoFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\t\tif (!this.name || this.disabled) return []\n\t\t\tconst v = this.value\n\t\t\tif (v === undefined || v === null || v === '') return []\n\t\t\tif (Array.isArray(v)) return v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])\n\t\t\tif (typeof v === 'boolean') return v ? [[this.name, 'on']] : []\n\t\t\treturn [[this.name, String(v)]]\n\t\t}\n\n\t\tcheckValidity(): boolean {\n\t\t\tif (this.disabled) {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t\treturn true\n\t\t\t}\n\n\t\t\tconst requiredFailed = this.required && (this.value === '' || this.value === undefined || this.value === null)\n\t\t\t// Custom errors set via setCustomValidity() are platform-truth too —\n\t\t\t// preserve them through re-validation cycles.\n\t\t\tconst customErrorSet = !!this.internals?.validity?.customError\n\t\t\tconst isValid = !requiredFailed && !customErrorSet\n\t\t\tconst requiredMessage = this.errorMessages?.valueMissing ?? 'This field is required'\n\t\t\tconst defaultMessage = requiredFailed ? requiredMessage : 'Invalid value'\n\n\t\t\t// Platform validity (read by `form.checkValidity()` and `:invalid`)\n\t\t\t// is always set to the truth — independent of the visual gate.\n\t\t\tif (requiredFailed) {\n\t\t\t\tthis.internals?.setValidity({ valueMissing: true }, this.validationMessage || defaultMessage)\n\t\t\t} else if (!customErrorSet) {\n\t\t\t\t// No required failure, no custom error — clear flags.\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t\t// (customErrorSet branch falls through — leave the custom validity intact.)\n\n\t\t\t// Visual `error` flag is gated. The returned boolean tells the caller\n\t\t\t// the truth; only the in-component error display is suppressed for\n\t\t\t// pristine fields under `validateOn: 'dirty'`.\n\t\t\tif (this.shouldShowError()) {\n\t\t\t\tthis.error = !isValid\n\t\t\t\tif (!isValid && !this.validationMessage) {\n\t\t\t\t\tthis.validationMessage = defaultMessage\n\t\t\t\t} else if (isValid) {\n\t\t\t\t\tthis.validationMessage = ''\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn isValid\n\t\t}\n\n\t\treportValidity(): boolean {\n\t\t\tconst isValid = this.checkValidity()\n\t\t\tif (!isValid) this.internals?.reportValidity()\n\t\t\treturn isValid\n\t\t}\n\n\t\tsetCustomValidity(message: string): void {\n\t\t\tthis.validationMessage = message\n\t\t\tthis.error = message !== ''\n\t\t\tif (message) {\n\t\t\t\tthis.internals?.setValidity({ customError: true }, message)\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\n\t\temitChange(detail: any): void {\n\t\t\tif ('dispatchScopedEvent' in this && typeof this.dispatchScopedEvent === 'function') {\n\t\t\t\tthis.dispatchScopedEvent('change', detail, { bubbles: true })\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\t\tdetail,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn FormFieldMixinClass as Constructor<IFormFieldMixin> & T\n}\n\n/**\n * A convenience function that composes FormFieldMixin with SchmancyElement\n * to create a base class for Schmancy form components. Subclasses gain the\n * full SchmancyElement stack (SignalWatcher, _activeHost wrap, AbortSignal,\n * automatic Tailwind injection) plus the form-field semantics.\n */\nexport function SchmancyFormField<T extends CSSResult>(componentStyle?: T) {\n\tclass StyledSchmancyElement extends SchmancyElement {\n\t\tstatic styles = componentStyle ? [componentStyle] : []\n\t}\n\treturn FormFieldMixin(StyledSchmancyElement) as unknown as Constructor<IFormFieldMixin> &\n\t\tConstructor<ITailwindElementMixin> &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin>\n}\n","import { CSSResult, LitElement } from 'lit'\nimport { IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\nimport { SchmancyElement } from './SchmancyElement'\n\n/**\n * @deprecated Extend `SchmancyElement` directly and declare `static styles`.\n *\n *   Before: extends $LitElement(css`...`)\n *   After:  extends SchmancyElement { static styles = [css`...`] }\n *\n * Kept as a thin alias for the migration window; will be removed in the next\n * major Schmancy release. The returned class extends `SchmancyElement` so\n * runtime semantics (Tailwind injection, `disconnecting` Subject,\n * `disconnectedSignal` AbortSignal, SignalWatcher) match exactly.\n */\nexport const $LitElement = <T extends CSSResult>(componentStyle?: T) => {\n\tclass LegacyAlias extends SchmancyElement {\n\t\tstatic styles = componentStyle ? [componentStyle] : []\n\t}\n\treturn LegacyAlias as CustomElementConstructor & Constructor<LitElement> & Constructor<IBaseMixin>\n}\n","import { css } from 'lit'\n\n/**\n * Surface type styles — tonal depth model.\n *\n * Constants (single source of truth):\n *   --glass-material: blur(16px) saturate(180%)\n *   --glass-opacity:  72%\n *\n * Rationale: `blur(16px) saturate(180%)` is the `glass` recipe's\n * blur+saturate pair — the readable mid-point. Opacity is raised to 72%\n * (from the prior `glass` recipe's 55%) so that lighter tonal levels\n * (`surface`, `surfaceDim`, `surfaceBright`) satisfy the M3 contained-text\n * readability contract: at 72% the base tint is dominant enough that the\n * lighter tones still carry readable foreground text across light and dark\n * schemes. Darker tones (`container`…`containerHighest`) gain a slight\n * opacity boost for free — no readability regression there.\n */\nexport const surfaceTypeStyles = css`\n\t/* ================================================================\n\t   TONAL TYPES — constant glass material, per-name base tint.\n\t   Depth is expressed by tone (the M3 tonal token), not by blur.\n\t   ================================================================ */\n\n\t:host([type='surface']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-default);\n\t}\n\t:host([type='surfaceDim']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-dim);\n\t}\n\t:host([type='surfaceBright']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-bright);\n\t}\n\t:host([type='containerLowest']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-containerLowest);\n\t}\n\t:host([type='containerLow']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-containerLow);\n\t}\n\t:host([type='container']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-container);\n\t}\n\t:host([type='containerHigh']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-containerHigh);\n\t}\n\t:host([type='containerHighest']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-containerHighest);\n\t}\n\n\t/* One shared material rule — applies to all eight tonal names */\n\t:host([type='surface']),\n\t:host([type='surfaceDim']),\n\t:host([type='surfaceBright']),\n\t:host([type='containerLowest']),\n\t:host([type='containerLow']),\n\t:host([type='container']),\n\t:host([type='containerHigh']),\n\t:host([type='containerHighest']) {\n\t\t--glass-material: blur(16px) saturate(180%);\n\t\t--glass-opacity: 72%;\n\t\tbackground: color-mix(in srgb, var(--glass-base) var(--glass-opacity), transparent);\n\t\tbackdrop-filter: var(--glass-material);\n\t\t-webkit-backdrop-filter: var(--glass-material);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* ================================================================\n\t   UTILITY TYPES\n\t   ================================================================ */\n\n\t/* Transparent — no background */\n\t:host([type='transparent']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* Outlined — border with luminous hover potential */\n\t:host([type='outlined']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--schmancy-sys-color-outlineVariant);\n\t\ttransition:\n\t\t\tborder-color 300ms ease,\n\t\t\tbox-shadow 300ms ease;\n\t}\n\n\t/* ================================================================\n\t   SEMANTIC TYPES — tinted glass for status/role\n\t   ================================================================ */\n\n\t:host([type='primary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-primary-default);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-secondary-default);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-tertiary-default);\n\t}\n\t:host([type='error']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-error-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-success-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-warning-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-info-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n`\n\n/**\n * Combined surface styles — type variants only.\n * Corner radius, shadow, and cursor are stock Tailwind classes applied by the consumer.\n */\nexport const surfaceStyles = css`\n\t${surfaceTypeStyles}\n`\n","import type { Constructor } from './constructor'\nimport { CSSResultGroup, CSSResultOrNative, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport type { TSurfaceColor } from '../src/types/surface'\nimport { surfaceStyles } from '../src/surface/surface.styles'\n\nexport declare class ISurfaceMixin {\n\ttype: TSurfaceColor\n}\n\n/**\n * SurfaceMixin — injects surface color-variant styles into any LitElement.\n *\n * Uses Lit's `finalizeStyles` hook to inject `surfaceTypeStyles` CSS for all\n * color-variant selectors. Corner radius, shadow depth, and cursor behavior are\n * the consumer's responsibility — apply stock Tailwind classes directly on the\n * element (`rounded-2xl`, `shadow-lg`, `cursor-pointer`).\n *\n * Provides one reflected property:\n * - `type`: TSurfaceColor — the color variant (26+ options)\n *\n * Usage:\n * ```typescript\n * import { SurfaceMixin } from '@mixins/surface.mixin'\n *\n * @customElement('my-component')\n * class MyComponent extends SurfaceMixin(TailwindElement(css`\n *   :host { display: block; }\n * `)) {\n *   // Component now has the type property and surfaceTypeStyles\n * }\n * ```\n */\nexport const SurfaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n\tclass SurfaceMixinClass extends superClass {\n\t\t/**\n\t\t * Override finalizeStyles to inject surfaceStyles.\n\t\t * This is the Lit-recommended way for mixins to add styles.\n\t\t */\n\t\tprotected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {\n\t\t\t// Get parent's finalized styles using LitElement's method\n\t\t\tconst parentStyles = (superClass as unknown as typeof LitElement).finalizeStyles(styles)\n\t\t\t// Append surfaceStyles at the end (higher specificity)\n\t\t\treturn [...parentStyles, surfaceStyles as CSSResultOrNative]\n\t\t}\n\n\t\t/**\n\t\t * Specifies the surface type for styling.\n\t\t * @default 'containerLow'\n\t\t */\n\t\t@property({ reflect: true })\n\t\ttype: TSurfaceColor = 'containerLow'\n\t}\n\treturn SurfaceMixinClass as Constructor<ISurfaceMixin> & T\n}\n"],"mappings":";;;AAYA,IAAa,IAAsB,OAAO,IAAI,qBAAA,GASjC,IAAsB;AAyHnC,SAAgB,EAAoB,GAAA;CACnC,OAAA,CAAA,CAAS,KAAoB,OAAP,KAAO,YAAP,CAAsE,MAAlD,EAAW,cAAc;AACpE;AAiBA,SAAgB,EAAkD,GAAA;CACjE,MAAM,UAA4B,EAAA;EAAA;GAAA,KAAA,iBAAA,CACT;EAAA;EAAA;GAAA,KAGP,KAAA,CAAuB;EAAA;EA6DxC,IAAA,QAAI;GACH,OAAO,KAAK,iBAAZ,KAA6B,KAAa,KAAK,UAAU,KAAK;EAC/D;EAEA,IAAA,WAAI;GACH,OAAA,CAAQ,KAAK;EACd;EAEA,cAAA;GACM,AAAc,KAAK,YAAA,CAAU;EACnC;EAEA,gBAAA;GACM,AAAgB,KAAK,cAAA,CAAY;EACvC;EAEA,iBAAA;GACK,AAAgB,KAAK,cAAA,CAAY;EACtC;EASA,MAAA,kBAAwB,GAAA;GACnB,KAAK,gBAGR,KAAK;GAEN,IAAM,IAAA,EAAU,KAAK;GACrB,KAAK,eAAA,CAAe;GACpB,IAAA;IACC,IAAM,IAAA,MAAgB,EAAA;IACtB,IAAI,MAAU,KAAK,qBAAqB;IACxC,KAAK,kBAAkB,CAAA;GACxB,UAAA;IACK,MAAU,KAAK,wBAClB,KAAK,eAAA,CAAe;GAEtB;EACD;EAaA,kBAAA;GACC,IAAI,KAAK,WAAW,OAAA,CAAO;GAC3B,QAAQ,KAAK,YAAb;IACC,KAAK,UACJ,OAAA,CAAO;IACR,KAAK,WACJ,OAAO,KAAK;IACb,KAAK,SACJ,OAAO,KAAK;IACb,KAAK,aACJ,OAAA,CAAO;IACR,KAAK;KAIJ,IAA0B,OAAf,KAAK,SAAU,UAAU;MACnC,IAAM,IAAO,KAA2C;MACxD,IAAmB,OAAR,KAAQ,YAAY,IAAM,GACpC,OAAO,KAAK,MAAM,UAAU;KAE9B;KACA,OAAO,KAAK;GAAA;EAEf;EAEA,YAAA,GAAe,GAAA;GACd,MAAA,GAAS,CAAA,GAAA,KAAA,eAAA,KA1IiE,GAAA,KAAA,OAG5D,IAAA,KAAA,QAG2C,IAAA,KAAA,QAG1C,IAAA,KAAA,WAAA,CAGI,GAAA,KAAA,WAAA,CAGA,GAAA,KAAA,WAAA,CAGA,GAAA,KAAA,QAAA,CAGH,GAAA,KAAA,oBAGW,IAAA,KAAA,KAMN,kBAAkB,KAAK,IAAA,EAAA,GAAS,KAAK,MAAsB,MAAhB,KAAK,OAAA,CAAA,KAAA,KAAA,UAAA,CAK1C,GAAA,KAAA,YAAA,CAGE,GAAA,KAAA,aAOL,SAAA,KAAA,eAAA,CAmCQ,GAAA,KAAA,sBAqBK;GAsCrC,IAAA;IACC,KAAK,YAAY,KAAK,gBAAA;GACvB,QAAA;IACC,KAAK,YAAA,KAAY;GAClB;EACD;EAEA,oBAAA;GACC,MAAM,kBAAA,GAEN,KAAK,cACJ,IAAI,YAAY,GAAqB;IACpC,QAAQ;IACR,SAAA,CAAS;IACT,UAAA,CAAU;GAAA,CAAA,CAAA;EAGb;EAGA,IAAA,OAAI;GACH,OAAO,KAAK,WAAW,QAAQ;EAChC;EAEA,aAAuB,GAAA;GACtB,MAAM,eAAe,CAAA,GACjB,KAAK,iBADY,KACK,MAAW,KAAK,eAAe,KAAK,QAM9D,KAAK,cAAA;EACN;EAEA,WAAqB,GAAA;GACpB,MAAM,WAAW,CAAA,GAEb,EAAa,IAAI,OAAA,MACpB,KAAK,WAAW,aAAa,KAAK,KAAA,GAE9B,KAAK,QAAO,KAAK,WAAW,OAAO,IAAI,OAAA,IACtC,KAAK,WAAW,OAAO,OAAO,OAAA,GAMnC,KAAK,cAAA,KAGF,EAAa,IAAI,UAAA,KAAe,EAAa,IAAI,UAAA,MACpD,KAAK,cAAA,GAGF,EAAa,IAAI,cAAA,MAChB,KAAK,eAAc,KAAK,WAAW,OAAO,IAAI,YAAA,IAC7C,KAAK,WAAW,OAAO,OAAO,YAAA,IAGhC,EAAa,IAAI,SAAA,MAChB,KAAK,UAAS,KAAK,WAAW,OAAO,IAAI,SAAA,IACxC,KAAK,WAAW,OAAO,OAAO,SAAA,GAE/B,KAAK,WAAW,KAAK,SAAO,KAAK,cAAA,IAGlC,EAAa,IAAI,WAAA,MAChB,KAAK,aACR,KAAK,WAAW,OAAO,IAAI,WAAA,GAE3B,KAAK,cAAA,KAEL,KAAK,WAAW,OAAO,OAAO,WAAA,IAW5B,EAAa,IAAI,OAAA,MAChB,KAAK,QAAO,KAAK,WAAW,OAAO,IAAI,SAAA,IACtC,KAAK,WAAW,OAAO,OAAO,SAAA,GAE/B,KAAK,cAAW,KAAK,UAAU,cAAc,KAAK,QAAQ,SAAS,YAGpE,EAAa,IAAI,UAAA,KAAe,EAAa,IAAI,UAAA,OAChD,KAAK,WAAU,KAAK,WAAW,OAAO,IAAI,UAAA,IACzC,KAAK,WAAW,OAAO,OAAO,UAAA,GAG/B,KAAK,cACR,KAAK,UAAU,eAAe,KAAK,YAAA,CAAa,KAAK,WAAW,SAAS,WAGvE,EAAa,IAAI,UAAA,MAChB,KAAK,WAAU,KAAK,WAAW,OAAO,IAAI,UAAA,IACzC,KAAK,WAAW,OAAO,OAAO,UAAA,IAEhC,EAAa,IAAI,UAAA,MAChB,KAAK,WAAU,KAAK,WAAW,OAAO,IAAI,UAAA,IACzC,KAAK,WAAW,OAAO,OAAO,UAAA;EAErC;EAOA,oBAAA;GACC,KAAK,UAAA;EACN;EAGA,qBAAqB,GAAA;GACpB,KAAK,WAAW;EACjB;EAKA,yBAAyB,GAAA;GACX,AAAT,KAAS,SACb,KAAK,QAAQ;EACd;EAGA,YAAA;GACC,KAAK,QAAQ,KAAK,gBAAgB,IAClC,KAAK,QAAA,CAAQ,GACb,KAAK,oBAAoB,IACzB,KAAK,UAAA,CAAU,GACf,KAAK,YAAA,CAAY,GACjB,KAAK,WAAW,YAAY,CAAC,CAAA;EAC9B;EAOA,gBAAA;GACC,IAAA,CAAK,KAAK,QAAQ,KAAK,UAAU,OAAO,CAAA;GACxC,IAAM,IAAI,KAAK;GACf,OAAI,KAAA,QAAiC,MAAM,KAAW,CAAA,IAClD,MAAM,QAAQ,CAAA,IAAW,EAAE,KAAI,MAAQ,CAAC,KAAK,MAAM,OAAO,CAAA,CAAA,CAAA,IAC7C,OAAN,KAAM,YAAkB,IAAI,CAAC,CAAC,KAAK,MAAM,IAAA,CAAA,IAAS,CAAA,IACtD,CAAC,CAAC,KAAK,MAAM,OAAO,CAAA,CAAA,CAAA;EAC5B;EAEA,gBAAA;GACC,IAAI,KAAK,UAER,OADA,KAAK,WAAW,YAAY,CAAC,CAAA,GAAA,CACtB;GAGR,IAAM,IAAiB,KAAK,aAAa,KAAK,UAAU,MAAM,KAAK,UAArB,KAA+B,KAAa,KAAK,UAAU,OAGnG,IAAA,CAAA,CAAmB,KAAK,WAAW,UAAU,aAC7C,IAAA,CAAW,KAAA,CAAmB,GAC9B,IAAkB,KAAK,eAAe,gBAAgB,0BACtD,IAAiB,IAAiB,IAAkB;GAwB1D,OApBI,IACH,KAAK,WAAW,YAAY,EAAE,cAAA,CAAc,EAAA,GAAQ,KAAK,qBAAqB,CAAA,IACnE,KAEX,KAAK,WAAW,YAAY,CAAC,CAAA,GAO1B,KAAK,gBAAA,MACR,KAAK,QAAA,CAAS,GACT,KAAY,KAAK,oBAEX,MACV,KAAK,oBAAoB,MAFzB,KAAK,oBAAoB,IAMpB;EACR;EAEA,iBAAA;GACC,IAAM,IAAU,KAAK,cAAA;GAErB,OADK,KAAS,KAAK,WAAW,eAAA,GACvB;EACR;EAEA,kBAAkB,GAAA;GACjB,KAAK,oBAAoB,GACzB,KAAK,QAAQ,MAAY,IACrB,IACH,KAAK,WAAW,YAAY,EAAE,aAAA,CAAa,EAAA,GAAQ,CAAA,IAEnD,KAAK,WAAW,YAAY,CAAC,CAAA;EAE/B;EAEA,WAAW,GAAA;GACN,yBAAyB,QAA4C,OAA7B,KAAK,uBAAwB,aACxE,KAAK,oBAAoB,UAAU,GAAQ,EAAE,SAAA,CAAS,EAAA,CAAA,IAEtD,KAAK,cACJ,IAAI,YAAY,UAAU;IACzB,QAAA;IACA,SAAA,CAAS;IACT,UAAA,CAAU;GAAA,CAAA,CAAA;EAId;CAAA;CAGD,OAAA,EAAA,CA3WE,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,EAAA,CAGzB,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAG1B,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAGzB,EAAS;EAAE,MAAM;EAAS,SAAA,CAAS;CAAA,CAAA,CAAA,GAAM,EAAA,WAAA,YAAA,KAAA,CAAA,GAAA,EAAA,CAGzC,EAAS;EAAE,MAAM;EAAS,SAAA,CAAS;CAAA,CAAA,CAAA,GAAM,EAAA,WAAA,YAAA,KAAA,CAAA,GAAA,EAAA,CAGzC,EAAS;EAAE,MAAM;EAAS,SAAA,CAAS;CAAA,CAAA,CAAA,GAAM,EAAA,WAAA,YAAA,KAAA,CAAA,GAAA,EAAA,CAGzC,EAAS;EAAE,MAAM;EAAS,SAAA,CAAS;CAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAGzC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,qBAAA,KAAA,CAAA,GAAA,EAAA,CAGzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,EAAA,CAGzB,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,MAAA,KAAA,CAAA,GAAA,EAAA,CAM1B,EAAA,CAAA,GAAM,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,EAAA,CAGN,EAAA,CAAA,GAAM,EAAA,WAAA,aAAA,KAAA,CAAA,GAAA,EAAA,CAMN,EAAS;EAAE,MAAM;EAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,GAAM,EAAA,WAAA,cAAA,KAAA,CAAA,GAAA,EAAA,CAOxC,EAAS,EAAE,WAAA,CAAW,EAAA,CAAA,CAAA,GAAO,EAAA,WAAA,iBAAA,KAAA,CAAA,GAAA,EAAA,CA6B7B,EAAA,CAAA,GAAM,EAAA,WAAA,gBAAA,KAAA,CAAA,GA6RD;AACR;AAQA,SAAgB,EAAuC,GAAA;CACtD,MAAM,UAA8B,EAAA;EAAA;GAAA,KAAA,SACnB,IAAiB,CAAC,CAAA,IAAkB,CAAA;EAAA;CAAA;CAErD,OAAO,EAAe,CAAA;AAIvB;AC1hBA,IAAa,KAAoC,MAAA;CAChD,MAAM,UAAoB,EAAA;EAAA;GAAA,KAAA,SACT,IAAiB,CAAC,CAAA,IAAkB,CAAA;EAAA;CAAA;CAErD,OAAO;AAAA,GCsHK,IAAgB,CAAG;GAxHC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCevB,KAAmD,MAAA;CAC/D,MAAM,UAA0B,EAAA;EAAA,YAAA,GAAA,GAAA;GAAA,MAAA,GAAA,CAAA,GAAA,KAAA,OAiBT;EAAA;EAZtB,OAAA,eAAgC,GAAA;GAI/B,OAAO,CAAA,GAFe,EAA4C,eAAe,CAAA,GAExD,CAAA;EAC1B;CAAA;CASD,OAAA,EAAA,CAHE,EAAS,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,QAAA,KAAA,CAAA,GAGrB;AAAA;AAAA,SAAA,GAAA,KAAA,GAAA,KAAA,GAAA,KAAA,GAAA,KAAA,GAAA,GAAA,KAAA"}

package/dist/mixins.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./SchmancyElement-D9WA9FP9.cjs`),t=require(`./mixins-XGVIOvKt.cjs`);exports.$LitElement=t.n,exports.BaseElement=e.l,exports.DISCOVER_EVENT=e.f,exports.DISCOVER_RESPONSE_EVENT=e.p,exports.FIELD_CONNECT_EVENT=t.r,exports.FormFieldMixin=t.i,exports.SCHMANCY_FORM_FIELD=t.a,exports.SchmancyElement=e.t,exports.SchmancyFormField=t.o,exports.SurfaceMixin=t.t,exports.TailwindElement=e.s,exports.discover=e.m,exports.discoverAllElements=e.h,exports.discoverAnyComponent=e.g,exports.discoverComponent=e._,exports.discoverElement=e.v,exports.isSchmancyFormField=t.s,exports.schmancyElement=e.n,exports.tailwindStyles=e.c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./SchmancyElement-CeKrBW2j.cjs`),t=require(`./mixins-Cjn20BQH.cjs`);exports.$LitElement=t.n,exports.BaseElement=e.l,exports.DISCOVER_EVENT=e.f,exports.DISCOVER_RESPONSE_EVENT=e.p,exports.FIELD_CONNECT_EVENT=t.r,exports.FormFieldMixin=t.i,exports.SCHMANCY_FORM_FIELD=t.a,exports.SchmancyElement=e.t,exports.SchmancyFormField=t.o,exports.SurfaceMixin=t.t,exports.TailwindElement=e.s,exports.discover=e.m,exports.discoverAllElements=e.h,exports.discoverAnyComponent=e.g,exports.discoverComponent=e._,exports.discoverElement=e.v,exports.isSchmancyFormField=t.s,exports.schmancyElement=e.n,exports.tailwindStyles=e.c;

package/dist/mixins.js

@@ -1,3 +1,3 @@
-import { _ as e, c as t, f as n, g as r, h as i, l as a, m as o, n as s, p as c, s as l, t as u, v as d } from "./SchmancyElement-OWgz9ePG.js";
-import { a as f, i as p, n as m, o as h, r as g, s as _, t as v } from "./mixins-COeG4DiX.js";
+import { _ as e, c as t, f as n, g as r, h as i, l as a, m as o, n as s, p as c, s as l, t as u, v as d } from "./SchmancyElement-Ob9yGkiG.js";
+import { a as f, i as p, n as m, o as h, r as g, s as _, t as v } from "./mixins-q4KAL8Xr.js";
 export { m as $LitElement, a as BaseElement, n as DISCOVER_EVENT, c as DISCOVER_RESPONSE_EVENT, g as FIELD_CONNECT_EVENT, p as FormFieldMixin, f as SCHMANCY_FORM_FIELD, u as SchmancyElement, h as SchmancyFormField, v as SurfaceMixin, l as TailwindElement, o as discover, i as discoverAllElements, r as discoverAnyComponent, e as discoverComponent, d as discoverElement, _ as isSchmancyFormField, s as schmancyElement, t as tailwindStyles };

package/dist/nav-drawer.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-CpftzdZV.cjs`);exports.$drawer=e.p,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.f}}),exports.SchmancyDrawerNavbarMode=e.l,exports.SchmancyDrawerNavbarState=e.u,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.c}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.d}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.s}}),exports.schmancyNavDrawer=e.m;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-DuRvYagm.cjs`);exports.$drawer=e.p,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.f}}),exports.SchmancyDrawerNavbarMode=e.l,exports.SchmancyDrawerNavbarState=e.u,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.c}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.d}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.s}}),exports.schmancyNavDrawer=e.m;

package/dist/nav-drawer.js

@@ -1,2 +1,2 @@
-import { c as e, d as t, f as n, l as r, m as i, p as a, s as o, u as s } from "./src-CCVbLLgC.js";
+import { c as e, d as t, f as n, l as r, m as i, p as a, s as o, u as s } from "./src-DAtcPmCb.js";
 export { a as $drawer, n as SchmancyDrawerAppbar, r as SchmancyDrawerNavbarMode, s as SchmancyDrawerNavbarState, e as SchmancyNavigationDrawer, t as SchmancyNavigationDrawerContent, o as SchmancyNavigationDrawerSidebar, i as schmancyNavDrawer };

package/dist/navigation-bar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-CpftzdZV.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.a}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.o}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-DuRvYagm.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.a}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.o}});

package/dist/navigation-bar.js

@@ -1,2 +1,2 @@
-import { a as e, o as t } from "./src-CCVbLLgC.js";
+import { a as e, o as t } from "./src-DAtcPmCb.js";
 export { e as SchmancyNavigationBar, t as SchmancyNavigationBarItem };

package/dist/navigation-rail.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-D9WA9FP9.cjs`);require(`./mixins-XGVIOvKt.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/when.js`);var o=class extends e.t{constructor(...e){super(...e),this.hovering$=new t.BehaviorSubject(!1),this.pressing$=new t.BehaviorSubject(!1),this.active$=new t.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,t.merge)((0,t.fromEvent)(this,`mouseenter`).pipe((0,n.tap)(()=>this.hovering$.next(!0))),(0,t.fromEvent)(this,`mouseleave`).pipe((0,n.tap)(()=>this.hovering$.next(!1)))).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(),(0,t.merge)((0,t.fromEvent)(this,`mousedown`).pipe((0,n.tap)(()=>this.pressing$.next(!0))),(0,t.fromEvent)(this,`mouseup`).pipe((0,n.tap)(()=>this.pressing$.next(!1))),(0,t.fromEvent)(this,`mouseleave`).pipe((0,n.tap)(()=>this.pressing$.next(!1)))).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,n.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,n.delay)(600),(0,n.tap)(()=>this.showRipple=!1),(0,t.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,n.distinctUntilChanged)(),(0,n.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,t.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-start":!0,"min-h-14 w-full":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),o=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`);require(`./mixins-Cjn20BQH.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/when.js`);var o=class extends e.t{constructor(...e){super(...e),this.hovering$=new t.BehaviorSubject(!1),this.pressing$=new t.BehaviorSubject(!1),this.active$=new t.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,t.merge)((0,t.fromEvent)(this,`mouseenter`).pipe((0,n.tap)(()=>this.hovering$.next(!0))),(0,t.fromEvent)(this,`mouseleave`).pipe((0,n.tap)(()=>this.hovering$.next(!1)))).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(),(0,t.merge)((0,t.fromEvent)(this,`mousedown`).pipe((0,n.tap)(()=>this.pressing$.next(!0))),(0,t.fromEvent)(this,`mouseup`).pipe((0,n.tap)(()=>this.pressing$.next(!1))),(0,t.fromEvent)(this,`mouseleave`).pipe((0,n.tap)(()=>this.pressing$.next(!1)))).pipe((0,t.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,n.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,n.delay)(600),(0,n.tap)(()=>this.showRipple=!1),(0,t.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,n.distinctUntilChanged)(),(0,n.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,t.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-start":!0,"min-h-14 w-full":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),o=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return i.html`
 			<div
 				class=${n}
 				part="container"
@@ -43,9 +43,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					`)}
 			</div>
 		`}};e.u([(0,r.property)({type:String})],o.prototype,`icon`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`label`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`value`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`active`,null),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`selected`,null),e.u([(0,r.property)({type:String})],o.prototype,`badge`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`badgeVariant`,void 0),e.u([(0,r.property)({type:Boolean,attribute:`show-label`})],o.prototype,`showLabel`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`disabled`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`nested`,void 0),e.u([(0,r.property)({type:Boolean,reflect:!0})],o.prototype,`group`,void 0),e.u([(0,r.state)()],o.prototype,`showRipple`,void 0),o=e.u([(0,r.customElement)(`schmancy-navigation-rail-item`)],o);var s=/^(grid($|-)|flex($|-)|gap-|col-|row-|justify-|items-|content-|place-|auto-|grid-cols-|grid-rows-)/,c=class extends e.t{constructor(...e){super(...e),this.activeIndex$=new t.BehaviorSubject(-1),this.#e=``,this.labelVisibility=`all`,this.alignment=`top`,this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1,this.hostLayoutClasses=``}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this.#e}set activeValue(e){this.#e=e,this.updateActiveByValue(e)}#e;get navigationItems(){return this.allElements.filter(e=>e.tagName===`SCHMANCY-NAVIGATION-RAIL-ITEM`)}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener(`keydown`,this.handleKeyDown),this.activeIndex$.pipe((0,n.distinctUntilChanged)(),(0,n.tap)(e=>this.updateActiveStates(e)),(0,t.takeUntil)(this.disconnecting)).subscribe(),(0,t.fromEvent)(window,`fullscreen`).pipe((0,n.tap)(e=>{let t=e;this.isFullscreen=t.detail}),(0,t.takeUntil)(this.disconnecting)).subscribe(),new t.Observable(e=>{let t=()=>Array.from(this.classList).filter(e=>s.test(e)).join(` `);e.next(t());let n=new MutationObserver(()=>e.next(t()));return n.observe(this,{attributes:!0,attributeFilter:[`class`]}),()=>n.disconnect()}).pipe((0,n.distinctUntilChanged)(),(0,n.tap)(e=>{this.hostLayoutClasses=e}),(0,t.takeUntil)(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Main navigation`)}updated(e){super.updated(e),e.has(`labelVisibility`)&&this.updateLabelVisibility(),e.has(`activeValue`)&&this.updateActiveByValue(this.activeValue),e.has(`expanded`)&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,n)=>{let r=n===e;t.active=r,t.setAttribute(`aria-selected`,String(r)),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&(this.#e=t.value||t.label||``)})}updateActiveByValue(e){let t=this.navigationItems.findIndex(t=>t.getAttribute(`value`)===e||t.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let n=!1;n=!!this.expanded||this.labelVisibility===`all`||this.labelVisibility===`selected`&&t===this.activeIndex,e.showLabel=n,this.showTooltips&&!n&&!this.expanded&&e.label?e.setAttribute(`title`,e.label):e.removeAttribute(`title`)})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){let t=this.querySelector(`[value="${e.id}"]`);if(t)return t;let n=document.createElement(`schmancy-navigation-rail-item`);n.setAttribute(`value`,e.id),n.innerHTML=`\n\t\t\t<schmancy-icon slot="icon">${e.icon||`widgets`}</schmancy-icon>\n\t\t\t${e.title}\n\t\t`;let r=this.querySelector(`[slot="footer"]`);return r?this.insertBefore(n,r):this.appendChild(n),n}toggle(){this.expanded=!this.expanded}handleKeyDown(e){let t=this.navigationItems;if(t.length===0)return;let n=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case`ArrowDown`:e.preventDefault(),n=(n+1)%t.length;break;case`ArrowUp`:e.preventDefault(),n=n<=0?t.length-1:n-1;break;case`Home`:e.preventDefault(),n=0;break;case`End`:e.preventDefault(),n=t.length-1;break;case`Enter`:case` `:e.preventDefault(),n>=0&&t[n].click();return;default:return}this.focusedIndex=n,t[n].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`fab-click`,{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`menu-click`,{bubbles:!0,composed:!0}))}render(){let e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"bg-container-lowest text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),n=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),r=this.classMap({"flex-1":!0,"min-h-0":!0}),a=this.hostLayoutClasses.length>0?this.hostLayoutClasses:this.classMap({"flex flex-col gap-3":!0,"justify-start":this.alignment===`top`,"justify-center":this.alignment===`center`,"justify-end":this.alignment===`bottom`}),o=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return i.html`
-			<div
-				class=${e}
-			>
+			<div class=${e}>
 				<div class=${t} part="rail">
 					<div class=${n} part="header">
 						<slot name="fab" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>

package/dist/navigation-rail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.cjs","names":["#activeValue"],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends SchmancyElement {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px minimum hit target; vertical padding is consumer-controlled)\n\t\t\t// justify-start pins the icon to the row top so its vertical center is invariant\n\t\t\t// across label-visibility states — consumer rows can align siblings to it.\n\t\t\t'flex flex-col items-center justify-start': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<schmancy-icon class=${iconClasses} part=\"icon-text\">\n\t\t\t\t\t\t\t\t\t\t${this.active ? `${this.icon}-fill` : this.icon}\n\t\t\t\t\t\t\t\t\t</schmancy-icon>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { BehaviorSubject, fromEvent, Observable, takeUntil } from 'rxjs'\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\n\n/**\n * Regex matching Tailwind utility prefixes that control items-container layout.\n * Classes matching this are forwarded from the host's `class` attribute to the\n * inner `<nav>` element so authors can write e.g. `class=\"grid gap-2\"` on the\n * host and have the items container adopt that layout.\n * Classes NOT matching (bg-*, text-*, shadow-*, etc.) stay on the host only.\n */\nconst LAYOUT_CLASS_RE =\n\t/^(grid($|-)|flex($|-)|gap-|col-|row-|justify-|items-|content-|place-|auto-|grid-cols-|grid-rows-)/\n\nexport type NavigateEvent = CustomEvent<string>\n\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\n\nexport type NavigationRailFabClickEvent = CustomEvent<void>\n\n\nexport type LabelVisibility = 'all' | 'selected' | 'none'\n\n/**\n * Material Design 3 Navigation Rail Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail>` component\n *\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\n *\n * ## Layout composition\n * Place layout utilities directly on the host element. They are forwarded to the\n * items container `<div part=\"items\">` (the direct flat-tree parent of slotted items,\n * placed inside `<schmancy-scroll>`). When no layout utilities are present on the host,\n * the items container defaults to `flex flex-col gap-3` plus the `justify-*` class\n * driven by the `alignment` property.\n *\n *   <schmancy-navigation-rail class=\"grid gap-2\">…</schmancy-navigation-rail>\n *   → items container <div>: `grid gap-2`\n *\n *   <schmancy-navigation-rail>…</schmancy-navigation-rail>\n *   → items container <div>: `flex flex-col gap-3 justify-start`\n *\n * @element schmancy-navigation-rail\n * @slot fab - Slot for a floating action button at the top\n * @slot menu - Slot for a menu icon or button below the FAB\n * @slot header - Custom header content slot\n * @slot footer - Custom footer content slot\n * @slot - Default slot for navigation rail items\n *\n * @fires navigate - When a navigation item is selected\n * @fires menu-click - When the menu button is clicked\n * @fires fab-click - When the FAB is clicked\n *\n * @csspart rail - The main rail container\n * @csspart header - The header section\n * @csspart nav - The navigation scroll region (contains items)\n * @csspart items - The direct layout container for slotted items (inside schmancy-scroll)\n * @csspart footer - The footer section\n *\n * @example\n * <schmancy-navigation-rail activeIndex=\"0\">\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\n *     <schmancy-icon>add</schmancy-icon>\n *   </schmancy-button>\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\n *     <schmancy-icon>menu</schmancy-icon>\n *   </schmancy-button>\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\n * </schmancy-navigation-rail>\n */\n@customElement('schmancy-navigation-rail')\nexport class SchmancyNavigationRail extends SchmancyElement {\n\t// Observable state\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\n\n\t// Properties\n\t/**\n\t * The currently active item index\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tget activeIndex() {\n\t\treturn this.activeIndex$.value\n\t}\n\tset activeIndex(value: number) {\n\t\tthis.activeIndex$.next(value)\n\t}\n\n\t/**\n\t * The currently active item value (for programmatic selection)\n\t */\n\t@property({ type: String })\n\tget activeValue() {\n\t\treturn this.#activeValue\n\t}\n\tset activeValue(value: string) {\n\t\tthis.#activeValue = value\n\t\tthis.updateActiveByValue(value)\n\t}\n\t#activeValue = ''\n\n\t/**\n\t * When to show labels for navigation items\n\t * 'all' - Always show labels for all items\n\t * 'selected' - Only show label for selected item\n\t * 'none' - Never show labels\n\t * @default 'all'\n\t */\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\n\tlabelVisibility: LabelVisibility = 'all'\n\n\t/**\n\t * Alignment of navigation items\n\t * @default 'top'\n\t */\n\t@property({ type: String, reflect: true })\n\talignment: 'top' | 'center' | 'bottom' = 'top'\n\n\t/**\n\t * Show tooltips when labels are hidden\n\t * @default true\n\t */\n\t@property({ type: Boolean })\n\tshowTooltips = true\n\n\t/**\n\t * Enable keyboard navigation\n\t * @default true\n\t */\n\t@property({ type: Boolean })\n\tkeyboardNavigation = true\n\n\t/**\n\t * Whether the navigation rail is expanded\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\texpanded = false\n\n\n\t// State\n\t@state()\n\tprivate focusedIndex = -1\n\n\t@state()\n\tprivate hasHeaderContent = false\n\n\t@state()\n\tprivate isFullscreen = false\n\n\t/**\n\t * Layout-related classes extracted from the host's `class` attribute.\n\t * Forwarded verbatim to the inner `<nav>` element.\n\t * When empty, the nav falls back to the M3 default: `flex flex-col gap-3`.\n\t */\n\t@state()\n\tprivate hostLayoutClasses = ''\n\n\t// Queries\n\n\t@queryAssignedElements({ flatten: true })\n\tprivate allElements!: Element[]\n\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up keyboard navigation if enabled\n\t\tif (this.keyboardNavigation) {\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t\t}\n\n\t\t// Subscribe to active index changes with distinct values only\n\t\tthis.activeIndex$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(index => this.updateActiveStates(index)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Listen to fullscreen events\n\t\tfromEvent(window, 'fullscreen').pipe(\n\t\t\ttap((event: Event) => {\n\t\t\t\tconst customEvent = event as CustomEvent\n\t\t\t\tthis.isFullscreen = customEvent.detail\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\n\t\t// Watch the host's `class` attribute for layout utilities and forward them\n\t\t// to the inner <nav>. The Observable wraps MutationObserver so teardown is\n\t\t// handled by the existing takeUntil(this.disconnecting) pattern.\n\t\tnew Observable<string>(subscriber => {\n\t\t\tconst extract = () =>\n\t\t\t\tArray.from(this.classList)\n\t\t\t\t\t.filter(c => LAYOUT_CLASS_RE.test(c))\n\t\t\t\t\t.join(' ')\n\n\t\t\tsubscriber.next(extract())\n\n\t\t\tconst mo = new MutationObserver(() => subscriber.next(extract()))\n\t\t\tmo.observe(this, { attributes: true, attributeFilter: ['class'] })\n\t\t\treturn () => mo.disconnect()\n\t\t}).pipe(\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(layoutClasses => { this.hostLayoutClasses = layoutClasses }),\n\t\t\ttakeUntil(this.disconnecting),\n\t\t).subscribe()\n\n\t\t// Listen for navigate events from child items\n\t\tthis.setupNavigateListener()\n\n\t\t// Set up label visibility\n\t\tthis.updateLabelVisibility()\n\n\t\t// Update ARIA attributes\n\t\tthis.setAttribute('role', 'navigation')\n\t\tthis.setAttribute('aria-label', 'Main navigation')\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\tif (changedProperties.has('labelVisibility')) {\n\t\t\tthis.updateLabelVisibility()\n\t\t}\n\n\t\tif (changedProperties.has('activeValue')) {\n\t\t\tthis.updateActiveByValue(this.activeValue)\n\t\t}\n\n\t\tif (changedProperties.has('expanded')) {\n\t\t\tthis.updateLabelVisibility()\n\t\t}\n\t}\n\n\tprivate updateActiveStates(index: number) {\n\t\tthis.navigationItems.forEach((item, i) => {\n\t\t\tconst isActive = i === index\n\t\t\titem.active = isActive\n\t\t\titem.setAttribute('aria-selected', String(isActive))\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\n\n\t\t\t// Update activeValue when index changes\n\t\t\tif (isActive) {\n\t\t\t\tthis.#activeValue = item.value || item.label || ''\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate updateActiveByValue(value: string) {\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\n\t\tif (index >= 0) {\n\t\t\tthis.activeIndex = index\n\t\t}\n\t}\n\n\tprivate updateLabelVisibility() {\n\t\tthis.navigationItems.forEach((item, i) => {\n\t\t\tlet shouldShowLabel = false\n\n\t\t\t// M3 Spec: In expanded state, always show all labels\n\t\t\tif (this.expanded) {\n\t\t\t\tshouldShowLabel = true\n\t\t\t} else {\n\t\t\t\t// In collapsed state, respect labelVisibility setting\n\t\t\t\tshouldShowLabel =\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\n\t\t\t}\n\n\t\t\titem.showLabel = shouldShowLabel\n\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\n\t\t\t\titem.setAttribute('title', item.label)\n\t\t\t} else {\n\t\t\t\titem.removeAttribute('title')\n\t\t\t}\n\t\t})\n\t}\n\n\t// Note: Hover-based label showing removed for M3 compliance\n\t// Labels are now controlled via labelVisibility property and expanded state\n\n\t/**\n\t * Programmatically expand the navigation rail\n\t */\n\texpand() {\n\t\tthis.expanded = true\n\t}\n\n\t/**\n\t * Programmatically collapse the navigation rail\n\t */\n\tcollapse() {\n\t\tthis.expanded = false\n\t}\n\n\t/**\n\t * Add a boat item to the navigation rail\n\t * @param config Configuration for the boat item\n\t * @returns The created or existing navigation rail item element\n\t */\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\n\t\t// Check if item already exists\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\n\t\tif (existingItem) {\n\t\t\t// Item already exists, just return it\n\t\t\treturn existingItem\n\t\t}\n\n\t\t// Create new item\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\n\t\titem.setAttribute('value', config.id)\n\t\titem.innerHTML = `\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\n\t\t\t${config.title}\n\t\t`\n\t\t// Add to the rail before any footer content\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\n\t\tif (footer) {\n\t\t\tthis.insertBefore(item, footer)\n\t\t} else {\n\t\t\tthis.appendChild(item)\n\t\t}\n\t\treturn item\n\t}\n\n\t/**\n\t * Toggle the navigation rail between expanded and collapsed states\n\t */\n\ttoggle() {\n\t\tthis.expanded = !this.expanded\n\t}\n\n\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tconst items = this.navigationItems\n\t\tif (items.length === 0) return\n\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = 0\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = items.length - 1\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tif (newIndex >= 0) {\n\t\t\t\t\titems[newIndex].click()\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\tdefault:\n\t\t\t\treturn\n\t\t}\n\n\t\tthis.focusedIndex = newIndex\n\t\titems[newIndex].focus()\n\t}\n\n\tprivate handleFabClick(event: Event) {\n\t\tevent.stopPropagation()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('fab-click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate handleMenuClick(event: Event) {\n\t\tevent.stopPropagation()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('menu-click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprotected render() {\n\t\t// Host-level classes for the navigation rail (width, visibility, z-index).\n\t\t// Layout utilities the author placed on the host are NOT included here —\n\t\t// they are forwarded to the inner <nav> via hostLayoutClasses instead.\n\t\tconst hostClasses = this.classMap({\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\n\t\t\t'flex flex-col': true,\n\t\t\t'h-full': true,\n\t\t\t'box-border relative overflow-visible': true,\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\n\n\t\t\t// Width - collapses to 0 when fullscreen\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\n\n\t\t\t// Visibility and transition\n\t\t\t'transition-all duration-300 ease-emphasized': true,\n\t\t\t'opacity-100': !this.isFullscreen,\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\n\t\t})\n\n\t\t// Rail container - programmatically controlled width\n\t\tconst railClasses = this.classMap({\n\t\t\t// Layout & Structure\n\t\t\t'flex flex-col h-full': true,\n\t\t\t'box-border relative': true,\n\n\t\t\t// M3 Colors & Theme\n\t\t\t'bg-container-lowest text-surface-on': true,\n\n\t\t\t// M3 Motion - smooth transitions for width and shadow\n\t\t\t'transition-all duration-300 ease-emphasized': true,\n\n\t\t\t// Collapsed state (default) - M3 standard 80px width\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\n\n\t\t\t// Expanded state - M3 expanded width with shadow\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\n\t\t})\n\n\t\t// Header section classes - hidden when no content\n\t\tconst headerClasses = this.classMap({\n\t\t\t'flex flex-col items-center gap-1': true,\n\t\t\t'hidden': !this.hasHeaderContent,\n\t\t})\n\n\t\t// Navigation container <nav> — holds a single <schmancy-scroll> child, so only\n\t\t// vertical fill classes belong here. Layout of the items themselves lives on the\n\t\t// inner <div part=\"items\"> so that the items' flat-tree parent is that div, not nav.\n\t\tconst navClasses = this.classMap({\n\t\t\t'flex-1': true,\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\n\t\t})\n\n\t\t// Items container <div> — the direct flat-tree parent of slotted navigation items\n\t\t// after re-slotting through <schmancy-scroll>. Layout utilities forwarded from the\n\t\t// host land here so that `grid gap-2` (or any other layout) actually shapes items.\n\t\t// When the host carries no layout classes, default to M3 flex-column + alignment.\n\t\tconst hasHostLayout = this.hostLayoutClasses.length > 0\n\t\tconst itemsContainerClasses = hasHostLayout\n\t\t\t? this.hostLayoutClasses\n\t\t\t: this.classMap({\n\t\t\t\t\t'flex flex-col gap-3': true,\n\t\t\t\t\t'justify-start': this.alignment === 'top',\n\t\t\t\t\t'justify-center': this.alignment === 'center',\n\t\t\t\t\t'justify-end': this.alignment === 'bottom',\n\t\t\t\t})\n\n\t\t// Footer section classes\n\t\tconst footerClasses = this.classMap({\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${hostClasses}\n\t\t\t>\n\t\t\t\t<div class=${railClasses} part=\"rail\">\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\n\t\t\t\t\t\t\t<div class=${itemsContainerClasses} part=\"items\">\n\t\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-scroll>\n\t\t\t\t\t</nav>\n\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n\n\tprivate setupNavigateListener() {\n\t\t// Listen for navigate events from child items\n\t\tthis.addEventListener('navigate', (e: Event) => {\n\t\t\tif (e instanceof CustomEvent) {\n\t\t\t\tconst value = e.detail\n\t\t\t\t// Find the item that dispatched the event and update active state\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\n\t\t\t\tif (itemIndex >= 0) {\n\t\t\t\t\tthis.activeIndex = itemIndex\n\t\t\t\t\tthis.#activeValue = value\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate handleHeaderSlotChange() {\n\t\t// Check if any header slot has content\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\n\t\tif (headerDiv) {\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s =>\n\t\t\t\ts.assignedNodes({ flatten: true }).length > 0\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate handleSlotChange() {\n\t\t// Update items when slot content changes\n\t\tthis.updateLabelVisibility()\n\t\tthis.updateActiveStates(this.activeIndex)\n\n\t\t// Set ARIA attributes on items\n\t\tthis.navigationItems.forEach((item, index) => {\n\t\t\titem.setAttribute('role', 'listitem')\n\t\t\tif (!item.hasAttribute('tabindex')) {\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\n\t\t\t}\n\t\t})\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"navigation-rail.cjs","names":["#activeValue"],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends SchmancyElement {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px minimum hit target; vertical padding is consumer-controlled)\n\t\t\t// justify-start pins the icon to the row top so its vertical center is invariant\n\t\t\t// across label-visibility states — consumer rows can align siblings to it.\n\t\t\t'flex flex-col items-center justify-start': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<schmancy-icon class=${iconClasses} part=\"icon-text\">\n\t\t\t\t\t\t\t\t\t\t${this.active ? `${this.icon}-fill` : this.icon}\n\t\t\t\t\t\t\t\t\t</schmancy-icon>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { BehaviorSubject, fromEvent, Observable, takeUntil } from 'rxjs'\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\n\n/**\n * Regex matching Tailwind utility prefixes that control items-container layout.\n * Classes matching this are forwarded from the host's `class` attribute to the\n * inner `<nav>` element so authors can write e.g. `class=\"grid gap-2\"` on the\n * host and have the items container adopt that layout.\n * Classes NOT matching (bg-*, text-*, shadow-*, etc.) stay on the host only.\n */\nconst LAYOUT_CLASS_RE =\n\t/^(grid($|-)|flex($|-)|gap-|col-|row-|justify-|items-|content-|place-|auto-|grid-cols-|grid-rows-)/\n\nexport type NavigateEvent = CustomEvent<string>\n\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\n\nexport type NavigationRailFabClickEvent = CustomEvent<void>\n\nexport type LabelVisibility = 'all' | 'selected' | 'none'\n\n/**\n * Material Design 3 Navigation Rail Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail>` component\n *\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\n *\n * ## Layout composition\n * Place layout utilities directly on the host element. They are forwarded to the\n * items container `<div part=\"items\">` (the direct flat-tree parent of slotted items,\n * placed inside `<schmancy-scroll>`). When no layout utilities are present on the host,\n * the items container defaults to `flex flex-col gap-3` plus the `justify-*` class\n * driven by the `alignment` property.\n *\n *   <schmancy-navigation-rail class=\"grid gap-2\">…</schmancy-navigation-rail>\n *   → items container <div>: `grid gap-2`\n *\n *   <schmancy-navigation-rail>…</schmancy-navigation-rail>\n *   → items container <div>: `flex flex-col gap-3 justify-start`\n *\n * @element schmancy-navigation-rail\n * @slot fab - Slot for a floating action button at the top\n * @slot menu - Slot for a menu icon or button below the FAB\n * @slot header - Custom header content slot\n * @slot footer - Custom footer content slot\n * @slot - Default slot for navigation rail items\n *\n * @fires navigate - When a navigation item is selected\n * @fires menu-click - When the menu button is clicked\n * @fires fab-click - When the FAB is clicked\n *\n * @csspart rail - The main rail container\n * @csspart header - The header section\n * @csspart nav - The navigation scroll region (contains items)\n * @csspart items - The direct layout container for slotted items (inside schmancy-scroll)\n * @csspart footer - The footer section\n *\n * @example\n * <schmancy-navigation-rail activeIndex=\"0\">\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\n *     <schmancy-icon>add</schmancy-icon>\n *   </schmancy-button>\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\n *     <schmancy-icon>menu</schmancy-icon>\n *   </schmancy-button>\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\n * </schmancy-navigation-rail>\n */\n@customElement('schmancy-navigation-rail')\nexport class SchmancyNavigationRail extends SchmancyElement {\n\t// Observable state\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\n\n\t// Properties\n\t/**\n\t * The currently active item index\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tget activeIndex() {\n\t\treturn this.activeIndex$.value\n\t}\n\tset activeIndex(value: number) {\n\t\tthis.activeIndex$.next(value)\n\t}\n\n\t/**\n\t * The currently active item value (for programmatic selection)\n\t */\n\t@property({ type: String })\n\tget activeValue() {\n\t\treturn this.#activeValue\n\t}\n\tset activeValue(value: string) {\n\t\tthis.#activeValue = value\n\t\tthis.updateActiveByValue(value)\n\t}\n\t#activeValue = ''\n\n\t/**\n\t * When to show labels for navigation items\n\t * 'all' - Always show labels for all items\n\t * 'selected' - Only show label for selected item\n\t * 'none' - Never show labels\n\t * @default 'all'\n\t */\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\n\tlabelVisibility: LabelVisibility = 'all'\n\n\t/**\n\t * Alignment of navigation items\n\t * @default 'top'\n\t */\n\t@property({ type: String, reflect: true })\n\talignment: 'top' | 'center' | 'bottom' = 'top'\n\n\t/**\n\t * Show tooltips when labels are hidden\n\t * @default true\n\t */\n\t@property({ type: Boolean })\n\tshowTooltips = true\n\n\t/**\n\t * Enable keyboard navigation\n\t * @default true\n\t */\n\t@property({ type: Boolean })\n\tkeyboardNavigation = true\n\n\t/**\n\t * Whether the navigation rail is expanded\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\texpanded = false\n\n\t// State\n\t@state()\n\tprivate focusedIndex = -1\n\n\t@state()\n\tprivate hasHeaderContent = false\n\n\t@state()\n\tprivate isFullscreen = false\n\n\t/**\n\t * Layout-related classes extracted from the host's `class` attribute.\n\t * Forwarded verbatim to the inner `<nav>` element.\n\t * When empty, the nav falls back to the M3 default: `flex flex-col gap-3`.\n\t */\n\t@state()\n\tprivate hostLayoutClasses = ''\n\n\t// Queries\n\n\t@queryAssignedElements({ flatten: true })\n\tprivate allElements!: Element[]\n\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up keyboard navigation if enabled\n\t\tif (this.keyboardNavigation) {\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t\t}\n\n\t\t// Subscribe to active index changes with distinct values only\n\t\tthis.activeIndex$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(index => this.updateActiveStates(index)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Listen to fullscreen events\n\t\tfromEvent(window, 'fullscreen')\n\t\t\t.pipe(\n\t\t\t\ttap((event: Event) => {\n\t\t\t\t\tconst customEvent = event as CustomEvent\n\t\t\t\t\tthis.isFullscreen = customEvent.detail\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Watch the host's `class` attribute for layout utilities and forward them\n\t\t// to the inner <nav>. The Observable wraps MutationObserver so teardown is\n\t\t// handled by the existing takeUntil(this.disconnecting) pattern.\n\t\tnew Observable<string>(subscriber => {\n\t\t\tconst extract = () =>\n\t\t\t\tArray.from(this.classList)\n\t\t\t\t\t.filter(c => LAYOUT_CLASS_RE.test(c))\n\t\t\t\t\t.join(' ')\n\n\t\t\tsubscriber.next(extract())\n\n\t\t\tconst mo = new MutationObserver(() => subscriber.next(extract()))\n\t\t\tmo.observe(this, { attributes: true, attributeFilter: ['class'] })\n\t\t\treturn () => mo.disconnect()\n\t\t})\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(layoutClasses => {\n\t\t\t\t\tthis.hostLayoutClasses = layoutClasses\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Listen for navigate events from child items\n\t\tthis.setupNavigateListener()\n\n\t\t// Set up label visibility\n\t\tthis.updateLabelVisibility()\n\n\t\t// Update ARIA attributes\n\t\tthis.setAttribute('role', 'navigation')\n\t\tthis.setAttribute('aria-label', 'Main navigation')\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\tif (changedProperties.has('labelVisibility')) {\n\t\t\tthis.updateLabelVisibility()\n\t\t}\n\n\t\tif (changedProperties.has('activeValue')) {\n\t\t\tthis.updateActiveByValue(this.activeValue)\n\t\t}\n\n\t\tif (changedProperties.has('expanded')) {\n\t\t\tthis.updateLabelVisibility()\n\t\t}\n\t}\n\n\tprivate updateActiveStates(index: number) {\n\t\tthis.navigationItems.forEach((item, i) => {\n\t\t\tconst isActive = i === index\n\t\t\titem.active = isActive\n\t\t\titem.setAttribute('aria-selected', String(isActive))\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\n\n\t\t\t// Update activeValue when index changes\n\t\t\tif (isActive) {\n\t\t\t\tthis.#activeValue = item.value || item.label || ''\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate updateActiveByValue(value: string) {\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\n\t\tif (index >= 0) {\n\t\t\tthis.activeIndex = index\n\t\t}\n\t}\n\n\tprivate updateLabelVisibility() {\n\t\tthis.navigationItems.forEach((item, i) => {\n\t\t\tlet shouldShowLabel = false\n\n\t\t\t// M3 Spec: In expanded state, always show all labels\n\t\t\tif (this.expanded) {\n\t\t\t\tshouldShowLabel = true\n\t\t\t} else {\n\t\t\t\t// In collapsed state, respect labelVisibility setting\n\t\t\t\tshouldShowLabel =\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\n\t\t\t}\n\n\t\t\titem.showLabel = shouldShowLabel\n\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\n\t\t\t\titem.setAttribute('title', item.label)\n\t\t\t} else {\n\t\t\t\titem.removeAttribute('title')\n\t\t\t}\n\t\t})\n\t}\n\n\t// Note: Hover-based label showing removed for M3 compliance\n\t// Labels are now controlled via labelVisibility property and expanded state\n\n\t/**\n\t * Programmatically expand the navigation rail\n\t */\n\texpand() {\n\t\tthis.expanded = true\n\t}\n\n\t/**\n\t * Programmatically collapse the navigation rail\n\t */\n\tcollapse() {\n\t\tthis.expanded = false\n\t}\n\n\t/**\n\t * Add a boat item to the navigation rail\n\t * @param config Configuration for the boat item\n\t * @returns The created or existing navigation rail item element\n\t */\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\n\t\t// Check if item already exists\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\n\t\tif (existingItem) {\n\t\t\t// Item already exists, just return it\n\t\t\treturn existingItem\n\t\t}\n\n\t\t// Create new item\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\n\t\titem.setAttribute('value', config.id)\n\t\titem.innerHTML = `\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\n\t\t\t${config.title}\n\t\t`\n\t\t// Add to the rail before any footer content\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\n\t\tif (footer) {\n\t\t\tthis.insertBefore(item, footer)\n\t\t} else {\n\t\t\tthis.appendChild(item)\n\t\t}\n\t\treturn item\n\t}\n\n\t/**\n\t * Toggle the navigation rail between expanded and collapsed states\n\t */\n\ttoggle() {\n\t\tthis.expanded = !this.expanded\n\t}\n\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tconst items = this.navigationItems\n\t\tif (items.length === 0) return\n\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = 0\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tnewIndex = items.length - 1\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\tevent.preventDefault()\n\t\t\t\tif (newIndex >= 0) {\n\t\t\t\t\titems[newIndex].click()\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\tdefault:\n\t\t\t\treturn\n\t\t}\n\n\t\tthis.focusedIndex = newIndex\n\t\titems[newIndex].focus()\n\t}\n\n\tprivate handleFabClick(event: Event) {\n\t\tevent.stopPropagation()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('fab-click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate handleMenuClick(event: Event) {\n\t\tevent.stopPropagation()\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('menu-click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprotected render() {\n\t\t// Host-level classes for the navigation rail (width, visibility, z-index).\n\t\t// Layout utilities the author placed on the host are NOT included here —\n\t\t// they are forwarded to the inner <nav> via hostLayoutClasses instead.\n\t\tconst hostClasses = this.classMap({\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\n\t\t\t'flex flex-col': true,\n\t\t\t'h-full': true,\n\t\t\t'box-border relative overflow-visible': true,\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\n\n\t\t\t// Width - collapses to 0 when fullscreen\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\n\n\t\t\t// Visibility and transition\n\t\t\t'transition-all duration-300 ease-emphasized': true,\n\t\t\t'opacity-100': !this.isFullscreen,\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\n\t\t})\n\n\t\t// Rail container - programmatically controlled width\n\t\tconst railClasses = this.classMap({\n\t\t\t// Layout & Structure\n\t\t\t'flex flex-col h-full': true,\n\t\t\t'box-border relative': true,\n\n\t\t\t// M3 Colors & Theme\n\t\t\t'bg-container-lowest text-surface-on': true,\n\n\t\t\t// M3 Motion - smooth transitions for width and shadow\n\t\t\t'transition-all duration-300 ease-emphasized': true,\n\n\t\t\t// Collapsed state (default) - M3 standard 80px width\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\n\n\t\t\t// Expanded state - M3 expanded width with shadow\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\n\t\t})\n\n\t\t// Header section classes - hidden when no content\n\t\tconst headerClasses = this.classMap({\n\t\t\t'flex flex-col items-center gap-1': true,\n\t\t\thidden: !this.hasHeaderContent,\n\t\t})\n\n\t\t// Navigation container <nav> — holds a single <schmancy-scroll> child, so only\n\t\t// vertical fill classes belong here. Layout of the items themselves lives on the\n\t\t// inner <div part=\"items\"> so that the items' flat-tree parent is that div, not nav.\n\t\tconst navClasses = this.classMap({\n\t\t\t'flex-1': true,\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\n\t\t})\n\n\t\t// Items container <div> — the direct flat-tree parent of slotted navigation items\n\t\t// after re-slotting through <schmancy-scroll>. Layout utilities forwarded from the\n\t\t// host land here so that `grid gap-2` (or any other layout) actually shapes items.\n\t\t// When the host carries no layout classes, default to M3 flex-column + alignment.\n\t\tconst hasHostLayout = this.hostLayoutClasses.length > 0\n\t\tconst itemsContainerClasses = hasHostLayout\n\t\t\t? this.hostLayoutClasses\n\t\t\t: this.classMap({\n\t\t\t\t\t'flex flex-col gap-3': true,\n\t\t\t\t\t'justify-start': this.alignment === 'top',\n\t\t\t\t\t'justify-center': this.alignment === 'center',\n\t\t\t\t\t'justify-end': this.alignment === 'bottom',\n\t\t\t\t})\n\n\t\t// Footer section classes\n\t\tconst footerClasses = this.classMap({\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div class=${hostClasses}>\n\t\t\t\t<div class=${railClasses} part=\"rail\">\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\n\t\t\t\t\t\t\t<div class=${itemsContainerClasses} part=\"items\">\n\t\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-scroll>\n\t\t\t\t\t</nav>\n\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n\n\tprivate setupNavigateListener() {\n\t\t// Listen for navigate events from child items\n\t\tthis.addEventListener('navigate', (e: Event) => {\n\t\t\tif (e instanceof CustomEvent) {\n\t\t\t\tconst value = e.detail\n\t\t\t\t// Find the item that dispatched the event and update active state\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\n\t\t\t\tif (itemIndex >= 0) {\n\t\t\t\t\tthis.activeIndex = itemIndex\n\t\t\t\t\tthis.#activeValue = value\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate handleHeaderSlotChange() {\n\t\t// Check if any header slot has content\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\n\t\tif (headerDiv) {\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s => s.assignedNodes({ flatten: true }).length > 0)\n\t\t}\n\t}\n\n\tprivate handleSlotChange() {\n\t\t// Update items when slot content changes\n\t\tthis.updateLabelVisibility()\n\t\tthis.updateActiveStates(this.activeIndex)\n\n\t\t// Set ARIA attributes on items\n\t\tthis.navigationItems.forEach((item, index) => {\n\t\t\titem.setAttribute('role', 'listitem')\n\t\t\tif (!item.hasAttribute('tabindex')) {\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\n\t\t\t}\n\t\t})\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\n\t}\n}\n"],"mappings":"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"}

package/dist/navigation-rail.js

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-OWgz9ePG.js";
-import "./mixins-COeG4DiX.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import "./mixins-q4KAL8Xr.js";
 import { BehaviorSubject as n, Observable as r, fromEvent as i, merge as a, takeUntil as o } from "rxjs";
 import { delay as s, distinctUntilChanged as c, tap as l } from "rxjs/operators";
 import { customElement as u, property as d, queryAssignedElements as f, state as p } from "lit/decorators.js";
@@ -312,9 +312,7 @@ var _ = /^(grid($|-)|flex($|-)|gap-|col-|row-|justify-|items-|content-|place-|au
 			"justify-end": this.alignment === "bottom"
 		}), a = this.classMap({ "flex flex-col items-center gap-1 mt-auto pt-2": !0 });
 		return m`
-			<div
-				class=${e}
-			>
+			<div class=${e}>
 				<div class=${t} part="rail">
 					<div class=${n} part="header">
 						<slot name="fab" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>