@swiftwc/ui 0.0.0-dev.20 → 0.0.0-dev.22

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

@@ -1,11 +1,28 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
 export class ToolBarItemGroup extends HTMLElement {
+    // static get observedAttributes() {
+    //   return ['preferred-fine-modal-placement']
+    // }
     constructor() {
         super();
     }
     connectedCallback() {
         console.debug(`${ToolBarItemGroup.name} ⚡️ connect`);
+        // 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);
     }
 }

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

@@ -1,16 +1,35 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { onoff, touchGlass } from '../internal/utils';
 export class ToolBarItem extends HTMLElement {
+    // static get observedAttributes() {
+    //   return ['preferred-fine-modal-placement']
+    // }
     constructor() {
         super();
     }
     connectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
-            if (evt.target.closest('menu-view[open]'))
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                return true;
+            if (target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());
+        // 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`);

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">
@@ -28,19 +44,16 @@ export class ToolBar extends HTMLElement {
     <div part="root toolbar-trailing-stack">
       <slot name="bottom-bar-trailing"></slot>
     </div>
-  </div>`, ''));
+  </div>`));
     }
     #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;

package/generated/components/v-stack.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ *
+ * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ */
 export declare class VStack extends HTMLElement {
     constructor();
     connectedCallback(): void;

package/generated/components/v-stack.js

@@ -1,3 +1,8 @@
+/**
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ *
+ * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ */
 export class VStack extends HTMLElement {
     constructor() {
         super();