@vonage/vivid 5.19.0 → 5.20.0

package/accordion/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition4.cjs");
+const require_definition = require("../unbundled/definition3.cjs");
 exports.AccordionExpandMode = require_definition.AccordionExpandMode;
 exports.VwcAccordionElement = require_definition.Accordion;
 exports.accordionDefinition = require_definition.accordionDefinition;

package/accordion/definition.js

@@ -1,2 +1,2 @@
-import { i as Accordion, n as accordionDefinition, r as registerAccordion, t as AccordionExpandMode } from "../unbundled/definition4.js";
+import { i as Accordion, n as accordionDefinition, r as registerAccordion, t as AccordionExpandMode } from "../unbundled/definition3.js";
 export { AccordionExpandMode, Accordion as VwcAccordionElement, accordionDefinition, registerAccordion };

package/accordion/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/key-codes.cjs`),a=require(`../bundled/numbers.cjs`),o=require(`../bundled/definition24.cjs`);var s=`.base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}`,c={single:`single`,multi:`multi`},l=class extends e.t{constructor(...e){super(...e),this.expandmode=c.single,this.activeItemIndex=0,this.change=()=>{this.$emit(`change`,this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof o.r&&(e.addEventListener(`change`,this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0||e===this.findExpandedItem()?e.expanded=!0:e.expanded=!1));let n=this.accordionIds[t];e.setAttribute(`id`,typeof n==`string`?n:`accordion-${t+1}`),e.addEventListener(`keydown`,this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute(`aria-disabled`,`true`))},this.removeItemListeners=e=>{e.forEach(e=>{e.removeEventListener(`change`,this.activeItemChange),e.removeEventListener(`keydown`,this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();let t=e.target;this.activeid=t.getAttribute(`id`),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute(`aria-disabled`,`true`),this.accordionItems.forEach(e=>{!e.hasAttribute(`disabled`)&&e.id!==this.activeid&&e.removeAttribute(`aria-disabled`)})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case i.i:e.preventDefault(),this.adjust(e.target,-1);break;case i.t:e.preventDefault(),this.adjust(e.target,1);break;case i.s:this.focusItem(0);break;case`End`:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute(`expanded`)===!0)return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute(`id`))}isSingleExpandMode(){return this.expandmode!==c.multi}adjust(e,t){this.focusItem(a.r(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){let t=this.accordionItems[e];t instanceof o.r&&t.expandbutton.focus()}closeAll(){this.expandmode===c.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}};n.t([e.u({attribute:`expand-mode`})],l.prototype,`expandmode`,void 0),n.t([e.D],l.prototype,`accordionItems`,void 0);var u=e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/key-codes.cjs`),a=require(`../bundled/numbers.cjs`),o=require(`../bundled/definition24.cjs`);var s=`.base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}`,c={single:`single`,multi:`multi`},l=class extends e.t{constructor(...e){super(...e),this.expandmode=c.single,this.activeItemIndex=0,this.change=()=>{this.$emit(`change`,this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof o.r&&(e.addEventListener(`change`,this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0||e===this.findExpandedItem()?e.expanded=!0:e.expanded=!1));let n=this.accordionIds[t];e.setAttribute(`id`,typeof n==`string`?n:`accordion-${t+1}`),e.addEventListener(`keydown`,this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute(`aria-disabled`,`true`))},this.removeItemListeners=e=>{e.forEach(e=>{e.removeEventListener(`change`,this.activeItemChange),e.removeEventListener(`keydown`,this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();let t=e.target;this.activeid=t.getAttribute(`id`),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute(`aria-disabled`,`true`),this.accordionItems.forEach(e=>{!e.hasAttribute(`disabled`)&&e.id!==this.activeid&&e.removeAttribute(`aria-disabled`)})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case i.i:e.preventDefault(),this.adjust(e.target,-1);break;case i.t:e.preventDefault(),this.adjust(e.target,1);break;case i.s:this.focusItem(0);break;case`End`:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute(`expanded`)===!0)return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute(`id`))}isSingleExpandMode(){return this.expandmode!==c.multi}adjust(e,t){this.focusItem(a.r(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){let t=this.accordionItems[e];t instanceof o.r&&t.expandbutton.focus()}closeAll(){this.expandmode===c.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}};n.t([e.m({attribute:`expand-mode`})],l.prototype,`expandmode`,void 0),n.t([e.A],l.prototype,`accordionItems`,void 0);var u=e.p`
 	<div class="${e=>r.t(`base`)}">
 		<slot ${t.t({property:`accordionItems`,filter:t.r()})}></slot>
 	</div>
-`,d=e.s(`accordion`,l,u,[o.t],{styles:s});e.c(d)();
+`,d=e.u(`accordion`,l,u,[o.t],{styles:s});e.d(d)();

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { D as e, c as t, f as n, s as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
 import { r as o, t as s } from "../bundled/slotted.js";
 import { t as c } from "../bundled/decorate.js";
 import { t as l } from "../bundled/class-names.js";
@@ -83,7 +83,7 @@ var g = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotte
 };
 //#endregion
 //#region src/lib/accordion/index.ts
-c([a({ attribute: "expand-mode" })], v.prototype, "expandmode", void 0), c([e], v.prototype, "accordionItems", void 0), t(r("accordion", v, n`
+c([n({ attribute: "expand-mode" })], v.prototype, "expandmode", void 0), c([e], v.prototype, "accordionItems", void 0), t(a("accordion", v, r`
 	<div class="${(e) => l("base")}">
 		<slot ${s({
 	property: "accordionItems",

package/accordion-item/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition3.cjs");
+const require_definition = require("../unbundled/definition2.cjs");
 exports.VwcAccordionItemElement = require_definition.AccordionItem;
 exports.accordionItemDefinition = require_definition.accordionItemDefinition;
 exports.registerAccordionItem = require_definition.registerAccordionItem;

package/accordion-item/definition.js

@@ -1,2 +1,2 @@
-import { n as registerAccordionItem, r as AccordionItem, t as accordionItemDefinition } from "../unbundled/definition3.js";
+import { n as registerAccordionItem, r as AccordionItem, t as accordionItemDefinition } from "../unbundled/definition2.js";
 export { AccordionItem as VwcAccordionItemElement, accordionItemDefinition, registerAccordionItem };

package/action-group/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition5.cjs");
+const require_definition = require("../unbundled/definition4.cjs");
 exports.VwcActionGroupElement = require_definition.ActionGroup;
 exports.actionGroupDefinition = require_definition.actionGroupDefinition;
 exports.registerActionGroup = require_definition.registerActionGroup;

package/action-group/definition.js

@@ -1,2 +1,2 @@
-import { n as registerActionGroup, r as ActionGroup, t as actionGroupDefinition } from "../unbundled/definition5.js";
+import { n as registerActionGroup, r as ActionGroup, t as actionGroupDefinition } from "../unbundled/definition4.js";
 export { ActionGroup as VwcActionGroupElement, actionGroupDefinition, registerActionGroup };

package/action-group/index.cjs

@@ -1,6 +1,6 @@
-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.u],a.prototype,`shape`,void 0),t.t([e.u],a.prototype,`appearance`,void 0),t.t([e.u({mode:`boolean`})],a.prototype,`tight`,void 0);var o=e.f`<div
+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.m],a.prototype,`shape`,void 0),t.t([e.m],a.prototype,`appearance`,void 0),t.t([e.m({mode:`boolean`})],a.prototype,`tight`,void 0);var o=e.p`<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>`,s=e.s(`action-group`,a,o,[],{styles:i});e.c(s)();
+</div>`,s=e.u(`action-group`,a,o,[],{styles:i});e.d(s)();

package/action-group/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n, t as r, u as i } from "../bundled/vivid-element.js";
+import { d as e, m as t, p as n, t as r, u 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";
@@ -10,7 +10,7 @@ var l = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd
 };
 //#endregion
 //#region src/lib/action-group/index.ts
-a([i], u.prototype, "shape", void 0), a([i], u.prototype, "appearance", void 0), a([i({ mode: "boolean" })], u.prototype, "tight", void 0), e(n("action-group", u, t`<div
+a([t], u.prototype, "shape", void 0), a([t], u.prototype, "appearance", void 0), a([t({ mode: "boolean" })], u.prototype, "tight", void 0), e(i("action-group", u, n`<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" })}
 >

package/alert/index.cjs

@@ -1,4 +1,4 @@
-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/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/definition6.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={[i.n.Accent]:`megaphone-line`,[i.n.Information]:`info-line`,[i.n.Success]:`check-circle-line`,[i.n.Warning]:`warning-line`,[i.n.Announcement]:`sparkles-line`,[i.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,this.#n=e=>{this.open&&this.removable&&d.t(e)&&(this.open=!1)},this.#r=()=>{this.open?this.style.display=`contents`:this.style.display=`none`}}#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;#r};a.t([t.u({attribute:`dismiss-button-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.u({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.u({mode:`fromView`})],m.prototype,`placement`,void 0),a.t([t.u],m.prototype,`headline`,void 0),a.t([t.u],m.prototype,`text`,void 0),a.t([t.u({mode:`fromView`,converter:t.d})],m.prototype,`timeoutms`,void 0),a.t([t.u],m.prototype,`connotation`,void 0),a.t([t.u],m.prototype,`strategy`,void 0),a.t([t.u({mode:`boolean`})],m.prototype,`open`,void 0);var h=({connotation:e})=>c.t(`base`,[`connotation-${e}`,!!e]),g=({open:e,placement:t,strategy:n})=>c.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.f`
+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/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/definition6.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={[i.n.Accent]:`megaphone-line`,[i.n.Information]:`info-line`,[i.n.Success]:`check-circle-line`,[i.n.Warning]:`warning-line`,[i.n.Announcement]:`sparkles-line`,[i.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,this.#n=e=>{this.open&&this.removable&&d.t(e)&&(this.open=!1)},this.#r=()=>{this.open?this.style.display=`contents`:this.style.display=`none`}}#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;#r};a.t([t.m({attribute:`dismiss-button-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.m({mode:`fromView`})],m.prototype,`placement`,void 0),a.t([t.m],m.prototype,`headline`,void 0),a.t([t.m],m.prototype,`text`,void 0),a.t([t.m({mode:`fromView`,converter:t.h})],m.prototype,`timeoutms`,void 0),a.t([t.m],m.prototype,`connotation`,void 0),a.t([t.m],m.prototype,`strategy`,void 0),a.t([t.m({mode:`boolean`})],m.prototype,`open`,void 0);var h=({connotation:e})=>c.t(`base`,[`connotation-${e}`,!!e]),g=({open:e,placement:t,strategy:n})=>c.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.p`
 		<${e}
 			aria-label="${e=>e.dismissButtonAriaLabel||e.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -6,7 +6,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			class="dismiss-button"
 			icon="close-line"
 			@click="${e=>e.open=!1}">
-		</${e}>`}var y=t.s(`alert`,m,e=>{let i=e.tagFor(u.r),a=e.tagFor(l.i);return t.f`
+		</${e}>`}var y=t.u(`alert`,m,e=>{let i=e.tagFor(u.r),a=e.tagFor(l.i);return t.p`
 	<${i} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div class="${g}" ${n.t(`_controlEl`)}>
 			<div
@@ -18,8 +18,8 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			>
 				${t=>_(e,t)}
 				<div class="alert-text">
-					${r.t(e=>e.headline,t.f`<h2 class="headline">${e=>e.headline}</h2>`)}
-					${r.t(e=>e.text,t.f`<div class="main-text">${e=>e.text}</div>`)}
+					${r.t(e=>e.headline,t.p`<h2 class="headline">${e=>e.headline}</h2>`)}
+					${r.t(e=>e.text,t.p`<div class="main-text">${e=>e.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
@@ -27,4 +27,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			</div>
 		</div>
 	</${i}>
-	`},[o.t,l.t,u.t],{styles:f});t.c(y)();
+	`},[o.t,l.t,u.t],{styles:f});t.d(y)();

package/alert/index.js

@@ -1,5 +1,5 @@
 import { t as e } from "../bundled/localized.js";
-import { c as t, d as n, f as r, s as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { d as t, h as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
 import { t as s } from "../bundled/ref.js";
 import { t as c } from "../bundled/when.js";
 import { n as l } from "../bundled/enums.js";
@@ -49,10 +49,10 @@ var S = ".control{z-index:10;inline-size:max-content;max-inline-size:var(--alert
 	#n;
 	#r;
 };
-u([o({ attribute: "dismiss-button-aria-label" })], w.prototype, "dismissButtonAriaLabel", void 0), u([o({ mode: "boolean" })], w.prototype, "removable", void 0), u([o({ mode: "fromView" })], w.prototype, "placement", void 0), u([o], w.prototype, "headline", void 0), u([o], w.prototype, "text", void 0), u([o({
+u([r({ attribute: "dismiss-button-aria-label" })], w.prototype, "dismissButtonAriaLabel", void 0), u([r({ mode: "boolean" })], w.prototype, "removable", void 0), u([r({ mode: "fromView" })], w.prototype, "placement", void 0), u([r], w.prototype, "headline", void 0), u([r], w.prototype, "text", void 0), u([r({
 	mode: "fromView",
 	converter: n
-})], w.prototype, "timeoutms", void 0), u([o], w.prototype, "connotation", void 0), u([o], w.prototype, "strategy", void 0), u([o({ mode: "boolean" })], w.prototype, "open", void 0);
+})], w.prototype, "timeoutms", void 0), u([r], w.prototype, "connotation", void 0), u([r], w.prototype, "strategy", void 0), u([r({ mode: "boolean" })], w.prototype, "open", void 0);
 //#endregion
 //#region src/lib/alert/alert.template.ts
 var T = ({ connotation: e }) => g("base", [`connotation-${e}`, !!e]), E = ({ open: e, placement: t, strategy: n }) => g("control", ["open", e], [`placement-${t}`, !!t], [`strategy-${n}`, !!n]);
@@ -64,7 +64,7 @@ function D(e, t) {
 	return n(r, p.Slot, m.Hidden, i);
 }
 function O(e) {
-	return r`
+	return i`
 		<${e}
 			aria-label="${(e) => e.dismissButtonAriaLabel || e.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -76,9 +76,9 @@ function O(e) {
 }
 //#endregion
 //#region src/lib/alert/index.ts
-t(i("alert", w, (e) => {
+t(o("alert", w, (e) => {
 	let t = e.tagFor(y), n = e.tagFor(_);
-	return r`
+	return i`
 	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div class="${E}" ${s("_controlEl")}>
 			<div
@@ -90,8 +90,8 @@ t(i("alert", w, (e) => {
 			>
 				${(t) => D(e, t)}
 				<div class="alert-text">
-					${c((e) => e.headline, r`<h2 class="headline">${(e) => e.headline}</h2>`)}
-					${c((e) => e.text, r`<div class="main-text">${(e) => e.text}</div>`)}
+					${c((e) => e.headline, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
+					${c((e) => e.text, i`<div class="main-text">${(e) => e.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>

package/audio-player/index.cjs

@@ -1,10 +1,10 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/playbackRates.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition20.cjs`),d=require(`../bundled/definition21.cjs`);var f=`:host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:"slider""controls"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:"slider slider""controls playback"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}`,p={FORWARD:1,BACKWARD:-1};function m(e){if(!e||Number.isNaN(e))return`0:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return t+`:`+(n<10?`0`+n:n)}var h=!0,g=!1,_={toView(e){return e},fromView(e){return Object.values(i.r).includes(e)?e:void 0}},v=class extends e.t(t.t){srcChanged(){this.src===void 0?this.setSrc(``):this.setSrc(this.src)}revokeSrc(){let e=this.getCurrentSrc();e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#i.currentSrc||this.#i.src||``}canPlayType(e){return this.#i.canPlayType(e)!==``}setSrc(e,t){let n=this.getCurrentSrc();this.revokeSrc(),this.#e=void 0,this.#t&&=(this.#t.abort(),void 0);let r=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(n&&this.#i.removeAttribute(`src`),r||e)try{this.#i.src=r}catch(t){console.log(`Falling back to original URL due to error:`,t),this.#i.src=e}}get playbackRate(){return t.E.track(this,`playbackRate`),this.#i.playbackRate}set playbackRate(e){this.#i.playbackRate=e,t.E.notify(this,`playbackRate`)}get paused(){return t.E.track(this,`paused`),this.#i.paused}set paused(e){}#e;#t;async#n(){if(this.#e||!this.src)return;this.#t=new AbortController;let e=this.#t.signal;try{let n=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,n);let r=await n.arrayBuffer(),i=new window.AudioContext,a=await i.decodeAudioData(r);i.close(),this.#e=a,t.E.notify(this,`duration`)}catch(e){e instanceof Error&&e.name!==`AbortError`&&console.error(`Error loading audio:`,e)}finally{this.#t=void 0}}get duration(){t.E.track(this,`duration`);let e=this.#i.duration;return Number.isFinite(e)&&e>0?e:this.#e&&this.#e.duration>0?this.#e.duration:e}set duration(e){}get currentTime(){return t.E.track(this,`currentTime`),this.#i.currentTime}set currentTime(e){this.#i.currentTime=e}get#r(){return this.shadowRoot.querySelector(`.slider`)}#i;#a;constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#i=new Audio,this.#a=!1,this.durationFallback=!1,this.#o=()=>{this.#r?.isDragging||this.$emit(`play`,void 0,{bubbles:!1})},this.#s=()=>{this.#r?.isDragging||this.$emit(`pause`,void 0,{bubbles:!1})},this.#l=e=>{if(e===this.paused){this.#m();return}this.paused?(this.#u(),this.#i.play()):this.#i.pause(),this.#m()},this.#u=()=>{t.E.notify(this,`currentTime`);let e=this.duration,n=this.currentTime,r=Number.isFinite(e)&&e>0&&Number.isFinite(n)&&n>=0,i=r?n/e*100:0;this.#r&&(this.#a=!0,this.#r.value=i.toString(),this.#a=!1),r&&i===100&&this.pause()},this.#d=()=>{t.E.notify(this,`duration`),(!Number.isFinite(this.#i.duration)||this.#i.duration<=0)&&this.durationFallback&&this.#n()},this.#p=()=>{!this.paused&&this.#r.isDragging&&(this.pause(),this.#f=window.setInterval(()=>{(!this.#r.isDragging||!this.isConnected)&&(clearInterval(this.#f),this.isConnected&&this.play())},0)),!this.#a&&this.#i&&(this.currentTime=this.duration*Number(this.#r.value)/100)},this.#m=()=>{t.E.notify(this,`paused`)}}connectedCallback(){super.connectedCallback(),this.#i.addEventListener(`timeupdate`,this.#u),this.#i.addEventListener(`loadedmetadata`,this.#d),this.#i.addEventListener(`durationchange`,this.#d),this.#i.addEventListener(`play`,this.#o),this.#i.addEventListener(`pause`,this.#s),this.#c(),this.#m(),this.#u()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#i.removeEventListener(`timeupdate`,this.#u),this.#i.removeEventListener(`loadedmetadata`,this.#d),this.#i.removeEventListener(`durationchange`,this.#d),this.#i.removeEventListener(`play`,this.#o),this.#i.removeEventListener(`pause`,this.#s)}play(){this.#l(g)}pause(){this.#l(h)}#o;#s;#c(e=!0){let t=e?`addEventListener`:`removeEventListener`;this.#r&&this.#r[t](`change`,this.#p)}#l;#u;#d;#f;#p;#m;skip(e){let t=this.currentTime+parseInt(this.skipBy)*e;this.currentTime=Math.max(0,Math.min(this.duration,t))}};a.t([t.u({attribute:`play-button-aria-label`})],v.prototype,`playButtonAriaLabel`,void 0),a.t([t.u({attribute:`pause-button-aria-label`})],v.prototype,`pauseButtonAriaLabel`,void 0),a.t([t.u({attribute:`slider-aria-label`})],v.prototype,`sliderAriaLabel`,void 0),a.t([t.u({attribute:`skip-forward-aria-label`})],v.prototype,`skipForwardButtonAriaLabel`,void 0),a.t([t.u({attribute:`skip-backward-aria-label`})],v.prototype,`skipBackwardButtonAriaLabel`,void 0),a.t([t.u],v.prototype,`connotation`,void 0),a.t([t.u],v.prototype,`src`,void 0),a.t([t.u({mode:`boolean`})],v.prototype,`disabled`,void 0),a.t([t.u({mode:`boolean`})],v.prototype,`notime`,void 0),a.t([t.u({attribute:`skip-by`,converter:_})],v.prototype,`skipBy`,void 0),a.t([t.u({attribute:`playback-rates`})],v.prototype,`playbackRates`,void 0),a.t([t.u({mode:`boolean`,attribute:`duration-fallback`})],v.prototype,`durationFallback`,void 0);var y=({notime:e,disabled:t,duration:n,skipBy:r,playbackRates:i})=>o.t([`disabled`,!!t||!n],[`two-lines`,!e&&(!!Number(r)||!!i)],[`playback`,!!i]),b=(e,{parent:t})=>e===t.playbackRate;function x(e){let n=e.tagFor(l.i);return t.f`<${n} class="pause" @click="${e=>e.paused?e.play():e.pause()}"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/playbackRates.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition20.cjs`),d=require(`../bundled/definition21.cjs`);var f=`:host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:"slider""controls"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:"slider slider""controls playback"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}`,p={FORWARD:1,BACKWARD:-1};function m(e){if(!e||Number.isNaN(e))return`0:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return t+`:`+(n<10?`0`+n:n)}var h=!0,g=!1,_={toView(e){return e},fromView(e){return Object.values(i.r).includes(e)?e:void 0}},v=class extends e.t(t.t){srcChanged(){this.src===void 0?this.setSrc(``):this.setSrc(this.src)}revokeSrc(){let e=this.getCurrentSrc();e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#i.currentSrc||this.#i.src||``}canPlayType(e){return this.#i.canPlayType(e)!==``}setSrc(e,t){let n=this.getCurrentSrc();this.revokeSrc(),this.#e=void 0,this.#t&&=(this.#t.abort(),void 0);let r=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(n&&this.#i.removeAttribute(`src`),r||e)try{this.#i.src=r}catch(t){console.log(`Falling back to original URL due to error:`,t),this.#i.src=e}}get playbackRate(){return t.k.track(this,`playbackRate`),this.#i.playbackRate}set playbackRate(e){this.#i.playbackRate=e,t.k.notify(this,`playbackRate`)}get paused(){return t.k.track(this,`paused`),this.#i.paused}set paused(e){}#e;#t;async#n(){if(this.#e||!this.src)return;this.#t=new AbortController;let e=this.#t.signal;try{let n=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,n);let r=await n.arrayBuffer(),i=new window.AudioContext,a=await i.decodeAudioData(r);i.close(),this.#e=a,t.k.notify(this,`duration`)}catch(e){e instanceof Error&&e.name!==`AbortError`&&console.error(`Error loading audio:`,e)}finally{this.#t=void 0}}get duration(){t.k.track(this,`duration`);let e=this.#i.duration;return Number.isFinite(e)&&e>0?e:this.#e&&this.#e.duration>0?this.#e.duration:e}set duration(e){}get currentTime(){return t.k.track(this,`currentTime`),this.#i.currentTime}set currentTime(e){this.#i.currentTime=e}get#r(){return this.shadowRoot.querySelector(`.slider`)}#i;#a;constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#i=new Audio,this.#a=!1,this.durationFallback=!1,this.#o=()=>{this.#r?.isDragging||this.$emit(`play`,void 0,{bubbles:!1})},this.#s=()=>{this.#r?.isDragging||this.$emit(`pause`,void 0,{bubbles:!1})},this.#l=e=>{if(e===this.paused){this.#m();return}this.paused?(this.#u(),this.#i.play()):this.#i.pause(),this.#m()},this.#u=()=>{t.k.notify(this,`currentTime`);let e=this.duration,n=this.currentTime,r=Number.isFinite(e)&&e>0&&Number.isFinite(n)&&n>=0,i=r?n/e*100:0;this.#r&&(this.#a=!0,this.#r.value=i.toString(),this.#a=!1),r&&i===100&&this.pause()},this.#d=()=>{t.k.notify(this,`duration`),(!Number.isFinite(this.#i.duration)||this.#i.duration<=0)&&this.durationFallback&&this.#n()},this.#p=()=>{!this.paused&&this.#r.isDragging&&(this.pause(),this.#f=window.setInterval(()=>{(!this.#r.isDragging||!this.isConnected)&&(clearInterval(this.#f),this.isConnected&&this.play())},0)),!this.#a&&this.#i&&(this.currentTime=this.duration*Number(this.#r.value)/100)},this.#m=()=>{t.k.notify(this,`paused`)}}connectedCallback(){super.connectedCallback(),this.#i.addEventListener(`timeupdate`,this.#u),this.#i.addEventListener(`loadedmetadata`,this.#d),this.#i.addEventListener(`durationchange`,this.#d),this.#i.addEventListener(`play`,this.#o),this.#i.addEventListener(`pause`,this.#s),this.#c(),this.#m(),this.#u()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#i.removeEventListener(`timeupdate`,this.#u),this.#i.removeEventListener(`loadedmetadata`,this.#d),this.#i.removeEventListener(`durationchange`,this.#d),this.#i.removeEventListener(`play`,this.#o),this.#i.removeEventListener(`pause`,this.#s)}play(){this.#l(g)}pause(){this.#l(h)}#o;#s;#c(e=!0){let t=e?`addEventListener`:`removeEventListener`;this.#r&&this.#r[t](`change`,this.#p)}#l;#u;#d;#f;#p;#m;skip(e){let t=this.currentTime+parseInt(this.skipBy)*e;this.currentTime=Math.max(0,Math.min(this.duration,t))}};a.t([t.m({attribute:`play-button-aria-label`})],v.prototype,`playButtonAriaLabel`,void 0),a.t([t.m({attribute:`pause-button-aria-label`})],v.prototype,`pauseButtonAriaLabel`,void 0),a.t([t.m({attribute:`slider-aria-label`})],v.prototype,`sliderAriaLabel`,void 0),a.t([t.m({attribute:`skip-forward-aria-label`})],v.prototype,`skipForwardButtonAriaLabel`,void 0),a.t([t.m({attribute:`skip-backward-aria-label`})],v.prototype,`skipBackwardButtonAriaLabel`,void 0),a.t([t.m],v.prototype,`connotation`,void 0),a.t([t.m],v.prototype,`src`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`disabled`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`notime`,void 0),a.t([t.m({attribute:`skip-by`,converter:_})],v.prototype,`skipBy`,void 0),a.t([t.m({attribute:`playback-rates`})],v.prototype,`playbackRates`,void 0),a.t([t.m({mode:`boolean`,attribute:`duration-fallback`})],v.prototype,`durationFallback`,void 0);var y=({notime:e,disabled:t,duration:n,skipBy:r,playbackRates:i})=>o.t([`disabled`,!!t||!n],[`two-lines`,!e&&(!!Number(r)||!!i)],[`playback`,!!i]),b=(e,{parent:t})=>e===t.playbackRate;function x(e){let n=e.tagFor(l.i);return t.p`<${n} class="pause" @click="${e=>e.paused?e.play():e.pause()}"
 	icon="${e=>e.paused?`play-solid`:`pause-solid`}"
 	aria-label="${e=>e.paused?e.playButtonAriaLabel||e.locale.audioPlayer.playButtonLabel:e.pauseButtonAriaLabel||e.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
 	connotation="${e=>e.connotation}"
 	?disabled="${e=>e.disabled||!e.duration}"
-  ></${n}>`}function S(e){let n=e.tagFor(l.i);return t.f`
+  ></${n}>`}function S(e){let n=e.tagFor(l.i);return t.p`
 		<${n} class="skip backward"
 			@click="${e=>e.skip(p.BACKWARD)}"
 		icon="${e=>e.skipBy==i.r.Five?`5-sec-backward-line`:e.skipBy==i.r.Thirty?`30-sec-backward-line`:`10-sec-backward-line`}"
@@ -13,7 +13,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 		connotation="${e=>e.connotation}"
 		?disabled="${e=>e.disabled||!e.duration}"
 		></${n}>
-	`}function C(e){let n=e.tagFor(l.i);return t.f`
+	`}function C(e){let n=e.tagFor(l.i);return t.p`
 		<${n} class="skip forward"
 		@click="${e=>e.skip(p.FORWARD)}"
 		icon="${e=>e.skipBy==i.r.Five?`5-sec-forward-line`:e.skipBy==i.r.Thirty?`30-sec-forward-line`:`10-sec-forward-line`}"
@@ -22,7 +22,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 		connotation="${e=>e.connotation}"
 		?disabled="${e=>e.disabled||!e.duration}"
 		></${n}>
-	`}function w(e){let n=e.tagFor(s.r);return t.f`
+	`}function w(e){let n=e.tagFor(s.r);return t.p`
 	<${n}
 		class="slider"
 		aria-label="${e=>e.sliderAriaLabel||e.locale.audioPlayer.sliderLabel}"
@@ -31,15 +31,15 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 		connotation="${e=>e.connotation}"
 		?disabled="${e=>e.disabled||!e.duration}"
 		internal-part>
-	</${n}>`}function T(){return t.f` <div class="time-stamp">
+	</${n}>`}function T(){return t.p` <div class="time-stamp">
 		<span class="current-time"
 			>${e=>m(e.currentTime||0)}</span
 		>
-		${r.t(e=>e.duration&&e.duration!==1/0,t.f`
+		${r.t(e=>e.duration&&e.duration!==1/0,t.p`
 				<span>/</span>
 				<span class="total-time">${e=>m(e?.duration)}</span>
 			`)}
-	</div>`}function E(e,t){return t.parent.playbackRate=e,!0}var D=t.s(`audio-player`,v,e=>{let a=e.tagFor(d.r),o=e.tagFor(l.i),s=e.tagFor(u.i);return t.f` <div class="wrapper">
+	</div>`}function E(e,t){return t.parent.playbackRate=e,!0}var D=t.u(`audio-player`,v,e=>{let a=e.tagFor(d.r),o=e.tagFor(l.i),s=e.tagFor(u.i);return t.p` <div class="wrapper">
 		<div class="base ${y}">
 			<div class="controls">
 				${r.t(e=>e.skipBy&&e.skipBy!=i.r.Zero,S(e))}
@@ -48,7 +48,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				${r.t(e=>!e.notime,T())}
 			</div>
 			${w(e)}
-			${r.t(e=>!!e.playbackRates,t.f`
+			${r.t(e=>!!e.playbackRates,t.p`
 			<${a} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${o} id="playback-open-button"
 							  class="playback-button"
@@ -60,7 +60,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 							  ?disabled="${e=>e.disabled||!e.duration}"
 				></${o}>
 
-				${n.n(e=>c.t(e.playbackRates),t.f`<${s} @click="${E}"
+				${n.n(e=>c.t(e.playbackRates),t.p`<${s} @click="${E}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${e=>e}"
@@ -68,4 +68,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 																			 ?checked="${b}"></${s}>`)}
 			</${a}>`)}
 		</div>
-	</div>`},[l.t,s.n,d.t,u.t],{styles:f});t.c(D)();
+	</div>`},[l.t,s.n,d.t,u.t],{styles:f});t.d(D)();

package/audio-player/index.js

@@ -1,5 +1,5 @@
 import { t as e } from "../bundled/localized.js";
-import { E as t, c as n, f as r, s as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { d as t, k as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
 import { n as s } from "../bundled/repeat.js";
 import { t as c } from "../bundled/when.js";
 import { r as l } from "../bundled/enums.js";
@@ -52,13 +52,13 @@ var w = !0, T = !1, E = {
 		}
 	}
 	get playbackRate() {
-		return t.track(this, "playbackRate"), this.#i.playbackRate;
+		return n.track(this, "playbackRate"), this.#i.playbackRate;
 	}
 	set playbackRate(e) {
-		this.#i.playbackRate = e, t.notify(this, "playbackRate");
+		this.#i.playbackRate = e, n.notify(this, "playbackRate");
 	}
 	get paused() {
-		return t.track(this, "paused"), this.#i.paused;
+		return n.track(this, "paused"), this.#i.paused;
 	}
 	set paused(e) {}
 	#e;
@@ -68,10 +68,10 @@ var w = !0, T = !1, E = {
 		this.#t = new AbortController();
 		let e = this.#t.signal;
 		try {
-			let n = await (await fetch(this.src, { signal: e })).blob();
-			this.setSrc(this.src, n);
-			let r = await n.arrayBuffer(), i = new window.AudioContext(), a = await i.decodeAudioData(r);
-			i.close(), this.#e = a, t.notify(this, "duration");
+			let t = await (await fetch(this.src, { signal: e })).blob();
+			this.setSrc(this.src, t);
+			let r = await t.arrayBuffer(), i = new window.AudioContext(), a = await i.decodeAudioData(r);
+			i.close(), this.#e = a, n.notify(this, "duration");
 		} catch (e) {
 			/* v8 ignore else -- @preserve */
 			e instanceof Error && e.name !== "AbortError" && console.error("Error loading audio:", e);
@@ -80,13 +80,13 @@ var w = !0, T = !1, E = {
 		}
 	}
 	get duration() {
-		t.track(this, "duration");
+		n.track(this, "duration");
 		let e = this.#i.duration;
 		return Number.isFinite(e) && e > 0 ? e : this.#e && this.#e.duration > 0 ? this.#e.duration : e;
 	}
 	set duration(e) {}
 	get currentTime() {
-		return t.track(this, "currentTime"), this.#i.currentTime;
+		return n.track(this, "currentTime"), this.#i.currentTime;
 	}
 	set currentTime(e) {
 		this.#i.currentTime = e;
@@ -108,18 +108,18 @@ var w = !0, T = !1, E = {
 			}
 			this.paused ? (this.#u(), this.#i.play()) : this.#i.pause(), this.#m();
 		}, this.#u = () => {
-			t.notify(this, "currentTime");
-			let e = this.duration, n = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(n) && n >= 0, i = r ? n / e * 100 : 0;
+			n.notify(this, "currentTime");
+			let e = this.duration, t = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, i = r ? t / e * 100 : 0;
 			this.#r && (this.#a = !0, this.#r.value = i.toString(), this.#a = !1), r && i === 100 && this.pause();
 		}, this.#d = () => {
-			t.notify(this, "duration"), (!Number.isFinite(this.#i.duration) || this.#i.duration <= 0) && this.durationFallback && this.#n();
+			n.notify(this, "duration"), (!Number.isFinite(this.#i.duration) || this.#i.duration <= 0) && this.durationFallback && this.#n();
 		}, this.#p = () => {
 			!this.paused && this.#r.isDragging && (this.pause(), this.#f = window.setInterval(() => {
 				/* v8 ignore else -- @preserve */
 				(!this.#r.isDragging || !this.isConnected) && (clearInterval(this.#f), this.isConnected && this.play());
 			}, 0)), !this.#a && this.#i && (this.currentTime = this.duration * Number(this.#r.value) / 100);
 		}, this.#m = () => {
-			t.notify(this, "paused");
+			n.notify(this, "paused");
 		};
 	}
 	connectedCallback() {
@@ -152,10 +152,10 @@ var w = !0, T = !1, E = {
 		this.currentTime = Math.max(0, Math.min(this.duration, t));
 	}
 };
-u([o({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabel", void 0), u([o({ attribute: "pause-button-aria-label" })], D.prototype, "pauseButtonAriaLabel", void 0), u([o({ attribute: "slider-aria-label" })], D.prototype, "sliderAriaLabel", void 0), u([o({ attribute: "skip-forward-aria-label" })], D.prototype, "skipForwardButtonAriaLabel", void 0), u([o({ attribute: "skip-backward-aria-label" })], D.prototype, "skipBackwardButtonAriaLabel", void 0), u([o], D.prototype, "connotation", void 0), u([o], D.prototype, "src", void 0), u([o({ mode: "boolean" })], D.prototype, "disabled", void 0), u([o({ mode: "boolean" })], D.prototype, "notime", void 0), u([o({
+u([r({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabel", void 0), u([r({ attribute: "pause-button-aria-label" })], D.prototype, "pauseButtonAriaLabel", void 0), u([r({ attribute: "slider-aria-label" })], D.prototype, "sliderAriaLabel", void 0), u([r({ attribute: "skip-forward-aria-label" })], D.prototype, "skipForwardButtonAriaLabel", void 0), u([r({ attribute: "skip-backward-aria-label" })], D.prototype, "skipBackwardButtonAriaLabel", void 0), u([r], D.prototype, "connotation", void 0), u([r], D.prototype, "src", void 0), u([r({ mode: "boolean" })], D.prototype, "disabled", void 0), u([r({ mode: "boolean" })], D.prototype, "notime", void 0), u([r({
 	attribute: "skip-by",
 	converter: E
-})], D.prototype, "skipBy", void 0), u([o({ attribute: "playback-rates" })], D.prototype, "playbackRates", void 0), u([o({
+})], D.prototype, "skipBy", void 0), u([r({ attribute: "playback-rates" })], D.prototype, "playbackRates", void 0), u([r({
 	mode: "boolean",
 	attribute: "duration-fallback"
 })], D.prototype, "durationFallback", void 0);
@@ -164,7 +164,7 @@ u([o({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabe
 var O = ({ notime: e, disabled: t, duration: n, skipBy: r, playbackRates: i }) => d(["disabled", !!t || !n], ["two-lines", !e && (!!Number(r) || !!i)], ["playback", !!i]), k = (e, { parent: t }) => e === t.playbackRate;
 function A(e) {
 	let t = e.tagFor(h);
-	return r`<${t} class="pause" @click="${(e) => e.paused ? e.play() : e.pause()}"
+	return i`<${t} class="pause" @click="${(e) => e.paused ? e.play() : e.pause()}"
 	icon="${(e) => e.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(e) => e.paused ? e.playButtonAriaLabel || e.locale.audioPlayer.playButtonLabel : e.pauseButtonAriaLabel || e.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
@@ -174,7 +174,7 @@ function A(e) {
 }
 function j(e) {
 	let t = e.tagFor(h);
-	return r`
+	return i`
 		<${t} class="skip backward"
 			@click="${(e) => e.skip(S.BACKWARD)}"
 		icon="${(e) => e.skipBy == l.Five ? "5-sec-backward-line" : e.skipBy == l.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
@@ -187,7 +187,7 @@ function j(e) {
 }
 function M(e) {
 	let t = e.tagFor(h);
-	return r`
+	return i`
 		<${t} class="skip forward"
 		@click="${(e) => e.skip(S.FORWARD)}"
 		icon="${(e) => e.skipBy == l.Five ? "5-sec-forward-line" : e.skipBy == l.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
@@ -200,7 +200,7 @@ function M(e) {
 }
 function N(e) {
 	let t = e.tagFor(p);
-	return r`
+	return i`
 	<${t}
 		class="slider"
 		aria-label="${(e) => e.sliderAriaLabel || e.locale.audioPlayer.sliderLabel}"
@@ -212,11 +212,11 @@ function N(e) {
 	</${t}>`;
 }
 function P() {
-	return r` <div class="time-stamp">
+	return i` <div class="time-stamp">
 		<span class="current-time"
 			>${(e) => C(e.currentTime || 0)}</span
 		>
-		${c((e) => e.duration && e.duration !== Infinity, r`
+		${c((e) => e.duration && e.duration !== Infinity, i`
 				<span>/</span>
 				<span class="total-time">${(e) => C(e?.duration)}</span>
 			`)}
@@ -227,9 +227,9 @@ function F(e, t) {
 }
 //#endregion
 //#region src/lib/audio-player/index.ts
-n(i("audio-player", D, (e) => {
-	let t = e.tagFor(y), n = e.tagFor(h), i = e.tagFor(_);
-	return r` <div class="wrapper">
+t(o("audio-player", D, (e) => {
+	let t = e.tagFor(y), n = e.tagFor(h), r = e.tagFor(_);
+	return i` <div class="wrapper">
 		<div class="base ${O}">
 			<div class="controls">
 				${c((e) => e.skipBy && e.skipBy != l.Zero, j(e))}
@@ -238,7 +238,7 @@ n(i("audio-player", D, (e) => {
 				${c((e) => !e.notime, P())}
 			</div>
 			${N(e)}
-			${c((e) => !!e.playbackRates, r`
+			${c((e) => !!e.playbackRates, i`
 			<${t} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${n} id="playback-open-button"
 							  class="playback-button"
@@ -250,12 +250,12 @@ n(i("audio-player", D, (e) => {
 							  ?disabled="${(e) => e.disabled || !e.duration}"
 				></${n}>
 
-				${s((e) => m(e.playbackRates), r`<${i} @click="${F}"
+				${s((e) => m(e.playbackRates), i`<${r} @click="${F}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(e) => e}"
 																			 check-appearance="tick-only"
-																			 ?checked="${k}"></${i}>`)}
+																			 ?checked="${k}"></${r}>`)}
 			</${t}>`)}
 		</div>
 	</div>`;

package/avatar/index.cjs

@@ -1,18 +1,18 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.u],c.prototype,`connotation`,void 0),n.t([e.u],c.prototype,`shape`,void 0),n.t([e.u],c.prototype,`appearance`,void 0),n.t([e.u],c.prototype,`size`,void 0),n.t([e.u],c.prototype,`icon`,void 0),n.t([e.u],c.prototype,`initials`,void 0),n.t([e.u({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=({appearance:e,connotation:t,shape:n,size:r})=>i.t(`base`,[`connotation-${t}`,!!t],[`appearance-${e}`,!!e],[`shape-${n}`,!!n],[`size-${r}`,!!r]);function u(t){return e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m],c.prototype,`shape`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`size`,void 0),n.t([e.m],c.prototype,`icon`,void 0),n.t([e.m],c.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=({appearance:e,connotation:t,shape:n,size:r})=>i.t(`base`,[`connotation-${t}`,!!t],[`appearance-${e}`,!!e],[`shape-${n}`,!!n],[`size-${r}`,!!r]);function u(t){return e.p`
 		<${t} name="${e=>e.icon?`${e.icon}`:`user-line`}"></${t}>
-	`}function d(){return e.f`
+	`}function d(){return e.p`
 		<span class="initials">${({initials:e})=>e.substring(0,2)}</span>
-	`}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.f`<button
+	`}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.p`<button
 			type="button"
 			class="${l}"
 			${a.n()}
 		>
 			${n}
-		</button>`:e.f`<span class="${l}">${n}</span>`}var p=e.s(`avatar`,c,n=>{let i=n.tagFor(r.r);return e.f`
-		${n=>f(n,e.f`<slot name="graphic">
+		</button>`:e.p`<span class="${l}">${n}</span>`}var p=e.u(`avatar`,c,n=>{let i=n.tagFor(r.r);return e.p`
+		${n=>f(n,e.p`<slot name="graphic">
 					${t.t(e=>e.initials,d())}
-					${t.t(e=>!e.initials,e.f`<span class="icon"
+					${t.t(e=>!e.initials,e.p`<span class="icon"
 							><slot name="icon">${u(i)}</slot></span
 						>`)}</slot
 				>`)}
-	`},[r.t],{styles:s});e.c(p)();
+	`},[r.t],{styles:s});e.d(p)();

package/avatar/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n, t as r, u as i } from "../bundled/vivid-element.js";
+import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
 import { t as o } from "../bundled/decorate.js";
 import { r as s, t as c } from "../bundled/definition2.js";
@@ -11,7 +11,7 @@ var f = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-p
 		super(...e), this.clickable = !1;
 	}
 };
-o([i], p.prototype, "connotation", void 0), o([i], p.prototype, "shape", void 0), o([i], p.prototype, "appearance", void 0), o([i], p.prototype, "size", void 0), o([i], p.prototype, "icon", void 0), o([i], p.prototype, "initials", void 0), o([i({
+o([t], p.prototype, "connotation", void 0), o([t], p.prototype, "shape", void 0), o([t], p.prototype, "appearance", void 0), o([t], p.prototype, "size", void 0), o([t], p.prototype, "icon", void 0), o([t], p.prototype, "initials", void 0), o([t({
 	mode: "boolean",
 	attribute: "clickable"
 })], p.prototype, "clickable", void 0);
@@ -19,33 +19,33 @@ o([i], p.prototype, "connotation", void 0), o([i], p.prototype, "shape", void 0)
 //#region src/lib/avatar/avatar.template.ts
 var m = ({ appearance: e, connotation: t, shape: n, size: r }) => l("base", [`connotation-${t}`, !!t], [`appearance-${e}`, !!e], [`shape-${n}`, !!n], [`size-${r}`, !!r]);
 function h(e) {
-	return t`
+	return n`
 		<${e} name="${(e) => e.icon ? `${e.icon}` : "user-line"}"></${e}>
 	`;
 }
 function g() {
-	return t`
+	return n`
 		<span class="initials">${({ initials: e }) => e.substring(0, 2)}</span>
 	`;
 }
-function _(e, n) {
-	return e.href ? e._renderLinkElement(n, m) : e.clickable ? t`<button
+function _(e, t) {
+	return e.href ? e._renderLinkElement(t, m) : e.clickable ? n`<button
 			type="button"
 			class="${m}"
 			${u()}
 		>
-			${n}
-		</button>` : t`<span class="${m}">${n}</span>`;
+			${t}
+		</button>` : n`<span class="${m}">${t}</span>`;
 }
 //#endregion
 //#region src/lib/avatar/index.ts
-e(n("avatar", p, (e) => {
-	let n = e.tagFor(s);
-	return t`
-		${(e) => _(e, t`<slot name="graphic">
+e(i("avatar", p, (e) => {
+	let t = e.tagFor(s);
+	return n`
+		${(e) => _(e, n`<slot name="graphic">
 					${a((e) => e.initials, g())}
-					${a((e) => !e.initials, t`<span class="icon"
-							><slot name="icon">${h(n)}</slot></span
+					${a((e) => !e.initials, n`<span class="icon"
+							><slot name="icon">${h(t)}</slot></span
 						>`)}</slot
 				>`)}
 	`;