@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition3.js → action-group/definition.js}

@@ -1,6 +1,7 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
+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}";
 
@@ -59,4 +60,4 @@ const registerActionGroup = createRegisterFunction(
   actionGroupDefinition
 );
 
-export { ActionGroup as A, actionGroupDefinition as a, registerActionGroup as r };
+export { ActionGroup as VwcActionGroupElement, actionGroupDefinition, registerActionGroup };

package/action-group/index.cjs

@@ -1,5 +1,6 @@
-'use strict';
-
-const definition = require('../shared/definition3.cjs');
-
-definition.registerActionGroup();
+"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"})}
+>
+	<slot></slot>
+</div>`,b=o.defineVividComponent("action-group",n,g,[],{styles:v}),m=o.createRegisterFunction(b);m();

package/action-group/index.js

@@ -1,3 +1,49 @@
-import { r as registerActionGroup } from '../shared/definition3.js';
-
-registerActionGroup();
+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;
+};
+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"
+})}
+>
+	<slot></slot>
+</div>`, x = d(
+  "action-group",
+  t,
+  _,
+  [],
+  {
+    styles: m
+  }
+), y = v(
+  x
+);
+y();

package/{shared/definition4.cjs → alert/definition.cjs}

@@ -1,15 +1,17 @@
 'use strict';
 
-const definition$1 = require('./definition11.cjs');
-const definition = require('./definition65.cjs');
-const vividElement = require('./vivid-element.cjs');
-const definition$2 = require('./definition28.cjs');
-const enums = require('./enums.cjs');
-const affix = require('./affix.cjs');
-const index = require('./index.cjs');
-const localized = require('./localized.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const button_definition = require('../unbundled/definition.cjs');
+const elevation_definition = require('../unbundled/definition5.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}";
 
@@ -102,38 +104,38 @@ class Alert extends affix.AffixIcon(localized.Localized(vividElement.VividElemen
   #onTransitionEnd;
 }
 __decorateClass([
-  vividElement.attr({ attribute: "dismiss-button-aria-label" })
+  fastElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Alert.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Alert.prototype, "removable");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
+  fastElement.attr({ mode: "fromView" })
 ], Alert.prototype, "placement");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Alert.prototype, "headline");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Alert.prototype, "text");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "fromView",
-    converter: vividElement.nullableNumberConverter
+    converter: fastElement.nullableNumberConverter
   })
 ], Alert.prototype, "timeoutms");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Alert.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Alert.prototype, "strategy");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Alert.prototype, "open");
 
-const getClasses = ({ connotation }) => classNames.classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
-const getControlClasses = ({ open, placement, strategy }) => classNames.classNames(
+const getClasses = ({ connotation }) => fastWebUtilities.classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
+const getControlClasses = ({ open, placement, strategy }) => fastWebUtilities.classNames(
   "control",
   ["open", open],
   [`placement-${placement}`, Boolean(placement)],
@@ -154,7 +156,7 @@ function renderIcon(c, x) {
   );
 }
 function renderDismissButton(buttonTag) {
-  return vividElement.html`
+  return fastElement.html`
 		<${buttonTag}
 			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -165,9 +167,9 @@ function renderDismissButton(buttonTag) {
 		</${buttonTag}>`;
 }
 const AlertTemplate = (context) => {
-  const elevationTag = context.tagFor(definition.Elevation);
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`
+  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}">
 			<div
@@ -179,12 +181,12 @@ const AlertTemplate = (context) => {
 			>
 				${(x) => renderIcon(context, x)}
 				<div class="alert-text">
-					${when.when((x) => x.headline, vividElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
-					${when.when((x) => x.text, vividElement.html`<div class="main-text">${(x) => x.text}</div>`)}
+					${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>
-				${when.when((x) => x.removable, renderDismissButton(buttonTag))}
+				${fastElement.when((x) => x.removable, renderDismissButton(buttonTag))}
 			</div>
 		</div>
 	</${elevationTag}>
@@ -195,13 +197,13 @@ const alertDefinition = vividElement.defineVividComponent(
   "alert",
   Alert,
   AlertTemplate,
-  [definition$2.iconDefinition, definition$1.buttonDefinition, definition.elevationDefinition],
+  [icon_definition.iconDefinition, button_definition.buttonDefinition, elevation_definition.elevationDefinition],
   {
     styles
   }
 );
 const registerAlert = vividElement.createRegisterFunction(alertDefinition);
 
-exports.Alert = Alert;
+exports.VwcAlertElement = Alert;
 exports.alertDefinition = alertDefinition;
 exports.registerAlert = registerAlert;

package/{shared/definition4.js → alert/definition.js}

@@ -1,13 +1,13 @@
-import { B as Button, b as buttonDefinition } from './definition11.js';
-import { E as Elevation, e as elevationDefinition } from './definition65.js';
-import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { i as iconDefinition } from './definition28.js';
-import { C as Connotation } from './enums.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from './affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { L as Localized } from './localized.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.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, when, html } from '@microsoft/fast-element';
+import { C as Connotation } from '../unbundled/enums.js';
+import { b 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}";
 
@@ -200,4 +200,4 @@ const alertDefinition = defineVividComponent(
 );
 const registerAlert = createRegisterFunction(alertDefinition);
 
-export { Alert as A, alertDefinition as a, registerAlert as r };
+export { Alert as VwcAlertElement, alertDefinition, registerAlert };

package/alert/index.cjs

@@ -1,5 +1,30 @@
-'use strict';
-
-const definition = require('../shared/definition4.cjs');
-
-definition.registerAlert();
+"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),e=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"),h=require("../bundled/class-names.cjs"),m=require("../bundled/when.cjs"),x='.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 g=Object.defineProperty,r=(o,t,i,n)=>{for(var s=void 0,d=o.length-1,v;d>=0;d--)(v=o[d])&&(s=v(t,i,s)||s);return s&&g(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(e.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.#o=()=>{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.#e(),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=this.shadowRoot.querySelector(".control"),this.controlEl&&this.controlEl.addEventListener("transitionend",this.#o),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this.controlEl&&this.controlEl.removeEventListener("transitionend",this.#o)}get conditionedIcon(){return this.icon||this.connotation&&_[this.connotation]}#e(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#o}r([e.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([e.attr({mode:"boolean"})],a.prototype,"removable");r([e.attr({mode:"fromView"})],a.prototype,"placement");r([e.attr],a.prototype,"headline");r([e.attr],a.prototype,"text");r([e.attr({mode:"fromView",converter:e.nullableNumberConverter})],a.prototype,"timeoutms");r([e.attr],a.prototype,"connotation");r([e.attr],a.prototype,"strategy");r([e.attr({mode:"boolean"})],a.prototype,"open");const $=({connotation:o})=>h.classNames("base",[`connotation-${o}`,!!o]),C=({open:o,placement:t,strategy:i})=>h.classNames("control",["open",o],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(o,t){const i=c.affixIconTemplateFactory(o),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 k(o){return e.html`
+		<${o}
+			aria-label="${t=>t.dismissButtonAriaLabel||t.locale.alert.dismissButtonLabel}"
+			size="condensed"
+			type="button"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${t=>t.open=!1}">
+		</${o}>`}const z=o=>{const t=o.tagFor(u.Elevation),i=o.tagFor(p.Button);return e.html`
+	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div class="${C}">
+			<div
+				part="vvd-theme-alternate"
+				class="${$}"
+				role="alert"
+				aria-hidden="${n=>n.open?"false":"true"}"
+				${n=>n.open?"":"hidden"}
+			>
+				${n=>w(o,n)}
+				<div class="alert-text">
+					${m.when(n=>n.headline,e.html`<h2 class="headline">${n=>n.headline}</h2>`)}
+					${m.when(n=>n.text,e.html`<div class="main-text">${n=>n.text}</div>`)}
+					<slot name="main"></slot>
+				</div>
+				<slot class="action-items" name="action-items"></slot>
+				${m.when(n=>n.removable,k(i))}
+			</div>
+		</div>
+	</${t}>
+	`},A=e.defineVividComponent("alert",a,z,[f.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:x}),E=e.createRegisterFunction(A);E();

package/alert/index.js

@@ -1,3 +1,158 @@
-import { r as registerAlert } from '../shared/definition4.js';
-
-registerAlert();
+import { B as h, b as u } from "../bundled/definition3.js";
+import { E as f, e as b } from "../bundled/definition4.js";
+import { V as y, a as i, n as x, h as c, c as g, d as _ } from "../bundled/vivid-element.js";
+import { i as $ } from "../bundled/definition2.js";
+import { C as l } from "../bundled/enums.js";
+import { b as k, a as w, I as A, c as C } from "../bundled/affix.js";
+import { h as E } from "../bundled/index.js";
+import { L as z } from "../bundled/localized.js";
+import { c as d } from "../bundled/class-names.js";
+import { w as p } from "../bundled/when.js";
+const I = '.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 B = Object.defineProperty, r = (n, t, e, o) => {
+  for (var s = void 0, m = n.length - 1, v; m >= 0; m--)
+    (v = n[m]) && (s = v(t, e, s) || s);
+  return s && B(t, e, s), s;
+};
+const T = {
+  [l.Accent]: "megaphone-line",
+  [l.Information]: "info-line",
+  [l.Success]: "check-circle-line",
+  [l.Warning]: "warning-line",
+  [l.Announcement]: "sparkles-line",
+  [l.Alert]: "error-line"
+};
+class a extends k(z(y)) {
+  constructor() {
+    super(...arguments), this.dismissButtonAriaLabel = null, this.removable = !1, this.placement = "bottom", this.timeoutms = 0, this.open = !1, this.#o = (t) => {
+      this.open && this.removable && E(t) && (this.open = !1);
+    }, this.#n = () => {
+      this.open ? this.style.display = "contents" : this.style.display = "none";
+    };
+  }
+  // timeout to close the alert
+  #t;
+  openChanged(t, e) {
+    if (t !== void 0)
+      if (this.$emit(e ? "open" : "close"), this.#e(), e) {
+        this.style.display = "contents";
+        const o = this.shadowRoot.querySelector(
+          ".dismiss-button"
+        );
+        this.removable && o && o.focus();
+      } else
+        this.style.display = "none";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.#o), this.controlEl = this.shadowRoot.querySelector(
+      ".control"
+    ), this.controlEl && this.controlEl.addEventListener("transitionend", this.#n), this.#e();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#t && clearTimeout(this.#t), this.removeEventListener("keydown", this.#o), this.controlEl && this.controlEl.removeEventListener(
+      "transitionend",
+      this.#n
+    );
+  }
+  get conditionedIcon() {
+    return this.icon || this.connotation && T[this.connotation];
+  }
+  #e() {
+    this.#t && clearTimeout(this.#t), this.open && this.timeoutms > 0 && (this.#t = setTimeout(() => this.open = !1, this.timeoutms));
+  }
+  #o;
+  #n;
+}
+r([
+  i({ attribute: "dismiss-button-aria-label" })
+], a.prototype, "dismissButtonAriaLabel");
+r([
+  i({ mode: "boolean" })
+], a.prototype, "removable");
+r([
+  i({ mode: "fromView" })
+], a.prototype, "placement");
+r([
+  i
+], a.prototype, "headline");
+r([
+  i
+], a.prototype, "text");
+r([
+  i({
+    mode: "fromView",
+    converter: x
+  })
+], a.prototype, "timeoutms");
+r([
+  i
+], a.prototype, "connotation");
+r([
+  i
+], a.prototype, "strategy");
+r([
+  i({ mode: "boolean" })
+], a.prototype, "open");
+const L = ({ connotation: n }) => d("base", [`connotation-${n}`, !!n]), O = ({ open: n, placement: t, strategy: e }) => d(
+  "control",
+  ["open", n],
+  [`placement-${t}`, !!t],
+  [`strategy-${e}`, !!e]
+);
+function D(n, t) {
+  const e = w(n), o = t.conditionedIcon, s = !t.icon && t.connotation ? {
+    label: t.locale.connotationAnnoncement[`${t.connotation}Icon`],
+    announceOnUpdate: !0
+  } : void 0;
+  return e(
+    o,
+    A.Slot,
+    C.Hidden,
+    s
+  );
+}
+function N(n) {
+  return c`
+		<${n}
+			aria-label="${(t) => t.dismissButtonAriaLabel || t.locale.alert.dismissButtonLabel}"
+			size="condensed"
+			type="button"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(t) => t.open = !1}">
+		</${n}>`;
+}
+const S = (n) => {
+  const t = n.tagFor(f), e = n.tagFor(h);
+  return c`
+	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div class="${O}">
+			<div
+				part="vvd-theme-alternate"
+				class="${L}"
+				role="alert"
+				aria-hidden="${(o) => o.open ? "false" : "true"}"
+				${(o) => o.open ? "" : "hidden"}
+			>
+				${(o) => D(n, o)}
+				<div class="alert-text">
+					${p((o) => o.headline, c`<h2 class="headline">${(o) => o.headline}</h2>`)}
+					${p((o) => o.text, c`<div class="main-text">${(o) => o.text}</div>`)}
+					<slot name="main"></slot>
+				</div>
+				<slot class="action-items" name="action-items"></slot>
+				${p((o) => o.removable, N(e))}
+			</div>
+		</div>
+	</${t}>
+	`;
+}, F = _(
+  "alert",
+  a,
+  S,
+  [$, u, b],
+  {
+    styles: I
+  }
+), P = g(F);
+P();