@swiftwc/ui 0.0.0-dev.95 → 0.0.0-dev.97

package/generated/components/progress-view.js

@@ -2,8 +2,9 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows how far along a task is.
@@ -28,27 +29,27 @@ export class ProgressView extends HTMLElement {
         if (!_a.#templates.has(this.progressViewStyle))
             switch (this.progressViewStyle) {
                 case 'linear':
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <slot></slot>
-            <div part="root progress-control progress-line-control"></div>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <slot></slot>
+              <div part="root progress-control progress-line-control"></div>
+              <slot name="current-value"></slot>
             `));
                     break;
                 case 'circular':
                 default:
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <div part="root progress-control progress-circular-control">
-              <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
-            </div>
-            <slot></slot>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <div part="root progress-control progress-circular-control">
+                <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
+              </div>
+              <slot></slot>
+              <slot name="current-value"></slot>
             `));
                     break;
             }
@@ -63,7 +64,7 @@ export class ProgressView extends HTMLElement {
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'label': {
-                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
                 if (newValue) {
                     label.setAttribute('title', newValue);
                 }

package/generated/components/scroll-view.js

@@ -3,7 +3,8 @@ import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
@@ -27,18 +28,17 @@ export class ScrollView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <slot></slot>
-  <div part="root scroll-view-navbar">
-    <div part="root scroll-view-navbar-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-  </div>
-  <div part="root scroll-view-toolbar">
-    <div part="root scroll-view-toolbar-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<slot></slot>
+        <div part="root scroll-view-navbar">
+          <div part="root scroll-view-navbar-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+        </div>
+        <div part="root scroll-view-toolbar">
+          <div part="root scroll-view-toolbar-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -230,7 +230,7 @@ export class ScrollView extends HTMLElement {
         // const container = ((vs = this.querySelector<HTMLElement>(':scope>v-stack') ?? (this.appendChild($(`<v-stack></v-stack>`, '>1')) as HTMLElement)) =>
         //   vs.querySelector<HTMLElement>(':scope>navigation-title:not([slot])') ??
         //   vs.appendChild($(html`<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`.toString(), '>1')))()
-        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(`<v-stack></v-stack>`, '>1'));
+        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(html `<v-stack></v-stack>`, '>1'));
         queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
     };
 }

package/generated/components/section-view.js

@@ -1,5 +1,6 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A container view that groups related content together.
  *
@@ -13,16 +14,15 @@ export class SectionView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <div part="root section-main-stack">
-    <slot></slot>
-  </div>
-  <div part="root section-header-stack">
-    <slot name="header"></slot>
-  </div>
-  <div part="root section-footer-stack">
-    <slot name="footer"></slot>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root section-main-stack">
+          <slot></slot>
+        </div>
+        <div part="root section-header-stack">
+          <slot name="header"></slot>
+        </div>
+        <div part="root section-footer-stack">
+          <slot name="footer"></slot>
+        </div>`));
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;

package/generated/components/table-view.js

@@ -3,8 +3,9 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, devFlags, listActive, onoff } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 /**
  * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
  *
@@ -24,35 +25,34 @@ export class TableView extends HTMLElement {
     #compactToolbarItem;
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root table-container">
-      <div part="root table-header-stack">
-        <div part="root table-header-leading-stack">
-          <slot name="header-leading"></slot>
+        return (this.#template ??= $(html `<div part="root table-container">
+        <div part="root table-header-stack">
+          <div part="root table-header-leading-stack">
+            <slot name="header-leading"></slot>
+          </div>
+          <div part="root table-header-principal-stack">
+            <slot name="header-principal"></slot>
+          </div>
+          <div part="root table-header-trailing-stack">
+            <slot name="header-trailing"></slot>
+          </div>
         </div>
-        <div part="root table-header-principal-stack">
-          <slot name="header-principal"></slot>
+        <div part="root table-column-stack">
+          <slot name="column"></slot>
         </div>
-        <div part="root table-header-trailing-stack">
-          <slot name="header-trailing"></slot>
+        <slot><p>empty</p></slot>
+        <div part="root table-footer-stack">
+          <div part="root table-footer-leading-stack">
+            <slot name="footer-leading"></slot>
+          </div>
+          <div part="root table-footer-principal-stack">
+            <slot name="footer-principal"></slot>
+          </div>
+          <div part="root table-footer-trailing-stack">
+            <slot name="footer-trailing"></slot>
+          </div>
         </div>
-      </div>
-      <div part="root table-column-stack">
-        <slot name="column"></slot>
-      </div>
-      <slot><p>empty</p></slot>
-      <div part="root table-footer-stack">
-        <div part="root table-footer-leading-stack">
-          <slot name="footer-leading"></slot>
-        </div>
-        <div part="root table-footer-principal-stack">
-          <slot name="footer-principal"></slot>
-        </div>
-        <div part="root table-footer-trailing-stack">
-          <slot name="footer-trailing"></slot>
-        </div>
-      </div>
-    </div>`));
+      </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -102,7 +102,7 @@ export class TableView extends HTMLElement {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
+            this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
@@ -110,12 +110,12 @@ export class TableView extends HTMLElement {
         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">
-        <v-stack spacing="0" alignment="leading">
-          <label-view></label-view>
-          <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;
+            const btn = $(html `<button type="button" tabindex="0">
+            <v-stack spacing="0" alignment="leading">
+              <label-view></label-view>
+              <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() });
             queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);

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

@@ -4,6 +4,8 @@ export type KeyboardType = (typeof keyboardTypes)[number];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */

package/generated/components/text-field.js

@@ -4,11 +4,14 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */
@@ -44,16 +47,15 @@ export class TextField extends FormAssociatedBase {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root text-field-stack">
-    <div part="root text-field-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root text-field-input-stack">
-      <input type="text" part="root input text-field-form-input">
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root text-field-stack">
+        <div part="root text-field-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root text-field-input-stack">
+          <input type="text" part="root input text-field-form-input" />
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/toggle-view.js

@@ -3,7 +3,8 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, devFlags, kebabCase, onoff } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const toggleStyles = ['switch', 'button'];
 /**
  * @summary A control that switches between on and off states.
@@ -15,21 +16,37 @@ const toggleStyles = ['switch', 'button'];
  */
 export class ToggleView extends FormAssociatedBase {
     static get observedAttributes() {
-        return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
+        return [
+            'label',
+            'name',
+            'value',
+            /**
+             * @type {boolean}
+             */
+            'is-on',
+            'keyboard-type',
+            /**
+             * @type {boolean}
+             */
+            'required',
+            /**
+             * @type {boolean}
+             */
+            'disabled',
+        ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root toggle-stack">
-    <div part="root toggle-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root toggle-input-stack">
-      <!--<input type="checkbox" part="root input toggle-form-input">-->
-      <div part="root toggle-form-input" tabindex="0"></div>
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root toggle-stack">
+        <div part="root toggle-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root toggle-input-stack">
+          <!--<input type="checkbox" part="root input toggle-form-input">-->
+          <div part="root toggle-form-input" tabindex="0"></div>
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/tool-bar.js

@@ -1,6 +1,7 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, devFlags } from '../internal/utils';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A list of items placed into the toolbar or navigation bar around your content.
@@ -20,33 +21,32 @@ export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
         // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
-        return (this.#template ??= $(String.raw `
-    <div part="root top-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="cancellation-action"></slot>
-      <slot name="destructive-action"></slot>
-      <slot name="top-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="top-bar-trailing"></slot>
-      <slot name="primary-action"></slot>
-      <slot name="confirmation-action"></slot>
-    </div>
-  </div>
-  <div part="root bottom-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="bottom-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="bottom-bar-trailing"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root top-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="cancellation-action"></slot>
+            <slot name="destructive-action"></slot>
+            <slot name="top-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="top-bar-trailing"></slot>
+            <slot name="primary-action"></slot>
+            <slot name="confirmation-action"></slot>
+          </div>
+        </div>
+        <div part="root bottom-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="bottom-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="bottom-bar-trailing"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     get #scrollView() {

package/generated/css/index.css

@@ -116,22 +116,22 @@
     --labeled-content-column-gap: 1rem;
     --labeled-content-row-gap: 0.5rem;
     --label-footnote-font-size: 1rem;
-    --label-footnote-line-height: 1rem;
+    --label-footnote-line-height: 1.1875;
     --label-footnote-font-weight: 400;
     --label-caption2-font-size: 0.75rem;
-    --label-caption2-line-height: 1.3333333333;
+    --label-caption2-line-height: 1.4166666667;
     --label-caption2-font-weight: 400;
-    --label-caption-font-size: 0.875rem;
-    --label-caption-line-height: 1.4285714286;
+    --label-caption-font-size: 0.8125rem;
+    --label-caption-line-height: 1.5384615385;
     --label-caption-font-weight: 400;
     --label-callout-font-size: 0.875rem;
-    --label-callout-line-height: 0.875rem;
+    --label-callout-line-height: 1.3571428571;
     --label-callout-font-weight: 400;
     --label-body-font-size: 1rem;
     --label-body-line-height: 1.5;
     --label-body-font-weight: 400;
     --label-subheadline-font-size: 1.125rem;
-    --label-subheadline-line-height: 1.5555555556;
+    --label-subheadline-line-height: 1.5;
     --label-subheadline-font-weight: 400;
     --label-headline-font-size: 1.25rem;
     --label-headline-line-height: 1.4;
@@ -151,6 +151,9 @@
     --label-extra-large-title-font-size: 3.75rem;
     --label-extra-large-title-line-height: 1;
     --label-extra-large-title-font-weight: 700;
+    --label-extra-large-title2-font-size: 4.5rem;
+    --label-extra-large-title2-line-height: 1;
+    --label-extra-large-title2-font-weight: 700;
     --insetlist-item-border-radius: 2rem;
     --insetform-item-border-radius: 2rem;
     --list-row-gap: 3rem;
@@ -650,9 +653,27 @@
     padding-block: 1px;
   }
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not(section-view section-view, menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not(section-view section-view, menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not(section-view section-view, menu-view *))::part(section-header-stack) {
-    top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+    top: var(--list--sticky-block-size, 0px);
     position: sticky;
   }
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]) section-view,
+  scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]) section-view,
+  scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]) section-view,
+  scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view))::part(section-header-stack) {
+    top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+  }
   :where(table-view[columns="2"]:not(menu-view *):not(table-view table-view, list-view table-view, [is=form-view] table-view), [columns="2"][is=form-view]:not(menu-view *):not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view[columns="2"]:not(menu-view *):not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
     --list--host-grid-template-columns: repeat(2, minmax(0, 1fr));
     position: relative;
@@ -1473,7 +1494,11 @@
   :where(detail-placeholder > scroll-view) > *:not([slot]) {
     grid-area: main;
   }
-  :where(detail-placeholder > scroll-view):has(~ tool-bar > [slot^=top-bar]), :where(detail-placeholder > scroll-view):has(> [slot^=top-bar]) {
+  :where(detail-placeholder > scroll-view):has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]), :where(detail-placeholder > scroll-view):has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) {
     grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
   }
   :where(detail-placeholder > scroll-view)::before {
@@ -1970,7 +1995,11 @@
   :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view) > *:not([slot]) {
     grid-area: main;
   }
-  :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(~ tool-bar > [slot^=top-bar]), :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(> [slot^=top-bar]) {
+  :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]), :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) {
     grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
   }
   :where(navigation-stack > scroll-view[navigation-bar-title-display-mode=large], navigation-split-view > scroll-view[navigation-bar-title-display-mode=large], [is=sidebar-view] > scroll-view[navigation-bar-title-display-mode=large], body-view > scroll-view[navigation-bar-title-display-mode=large], [is=full-screen] > scroll-view[navigation-bar-title-display-mode=large], [is=sheet-view] > scroll-view[navigation-bar-title-display-mode=large]) > [slot=top-bar-principal] {
@@ -2393,8 +2422,12 @@
     pointer-events: none;
     visibility: collapse;
   }
-  :where(scroll-view:has(~ tool-bar > [slot^=top-bar]),
-  scroll-view:has(> [slot^=top-bar]))::part(scroll-view-navbar) {
+  :where(scroll-view:has(~ tool-bar > [slot^=top-bar],
+  ~ tool-bar > [slot=cancellation-action],
+  ~ tool-bar > [slot=primary-action],
+  ~ tool-bar > [slot=confirmation-action],
+  ~ tool-bar > [slot=destructive-action]),
+  scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]))::part(scroll-view-navbar) {
     visibility: visible;
   }
   :where(scroll-view:has(~ tool-bar > [slot^=bottom-bar]),
@@ -2975,9 +3008,9 @@
   }
   @supports (x: if(else:red)) {
     :where(label-view) {
-      --label--titlestack-font-size: if(style(--label-font: footnote): var(--label-footnote-font-size) ; style(--label-font: caption2): var(--label-caption2-font-size) ; style(--label-font: caption): var(--label-caption-font-size) ; style(--label-font: callout): var(--label-callout-font-size) ; style(--label-font: body): var(--label-body-font-size) ; style(--label-font: subheadline): var(--label-subheadline-font-size) ; style(--label-font: headline): var(--label-headline-font-size) ; style(--label-font: title3): var(--label-title3-font-size) ; style(--label-font: title2): var(--label-title2-font-size) ; style(--label-font: title): var(--label-title-font-size) ; style(--label-font: large-title): var(--label-large-title-font-size) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-size) ;);
-      --label--titlestack-line-height: if(style(--label-font: footnote): var(--label-footnote-line-height) ; style(--label-font: caption2): var(--label-caption2-line-height) ; style(--label-font: caption): var(--label-caption-line-height) ; style(--label-font: callout): var(--label-callout-line-height) ; style(--label-font: body): var(--label-body-line-height) ; style(--label-font: subheadline): var(--label-subheadline-line-height) ; style(--label-font: headline): var(--label-headline-line-height) ; style(--label-font: title3): var(--label-title3-line-height) ; style(--label-font: title2): var(--label-title2-line-height) ; style(--label-font: title): var(--label-title-line-height) ; style(--label-font: large-title): var(--label-large-title-line-height) ; style(--label-font: extra-large-title): var(--label-extra-large-title-line-height) ;);
-      --label--titlestack-font-weight: if(style(--label-font: footnote): var(--label-footnote-font-weight) ; style(--label-font: caption2): var(--label-caption2-font-weight) ; style(--label-font: caption): var(--label-caption-font-weight) ; style(--label-font: callout): var(--label-callout-font-weight) ; style(--label-font: body): var(--label-body-font-weight) ; style(--label-font: subheadline): var(--label-subheadline-font-weight) ; style(--label-font: headline): var(--label-headline-font-weight) ; style(--label-font: title3): var(--label-title3-font-weight) ; style(--label-font: title2): var(--label-title2-font-weight) ; style(--label-font: title): var(--label-title-font-weight) ; style(--label-font: large-title): var(--label-large-title-font-weight) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-weight) ;);
+      --label--titlestack-font-size: if(style(--label-font: footnote): var(--label-footnote-font-size) ; style(--label-font: caption2): var(--label-caption2-font-size) ; style(--label-font: caption): var(--label-caption-font-size) ; style(--label-font: callout): var(--label-callout-font-size) ; style(--label-font: body): var(--label-body-font-size) ; style(--label-font: subheadline): var(--label-subheadline-font-size) ; style(--label-font: headline): var(--label-headline-font-size) ; style(--label-font: title3): var(--label-title3-font-size) ; style(--label-font: title2): var(--label-title2-font-size) ; style(--label-font: title): var(--label-title-font-size) ; style(--label-font: large-title): var(--label-large-title-font-size) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-size) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-font-size) ;);
+      --label--titlestack-line-height: if(style(--label-font: footnote): var(--label-footnote-line-height) ; style(--label-font: caption2): var(--label-caption2-line-height) ; style(--label-font: caption): var(--label-caption-line-height) ; style(--label-font: callout): var(--label-callout-line-height) ; style(--label-font: body): var(--label-body-line-height) ; style(--label-font: subheadline): var(--label-subheadline-line-height) ; style(--label-font: headline): var(--label-headline-line-height) ; style(--label-font: title3): var(--label-title3-line-height) ; style(--label-font: title2): var(--label-title2-line-height) ; style(--label-font: title): var(--label-title-line-height) ; style(--label-font: large-title): var(--label-large-title-line-height) ; style(--label-font: extra-large-title): var(--label-extra-large-title-line-height) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-line-height) ;);
+      --label--titlestack-font-weight: if(style(--label-font: footnote): var(--label-footnote-font-weight) ; style(--label-font: caption2): var(--label-caption2-font-weight) ; style(--label-font: caption): var(--label-caption-font-weight) ; style(--label-font: callout): var(--label-callout-font-weight) ; style(--label-font: body): var(--label-body-font-weight) ; style(--label-font: subheadline): var(--label-subheadline-font-weight) ; style(--label-font: headline): var(--label-headline-font-weight) ; style(--label-font: title3): var(--label-title3-font-weight) ; style(--label-font: title2): var(--label-title2-font-weight) ; style(--label-font: title): var(--label-title-font-weight) ; style(--label-font: large-title): var(--label-large-title-font-weight) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-weight) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-font-weight) ;);
       --label--overflow: if(style(--label-truncation-mode: tail): hidden; );
       --label--text-overflow: if(style(--label-truncation-mode: tail): ellipsis; );
       --label--host-white-space: if(style(--label-line-limit: 1): nowrap; style(--label-line-limit: 2): normal; );
@@ -3356,6 +3389,20 @@
         --label--titlestack-font-weight: var(--label-extra-large-title-font-weight);
       }
     }
+    @container style(--label-font: extra-large-title2) {
+      :where(label-view) {
+        --label--titlestack-font-size: var(--label-extra-large-title2-font-size);
+        --label--titlestack-line-height: var(--label-extra-large-title2-line-height);
+        --label--titlestack-font-weight: var(--label-extra-large-title2-font-weight);
+      }
+    }
+    @container not style(--label-font: extra-large-title2) {
+      :where(label-view[font=extra-large-title2]) {
+        --label--titlestack-font-size: var(--label-extra-large-title2-font-size);
+        --label--titlestack-line-height: var(--label-extra-large-title2-line-height);
+        --label--titlestack-font-weight: var(--label-extra-large-title2-font-weight);
+      }
+    }
   }
   @supports (x: attr(x type(*))) {
     :where(label-view) {
@@ -5077,10 +5124,12 @@
   }
   :where(picker-view)::part(picker-label-stack) {
     display: var(--picker--labelstack-display, none);
-    color: var(--secondary);
     --label-truncation-mode: tail;
     --label-line-limit: 1;
   }
+  :where(form :where(picker-view))::part(picker-label-stack) {
+    color: var(--secondary);
+  }
   :where(picker-view) {
     --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
     --picker--stack-grid-template-rows: minmax(0, 1fr);
@@ -5912,6 +5961,9 @@
     --tertiaryBackground: var(--tertiaryGroupedBackground);
     --face: var(--background);
   }
+  :where([foreground=primary]) {
+    color: var(--primary);
+  }
   :where([foreground=secondary]) {
     color: var(--secondary);
   }

package/generated/events/alert-dialog.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         'alert:return': AlertReturnEvent;
     }
+    interface DocumentEventMap {
+        'alert:return': AlertReturnEvent;
+    }
 }

package/generated/events/confirmation-dialog.d.ts

@@ -8,4 +8,7 @@ declare global {
     interface HTMLElementEventMap {
         'confirmation:return': ConfirmationReturnEvent;
     }
+    interface DocumentEventMap {
+        'confirmation:return': ConfirmationReturnEvent;
+    }
 }