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

package/generated/components/table-view.js

@@ -39,7 +39,7 @@ export class TableView extends HTMLElement {
           <slot name="footer-trailing"></slot>
         </div>
       </div>
-    </div>`, ''));
+    </div>`));
     }
     #shadowRoot;
     #colSlot;
@@ -103,7 +103,10 @@ export class TableView extends HTMLElement {
     }
     #handleSlotchange = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
+        const slot = evt.target instanceof HTMLSlotElement && evt.target;
+        if (!slot)
+            return;
+        const assigned = slot.assignedElements({ flatten: true });
         observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
         if (0 < assigned.length)
             this.#handleTagMutation();
@@ -116,7 +119,7 @@ export class TableView extends HTMLElement {
         // for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? []) menu.insertAdjacentElement('beforeend', TableView.wrapTag(el, sourceSlot?.name))
         //
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`);
+            this.#compactToolbarItem = $(`<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');
         }
@@ -129,7 +132,7 @@ export class TableView extends HTMLElement {
           <label-view></label-view>
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
-      </button>`), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
             title?.setAttribute('title', node.textContent.trim());
             subTitle?.setAttribute('title', node.ariaSort ?? '');
             this.#compactToolbarItem.appendChild(btn);
@@ -164,7 +167,10 @@ export class TableView extends HTMLElement {
         }
     };
     #handleMenuClick = (evt) => {
-        const btn = evt.target.closest('button');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const btn = target.closest('button');
         if (!btn)
             return;
         const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])];

package/generated/components/text-field.js

@@ -23,7 +23,7 @@ export class TextField extends FormAssociatedBase {
       <input type="text" part="root input text-field-form-input">
     </div>
     <slot name="validity-options" hidden></slot>
-  </label>`, ''));
+  </label>`));
     }
     #shadowRoot;
     // #internals: ElementInternals
@@ -137,7 +137,7 @@ export class TextField extends FormAssociatedBase {
             case 'label':
                 let label = this.querySelector(':scope>[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`));
+                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`, '>1'));
                     label.textContent = newValue;
                 }
                 else
@@ -217,7 +217,7 @@ export class TextField extends FormAssociatedBase {
     };
     #handleInputPaste = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         evt.preventDefault();
@@ -287,40 +287,40 @@ export class TextField extends FormAssociatedBase {
                 const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
                 digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
-            //   // console.log(isValidDecimal(""));       // true
-            //   // console.log(isValidDecimal("+"));      // true
-            //   // console.log(isValidDecimal("-"));      // true
-            //   // console.log(isValidDecimal("123"));    // true
-            //   // console.log(isValidDecimal("+123"));   // true
-            //   // console.log(isValidDecimal("-456"));   // true
-            //   // console.log(isValidDecimal("12.34"));  // true
-            //   // console.log(isValidDecimal("-0,56"));  // true
-            //   // console.log(isValidDecimal(".78"));    // true
-            //   // console.log(isValidDecimal(",9"));     // true
-            //   // console.log(isValidDecimal("12.3.4")); // false
-            //   // console.log(isValidDecimal("12,3,4")); // false
-            //   // console.log(isValidDecimal("12-3"));   // false
-            //   // console.log(isValidDecimal("12a"));    // false
+            //   // isValidDecimal("");       // true
+            //   // isValidDecimal("+");      // true
+            //   // isValidDecimal("-");      // true
+            //   // isValidDecimal("123");    // true
+            //   // isValidDecimal("+123");   // true
+            //   // isValidDecimal("-456");   // true
+            //   // isValidDecimal("12.34");  // true
+            //   // isValidDecimal("-0,56");  // true
+            //   // isValidDecimal(".78");    // true
+            //   // isValidDecimal(",9");     // true
+            //   // isValidDecimal("12.3.4"); // false
+            //   // isValidDecimal("12,3,4"); // false
+            //   // isValidDecimal("12-3");   // false
+            //   // isValidDecimal("12a");    // false
             case 'number-pad':
                 const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
                 digitsOnlyRegex = /^(\d+)?$/; // allow only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
-            //   // console.log(isValidInteger(""));      // true
-            //   // console.log(isValidInteger("+"));     // true
-            //   // console.log(isValidInteger("-"));     // true
-            //   // console.log(isValidInteger("123"));   // true
-            //   // console.log(isValidInteger("+123"));  // true
-            //   // console.log(isValidInteger("-456"));  // true
-            //   // console.log(isValidInteger("12-3"));  // false
-            //   // console.log(isValidInteger("++123")); // false
-            //   // console.log(isValidInteger("123a"));  // false
+            //   // isValidInteger("");      // true
+            //   // isValidInteger("+");     // true
+            //   // isValidInteger("-");     // true
+            //   // isValidInteger("123");   // true
+            //   // isValidInteger("+123");  // true
+            //   // isValidInteger("-456");  // true
+            //   // isValidInteger("12-3");  // false
+            //   // isValidInteger("++123"); // false
+            //   // isValidInteger("123a");  // false
             default:
                 return true;
         }
     };
     #handleInputBeforeinput = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         if ('insertText' !== evt.inputType)
@@ -355,7 +355,7 @@ export class TextField extends FormAssociatedBase {
     };
     #handleInputBlur = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         if (0 === input.value.length)

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

@@ -1,5 +1,7 @@
 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,11 +1,39 @@
+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'];
+    }
     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
+        });
     }
     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.d.ts

@@ -1,5 +1,7 @@
 export declare class ToolBarItem 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.js

@@ -1,19 +1,49 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { onoff, toolbarRepositioner, touchGlass } from '../internal/utils';
+import { Snapshot } from '../snapshot';
 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;
+        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
+        });
     }
     disconnectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
+    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
+                });
+                break;
+        }
+    }
 }

package/generated/components/tool-bar.js

@@ -28,7 +28,7 @@ export class ToolBar extends HTMLElement {
     <div part="root toolbar-trailing-stack">
       <slot name="bottom-bar-trailing"></slot>
     </div>
-  </div>`, ''));
+  </div>`));
     }
     #shadowRoot;
     get #scrollView() {

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();

package/generated/css/index.css

@@ -871,6 +871,7 @@
   :where([is=glass-prominent-button], [is=glass-button], [is=bordered-prominent-button], [is=bordered-button], [is=borderless-button], [is=plain-button]) {
     place-items: center;
     place-content: center;
+    position: relative;
     appearance: none;
     -webkit-appearance: none;
     border: var(--btnborder,);
@@ -888,6 +889,21 @@
     --btnradiusbl: var(--regular-btn-border-radius);
     --btnradiusbr: var(--regular-btn-border-radius);
   }
+  :where([is=glass-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=glass-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-prominent-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=bordered-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=borderless-button]:has(> [slot=overlay]) > *:not([slot=overlay]), [is=plain-button]:has(> [slot=overlay]) > *:not([slot=overlay])) {
+    opacity: 0;
+  }
+  :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+    position: absolute;
+    transition: opacity ease-out 200ms;
+    max-inline-size: 90%;
+    max-block-size: 90%;
+    border-radius: inherit;
+  }
+  @starting-style {
+    :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+      opacity: 0;
+    }
+  }
   :where([control-size=mini][is=glass-prominent-button], [control-size=mini][is=glass-button], [control-size=mini][is=bordered-prominent-button], [control-size=mini][is=bordered-button], [control-size=mini][is=borderless-button], [control-size=mini][is=plain-button]) {
     --btnpadistart: var(--mini-btn-padding);
     --btnpadiend: var(--mini-btn-padding);
@@ -934,6 +950,17 @@
     }
   }
 }
+@layer sw-utils {
+  :where([is=glass-prominent-button] > [slot], [is=glass-button] > [slot], [is=bordered-prominent-button] > [slot], [is=bordered-button] > [slot], [is=borderless-button] > [slot], [is=plain-button] > [slot]) {
+    display: none;
+  }
+  :where([is=glass-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=glass-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-prominent-button]:has(> [slot=overlay]) > [slot=overlay], [is=bordered-button]:has(> [slot=overlay]) > [slot=overlay], [is=borderless-button]:has(> [slot=overlay]) > [slot=overlay], [is=plain-button]:has(> [slot=overlay]) > [slot=overlay]) {
+    display: grid;
+  }
+  :where([is=glass-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=glass-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-prominent-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=bordered-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=borderless-button]:not(:has(> :not([slot]))) > [slot=placeholder], [is=plain-button]:not(:has(> :not([slot]))) > [slot=placeholder]) {
+    display: grid;
+  }
+}
 @layer sw-actions {
   :where([is=glass-prominent-button]:not(:disabled):not([readonly]), [is=glass-button]:not(:disabled):not([readonly]), [is=bordered-prominent-button]:not(:disabled):not([readonly]), [is=bordered-button]:not(:disabled):not([readonly]), [is=borderless-button]:not(:disabled):not([readonly]), [is=plain-button]:not(:disabled):not([readonly])):active {
     --btnface: var(--btnactiveface,);
@@ -1014,6 +1041,7 @@
   [is=tab-bar]:not([hidden]),
   [is=full-screen]:not([hidden]),
   [is=confirmation-dialog]:not([hidden]),
+  [is=alert-dialog]:not([hidden]),
   [is=sheet-view]:not([hidden]),
   [is=form-view]:not([hidden]),
   [is=disclosure-group]:not([hidden]),
@@ -1462,9 +1490,14 @@
     transform: var(--sheet-view-translate, );
     --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
   }
-  :where(:where([is=sheet-view])[fine-presentation-large-adaptation=bottom-bar] > tool-bar > [slot^=top-bar-]) {
+  :where(:where([is=sheet-view]) > tool-bar > [slot=top-bar-leading], :where([is=sheet-view]) > tool-bar > [slot=top-bar-trailing]) {
     --label-style: icon-only;
   }
+  @media (pointer: coarse) {
+    :where(:where([is=sheet-view]) > tool-bar > [slot^=bottom-bar-]) {
+      --label-style: icon-only;
+    }
+  }
   @media (pointer: coarse) and (orientation: portrait) {
     :where([is=sheet-view]) {
       clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
@@ -1579,40 +1612,61 @@
     --confirmation--dialog-max-block-size: anchor-size();
     --confirmation--dialog-scale: scale(0);
   }
-  :where([is=confirmation-dialog] > button) {
-    appearance: none;
-    -webkit-appearance: none;
-    border: var(--dialogbtnborder,);
-    background: var(--dialogbtnface,);
-    color: var(--dialogbtntext,);
-    padding-inline: var(--dialogbtnpadistart,) var(--dialogbtnpadiend,);
-    padding-block: var(--dialogbtnpadbstart,) var(--dialogbtnpadbend,);
-    border-radius: var(--dialogbtnradiustl,) var(--dialogbtnradiustr,) var(--dialogbtnradiusbr,) var(--dialogbtnradiusbl,);
-  }
-  :where([is=confirmation-dialog]) {
-    --dialogbtnpadistart: 0.6rem;
-    --dialogbtnpadiend: 0.6rem;
-    --dialogbtnpadbstart: 0.6rem;
-    --dialogbtnpadbend: 0.6rem;
-    --dialogbtnradiustl: 1rem;
-    --dialogbtnradiustr: 1rem;
-    --dialogbtnradiusbl: 1rem;
-    --dialogbtnradiusbr: 1rem;
-  }
 }
-@layer sw-colors {
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):focus-visible {
+@layer sw-components {
+  :where([is=alert-dialog]) {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: transparent;
+    max-width: 100lvw;
+    max-height: 100lvh;
     outline: none;
   }
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):focus-visible {
-    --dialogbtnface: var(--dialogbtnhighlightface,);
-    --dialogbtntext: var(--dialogbtnhighlighttext,);
+  :where([is=alert-dialog])::backdrop {
+    background-color: transparent;
   }
-}
-@layer sw-actions {
-  :where([is=confirmation-dialog] > button:not(:disabled):not([readonly])):active {
-    --dialogbtnface: var(--dialogbtnactiveface,);
-    --dialogbtntext: var(--dialogbtnactivetext,);
+  :where([is=alert-dialog]) {
+    color: var(--text, );
+    touch-action: none;
+    position: fixed;
+    inline-size: fit-content;
+    block-size: fit-content;
+    height: auto;
+    max-inline-size: min(20rem, 80vw);
+    max-block-size: 80vh;
+    margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+    margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+    transform: var(--alert--dialog-scale, );
+    opacity: var(--alert--dialog-opacity, );
+    position-anchor: --alert-dialog;
+    position-area: center;
+    overflow: clip;
+    border-radius: 0.9rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter, );
+    box-shadow: var(--menu-popover-box-shadow, );
+    padding-block: 1rem;
+    padding-inline: 1em;
+    gap: 1rem;
+    --alert--dialog-scale: scale(1.2);
+    --alert--dialog-opacity: 0.8;
+  }
+  :where([is=alert-dialog][open]) {
+    --alert--dialog-scale: scale(1);
+    --alert--dialog-opacity: 1;
+  }
+  @starting-style {
+    :where([is=alert-dialog][open]) {
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+  }
+  :where([is=alert-dialog][closing]) {
+    --alert--dialog-scale: scale(0.98);
+    --alert--dialog-opacity: 0;
   }
 }
 @layer sw-components {
@@ -1746,6 +1800,9 @@
   :where(h-stack[template="auto minmax(0,1fr) auto auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto auto;
   }
+  :where(h-stack[template="auto minmax(0,1fr) auto"]) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
   :where(h-stack[template="repeat(4,minmax(0,1fr))"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -1760,14 +1817,31 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(v-stack[template="auto minmax(0,1fr)"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
   :where(v-stack[template="auto auto minmax(0,1fr)"]) {
     grid-template-rows: auto auto minmax(0, 1fr);
   }
-  :where(v-stack[template="auto minmax(0,1fr)"]) {
-    grid-template-rows: auto minmax(0, 1fr);
+  :where(v-stack[template="auto auto auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto auto minmax(0, 1fr);
   }
-  :where(v-stack[template="auto auto autominmax(0,1fr)"]) {
-    grid-template-rows: auto auto autominmax(0, 1fr);
+  :where(v-stack[template="auto auto auto auto minmax(0,1fr)"]) {
+    grid-template-rows: auto auto auto auto minmax(0, 1fr);
+  }
+}
+@layer sw-components {
+  :where(h-flex-stack) {
+    display: flex;
+    flex-flow: row nowrap;
+    place-items: safe center;
+    place-content: safe center;
+  }
+  :where(h-flex-stack > *) {
+    max-block-size: 100%;
+  }
+  :where(h-flex-stack > [frame-height=infinity]) {
+    flex-grow: 1;
   }
 }
 @layer sw-components {
@@ -5247,6 +5321,12 @@
   :where([frame\:max-width="100cqi"]) {
     max-inline-size: 100cqi;
   }
+  :where([frame\:alignment=top]) {
+    align-self: top;
+  }
+  :where([frame\:alignment=leading]) {
+    justify-self: start;
+  }
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
       visibility: visible;
@@ -6388,6 +6468,13 @@
     }
   }
 }
+@layer sw-transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([is=alert-dialog]) {
+      transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+    }
+  }
+}
 @layer sw-transitions {}
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
@@ -7318,7 +7405,7 @@
     --face: var(--background);
     --text: var(--primary);
   }
-  :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog]) {
+  :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog], [is=alert-dialog]) {
     --face: var(--background);
     --background: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
   }
@@ -7363,7 +7450,7 @@
     --menuitemactivetext: light-dark(var(--menu-item-active-color), var(--menu-item-active-color-dark));
     --menuitemactiveface: light-dark(var(--menu-item-active-bg), var(--menu-item-active-bg-dark));
   }
-  :where([is=confirmation-dialog]) {
+  :where([is=confirmation-dialog], [is=alert-dialog]) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --dialogbtnhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --dialogbtnactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
@@ -7457,6 +7544,10 @@
       --confirmation--dialog-scale: scale(1.02);
       transition-duration: 100ms;
     }
+    :where([is=alert-dialog][touch-glass]) {
+      --alert--dialog-scale: scale(1.02);
+      transition-duration: 100ms;
+    }
     :where(tool-bar > *[touch-glass]) {
       --toolbar-cell-scale: scale(1.07);
       transition-duration: 100ms;

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

@@ -0,0 +1,8 @@
+export type AlertReturnDetail = {
+    returnValue: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        'alert:return': CustomEvent<AlertReturnDetail>;
+    }
+}

package/generated/events/alert-dialog.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,9 +1,9 @@
-export type ReturnDetail = {
+export type ConfirmationReturnDetail = {
     returnValue: string;
     positionAnchor: string;
 };
 declare global {
     interface HTMLElementEventMap {
-        return: CustomEvent<ReturnDetail>;
+        'confirmation:return': CustomEvent<ConfirmationReturnDetail>;
     }
 }

package/generated/events/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';

package/generated/events/index.js

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';

package/generated/i18n/locales/el.d.ts

@@ -4,5 +4,14 @@ declare const _default: () => {
         readonly Label: "Κανένα αποτέλεσμα για «{search}»";
         readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
     };
+    readonly ButtonRole: {
+        readonly Default: {
+            readonly Cancel: "Cancel";
+            readonly Close: "Close";
+            readonly Confirm: "Confirm";
+            readonly Destructive: "Διαγραφή";
+            readonly OK: "OK";
+        };
+    };
 };
 export default _default;

package/generated/i18n/locales/el.js

@@ -5,4 +5,13 @@ export default defineTranslations(() => ({
         Label: 'Κανένα αποτέλεσμα για «{search}»',
         Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
     },
+    ButtonRole: {
+        Default: {
+            Cancel: 'Cancel',
+            Close: 'Close',
+            Confirm: 'Confirm',
+            Destructive: 'Διαγραφή',
+            OK: 'OK',
+        },
+    },
 }));

package/generated/i18n/locales/en.d.ts

@@ -4,5 +4,14 @@ declare const _default: () => {
         readonly Label: "No Results for ”{search}”";
         readonly Description: "Check the spelling or try a new search.";
     };
+    readonly ButtonRole: {
+        readonly Default: {
+            readonly Cancel: "Cancel";
+            readonly Close: "Close";
+            readonly Confirm: "Confirm";
+            readonly Destructive: "Delete";
+            readonly OK: "OK";
+        };
+    };
 };
 export default _default;

package/generated/i18n/locales/en.js

@@ -5,4 +5,13 @@ export default defineTranslations(() => ({
         Label: 'No Results for ”{search}”',
         Description: 'Check the spelling or try a new search.',
     },
+    ButtonRole: {
+        Default: {
+            Cancel: 'Cancel',
+            Close: 'Close',
+            Confirm: 'Confirm',
+            Destructive: 'Delete',
+            OK: 'OK',
+        },
+    },
 }));