@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/generated/components/table-view.js

@@ -1,14 +1,17 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { MutationObserverSingleton } from '../internal/class/mutation-observer-singleton';
-import { $, listActive, onoff } from '../internal/utils';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, devFlags, listActive, onoff, renderLabelTitle } from '../internal/utils';
 import { Snapshot } from '../snapshot';
-const observers = new MutationObserverSingleton();
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ */
 export class TableView extends HTMLElement {
     #styleObserver;
     #compactToolbarItem;
-    #trackedElements = new Set();
     static #template;
     static get template() {
         return (this.#template ??= $(String.raw `
@@ -39,59 +42,33 @@ export class TableView extends HTMLElement {
           <slot name="footer-trailing"></slot>
         </div>
       </div>
-    </div>`, ''));
+    </div>`));
     }
     #shadowRoot;
-    #colSlot;
-    // #slot?: HTMLSlotElement
+    #slots = new Map();
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#colSlot = this.#shadowRoot.querySelector('slot[name=column]') ?? undefined;
-        // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        this.#colSlot?.addEventListener('slotchange', this.#handleSlotchange);
-        // this.append(
-        //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
-        //               <label-view slot="label" title="Delete"></label-view>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view title="Edit Sidebar"></label-view>
-        //               </button>
-        //             </menu-view>
-        //             `)
-        // $(`<menu-view slot="header-trailing">
-        //             <label-view slot="label" title="Delete"></label-view>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view title="Edit Sidebar"></label-view>
-        //             </button>
-        //           </menu-view>
-        //           <div slot="footer-leading">22</div>
-        //           <div slot="footer-trailing"><button>&lt;</button> <button>&gt;</button></div>`)
-        // )
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#styleObserver?.disconnect();
-        observers.clearObservationsSet(this.#trackedElements);
+        this.#observers.unobserveAll();
         this.#compactToolbarItem = undefined;
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // console.log(999, this.#shadowRoot.querySelector('[part*=table-column-stack]'))
         this.#styleObserver = new CSSStyleObserver({
             properties: ['--adaptable-table-style-index'],
         });
@@ -101,27 +78,26 @@ export class TableView extends HTMLElement {
         this.#styleObserver.observe(target, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
-    #handleSlotchange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
-        if (0 < assigned.length)
-            this.#handleTagMutation();
+    #handleColumnSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
+        // if (0 < assigned.length)
+        this.#renderColumns([]);
     };
-    #handleTagMutation = (entry) => {
-        console.debug(`${_a.name} ⚡️ mutation`);
-        // const sourceSlot = 0 < (this.#colSlot?.assignedElements({ flatten: true }) ?? []).length ? this.#colSlot : this.#colSlot
-        // const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`))
-        // menu.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`
-        // for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? []) menu.insertAdjacentElement('beforeend', TableView.wrapTag(el, sourceSlot?.name))
-        //
+    #renderColumns = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`);
+            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
         this.#compactToolbarItem.innerHTML = `<label-view slot="label" system-image="dots-three"></label-view>`;
-        for (const node of this.#colSlot?.assignedElements({ flatten: true }) ?? []) {
+        for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
             if (!node.matches('[is=table-column]'))
                 continue;
             const btn = $(`<button type="button" tabindex="0">
@@ -129,20 +105,18 @@ export class TableView extends HTMLElement {
           <label-view></label-view>
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
-      </button>`), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
-            title?.setAttribute('title', node.textContent.trim());
-            subTitle?.setAttribute('title', node.ariaSort ?? '');
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
+            if (title)
+                renderLabelTitle(title, node.textContent.trim()); //title?.setAttribute('title', node.textContent.trim())
+            if (subTitle)
+                renderLabelTitle(subTitle, node.ariaSort ?? ''); //subTitle?.setAttribute('title', node.ariaSort ?? '')
             this.#compactToolbarItem.appendChild(btn);
         }
-        // const wasConnected = this.#compactToolbarItem?.isConnected
-        // this.#compactToolbarItem?.removeEventListener('click', this.#handleMenuClick)
-        // this.#compactToolbarItem?.remove()
-        // this.#compactToolbarItem = menu
-        // this.#compactToolbarItem?.addEventListener('click', this.#handleMenuClick)
-        // if (wasConnected) this.insertAdjacentElement('beforeend', this.#compactToolbarItem)
     };
+    #observers = new MutationObserverSet(this.#renderColumns);
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
         const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
         if (!target)
             return;
@@ -150,25 +124,29 @@ export class TableView extends HTMLElement {
         const adaptableTableStyle = style.getPropertyValue('--adaptable-table-style') || 'compact';
         switch (adaptableTableStyle) {
             case 'expanded':
-                if (!this.#compactToolbarItem?.isConnected)
-                    break;
-                this.#compactToolbarItem?.remove();
+                if (this.#compactToolbarItem?.isConnected)
+                    this.#compactToolbarItem?.remove();
                 break;
             default:
                 if (!this.#compactToolbarItem)
                     break;
-                if (this.#compactToolbarItem?.isConnected)
+                if (!this.#slots
+                    ?.get('column')
+                    ?.assignedElements()
+                    .filter((el) => el.matches(':is(button[is=table-column])')).length)
                     break;
-                this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
+                if (!this.#compactToolbarItem?.isConnected)
+                    this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
                 break;
         }
     };
-    #handleMenuClick = (evt) => {
-        const btn = evt.target.closest('button');
+    #handleMenuClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const btn = target.closest('button');
         if (!btn)
             return;
-        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])];
-        const index = siblings.indexOf(btn);
+        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])], index = siblings.indexOf(btn);
         this.querySelector(`:scope>[slot=column]:nth-of-type(${index + 1})`)?.click();
     };
 }

package/generated/components/text-field.d.ts

@@ -10,9 +10,9 @@ export declare class TextField extends FormAssociatedBase {
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get keyboardType(): KeyboardType;
     get text(): string;
     set text(v: string);

package/generated/components/text-field.js

@@ -1,8 +1,9 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { $, compareBigDecimals, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, compareBigDecimals, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -10,21 +11,7 @@ const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
  */
 export class TextField extends FormAssociatedBase {
     static get observedAttributes() {
-        return [
-            'prompt',
-            'minimum',
-            'maximum',
-            'min-length',
-            'max-length',
-            'label',
-            'name',
-            'text',
-            'text-input-autocapitalization',
-            'disable-autocorrection',
-            'keyboard-type',
-            'required',
-            'disabled',
-        ];
+        return ['prompt', 'minimum', 'maximum', 'min-length', 'max-length', 'label', 'name', 'text', 'text-input-autocapitalization', 'disable-autocorrection', 'keyboard-type', 'required', 'disabled'];
     }
     static #template;
     static get template() {
@@ -37,12 +24,19 @@ export class TextField extends FormAssociatedBase {
       <input type="text" part="root input text-field-form-input">
     </div>
     <slot name="validity-options" hidden></slot>
-  </label>`, ''));
+  </label>`));
     }
+    #renderValidityMsgs = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     // #internals: ElementInternals
     #customValidity = '';
-    #validitiesSlot;
+    // #validitiesSlot?: HTMLSlotElement
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
     #input;
     get #internals() {
         return getInternals(this);
@@ -51,9 +45,13 @@ export class TextField extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#validitiesSlot).on(), 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
         this.#input = this.#shadowRoot.querySelector('input') ?? undefined;
         CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
         CleanupRegistry.register(this, onoff([
@@ -62,23 +60,13 @@ export class TextField extends FormAssociatedBase {
             { types: 'beforeinput', listener: this.#handleInputBeforeinput },
             { types: 'paste', listener: this.#handleInputPaste },
         ], this.#input).on());
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.text = this.text;
         }, I18n.on).on());
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // finally
-        if (!this.hasAttribute('text'))
-            return;
-        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
-        this.#sendValueToForm(false);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'keyboard-type':
                 switch (newValue) {
@@ -126,7 +114,7 @@ export class TextField extends FormAssociatedBase {
                 break;
             case 'text':
                 // if (this.#input) this.#input.value = newValue ?? ''
-                this.text = newValue ?? '';
+                // nothing happens //this.text = newValue ?? ''
                 break;
             case 'required':
                 this.#input?.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
@@ -149,14 +137,8 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`));
-                    label.textContent = newValue;
-                }
-                else
-                    label?.remove();
-                this.#sendValueToForm();
+                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                // this.#sendValueToForm()
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))
@@ -180,10 +162,20 @@ export class TextField extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // finally
+        if (!this.hasAttribute('text'))
+            return;
+        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
+        this.#sendValueToForm(false);
+    }
     get keyboardType() {
-        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '')
-            ? this.getAttribute('keyboard-type')
-            : 'default';
+        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
     }
     get text() {
         return this.#input?.value ?? '';
@@ -200,8 +192,19 @@ export class TextField extends FormAssociatedBase {
             set(this.#input, 'value', finalText); // if (this.text !== finalText) this.#input.value = finalText
         }
     }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
+    };
     #handleFocusin = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (evt.target === this)
             this.#input?.focus();
     };
@@ -232,9 +235,10 @@ export class TextField extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         evt.preventDefault();
         const data = this.#identity(evt.clipboardData?.getData('text') ?? ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
@@ -303,41 +307,42 @@ export class TextField extends FormAssociatedBase {
                 const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
                 digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
-            //   // console.log(isValidDecimal(""));       // true
-            //   // console.log(isValidDecimal("+"));      // true
-            //   // console.log(isValidDecimal("-"));      // true
-            //   // console.log(isValidDecimal("123"));    // true
-            //   // console.log(isValidDecimal("+123"));   // true
-            //   // console.log(isValidDecimal("-456"));   // true
-            //   // console.log(isValidDecimal("12.34"));  // true
-            //   // console.log(isValidDecimal("-0,56"));  // true
-            //   // console.log(isValidDecimal(".78"));    // true
-            //   // console.log(isValidDecimal(",9"));     // true
-            //   // console.log(isValidDecimal("12.3.4")); // false
-            //   // console.log(isValidDecimal("12,3,4")); // false
-            //   // console.log(isValidDecimal("12-3"));   // false
-            //   // console.log(isValidDecimal("12a"));    // false
+            //   // isValidDecimal("");       // true
+            //   // isValidDecimal("+");      // true
+            //   // isValidDecimal("-");      // true
+            //   // isValidDecimal("123");    // true
+            //   // isValidDecimal("+123");   // true
+            //   // isValidDecimal("-456");   // true
+            //   // isValidDecimal("12.34");  // true
+            //   // isValidDecimal("-0,56");  // true
+            //   // isValidDecimal(".78");    // true
+            //   // isValidDecimal(",9");     // true
+            //   // isValidDecimal("12.3.4"); // false
+            //   // isValidDecimal("12,3,4"); // false
+            //   // isValidDecimal("12-3");   // false
+            //   // isValidDecimal("12a");    // false
             case 'number-pad':
                 const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
                 digitsOnlyRegex = /^(\d+)?$/; // allow only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
-            //   // console.log(isValidInteger(""));      // true
-            //   // console.log(isValidInteger("+"));     // true
-            //   // console.log(isValidInteger("-"));     // true
-            //   // console.log(isValidInteger("123"));   // true
-            //   // console.log(isValidInteger("+123"));  // true
-            //   // console.log(isValidInteger("-456"));  // true
-            //   // console.log(isValidInteger("12-3"));  // false
-            //   // console.log(isValidInteger("++123")); // false
-            //   // console.log(isValidInteger("123a"));  // false
+            //   // isValidInteger("");      // true
+            //   // isValidInteger("+");     // true
+            //   // isValidInteger("-");     // true
+            //   // isValidInteger("123");   // true
+            //   // isValidInteger("+123");  // true
+            //   // isValidInteger("-456");  // true
+            //   // isValidInteger("12-3");  // false
+            //   // isValidInteger("++123"); // false
+            //   // isValidInteger("123a");  // false
             default:
                 return true;
         }
     };
     #handleInputBeforeinput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -369,10 +374,10 @@ export class TextField extends FormAssociatedBase {
             // this.setValidity(prevValidity, prevValiditationMessage) // restore
         }
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+    #handleInputBlur = ({ type, target: input }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(input instanceof HTMLInputElement))
             return;
         if (0 === input.value.length)
             return;
@@ -382,7 +387,8 @@ export class TextField extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     // Optional: form participation properties
@@ -442,16 +448,16 @@ export class TextField extends FormAssociatedBase {
             const key = k; // ✅ type-safe cast
             if (true !== flags[key])
                 continue;
-            for (const el of this.#validitiesSlot?.assignedElements({ flatten: true }) ?? []) {
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
-                const option = el;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }
@@ -464,7 +470,8 @@ export class TextField extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
     };
     setCustomValidity = (message) => {

package/generated/components/toggle-view.d.ts

@@ -0,0 +1,28 @@
+import { FormAssociatedBase } from '../internal/class/form-associated-base';
+declare const toggleStyles: readonly ["switch", "button"];
+export type ToggleStyle = (typeof toggleStyles)[number];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export declare class ToggleView extends FormAssociatedBase {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get toggleStyle(): ToggleStyle;
+    get isOn(): boolean;
+    set isOn(v: boolean);
+    get name(): string;
+    get value(): string | null;
+    set value(v: string | null);
+    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
+    setCustomValidity: (message: string) => void;
+    formAssociatedCallback: (form: HTMLFormElement) => void;
+    formDisabledCallback: (disabled: boolean) => void;
+    formResetCallback: () => void;
+}
+export {};