@swiftwc/ui 0.0.0-dev.92 → 0.0.0-dev.93

package/generated/components/section-view.js

@@ -1,7 +1,7 @@
 import { $, devFlags } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 /**
- * @summary A container view that you can use to add hierarchy within certain views.
+ * @summary A container view that groups related content together.
  *
  * @slot — The default slot.
  * @slot header
@@ -26,84 +26,39 @@ export class SectionView extends HTMLElement {
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;
-    // #observer?: IntersectionObserver
-    // #sibling?: HTMLElement
-    // #sentinel?: HTMLElement
-    // #sentinelIsIntersecting: boolean = false
-    // #isIntersecting: boolean = false
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // this.#sentinel = this.#shadowRoot.querySelector('.sticky-sentinel') ?? undefined
-        // })
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=header]')?.remove()
-                //   break
-                // }
-                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
                 queryMorph('[slot=header]', html `<header slot="header">
             <label-view line-limit="1" truncation-mode="tail" font="callout">
               <span>${newValue}</span>
             </label-view>
           </header>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   header
-                // )
                 break;
             case 'footer':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=footer]')?.remove()
-                //   break
-                // }
-                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
                 queryMorph('[slot=footer]', html `<footer slot="footer">
             <label-view line-limit="1" truncation-mode="tail" font="callout">
               <span>${newValue}</span>
             </label-view>
           </footer>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   footer
-                // )
                 break;
         }
-        // })
     }
     disconnectedCallback() {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ disconnect`);
-        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
-        // this.#observer?.unobserve(this)
+        //
     }
     connectedCallback() {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ connect`);
-        // this.#sibling = this.closest('scroll-view') ?? undefined
-        // Snapshot.waitReady.then(() => {
-        // if (!(await frame(this))) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
-        // const blockSizeProp = getComputedStyle(this).getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
-        //   blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 1)
-        // this.#observer = new IntersectionObserver(this.#handleIntersect, {
-        //   root: this.#sibling,
-        //   rootMargin: `-${blockSize}px 0px 0px 0px`,
-        //   threshold: [0, 1],
-        // })
-        // if (this.#sentinel) this.#observer.observe(this.#sentinel)
-        // this.#observer.observe(this)
-        // })
+        //
     }
 }

package/generated/components/sheet-view.js

@@ -22,26 +22,6 @@ export class SheetView extends DialogBase {
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         if (devFlags.debug)
             console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        // // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
-        //   switch (attributeName) {
-        //     case 'fine-presentation-large-adaptation':
-        //       const node = target instanceof HTMLDialogElement && target
-        //       if (!node) break
-        //       CleanupRegistry.unregister(node, 'mediaquery')
-        //       if ('bottom-bar' !== target.getAttribute(attributeName ?? '')) break
-        //       const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${Snapshot.config!['ipad-sheet-view-inline-size']}) and (min-height: ${Snapshot.config!['ipad-sheet-view-height']})`)
-        //       SheetView.#handleMediaChange(
-        //         node,
-        //         new MediaQueryListEvent(`media-change`, {
-        //           matches: mediaQueryList.matches,
-        //         })
-        //       ) // Initial check
-        //       const handler1 = SheetView.#handleMediaChange.bind(null, node)
-        //       CleanupRegistry.register(node, onoff('change', handler1 as unknown as EventListener, mediaQueryList).on(), 'mediaquery')
-        //       break
-        //   }
-        // })
     }
     static #handleKeydown = (evt) => {
         if (devFlags.debug)

package/generated/components/sidebar-view.js

@@ -22,7 +22,7 @@ export class SidebarView extends DialogBase {
         }), el).on());
         el.autofocus = true;
     }
-    /** Autoclose on click outside. */
+    // Autoclose on click outside.
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)
             console.debug(`${SidebarView.name} ⚡️ ${type}`);

package/generated/components/tab-bar.js

@@ -18,8 +18,6 @@ export class TabBar extends DialogBase {
         if (devFlags.debug)
             console.debug(`${TabBar.name} ⚡️ connect`);
         el.autofocus = true;
-        // Snapshot.waitReadyFor(el).then((r) => {
-        //   if (!r) return
         CleanupRegistry.register(el, onoff('click', TabBar.#handleClick, el).on());
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
             if (!(target instanceof HTMLElement))
@@ -30,7 +28,6 @@ export class TabBar extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        // })
     }
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)

package/generated/components/tab-view.js

@@ -48,23 +48,6 @@ export class TabView extends HTMLElement {
         });
         this.#cssStyleObserver.observe(this, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); // Snapshot.waitReady.then(this.#handleStyleChange)
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => { // FIXME: Check this removed!
-        // for (const [or, w, handler] of [
-        //   ['portrait', `max-width:${Snapshot.config!['ipad-portrait-bp-max']}`, this.#handleMediaChange],
-        //   ['landscape', `max-width:${Snapshot.config!['ipad-landscape-bp-max']}`, this.#handleMediaChange],
-        //   ['portrait', `min-width:${Snapshot.config!['ipad-portrait-bp-min']}`, this.#handleMediaChange],
-        //   ['landscape', `min-width:${Snapshot.config!['ipad-landscape-bp-min']}`, this.#handleMediaChange],
-        // ]) {
-        //   const mediaQueryList = self.matchMedia(`(orientation:${or}) and (${w})`)
-        //   if (mediaQueryList.matches)
-        //     this.#handleMediaChange(
-        //       new MediaQueryListEvent('media-change', {
-        //         matches: mediaQueryList.matches,
-        //       })
-        //     ) // Initial check
-        //   CleanupRegistry.register(this, onoff('change', handler as EventListener, mediaQueryList).on())
-        // }
         CleanupRegistry.register(this, onoff([
             { types: 'tabreveal tabswap', listener: this.#debouncedHandler },
             { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
@@ -75,7 +58,6 @@ export class TabView extends HTMLElement {
                 listener: this.#handleSummaryClick,
             },
         ], this).on());
-        // })
     }
     #handleSummaryClick = ({ target }) => {
         if (!(target instanceof HTMLElement))
@@ -116,57 +98,6 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   if (devFlags.debug) console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
-    //   if (!evt.matches) return
-    //   this.#handleStyleChange()
-    //   // if (evt.matches) {
-    //   //   const placement = self.getComputedStyle(this).getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
-    //   //     newValue = (TAB_BAR_PLACEMENTS as readonly string[]).includes(placement) ? (placement as (typeof TAB_BAR_PLACEMENTS)[number]) : 'bottom-bar'
-    //   //   if (newValue !== this.#cachedAdaptableTabBarPlacement) {
-    //   //     const oldValue = this.#cachedAdaptableTabBarPlacement
-    //   //     this.#cachedAdaptableTabBarPlacement = newValue
-    //   //     this.dispatchEvent(
-    //   //       new CustomEvent<TabViewAdaptableTabBarPlacementDetail>('tab-view:adaptable-tab-bar-placement-change', {
-    //   //         detail: { oldValue, newValue },
-    //   //         bubbles: true,
-    //   //         composed: true,
-    //   //       })
-    //   //     )
-    //   //   }
-    //   // }
-    //   // // trigger more-stack (dis)allowed event
-    //   // if (evt.matches !== this.#moreStackAllowed) {
-    //   //   this.#moreStackAllowed = evt.matches
-    //   //   const eventType = evt.matches ? 'tab-view:more-tab-allowed' : 'tab-view:more-tab-disallowed'
-    //   //   this.dispatchEvent(new CustomEvent<TabMoreStackAllowanceDetail>(eventType, { detail: { moreTab: this.moreTab }, bubbles: true, composed: true }))
-    //   // }
-    //   // if (evt.matches) return // no button triggers should happen, already on iphone portrait
-    //   // const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (innerSelection) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    //   // const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
-    //   // if (outerSelection && outerSelection === this.moreTab?.id) {
-    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`)
-    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-    //   //   if (btn) {
-    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
-    //   //     if (newTab) {
-    //   //       this.selectedTab = TabView.gatherTab(newTab)
-    //   //       return
-    //   //     }
-    //   //   }
-    //   // }
-    // }
     #handleAdaptableTabBarPlacementChange = (evt) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -198,7 +129,6 @@ export class TabView extends HTMLElement {
         }
     };
     get selectedTab() {
-        // return this.querySelector<NavigationStack | NavigationSplitView>(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')
         return [...this.querySelectorAll('navigation-stack:not([hidden]),navigation-split-view:not([hidden])')];
     }
     set selectedTab(tabs) {

package/generated/components/table-view.js

@@ -116,8 +116,8 @@ export class TableView extends HTMLElement {
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
       </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
-            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() }); //renderLabelTitle(title, node.textContent.trim()) //title?.setAttribute('title', node.textContent.trim())
-            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') }); //renderLabelTitle(subTitle, node.ariaSort ?? '') //subTitle?.setAttribute('title', node.ariaSort ?? '')
+            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() });
+            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);
         }
     };

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

@@ -2,7 +2,7 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
 export type KeyboardType = (typeof keyboardTypes)[number];
 /**
- * @summary A control that displays an editable text interface.
+ * @summary A control that displays an editable text area.
  *
  * @slot label
  * @slot validity-options

package/generated/components/text-field.js

@@ -7,7 +7,7 @@ import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../inter
 import { html, queryMorph } from '../morphdom';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
- * @summary A control that displays an editable text interface.
+ * @summary A control that displays an editable text area.
  *
  * @slot label
  * @slot validity-options
@@ -140,7 +140,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 // this.#sendValueToForm()
                 break;
             case 'disabled':

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

@@ -2,6 +2,8 @@ import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const toggleStyles: readonly ["switch", "button"];
 export type ToggleStyle = (typeof toggleStyles)[number];
 /**
+ * @summary A control that switches between on and off states.
+ *
  * @slot label
  * @slot validity-options
  */

package/generated/components/toggle-view.js

@@ -6,6 +6,8 @@ import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { html, queryMorph } from '../morphdom';
 const toggleStyles = ['switch', 'button'];
 /**
+ * @summary A control that switches between on and off states.
+ *
  * @slot label
  * @slot validity-options
  */
@@ -85,7 +87,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))

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

@@ -1,5 +1,5 @@
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *

package/generated/components/v-stack.js

@@ -1,6 +1,6 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *

package/generated/css/index.css

@@ -1070,6 +1070,7 @@
   :where(navigation-stack:not([hidden]),
   navigation-split-view:not([hidden]),
   navigation-large-title:not([hidden]),
+  navigation-title:not([hidden]),
   scroll-view:not([hidden]),
   body-view:not([hidden]),
   tab-view:not([hidden]),
@@ -1093,7 +1094,7 @@
   [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
-  content-unavailable-view:not([hidden]),
+  content-unavailable:not([hidden]),
   progress-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
@@ -1119,9 +1120,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),
@@ -1745,7 +1746,7 @@
   }
 }
 @layer sw-components {
-  :where(content-unavailable-view) {
+  :where(content-unavailable) {
     place-content: center;
     place-items: center;
     text-align: center;
@@ -1753,24 +1754,24 @@
     padding-inline: 1rem;
     padding-block: 1rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack), :where(content-unavailable-view)::part(content-unavailable-title-stack), :where(content-unavailable-view)::part(content-unavailable-description-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack), :where(content-unavailable)::part(content-unavailable-title-stack), :where(content-unavailable)::part(content-unavailable-description-stack) {
     max-inline-size: 20rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack) {
     row-gap: 0.2rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-title-stack) {
+  :where(content-unavailable)::part(content-unavailable-title-stack) {
     --label-flow: vertical;
     --label-font: title3;
   }
-  :where(content-unavailable-view > :not([slot])) {
+  :where(content-unavailable > :not([slot])) {
     --label-image-size: 5;
     --label-gap: 1;
   }
-  :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
+  :where(content-unavailable:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
     display: none;
   }
-  :where(content-unavailable-view:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
+  :where(content-unavailable:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
     display: none;
   }
 }
@@ -3395,7 +3396,7 @@
     --toggle--trigger-bg: lightgray;
   }
   :where(toggle-view)::part(toggle-stack) {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: minmax(0, 1fr);
     column-gap: var(--labeled-content-column-gap);
   }
@@ -3490,6 +3491,16 @@
   labeled-content > [slot=header],
   labeled-content > [slot=footer]) {
     color: var(--secondary);
+    --label-font: callout;
+  }
+  @supports not (x: if(else:red)) {
+    :where(labeled-content > :nth-child(n+2 of [slot=label]),
+    labeled-content > [slot=header],
+    labeled-content > [slot=footer]) {
+      --label--titlestack-font-size: var(--label-callout-font-size);
+      --label--titlestack-line-height: var(--label-callout-line-height);
+      --label--titlestack-font-weight: var(--label-callout-font-weight);
+    }
   }
 }
 @layer sw-components {}
@@ -3512,11 +3523,7 @@
     padding-block: 1rem;
   }
 }
-@layer sw-components {
-  :where(navigation-title) {
-    display: grid;
-  }
-}
+@layer sw-components {}
 @layer sw-components {
   :where(tab-view:not([tab-view-style=tab-bar-only]) > sidebar-toggle, navigation-split-view > sidebar-toggle) {
     position: fixed;

package/generated/events/scroll-view.js

@@ -1,5 +1 @@
 export {};
-// export interface ScrollViewEventMap {
-//   pagereveal: CustomEvent<PageRevealSwapDetail>
-//   pageswap: CustomEvent<PageRevealSwapDetail>
-// }

package/generated/events/text-field.js

@@ -1,4 +1 @@
 export {};
-// export interface TextFieldEventMap {
-//   commit: CustomEvent<TextFieldCommitDetail>
-// }

package/generated/events/toggle-view.js

@@ -1,4 +1 @@
 export {};
-// export interface ToggleViewEventMap {
-//   'toggle:change': CustomEvent<ToggleChangeDetail>
-// }

package/generated/internal/utils/ensure-placeholder.js

@@ -1,63 +1,10 @@
 import { I18n } from '../../i18n';
 import { html, queryMorph } from '../../morphdom';
-// type ButtonRole = keyof ReturnType<typeof I18n.t<'ButtonRole'>>
-// function renderPlaceholder(el: HTMLElement, role: string | null, titleKey?: ButtonRole, config?: Record<string, string>) {
-//   // if (!el.isConnected) return
-//   // self.requestAnimationFrame(() => {
-//   //   if (!el.isConnected) return
-//   let title: string | undefined, systemImage: string | undefined
-//   // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
-//   switch (role) {
-//     case 'cancel':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'close':
-//       if (el.closest('[is=alert-dialog]')) {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK //.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK)
-//       } else {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close)
-//         systemImage = config?.['close-button-icon'] ?? '' //label.setAttribute('system-image', config?.['close-button-icon'] ?? '')
-//       }
-//       break
-//     case 'confirm':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'confirmation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'cancellation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'destructive':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive // label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive)
-//       systemImage = config?.['delete-button-icon'] ?? '' // label.setAttribute('system-image', config?.['delete-button-icon'] ?? '')
-//       break
-//     // default:
-//     //   label?.remove()
-//     //   break
-//   }
-//   queryMorph(
-//     '[slot=placeholder]',
-//     html`<label-view slot="placeholder">${systemImage ? html`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html`<span>${title}</span>` : null}</label-view>`,
-//     el,
-//     { removeIf: !title }
-//   )
-//   // if (role) {
-//   //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
-//   // } else label?.remove()
-//   // })
-// }
 export default function (target, role, titleKey, config) {
     if (!target)
         return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
-    // renderPlaceholder(target, role, overiderTitle, config)
     let title, systemImage;
-    // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
     switch (role) {
         case 'cancel':
             title = overiderTitle && overiderTitle in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[overiderTitle] : I18n.t('ButtonRole').Cancel;
@@ -90,6 +37,4 @@ export default function (target, role, titleKey, config) {
             break;
     }
     queryMorph('[slot=placeholder]', html `<label-view slot="placeholder">${systemImage ? html `<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html `<span>${title}</span>` : null}</label-view>`, target, { removeIf: !title });
-    // CleanupRegistry.unregister(target, 'i18n')
-    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.92",
+  "version": "0.0.0-dev.93",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_components.scss

@@ -21,7 +21,7 @@
 
 @forward 'components/sheet-view';
 
-@forward 'components/content-unavailable-view';
+@forward 'components/content-unavailable';
 
 @forward 'components/confirmation-dialog';
 @forward 'components/alert-dialog';

package/scss/components/{_content-unavailable-view.scss → _content-unavailable.scss}

@@ -3,7 +3,7 @@
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
-  content-unavailable-view {
+  content-unavailable {
     :where(&) {
       place-content: center;
       place-items: center;

package/scss/components/_index.scss

@@ -7,6 +7,7 @@
   navigation-stack,
   navigation-split-view,
   navigation-large-title,
+  navigation-title,
   scroll-view,
   body-view,
   tab-view,
@@ -30,7 +31,7 @@
   [is='glass-prominent-button'],
   list-view,
   table-view,
-  content-unavailable-view,
+  content-unavailable,
   progress-view,
   tool-bar-item,
   tool-bar-item-group,
@@ -59,9 +60,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),

package/scss/components/_labeled-content.scss

@@ -1,4 +1,6 @@
+@use 'sass:string';
 @use '../vars';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   labeled-content {
@@ -61,6 +63,12 @@
     > [slot='footer'] {
       :where(&) {
         color: var(--secondary);
+
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
       }
     }
   }

package/scss/components/_navigation-title.scss

@@ -4,7 +4,7 @@
 @layer #{vars.$components-layer} {
   navigation-title {
     :where(&) {
-      display: grid; //contents;
+      // display: grid; //contents;
     }
   }
 }

package/scss/components/_toggle-view.scss

@@ -12,7 +12,7 @@
       --toggle--trigger-bg: lightgray;
 
       &::part(toggle-stack) {
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: minmax(0, 1fr) auto;
 
         grid-template-rows: minmax(0, 1fr);