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

package/generated/components/date-picker.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 { $, clamp, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, clamp, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -24,9 +25,16 @@ export class DatePicker extends FormAssociatedBase {
     }
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
+    #renderValidityMsgs = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     #customValidity = '';
-    #validitiesSlot;
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    // #validitiesSlot?: HTMLSlotElement
     #inputs = [];
     get #internals() {
         return getInternals(this);
@@ -48,7 +56,7 @@ export class DatePicker extends FormAssociatedBase {
               <input type="text" name="year" inputmode="numeric" pattern="\d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input">
             </div>
             <slot name="validity-options" hidden></slot>
-          </label>`, ''));
+          </label>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);
@@ -57,29 +65,13 @@ export class DatePicker extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
-    connectedCallback() {
-        super.connectedCallback();
-        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        this.#render();
-        CleanupRegistry.register(this, onoff('change', () => {
-            this.#render();
-        }, I18n.on).on());
-        // finally
-        if (!this.hasAttribute('selection'))
-            return;
-        const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.selection = { year: y, month: m, day: d };
-        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 'selection':
-                const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.selection = { year: y, month: m, day: d };
+                // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
+                // this.#selectedDate = { year: y, month: m, day: d }
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -97,14 +89,8 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label"></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 input of this.#inputs)
@@ -112,22 +98,42 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        this.#render();
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.#render();
+        }, I18n.on).on());
+        // finally
+        if (!this.hasAttribute('selection'))
+            return;
+        const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
+        this.#selectedDate = { year: y, month: m, day: d };
+        this.#sendValueToForm(false);
+    }
     get datePickerStyle() {
-        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '')
-            ? this.getAttribute('date-picker-style')
-            : 'automatic';
+        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
-        if (!this.isConnected)
-            return;
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
         this.#shadowRoot.replaceChildren(document.importNode(this.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
+        CleanupRegistry.unregister(this, 'slots');
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        }, 'slots');
         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');
         switch (this.datePickerStyle) {
             default:
                 const [yyyy = '', mm = '', dd = ''] = new Date().toISOString().split('T').shift()?.split('-') ?? [], map = { year: yyyy, month: mm, day: dd };
@@ -158,7 +164,17 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
-    get selection() {
+    #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([]);
+    };
+    get #selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
         return {
             year: map.year ?? '',
@@ -166,7 +182,7 @@ export class DatePicker extends FormAssociatedBase {
             day: map.day ?? '',
         };
     }
-    set selection(v) {
+    set #selectedDate(v) {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
@@ -178,8 +194,12 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target?.closest('input');
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target } = evt;
+        if (!(target instanceof HTMLElement))
+            return;
+        const input = target.closest('input');
         if (input)
             return;
         this.#shadowRoot.querySelector('input.focus')?.focus?.();
@@ -210,7 +230,7 @@ export class DatePicker extends FormAssociatedBase {
             else
                 this.setValidity({});
         }
-        const selection = `${this.selection.year}-${this.selection.month}-${this.selection.day}`;
+        const selection = `${this.#selectedDate.year}-${this.#selectedDate.month}-${this.#selectedDate.day}`;
         const entries = new FormData();
         entries.append(this.name, selection);
         this.#internals.setFormValue(entries);
@@ -218,9 +238,10 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, 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 = [...`${(evt.clipboardData?.getData('text') ?? '').trim()}`].reduce((acc, ch, i) => {
@@ -240,9 +261,10 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #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;
@@ -263,7 +285,10 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        console.debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement))
+            return;
         const input = target;
         if (!input)
             return;
@@ -280,13 +305,17 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+    #handleInputBlur = ({ target, type }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement))
+            return;
+        const input = target;
         if (0 === input.value.length)
             return;
         const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
@@ -296,7 +325,8 @@ export class DatePicker 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
@@ -379,16 +409,16 @@ export class DatePicker 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;
                 }
             }
@@ -401,7 +431,8 @@ export class DatePicker 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.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -419,7 +450,7 @@ export class DatePicker extends FormAssociatedBase {
             input.toggleAttribute('disabled', !disabled);
     };
     formResetCallback = () => {
-        this.selection = {
+        this.#selectedDate = {
             year: '',
             month: '',
             day: '',

package/generated/components/disclosure-group.d.ts

@@ -1,4 +1,9 @@
 import { DetailsBase } from '../namespace-browser/base';
+/**
+ * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ */
 export declare class DisclosureGroup extends DetailsBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/disclosure-group.js

@@ -1,7 +1,12 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, onoff, timeout } from '../internal/utils';
+import { cssTime, devFlags, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
+/**
+ * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ */
 export class DisclosureGroup extends DetailsBase {
     static get observedAttributes() {
         return [
@@ -15,15 +20,18 @@ export class DisclosureGroup extends DetailsBase {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
+        if (devFlags.debug)
+            console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
         // if (CSS.supports('interpolate-size', 'allow-keywords')) return
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${DisclosureGroup.name} ⚡️ connect`);
         const newValue = el.open ? 'open' : 'closed';
         if (newValue !== el.dataset.state)
             el.dataset.state = newValue;
@@ -33,9 +41,12 @@ export class DisclosureGroup extends DetailsBase {
             toggleTimers.delete(el);
         });
     }
-    static #handleToggle = async (evt) => {
-        console.debug(`${DisclosureGroup.name} ⚡️ ${evt?.type}`);
-        const details = evt.currentTarget, newValue = details.open ? 'opening' : 'closing';
+    static #handleToggle = async ({ type, currentTarget: details }) => {
+        if (devFlags.debug)
+            console.debug(`${DisclosureGroup.name} ⚡️ ${type}`);
+        if (!(details instanceof HTMLDetailsElement))
+            return;
+        const newValue = details.open ? 'opening' : 'closing';
         if (newValue !== details.dataset.state)
             details.dataset.state = newValue;
         if (!toggleTimers.has(details))

package/generated/components/fine-tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare class FineTooltip extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    hidePopover(): void;
+}

package/generated/components/fine-tooltip.js

@@ -0,0 +1,107 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, devFlags, onoff } from '../internal/utils';
+export class FineTooltip extends HTMLElement {
+    constructor() {
+        super();
+    }
+    #handleTriggerRemovalMutation = (mutations) => {
+        if (this.#queryTrigger?.isConnected)
+            return;
+        this?.remove();
+    };
+    #handleTriggerAttrMutation = (mutations) => {
+        for (const { target, attributeName } of mutations)
+            if (target instanceof HTMLElement && attributeName)
+                this.#render(target.getAttribute(attributeName));
+    };
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (target.hasAttribute('closing'))
+            return;
+        if (!(target instanceof HTMLElement))
+            return;
+        const { top } = target.getBoundingClientRect();
+        const vpHeight = self.visualViewport?.height ?? 0, blockSize = borderBoxSize.at(0)?.blockSize ?? 0;
+        if (top > vpHeight - blockSize - 50) {
+            target.style.setProperty('position-area', 'top center');
+            target.style.setProperty('transform-origin', 'bottom');
+        }
+    };
+    #mutationObserver = new MutationObserver(this.#handleTriggerAttrMutation);
+    #mutationObserver2 = new MutationObserver(this.#handleTriggerRemovalMutation);
+    #resizeObserver = new ResizeObserver(this.#handleMeasure);
+    get #queryTrigger() {
+        const positionAnchor = this.style.positionAnchor;
+        if (!positionAnchor.startsWith('--help-'))
+            return;
+        const trigger = document.querySelector(`[style*="${CSS.escape(positionAnchor)}"][help]`);
+        return trigger ?? undefined;
+    }
+    #render = (str) => {
+        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+        if (str)
+            label.setAttribute('title', str);
+        else
+            label.removeAttribute('title');
+    };
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        this.removeAttribute('closing');
+        this.popover = 'manual';
+        this.inert = true;
+        CleanupRegistry.register(this, onoff('toggle', this.#handleToggle, this).on());
+        CleanupRegistry.register(this, onoff('beforetoggle', this.#handleBeforetoggle, this).on());
+        this.showPopover();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#resizeObserver.unobserve(this);
+        this.#mutationObserver?.disconnect();
+        this.#mutationObserver2?.disconnect();
+        this.#queryTrigger?.style.removeProperty('anchor-name');
+        CleanupRegistry.unregister(this);
+    }
+    #handleToggle = ({ newState }) => {
+        if ('closed' !== newState)
+            return;
+        this.remove();
+    };
+    #handleBeforetoggle = (evt) => {
+        if ('open' !== evt.newState)
+            return;
+        const trigger = this.#queryTrigger;
+        if (!trigger) {
+            evt.preventDefault();
+            this.remove();
+            return;
+        }
+        else {
+            this.#render(trigger.getAttribute('help'));
+            this.#mutationObserver.observe(trigger, {
+                attributes: true,
+                attributeFilter: ['help'],
+            });
+            this.#mutationObserver2.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            this.#resizeObserver.observe(this);
+        }
+        this.toggleAttribute('open', 'open' === evt.newState);
+    };
+    hidePopover() {
+        if (this.hasAttribute('closing'))
+            return;
+        this.setAttribute('closing', '');
+        Promise.allSettled(this.getAnimations().map(({ finished }) => finished)).then(() => {
+            if (!this.hasAttribute('closing'))
+                return;
+            this?.remove();
+        });
+    }
+}
+_a = FineTooltip;

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

@@ -1,4 +1,7 @@
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export declare class FormView extends FormBase {
     constructor();
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;

package/generated/components/form-view.js

@@ -1,17 +1,22 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { devFlags, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export class FormView extends FormBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;

package/generated/components/glass-button.d.ts

@@ -1,6 +1,16 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A button that applies glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
+ * @slot overlay
+ *
+ */
 export declare class GlassButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/glass-button.js

@@ -1,17 +1,53 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A button that applies glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
+ * @slot overlay
+ *
+ */
 export class GlassButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${GlassButton.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
 }

package/generated/components/glass-prominent-button.d.ts

@@ -1,6 +1,16 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A button that applies prominent glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
+ * @slot overlay
+ *
+ */
 export declare class GlassProminentButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/glass-prominent-button.js

@@ -1,17 +1,53 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A button that applies prominent glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
+ * @slot overlay
+ *
+ */
 export class GlassProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
 }