@vonage/vivid 5.15.0 → 5.16.0

package/action-group/definition.js

@@ -1,63 +1,2 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, html } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class ActionGroup extends DelegatesAria(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.tight = false;
-  }
-}
-__decorateClass([
-  attr
-], ActionGroup.prototype, "shape");
-__decorateClass([
-  attr
-], ActionGroup.prototype, "appearance");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], ActionGroup.prototype, "tight");
-
-const getClasses = ({ appearance, shape, tight }) => classNames(
-  "base",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["tight", tight]
-);
-const ActionGroupTemplate = html`<div
-	class="${getClasses}"
-	${delegateAria({
-  role: (x) => x.role ? x.role : "group"
-})}
->
-	<slot></slot>
-</div>`;
-
-const actionGroupDefinition = defineVividComponent(
-  "action-group",
-  ActionGroup,
-  ActionGroupTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerActionGroup = createRegisterFunction(
-  actionGroupDefinition
-);
-
+import { n as registerActionGroup, r as ActionGroup, t as actionGroupDefinition } from "../unbundled/definition5.js";
 export { ActionGroup as VwcActionGroupElement, actionGroupDefinition, registerActionGroup };

package/action-group/index.cjs

@@ -1,6 +1,6 @@
-"use strict";const o=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/class-names.cjs"),v=':host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}';var d=Object.defineProperty,l=(e,t,r,f)=>{for(var a=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(a=c(t,r,a)||a);return a&&d(t,r,a),a};class n extends s.DelegatesAria(o.VividElement){constructor(){super(...arguments),this.tight=!1}}l([o.attr],n.prototype,"shape");l([o.attr],n.prototype,"appearance");l([o.attr({mode:"boolean"})],n.prototype,"tight");const u=({appearance:e,shape:t,tight:r})=>p.classNames("base",[`appearance-${e}`,!!e],[`shape-${t}`,!!t],["tight",r]),g=o.html`<div
-	class="${u}"
-	${s.delegateAria({role:e=>e.role?e.role:"group"})}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`);var i=`:host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}`,a=class extends r.t(e.t){constructor(...e){super(...e),this.tight=!1}};t.t([e.l],a.prototype,`shape`,void 0),t.t([e.l],a.prototype,`appearance`,void 0),t.t([e.l({mode:`boolean`})],a.prototype,`tight`,void 0);var o=e.d`<div
+	class="${({appearance:e,shape:t,tight:r})=>n.t(`base`,[`appearance-${e}`,!!e],[`shape-${t}`,!!t],[`tight`,r])}"
+	${r.n({role:e=>e.role?e.role:`group`})}
 >
 	<slot></slot>
-</div>`,b=o.defineVividComponent("action-group",n,g,[],{styles:v}),m=o.createRegisterFunction(b);m();
+</div>`,s=e.o(`action-group`,a,o,[],{styles:i});e.s(s)();

package/action-group/index.js

@@ -1,49 +1,19 @@
-import { V as c, a as i, h as p, c as v, d } from "../bundled/vivid-element.js";
-import { D as u, d as g } from "../bundled/delegates-aria.js";
-import { c as b } from "../bundled/class-names.js";
-const m = ':host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}';
-var f = Object.defineProperty, s = (o, e, r, A) => {
-  for (var a = void 0, n = o.length - 1, l; n >= 0; n--)
-    (l = o[n]) && (a = l(e, r, a) || a);
-  return a && f(e, r, a), a;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/decorate.js";
+import { t as o } from "../bundled/class-names.js";
+import { n as s, t as c } from "../bundled/delegates-aria.js";
+//#region src/lib/action-group/action-group.scss?inline
+var l = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}", u = class extends c(i) {
+	constructor(...e) {
+		super(...e), this.tight = !1;
+	}
 };
-class t extends u(c) {
-  constructor() {
-    super(...arguments), this.tight = !1;
-  }
-}
-s([
-  i
-], t.prototype, "shape");
-s([
-  i
-], t.prototype, "appearance");
-s([
-  i({
-    mode: "boolean"
-  })
-], t.prototype, "tight");
-const h = ({ appearance: o, shape: e, tight: r }) => b(
-  "base",
-  [`appearance-${o}`, !!o],
-  [`shape-${e}`, !!e],
-  ["tight", r]
-), _ = p`<div
-	class="${h}"
-	${g({
-  role: (o) => o.role ? o.role : "group"
-})}
+//#endregion
+//#region src/lib/action-group/index.ts
+a([t], u.prototype, "shape", void 0), a([t], u.prototype, "appearance", void 0), a([t({ mode: "boolean" })], u.prototype, "tight", void 0), r(n("action-group", u, e`<div
+	class="${({ appearance: e, shape: t, tight: n }) => o("base", [`appearance-${e}`, !!e], [`shape-${t}`, !!t], ["tight", n])}"
+	${s({ role: (e) => e.role ? e.role : "group" })}
 >
 	<slot></slot>
-</div>`, x = d(
-  "action-group",
-  t,
-  _,
-  [],
-  {
-    styles: m
-  }
-), y = v(
-  x
-);
-y();
+</div>`, [], { styles: l }))();
+//#endregion

package/alert/definition.cjs

@@ -1,201 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const button_definition = require('../unbundled/definition.cjs');
-const elevation_definition = require('../unbundled/definition6.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const icon_definition = require('../icon/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const enums = require('../unbundled/enums.cjs');
-const affix = require('../unbundled/affix.cjs');
-const index = require('../unbundled/index.cjs');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline: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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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:16px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const CONNOTATION_ICON_MAP = {
-  [enums.Connotation.Accent]: "megaphone-line",
-  [enums.Connotation.Information]: "info-line",
-  [enums.Connotation.Success]: "check-circle-line",
-  [enums.Connotation.Warning]: "warning-line",
-  [enums.Connotation.Announcement]: "sparkles-line",
-  [enums.Connotation.Alert]: "error-line"
-};
-class Alert extends affix.AffixIcon(localized.Localized(vividElement.VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.dismissButtonAriaLabel = null;
-    this.removable = false;
-    this.placement = "bottom";
-    this.timeoutms = 0;
-    this.open = false;
-    this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && index.handleEscapeKeyAndStopPropogation(e)) {
-        this.open = false;
-      }
-    };
-    this.#onTransitionEnd = () => {
-      if (!this.open) {
-        this.style.display = "none";
-      } else {
-        this.style.display = "contents";
-      }
-    };
-  }
-  // timeout to close the alert
-  #timeoutID;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit(newValue ? "open" : "close");
-    this.#setupTimeout();
-    if (newValue) {
-      this.style.display = "contents";
-      const closeBtn = this.shadowRoot.querySelector(
-        ".dismiss-button"
-      );
-      if (this.removable && closeBtn) {
-        closeBtn.focus();
-      }
-    } else {
-      this.style.display = "none";
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.addEventListener("transitionend", this.#onTransitionEnd);
-    this.#setupTimeout();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    this.removeEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
-  }
-  get conditionedIcon() {
-    return this.icon || this.connotation && CONNOTATION_ICON_MAP[this.connotation];
-  }
-  #setupTimeout() {
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    if (this.open && this.timeoutms > 0) {
-      this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
-    }
-  }
-  #closeOnEscape;
-  #onTransitionEnd;
-}
-__decorateClass([
-  fastElement.attr({ attribute: "dismiss-button-aria-label" })
-], Alert.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Alert.prototype, "removable");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Alert.prototype, "placement");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "headline");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "text");
-__decorateClass([
-  fastElement.attr({
-    mode: "fromView",
-    converter: fastElement.nullableNumberConverter
-  })
-], Alert.prototype, "timeoutms");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "strategy");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Alert.prototype, "open");
-
-const getClasses = ({ connotation }) => fastWebUtilities.classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
-const getControlClasses = ({ open, placement, strategy }) => fastWebUtilities.classNames(
-  "control",
-  ["open", open],
-  [`placement-${placement}`, Boolean(placement)],
-  [`strategy-${strategy}`, Boolean(strategy)]
-);
-function renderIcon(c, x) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(c);
-  const icon = x.conditionedIcon;
-  const announcement = !x.icon && x.connotation ? {
-    label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
-    announceOnUpdate: true
-  } : void 0;
-  return affixIconTemplate(
-    icon,
-    affix.IconWrapper.Slot,
-    affix.IconAriaHidden.Hidden,
-    announcement
-  );
-}
-function renderDismissButton(buttonTag) {
-  return fastElement.html`
-		<${buttonTag}
-			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
-			size="condensed"
-			type="button"
-			class="dismiss-button"
-			icon="close-line"
-			@click="${(x) => x.open = false}">
-		</${buttonTag}>`;
-}
-const AlertTemplate = (context) => {
-  const elevationTag = context.tagFor(elevation_definition.Elevation);
-  const buttonTag = context.tagFor(button_definition.Button);
-  return fastElement.html`
-	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${getControlClasses}" ${fastElement.ref("_controlEl")}>
-			<div
-				part="vvd-theme-alternate"
-				class="${getClasses}"
-				role="alert"
-				aria-hidden="${(x) => x.open ? "false" : "true"}"
-				?hidden="${(x) => !x.open}"
-			>
-				${(x) => renderIcon(context, x)}
-				<div class="alert-text">
-					${fastElement.when((x) => x.headline, fastElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
-					${fastElement.when((x) => x.text, fastElement.html`<div class="main-text">${(x) => x.text}</div>`)}
-					<slot name="main"></slot>
-				</div>
-				<slot class="action-items" name="action-items"></slot>
-				${fastElement.when((x) => x.removable, renderDismissButton(buttonTag))}
-			</div>
-		</div>
-	</${elevationTag}>
-	`;
-};
-
-const alertDefinition = vividElement.defineVividComponent(
-  "alert",
-  Alert,
-  AlertTemplate,
-  [icon_definition.iconDefinition, button_definition.buttonDefinition, elevation_definition.elevationDefinition],
-  {
-    styles
-  }
-);
-const registerAlert = vividElement.createRegisterFunction(alertDefinition);
-
-exports.VwcAlertElement = Alert;
-exports.alertDefinition = alertDefinition;
-exports.registerAlert = registerAlert;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition9.cjs");
+exports.VwcAlertElement = require_definition$1.Alert;
+exports.alertDefinition = require_definition$1.alertDefinition;
+exports.registerAlert = require_definition$1.registerAlert;

package/alert/definition.js

@@ -1,195 +1,3 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { iconDefinition } from '../icon/definition.js';
-import { attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
-import { C as Connotation } from '../unbundled/enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline: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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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:16px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const CONNOTATION_ICON_MAP = {
-  [Connotation.Accent]: "megaphone-line",
-  [Connotation.Information]: "info-line",
-  [Connotation.Success]: "check-circle-line",
-  [Connotation.Warning]: "warning-line",
-  [Connotation.Announcement]: "sparkles-line",
-  [Connotation.Alert]: "error-line"
-};
-class Alert extends AffixIcon(Localized(VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.dismissButtonAriaLabel = null;
-    this.removable = false;
-    this.placement = "bottom";
-    this.timeoutms = 0;
-    this.open = false;
-    this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && handleEscapeKeyAndStopPropogation(e)) {
-        this.open = false;
-      }
-    };
-    this.#onTransitionEnd = () => {
-      if (!this.open) {
-        this.style.display = "none";
-      } else {
-        this.style.display = "contents";
-      }
-    };
-  }
-  // timeout to close the alert
-  #timeoutID;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit(newValue ? "open" : "close");
-    this.#setupTimeout();
-    if (newValue) {
-      this.style.display = "contents";
-      const closeBtn = this.shadowRoot.querySelector(
-        ".dismiss-button"
-      );
-      if (this.removable && closeBtn) {
-        closeBtn.focus();
-      }
-    } else {
-      this.style.display = "none";
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.addEventListener("transitionend", this.#onTransitionEnd);
-    this.#setupTimeout();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    this.removeEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
-  }
-  get conditionedIcon() {
-    return this.icon || this.connotation && CONNOTATION_ICON_MAP[this.connotation];
-  }
-  #setupTimeout() {
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    if (this.open && this.timeoutms > 0) {
-      this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
-    }
-  }
-  #closeOnEscape;
-  #onTransitionEnd;
-}
-__decorateClass([
-  attr({ attribute: "dismiss-button-aria-label" })
-], Alert.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Alert.prototype, "removable");
-__decorateClass([
-  attr({ mode: "fromView" })
-], Alert.prototype, "placement");
-__decorateClass([
-  attr
-], Alert.prototype, "headline");
-__decorateClass([
-  attr
-], Alert.prototype, "text");
-__decorateClass([
-  attr({
-    mode: "fromView",
-    converter: nullableNumberConverter
-  })
-], Alert.prototype, "timeoutms");
-__decorateClass([
-  attr
-], Alert.prototype, "connotation");
-__decorateClass([
-  attr
-], Alert.prototype, "strategy");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Alert.prototype, "open");
-
-const getClasses = ({ connotation }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
-const getControlClasses = ({ open, placement, strategy }) => classNames(
-  "control",
-  ["open", open],
-  [`placement-${placement}`, Boolean(placement)],
-  [`strategy-${strategy}`, Boolean(strategy)]
-);
-function renderIcon(c, x) {
-  const affixIconTemplate = affixIconTemplateFactory(c);
-  const icon = x.conditionedIcon;
-  const announcement = !x.icon && x.connotation ? {
-    label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
-    announceOnUpdate: true
-  } : void 0;
-  return affixIconTemplate(
-    icon,
-    IconWrapper.Slot,
-    IconAriaHidden.Hidden,
-    announcement
-  );
-}
-function renderDismissButton(buttonTag) {
-  return html`
-		<${buttonTag}
-			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
-			size="condensed"
-			type="button"
-			class="dismiss-button"
-			icon="close-line"
-			@click="${(x) => x.open = false}">
-		</${buttonTag}>`;
-}
-const AlertTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const buttonTag = context.tagFor(Button);
-  return html`
-	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${getControlClasses}" ${ref("_controlEl")}>
-			<div
-				part="vvd-theme-alternate"
-				class="${getClasses}"
-				role="alert"
-				aria-hidden="${(x) => x.open ? "false" : "true"}"
-				?hidden="${(x) => !x.open}"
-			>
-				${(x) => renderIcon(context, x)}
-				<div class="alert-text">
-					${when((x) => x.headline, html`<h2 class="headline">${(x) => x.headline}</h2>`)}
-					${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
-					<slot name="main"></slot>
-				</div>
-				<slot class="action-items" name="action-items"></slot>
-				${when((x) => x.removable, renderDismissButton(buttonTag))}
-			</div>
-		</div>
-	</${elevationTag}>
-	`;
-};
-
-const alertDefinition = defineVividComponent(
-  "alert",
-  Alert,
-  AlertTemplate,
-  [iconDefinition, buttonDefinition, elevationDefinition],
-  {
-    styles
-  }
-);
-const registerAlert = createRegisterFunction(alertDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerAlert, r as Alert, t as alertDefinition } from "../unbundled/definition9.js";
 export { Alert as VwcAlertElement, alertDefinition, registerAlert };

package/alert/index.cjs

@@ -1,30 +1,30 @@
-"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),o=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),x=require("../bundled/ref.cjs"),m=require("../bundled/when.cjs"),h=require("../bundled/class-names.cjs"),g='.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline: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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.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:16px}';var _=Object.defineProperty,r=(e,t,i,n)=>{for(var s=void 0,d=e.length-1,v;d>=0;d--)(v=e[d])&&(s=v(t,i,s)||s);return s&&_(t,i,s),s};const $={[l.Connotation.Accent]:"megaphone-line",[l.Connotation.Information]:"info-line",[l.Connotation.Success]:"check-circle-line",[l.Connotation.Warning]:"warning-line",[l.Connotation.Announcement]:"sparkles-line",[l.Connotation.Alert]:"error-line"};class a extends c.AffixIcon(y.Localized(o.VividElement)){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement="bottom",this.timeoutms=0,this.open=!1,this.#n=t=>{this.open&&this.removable&&b.handleEscapeKeyAndStopPropogation(t)&&(this.open=!1)},this.#e=()=>{this.open?this.style.display="contents":this.style.display="none"}}#t;openChanged(t,i){if(t!==void 0)if(this.$emit(i?"open":"close"),this.#o(),i){this.style.display="contents";const n=this.shadowRoot.querySelector(".dismiss-button");this.removable&&n&&n.focus()}else this.style.display="none"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n),this._controlEl.addEventListener("transitionend",this.#e),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this._controlEl.removeEventListener("transitionend",this.#e)}get conditionedIcon(){return this.icon||this.connotation&&$[this.connotation]}#o(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#e}r([o.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([o.attr({mode:"boolean"})],a.prototype,"removable");r([o.attr({mode:"fromView"})],a.prototype,"placement");r([o.attr],a.prototype,"headline");r([o.attr],a.prototype,"text");r([o.attr({mode:"fromView",converter:o.nullableNumberConverter})],a.prototype,"timeoutms");r([o.attr],a.prototype,"connotation");r([o.attr],a.prototype,"strategy");r([o.attr({mode:"boolean"})],a.prototype,"open");const C=({connotation:e})=>h.classNames("base",[`connotation-${e}`,!!e]),k=({open:e,placement:t,strategy:i})=>h.classNames("control",["open",e],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(e,t){const i=c.affixIconTemplateFactory(e),n=t.conditionedIcon,s=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return i(n,c.IconWrapper.Slot,c.IconAriaHidden.Hidden,s)}function z(e){return o.html`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/enums.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/dialog.cjs`);var f=`.control{z-index:10;inline-size:max-content;max-inline-size:var(--alert-max-inline-size,fit-content);min-inline-size:var(--alert-min-inline-size,420px);border-radius:8px;margin-block:16px;margin-inline:auto;transition:opacity .15s cubic-bezier(0,0,.2,1),transform .15s cubic-bezier(0,0,.2,1);position:fixed;inset-block-end:0;inset-inline:0}.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;margin-inline:16px;inset-inline-end:auto}.control.placement-top-end,.control.placement-bottom-end{margin-inline:16px;inset-inline-start:auto}.control:where(.strategy-static){inline-size:auto;margin:0;position:static}.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.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.connotation-announcement{--_connotation-color-primary:var(--vvd-alert-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-alert-announcement-primary-text,var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);border-radius:8px;align-items:center;column-gap:16px;padding:16px;display:flex}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{content:"";margin-top:8px;display:block}.base slot[name=icon]{color:var(--_appearance-color-fill);flex-shrink:0;font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}`,p={[l.n.Accent]:`megaphone-line`,[l.n.Information]:`info-line`,[l.n.Success]:`check-circle-line`,[l.n.Warning]:`warning-line`,[l.n.Announcement]:`sparkles-line`,[l.n.Alert]:`error-line`},m=class extends s.t(e.t(t.t)){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement=`bottom`,this.timeoutms=0,this.open=!1}#e;openChanged(e,t){if(e!==void 0)if(this.$emit(t?`open`:`close`),this.#t(),t){this.style.display=`contents`;let e=this.shadowRoot.querySelector(`.dismiss-button`);this.removable&&e&&e.focus()}else this.style.display=`none`}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#n),this._controlEl.addEventListener(`transitionend`,this.#r),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#e&&clearTimeout(this.#e),this.removeEventListener(`keydown`,this.#n),this._controlEl.removeEventListener(`transitionend`,this.#r)}get conditionedIcon(){return this.icon||this.connotation&&p[this.connotation]}#t(){this.#e&&clearTimeout(this.#e),this.open&&this.timeoutms>0&&(this.#e=setTimeout(()=>this.open=!1,this.timeoutms))}#n=e=>{this.open&&this.removable&&d.t(e)&&(this.open=!1)};#r=()=>{this.open?this.style.display=`contents`:this.style.display=`none`}};a.t([t.l({attribute:`dismiss-button-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.l({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.l({mode:`fromView`})],m.prototype,`placement`,void 0),a.t([t.l],m.prototype,`headline`,void 0),a.t([t.l],m.prototype,`text`,void 0),a.t([t.l({mode:`fromView`,converter:t.u})],m.prototype,`timeoutms`,void 0),a.t([t.l],m.prototype,`connotation`,void 0),a.t([t.l],m.prototype,`strategy`,void 0),a.t([t.l({mode:`boolean`})],m.prototype,`open`,void 0);var h=({connotation:e})=>o.t(`base`,[`connotation-${e}`,!!e]),g=({open:e,placement:t,strategy:n})=>o.t(`control`,[`open`,e],[`placement-${t}`,!!t],[`strategy-${n}`,!!n]);function _(e,t){let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)}function v(e){return t.d`
 		<${e}
-			aria-label="${t=>t.dismissButtonAriaLabel||t.locale.alert.dismissButtonLabel}"
+			aria-label="${e=>e.dismissButtonAriaLabel||e.locale.alert.dismissButtonLabel}"
 			size="condensed"
 			type="button"
 			class="dismiss-button"
 			icon="close-line"
-			@click="${t=>t.open=!1}">
-		</${e}>`}const A=e=>{const t=e.tagFor(u.Elevation),i=e.tagFor(p.Button);return o.html`
-	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${k}" ${x.ref("_controlEl")}>
+			@click="${e=>e.open=!1}">
+		</${e}>`}var y=t.o(`alert`,m,e=>{let i=e.tagFor(u.r),a=e.tagFor(c.i);return t.d`
+	<${i} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div class="${g}" ${n.t(`_controlEl`)}>
 			<div
 				part="vvd-theme-alternate"
-				class="${C}"
+				class="${h}"
 				role="alert"
-				aria-hidden="${n=>n.open?"false":"true"}"
-				?hidden="${n=>!n.open}"
+				aria-hidden="${e=>e.open?`false`:`true`}"
+				?hidden="${e=>!e.open}"
 			>
-				${n=>w(e,n)}
+				${t=>_(e,t)}
 				<div class="alert-text">
-					${m.when(n=>n.headline,o.html`<h2 class="headline">${n=>n.headline}</h2>`)}
-					${m.when(n=>n.text,o.html`<div class="main-text">${n=>n.text}</div>`)}
+					${r.t(e=>e.headline,t.d`<h2 class="headline">${e=>e.headline}</h2>`)}
+					${r.t(e=>e.text,t.d`<div class="main-text">${e=>e.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
-				${m.when(n=>n.removable,z(i))}
+				${r.t(e=>e.removable,v(a))}
 			</div>
 		</div>
-	</${t}>
-	`},E=o.defineVividComponent("alert",a,A,[f.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:g}),I=o.createRegisterFunction(E);I();
+	</${i}>
+	`},[i.t,c.t,u.t],{styles:f});t.s(y)();