@swiftwc/ui 0.0.0-dev.21 → 0.0.0-dev.23

package/generated/components/scroll-view.js

@@ -24,7 +24,8 @@ export class ScrollView extends HTMLElement {
   </div>`));
     }
     #shadowRoot;
-    #navbarPrincipalSlot;
+    #slots = new Map();
+    // #navbarPrincipalSlot?: HTMLSlotElement
     #isMidScroll;
     #lastScrollTop = 0;
     // #stopRecordingScrollTop?: boolean = false
@@ -33,7 +34,11 @@ export class ScrollView extends HTMLElement {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#navbarPrincipalSlot = this.#shadowRoot.querySelector('slot[name=top-bar-principal]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
     }
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
@@ -84,7 +89,7 @@ export class ScrollView extends HTMLElement {
                     break; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
                 if (!this.#isMidScroll)
                     break;
-                const title = this.#navbarPrincipalSlot?.assignedElements({ flatten: true })?.at(0);
+                const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
                 slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
                 break;
         }

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

@@ -1,7 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 export declare class SheetView extends DialogBase {
     #private;
-    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: SheetView): void;
     static polyfillConnectedCallback(el: SheetView): void;

package/generated/components/sheet-view.js

@@ -1,10 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
 export class SheetView extends DialogBase {
-    static get observedAttributes() {
-        return ['fine-presentation-large-adaptation'];
-    }
+    // static get observedAttributes() {
+    //   return ['fine-presentation-large-adaptation']
+    // }
     constructor() {
         super();
     }
@@ -19,10 +20,19 @@ export class SheetView extends DialogBase {
             { types: 'keydown', listener: SheetView.#handleKeydown },
         ], el).on());
         el.autofocus = true;
+        if (!self.matchMedia('(pointer: fine)').matches)
+            return;
+        const handler1 = this.#handleMediaChange.bind(null, el);
+        CleanupRegistry.register(el, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
+        Snapshot.waitReady.then(() => {
+            this.#handleMediaChange(el, new MediaQueryListEvent(`media-change`, {
+                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+            })); // Initial check
+        });
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        // NOTE: wait for config
+        // // NOTE: wait for config
         // Snapshot.waitReady.then(() => {
         //   switch (attributeName) {
         //     case 'fine-presentation-large-adaptation':
@@ -60,9 +70,11 @@ export class SheetView extends DialogBase {
     static #handleMediaChange = (el, evt) => {
         console.debug(`${SheetView.name} ⚡️ ${evt?.type}`);
         if (evt.matches)
-            for (const item of el.querySelectorAll(':scope>tool-bar>[slot^="top-bar-"]')) {
-                item.dataset.previousSlot = item.getAttribute('slot') ?? '';
-                item.slot = 'bottom-bar-trailing';
+            for (const item of el.querySelectorAll(':scope>tool-bar>[slot^="top-bar-"],:scope>tool-bar>[slot="cancellation-action"],:scope>tool-bar>[slot="primary-action"],:scope>tool-bar>[slot="confirmation-action"],:scope>tool-bar>[slot="destructive-action"]')) {
+                const newSlot = item.slot.endsWith('leading') ? 'bottom-bar-leading' : 'bottom-bar-trailing';
+                if (item.slot !== newSlot)
+                    item.dataset.previousSlot = item.slot;
+                item.slot = newSlot;
             }
         else
             for (const item of el.querySelectorAll(':scope>tool-bar>[data-previous-slot]')) {

package/generated/components/sidebar-toggle.js

@@ -23,7 +23,7 @@ export class SidebarToggle extends HTMLElement {
         CleanupRegistry.unregister(this);
     }
     static query(target) {
-        const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope > [is=sidebar-view]');
+        const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope>[is=sidebar-view]');
         return { container, sideBar };
     }
     // This triggers on show/hide of any of sidebar-toggle elements

package/generated/components/tab-view.js

@@ -89,7 +89,7 @@ export class TabView extends HTMLElement {
         const style = self.getComputedStyle(form);
         if ('sidebar' !== style.getPropertyValue('--list-style'))
             return;
-        this.#addAnimations();
+        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
     };
     #handleTabViewPagereveal = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -202,28 +202,28 @@ export class TabView extends HTMLElement {
             throw new Error('selectedTab[] must be in order of parent>child. You provided an element that contains the previous sibling.');
         //
         const selectors = [':not(:is(:scope>{{tag}}))', ':is(:scope>{{tag}})']; // first nested ones, then root ones
+        const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`);
         for (const selector of selectors)
             for (const ns of this.querySelectorAll(`navigation-stack:not([hidden])${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view:not([hidden])${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => !ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = true; // triggers
             }
         for (const selector of selectors.reverse())
             for (const ns of this.querySelectorAll(`navigation-stack[hidden]${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view[hidden]${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = () => {
+    #addAnimations = (evt) => {
         this.setAttribute('js-aftertabreveal', '');
+        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`));
-        // this.removeAttribute('js-aftertabreveal')
-        // this.#afterTabRevealDelay = undefined
+        }, evt.detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);

package/generated/components/table-view.js

@@ -42,15 +42,21 @@ export class TableView extends HTMLElement {
     </div>`));
     }
     #shadowRoot;
-    #colSlot;
+    #slots = new Map();
+    // #colSlot?: HTMLSlotElement
     // #slot?: HTMLSlotElement
     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;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        // this.#colSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=column]') ?? undefined
         // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        this.#colSlot?.addEventListener('slotchange', this.#handleSlotchange);
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleSlotchange);
         // this.append(
         //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
         //               <label-view slot="label" title="Delete"></label-view>
@@ -113,7 +119,7 @@ export class TableView extends HTMLElement {
     };
     #handleTagMutation = (entry) => {
         console.debug(`${_a.name} ⚡️ mutation`);
-        // const sourceSlot = 0 < (this.#colSlot?.assignedElements({ flatten: true }) ?? []).length ? this.#colSlot : this.#colSlot
+        // const sourceSlot = 0 < (this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []).length ? this.#slots?.get('column') : this.#slots?.get('column')
         // 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))
@@ -124,7 +130,7 @@ export class TableView extends HTMLElement {
             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">

package/generated/components/text-field.js

@@ -28,7 +28,8 @@ export class TextField extends FormAssociatedBase {
     #shadowRoot;
     // #internals: ElementInternals
     #customValidity = '';
-    #validitiesSlot;
+    // #validitiesSlot?: HTMLSlotElement
+    #slots = new Map();
     #input;
     get #internals() {
         return getInternals(this);
@@ -37,9 +38,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(makeSlotchangeHandler(this), 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([
@@ -426,7 +431,7 @@ 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;

package/generated/components/tool-bar-item-group.d.ts

@@ -1,7 +1,5 @@
 export declare class ToolBarItemGroup extends HTMLElement {
-    static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/tool-bar-item-group.js

@@ -1,39 +1,28 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, toolbarRepositioner } from '../internal/utils';
-import { Snapshot } from '../snapshot';
 export class ToolBarItemGroup extends HTMLElement {
-    static get observedAttributes() {
-        return ['preferred-fine-modal-placement'];
-    }
+    // static get observedAttributes() {
+    //   return ['preferred-fine-modal-placement']
+    // }
     constructor() {
         super();
     }
     connectedCallback() {
         console.debug(`${ToolBarItemGroup.name} ⚡️ connect`);
-        if (!this.closest('[is=sheet-view]'))
-            return;
-        const handler1 = toolbarRepositioner.bind(null, this);
-        CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
-        Snapshot.waitReady.then(() => {
-            toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-            })); // Initial check
-        });
+        // if (!this.closest('[is=sheet-view]')) return
+        // if (!self.matchMedia('(pointer: fine)').matches) return
+        // const handler1 = toolbarRepositioner.bind(null, this)
+        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
+        // Snapshot.waitReady.then(() => {
+        //   toolbarRepositioner(
+        //     this,
+        //     new MediaQueryListEvent(`media-change`, {
+        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+        //     })
+        //   ) // Initial check
+        // })
     }
     disconnectedCallback() {
         console.debug(`${ToolBarItemGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'preferred-fine-modal-placement':
-                Snapshot.waitReady.then(() => {
-                    toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                        matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-                    })); // Initial check
-                });
-                break;
-        }
-    }
 }

package/generated/components/tool-bar-item.js

@@ -1,9 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, toolbarRepositioner, touchGlass } from '../internal/utils';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
-        return ['preferred-fine-modal-placement'];
+        return ['slot', 'data-previous-slot'];
     }
     constructor() {
         super();
@@ -18,17 +18,19 @@ export class ToolBarItem extends HTMLElement {
                 return false;
             return true;
         }), this).on());
-        if (this.closest('tool-bar-item-group'))
-            return;
-        if (!this.closest('[is=sheet-view]'))
-            return;
-        const handler1 = toolbarRepositioner.bind(null, this);
-        CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
-        Snapshot.waitReady.then(() => {
-            toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-            })); // Initial check
-        });
+        // if (this.closest('tool-bar-item-group')) return
+        // if (!this.closest('[is=sheet-view]')) return
+        // if (!self.matchMedia('(pointer: fine)').matches) return
+        // const handler1 = toolbarRepositioner.bind(null, this)
+        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
+        // Snapshot.waitReady.then(() => {
+        //   toolbarRepositioner(
+        //     this,
+        //     new MediaQueryListEvent(`media-change`, {
+        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+        //     })
+        //   ) // Initial check
+        // })
     }
     disconnectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
@@ -37,12 +39,13 @@ export class ToolBarItem extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
-            case 'preferred-fine-modal-placement':
-                Snapshot.waitReady.then(() => {
-                    toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                        matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-                    })); // Initial check
-                });
+            case 'slot':
+            case 'data-previous-slot':
+                const target = this.querySelector(':scope>button');
+                if (target && ['confirmation-action'].includes(newValue ?? ''))
+                    Snapshot.waitReady.then(() => {
+                        buttonRole(target, newValue);
+                    });
                 break;
         }
     }

package/generated/components/tool-bar.d.ts

@@ -1,3 +1,15 @@
+/**
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot top-bar-leading - Places the item in the leading edge of the top bar
+ * @slot top-bar-principal - Places the item in the middle of the top bar
+ * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
 export declare class ToolBar extends HTMLElement {
     #private;
     static get template(): DocumentFragment;

package/generated/components/tool-bar.js

@@ -2,6 +2,18 @@ var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $ } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
+/**
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot top-bar-leading - Places the item in the leading edge of the top bar
+ * @slot top-bar-principal - Places the item in the middle of the top bar
+ * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
 export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
@@ -9,6 +21,7 @@ export class ToolBar extends HTMLElement {
         return (this.#template ??= $(String.raw `
     <div part="root top-bar">
     <div part="root toolbar-leading-stack">
+      <slot name="cancellation-action"></slot>
       <slot name="top-bar-leading"></slot>
     </div>
     <div part="root toolbar-principal-stack">
@@ -16,6 +29,9 @@ export class ToolBar extends HTMLElement {
     </div>
     <div part="root toolbar-trailing-stack">
       <slot name="top-bar-trailing"></slot>
+      <slot name="primary-action"></slot>
+      <slot name="confirmation-action"></slot>
+      <slot name="destructive-action"></slot>
     </div>
   </div>
   <div part="root bottom-bar">
@@ -32,15 +48,12 @@ export class ToolBar extends HTMLElement {
     }
     #shadowRoot;
     get #scrollView() {
-        return this.parentElement?.querySelector(':scope > scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
+        return this.parentElement?.querySelector(':scope>scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
     }
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // })
     }
     connectedCallback() {
         console.debug(`${_a.name} ⚡️ connect`);
@@ -63,7 +76,7 @@ export class ToolBar extends HTMLElement {
             'top-bar': 'navbar',
             'bottom-bar': 'toolbar', //'bottombar',
         };
-        const { contentRect, target } = entry;
+        const { contentRect: { width }, target, } = entry;
         const parentPart = target.parentElement?.part.contains('top-bar') ? 'top-bar' : target.parentElement?.part.contains('bottom-bar') ? 'bottom-bar' : null;
         if (!parentPart)
             return;
@@ -71,7 +84,7 @@ export class ToolBar extends HTMLElement {
         if (!side)
             return;
         const prop = `--${parentMap[parentPart]}-padding-${side}`;
-        $.prop(prop, `${Math.round(contentRect.width)}px`, this.#scrollView); //;(this.#scrollView as HTMLElement)?.style?.setProperty(prop, `${Math.round(contentRect.width)}px`)
+        this.#scrollView?.style?.setProperty(prop, `${Math.round(width)}px`); // $.prop(prop, `${Math.round(width)}px`, this.#scrollView) //
     }
 }
 _a = ToolBar;