@mhmo91/schmancy 0.10.35 → 0.10.36

package/dist/{select-9vXx1fhr.js.map → select-CEyhNtZ2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"select-9vXx1fhr.js","names":[],"sources":["../src/form/fields/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { SchmancyFormField } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { BehaviorSubject, combineLatest, fromEvent, Subject, takeUntil } from 'rxjs'\nimport { tap, withLatestFrom } from 'rxjs/operators'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n/**\n * Select dropdown component with single and multi-select support.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} label - Label text displayed above the select\n * @prop {string} placeholder - Placeholder text when no value is selected\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} multi - Enable multi-select mode\n * @prop {string} value - Selected value (single select mode)\n * @prop {string[]} values - Selected values (multi-select mode)\n */\n@customElement('schmancy-select')\nexport class SchmancySelect extends SchmancyFormField() {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`]\n\n\t// FACE wiring (formAssociated, internals, attachInternals) comes from\n\t// SchmancyFormField. Same for: name, required, disabled, validationMessage,\n\t// validateOn, touched/dirty/pristine/submitted, markTouched/markSubmitted,\n\t// formResetCallback, formDisabledCallback, FIELD_CONNECT_EVENT dispatch.\n\n\t@property({ type: String }) placeholder = ''\n\n\t// Override `value` with the narrowed select-specific type and a custom\n\t// getter/setter pair backed by reactive subjects.\n\t@property({ type: String, reflect: true })\n\toverride get value(): string | string[] {\n\t\treturn this.multi\n\t\t\t? (this._selectedValues$?.value ?? [])\n\t\t\t: (this._selectedValue$?.value ?? '')\n\t}\n\toverride set value(val: string | string[]) {\n\t\tif (!this._selectedValue$ || !this._selectedValues$) return\n\t\tif (this.multi) {\n\t\t\tconst values = Array.isArray(val)\n\t\t\t\t? val\n\t\t\t\t: val ? String(val).split(',').map(v => v.trim()).filter(Boolean) : []\n\t\t\tthis._selectedValues$.next(values)\n\t\t} else {\n\t\t\tthis._selectedValue$.next(val == null ? '' : String(val))\n\t\t}\n\t}\n\n\t// Values property for multi-select mode\n\t@property({ type: Array })\n\tget values() {\n\t\treturn [...this._selectedValues$.value]\n\t}\n\tset values(vals: string[]) {\n\t\tthis._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])\n\t}\n\n\t@property({ type: Boolean }) multi = false\n\t// `label` and `hint` come from the mixin.\n\t// M3 aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)\n\t@property({ type: String }) size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\n\t// Store the initial/default value for reset behavior. Distinct from the\n\t// mixin's `_defaultValue` (which is `string` only); select needs the wider\n\t// shape so resetForm can restore arrays for multi-select.\n\t@state() private selectDefaultValue: string | string[] = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('sch-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\t// Reactive state management\n\tprivate _options$ = new BehaviorSubject<SchmancyOption[]>([])\n\tprivate _selectedValue$ = new BehaviorSubject<string>('')\n\tprivate _selectedValues$ = new BehaviorSubject<string[]>([])\n\tprivate _optionSelect$ = new Subject<SchmancyOption>()\n\n\t/**\n\t * Tracks whether the user has actively interacted (clicked/typed/keyed\n\t * inside the dropdown). Distinct from the mixin's `touched` (which fires on\n\t * blur). Used to gate dropdown-positioning side-effects on user-driven\n\t * actions versus programmatic state changes.\n\t */\n\t@state() _userInteracted = false\n\n\t// Reference to current focused option (for keyboard navigation)\n\t@state() private _focusedOptionId = ''\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substring(2, 9)}`\n\t\t}\n\n\t\t// Store initial value for reset\n\t\tthis.selectDefaultValue = this.value\n\n\t\t// Add keyboard handling to host element\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(takeUntil(this.disconnecting)).subscribe(this.handleKeyDown)\n\n\t\t// Setup reactive pipelines\n\t\tthis._setupReactivePipelines()\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanupPositioner?.()\n\t\t// Form event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\n\t\t// Initially hide any validation errors until user interacts\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t}\n\t}\n\n\toverride updated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Multi-select serializes to a comma-joined scalar on FormData; the\n\t\t\t// mixin's willUpdate already called setFormValue with the raw\n\t\t\t// value, override here for the joined-string shape.\n\t\t\tconst formValue = this.multi\n\t\t\t\t? this._selectedValues$.value.join(',')\n\t\t\t\t: this._selectedValue$.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// `dirty` is a mixin getter (value !== _defaultValue); no manual flag.\n\t\t\t// Mixin's willUpdate already calls checkValidity when _shouldShowError().\n\t\t}\n\n\t\t// When open state changes, setup or cleanup the dropdown positioner\n\t\tif (changedProps.has('isOpen')) {\n\t\t\tif (this.isOpen) {\n\t\t\t\tthis.positionDropdown()\n\t\t\t} else {\n\t\t\t\tthis.cleanupPositioner?.()\n\t\t\t}\n\t\t}\n\t}\n\n\t// `shouldShowValidation` removed — replaced by mixin's `_shouldShowError()`.\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\t// Read directly from the BehaviorSubject to avoid string conversion issues\n\t\t\tconst selectedValues = this._selectedValues$.value\n\t\t\tthis.options?.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t?.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t.join(', ') || this.placeholder\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\t// Single select - read from BehaviorSubject\n\t\t\tconst currentValue = this._selectedValue$.value\n\t\t\tthis.options?.forEach(o => {\n\t\t\t\t// Set selected property on each option based on matching value\n\t\t\t\to.selected = o.value === currentValue\n\t\t\t})\n\t\t\tconst selectedOption = this.options?.find(o => o.value === currentValue)\n\t\t\tthis.valueLabel = selectedOption ? (selectedOption.label || selectedOption.textContent || '') : this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options?.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\n\t\t\t// Set tabindex to -1 so they're focusable programmatically but not in the tab order\n\t\t\toption.tabIndex = -1\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this._selectedValues$.value.includes(option.value) : option.value === this._selectedValue$.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\t// Get viewport dimensions\n\t\t\tconst viewportHeight = window.innerHeight\n\t\t\tconst triggerRect = reference.getBoundingClientRect()\n\n\t\t\t// Calculate available space below and above\n\t\t\tconst spaceBelow = viewportHeight - triggerRect.bottom\n\t\t\tconst spaceAbove = triggerRect.top\n\n\t\t\t// Calculate max height - use 75% of the largest available space, but at least 150px\n\t\t\tconst maxHeight = Math.max(Math.max(spaceBelow, spaceAbove) * 0.75, 150)\n\n\t\t\t// Determine if we should flip\n\t\t\tconst shouldFlip = spaceBelow < 200 && spaceAbove > spaceBelow\n\n\t\t\t// Apply max height\n\t\t\tthis.ul.style.maxHeight = `${maxHeight}px`\n\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: shouldFlip ? 'top-start' : 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t\twidth: `${reference.offsetWidth}px`, // Match the width of the trigger\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\t// Don't handle keyboard events when disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\t// Find current focused option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst current = options.findIndex(o => o.id === this._focusedOptionId) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.min(current + 1, options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, 0)\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, options.length - 1)\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (this._focusedOptionId) {\n\t\t\t\t\tconst focusedOption = options.find(opt => opt.id === this._focusedOptionId)\n\t\t\t\t\tif (focusedOption) {\n\t\t\t\t\t\tthis.handleOptionSelect(focusedOption.value)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: SchmancyOption[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tthis._focusedOptionId = option.id\n\n\t\t\t// Update aria-activedescendant on the combobox\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tif (combobox) {\n\t\t\t\tcombobox.setAttribute('aria-activedescendant', option.id)\n\t\t\t}\n\n\t\t\t// Ensure option is visible in the scrollable area\n\t\t\tif (this.ul && option.offsetTop !== undefined) {\n\t\t\t\t// Get position info\n\t\t\t\tconst optionTop = option.offsetTop\n\t\t\t\tconst optionHeight = option.offsetHeight\n\t\t\t\tconst scrollTop = this.ul.scrollTop\n\t\t\t\tconst ulHeight = this.ul.clientHeight\n\n\t\t\t\t// Scroll into view if needed\n\t\t\t\tif (optionTop < scrollTop) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop\n\t\t\t\t} else if (optionTop + optionHeight > scrollTop + ulHeight) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop + optionHeight - ulHeight\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\t// Don't open if disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\t// Don't mark as touched on opening - we'll do that on closing\n\t\t// so errors only show after interaction is complete\n\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\t// Focus first or selected option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.value === this._selectedValue$.value)\n\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\n\t\t// Don't automatically validate when opening\n\t\t// Only validate if explicitly requested (like from a form submission)\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\t// Only mark as touched if the user actually interacted with the component\n\t\t// and made a selection or explicitly closed it without selecting\n\t\tif (this._userInteracted) {\n\t\t\tthis.touched = true\n\t\t}\n\n\t\tthis.isOpen = false\n\t\tthis._focusedOptionId = ''\n\n\t\t// Update combobox to remove aria-activedescendant\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tif (combobox) {\n\t\t\tcombobox.removeAttribute('aria-activedescendant')\n\t\t\tcombobox?.focus()\n\t\t}\n\n\t\t// Only check validity when closing if the user has actually interacted\n\t\t// with the component and validation should be shown\n\t\tif (this._userInteracted && this._shouldShowError()) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\tprivate _setupReactivePipelines() {\n\t\t// Listen for option-select events from child options\n\t\tfromEvent<CustomEvent>(this, 'option-select')\n\t\t\t.pipe(\n\t\t\t\ttap((e) => {\n\t\t\t\t\te.stopPropagation() // Prevent event from bubbling further\n\t\t\t\t\tconst option = this.options.find(o => o.value === e.detail.value)\n\t\t\t\t\tif (option) {\n\t\t\t\t\t\tthis._optionSelect$.next(option)\n\t\t\t\t\t}\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// Handle option selection through reactive pipeline\n\t\tthis._optionSelect$\n\t\t\t.pipe(\n\t\t\t\twithLatestFrom(this._selectedValue$, this._selectedValues$),\n\t\t\t\ttap(([option, _, currentValues]) => {\n\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\tthis.markTouched()\n\t\t\t\t\t// `dirty` is a mixin getter; setting `value` below triggers it\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\tconst index = currentValues.indexOf(option.value)\n\t\t\t\t\t\tconst newValues = index > -1\n\t\t\t\t\t\t\t? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]\n\t\t\t\t\t\t\t: [...currentValues, option.value]\n\t\t\t\t\t\tthis._selectedValues$.next(newValues)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(newValues.join(','))\n\n\t\t\t\t\t\t// Update display label\n\t\t\t\t\t\tthis.valueLabel = newValues.length > 0\n\t\t\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t\t\t.filter(o => newValues.includes(o.value))\n\t\t\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t\t\t: this.placeholder\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Single select\n\t\t\t\t\t\tthis._selectedValue$.next(option.value)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(option.value)\n\n\t\t\t\t\t\tthis.valueLabel = option.label || option.textContent || this.placeholder\n\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update the option's accessibility state\n\t\t\t\t\tthis.setupOptionsAccessibility()\n\n\t\t\t\t\t// Dispatch change event\n\t\t\t\t\tthis._fireChangeEvent()\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// Options management pipeline - bind pointerdown events exactly like autocomplete\n\t\tthis._options$\n\t\t\t.pipe(\n\t\t\t\ttap((options) => {\n\t\t\t\t\toptions.forEach((option, index) => {\n\t\t\t\t\t\toption.setAttribute('role', 'option')\n\t\t\t\t\t\toption.tabIndex = -1\n\t\t\t\t\t\tif (!option.id) {\n\t\t\t\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Use data-event-bound to prevent duplicate bindings\n\t\t\t\t\t\tif (!option.hasAttribute('data-event-bound')) {\n\t\t\t\t\t\t\t// Use click event instead of pointerdown for better mobile UX\n\t\t\t\t\t\t\t// This allows users to scroll through options without immediately selecting\n\t\t\t\t\t\t\tfromEvent(option, 'click').pipe(\n\t\t\t\t\t\t\t\ttap(e => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t\t\t).subscribe(() => this._optionSelect$.next(option))\n\t\t\t\t\t\t\toption.setAttribute('data-event-bound', 'true')\n\t\t\t\t\t\t}\n\t\t\t\t\t})\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// Selection sync pipeline - sync selected states with value changes\n\t\tcombineLatest([this._selectedValue$, this._selectedValues$, this._options$])\n\t\t\t.pipe(\n\t\t\t\ttap(([singleValue, multiValues, options]) => {\n\t\t\t\t\tif (options.length === 0) return\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = multiValues.includes(option.value)\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = option.value === singleValue\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\t// This method is now called from keyboard navigation only\n\t\tconst option = this.options.find(o => o.value === value)\n\t\tif (option) {\n\t\t\tthis._optionSelect$.next(option)\n\t\t}\n\t}\n\n\tprivate _fireChangeEvent() {\n\t\t// Get the current value based on multi/single mode\n\t\tconst value = this.multi ? this._selectedValues$.value : this._selectedValue$.value\n\n\t\t// Dispatch only one change event with the value in detail\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Then check validity (only show error if validation should be shown)\n\t\tthis.checkValidity()\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\t// Disabled fields are always valid\n\t\tif (this.disabled) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Determine if the select is empty based on whether it's multi-select or single-select\n\t\tconst isEmpty = this.multi\n\t\t\t? this._selectedValues$.value.length === 0\n\t\t\t: !this._selectedValue$.value\n\n\t\t// Check if the value is valid (not empty when required)\n\t\tconst isValid = !(this.required && isEmpty)\n\n\t\t// Set the validity state\n\t\tthis.isValid = isValid\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\t// Clear validation message\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update the input component to reflect our validation state\n\t\tif (this.inputRef && this.hasUpdated) {\n\t\t\tconst showError = !this.isValid && this._shouldShowError()\n\t\t\tthis.inputRef.error = showError\n\t\t\tthis.inputRef.hint = showError ? this.validationMessage : this.hint\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\t// Force validation display regardless of validation strategy\n\t\tconst valid = this.checkValidity()\n\n\t\t// Force the input to show validation errors\n\t\tif (this.inputRef) {\n\t\t\t// Set the input's error state\n\t\t\tthis.inputRef.error = !valid\n\t\t\tthis.inputRef.hint = !valid ? this.validationMessage : this.hint\n\n\t\t\t// If invalid and not already open, automatically open the dropdown to show options\n\t\t\tif (!valid && !this.isOpen) {\n\t\t\t\t// Open the dropdown but don't mark as user interaction yet\n\t\t\t\t// This helps users immediately see available options when validation fails\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\n\t\t\t// Only call reportValidity on the input if invalid to show the native popup\n\t\t\tif (!valid) {\n\t\t\t\tthis.inputRef.reportValidity()\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\t// `markTouched`, `markSubmitted`, `touched`, `dirty`, `pristine`, `submitted`,\n\t// `error` (storage) — all from the mixin. Select's `error` semantics\n\t// (errors-while-open suppression) live in render() via _shouldShowError() +\n\t// !isOpen, not as a separate getter.\n\n\t/**\n\t * Multi-value-aware `toFormEntries`. Single-select emits one `[name,value]`;\n\t * multi-select emits N entries with the same name (canonical FormData shape\n\t * for repeated fields).\n\t */\n\toverride toFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\tif (!this.name || this.disabled) return []\n\t\tconst v = this.value\n\t\tif (v === undefined || v === null || v === '') return []\n\t\tif (Array.isArray(v))\n\t\t\treturn v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])\n\t\treturn [[this.name, String(v)]]\n\t}\n\n\toverride setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tif (message) {\n\t\t\tthis.isValid = false\n\t\t\tthis.internals?.setValidity({ customError: true }, message, this.inputRef)\n\t\t} else {\n\t\t\tthis.isValid = true\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update input if needed\n\t\tif (this.inputRef && this._shouldShowError()) {\n\t\t\tthis.inputRef.error = !this.isValid\n\t\t\tthis.inputRef.hint = !this.isValid ? this.validationMessage : this.hint\n\t\t}\n\t}\n\n\t/**\n\t * Reset to the snapshot captured at connect time. Mixin's `resetForm`\n\t * handles touched/submitted/error/validationMessage; the override layers on\n\t * select-specific cleanup (value subjects, label, validity).\n\t */\n\toverride resetForm(): void {\n\t\t// Restore value (multi-aware) before super so the mixin's _defaultValue\n\t\t// reset doesn't clobber the array-shape we need.\n\t\tthis.value = this.selectDefaultValue\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis._userInteracted = false\n\t\tthis.internals?.setValidity({})\n\t\tsuper.resetForm()\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t\tthis.inputRef.hint = this.hint\n\t\t}\n\t}\n\n\t/** Back-compat alias for callers that used the previous public API. */\n\tpublic reset(): void {\n\t\tthis.resetForm()\n\t}\n\n\trender(): TemplateResult {\n\t\t// Determine if we should show errors based on the validation strategy and interaction\n\t\t// Never show errors on initial render or if the dropdown is open\n\t\tconst showErrors = !this.isValid && this._shouldShowError() && !this.isOpen\n\n\t\t// Add caret icon based on open state\n\t\tconst caretIcon = this.isOpen\n\t\t\t? html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▲</span>`\n\t\t\t: html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▼</span>`\n\n\t\treturn html`\n\t\t\t<div class=\"relative ${this.disabled ? 'opacity-60 cursor-not-allowed' : ''}\">\n\t\t\t\t<sch-input\n\t\t\t\t\t.name=${this.name ?? ''}\n\t\t\t\t\ttabIndex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\taria-activedescendant=${ifDefined(this._focusedOptionId || undefined)}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t.hint=${showErrors ? this.validationMessage : this.hint}\n\t\t\t\t\t.error=${showErrors}\n\t\t\t\t\t.validateOn=${this.validateOn}\n\t\t\t\t\t.size=${this.size}\n\t\t\t\t\t.readonly=${true}\n\t\t\t\t\tclickable\n\t\t\t\t\t@click=${(e: MouseEvent) => {\n\t\t\t\t\t\t// Don't process clicks if disabled\n\t\t\t\t\t\tif (this.disabled) {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// On first click, don't count this as user interaction yet\n\t\t\t\t\t\tif (!this.isOpen) {\n\t\t\t\t\t\t\t// Open without triggering validation - we'll validate when they close\n\t\t\t\t\t\t\tthis.openDropdown(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// Mark as interacted when they close the dropdown\n\t\t\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t${caretIcon}\n\t\t\t\t</sch-input>\n\n\t\t\t\t<!-- Overlay for capturing clicks outside when dropdown is open -->\n\t\t\t\t${this.isOpen\n\t\t\t\t\t? html` <div class=\"fixed inset-0 z-10\" @click=${this.closeDropdown} tabindex=\"-1\" aria-hidden=\"true\"></div> `\n\t\t\t\t\t: ''}\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute min-w-full w-full z-20 mt-1 rounded-md shadow-lg': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.low,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis._options$.next(this.options)\n\t\t\t\t\t\t\t// Sync selection state when options re-render\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n// Don't export 'select' here as it conflicts with the store's select decorator\n// export const select = SchmancySelect\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"select-CEyhNtZ2.js","names":[],"sources":["../src/form/fields/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { SchmancyFormField } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { BehaviorSubject, combineLatest, fromEvent, Subject, takeUntil } from 'rxjs'\nimport { tap, withLatestFrom } from 'rxjs/operators'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n/**\n * Select dropdown component with single and multi-select support.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} label - Label text displayed above the select\n * @prop {string} placeholder - Placeholder text when no value is selected\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} multi - Enable multi-select mode\n * @prop {string} value - Selected value (single select mode)\n * @prop {string[]} values - Selected values (multi-select mode)\n */\n@customElement('schmancy-select')\nexport class SchmancySelect extends SchmancyFormField() {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`]\n\n\t// FACE wiring (formAssociated, internals, attachInternals) comes from\n\t// SchmancyFormField. Same for: name, required, disabled, validationMessage,\n\t// validateOn, touched/dirty/pristine/submitted, markTouched/markSubmitted,\n\t// formResetCallback, formDisabledCallback, FIELD_CONNECT_EVENT dispatch.\n\n\t@property({ type: String }) placeholder = ''\n\n\t// Override `value` with the narrowed select-specific type and a custom\n\t// getter/setter pair backed by reactive subjects.\n\t@property({ type: String, reflect: true })\n\toverride get value(): string | string[] {\n\t\treturn this.multi\n\t\t\t? (this._selectedValues$?.value ?? [])\n\t\t\t: (this._selectedValue$?.value ?? '')\n\t}\n\toverride set value(val: string | string[]) {\n\t\tif (!this._selectedValue$ || !this._selectedValues$) return\n\t\tif (this.multi) {\n\t\t\tconst values = Array.isArray(val)\n\t\t\t\t? val\n\t\t\t\t: val ? String(val).split(',').map(v => v.trim()).filter(Boolean) : []\n\t\t\tthis._selectedValues$.next(values)\n\t\t} else {\n\t\t\tthis._selectedValue$.next(val == null ? '' : String(val))\n\t\t}\n\t}\n\n\t// Values property for multi-select mode\n\t@property({ type: Array })\n\tget values() {\n\t\treturn [...this._selectedValues$.value]\n\t}\n\tset values(vals: string[]) {\n\t\tthis._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])\n\t}\n\n\t@property({ type: Boolean }) multi = false\n\t// `label` and `hint` come from the mixin.\n\t// M3 aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)\n\t@property({ type: String }) size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\n\t// Store the initial/default value for reset behavior. Distinct from the\n\t// mixin's `_defaultValue` (which is `string` only); select needs the wider\n\t// shape so resetForm can restore arrays for multi-select.\n\t@state() private selectDefaultValue: string | string[] = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('sch-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\t// Reactive state management\n\tprivate _options$ = new BehaviorSubject<SchmancyOption[]>([])\n\tprivate _selectedValue$ = new BehaviorSubject<string>('')\n\tprivate _selectedValues$ = new BehaviorSubject<string[]>([])\n\tprivate _optionSelect$ = new Subject<SchmancyOption>()\n\n\t/**\n\t * Tracks whether the user has actively interacted (clicked/typed/keyed\n\t * inside the dropdown). Distinct from the mixin's `touched` (which fires on\n\t * blur). Used to gate dropdown-positioning side-effects on user-driven\n\t * actions versus programmatic state changes.\n\t */\n\t@state() _userInteracted = false\n\n\t// Reference to current focused option (for keyboard navigation)\n\t@state() private _focusedOptionId = ''\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substring(2, 9)}`\n\t\t}\n\n\t\t// Store initial value for reset\n\t\tthis.selectDefaultValue = this.value\n\n\t\t// Add keyboard handling to host element\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(takeUntil(this.disconnecting)).subscribe(this.handleKeyDown)\n\n\t\t// Setup reactive pipelines\n\t\tthis._setupReactivePipelines()\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanupPositioner?.()\n\t\t// Form event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\n\t\t// Initially hide any validation errors until user interacts\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t}\n\t}\n\n\toverride updated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Multi-select serializes to a comma-joined scalar on FormData; the\n\t\t\t// mixin's willUpdate already called setFormValue with the raw\n\t\t\t// value, override here for the joined-string shape.\n\t\t\tconst formValue = this.multi\n\t\t\t\t? this._selectedValues$.value.join(',')\n\t\t\t\t: this._selectedValue$.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// `dirty` is a mixin getter (value !== _defaultValue); no manual flag.\n\t\t\t// Mixin's willUpdate already calls checkValidity when _shouldShowError().\n\t\t}\n\n\t\t// When open state changes, setup or cleanup the dropdown positioner\n\t\tif (changedProps.has('isOpen')) {\n\t\t\tif (this.isOpen) {\n\t\t\t\tthis.positionDropdown()\n\t\t\t} else {\n\t\t\t\tthis.cleanupPositioner?.()\n\t\t\t}\n\t\t}\n\t}\n\n\t// `shouldShowValidation` removed — replaced by mixin's `_shouldShowError()`.\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\t// Read directly from the BehaviorSubject to avoid string conversion issues\n\t\t\tconst selectedValues = this._selectedValues$.value\n\t\t\tthis.options?.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t?.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t.join(', ') || this.placeholder\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\t// Single select - read from BehaviorSubject\n\t\t\tconst currentValue = this._selectedValue$.value\n\t\t\tthis.options?.forEach(o => {\n\t\t\t\t// Set selected property on each option based on matching value\n\t\t\t\to.selected = o.value === currentValue\n\t\t\t})\n\t\t\tconst selectedOption = this.options?.find(o => o.value === currentValue)\n\t\t\tthis.valueLabel = selectedOption ? (selectedOption.label || selectedOption.textContent || '') : this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options?.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\n\t\t\t// Set tabindex to -1 so they're focusable programmatically but not in the tab order\n\t\t\toption.tabIndex = -1\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this._selectedValues$.value.includes(option.value) : option.value === this._selectedValue$.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\t// Get viewport dimensions\n\t\t\tconst viewportHeight = window.innerHeight\n\t\t\tconst triggerRect = reference.getBoundingClientRect()\n\n\t\t\t// Calculate available space below and above\n\t\t\tconst spaceBelow = viewportHeight - triggerRect.bottom\n\t\t\tconst spaceAbove = triggerRect.top\n\n\t\t\t// Calculate max height - use 75% of the largest available space, but at least 150px\n\t\t\tconst maxHeight = Math.max(Math.max(spaceBelow, spaceAbove) * 0.75, 150)\n\n\t\t\t// Determine if we should flip\n\t\t\tconst shouldFlip = spaceBelow < 200 && spaceAbove > spaceBelow\n\n\t\t\t// Apply max height\n\t\t\tthis.ul.style.maxHeight = `${maxHeight}px`\n\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: shouldFlip ? 'top-start' : 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t\twidth: `${reference.offsetWidth}px`, // Match the width of the trigger\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\t// Don't handle keyboard events when disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\t// Find current focused option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst current = options.findIndex(o => o.id === this._focusedOptionId) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.min(current + 1, options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, 0)\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, options.length - 1)\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (this._focusedOptionId) {\n\t\t\t\t\tconst focusedOption = options.find(opt => opt.id === this._focusedOptionId)\n\t\t\t\t\tif (focusedOption) {\n\t\t\t\t\t\tthis.handleOptionSelect(focusedOption.value)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: SchmancyOption[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tthis._focusedOptionId = option.id\n\n\t\t\t// Update aria-activedescendant on the combobox\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tif (combobox) {\n\t\t\t\tcombobox.setAttribute('aria-activedescendant', option.id)\n\t\t\t}\n\n\t\t\t// Ensure option is visible in the scrollable area\n\t\t\tif (this.ul && option.offsetTop !== undefined) {\n\t\t\t\t// Get position info\n\t\t\t\tconst optionTop = option.offsetTop\n\t\t\t\tconst optionHeight = option.offsetHeight\n\t\t\t\tconst scrollTop = this.ul.scrollTop\n\t\t\t\tconst ulHeight = this.ul.clientHeight\n\n\t\t\t\t// Scroll into view if needed\n\t\t\t\tif (optionTop < scrollTop) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop\n\t\t\t\t} else if (optionTop + optionHeight > scrollTop + ulHeight) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop + optionHeight - ulHeight\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\t// Don't open if disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\t// Don't mark as touched on opening - we'll do that on closing\n\t\t// so errors only show after interaction is complete\n\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\t// Focus first or selected option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.value === this._selectedValue$.value)\n\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\n\t\t// Don't automatically validate when opening\n\t\t// Only validate if explicitly requested (like from a form submission)\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\t// Only mark as touched if the user actually interacted with the component\n\t\t// and made a selection or explicitly closed it without selecting\n\t\tif (this._userInteracted) {\n\t\t\tthis.touched = true\n\t\t}\n\n\t\tthis.isOpen = false\n\t\tthis._focusedOptionId = ''\n\n\t\t// Update combobox to remove aria-activedescendant\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tif (combobox) {\n\t\t\tcombobox.removeAttribute('aria-activedescendant')\n\t\t\tcombobox?.focus()\n\t\t}\n\n\t\t// Only check validity when closing if the user has actually interacted\n\t\t// with the component and validation should be shown\n\t\tif (this._userInteracted && this._shouldShowError()) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\tprivate _setupReactivePipelines() {\n\t\t// Listen for option-select events from child options\n\t\tfromEvent<CustomEvent>(this, 'option-select')\n\t\t\t.pipe(\n\t\t\t\ttap((e) => {\n\t\t\t\t\te.stopPropagation() // Prevent event from bubbling further\n\t\t\t\t\tconst option = this.options.find(o => o.value === e.detail.value)\n\t\t\t\t\tif (option) {\n\t\t\t\t\t\tthis._optionSelect$.next(option)\n\t\t\t\t\t}\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// Handle option selection through reactive pipeline\n\t\tthis._optionSelect$\n\t\t\t.pipe(\n\t\t\t\twithLatestFrom(this._selectedValue$, this._selectedValues$),\n\t\t\t\ttap(([option, _, currentValues]) => {\n\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\tthis.markTouched()\n\t\t\t\t\t// `dirty` is a mixin getter; setting `value` below triggers it\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\tconst index = currentValues.indexOf(option.value)\n\t\t\t\t\t\tconst newValues = index > -1\n\t\t\t\t\t\t\t? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]\n\t\t\t\t\t\t\t: [...currentValues, option.value]\n\t\t\t\t\t\tthis._selectedValues$.next(newValues)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(newValues.join(','))\n\n\t\t\t\t\t\t// Update display label\n\t\t\t\t\t\tthis.valueLabel = newValues.length > 0\n\t\t\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t\t\t.filter(o => newValues.includes(o.value))\n\t\t\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t\t\t: this.placeholder\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Single select\n\t\t\t\t\t\tthis._selectedValue$.next(option.value)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(option.value)\n\n\t\t\t\t\t\tthis.valueLabel = option.label || option.textContent || this.placeholder\n\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update the option's accessibility state\n\t\t\t\t\tthis.setupOptionsAccessibility()\n\n\t\t\t\t\t// Dispatch change event\n\t\t\t\t\tthis._fireChangeEvent()\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// Options management pipeline - bind pointerdown events exactly like autocomplete\n\t\tthis._options$\n\t\t\t.pipe(\n\t\t\t\ttap((options) => {\n\t\t\t\t\toptions.forEach((option, index) => {\n\t\t\t\t\t\toption.setAttribute('role', 'option')\n\t\t\t\t\t\toption.tabIndex = -1\n\t\t\t\t\t\tif (!option.id) {\n\t\t\t\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Use data-event-bound to prevent duplicate bindings\n\t\t\t\t\t\tif (!option.hasAttribute('data-event-bound')) {\n\t\t\t\t\t\t\t// Use click event instead of pointerdown for better mobile UX\n\t\t\t\t\t\t\t// This allows users to scroll through options without immediately selecting\n\t\t\t\t\t\t\tfromEvent(option, 'click').pipe(\n\t\t\t\t\t\t\t\ttap(e => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t\t\t).subscribe(() => this._optionSelect$.next(option))\n\t\t\t\t\t\t\toption.setAttribute('data-event-bound', 'true')\n\t\t\t\t\t\t}\n\t\t\t\t\t})\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// Selection sync pipeline - sync selected states with value changes\n\t\tcombineLatest([this._selectedValue$, this._selectedValues$, this._options$])\n\t\t\t.pipe(\n\t\t\t\ttap(([singleValue, multiValues, options]) => {\n\t\t\t\t\tif (options.length === 0) return\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = multiValues.includes(option.value)\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = option.value === singleValue\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\t// This method is now called from keyboard navigation only\n\t\tconst option = this.options.find(o => o.value === value)\n\t\tif (option) {\n\t\t\tthis._optionSelect$.next(option)\n\t\t}\n\t}\n\n\tprivate _fireChangeEvent() {\n\t\t// Get the current value based on multi/single mode\n\t\tconst value = this.multi ? this._selectedValues$.value : this._selectedValue$.value\n\n\t\t// Dispatch only one change event with the value in detail\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Then check validity (only show error if validation should be shown)\n\t\tthis.checkValidity()\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\t// Disabled fields are always valid\n\t\tif (this.disabled) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Determine if the select is empty based on whether it's multi-select or single-select\n\t\tconst isEmpty = this.multi\n\t\t\t? this._selectedValues$.value.length === 0\n\t\t\t: !this._selectedValue$.value\n\n\t\t// Check if the value is valid (not empty when required)\n\t\tconst isValid = !(this.required && isEmpty)\n\n\t\t// Set the validity state\n\t\tthis.isValid = isValid\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\t// Clear validation message\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update the input component to reflect our validation state\n\t\tif (this.inputRef && this.hasUpdated) {\n\t\t\tconst showError = !this.isValid && this._shouldShowError()\n\t\t\tthis.inputRef.error = showError\n\t\t\tthis.inputRef.hint = showError ? this.validationMessage : this.hint\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\t// Force validation display regardless of validation strategy\n\t\tconst valid = this.checkValidity()\n\n\t\t// Force the input to show validation errors\n\t\tif (this.inputRef) {\n\t\t\t// Set the input's error state\n\t\t\tthis.inputRef.error = !valid\n\t\t\tthis.inputRef.hint = !valid ? this.validationMessage : this.hint\n\n\t\t\t// If invalid and not already open, automatically open the dropdown to show options\n\t\t\tif (!valid && !this.isOpen) {\n\t\t\t\t// Open the dropdown but don't mark as user interaction yet\n\t\t\t\t// This helps users immediately see available options when validation fails\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\n\t\t\t// Only call reportValidity on the input if invalid to show the native popup\n\t\t\tif (!valid) {\n\t\t\t\tthis.inputRef.reportValidity()\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\t// `markTouched`, `markSubmitted`, `touched`, `dirty`, `pristine`, `submitted`,\n\t// `error` (storage) — all from the mixin. Select's `error` semantics\n\t// (errors-while-open suppression) live in render() via _shouldShowError() +\n\t// !isOpen, not as a separate getter.\n\n\t/**\n\t * Multi-value-aware `toFormEntries`. Single-select emits one `[name,value]`;\n\t * multi-select emits N entries with the same name (canonical FormData shape\n\t * for repeated fields).\n\t */\n\toverride toFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\tif (!this.name || this.disabled) return []\n\t\tconst v = this.value\n\t\tif (v === undefined || v === null || v === '') return []\n\t\tif (Array.isArray(v))\n\t\t\treturn v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])\n\t\treturn [[this.name, String(v)]]\n\t}\n\n\toverride setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tif (message) {\n\t\t\tthis.isValid = false\n\t\t\tthis.internals?.setValidity({ customError: true }, message, this.inputRef)\n\t\t} else {\n\t\t\tthis.isValid = true\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update input if needed\n\t\tif (this.inputRef && this._shouldShowError()) {\n\t\t\tthis.inputRef.error = !this.isValid\n\t\t\tthis.inputRef.hint = !this.isValid ? this.validationMessage : this.hint\n\t\t}\n\t}\n\n\t/**\n\t * Reset to the snapshot captured at connect time. Mixin's `resetForm`\n\t * handles touched/submitted/error/validationMessage; the override layers on\n\t * select-specific cleanup (value subjects, label, validity).\n\t */\n\toverride resetForm(): void {\n\t\t// Restore value (multi-aware) before super so the mixin's _defaultValue\n\t\t// reset doesn't clobber the array-shape we need.\n\t\tthis.value = this.selectDefaultValue\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis._userInteracted = false\n\t\tthis.internals?.setValidity({})\n\t\tsuper.resetForm()\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t\tthis.inputRef.hint = this.hint\n\t\t}\n\t}\n\n\t/** Back-compat alias for callers that used the previous public API. */\n\tpublic reset(): void {\n\t\tthis.resetForm()\n\t}\n\n\trender(): TemplateResult {\n\t\t// Determine if we should show errors based on the validation strategy and interaction\n\t\t// Never show errors on initial render or if the dropdown is open\n\t\tconst showErrors = !this.isValid && this._shouldShowError() && !this.isOpen\n\n\t\t// Add caret icon based on open state\n\t\tconst caretIcon = this.isOpen\n\t\t\t? html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▲</span>`\n\t\t\t: html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▼</span>`\n\n\t\treturn html`\n\t\t\t<div class=\"relative ${this.disabled ? 'opacity-60 cursor-not-allowed' : ''}\">\n\t\t\t\t<sch-input\n\t\t\t\t\t.name=${this.name ?? ''}\n\t\t\t\t\ttabIndex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\taria-activedescendant=${ifDefined(this._focusedOptionId || undefined)}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t.hint=${showErrors ? this.validationMessage : this.hint}\n\t\t\t\t\t.error=${showErrors}\n\t\t\t\t\t.validateOn=${this.validateOn}\n\t\t\t\t\t.size=${this.size}\n\t\t\t\t\t.readonly=${true}\n\t\t\t\t\tclickable\n\t\t\t\t\t@click=${(e: MouseEvent) => {\n\t\t\t\t\t\t// Don't process clicks if disabled\n\t\t\t\t\t\tif (this.disabled) {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// On first click, don't count this as user interaction yet\n\t\t\t\t\t\tif (!this.isOpen) {\n\t\t\t\t\t\t\t// Open without triggering validation - we'll validate when they close\n\t\t\t\t\t\t\tthis.openDropdown(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// Mark as interacted when they close the dropdown\n\t\t\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t${caretIcon}\n\t\t\t\t</sch-input>\n\n\t\t\t\t<!-- Overlay for capturing clicks outside when dropdown is open -->\n\t\t\t\t${this.isOpen\n\t\t\t\t\t? html` <div class=\"fixed inset-0 z-10\" @click=${this.closeDropdown} tabindex=\"-1\" aria-hidden=\"true\"></div> `\n\t\t\t\t\t: ''}\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute min-w-full w-full z-20 mt-1 rounded-md shadow-lg': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.low,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis._options$.next(this.options)\n\t\t\t\t\t\t\t// Sync selection state when options re-render\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n// Don't export 'select' here as it conflicts with the store's select decorator\n// export const select = SchmancySelect\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"mappings":";;;;;;;;;;;AA6BO,IAAA,IAAA,cAA6B,EAAA,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,cAkBO,IAAA,KAAA,QAAA,CA+BL,GAAA,KAAA,OAGiC,MAAA,KAAA,SAAA,CAG5C,GAAA,KAAA,aACI,IAAA,KAAA,UAAA,CACH,GAAA,KAAA,qBAK8B,IAAA,KAAA,YAQrC,IAAI,EAAkC,CAAA,CAAA,GAAA,KAAA,kBAChC,IAAI,EAAwB,EAAA,GAAA,KAAA,mBAC3B,IAAI,EAA0B,CAAA,CAAA,GAAA,KAAA,iBAChC,IAAI,KAAA,KAAA,kBAAA,CAQF,GAAA,KAAA,mBAGS,IAAA,KAAA,iBA2IX,MAAA;GAExB,IAAI,KAAK,UACR;GAGD,IAAA,CAAK,KAAK,QAKT,OAAA,MAJI;IAAC;IAAS;IAAK;GAAA,EAAa,SAAS,EAAE,GAAA,MAC1C,EAAE,eAAA,GACF,KAAK,aAAA,CAAa,CAAA;GAMpB,IAAM,IAAU,MAAM,KAAK,KAAK,WAAW,CAAA,CAAA,GACrC,IAAU,EAAQ,WAAU,MAAK,EAAE,OAAO,KAAK,gBAAA,KAAA;GAErD,QAAQ,EAAE,KAAV;IACC,KAAK;KACJ,EAAE,eAAA,GACF,KAAK,cAAA;KACL;IACD,KAAK;KACJ,EAAE,eAAA,GACF,KAAK,YAAY,GAAS,KAAK,IAAI,IAAU,GAAG,EAAQ,SAAS,CAAA,CAAA;KACjE;IACD,KAAK;KACJ,EAAE,eAAA,GACF,KAAK,YAAY,GAAS,KAAK,IAAI,IAAU,GAAG,CAAA,CAAA;KAChD;IACD,KAAK;KACJ,EAAE,eAAA,GACF,KAAK,YAAY,GAAS,CAAA;KAC1B;IACD,KAAK;KACJ,EAAE,eAAA,GACF,KAAK,YAAY,GAAS,EAAQ,SAAS,CAAA;KAC3C;IACD,KAAK;IACL,KAAK;KAEJ,IADA,EAAE,eAAA,GACE,KAAK,kBAAkB;MAC1B,IAAM,IAAgB,EAAQ,MAAK,MAAO,EAAI,OAAO,KAAK,gBAAA;MACtD,KACH,KAAK,mBAAmB,EAAc,KAAA;KAExC;KACA;IACD,KAAK,OACJ,KAAK,cAAA;GAAA;EAAA;CAAA;CAAA;EAAA,KAAA,SAhRQ,CAAC,CAAG;;;;;;;;;;;;CAqBpB,IAAA,QACa;EACZ,OAAO,KAAK,QACR,KAAK,kBAAkB,SAAS,CAAA,IAChC,KAAK,iBAAiB,SAAS;CACpC;CACA,IAAA,MAAmB,GAAA;EAClB,IAAK,KAAK,mBAAoB,KAAK,kBACnC,IAAI,KAAK,OAAO;GACf,IAAM,IAAS,MAAM,QAAQ,CAAA,IAC1B,IACA,IAAM,OAAO,CAAA,EAAK,MAAM,GAAA,EAAK,KAAI,MAAK,EAAE,KAAA,CAAA,EAAQ,OAAO,OAAA,IAAW,CAAA;GACrE,KAAK,iBAAiB,KAAK,CAAA;EAC5B,OACC,KAAK,gBAAgB,KAAK,KAAO,OAAO,KAAK,OAAO,CAAA,CAAA;CAEtD;CAGA,IAAA,SACI;EACH,OAAO,CAAA,GAAI,KAAK,iBAAiB,KAAA;CAClC;CACA,IAAA,OAAW,GAAA;EACV,KAAK,iBAAiB,KAAK,MAAM,QAAQ,CAAA,IAAQ,CAAA,GAAI,CAAA,IAAQ,CAAA,CAAA;CAC9D;CAuCA,oBAAA;EACC,MAAM,kBAAA,GACD,AACJ,KAAK,OAAK,mBAAmB,KAAK,OAAA,EAAS,SAAS,EAAA,EAAI,UAAU,GAAG,CAAA,KAItE,KAAK,qBAAqB,KAAK,OAG/B,EAAyB,MAAM,SAAA,EAAW,KAAK,EAAU,KAAK,aAAA,CAAA,EAAgB,UAAU,KAAK,aAAA,GAG7F,KAAK,wBAAA;CACN;CAEA,uBAAA;EACC,MAAM,qBAAA,GACN,KAAK,oBAAA;CAEN;CAEA,eAAA;EACC,KAAK,cAAA,GACL,KAAK,0BAAA,GAGD,KAAK,aACR,KAAK,SAAS,QAAA,CAAQ;CAExB;CAEA,QAAiB,GAAA;EAGhB,IAFA,MAAM,QAAQ,CAAA,GAEV,EAAa,IAAI,OAAA,GAAU;GAI9B,IAAM,IAAY,KAAK,QACpB,KAAK,iBAAiB,MAAM,KAAK,GAAA,IACjC,KAAK,gBAAgB;GACxB,KAAK,WAAW,aAAa,CAAA;EAI9B;EAGI,EAAa,IAAI,QAAA,MAChB,KAAK,SACR,KAAK,iBAAA,IAEL,KAAK,oBAAA;CAGR;CAIA,gBAAA;EACC,IAAI,KAAK,OAAO;GAEf,IAAM,IAAiB,KAAK,iBAAiB;GAC7C,KAAK,SAAS,SAAQ,MAAM,EAAE,WAAW,EAAe,SAAS,EAAE,KAAA,CAAA,GACnE,KAAK,aACJ,EAAe,SAAS,KACrB,KAAK,SACH,QAAO,MAAK,EAAe,SAAS,EAAE,KAAA,CAAA,EACvC,KAAI,MAAK,EAAE,SAAS,EAAE,eAAe,EAAA,EACrC,KAAK,IAAA,KACN,KAAK;EACV,OAAO;GAEN,IAAM,IAAe,KAAK,gBAAgB;GAC1C,KAAK,SAAS,SAAQ,MAAA;IAErB,EAAE,WAAW,EAAE,UAAU;GAAA,CAAA;GAE1B,IAAM,IAAiB,KAAK,SAAS,MAAK,MAAK,EAAE,UAAU,CAAA;GAC3D,KAAK,aAAa,IAAkB,EAAe,SAAS,EAAe,eAAe,KAAM,KAAK;EACtG;CACD;CAEA,4BAAA;EACC,KAAK,SAAS,SAAS,GAAQ,MAAA;GAC9B,EAAO,aAAa,QAAQ,QAAA,GACvB,AACJ,EAAO,OAAK,GAAG,KAAK,GAAA,UAAa,KAIlC,EAAO,WAAA,IAEP,EAAO,aACN,iBACA,OAAO,KAAK,QAAQ,KAAK,iBAAiB,MAAM,SAAS,EAAO,KAAA,IAAS,EAAO,UAAU,KAAK,gBAAgB,KAAA,CAAA;EAAA,CAAA;CAGlH;CAEA,MAAA,mBAAc;EACb,IAAM,IAAY,KAAK,WAAW,cAAc,UAAA;EAC3C,KAAc,KAAK,OAExB,KAAK,oBAAoB,EAAW,GAAW,KAAK,IAAI,YAAA;GAEvD,IAAM,IAAiB,OAAO,aACxB,IAAc,EAAU,sBAAA,GAGxB,IAAa,IAAiB,EAAY,QAC1C,IAAa,EAAY,KAGzB,IAAY,KAAK,IAAuC,MAAnC,KAAK,IAAI,GAAY,CAAA,GAAoB,GAAA,GAG9D,IAAa,IAAa,OAAO,IAAa;GAGpD,KAAK,GAAG,MAAM,YAAY,GAAG,EAAA;GAE7B,IAAA,EAAM,GAAE,GAAA,GAAG,MAAA,MAAY,EAAgB,GAAW,KAAK,IAAI;IAC1D,WAAW,IAAa,cAAc;IACtC,YAAY;KAAC,EAAO,CAAA;KAAI,EAAA;KAAQ,EAAM,EAAE,SAAS,EAAA,CAAA;IAAA;GAAA,CAAA;GAGlD,OAAO,OAAO,KAAK,GAAG,OAAO;IAC5B,MAAM,GAAG,EAAA;IACT,KAAK,GAAG,EAAA;IACR,UAAU;IACV,OAAO,GAAG,EAAU,YAAA;GAAA,CAAA;EAAA,CAAA;CAGvB;CAyDA,YAAoB,GAA2B,GAAA;EAC9C,IAAM,IAAS,EAAQ;EACvB,IAAI,GAAQ;GACX,EAAO,MAAA,GACP,KAAK,mBAAmB,EAAO;GAG/B,IAAM,IAAW,KAAK,WAAW,cAAc,UAAA;GAM/C,IALI,KACH,EAAS,aAAa,yBAAyB,EAAO,EAAA,GAInD,KAAK,MAAM,EAAO,cAAb,KAA2B,GAAW;IAE9C,IAAM,IAAY,EAAO,WACnB,IAAe,EAAO,cACtB,IAAY,KAAK,GAAG,WACpB,IAAW,KAAK,GAAG;IAGrB,IAAY,IACf,KAAK,GAAG,YAAY,IACV,IAAY,IAAe,IAAY,MACjD,KAAK,GAAG,YAAY,IAAY,IAAe;GAEjD;EACD;CACD;CAEA,MAAA,aAA2B,IAAA,CAAS,GAAA;EAEnC,IAAI,KAAK,UACR;EAMD,KAAK,SAAA,CAAS,GAAA,MACR,KAAK;EAGX,IAAM,IAAU,MAAM,KAAK,KAAK,WAAW,CAAA,CAAA,GACrC,IAAgB,KAAK,QAAQ,IAAI,EAAQ,WAAU,MAAK,EAAE,UAAU,KAAK,gBAAgB,KAAA;EAE/F,KAAK,YAAY,GAAS,KAAK,IAAI,GAAe,CAAA,CAAA,GAI9C,KAAQ,KAAK,eAAA;CAClB;CAEA,gBAAA;EAGK,KAAK,oBACR,KAAK,UAAA,CAAU,IAGhB,KAAK,SAAA,CAAS,GACd,KAAK,mBAAmB;EAGxB,IAAM,IAAW,KAAK,WAAW,cAA2B,UAAA;EACxD,MACH,EAAS,gBAAgB,uBAAA,GACzB,GAAU,MAAA,IAKP,KAAK,mBAAmB,KAAK,iBAAA,KAChC,KAAK,cAAA;CAEP;CAEA,0BAAA;EAEC,EAAuB,MAAM,eAAA,EAC3B,KACA,GAAK,MAAA;GACJ,EAAE,gBAAA;GACF,IAAM,IAAS,KAAK,QAAQ,MAAK,MAAK,EAAE,UAAU,EAAE,OAAO,KAAA;GACvD,KACH,KAAK,eAAe,KAAK,CAAA;EAAA,CAAA,GAG3B,EAAU,KAAK,aAAA,CAAA,EAEf,UAAA,GAGF,KAAK,eACH,KACA,EAAe,KAAK,iBAAiB,KAAK,gBAAA,GAC1C,GAAA,CAAM,GAAQ,GAAG,OAAA;GAKhB,IAJA,KAAK,kBAAA,CAAkB,GACvB,KAAK,YAAA,GAGD,KAAK,OAAO;IACf,IAAM,IAAQ,EAAc,QAAQ,EAAO,KAAA,GACrC,IAAY,IAAA,KACf,CAAA,GAAI,EAAc,MAAM,GAAG,CAAA,GAAA,GAAW,EAAc,MAAM,IAAQ,CAAA,CAAA,IAClE,CAAA,GAAI,GAAe,EAAO,KAAA;IAC7B,KAAK,iBAAiB,KAAK,CAAA,GAG3B,KAAK,WAAW,aAAa,EAAU,KAAK,GAAA,CAAA,GAG5C,KAAK,aAAa,EAAU,SAAS,IAClC,KAAK,QACJ,QAAO,MAAK,EAAU,SAAS,EAAE,KAAA,CAAA,EACjC,KAAI,MAAK,EAAE,SAAS,EAAE,eAAe,EAAA,EACrC,KAAK,IAAA,IACN,KAAK;GACT,OAEC,KAAK,gBAAgB,KAAK,EAAO,KAAA,GAGjC,KAAK,WAAW,aAAa,EAAO,KAAA,GAEpC,KAAK,aAAa,EAAO,SAAS,EAAO,eAAe,KAAK,aAC7D,KAAK,cAAA;GAIN,KAAK,0BAAA,GAGL,KAAK,iBAAA;EAAA,CAAA,GAEN,EAAU,KAAK,aAAA,CAAA,EAEf,UAAA,GAGF,KAAK,UACH,KACA,GAAK,MAAA;GACJ,EAAQ,SAAS,GAAQ,MAAA;IACxB,EAAO,aAAa,QAAQ,QAAA,GAC5B,EAAO,WAAA,IACF,AACJ,EAAO,OAAK,GAAG,KAAK,GAAA,UAAa,KAG7B,EAAO,aAAa,kBAAA,MAGxB,EAAU,GAAQ,OAAA,EAAS,KAC1B,GAAI,MAAA;KACH,EAAE,gBAAA;IAAA,CAAA,GAEH,EAAU,KAAK,aAAA,CAAA,EACd,gBAAgB,KAAK,eAAe,KAAK,CAAA,CAAA,GAC3C,EAAO,aAAa,oBAAoB,MAAA;GAAA,CAAA;EAAA,CAAA,GAI3C,EAAU,KAAK,aAAA,CAAA,EAEf,UAAA,GAGF,EAAc;GAAC,KAAK;GAAiB,KAAK;GAAkB,KAAK;EAAA,CAAA,EAC/D,KACA,GAAA,CAAM,GAAa,GAAa,OAAA;GACR,AAAnB,EAAQ,WAAW,MAEnB,KAAK,QACR,EAAQ,SAAQ,MAAA;IACf,EAAO,WAAW,EAAY,SAAS,EAAO,KAAA;GAAA,CAAA,IAG/C,EAAQ,SAAQ,MAAA;IACf,EAAO,WAAW,EAAO,UAAU;GAAA,CAAA;EAAA,CAAA,GAItC,EAAU,KAAK,aAAA,CAAA,EAEf,UAAA;CACH;CAEA,mBAA2B,GAAA;EAE1B,IAAM,IAAS,KAAK,QAAQ,MAAK,MAAK,EAAE,UAAU,CAAA;EAC9C,KACH,KAAK,eAAe,KAAK,CAAA;CAE3B;CAEA,mBAAA;EAEC,IAAM,IAAQ,KAAK,QAAQ,KAAK,iBAAiB,QAAQ,KAAK,gBAAgB;EAG9E,KAAK,cACJ,IAAI,YAAiD,UAAU;GAC9D,QAAQ,EAAE,OAAA,EAAA;GACV,SAAA,CAAS;GACT,UAAA,CAAU;EAAA,CAAA,CAAA,GAKZ,KAAK,cAAA;CACN;CAEA,gBAAA;EAEC,IAAI,KAAK,UACR,OAAA,CAAO;EAIR,IAAM,IAAU,KAAK,QAClB,KAAK,iBAAiB,MAAM,WAAW,IAAX,CAC3B,KAAK,gBAAgB,OAGnB,IAAA,EAAY,KAAK,YAAY;EAenC,IAZA,KAAK,UAAU,GAEV,KAAK,WAKT,KAAK,oBAAoB,IACzB,KAAK,WAAW,YAAY,CAAC,CAAA,MAL7B,KAAK,oBAAoB,4BACzB,KAAK,WAAW,YAAY,EAAE,cAAA,CAAc,EAAA,GAAQ,4BAA4B,KAAK,QAAA,IAQlF,KAAK,YAAY,KAAK,YAAY;GACrC,IAAM,IAAA,CAAa,KAAK,WAAW,KAAK,iBAAA;GACxC,KAAK,SAAS,QAAQ,GACtB,KAAK,SAAS,OAAO,IAAY,KAAK,oBAAoB,KAAK;EAChE;EAEA,OAAO,KAAK;CACb;CAEA,iBAAA;EAEC,IAAM,IAAQ,KAAK,cAAA;EAqBnB,OAlBI,KAAK,aAER,KAAK,SAAS,QAAA,CAAS,GACvB,KAAK,SAAS,OAAQ,IAAiC,KAAK,OAA9B,KAAK,mBAG9B,KAAU,KAAK,UAGnB,KAAK,aAAA,CAAa,CAAA,GAId,KACJ,KAAK,SAAS,eAAA,IAIT;CACR;CAYA,gBAAA;EACC,IAAA,CAAK,KAAK,QAAQ,KAAK,UAAU,OAAO,CAAA;EACxC,IAAM,IAAI,KAAK;EACf,OAAI,KAAA,QAAiC,MAAM,KAAW,CAAA,IAClD,MAAM,QAAQ,CAAA,IACV,EAAE,KAAI,MAAQ,CAAC,KAAK,MAAM,OAAO,CAAA,CAAA,CAAA,IAClC,CAAC,CAAC,KAAK,MAAM,OAAO,CAAA,CAAA,CAAA;CAC5B;CAEA,kBAA2B,GAAA;EAC1B,KAAK,oBAAoB,GACrB,KACH,KAAK,UAAA,CAAU,GACf,KAAK,WAAW,YAAY,EAAE,aAAA,CAAa,EAAA,GAAQ,GAAS,KAAK,QAAA,MAEjE,KAAK,UAAA,CAAU,GACf,KAAK,WAAW,YAAY,CAAC,CAAA,IAI1B,KAAK,YAAY,KAAK,iBAAA,MACzB,KAAK,SAAS,QAAA,CAAS,KAAK,SAC5B,KAAK,SAAS,OAAQ,KAAK,UAAmC,KAAK,OAA9B,KAAK;CAE5C;CAOA,YAAA;EAGC,KAAK,QAAQ,KAAK,oBAClB,KAAK,aAAa,KAAK,aACvB,KAAK,UAAA,CAAU,GACf,KAAK,kBAAA,CAAkB,GACvB,KAAK,WAAW,YAAY,CAAC,CAAA,GAC7B,MAAM,UAAA,GACF,KAAK,aACR,KAAK,SAAS,QAAA,CAAQ,GACtB,KAAK,SAAS,OAAO,KAAK;CAE5B;CAGA,QAAA;EACC,KAAK,UAAA;CACN;CAEA,SAAA;EAGC,IAAM,IAAA,CAAc,KAAK,WAAW,KAAK,iBAAA,KAAA,CAAuB,KAAK,QAG/D,IAAY,KAAK,SACpB,CAAI,+EACJ,CAAI;EAEP,OAAO,CAAI;0BACa,KAAK,WAAW,kCAAkC,GAAA;;aAE/D,KAAK,QAAQ,GAAA;gBACV,KAAK,WAAW,OAAO,IAAA;;;;qBAIlB,KAAK,OAAA;;;qBAGL,KAAK,SAAA;6BACG,EAAU,KAAK,oBAAA,KAAoB,CAAA,EAAA;qBAC3C,KAAK,SAAA;cACZ,KAAK,MAAA;oBACC,KAAK,YAAA;cACX,KAAK,WAAA;iBACF,KAAK,SAAA;iBACL,KAAK,SAAA;aACT,IAAa,KAAK,oBAAoB,KAAK,KAAA;cAC1C,EAAA;mBACK,KAAK,WAAA;aACX,KAAK,KAAA;kBACD,EAAA;;eAEF,MAAA;GAET,IAAI,KAAK,UAGR,OAFA,EAAE,eAAA,GAAA,KACF,EAAE,gBAAA;GAKE,KAAK,UAKT,KAAK,kBAAA,CAAkB,GACvB,KAAK,cAAA,KAJL,KAAK,aAAA,CAAa,CAAA;EAAA,EAAA;;OAQlB,EAAA;;;;MAID,KAAK,SACJ,CAAI,2CAA2C,KAAK,cAAA,6CACpD,GAAA;;;;;4BAKqB,KAAK,MAAA;aACpB,EAAS;GAChB,6DAAA,CAA6D;GAC7D,QAAA,CAAS,KAAK;EAAA,CAAA,EAAA;OAEb,EAAM;GACP,SAAS,EAAc,IAAI,MAAM,QAAQ;GACzC,OAAO,EAAc,IAAI,MAAM,QAAQ;EAAA,CAAA,EAAA;;;;GAKtC,KAAK,UAAU,KAAK,KAAK,OAAA,GAEzB,KAAK,cAAA;EAAA,EAAA;;;;;CAMX;AAAA;AAAA,EAAA,CAzqBC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,eAAA,KAAA,CAAA,GAAA,EAAA,CAIzB,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,IAAA,GAAA,EAAA,CAmBxC,EAAS,EAAE,MAAM,MAAA,CAAA,CAAA,GAAO,EAAA,WAAA,UAAA,IAAA,GAAA,EAAA,CAQxB,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,GAAS,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CAG1B,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,QAAA,KAAA,CAAA,GAAA,EAAA,CAGzB,EAAA,CAAA,GAAM,EAAA,WAAA,UAAA,KAAA,CAAA,GAAA,EAAA,CACN,EAAA,CAAA,GAAM,EAAA,WAAA,cAAA,KAAA,CAAA,GAAA,EAAA,CACN,EAAA,CAAA,GAAM,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,EAAA,CAKN,EAAA,CAAA,GAAM,EAAA,WAAA,sBAAA,KAAA,CAAA,GAAA,EAAA,CAEN,EAAM,IAAA,CAAA,GAAI,EAAA,WAAA,MAAA,KAAA,CAAA,GAAA,EAAA,CACV,EAAM,WAAA,CAAA,GAAW,EAAA,WAAA,YAAA,KAAA,CAAA,GAAA,EAAA,CACjB,EAAsB,EAAE,SAAA,CAAS,EAAA,CAAA,CAAA,GAAM,EAAA,WAAA,WAAA,KAAA,CAAA,GAAA,EAAA,CAevC,EAAA,CAAA,GAAM,EAAA,WAAA,mBAAA,KAAA,CAAA,GAAA,EAAA,CAGN,EAAA,CAAA,GAAM,EAAA,WAAA,oBAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CArFP,EAAc,iBAAA,CAAA,GAAiB,CAAA;AAAA,SAAA,KAAA"}

package/dist/select.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./select-81jniVTs.cjs`);Object.defineProperty(exports,`SchmancySelect`,{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./select-B-SSmUDe.cjs`);Object.defineProperty(exports,`SchmancySelect`,{enumerable:!0,get:function(){return e.t}});

package/dist/select.js

@@ -1,2 +1,2 @@
-import { t as e } from "./select-9vXx1fhr.js";
+import { t as e } from "./select-CEyhNtZ2.js";
 export { e as SchmancySelect };

package/dist/skeleton.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CYIif26I.cjs`);require(`./mixins-CGXSzZc7.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);var r=class extends e.t{constructor(...e){super(...e),this.shape=`rect`,this.width=``,this.height=``,this.radius=``}static{this.styles=[n.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-BBzRWB1w.cjs`);require(`./mixins-DPdzC9ZH.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);var r=class extends e.t{constructor(...e){super(...e),this.shape=`rect`,this.width=``,this.height=``,this.radius=``}static{this.styles=[n.css`
 	:host {
 		display: block;
 		width: var(--_sw, 100%);

package/dist/skeleton.js

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-CA0Wqt8m.js";
-import "./mixins-Bp0wIHg2.js";
+import { t as e, u as t } from "./SchmancyElement-C3CpdNsi.js";
+import "./mixins-DTzfFVyv.js";
 import { customElement as n, property as r } from "lit/decorators.js";
 import { css as i, html as a } from "lit";
 var o = class extends e {

package/dist/skills/INDEX.md

@@ -36,7 +36,7 @@ The framework pieces — touch before components.
 [Overlay](./overlay.md) · [Notification](./notification.md) · [Menu](./menu.md) · [Dropdown](./dropdown.md) · [Tooltip (directive)](./tooltip.md) · [Lightbox](./lightbox.md) · [Expand](./expand.md)
 
 ### Interactive
-[Button](./button.md) · [List](./list.md) · [Details](./details.md) · [Table](./table.md) · [Tree](./tree.md) · [Slider](./slider.md)
+[Button](./button.md) · [FAB](./fab.md) · [List](./list.md) · [Details](./details.md) · [Table](./table.md) · [Tree](./tree.md) · [Slider](./slider.md)
 
 > Lab: [QR Scanner](../../lab/skills/qr-scanner.md) — install `@mhmo91/schmancy-lab`
 

package/dist/skills/SKILL.md

@@ -56,9 +56,9 @@ Use component tags (`<schmancy-menu>`, `<schmancy-dropdown>`, `<schmancy-tooltip
 
 ## Composition
 
-- **Audit by grep** (`AUDIT_BY_GREP`). An agent's compliance report on a file under a rule is the list of file:line citations of the rule's forbidden patterns; an empty list is compliance. The rule applies to every other rule in this skill (`PRIMITIVE_FIRST`, `TOKEN_FIRST_NO_ARBITRARY`, `NO_LOCAL_CLASS_CSS`, `NO_TERNARY_NOTHING_DISPATCH`): a claim that a file complies is a claim about what the file does NOT contain, and that claim is verified by enumerating the rule's forbidden patterns and grepping each one.
-  Sources: each rule above names its forbidden patterns explicitly — `TOKEN_FIRST_NO_ARBITRARY` forbids `[...]` arbitrary-value Tailwind utilities; `PRIMITIVE_FIRST` forbids raw HTML elements whose class attribute carries design-system styling (typography/color/surface/spacing-as-design); `NO_LOCAL_CLASS_CSS` forbids class/id/attribute selectors inside the `css` template; `NO_TERNARY_NOTHING_DISPATCH` forbids `${cond ? html\`...\` : nothing}` and `${cond && html\`...\`}` patterns.
-  Remediation: before reporting any file compliant, run a grep against each forbidden pattern named by the rule under audit (e.g. `grep -nE '\[(?:[^]]+)\]' <file>` for `TOKEN_FIRST_NO_ARBITRARY`; `grep -nE 'class="[^"]*\b(text-|bg-|border-|rounded-|shadow-|tracking-|leading-|p[xy]?-)' <file>` plus a manual scan for raw `<div>`/`<span>` carrying those classes for `PRIMITIVE_FIRST`). The compliance report's body is the concatenation of those grep outputs annotated with their rule name; an empty body across every pattern under every rule is the only form of "compliant". A claim of compliance unaccompanied by the grep evidence is not a compliance report and is treated as an unverified assertion that the audit loop rejects.
+- **Audit by grep** (`AUDIT_BY_GREP`). An agent's compliance report on a file under a rule is the list of file:line citations of the rule's forbidden patterns; an empty list is compliance. The rule applies to every other rule in this skill (`PRIMITIVE_FIRST`, `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`, `NO_LOCAL_CLASS_CSS`, `NO_TERNARY_NOTHING_DISPATCH`): a claim that a file complies is a claim about what the file does NOT contain, and that claim is verified by enumerating the rule's forbidden patterns and grepping each one.
+  Sources: each rule above names its forbidden patterns explicitly — `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE` forbids a single-value `--<namespace>-x` `@theme` alias (the portable `[...]` arbitrary value is canonical, not forbidden); `PRIMITIVE_FIRST` forbids raw HTML elements whose class attribute carries design-system styling (typography/color/surface/spacing-as-design); `NO_LOCAL_CLASS_CSS` forbids class/id/attribute selectors inside the `css` template; `NO_TERNARY_NOTHING_DISPATCH` forbids `${cond ? html\`...\` : nothing}` and `${cond && html\`...\`}` patterns.
+  Remediation: before reporting any file compliant, run a grep against each forbidden pattern named by the rule under audit (e.g. `grep -nE '^\s*--[a-z-]+:' web/src/styles.css owl/src/**/styles.css` for single-value `@theme` aliases under `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`; `grep -nE 'class="[^"]*\b(text-|bg-|border-|rounded-|shadow-|tracking-|leading-|p[xy]?-)' <file>` plus a manual scan for raw `<div>`/`<span>` carrying those classes for `PRIMITIVE_FIRST`). The compliance report's body is the concatenation of those grep outputs annotated with their rule name; an empty body across every pattern under every rule is the only form of "compliant". A claim of compliance unaccompanied by the grep evidence is not a compliance report and is treated as an unverified assertion that the audit loop rejects.
 - **Schmancy primitive first** (`PRIMITIVE_FIRST`). Within `web/**`, every visible UI element is a custom element exported from `packages/schmancy/src/**`, and an element absent from that export set is added there before being imported into `web/**`. The rule sits above the styling rules: a `<div class="text-xs text-surface-on-variant">…</div>` whose role is typography is a violation even when every utility resolves to a registered token, because `<schmancy-typography>` already covers that role; the styling rules apply only to whatever class strings remain after the right primitive has been selected.
   Sources: [packages/schmancy/skills/schmancy/INDEX.md](../INDEX.md) catalogues the export set by job (foundations / atoms / forms / navigation / overlays / interaction / feedback / display); each role's reference file (`typography.md`, `surface.md`, `button.md`, `overlay.md`, …) names the props, slots, and events that displace the equivalent `<div>` + utility-class pattern. The export set is the single source — a primitive that is not exported from `packages/schmancy/src/**` does not satisfy this rule even if it lives in a private file inside the schmancy tree.
   Remediation: walk every `.ts` and `.html` file under `web/**` and list every raw HTML element whose class string carries design-system styling (typography, color, spacing-as-design-decision, surface, layout-as-design-decision, motion, overlay) — those are the violations. For each, look up the matching schmancy primitive in `INDEX.md` and rewrite the element through that primitive (`<schmancy-typography type=… token=…>` for type-scale text, `<schmancy-surface type=…>` for elevated/bounded surfaces (size with Tailwind utilities), `<schmancy-grid>`/`<schmancy-flex>` for layout primitives with design intent, the imperative `show`/`$notify`/`schmancyContentDrawer.push` services for overlays, `<schmancy-scroll>` for scroll containers). When a needed primitive is absent from the export set, design and implement it as a new component under `packages/schmancy/src/<role>/` — extending `SchmancyElement` with `static styles = [css\`...\`]`, registered in `HTMLElementTagNameMap`, exported through the package barrel, and documented with a sibling `.md` in the skill's reference set — and only then introduce the first call site in `web/**`. The audit subagent iterates the whole `web/**` tree, surfaces the violation list, applies the rewrites, runs `yarn workspace @momo/web tsc --noEmit` plus the colocated `*-view.test.ts` suites, and reports pre-existing violations that require a new schmancy primitive as a separate punch list for designer/architect approval before the implementation lands. The loop exits when every `web/**` file's visible UI elements are schmancy primitives and the typecheck plus the test suites pass.
@@ -113,10 +113,9 @@ When two components genuinely cannot share a signal (e.g., a generic reusable co
 **Styling**
 - Styling uses Tailwind and schmancy tokens. The `css` block in `static styles` contains only `:host` rules, `@keyframes`, and selectors targeting vendor pseudo-elements (`::-webkit-*`, `::-moz-*`). Other styling is set through Tailwind utility classes and schmancy theme tokens on the `class=` attribute. The `style=` attribute holds per-instance dynamic values only (e.g. `style="--tide: ${value}"`).
   Remediation: move declarations to Tailwind on the `class=` attribute (`backdrop-filter: blur(20px)` → `backdrop-blur-xl`; `color-mix(in oklch, Canvas 72%, transparent)` → `bg-surface/70`; `border-radius: 14px` → `rounded-2xl`; `transition: opacity 80ms linear` → `transition-opacity duration-75 ease-linear`). When a visual pattern seems to want its own class (like `.glass`), check `INDEX.md` — schmancy likely ships the component.
-- Colors: Tailwind utility classes (`bg-surface-on`, `text-primary-default`, `border-outline-variant`) are the preferred surface — every `--schmancy-sys-color-*` token is auto-aliased to `--color-*`, which Tailwind v4 turns into the full `bg-X` / `text-X` / `border-X` / `ring-X` / `fill-X` / `stroke-X` namespace. Reach for raw `var(--schmancy-sys-color-*)` only inside the `css` template literal (where Tailwind doesn't apply) or for custom tokens you've registered yourself. Never hardcoded hex.
-- **No arbitrary-value escape** (`TOKEN_FIRST_NO_ARBITRARY`). Within `web/src/**` and `packages/schmancy/src/**`, no Tailwind arbitrary-value utility (`[...]`) appears; a value not yet covered by `packages/schmancy/src/theme/theme.style.css` or the Tailwind default theme is added as a token to that file before being used. This rule supersedes the prior `TOKEN_FIRST_LITERALS_COMPLETION` annotation form: an inline `// token-gap: <namespace>` comment is no longer a valid resolution, since color and size namespaces are exhaustively covered by schmancy and Tailwind, and any uncovered namespace (aspect ratio, motion curve, custom breakpoint) is itself a token-registry extension waiting to be made.
-  Sources: `theme.md` enumerates the schmancy color tokens (every `--schmancy-sys-color-*` auto-aliases to a Tailwind class); `typography.md` enumerates the type scale; `theme.style.css` declares the spacing, radius, shadow, font, text, tracking, leading, aspect, breakpoint, container, ease, and animate namespaces, every entry of which Tailwind v4 lifts into a named utility. A bracket-syntax utility in either glob is by construction either a value the registry already covers (rule violation, replace with the token) or a value the registry does not yet cover (rule violation, extend the registry first).
-  Remediation: list every `[...]` arbitrary-value utility in the changeset; for each whose value matches a `--<namespace>-*` variable, replace with the named utility (`bg-[#faf7f2]` → `bg-surface-containerLowest`, `max-w-[720px]` → `max-w-3xl`); for each whose value has no matching variable, register the variable in `packages/schmancy/src/theme/theme.style.css` first, then mirror the same `--<namespace>-x: …` declaration inside an `@theme {}` block in the consumer's stylesheet (e.g. `web/src/styles.css`) — schmancy ships the variable to its own shadow-DOM TailwindMixin, the consumer mirror lets Tailwind v4 generate the named utility for document-scope code. When the variable lives in both places but the utility class still does not apply inside a shadow-DOM component (the mixin's utility subset is frozen at schmancy build time, so consumer-introduced class names can't be added), bind the registered variable through an inline `style="<property>: var(--<namespace>-x);"` attribute on the element — the bracket-syntax rule is satisfied because no Tailwind arbitrary-value utility appears in the markup, and the `style=` attribute consuming a registered CSS custom property fits the per-instance dynamic-value clause of `NO_LOCAL_CLASS_CSS`. When the value's design rationale is one-off (a vendor-dictated pixel width, a single-use marketing graphic) the rule still requires a registered token — the alternative is to drop the value as a design violation.
+- **Color is a theme token** (`COLOR_IS_A_THEME_TOKEN`). Every color a `web/src/**` element renders is the schmancy theme namespace surfaced as a Tailwind utility on `class=` (`text-error-default`, `bg-surface-container`, `border-outline-variant` — every `--schmancy-sys-color-*` auto-aliases to `--color-*`, which Tailwind v4 lifts into the full `bg-/text-/border-/ring-/fill-/stroke-` namespace) or a schmancy component that already carries the token (`<schmancy-surface type=…>`, `<schmancy-typography>`). A raw `#hex` / `rgb()` / `rgba()` / `hsl()` literal and an inline `var(--schmancy-sys-color-*)` inside a `style=` attribute name a color the theme already names — including inside `@keyframes` and animated backgrounds, where the animated property still references the token utility, not a hand-written value. Raw `var(--schmancy-sys-color-*)` lives only inside a component's own `static styles` `css` template (where Tailwind does not reach); a color literal in markup is admissible only with a written rationale for why no token in `theme.md` can express it. `theme.md` is the authoritative token catalog.
+- **Arbitrary value is canonical; a token is earned by semantic reuse** (`ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`). Within `web/src/**`, `owl/src/**`, and `packages/schmancy/src/**`, a trivial or one-off layout/size value is its portable Tailwind arbitrary utility (`grid-rows-[auto_1fr]`, `max-w-[720px]`) and stays there; a `--<namespace>-x` `@theme` alias of a single such value is the violation and is reverted to the portable form. A `--<namespace>-*` token earns existence only as a named design concept reused across call sites — the schmancy semantic color, type-scale, spacing, and motion namespaces (`COLOR_IS_A_THEME_TOKEN` owns the color half) — never as a one-value alias. An `@theme` token is visible only to the Tailwind build that compiles its stylesheet, so a `web/src/styles.css` token emits zero CSS in `owl/`; a `suggestCanonicalClasses`-style arbitrary-value→named-utility rewrite not backed by an `@theme` declaration in the edited workspace's own build is dead CSS, and the portable arbitrary form is kept.
+- **Schmancy elements need no import in `web/src/**`** (`SCHMANCY_PLUGIN_REGISTERS`). The Vite plugin globally registers every schmancy custom element for the `web/` app; side-effect imports of individual subpaths (`import "@mhmo91/schmancy/badge"`, `import "@mhmo91/schmancy/icon"`, etc.) inside `web/src/**` are redundant and fail with TS2882. Use the tag directly in templates.
 - No `setTimeout` / `setInterval` / `addEventListener` — use RxJS (`timer`, `interval`, `fromEvent`).
 
 **Accessibility (combobox forms)**

package/dist/skills/boat.md

@@ -1,16 +1,19 @@
 # schmancy-boat
 
-> Material-3 extended FAB that opens its panel via the `show()` overlay service. Great for persistent assistant/telemetry panels.
+> Corner-anchored launcher that opens its panel via the `show()` overlay service. Three slots, three non-overlapping intents — **no element-type sniffing**. The collapsed launcher's size, padding, radius and spacing are the consumer's; the boat owns drag, corner-snapping, position persistence and the glass surface.
 
-> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler FAB-to-overlay model.
+> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler launcher-to-overlay model.
 
 ## Usage
 ```html
-<schmancy-boat id="assistant" icon="smart_toy" label="Assistant" ?open=${isOpen}>
-  <schmancy-icon slot="header">smart_toy</schmancy-icon>
-  <span slot="summary">3</span>
+<schmancy-boat id="assistant" ?open=${isOpen}>
+  <!-- optional: slot a handle to make the boat draggable -->
+  <schmancy-icon slot="drag-handle">drag_indicator</schmancy-icon>
 
-  <!-- default slot: blooms into the show() overlay from the FAB on open -->
+  <!-- trigger slot: the collapsed launcher — a plain click opens the panel -->
+  <div slot="trigger" class="px-4 py-2 rounded-full">Assistant · 3</div>
+
+  <!-- default slot: blooms into the show() overlay on open -->
   <div class="p-4">Panel body content</div>
 </schmancy-boat>
 ```
@@ -19,11 +22,8 @@
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `id` | string | `'default'` | Unique identifier (persists drag position in localStorage) |
-| `icon` | string | — | Material icon for the FAB (overridden by the `header` slot) |
-| `label` | string | — | FAB label text. **Omit → circular icon-only FAB** |
 | `open` | boolean | `false` | Open state, reflected. Bind `?open=${…}` to drive it |
 | `corner` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Initial anchor corner |
-| `lowered` | boolean | `false` | Lower the FAB elevation |
 
 ## Methods & event
 ```typescript
@@ -36,19 +36,25 @@ boat.addEventListener('toggle', e => e.detail) // 'open' | 'closed'
 ## Slots
 | Slot | Renders | Behavior |
 |------|---------|----------|
+| `trigger` | the collapsed launcher — everything visible while closed | A native **click** (or Enter/Space) anywhere on it opens the panel. The boat does **not** `preventDefault` / `stopPropagation` / `setPointerCapture` here, so any interactive child (button, FAB, input) works natively. A child that should *not* also open the boat calls `stopPropagation()` on its own handler. |
+| `drag-handle` | the drag affordance (a grip icon, a title bar — your choice) | **Opt-in.** Pointer-drag is wired only to this slot's boat-owned wrapper. Slot something here → draggable; omit it → the boat is static at its corner. A no-move tap on the handle also opens, so the grip doubles as a launcher. |
 | _(default)_ | the expanded panel body | relocated into the `show()` overlay on open, restored on close |
-| `summary` | trailing content on the FAB pill | live count / badge — stays on the FAB |
-| `header` | leading icon on the FAB pill | overrides the `icon` property |
 
 ## Behavior
-- Drag to reposition. Releases snap to the nearest corner (FLIP + `SPRING_SMOOTH`).
-- Activation delegates to `show()`: blooms from the FAB, backdrop / Esc / back-button / focus, and sheet-on-narrow are handled by the overlay primitive.
-- Position persists in `localStorage` under `schmancy-boat-{id}`.
+- **Drag is opt-in and unambiguous.** No `<schmancy-boat>` is draggable unless the consumer slots `drag-handle`. Drag listens on a dedicated boat-owned region wrapping only that slot — every pointerdown there is a drag intent, so there is no interactive-element denylist and new interactive components never need registering.
+- **The trigger is pure content.** Opening is a normal click that bubbles; nesting a `<schmancy-button>`, `<schmancy-fab>`, etc. in the trigger Just Works — the long-standing "interactive control swallowed by the drag/tap heuristic" bug class is gone (see ADR 0031).
+- The collapsed shape is **not** imposed by the boat: no fixed height, padding, radius or gap. Style the `trigger` slot content for any shape.
+- Drag to reposition (from the handle). Releases snap to the nearest corner (FLIP + `SPRING_SMOOTH`). Position persists in `localStorage` under `schmancy-boat-{id}`.
+- Activation delegates to `show()`: blooms from the launcher, backdrop / Esc / back-button / sheet-on-narrow handled by the overlay primitive.
 - Respects `prefers-reduced-motion`.
 
 ## Example
 ```html
-<schmancy-boat id="chat" icon="chat" label="Chat" corner="bottom-right">
+<schmancy-boat id="chat" corner="bottom-right">
+  <schmancy-icon slot="drag-handle" class="px-1 opacity-40">drag_indicator</schmancy-icon>
+  <schmancy-fab slot="trigger" variant="tertiary" .label=${`Chat · ${count}`}>
+    <schmancy-icon>chat</schmancy-icon>
+  </schmancy-fab>
   <schmancy-list class="p-2">
     <!-- messages -->
   </schmancy-list>

package/dist/skills/fab.md

@@ -0,0 +1,75 @@
+# schmancy-fab
+
+> Material 3 Floating Action Button. Faithful to the M3 spec
+> (m3.material.io/components/floating-action-button) and the `md-fab`
+> reference implementation (github.com/material-components/material-web):
+> four colour variants, three sizes, an extended form, and a lowered
+> elevation register. Adds schmancy's house `magnetic` pull + spring press.
+
+## Usage
+```html
+<!-- Regular FAB (icon-only) -->
+<schmancy-fab aria-label="Compose"><schmancy-icon>edit</schmancy-icon></schmancy-fab>
+
+<!-- Extended FAB -->
+<schmancy-fab label="Compose" variant="primary">
+  <schmancy-icon>edit</schmancy-icon>
+</schmancy-fab>
+```
+
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `'surface' \| 'primary' \| 'secondary' \| 'tertiary'` | `'surface'` | M3 colour role. `surface` = `surface-containerHigh` container + `primary` icon; the others use the matching `*-container` / `*-onContainer` pair |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Container size: 40 / 56 / 96 dp. Ignored while extended |
+| `label` | `string` | `''` | A non-empty value switches the FAB to its **extended** form (icon + text), exactly as `md-fab` derives extended from a truthy label |
+| `extended` | `boolean` | `false` | Reflected mirror of "`label` is non-empty"; drives the extended geometry. Set automatically from `label` — read it, don't set it |
+| `lowered` | `boolean` | `false` | M3 lowered FAB: elevation drops to level 1 (resting) / level 2 (hover) |
+
+Per M3 guidance a FAB is **never disabled** — there is no `disabled`
+property, matching `md-fab`.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | The icon, typically `<schmancy-icon>`. Auto-sized per FAB size (24dp; 36dp for `large`) and given `aria-hidden` when an accessible name is present |
+
+## M3 tokens (exact)
+| | small | medium | large | extended |
+|--|--|--|--|--|
+| container | 40×40 | 56×56 | 96×96 | 56 tall, content wide |
+| shape (radius) | 12dp | 16dp | 28dp | 16dp |
+| icon | 24dp | 24dp | 36dp | 24dp |
+
+Extended paddings: `padding-inline-start: 16px`, `padding-inline-end: 20px`,
+icon-to-label gap `12px` — verbatim from `md-fab`'s shared styles. Label is
+the `label-large` type scale.
+
+Elevation maps to schmancy's M3 elevation tokens
+(`--schmancy-sys-elevation-*`): resting **level 3**, hover **level 4**;
+lowered → resting **level 1**, hover **level 2**. Pressed elevation equals
+resting per M3 (the press read is the state layer + spring scale).
+
+State layer: hover `0.08`, focus/pressed `0.10`, tinted with the variant's
+on-colour.
+
+## Physics (schmancy house style)
+- **magnetic** directive embedded (strength 3, radius 60px) — same pull as `schmancy-button`.
+- Hover raises elevation per M3; active applies a spring `scale(0.96)`.
+- `prefers-reduced-motion` removes the transition and the press scale.
+
+## Examples
+```html
+<!-- Small surface FAB -->
+<schmancy-fab size="small" aria-label="Add"><schmancy-icon>add</schmancy-icon></schmancy-fab>
+
+<!-- Large tertiary FAB -->
+<schmancy-fab size="large" variant="tertiary" aria-label="Create">
+  <schmancy-icon>add</schmancy-icon>
+</schmancy-fab>
+
+<!-- Lowered extended secondary FAB -->
+<schmancy-fab lowered label="New message" variant="secondary">
+  <schmancy-icon>edit</schmancy-icon>
+</schmancy-fab>
+```

package/dist/skills/schmancy/INDEX.md

@@ -36,7 +36,7 @@ The framework pieces — touch before components.
 [Overlay](./overlay.md) · [Notification](./notification.md) · [Menu](./menu.md) · [Dropdown](./dropdown.md) · [Tooltip (directive)](./tooltip.md) · [Lightbox](./lightbox.md) · [Expand](./expand.md)
 
 ### Interactive
-[Button](./button.md) · [List](./list.md) · [Details](./details.md) · [Table](./table.md) · [Tree](./tree.md) · [Slider](./slider.md)
+[Button](./button.md) · [FAB](./fab.md) · [List](./list.md) · [Details](./details.md) · [Table](./table.md) · [Tree](./tree.md) · [Slider](./slider.md)
 
 > Lab: [QR Scanner](../../lab/skills/qr-scanner.md) — install `@mhmo91/schmancy-lab`
 

package/dist/skills/schmancy/SKILL.md

@@ -56,9 +56,9 @@ Use component tags (`<schmancy-menu>`, `<schmancy-dropdown>`, `<schmancy-tooltip
 
 ## Composition
 
-- **Audit by grep** (`AUDIT_BY_GREP`). An agent's compliance report on a file under a rule is the list of file:line citations of the rule's forbidden patterns; an empty list is compliance. The rule applies to every other rule in this skill (`PRIMITIVE_FIRST`, `TOKEN_FIRST_NO_ARBITRARY`, `NO_LOCAL_CLASS_CSS`, `NO_TERNARY_NOTHING_DISPATCH`): a claim that a file complies is a claim about what the file does NOT contain, and that claim is verified by enumerating the rule's forbidden patterns and grepping each one.
-  Sources: each rule above names its forbidden patterns explicitly — `TOKEN_FIRST_NO_ARBITRARY` forbids `[...]` arbitrary-value Tailwind utilities; `PRIMITIVE_FIRST` forbids raw HTML elements whose class attribute carries design-system styling (typography/color/surface/spacing-as-design); `NO_LOCAL_CLASS_CSS` forbids class/id/attribute selectors inside the `css` template; `NO_TERNARY_NOTHING_DISPATCH` forbids `${cond ? html\`...\` : nothing}` and `${cond && html\`...\`}` patterns.
-  Remediation: before reporting any file compliant, run a grep against each forbidden pattern named by the rule under audit (e.g. `grep -nE '\[(?:[^]]+)\]' <file>` for `TOKEN_FIRST_NO_ARBITRARY`; `grep -nE 'class="[^"]*\b(text-|bg-|border-|rounded-|shadow-|tracking-|leading-|p[xy]?-)' <file>` plus a manual scan for raw `<div>`/`<span>` carrying those classes for `PRIMITIVE_FIRST`). The compliance report's body is the concatenation of those grep outputs annotated with their rule name; an empty body across every pattern under every rule is the only form of "compliant". A claim of compliance unaccompanied by the grep evidence is not a compliance report and is treated as an unverified assertion that the audit loop rejects.
+- **Audit by grep** (`AUDIT_BY_GREP`). An agent's compliance report on a file under a rule is the list of file:line citations of the rule's forbidden patterns; an empty list is compliance. The rule applies to every other rule in this skill (`PRIMITIVE_FIRST`, `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`, `NO_LOCAL_CLASS_CSS`, `NO_TERNARY_NOTHING_DISPATCH`): a claim that a file complies is a claim about what the file does NOT contain, and that claim is verified by enumerating the rule's forbidden patterns and grepping each one.
+  Sources: each rule above names its forbidden patterns explicitly — `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE` forbids a single-value `--<namespace>-x` `@theme` alias (the portable `[...]` arbitrary value is canonical, not forbidden); `PRIMITIVE_FIRST` forbids raw HTML elements whose class attribute carries design-system styling (typography/color/surface/spacing-as-design); `NO_LOCAL_CLASS_CSS` forbids class/id/attribute selectors inside the `css` template; `NO_TERNARY_NOTHING_DISPATCH` forbids `${cond ? html\`...\` : nothing}` and `${cond && html\`...\`}` patterns.
+  Remediation: before reporting any file compliant, run a grep against each forbidden pattern named by the rule under audit (e.g. `grep -nE '^\s*--[a-z-]+:' web/src/styles.css owl/src/**/styles.css` for single-value `@theme` aliases under `ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`; `grep -nE 'class="[^"]*\b(text-|bg-|border-|rounded-|shadow-|tracking-|leading-|p[xy]?-)' <file>` plus a manual scan for raw `<div>`/`<span>` carrying those classes for `PRIMITIVE_FIRST`). The compliance report's body is the concatenation of those grep outputs annotated with their rule name; an empty body across every pattern under every rule is the only form of "compliant". A claim of compliance unaccompanied by the grep evidence is not a compliance report and is treated as an unverified assertion that the audit loop rejects.
 - **Schmancy primitive first** (`PRIMITIVE_FIRST`). Within `web/**`, every visible UI element is a custom element exported from `packages/schmancy/src/**`, and an element absent from that export set is added there before being imported into `web/**`. The rule sits above the styling rules: a `<div class="text-xs text-surface-on-variant">…</div>` whose role is typography is a violation even when every utility resolves to a registered token, because `<schmancy-typography>` already covers that role; the styling rules apply only to whatever class strings remain after the right primitive has been selected.
   Sources: [packages/schmancy/skills/schmancy/INDEX.md](../INDEX.md) catalogues the export set by job (foundations / atoms / forms / navigation / overlays / interaction / feedback / display); each role's reference file (`typography.md`, `surface.md`, `button.md`, `overlay.md`, …) names the props, slots, and events that displace the equivalent `<div>` + utility-class pattern. The export set is the single source — a primitive that is not exported from `packages/schmancy/src/**` does not satisfy this rule even if it lives in a private file inside the schmancy tree.
   Remediation: walk every `.ts` and `.html` file under `web/**` and list every raw HTML element whose class string carries design-system styling (typography, color, spacing-as-design-decision, surface, layout-as-design-decision, motion, overlay) — those are the violations. For each, look up the matching schmancy primitive in `INDEX.md` and rewrite the element through that primitive (`<schmancy-typography type=… token=…>` for type-scale text, `<schmancy-surface type=…>` for elevated/bounded surfaces (size with Tailwind utilities), `<schmancy-grid>`/`<schmancy-flex>` for layout primitives with design intent, the imperative `show`/`$notify`/`schmancyContentDrawer.push` services for overlays, `<schmancy-scroll>` for scroll containers). When a needed primitive is absent from the export set, design and implement it as a new component under `packages/schmancy/src/<role>/` — extending `SchmancyElement` with `static styles = [css\`...\`]`, registered in `HTMLElementTagNameMap`, exported through the package barrel, and documented with a sibling `.md` in the skill's reference set — and only then introduce the first call site in `web/**`. The audit subagent iterates the whole `web/**` tree, surfaces the violation list, applies the rewrites, runs `yarn workspace @momo/web tsc --noEmit` plus the colocated `*-view.test.ts` suites, and reports pre-existing violations that require a new schmancy primitive as a separate punch list for designer/architect approval before the implementation lands. The loop exits when every `web/**` file's visible UI elements are schmancy primitives and the typecheck plus the test suites pass.
@@ -113,10 +113,9 @@ When two components genuinely cannot share a signal (e.g., a generic reusable co
 **Styling**
 - Styling uses Tailwind and schmancy tokens. The `css` block in `static styles` contains only `:host` rules, `@keyframes`, and selectors targeting vendor pseudo-elements (`::-webkit-*`, `::-moz-*`). Other styling is set through Tailwind utility classes and schmancy theme tokens on the `class=` attribute. The `style=` attribute holds per-instance dynamic values only (e.g. `style="--tide: ${value}"`).
   Remediation: move declarations to Tailwind on the `class=` attribute (`backdrop-filter: blur(20px)` → `backdrop-blur-xl`; `color-mix(in oklch, Canvas 72%, transparent)` → `bg-surface/70`; `border-radius: 14px` → `rounded-2xl`; `transition: opacity 80ms linear` → `transition-opacity duration-75 ease-linear`). When a visual pattern seems to want its own class (like `.glass`), check `INDEX.md` — schmancy likely ships the component.
-- Colors: Tailwind utility classes (`bg-surface-on`, `text-primary-default`, `border-outline-variant`) are the preferred surface — every `--schmancy-sys-color-*` token is auto-aliased to `--color-*`, which Tailwind v4 turns into the full `bg-X` / `text-X` / `border-X` / `ring-X` / `fill-X` / `stroke-X` namespace. Reach for raw `var(--schmancy-sys-color-*)` only inside the `css` template literal (where Tailwind doesn't apply) or for custom tokens you've registered yourself. Never hardcoded hex.
-- **No arbitrary-value escape** (`TOKEN_FIRST_NO_ARBITRARY`). Within `web/src/**` and `packages/schmancy/src/**`, no Tailwind arbitrary-value utility (`[...]`) appears; a value not yet covered by `packages/schmancy/src/theme/theme.style.css` or the Tailwind default theme is added as a token to that file before being used. This rule supersedes the prior `TOKEN_FIRST_LITERALS_COMPLETION` annotation form: an inline `// token-gap: <namespace>` comment is no longer a valid resolution, since color and size namespaces are exhaustively covered by schmancy and Tailwind, and any uncovered namespace (aspect ratio, motion curve, custom breakpoint) is itself a token-registry extension waiting to be made.
-  Sources: `theme.md` enumerates the schmancy color tokens (every `--schmancy-sys-color-*` auto-aliases to a Tailwind class); `typography.md` enumerates the type scale; `theme.style.css` declares the spacing, radius, shadow, font, text, tracking, leading, aspect, breakpoint, container, ease, and animate namespaces, every entry of which Tailwind v4 lifts into a named utility. A bracket-syntax utility in either glob is by construction either a value the registry already covers (rule violation, replace with the token) or a value the registry does not yet cover (rule violation, extend the registry first).
-  Remediation: list every `[...]` arbitrary-value utility in the changeset; for each whose value matches a `--<namespace>-*` variable, replace with the named utility (`bg-[#faf7f2]` → `bg-surface-containerLowest`, `max-w-[720px]` → `max-w-3xl`); for each whose value has no matching variable, register the variable in `packages/schmancy/src/theme/theme.style.css` first, then mirror the same `--<namespace>-x: …` declaration inside an `@theme {}` block in the consumer's stylesheet (e.g. `web/src/styles.css`) — schmancy ships the variable to its own shadow-DOM TailwindMixin, the consumer mirror lets Tailwind v4 generate the named utility for document-scope code. When the variable lives in both places but the utility class still does not apply inside a shadow-DOM component (the mixin's utility subset is frozen at schmancy build time, so consumer-introduced class names can't be added), bind the registered variable through an inline `style="<property>: var(--<namespace>-x);"` attribute on the element — the bracket-syntax rule is satisfied because no Tailwind arbitrary-value utility appears in the markup, and the `style=` attribute consuming a registered CSS custom property fits the per-instance dynamic-value clause of `NO_LOCAL_CLASS_CSS`. When the value's design rationale is one-off (a vendor-dictated pixel width, a single-use marketing graphic) the rule still requires a registered token — the alternative is to drop the value as a design violation.
+- **Color is a theme token** (`COLOR_IS_A_THEME_TOKEN`). Every color a `web/src/**` element renders is the schmancy theme namespace surfaced as a Tailwind utility on `class=` (`text-error-default`, `bg-surface-container`, `border-outline-variant` — every `--schmancy-sys-color-*` auto-aliases to `--color-*`, which Tailwind v4 lifts into the full `bg-/text-/border-/ring-/fill-/stroke-` namespace) or a schmancy component that already carries the token (`<schmancy-surface type=…>`, `<schmancy-typography>`). A raw `#hex` / `rgb()` / `rgba()` / `hsl()` literal and an inline `var(--schmancy-sys-color-*)` inside a `style=` attribute name a color the theme already names — including inside `@keyframes` and animated backgrounds, where the animated property still references the token utility, not a hand-written value. Raw `var(--schmancy-sys-color-*)` lives only inside a component's own `static styles` `css` template (where Tailwind does not reach); a color literal in markup is admissible only with a written rationale for why no token in `theme.md` can express it. `theme.md` is the authoritative token catalog.
+- **Arbitrary value is canonical; a token is earned by semantic reuse** (`ARBITRARY_VALUE_CANONICAL_TOKEN_ON_REUSE`). Within `web/src/**`, `owl/src/**`, and `packages/schmancy/src/**`, a trivial or one-off layout/size value is its portable Tailwind arbitrary utility (`grid-rows-[auto_1fr]`, `max-w-[720px]`) and stays there; a `--<namespace>-x` `@theme` alias of a single such value is the violation and is reverted to the portable form. A `--<namespace>-*` token earns existence only as a named design concept reused across call sites — the schmancy semantic color, type-scale, spacing, and motion namespaces (`COLOR_IS_A_THEME_TOKEN` owns the color half) — never as a one-value alias. An `@theme` token is visible only to the Tailwind build that compiles its stylesheet, so a `web/src/styles.css` token emits zero CSS in `owl/`; a `suggestCanonicalClasses`-style arbitrary-value→named-utility rewrite not backed by an `@theme` declaration in the edited workspace's own build is dead CSS, and the portable arbitrary form is kept.
+- **Schmancy elements need no import in `web/src/**`** (`SCHMANCY_PLUGIN_REGISTERS`). The Vite plugin globally registers every schmancy custom element for the `web/` app; side-effect imports of individual subpaths (`import "@mhmo91/schmancy/badge"`, `import "@mhmo91/schmancy/icon"`, etc.) inside `web/src/**` are redundant and fail with TS2882. Use the tag directly in templates.
 - No `setTimeout` / `setInterval` / `addEventListener` — use RxJS (`timer`, `interval`, `fromEvent`).
 
 **Accessibility (combobox forms)**

package/dist/skills/schmancy/boat.md

@@ -1,16 +1,19 @@
 # schmancy-boat
 
-> Material-3 extended FAB that opens its panel via the `show()` overlay service. Great for persistent assistant/telemetry panels.
+> Corner-anchored launcher that opens its panel via the `show()` overlay service. Three slots, three non-overlapping intents — **no element-type sniffing**. The collapsed launcher's size, padding, radius and spacing are the consumer's; the boat owns drag, corner-snapping, position persistence and the glass surface.
 
-> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler FAB-to-overlay model.
+> **Note:** `schmancy-window` is the evolved successor with more capabilities (resize, maximize, multi-window registry). Prefer `schmancy-window` for new code unless you want the simpler launcher-to-overlay model.
 
 ## Usage
 ```html
-<schmancy-boat id="assistant" icon="smart_toy" label="Assistant" ?open=${isOpen}>
-  <schmancy-icon slot="header">smart_toy</schmancy-icon>
-  <span slot="summary">3</span>
+<schmancy-boat id="assistant" ?open=${isOpen}>
+  <!-- optional: slot a handle to make the boat draggable -->
+  <schmancy-icon slot="drag-handle">drag_indicator</schmancy-icon>
 
-  <!-- default slot: blooms into the show() overlay from the FAB on open -->
+  <!-- trigger slot: the collapsed launcher — a plain click opens the panel -->
+  <div slot="trigger" class="px-4 py-2 rounded-full">Assistant · 3</div>
+
+  <!-- default slot: blooms into the show() overlay on open -->
   <div class="p-4">Panel body content</div>
 </schmancy-boat>
 ```
@@ -19,11 +22,8 @@
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `id` | string | `'default'` | Unique identifier (persists drag position in localStorage) |
-| `icon` | string | — | Material icon for the FAB (overridden by the `header` slot) |
-| `label` | string | — | FAB label text. **Omit → circular icon-only FAB** |
 | `open` | boolean | `false` | Open state, reflected. Bind `?open=${…}` to drive it |
 | `corner` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Initial anchor corner |
-| `lowered` | boolean | `false` | Lower the FAB elevation |
 
 ## Methods & event
 ```typescript
@@ -36,19 +36,25 @@ boat.addEventListener('toggle', e => e.detail) // 'open' | 'closed'
 ## Slots
 | Slot | Renders | Behavior |
 |------|---------|----------|
+| `trigger` | the collapsed launcher — everything visible while closed | A native **click** (or Enter/Space) anywhere on it opens the panel. The boat does **not** `preventDefault` / `stopPropagation` / `setPointerCapture` here, so any interactive child (button, FAB, input) works natively. A child that should *not* also open the boat calls `stopPropagation()` on its own handler. |
+| `drag-handle` | the drag affordance (a grip icon, a title bar — your choice) | **Opt-in.** Pointer-drag is wired only to this slot's boat-owned wrapper. Slot something here → draggable; omit it → the boat is static at its corner. A no-move tap on the handle also opens, so the grip doubles as a launcher. |
 | _(default)_ | the expanded panel body | relocated into the `show()` overlay on open, restored on close |
-| `summary` | trailing content on the FAB pill | live count / badge — stays on the FAB |
-| `header` | leading icon on the FAB pill | overrides the `icon` property |
 
 ## Behavior
-- Drag to reposition. Releases snap to the nearest corner (FLIP + `SPRING_SMOOTH`).
-- Activation delegates to `show()`: blooms from the FAB, backdrop / Esc / back-button / focus, and sheet-on-narrow are handled by the overlay primitive.
-- Position persists in `localStorage` under `schmancy-boat-{id}`.
+- **Drag is opt-in and unambiguous.** No `<schmancy-boat>` is draggable unless the consumer slots `drag-handle`. Drag listens on a dedicated boat-owned region wrapping only that slot — every pointerdown there is a drag intent, so there is no interactive-element denylist and new interactive components never need registering.
+- **The trigger is pure content.** Opening is a normal click that bubbles; nesting a `<schmancy-button>`, `<schmancy-fab>`, etc. in the trigger Just Works — the long-standing "interactive control swallowed by the drag/tap heuristic" bug class is gone (see ADR 0031).
+- The collapsed shape is **not** imposed by the boat: no fixed height, padding, radius or gap. Style the `trigger` slot content for any shape.
+- Drag to reposition (from the handle). Releases snap to the nearest corner (FLIP + `SPRING_SMOOTH`). Position persists in `localStorage` under `schmancy-boat-{id}`.
+- Activation delegates to `show()`: blooms from the launcher, backdrop / Esc / back-button / sheet-on-narrow handled by the overlay primitive.
 - Respects `prefers-reduced-motion`.
 
 ## Example
 ```html
-<schmancy-boat id="chat" icon="chat" label="Chat" corner="bottom-right">
+<schmancy-boat id="chat" corner="bottom-right">
+  <schmancy-icon slot="drag-handle" class="px-1 opacity-40">drag_indicator</schmancy-icon>
+  <schmancy-fab slot="trigger" variant="tertiary" .label=${`Chat · ${count}`}>
+    <schmancy-icon>chat</schmancy-icon>
+  </schmancy-fab>
   <schmancy-list class="p-2">
     <!-- messages -->
   </schmancy-list>