tyrell-components 1.0.0-TC56 → 1.0.0-TC57

package/lib/base/ty-component.d.ts

@@ -119,6 +119,9 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
     /** Subclasses report their own validity here, not via _internals directly,
      *  so a user's setCustomValidity() survives re-validation. */
     protected applyValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    /** Show the field's current validation message in its error display, if
+     *  it's invalid. Called on blur after the user edited the field. */
+    protected revealValidity(): void;
     get validity(): ValidityState | undefined;
     get validationMessage(): string;
     get willValidate(): boolean;

package/lib/base/ty-component.js

@@ -89,7 +89,7 @@ for (const [name, config] of Object.entries(ctor.properties)) {
 if (!config.formValue)
 continue;
 const attr = this.getAttribute(this._toKebabCase(name));
-this._resetDefaults.set(name, attr ?? config.default ?? null);
+this._resetDefaults.set(name, attr ?? (typeof config.default === 'function' ? config.default() : config.default) ?? null);
 }
 }
 const preSetProps = this._capturePreSetProperties();
@@ -171,6 +171,10 @@ return this.constructor.formAssociated === true;
 applyValidity(flags, message, anchor) {
 this._validity.set(flags, message, anchor);
 }
+revealValidity() {
+if (this._validates)
+this._validity.reveal();
+}
 get validity() {
 return this._validates ? this._internals.validity : undefined;
 }

package/lib/components/calendar.d.ts

@@ -128,5 +128,7 @@ export declare class TyCalendar extends HTMLElement {
     private pickMonth;
     private handleKeydown;
     private focusNavTitle;
+    /** Focus the grid's tab stop (the focused day, or month in the month view). */
+    focus(options?: FocusOptions): void;
     private focusDayGrid;
 }

package/lib/components/calendar.js

@@ -792,6 +792,15 @@ requestAnimationFrame(() => {
 this._navigation?.shadowRoot?.querySelector('.nav-title')?.focus();
 });
 }
+focus(options) {
+const cell = this._view === 'months'
+? this._monthGrid?.querySelector('.month-cell[tabindex="0"]')
+: this._monthDisplay?.shadowRoot?.querySelector('.calendar-day-cell[tabindex="0"]');
+if (cell)
+cell.focus(options);
+else
+super.focus(options);
+}
 focusDayGrid() {
 requestAnimationFrame(() => {
 const cell = this._monthDisplay?.shadowRoot?.querySelector('.calendar-day-cell[tabindex="0"]');

package/lib/components/checkbox.d.ts

@@ -110,6 +110,8 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
      * Label, required asterisk, and error UI are the consumer's responsibility.
      */
     protected render(): void;
+    /** Focus the checkbox itself (the host is not focusable; its role element is). */
+    focus(options?: FocusOptions): void;
     /** required + unchecked => valueMissing; otherwise valid. */
     private updateValidity;
     get checked(): boolean;

package/lib/components/checkbox.js

@@ -165,6 +165,13 @@ this.setupEventListeners();
 this.applyLabelName(checkboxEl);
 this.updateValidity();
 }
+focus(options) {
+const el = this.shadowRoot?.querySelector(".checkbox-container");
+if (el)
+el.focus(options);
+else
+super.focus(options);
+}
 updateValidity() {
 const anchor = this.shadowRoot?.querySelector(".checkbox-container");
 if (this.disabled) {

package/lib/components/date-picker.d.ts

@@ -147,6 +147,8 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      */
     protected getFormValue(): FormDataEntryValue | null;
     protected updateFormValue(): void;
+    /** Focus the field: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     /**
      * `required` used to be cosmetic: nothing reported valueMissing, so an empty
      * required picker never blocked its form. Disabled pickers don't validate.

package/lib/components/date-picker.js

@@ -220,7 +220,7 @@ ensureStyles(shadow, { css: datePickerStyles, id: 'ty-date-picker' });
 onConnect() {
 this.initializeState();
 this.render();
-this.updateValidity();
+this.updateFormValue();
 this._localeObserver = observeLocaleChanges(this, () => {
 this.render();
 });
@@ -311,9 +311,16 @@ getFormValue() {
 return componentsToOutputValue(this.getComponents());
 }
 updateFormValue() {
-super.updateFormValue();
+this._internals.setFormValue(this.getFormValue() ?? '');
 this.updateValidity();
 }
+focus(options) {
+const stub = this.shadowRoot?.querySelector('.date-picker-stub');
+if (stub)
+stub.focus(options);
+else
+super.focus(options);
+}
 updateValidity() {
 if (this.getProperty('disabled') || !this.getProperty('required') || this.getFormValue()) {
 this.applyValidity({});

package/lib/components/file-upload.d.ts

@@ -84,6 +84,8 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
         do — without this the asterisk showed but submission went through. */
     private updateValidity;
     protected getFormValue(): FormData | string | null;
+    /** Focus the drop zone: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     /**
      * Match a file against the `accept` attribute the way native inputs do:
      * comma-separated list of `.ext`, `type/subtype` or `type/*` entries.

package/lib/components/file-upload.js

@@ -29,7 +29,9 @@ this._dropHandler = null;
 this._inputChangeHandler = null;
 ensureStyles(this.shadowRoot, { css: fileUploadStyles, id: "ty-file-upload" });
 }
-onConnect() { }
+onConnect() {
+this.updateFormValue();
+}
 onDisconnect() {
 this.removeEventListeners();
 }
@@ -57,14 +59,24 @@ this.applyValidity({});
 }
 }
 getFormValue() {
-if (this._files.length === 0 || !this.name)
+if (!this.name)
 return null;
 const fd = new FormData();
+if (this._files.length === 0) {
+fd.append(this.name, new File([], '', { type: 'application/octet-stream' }));
+}
 for (const file of this._files) {
 fd.append(this.name, file);
 }
 return fd;
 }
+focus(options) {
+const zone = this.shadowRoot?.querySelector('.drop-zone');
+if (zone)
+zone.focus(options);
+else
+super.focus(options);
+}
 matchesAccept(file) {
 const accept = this.accept?.trim();
 if (!accept)
@@ -146,6 +158,7 @@ names: this._files.map((f) => f.name),
 };
 setTimeout(() => {
 this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
+this.revealValidity();
 }, 0);
 }
 removeFile(index) {

package/lib/components/input.d.ts

@@ -59,6 +59,41 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
             visual: boolean;
             default: boolean;
         };
+        pattern: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        minlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        maxlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        min: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        max: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooShortMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooLongMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         error: {
             type: "string";
             visual: boolean;
@@ -102,6 +137,8 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     };
     private _shadowValue;
     private _isFocused;
+    /** The user typed since the field was created: blur then shows its validation message. */
+    private _userEdited;
     private _listenersSetup;
     private _errorAutoDanger;
     private _customFlavorSheet;
@@ -143,8 +180,24 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     set label(v: string);
     get disabled(): boolean;
     set disabled(v: boolean);
+    /** Focus the inner <input>: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     get required(): boolean;
     set required(v: boolean);
+    get pattern(): string;
+    set pattern(v: string);
+    get minLength(): number;
+    set minLength(v: number);
+    get maxLength(): number;
+    set maxLength(v: number);
+    get min(): string;
+    set min(v: string);
+    get max(): string;
+    set max(v: string);
+    get tooShortMessage(): string;
+    set tooShortMessage(v: string);
+    get tooLongMessage(): string;
+    set tooLongMessage(v: string);
     get error(): string;
     set error(v: string);
     get size(): Size;
@@ -165,6 +218,13 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     private dispatchChangeEvent;
     private removeEventListeners;
     /** IMPORTANT: Only called ONCE, not on every render. */
+    /**
+     * Enter submits the owning form, like a native input (HTML implicit
+     * submission): through the form's default button when it has one (nothing
+     * if that button is disabled), otherwise only when this is the form's only
+     * text field.
+     */
+    private _implicitSubmit;
     private setupEventListeners;
     /** Render the input component with wrapper and slots. */
     render(): void;
@@ -174,10 +234,22 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
      * `type` property stays "password" (form value and API unaffected).
      */
     private setupPasswordToggle;
+    /**
+     * pattern and maxlength go on the inner <input>: pattern for the browser's
+     * own patternMismatch check, maxlength so typing stops at the limit like a
+     * native field. Formatted (numeric) types show a display string, so they
+     * get neither.
+     */
+    private syncConstraintAttributes;
     /**
      * Reflect constraint validation to the owning <form> via ElementInternals.
-     * Without this `required` is only cosmetic — the inner shadow <input> can't
-     * block the outer form. Empty + required => valueMissing; otherwise valid.
+     * Without this the inner shadow <input> can't block the outer form.
+     * Rules, first failing one supplies the message:
+     * - required: empty => valueMissing
+     * - email/url: the inner input's own typeMismatch
+     * - text types: pattern, minlength, maxlength
+     * - number/currency/percent/compact: min, max against the numeric value
+     * Empty values only fail `required`, like native inputs.
      * Disabled fields are barred from constraint validation.
      */
     private updateValidity;

package/lib/components/input.js

@@ -13,6 +13,7 @@ constructor() {
 super();
 this._shadowValue = null;
 this._isFocused = false;
+this._userEdited = false;
 this._listenersSetup = false;
 this._errorAutoDanger = false;
 this._customFlavorSheet = null;
@@ -22,6 +23,34 @@ this._focusHandler = null;
 this._blurHandler = null;
 this._inputDebounceTimer = null;
 this._changeDebounceTimer = null;
+this._implicitSubmit = (e) => {
+if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented)
+return;
+const form = this._internals.form;
+if (!form)
+return;
+const controls = Array.from(form.elements);
+const isSubmitter = (el) => (el instanceof HTMLButtonElement && el.type === 'submit') ||
+(el instanceof HTMLInputElement && (el.type === 'submit' || el.type === 'image')) ||
+(el.tagName === 'TY-BUTTON' && !['button', 'reset'].includes(el.getAttribute('type') ?? ''));
+const submitter = controls.find(isSubmitter);
+if (submitter) {
+if (submitter.disabled || submitter.hasAttribute('disabled'))
+return;
+e.preventDefault();
+const target = submitter.tagName === 'TY-BUTTON'
+? submitter.shadowRoot?.querySelector('button') ?? submitter
+: submitter;
+target.click();
+return;
+}
+const textFields = controls.filter((el) => el.tagName === 'TY-INPUT' ||
+(el instanceof HTMLInputElement && !['button', 'checkbox', 'radio', 'file', 'hidden', 'image', 'reset', 'submit', 'range', 'color'].includes(el.type)));
+if (textFields.length === 1) {
+e.preventDefault();
+form.requestSubmit();
+}
+};
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: inputStyles, id: 'ty-input' });
 }
@@ -95,14 +124,17 @@ this._changeDebounceTimer = null;
 this.render();
 }
 getFormValue() {
-const formValue = this._shadowValue !== null ? String(this._shadowValue) : null;
+const formValue = this._shadowValue !== null ? String(this._shadowValue) : '';
 return formValue;
 }
 initializeShadowValue() {
 const currentValue = this.getProperty('value');
 if (currentValue) {
 this._shadowValue = this.parseShadowValue(currentValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
+}
+else {
+this._internals.setFormValue('');
 }
 }
 parseShadowValue(value) {
@@ -155,8 +187,25 @@ get label() { return this.getProperty('label'); }
 set label(v) { this.setProperty('label', v); }
 get disabled() { return this.getProperty('disabled'); }
 set disabled(v) { this.setProperty('disabled', v); }
+focus(options) {
+this.shadowRoot?.querySelector('input')?.focus(options);
+}
 get required() { return this.getProperty('required'); }
 set required(v) { this.setProperty('required', v); }
+get pattern() { return this.getProperty('pattern'); }
+set pattern(v) { this.setProperty('pattern', v ?? ''); }
+get minLength() { return toLimit(this.getProperty('minlength')) ?? -1; }
+set minLength(v) { this.setProperty('minlength', v == null || v < 0 ? '' : String(v)); }
+get maxLength() { return toLimit(this.getProperty('maxlength')) ?? -1; }
+set maxLength(v) { this.setProperty('maxlength', v == null || v < 0 ? '' : String(v)); }
+get min() { return this.getProperty('min'); }
+set min(v) { this.setProperty('min', v == null ? '' : String(v)); }
+get max() { return this.getProperty('max'); }
+set max(v) { this.setProperty('max', v == null ? '' : String(v)); }
+get tooShortMessage() { return this.getProperty('tooShortMessage'); }
+set tooShortMessage(v) { this.setProperty('tooShortMessage', v ?? ''); }
+get tooLongMessage() { return this.getProperty('tooLongMessage'); }
+set tooLongMessage(v) { this.setProperty('tooLongMessage', v ?? ''); }
 get error() { return this.getProperty('error'); }
 set error(v) { this.setProperty('error', v); }
 get size() { return this.getProperty('size'); }
@@ -235,6 +284,7 @@ if (this._blurHandler) {
 inputEl.removeEventListener('blur', this._blurHandler);
 this._blurHandler = null;
 }
+inputEl.removeEventListener('keydown', this._implicitSubmit);
 this._listenersSetup = false;
 }
 setupEventListeners() {
@@ -249,12 +299,13 @@ console.warn('[TyInput.setupEventListeners] ⚠️ Input element not found!');
 return;
 }
 this._inputHandler = (e) => {
+this._userEdited = true;
 e.stopPropagation();
 e.stopImmediatePropagation();
 const target = e.target;
 const rawValue = target.value;
 this._shadowValue = this.parseShadowValue(rawValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
 this.updateValidity();
 if (this._inputDebounceTimer !== null) {
 clearTimeout(this._inputDebounceTimer);
@@ -275,7 +326,7 @@ e.stopImmediatePropagation();
 const target = e.target;
 const rawValue = target.value;
 this._shadowValue = this.parseShadowValue(rawValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
 this.updateValidity();
 if (this._changeDebounceTimer !== null) {
 clearTimeout(this._changeDebounceTimer);
@@ -317,6 +368,8 @@ this.dispatchChangeEvent(rawValue, e);
 }
 this._isFocused = false;
 wrapperEl.classList.remove('focused');
+if (this._userEdited)
+this.revealValidity();
 if (this.shouldFormat()) {
 inputEl.value = this.getDisplayValue();
 }
@@ -330,6 +383,7 @@ inputEl.addEventListener('input', this._inputHandler);
 inputEl.addEventListener('change', this._changeHandler);
 inputEl.addEventListener('focus', this._focusHandler);
 inputEl.addEventListener('blur', this._blurHandler);
+inputEl.addEventListener('keydown', this._implicitSubmit);
 this._listenersSetup = true;
 }
 render() {
@@ -372,6 +426,7 @@ existingInput.setAttribute('required', '');
 else {
 existingInput.removeAttribute('required');
 }
+this.syncConstraintAttributes(existingInput);
 if (this.label)
 existingInput.setAttribute('aria-label', this.label);
 else
@@ -445,6 +500,7 @@ ${errorHtml}
 const inputEl = shadow.querySelector('input');
 inputEl.disabled = this.disabled;
 inputEl.required = this.required;
+this.syncConstraintAttributes(inputEl);
 if (this.label)
 inputEl.setAttribute('aria-label', this.label);
 this.setupPasswordToggle();
@@ -467,6 +523,12 @@ toggle.setAttribute('aria-label', reveal ? 'Hide password' : 'Show password');
 toggle.setAttribute('aria-pressed', String(reveal));
 });
 }
+syncConstraintAttributes(inputEl) {
+const text = !shouldFormatType(this.type);
+const set = (name, v) => text && v !== '' ? inputEl.setAttribute(name, v) : inputEl.removeAttribute(name);
+set('pattern', this.pattern);
+set('maxlength', toLimit(this.getProperty('maxlength')) != null ? String(this.maxLength) : '');
+}
 updateValidity() {
 const inputEl = this.shadowRoot?.querySelector('input');
 if (this.disabled) {
@@ -474,12 +536,48 @@ this.applyValidity({});
 return;
 }
 const current = inputEl ? inputEl.value : String(this.getProperty('value') ?? '');
-if (this.required && current.trim() === '') {
-this.applyValidity({ valueMissing: true }, 'Please fill out this field', inputEl ?? undefined);
+if (current.trim() === '') {
+if (this.required) {
+this.applyValidity({ valueMissing: true }, nativeMessage('text', { required: '' }, ''), inputEl ?? undefined);
 }
 else {
 this.applyValidity({});
 }
+return;
+}
+const flags = {};
+const messages = [];
+const fail = (flag, message) => {
+flags[flag] = true;
+messages.push(message);
+};
+if (shouldFormatType(this.type)) {
+const n = typeof this._shadowValue === 'number' ? this._shadowValue : null;
+const min = toNumber(this.min);
+const max = toNumber(this.max);
+const range = (flag) => fail(flag, nativeMessage('number', { step: 'any', min: this.min, max: this.max }, String(n)));
+if (n !== null && min !== null && n < min)
+range('rangeUnderflow');
+if (n !== null && max !== null && n > max)
+range('rangeOverflow');
+}
+else {
+if (inputEl?.validity.typeMismatch)
+fail('typeMismatch', inputEl.validationMessage);
+if (inputEl?.validity.patternMismatch)
+fail('patternMismatch', inputEl.validationMessage);
+const length = current.length;
+const minLength = toLimit(this.getProperty('minlength'));
+const maxLength = toLimit(this.getProperty('maxlength'));
+const vars = { minlength: minLength, maxlength: maxLength, length };
+if (minLength !== null && length < minLength) {
+fail('tooShort', fillMessage(this.tooShortMessage || 'Use at least {minlength} characters (now {length})', vars));
+}
+if (maxLength !== null && length > maxLength) {
+fail('tooLong', fillMessage(this.tooLongMessage || 'Use at most {maxlength} characters (now {length})', vars));
+}
+}
+this.applyValidity(flags, messages[0], inputEl ?? undefined);
 }
 }
 TyInput.formAssociated = true;
@@ -538,6 +636,41 @@ type: 'boolean',
 visual: true,
 default: false
 },
+pattern: {
+type: 'string',
+visual: true,
+default: ''
+},
+minlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+maxlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+min: {
+type: 'string',
+visual: true,
+default: ''
+},
+max: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooShortMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooLongMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
 error: {
 type: 'string',
 visual: true,
@@ -604,6 +737,33 @@ return Math.max(0, Math.min(5000, Math.floor(num)));
 }
 }
 };
+let probe = null;
+function nativeMessage(type, attrs, value) {
+probe ?? (probe = document.createElement('input'));
+for (const name of Array.from(probe.getAttributeNames()))
+probe.removeAttribute(name);
+probe.type = type;
+for (const [name, v] of Object.entries(attrs))
+if (v !== '' || name === 'required')
+probe.setAttribute(name, v);
+probe.value = value;
+return probe.validationMessage;
+}
+function fillMessage(template, vars) {
+return template.replace(/\{(\w+)\}/g, (match, key) => vars[key] != null ? String(vars[key]) : match);
+}
+function toLimit(v) {
+if (v === null || v === undefined || String(v).trim() === '')
+return null;
+const n = Number(v);
+return Number.isInteger(n) && n >= 0 ? n : null;
+}
+function toNumber(v) {
+if (v === null || v === undefined || String(v).trim() === '')
+return null;
+const n = Number(v);
+return Number.isFinite(n) ? n : null;
+}
 if (!customElements.get('ty-input')) {
 customElements.define('ty-input', TyInput);
 }

package/lib/components/modal.d.ts

@@ -52,6 +52,8 @@ export declare class TyModal extends HTMLElement {
     set open(v: boolean);
     get noBackdrop(): boolean;
     set noBackdrop(v: boolean);
+    get noZoom(): boolean;
+    set noZoom(v: boolean);
     get preventOutsideClick(): boolean;
     set preventOutsideClick(v: boolean);
     get preventEscape(): boolean;

package/lib/components/modal.js

@@ -1,4 +1,5 @@
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
+import { coerceBoolean } from '../utils/property-manager.js';
 import { ensureStyles } from '../utils/styles.js';
 import { modalStyles } from '../styles/modal.js';
 const backdropClickHandlers = new WeakMap();
@@ -259,6 +260,7 @@ pendingCloseReasons.delete(el);
 dispatchModalEvent(el, 'close', { reason });
 }
 }
+syncBackdropZoom();
 dialog.onclose = (event) => {
 if (event.target !== dialog)
 return;
@@ -274,10 +276,7 @@ syncBackdropZoom();
 };
 }
 function syncBackdropZoom() {
-const anyOpen = Array.from(document.querySelectorAll('ty-modal[open][backdrop-zoom], ty-dialog[open][backdrop-zoom]')).some((m) => {
-const v = m.getAttribute('backdrop-zoom').toLowerCase().trim();
-return v !== 'false' && v !== '0';
-});
+const anyOpen = Array.from(document.querySelectorAll('ty-modal[open], ty-dialog[open]')).some((m) => parseBoolAttr(m, 'open') && !parseBoolAttr(m, 'no-zoom'));
 document.documentElement.classList.toggle('ty-modal-zoom', anyOpen);
 }
 function cleanup(el) {
@@ -325,21 +324,25 @@ hoverLeaveHandlers.delete(el);
 }
 export class TyModal extends HTMLElement {
 static get observedAttributes() {
-return ['open', 'no-backdrop', 'prevent-outside-click', 'prevent-escape', 'label'];
+return ['open', 'no-backdrop', 'no-zoom', 'prevent-outside-click', 'prevent-escape', 'label'];
 }
 get open() { return parseBoolAttr(this, 'open'); }
-set open(v) { v ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
+set open(v) { coerceBoolean(v) ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
 get noBackdrop() { return parseBoolAttr(this, 'no-backdrop'); }
 set noBackdrop(v) {
-v ? this.setAttribute('no-backdrop', '') : this.removeAttribute('no-backdrop');
+coerceBoolean(v) ? this.setAttribute('no-backdrop', '') : this.removeAttribute('no-backdrop');
+}
+get noZoom() { return parseBoolAttr(this, 'no-zoom'); }
+set noZoom(v) {
+coerceBoolean(v) ? this.setAttribute('no-zoom', '') : this.removeAttribute('no-zoom');
 }
 get preventOutsideClick() { return parseBoolAttr(this, 'prevent-outside-click'); }
 set preventOutsideClick(v) {
-v ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
+coerceBoolean(v) ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
 }
 get preventEscape() { return parseBoolAttr(this, 'prevent-escape'); }
 set preventEscape(v) {
-v ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
+coerceBoolean(v) ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
 }
 constructor() {
 super();

package/lib/components/option.js

@@ -1,4 +1,5 @@
 import { ensureStyles } from '../utils/styles.js';
+import { coerceBoolean } from '../utils/property-manager.js';
 import { optionStyles } from '../styles/option.js';
 const CHECK_SVG = `
 <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -80,6 +81,7 @@ get selected() {
 return this._selected;
 }
 set selected(value) {
+value = coerceBoolean(value);
 if (this._selected !== value) {
 this._selected = value;
 if (value) {
@@ -95,6 +97,7 @@ get disabled() {
 return this._disabled;
 }
 set disabled(value) {
+value = coerceBoolean(value);
 if (this._disabled !== value) {
 this._disabled = value;
 if (value) {
@@ -110,6 +113,7 @@ get highlighted() {
 return this._highlighted;
 }
 set highlighted(value) {
+value = coerceBoolean(value);
 if (this._highlighted !== value) {
 this._highlighted = value;
 if (value) {
@@ -125,6 +129,7 @@ get hidden() {
 return this._hidden;
 }
 set hidden(value) {
+value = coerceBoolean(value);
 if (this._hidden !== value) {
 this._hidden = value;
 if (value) {