@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition39.js

@@ -1,399 +1,9 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { D as Direction, g as getDirection } from './direction.js';
-import { h as keyArrowRight, i as keyArrowLeft, A as ArrowKeys, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
-import { O as Orientation } from './aria.js';
-import { R as Radio } from './radio.js';
-import { s as slotted, e as elements } from './slotted.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
-import { O as Orientation$1 } from './aria2.js';
+import { c as classNames } from './class-names.js';
 
-/**
- * An Radio Group Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
- *
- * @slot label - The slot for the label
- * @slot - The default slot for radio buttons
- * @csspart positioning-region - The positioning region for laying out the radios
- * @fires change - Fires a custom 'change' event when the value changes
- *
- * @public
- */
-let RadioGroup$1 = class RadioGroup extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The orientation of the group
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-        this.radioChangeHandler = (e) => {
-            const changedRadio = e.target;
-            if (changedRadio.checked) {
-                this.slottedRadioButtons.forEach((radio) => {
-                    if (radio !== changedRadio) {
-                        radio.checked = false;
-                        if (!this.isInsideFoundationToolbar) {
-                            radio.setAttribute("tabindex", "-1");
-                        }
-                    }
-                });
-                this.selectedRadio = changedRadio;
-                this.value = changedRadio.value;
-                changedRadio.setAttribute("tabindex", "0");
-                this.focusedRadio = changedRadio;
-            }
-            e.stopPropagation();
-        };
-        this.moveToRadioByIndex = (group, index) => {
-            const radio = group[index];
-            if (!this.isInsideToolbar) {
-                radio.setAttribute("tabindex", "0");
-                if (radio.readOnly) {
-                    this.slottedRadioButtons.forEach((nextRadio) => {
-                        if (nextRadio !== radio) {
-                            nextRadio.setAttribute("tabindex", "-1");
-                        }
-                    });
-                }
-                else {
-                    radio.checked = true;
-                    this.selectedRadio = radio;
-                }
-            }
-            this.focusedRadio = radio;
-            radio.focus();
-        };
-        this.moveRightOffGroup = () => {
-            var _a;
-            (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.moveLeftOffGroup = () => {
-            var _a;
-            (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        /**
-         * @internal
-         */
-        this.focusOutHandler = (e) => {
-            const group = this.slottedRadioButtons;
-            const radio = e.target;
-            const index = radio !== null ? group.indexOf(radio) : 0;
-            const focusedIndex = this.focusedRadio
-                ? group.indexOf(this.focusedRadio)
-                : -1;
-            if ((focusedIndex === 0 && index === focusedIndex) ||
-                (focusedIndex === group.length - 1 && focusedIndex === index)) {
-                if (!this.selectedRadio) {
-                    this.focusedRadio = group[0];
-                    this.focusedRadio.setAttribute("tabindex", "0");
-                    group.forEach((nextRadio) => {
-                        if (nextRadio !== this.focusedRadio) {
-                            nextRadio.setAttribute("tabindex", "-1");
-                        }
-                    });
-                }
-                else {
-                    this.focusedRadio = this.selectedRadio;
-                    if (!this.isInsideFoundationToolbar) {
-                        this.selectedRadio.setAttribute("tabindex", "0");
-                        group.forEach((nextRadio) => {
-                            if (nextRadio !== this.selectedRadio) {
-                                nextRadio.setAttribute("tabindex", "-1");
-                            }
-                        });
-                    }
-                }
-            }
-            return true;
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            const radio = e.target;
-            if (radio) {
-                const group = this.slottedRadioButtons;
-                if (radio.checked || group.indexOf(radio) === 0) {
-                    radio.setAttribute("tabindex", "0");
-                    this.selectedRadio = radio;
-                }
-                else {
-                    radio.setAttribute("tabindex", "-1");
-                    this.selectedRadio = null;
-                }
-                this.focusedRadio = radio;
-            }
-            e.preventDefault();
-        };
-        this.shouldMoveOffGroupToTheRight = (index, group, key) => {
-            return index === group.length && this.isInsideToolbar && key === keyArrowRight;
-        };
-        this.shouldMoveOffGroupToTheLeft = (group, key) => {
-            const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
-        };
-        this.checkFocusedRadio = () => {
-            if (this.focusedRadio !== null &&
-                !this.focusedRadio.readOnly &&
-                !this.focusedRadio.checked) {
-                this.focusedRadio.checked = true;
-                this.focusedRadio.setAttribute("tabindex", "0");
-                this.focusedRadio.focus();
-                this.selectedRadio = this.focusedRadio;
-            }
-        };
-        this.moveRight = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
-            if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
-                this.moveRightOffGroup();
-                return;
-            }
-            else if (index === group.length) {
-                index = 0;
-            }
-            /* looping to get to next radio that is not disabled */
-            /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
-            while (index < group.length && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index + 1 >= group.length) {
-                    if (this.isInsideToolbar) {
-                        break;
-                    }
-                    else {
-                        index = 0;
-                    }
-                }
-                else {
-                    index += 1;
-                }
-            }
-        };
-        this.moveLeft = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            index = index < 0 ? group.length - 1 : index;
-            if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
-                this.moveLeftOffGroup();
-                return;
-            }
-            /* looping to get to next radio that is not disabled */
-            while (index >= 0 && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index - 1 < 0) {
-                    index = group.length - 1;
-                }
-                else {
-                    index -= 1;
-                }
-            }
-        };
-        /**
-         * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-         * navigation is different when there is an ancestor with role='toolbar'
-         *
-         * @internal
-         */
-        this.keydownHandler = (e) => {
-            const key = e.key;
-            if (key in ArrowKeys && this.isInsideFoundationToolbar) {
-                return true;
-            }
-            switch (key) {
-                case keyEnter: {
-                    this.checkFocusedRadio();
-                    break;
-                }
-                case keyArrowRight:
-                case keyArrowDown: {
-                    if (this.direction === Direction.ltr) {
-                        this.moveRight(e);
-                    }
-                    else {
-                        this.moveLeft(e);
-                    }
-                    break;
-                }
-                case keyArrowLeft:
-                case keyArrowUp: {
-                    if (this.direction === Direction.ltr) {
-                        this.moveLeft(e);
-                    }
-                    else {
-                        this.moveRight(e);
-                    }
-                    break;
-                }
-                default: {
-                    return true;
-                }
-            }
-        };
-    }
-    readOnlyChanged() {
-        if (this.slottedRadioButtons !== undefined) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (this.readOnly) {
-                    radio.readOnly = true;
-                }
-                else {
-                    radio.readOnly = false;
-                }
-            });
-        }
-    }
-    disabledChanged() {
-        if (this.slottedRadioButtons !== undefined) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (this.disabled) {
-                    radio.disabled = true;
-                }
-                else {
-                    radio.disabled = false;
-                }
-            });
-        }
-    }
-    nameChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                radio.setAttribute("name", this.name);
-            });
-        }
-    }
-    valueChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (radio.value === this.value) {
-                    radio.checked = true;
-                    this.selectedRadio = radio;
-                }
-            });
-        }
-        this.$emit("change");
-    }
-    slottedRadioButtonsChanged(oldValue, newValue) {
-        if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-            this.setupRadioButtons();
-        }
-    }
-    get parentToolbar() {
-        return this.closest('[role="toolbar"]');
-    }
-    get isInsideToolbar() {
-        var _a;
-        return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
-    }
-    get isInsideFoundationToolbar() {
-        var _a;
-        return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.direction = getDirection(this);
-        this.setupRadioButtons();
-    }
-    disconnectedCallback() {
-        this.slottedRadioButtons.forEach((radio) => {
-            radio.removeEventListener("change", this.radioChangeHandler);
-        });
-    }
-    setupRadioButtons() {
-        const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-            return radio.hasAttribute("checked");
-        });
-        const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
-        if (numberOfCheckedRadios > 1) {
-            const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-            lastCheckedRadio.checked = true;
-        }
-        let foundMatchingVal = false;
-        this.slottedRadioButtons.forEach((radio) => {
-            if (this.name !== undefined) {
-                radio.setAttribute("name", this.name);
-            }
-            if (this.disabled) {
-                radio.disabled = true;
-            }
-            if (this.readOnly) {
-                radio.readOnly = true;
-            }
-            if (this.value && this.value === radio.value) {
-                this.selectedRadio = radio;
-                this.focusedRadio = radio;
-                radio.checked = true;
-                radio.setAttribute("tabindex", "0");
-                foundMatchingVal = true;
-            }
-            else {
-                if (!this.isInsideFoundationToolbar) {
-                    radio.setAttribute("tabindex", "-1");
-                }
-                radio.checked = false;
-            }
-            radio.addEventListener("change", this.radioChangeHandler);
-        });
-        if (this.value === undefined && this.slottedRadioButtons.length > 0) {
-            const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-                return radio.hasAttribute("checked");
-            });
-            const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
-            if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
-                const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-                lastCheckedRadio.checked = true;
-                this.focusedRadio = lastCheckedRadio;
-                lastCheckedRadio.setAttribute("tabindex", "0");
-            }
-            else {
-                this.slottedRadioButtons[0].setAttribute("tabindex", "0");
-                this.focusedRadio = this.slottedRadioButtons[0];
-            }
-        }
-    }
-};
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup$1.prototype, "readOnly", void 0);
-__decorate([
-    attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup$1.prototype, "disabled", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "name", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "value", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "orientation", void 0);
-__decorate([
-    observable
-], RadioGroup$1.prototype, "childItems", void 0);
-__decorate([
-    observable
-], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
-
-const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}\n";
+const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -406,39 +16,71 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends RadioGroup$1 {
+class Progress extends BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.reverse = false;
+  }
 }
 __decorateClass([
-  attr
-], RadioGroup.prototype, "label", 2);
+  attr({ attribute: "aria-label" })
+], Progress.prototype, "ariaLabel", 2);
+__decorateClass([
+  attr()
+], Progress.prototype, "shape", 2);
+__decorateClass([
+  attr()
+], Progress.prototype, "connotation", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Progress.prototype, "reverse", 2);
 
-const RadioGroupTemplate = (context) => {
-  return html`
-		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusout="${(x, c) => x.focusOutHandler(c.event)}"
+const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["reverse", Boolean(reverse)],
+  ["paused", Boolean(paused)]
+);
+function determinate() {
+  return html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+  return html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
+const ProgressTemplate = (_) => {
+  return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+		<div
+			role="progressbar"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-valuenow="${(x) => x.value}"
+			aria-valuemin="${(x) => x.min}"
+			aria-valuemax="${(x) => x.max}"
+			class="${getClasses}"
 		>
-
-			${when((x) => x.label, html`<label>${(x) => x.label}</label>`)}
-
-			<div class="positioning-region ${(x) => x.orientation === Orientation$1.horizontal ? "horizontal" : "vertical"}">
-				<slot ${slotted({ property: "slottedRadioButtons", filter: elements(context.tagFor(Radio)) })}></slot>
+			<div class="progress">
+				${when((x) => typeof x.value === "number", determinate())}
+				${when((x) => typeof x.value !== "number", indeterminate())}
 			</div>
-		</template>
-	`;
+		</div>
+	</template>`;
 };
 
-const radioGroupDefinition = RadioGroup.compose({
-  baseName: "radio-group",
-  template: RadioGroupTemplate,
-  styles
-});
-const radioGroupRegistries = [radioGroupDefinition()];
-const registerRadioGroup = registerFactory(radioGroupRegistries);
+const progressDefinition = Progress.compose(
+  {
+    baseName: "progress",
+    template: ProgressTemplate,
+    styles
+  }
+);
+const progressRegistries = [progressDefinition()];
+const registerProgress = registerFactory(progressRegistries);
 
-export { radioGroupRegistries as a, registerRadioGroup as b, radioGroupDefinition as r };
+export { progressRegistries as a, progressDefinition as p, registerProgress as r };

package/shared/definition4.cjs

@@ -2,8 +2,8 @@
 
 const index = require('./index.cjs');
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition59.cjs');
-const definition$1 = require('./definition26.cjs');
+const definition = require('./definition62.cjs');
+const definition$1 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
 require('./index2.cjs');
@@ -13,7 +13,7 @@ const button = require('./button.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (max-width: 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -62,7 +62,9 @@ class Alert extends index.FoundationElement {
     this.#setupTimeout();
     if (newValue) {
       this.style.display = "contents";
-      const alertText = this.shadowRoot.querySelector(".alert-text");
+      const alertText = this.shadowRoot.querySelector(
+        ".alert-text"
+      );
       if (this.removable && alertText) {
         alertText.setAttribute("tabindex", "0");
         alertText.focus();
@@ -75,7 +77,9 @@ class Alert extends index.FoundationElement {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("keydown", this.#closeOnEscape);
-    this.controlEl = this.shadowRoot.querySelector(".control");
+    this.controlEl = this.shadowRoot.querySelector(
+      ".control"
+    );
     if (this.controlEl)
       this.controlEl.addEventListener("transitionend", this.#onTransitionEnd);
     this.#setupTimeout();
@@ -86,7 +90,10 @@ class Alert extends index.FoundationElement {
       clearTimeout(this.#timeoutID);
     this.removeEventListener("keydown", this.#closeOnEscape);
     if (this.controlEl)
-      this.controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
+      this.controlEl.removeEventListener(
+        "transitionend",
+        this.#onTransitionEnd
+      );
   }
   get conditionedIcon() {
     return this.icon || connotationIconMap.get(this.connotation);
@@ -137,10 +144,7 @@ __decorateClass([
 applyMixins.applyMixins(Alert, affix.AffixIcon);
 applyMixins.applyMixins(Alert, localized.Localized);
 
-const getClasses = ({ connotation }) => classNames.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)]
-);
+const getClasses = ({ connotation }) => classNames.classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
 const getControlClasses = ({ open, placement, strategy }) => classNames.classNames(
   "control",
   ["open", open],
@@ -174,7 +178,10 @@ const AlertTemplate = (context) => {
 			<div part="vvd-theme-alternate" class="${getClasses}">
 				${renderIcon(context)}
 				<div class="alert-text">
-					${when.when((x) => x.headline, index.html`<header class="headline">${(x) => x.headline}</header>`)}
+					${when.when(
+    (x) => x.headline,
+    index.html`<header class="headline">${(x) => x.headline}</header>`
+  )}
 					${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main">
 					</slot>
@@ -192,7 +199,12 @@ const alertDefinition = Alert.compose({
   template: AlertTemplate,
   styles
 });
-const alertRegistries = [alertDefinition(), ...definition$1.iconRegistries, ...definition$2.buttonRegistries, ...definition.elevationRegistries];
+const alertRegistries = [
+  alertDefinition(),
+  ...definition$1.iconRegistries,
+  ...definition$2.buttonRegistries,
+  ...definition.elevationRegistries
+];
 const registerAlert = index.registerFactory(alertRegistries);
 
 exports.alertDefinition = alertDefinition;