@vonage/vivid 5.17.0 → 5.19.0

package/calendar-event/index.js

@@ -1,11 +1,11 @@
-import { d as e, o as t, s as n } from "../bundled/vivid-element.js";
+import { c as e, f as t, s as n } from "../bundled/vivid-element.js";
 import { t as r } from "../bundled/when.js";
-import { n as i } from "../bundled/delegates-aria.js";
-import { t as a } from "../bundled/class-names.js";
+import { t as i } from "../bundled/class-names.js";
+import { n as a } from "../bundled/delegates-aria.js";
 import { t as o } from "../bundled/calendar-event.js";
 //#endregion
 //#region src/lib/calendar-event/index.ts
-n(t("calendar-event", o, e` <div
+e(n("calendar-event", o, t` <div
 	style="${({ start: e, duration: t, overlapCount: n }) => {
 	let r = {
 		...n && { "--vvd-calendar-event--overlap-count": n },
@@ -14,12 +14,12 @@ n(t("calendar-event", o, e` <div
 	};
 	return Object.entries(r).map((e) => e.join(":")).join(";");
 }}"
-	class="${({ connotation: e, appearance: t }) => a("base", [`connotation-${e}`, !!e], [`appearance-${t}`, !!t])}"
+	class="${({ connotation: e, appearance: t }) => i("base", [`connotation-${e}`, !!e], [`appearance-${t}`, !!t])}"
 	tabindex="0"
-	${i({ role: "button" })}
+	${a({ role: "button" })}
 >
-	${r((e) => e.heading, e`<h2><strong>${(e) => e.heading}</strong></h2>`)}
-	${r((e) => e.description, e`<p>${(e) => e.description}</p>`)}
+	${r((e) => e.heading, t`<h2><strong>${(e) => e.heading}</strong></h2>`)}
+	${r((e) => e.description, t`<p>${(e) => e.description}</p>`)}
 </div>`, [], {
 	styles: ":host{display:contents}.base.connotation-accent{--_connotation-color-primary:var(--vvd-calendar-event-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-calendar-event-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-calendar-event-accent-soft,var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary:var(--vvd-calendar-event-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-calendar-event-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-soft:var(--vvd-calendar-event-cta-soft,var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary:var(--vvd-calendar-event-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-calendar-event-success-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-success-contrast,var(--vvd-color-success-800));--_connotation-color-soft:var(--vvd-calendar-event-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-calendar-event-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-calendar-event-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-soft:var(--vvd-calendar-event-alert-soft,var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-calendar-event-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-calendar-event-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--vvd-calendar-event-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-soft:var(--vvd-calendar-event-warning-soft,var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-calendar-event-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-calendar-event-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-soft:var(--vvd-calendar-event-announcement-soft,var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-calendar-event-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-calendar-event-information-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-information-contrast,var(--vvd-color-information-800));--_connotation-color-soft:var(--vvd-calendar-event-information-soft,var(--vvd-color-information-100))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}",
 	shadowOptions: { delegatesFocus: !0 }

package/card/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition22.cjs");
-exports.VwcCardElement = require_definition$1.Card;
-exports.cardDefinition = require_definition$1.cardDefinition;
-exports.registerCard = require_definition$1.registerCard;
+const require_definition = require("../unbundled/definition22.cjs");
+exports.VwcCardElement = require_definition.Card;
+exports.cardDefinition = require_definition.cardDefinition;
+exports.registerCard = require_definition.registerCard;

package/card/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
 import { n as registerCard, r as Card, t as cardDefinition } from "../unbundled/definition22.js";
 export { Card as VwcCardElement, cardDefinition, registerCard };

package/card/index.cjs

@@ -1,37 +1,37 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/enums.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/linkable.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/definition7.cjs`);var u=`:host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}`,d=class extends s.t(e.t){constructor(...e){super(...e),this.clickableCard=!1}};a.t([e.l],d.prototype,`appearance`,void 0),a.t([e.l],d.prototype,`headline`,void 0),a.t([e.l],d.prototype,`subtitle`,void 0),a.t([e.l],d.prototype,`text`,void 0),a.t([e.l],d.prototype,`icon`,void 0),a.t([e.l],d.prototype,`elevation`,void 0),a.t([e.l({mode:`boolean`,attribute:`clickable-card`})],d.prototype,`clickableCard`,void 0),a.t([e.T],d.prototype,`bodySlottedContent`,void 0),a.t([e.T],d.prototype,`footerSlottedContent`,void 0),a.t([e.T],d.prototype,`graphicSlottedContent`,void 0),a.t([e.T],d.prototype,`hasMetaSlottedContent`,void 0);var f=e=>c.t(`base`,[`hide-footer`,!e.footerSlottedContent||!e.footerSlottedContent.length],[`hide-header`,v(e)],[`hide-body`,!e.bodySlottedContent||!e.bodySlottedContent.length]);function p(t){return e.d`
-		<${t} class="icon" inline name="${e=>e.icon}"></${t}>`}function m(){return e.d`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/enums.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`),c=require(`../bundled/linkable.cjs`),l=require(`../bundled/definition7.cjs`);var u=`:host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}`,d=class extends c.t(e.t){constructor(...e){super(...e),this.clickableCard=!1}};i.t([e.u],d.prototype,`appearance`,void 0),i.t([e.u],d.prototype,`headline`,void 0),i.t([e.u],d.prototype,`subtitle`,void 0),i.t([e.u],d.prototype,`text`,void 0),i.t([e.u],d.prototype,`icon`,void 0),i.t([e.u],d.prototype,`elevation`,void 0),i.t([e.u({mode:`boolean`,attribute:`clickable-card`})],d.prototype,`clickableCard`,void 0),i.t([e.D],d.prototype,`bodySlottedContent`,void 0),i.t([e.D],d.prototype,`footerSlottedContent`,void 0),i.t([e.D],d.prototype,`graphicSlottedContent`,void 0),i.t([e.D],d.prototype,`hasMetaSlottedContent`,void 0);var f=e=>o.t(`base`,[`hide-footer`,!e.footerSlottedContent||!e.footerSlottedContent.length],[`hide-header`,v(e)],[`hide-body`,!e.bodySlottedContent||!e.bodySlottedContent.length]);function p(t){return e.f`
+		<${t} class="icon" inline name="${e=>e.icon}"></${t}>`}function m(){return e.f`
 		<div class="header-headline" id="card-headline">${e=>e.headline}</div>
-	`}function h(){return e.d` <div class="header-subtitle">${e=>e.subtitle}</div> `}function g(){return e.d`
+	`}function h(){return e.f` <div class="header-subtitle">${e=>e.subtitle}</div> `}function g(){return e.f`
 		<div class="header-content">
 			${t.t(e=>e.headline,m())}
 			${t.t(e=>e.subtitle,h())}
 		</div>
-	`}function _(r){return e.d` <div class="header">
+	`}function _(r){return e.f` <div class="header">
 		<slot name="graphic" ${n.t(`graphicSlottedContent`)}
 			>${t.t(e=>e.icon,p(r))}</slot
 		>
 		${t.t(e=>e.headline||e.subtitle,g())}
-	</div>`}function v(e){return!e.headline&&!e.subtitle&&!e.icon&&(!e.graphicSlottedContent||!e.graphicSlottedContent.length)}function y(){return e.d` <slot name="meta" ${n.t(`metaSlottedContent`)}></slot> `}function b(){return e.d` <div class="text">${e=>e.text}</div> `}function x(t){return e.d`<button
+	</div>`}function v(e){return!e.headline&&!e.subtitle&&!e.icon&&(!e.graphicSlottedContent||!e.graphicSlottedContent.length)}function y(){return e.f` <slot name="meta" ${n.t(`metaSlottedContent`)}></slot> `}function b(){return e.f` <div class="text">${e=>e.text}</div> `}function x(t){return e.f`<button
 		class="${f}"
 		type="button"
-		${o.n()}
+		${s.n()}
 		aria-labelledby="${e=>e.headline?`card-headline`:null}"
 	>
 		${t}
-	</button>`}function S(t,n){return t.href?t._renderLinkElement(n,f):t.clickableCard?x(n):e.d`<div
+	</button>`}function S(t,n){return t.href?t._renderLinkElement(n,f):t.clickableCard?x(n):e.f`<div
 			class="${f}"
 			aria-labelledby="${e=>e.headline?`card-headline`:null}"
 		>
 			${n}
-		</div>`}function C(r){let a=r.tagFor(i.r);return e.d`
-		${r=>S(r,e.d`<div class="wrapper">
+		</div>`}function C(r){let i=r.tagFor(a.r);return e.f`
+		${r=>S(r,e.f`<div class="wrapper">
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>
 					<slot name="main">
 						<div class="main-content">
 							<div class="header-wrapper">
-								${_(a)} ${y()}
+								${_(i)} ${y()}
 							</div>
 							${t.t(e=>e.text,b())}
 							<div class="body-wrapper">
@@ -43,16 +43,16 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 						<slot name="footer" ${n.t(`footerSlottedContent`)}></slot>
 					</div>
 				</div> `)}
-	`}var w=e.o(`card`,d,n=>{let i=n.tagFor(l.r);return e.d`
-		${t.t(e=>e.appearance!==r.t.Ghost&&e.appearance!==r.t.Outlined,e.d`
+	`}var w=e.s(`card`,d,n=>{let i=n.tagFor(l.r);return e.f`
+		${t.t(e=>e.appearance!==r.t.Ghost&&e.appearance!==r.t.Outlined,e.f`
 			<${i} dp=${e=>e.elevation??`4`}>
 			  ${C(n)}
 			</${i}>
 		`)}
-		${t.t(e=>e.appearance===r.t.Outlined,e.d`
+		${t.t(e=>e.appearance===r.t.Outlined,e.f`
 			<${i} dp='0')}>
 			  ${C(n)}
 			</${i}>
 		`)}
-		${t.t(e=>e.appearance===r.t.Ghost,e.d` ${C(n)} `)}
-	`},[i.t,l.t],{styles:u});e.s(w)();
+		${t.t(e=>e.appearance===r.t.Ghost,e.f` ${C(n)} `)}
+	`},[a.t,l.t],{styles:u});e.c(w)();

package/card/index.js

@@ -1,40 +1,40 @@
-import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+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 { t as o } from "../bundled/when.js";
 import { t as s } from "../bundled/slotted.js";
 import { t as c } from "../bundled/enums.js";
-import { r as l, t as u } from "../bundled/definition2.js";
-import { t as d } from "../bundled/decorate.js";
-import { n as f } from "../bundled/delegates-aria.js";
-import { t as p } from "../bundled/linkable.js";
-import { t as m } from "../bundled/class-names.js";
+import { t as l } from "../bundled/decorate.js";
+import { r as u, t as d } from "../bundled/definition2.js";
+import { t as f } from "../bundled/class-names.js";
+import { n as p } from "../bundled/delegates-aria.js";
+import { t as m } from "../bundled/linkable.js";
 import { r as h, t as g } from "../bundled/definition7.js";
 //#region src/lib/card/card.scss?inline
-var _ = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}", v = class extends p(a) {
+var _ = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}", v = class extends m(i) {
 	constructor(...e) {
 		super(...e), this.clickableCard = !1;
 	}
 };
-d([n], v.prototype, "appearance", void 0), d([n], v.prototype, "headline", void 0), d([n], v.prototype, "subtitle", void 0), d([n], v.prototype, "text", void 0), d([n], v.prototype, "icon", void 0), d([n], v.prototype, "elevation", void 0), d([n({
+l([a], v.prototype, "appearance", void 0), l([a], v.prototype, "headline", void 0), l([a], v.prototype, "subtitle", void 0), l([a], v.prototype, "text", void 0), l([a], v.prototype, "icon", void 0), l([a], v.prototype, "elevation", void 0), l([a({
 	mode: "boolean",
 	attribute: "clickable-card"
-})], v.prototype, "clickableCard", void 0), d([e], v.prototype, "bodySlottedContent", void 0), d([e], v.prototype, "footerSlottedContent", void 0), d([e], v.prototype, "graphicSlottedContent", void 0), d([e], v.prototype, "hasMetaSlottedContent", void 0);
+})], v.prototype, "clickableCard", void 0), l([e], v.prototype, "bodySlottedContent", void 0), l([e], v.prototype, "footerSlottedContent", void 0), l([e], v.prototype, "graphicSlottedContent", void 0), l([e], v.prototype, "hasMetaSlottedContent", void 0);
 //#endregion
 //#region src/lib/card/card.template.ts
-var y = (e) => m("base", ["hide-footer", !e.footerSlottedContent || !e.footerSlottedContent.length], ["hide-header", T(e)], ["hide-body", !e.bodySlottedContent || !e.bodySlottedContent.length]);
+var y = (e) => f("base", ["hide-footer", !e.footerSlottedContent || !e.footerSlottedContent.length], ["hide-header", T(e)], ["hide-body", !e.bodySlottedContent || !e.bodySlottedContent.length]);
 function b(e) {
-	return t`
+	return n`
 		<${e} class="icon" inline name="${(e) => e.icon}"></${e}>`;
 }
 function x() {
-	return t`
+	return n`
 		<div class="header-headline" id="card-headline">${(e) => e.headline}</div>
 	`;
 }
 function S() {
-	return t` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
+	return n` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
 }
 function C() {
-	return t`
+	return n`
 		<div class="header-content">
 			${o((e) => e.headline, x())}
 			${o((e) => e.subtitle, S())}
@@ -42,7 +42,7 @@ function C() {
 	`;
 }
 function w(e) {
-	return t` <div class="header">
+	return n` <div class="header">
 		<slot name="graphic" ${s("graphicSlottedContent")}
 			>${o((e) => e.icon, b(e))}</slot
 		>
@@ -53,40 +53,40 @@ function T(e) {
 	return !e.headline && !e.subtitle && !e.icon && (!e.graphicSlottedContent || !e.graphicSlottedContent.length);
 }
 function E() {
-	return t` <slot name="meta" ${s("metaSlottedContent")}></slot> `;
+	return n` <slot name="meta" ${s("metaSlottedContent")}></slot> `;
 }
 function D() {
-	return t` <div class="text">${(e) => e.text}</div> `;
+	return n` <div class="text">${(e) => e.text}</div> `;
 }
 function O(e) {
-	return t`<button
+	return n`<button
 		class="${y}"
 		type="button"
-		${f()}
+		${p()}
 		aria-labelledby="${(e) => e.headline ? "card-headline" : null}"
 	>
 		${e}
 	</button>`;
 }
-function k(e, n) {
-	return e.href ? e._renderLinkElement(n, y) : e.clickableCard ? O(n) : t`<div
+function k(e, t) {
+	return e.href ? e._renderLinkElement(t, y) : e.clickableCard ? O(t) : n`<div
 			class="${y}"
 			aria-labelledby="${(e) => e.headline ? "card-headline" : null}"
 		>
-			${n}
+			${t}
 		</div>`;
 }
 function A(e) {
-	let n = e.tagFor(l);
-	return t`
-		${(e) => k(e, t`<div class="wrapper">
+	let t = e.tagFor(u);
+	return n`
+		${(e) => k(e, n`<div class="wrapper">
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>
 					<slot name="main">
 						<div class="main-content">
 							<div class="header-wrapper">
-								${w(n)} ${E()}
+								${w(t)} ${E()}
 							</div>
 							${o((e) => e.text, D())}
 							<div class="body-wrapper">
@@ -102,20 +102,20 @@ function A(e) {
 }
 //#endregion
 //#region src/lib/card/index.ts
-i(r("card", v, (e) => {
-	let n = e.tagFor(h);
-	return t`
-		${o((e) => e.appearance !== c.Ghost && e.appearance !== c.Outlined, t`
-			<${n} dp=${(e) => e.elevation ?? "4"}>
+t(r("card", v, (e) => {
+	let t = e.tagFor(h);
+	return n`
+		${o((e) => e.appearance !== c.Ghost && e.appearance !== c.Outlined, n`
+			<${t} dp=${(e) => e.elevation ?? "4"}>
 			  ${A(e)}
-			</${n}>
+			</${t}>
 		`)}
-		${o((e) => e.appearance === c.Outlined, t`
-			<${n} dp='0')}>
+		${o((e) => e.appearance === c.Outlined, n`
+			<${t} dp='0')}>
 			  ${A(e)}
-			</${n}>
+			</${t}>
 		`)}
-		${o((e) => e.appearance === c.Ghost, t` ${A(e)} `)}
+		${o((e) => e.appearance === c.Ghost, n` ${A(e)} `)}
 	`;
-}, [u, g], { styles: _ }))();
+}, [d, g], { styles: _ }))();
 //#endregion

package/checkbox/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition23.cjs");
-exports.VwcCheckboxElement = require_definition$1.Checkbox;
-exports.checkboxDefinition = require_definition$1.checkboxDefinition;
-exports.registerCheckbox = require_definition$1.registerCheckbox;
+const require_definition = require("../unbundled/definition23.cjs");
+exports.VwcCheckboxElement = require_definition.Checkbox;
+exports.checkboxDefinition = require_definition.checkboxDefinition;
+exports.registerCheckbox = require_definition.registerCheckbox;

package/checkbox/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
 import { n as registerCheckbox, r as Checkbox, t as checkboxDefinition } from "../unbundled/definition23.js";
 export { Checkbox as VwcCheckboxElement, checkboxDefinition, registerCheckbox };

package/checkbox/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition15.cjs`).n();
+require(`../bundled/definition15.cjs`).n();

package/checkbox/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/definition2.js";
 import { n as e } from "../bundled/definition15.js";
 //#region src/lib/checkbox/index.ts
 e();

package/color-picker/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition28.cjs");
-exports.VwcColorPickerElement = require_definition$1.ColorPicker;
-exports.colorPickerDefinition = require_definition$1.colorPickerDefinition;
-exports.registerColorPicker = require_definition$1.registerColorPicker;
+const require_definition = require("../unbundled/definition28.cjs");
+exports.VwcColorPickerElement = require_definition.ColorPicker;
+exports.colorPickerDefinition = require_definition.colorPickerDefinition;
+exports.registerColorPicker = require_definition.registerColorPicker;

package/color-picker/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
 import { n as registerColorPicker, r as ColorPicker, t as colorPickerDefinition } from "../unbundled/definition28.js";
 export { ColorPicker as VwcColorPickerElement, colorPickerDefinition, registerColorPicker };

package/color-picker/index.cjs

@@ -1,7 +1,7 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/slotted.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/with-success-text.cjs`),c=require(`../bundled/with-error-text.cjs`),l=require(`../bundled/with-contextual-help.cjs`),ee=require(`../bundled/trapped-focus.cjs`),u=require(`../bundled/delegates-aria.cjs`),d=require(`../bundled/class-names.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/definition9.cjs`),te=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/definition12.cjs`),_=require(`../bundled/base-color-picker.cjs`);var ne=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input: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));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`,v=(e,t=0,n=1)=>e>n?n:e<t?t:e,y=(e,t=0,n=10**t)=>Math.round(n*e)/n;360/(Math.PI*2);var re=e=>ce(b(e)),b=e=>(e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?y(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?y(parseInt(e.substring(6,8),16)/255,2):1}),ie=e=>se(oe(e)),ae=({h:e,s:t,v:n,a:r})=>{let i=(200-t)*n/100;return{h:y(e),s:y(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:y(i/2),a:y(r,2)}},x=e=>{let{h:t,s:n,l:r}=ae(e);return`hsl(${t}, ${n}%, ${r}%)`},oe=({h:e,s:t,v:n,a:r})=>{e=e/360*6,t/=100,n/=100;let i=Math.floor(e),a=n*(1-t),o=n*(1-(e-i)*t),s=n*(1-(1-e+i)*t),c=i%6;return{r:y([n,o,a,a,s,n][c]*255),g:y([s,n,n,o,a,a][c]*255),b:y([a,a,s,n,n,o][c]*255),a:y(r,2)}},S=e=>{let t=e.toString(16);return t.length<2?`0`+t:t},se=({r:e,g:t,b:n,a:r})=>{let i=r<1?S(y(r*255)):``;return`#`+S(e)+S(t)+S(n)+i},ce=({r:e,g:t,b:n,a:r})=>{let i=Math.max(e,t,n),a=i-Math.min(e,t,n),o=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:y(60*(o<0?o+6:o)),s:y(i?a/i*100:0),v:y(i/255*100),a:r}},C=(e,t)=>{if(e===t)return!0;for(let n in e)if(e[n]!==t[n])return!1;return!0},le=(e,t)=>e.toLowerCase()===t.toLowerCase()?!0:C(b(e),b(t)),w={},T=e=>{let t=w[e];return t||(t=document.createElement(`template`),t.innerHTML=e,w[e]=t),t},E=(e,t,n)=>{e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}))},D=!1,O=e=>`touches`in e,ue=e=>D&&!O(e)?!1:(D||=O(e),!0),k=(e,t)=>{let n=O(t)?t.touches[0]:t,r=e.el.getBoundingClientRect();E(e.el,`move`,e.getMove({x:v((n.pageX-(r.left+window.pageXOffset))/r.width),y:v((n.pageY-(r.top+window.pageYOffset))/r.height)}))},de=(e,t)=>{let n=t.keyCode;n>40||e.xy&&n<37||n<33||(t.preventDefault(),E(e.el,`move`,e.getMove({x:n===39?.01:n===37?-.01:n===34?.05:n===33?-.05:n===35?1:n===36?-1:0,y:n===40?.01:n===38?-.01:0},!0)))},A=class{constructor(e,t,n,r){let i=T(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);e.appendChild(i.content.cloneNode(!0));let a=e.querySelector(`[part=${t}]`);a.addEventListener(`mousedown`,this),a.addEventListener(`touchstart`,this),a.addEventListener(`keydown`,this),this.el=a,this.xy=r,this.nodes=[a.firstChild,a]}set dragging(e){let t=e?document.addEventListener:document.removeEventListener;t(D?`touchmove`:`mousemove`,this),t(D?`touchend`:`mouseup`,this)}handleEvent(e){switch(e.type){case`mousedown`:case`touchstart`:if(e.preventDefault(),!ue(e)||!D&&e.button!=0)return;this.el.focus(),k(this,e),this.dragging=!0;break;case`mousemove`:case`touchmove`:e.preventDefault(),k(this,e);break;case`mouseup`:case`touchend`:this.dragging=!1;break;case`keydown`:de(this,e);break}}style(e){e.forEach((e,t)=>{for(let n in e)this.nodes[t].style.setProperty(n,e[n])})}},fe=class extends A{constructor(e){super(e,`hue`,`aria-label="Hue" aria-valuemin="0" aria-valuemax="360"`,!1)}update({h:e}){this.h=e,this.style([{left:`${e/360*100}%`,color:x({h:e,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuenow`,`${y(e)}`)}getMove(e,t){return{h:t?v(this.h+e.x*360,0,360):360*e.x}}},pe=class extends A{constructor(e){super(e,`saturation`,`aria-label="Color"`,!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:x(e)},{"background-color":x({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuetext`,`Saturation ${y(e.s)}%, Brightness ${y(e.v)}%`)}getMove(e,t){return{s:t?v(this.hsva.s+e.x*100,0,100):e.x*100,v:t?v(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}},me=`:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`,he=`[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`,ge=`[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`,j=Symbol(`same`),M=Symbol(`color`),N=Symbol(`hsva`),P=Symbol(`update`),F=Symbol(`parts`),I=Symbol(`css`),L=Symbol(`sliders`),_e=class extends HTMLElement{static get observedAttributes(){return[`color`]}get[I](){return[me,he,ge]}get[L](){return[pe,fe]}get color(){return this[M]}set color(e){if(!this[j](e)){let t=this.colorModel.toHsva(e);this[P](t),this[M]=e}}constructor(){super();let e=T(`<style>${this[I].join(``)}</style>`),t=this.attachShadow({mode:`open`});t.appendChild(e.content.cloneNode(!0)),t.addEventListener(`move`,this),this[F]=this[L].map(e=>new e(t))}connectedCallback(){if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color||=this.colorModel.defaultColor}attributeChangedCallback(e,t,n){let r=this.colorModel.fromAttr(n);this[j](r)||(this.color=r)}handleEvent(e){let t=this[N],n={...t,...e.detail};this[P](n);let r;!C(n,t)&&!this[j](r=this.colorModel.fromHsva(n))&&(this[M]=r,E(this,`color-changed`,{value:r}))}[j](e){return this.color&&this.colorModel.equal(e,this.color)}[P](e){this[N]=e,this[F].forEach(t=>t.update(e))}},ve={defaultColor:`#000`,toHsva:re,fromHsva:({h:e,s:t,v:n})=>ie({h:e,s:t,v:n,a:1}),equal:le,fromAttr:e=>e},ye=class extends _e{get colorModel(){return ve}},R=class extends ye{};customElements.define(`hex-color-picker`,R);var be=/^#?([0-9A-F]{3,8})$/i,z=(e,t)=>{let n=be.exec(e),r=n?n[1].length:0;return r===3||r===6||!!t&&r===4||!!t&&r===8},xe=T(`<slot><input part="input" spellcheck="false"></slot>`),B=(e,t)=>e.replace(/([^0-9A-F]+)/gi,``).substring(0,t?8:6),V=Symbol(`alpha`),H=Symbol(`color`),U=Symbol(`saved`),W=Symbol(`input`),G=Symbol(`init`),K=Symbol(`prefix`),q=Symbol(`update`),Se=class extends HTMLElement{static get observedAttributes(){return[`alpha`,`color`,`prefixed`]}get color(){return this[H]}set color(e){this[H]=e,this[q](e)}get alpha(){return this[V]}set alpha(e){this[V]=e,this.toggleAttribute(`alpha`,e);let t=this.color;t&&!z(t,e)&&(this.color=t.startsWith(`#`)?t.substring(0,t.length===5?4:7):t.substring(0,t.length===4?3:6))}get prefixed(){return this[K]}set prefixed(e){this[K]=e,this.toggleAttribute(`prefixed`,e),this[q](this.color)}constructor(){super();let e=this.attachShadow({mode:`open`});e.appendChild(xe.content.cloneNode(!0)),e.firstElementChild.addEventListener(`slotchange`,()=>this[G](e))}connectedCallback(){if(this[G](this.shadowRoot),this.hasOwnProperty(`alpha`)){let e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute(`alpha`);if(this.hasOwnProperty(`prefixed`)){let e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute(`prefixed`);if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute(`color`)||``:this[H]&&this[q](this[H])}handleEvent(e){let{value:t}=e.target;switch(e.type){case`input`:let e=B(t,this.alpha);this[U]=this.color,(z(e,this.alpha)||t===``)&&(this.color=e,this.dispatchEvent(new CustomEvent(`color-changed`,{bubbles:!0,detail:{value:e?`#`+e:``}})));break;case`blur`:t&&!z(t,this.alpha)&&(this.color=this[U])}}attributeChangedCallback(e,t,n){e===`color`&&this.color!==n&&(this.color=n);let r=n!=null;e===`alpha`&&this.alpha!==r&&(this.alpha=r),e===`prefixed`&&this.prefixed!==r&&(this.prefixed=r)}[G](e){let t=this.querySelector(`input`);if(!t){let n;for(;n=this.firstChild;)n.remove();t=e.querySelector(`input`)}t.addEventListener(`input`,this),t.addEventListener(`blur`,this),this[W]=t,this[q](this.color)}[q](e){this[W]&&(this[W].value=e==null||e==``?``:(this.prefixed?`#`:``)+B(e,this.alpha))}},J=class extends Se{};customElements.define(`hex-input`,J);var Y=`vvd-hex-picker`,X=`vvd-hex-input`,Ce=class extends R{static{this.displayName=`VvdHexPicker`}},we=class extends J{static{this.displayName=`VvdHexInput`}};customElements.get(Y)||customElements.define(Y,Ce),customElements.get(X)||customElements.define(X,we);var Z=Y,Q=X,$=class extends l.t(h.t(c.t(s.t(u.t(ee.t(_.t(e.t))))))){constructor(...e){super(...e),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.copyIconName=`copy-2-line`,this._copyValueToClipboard=async e=>{try{await navigator.clipboard.writeText(e),this._setTemporaryCopyIcon(`check-circle-line`),this._ariaLiveDescription=this.locale.colorPicker.copySuccessMessage(e)}catch{alert(this.locale.colorPicker.copyErrorText),this._setTemporaryCopyIcon(`error-line`),this._ariaLiveDescription=this.locale.colorPicker.copyErrorText}},this._ariaLiveDescription=``}static{this.HEX_COLOR_PATTERN=/^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}handleChange(){this.$emit(`change`)}openChanged(e,t){t&&this.isConnected&&requestAnimationFrame(()=>{this._refreshCanvasColor()})}savedColorsKeyChanged(){this.savedColors=this._loadSavedColors()}get _savedColorsStorageKey(){return this.savedColorsKey?this.savedColorsKey:`vvd-saved-colors:${this.tagName.toLowerCase()}`}_handleColorSaving(){this._saveCurrentColor()}_saveCurrentColor(){let e=this.value;if(typeof e!=`string`||!_.n(e))return;let t=Array.isArray(this.savedColors)?[...this.savedColors]:[],n=t.findIndex(t=>t?.value===e);n!==-1&&t.splice(n,1),t.unshift({value:e}),this.savedColors=t.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{let e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.value==`string`&&_.n(e.value)).map(e=>({value:e.value,label:typeof e.label==`string`?e.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){let e=Array.isArray(this.swatches)?this.swatches:[],t=Array.isArray(this.savedColors)?this.savedColors:[],n=new Set,r=[],i=e=>{!e||typeof e.value!=`string`||!_.n(e.value)||n.has(e.value)||(n.add(e.value),r.push(e))};return this.disableSavedColors||t.forEach(i),e.forEach(i),r.slice(0,this._maxSwatchesNormalized)}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){let e=this._maxSwatchesNormalized;this.savedColors?.length>e&&(this.savedColors=this.savedColors.slice(0,e),this._setSavedColors(this.savedColors))}_onPickerColorChanged(e){typeof e.detail?.value==`string`&&(this.value=e.detail?.value)}valueChanged(e,t){this._vcHexPickerEl&&typeof t==`string`&&(this._vcHexPickerEl.color=t),this._vcHexInputEl&&typeof t==`string`&&(this._vcHexInputEl.color=t)}_onTextFieldInput(e){this.value=e.currentTarget.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&_.n(this.value)?this.value:`var(--vvd-color-canvas-text)`}_onButtonClick(){this.open=!this.open}_handleCloseRequest(){this.open=!1}_isInPath(e,t){if(!t)return!1;let n=e.composedPath?.();return!!(n&&n.includes(t))}#e=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)};connectedCallback(){super.connectedCallback(),this.savedColors=this._loadSavedColors(),document.addEventListener(`mousedown`,this.#e,!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`mousedown`,this.#e,!0)}#t=null;_setTemporaryCopyIcon(e,t=2e3){this.copyIconName=e,this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.copyIconName=`copy-2-line`,this.#t=null},t)}_onBaseKeydown(e){return this.open&&te.t(e)?(this.open=!1,!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_focusableElsWithinDialog(){return this._popupEl.querySelectorAll(`button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])`)}_handleCellKeydown(e,t,n,r){if(e.key===`Tab`){e.preventDefault();let t=this._focusableElsWithinDialog(),n=Array.prototype.indexOf.call(t,e.currentTarget);return t[e.shiftKey?(n-1+t.length)%t.length:(n+1)%t.length]?.focus(),!1}return super._handleCellKeydown(e,t,n,r)}_handleSwatchSelection(e){this.value!==e&&(this._ariaLiveDescription=this.locale.colorPicker.selectionSuccessMessage(e)),super._handleSwatchSelection(e)}};o.t([e.l],$.prototype,`placeholder`,void 0),o.t([e.l({attribute:`saved-colors-key`})],$.prototype,`savedColorsKey`,void 0),o.t([e.l({mode:`boolean`,attribute:`disable-saved-colors`})],$.prototype,`disableSavedColors`,void 0),o.t([e.T],$.prototype,`savedColors`,void 0),o.t([e.l({attribute:`max-swatches`,mode:`fromView`,converter:e.u})],$.prototype,`maxSwatches`,void 0),o.t([e.T],$.prototype,`copyIconName`,void 0),o.t([e.T],$.prototype,`_ariaLiveDescription`,void 0);function Te(t,r){return e.d`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/slotted.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/with-success-text.cjs`),c=require(`../bundled/with-error-text.cjs`),l=require(`../bundled/with-contextual-help.cjs`),ee=require(`../bundled/trapped-focus.cjs`),u=require(`../bundled/class-names.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/definition9.cjs`),te=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/definition12.cjs`),_=require(`../bundled/base-color-picker.cjs`);var ne=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input: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));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`,v=(e,t=0,n=1)=>e>n?n:e<t?t:e,y=(e,t=0,n=10**t)=>Math.round(n*e)/n;360/(Math.PI*2);var re=e=>ce(b(e)),b=e=>(e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?y(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?y(parseInt(e.substring(6,8),16)/255,2):1}),ie=e=>se(oe(e)),ae=({h:e,s:t,v:n,a:r})=>{let i=(200-t)*n/100;return{h:y(e),s:y(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:y(i/2),a:y(r,2)}},x=e=>{let{h:t,s:n,l:r}=ae(e);return`hsl(${t}, ${n}%, ${r}%)`},oe=({h:e,s:t,v:n,a:r})=>{e=e/360*6,t/=100,n/=100;let i=Math.floor(e),a=n*(1-t),o=n*(1-(e-i)*t),s=n*(1-(1-e+i)*t),c=i%6;return{r:y([n,o,a,a,s,n][c]*255),g:y([s,n,n,o,a,a][c]*255),b:y([a,a,s,n,n,o][c]*255),a:y(r,2)}},S=e=>{let t=e.toString(16);return t.length<2?`0`+t:t},se=({r:e,g:t,b:n,a:r})=>{let i=r<1?S(y(r*255)):``;return`#`+S(e)+S(t)+S(n)+i},ce=({r:e,g:t,b:n,a:r})=>{let i=Math.max(e,t,n),a=i-Math.min(e,t,n),o=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:y(60*(o<0?o+6:o)),s:y(i?a/i*100:0),v:y(i/255*100),a:r}},C=(e,t)=>{if(e===t)return!0;for(let n in e)if(e[n]!==t[n])return!1;return!0},le=(e,t)=>e.toLowerCase()===t.toLowerCase()?!0:C(b(e),b(t)),w={},T=e=>{let t=w[e];return t||(t=document.createElement(`template`),t.innerHTML=e,w[e]=t),t},E=(e,t,n)=>{e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}))},D=!1,O=e=>`touches`in e,ue=e=>D&&!O(e)?!1:(D||=O(e),!0),k=(e,t)=>{let n=O(t)?t.touches[0]:t,r=e.el.getBoundingClientRect();E(e.el,`move`,e.getMove({x:v((n.pageX-(r.left+window.pageXOffset))/r.width),y:v((n.pageY-(r.top+window.pageYOffset))/r.height)}))},de=(e,t)=>{let n=t.keyCode;n>40||e.xy&&n<37||n<33||(t.preventDefault(),E(e.el,`move`,e.getMove({x:n===39?.01:n===37?-.01:n===34?.05:n===33?-.05:n===35?1:n===36?-1:0,y:n===40?.01:n===38?-.01:0},!0)))},A=class{constructor(e,t,n,r){let i=T(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);e.appendChild(i.content.cloneNode(!0));let a=e.querySelector(`[part=${t}]`);a.addEventListener(`mousedown`,this),a.addEventListener(`touchstart`,this),a.addEventListener(`keydown`,this),this.el=a,this.xy=r,this.nodes=[a.firstChild,a]}set dragging(e){let t=e?document.addEventListener:document.removeEventListener;t(D?`touchmove`:`mousemove`,this),t(D?`touchend`:`mouseup`,this)}handleEvent(e){switch(e.type){case`mousedown`:case`touchstart`:if(e.preventDefault(),!ue(e)||!D&&e.button!=0)return;this.el.focus(),k(this,e),this.dragging=!0;break;case`mousemove`:case`touchmove`:e.preventDefault(),k(this,e);break;case`mouseup`:case`touchend`:this.dragging=!1;break;case`keydown`:de(this,e);break}}style(e){e.forEach((e,t)=>{for(let n in e)this.nodes[t].style.setProperty(n,e[n])})}},fe=class extends A{constructor(e){super(e,`hue`,`aria-label="Hue" aria-valuemin="0" aria-valuemax="360"`,!1)}update({h:e}){this.h=e,this.style([{left:`${e/360*100}%`,color:x({h:e,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuenow`,`${y(e)}`)}getMove(e,t){return{h:t?v(this.h+e.x*360,0,360):360*e.x}}},pe=class extends A{constructor(e){super(e,`saturation`,`aria-label="Color"`,!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:x(e)},{"background-color":x({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuetext`,`Saturation ${y(e.s)}%, Brightness ${y(e.v)}%`)}getMove(e,t){return{s:t?v(this.hsva.s+e.x*100,0,100):e.x*100,v:t?v(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}},me=`:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`,he=`[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`,ge=`[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`,j=Symbol(`same`),M=Symbol(`color`),N=Symbol(`hsva`),P=Symbol(`update`),F=Symbol(`parts`),I=Symbol(`css`),L=Symbol(`sliders`),_e=class extends HTMLElement{static get observedAttributes(){return[`color`]}get[I](){return[me,he,ge]}get[L](){return[pe,fe]}get color(){return this[M]}set color(e){if(!this[j](e)){let t=this.colorModel.toHsva(e);this[P](t),this[M]=e}}constructor(){super();let e=T(`<style>${this[I].join(``)}</style>`),t=this.attachShadow({mode:`open`});t.appendChild(e.content.cloneNode(!0)),t.addEventListener(`move`,this),this[F]=this[L].map(e=>new e(t))}connectedCallback(){if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color||=this.colorModel.defaultColor}attributeChangedCallback(e,t,n){let r=this.colorModel.fromAttr(n);this[j](r)||(this.color=r)}handleEvent(e){let t=this[N],n={...t,...e.detail};this[P](n);let r;!C(n,t)&&!this[j](r=this.colorModel.fromHsva(n))&&(this[M]=r,E(this,`color-changed`,{value:r}))}[j](e){return this.color&&this.colorModel.equal(e,this.color)}[P](e){this[N]=e,this[F].forEach(t=>t.update(e))}},ve={defaultColor:`#000`,toHsva:re,fromHsva:({h:e,s:t,v:n})=>ie({h:e,s:t,v:n,a:1}),equal:le,fromAttr:e=>e},ye=class extends _e{get colorModel(){return ve}},R=class extends ye{};customElements.define(`hex-color-picker`,R);var be=/^#?([0-9A-F]{3,8})$/i,z=(e,t)=>{let n=be.exec(e),r=n?n[1].length:0;return r===3||r===6||!!t&&r===4||!!t&&r===8},xe=T(`<slot><input part="input" spellcheck="false"></slot>`),B=(e,t)=>e.replace(/([^0-9A-F]+)/gi,``).substring(0,t?8:6),V=Symbol(`alpha`),H=Symbol(`color`),U=Symbol(`saved`),W=Symbol(`input`),G=Symbol(`init`),K=Symbol(`prefix`),q=Symbol(`update`),Se=class extends HTMLElement{static get observedAttributes(){return[`alpha`,`color`,`prefixed`]}get color(){return this[H]}set color(e){this[H]=e,this[q](e)}get alpha(){return this[V]}set alpha(e){this[V]=e,this.toggleAttribute(`alpha`,e);let t=this.color;t&&!z(t,e)&&(this.color=t.startsWith(`#`)?t.substring(0,t.length===5?4:7):t.substring(0,t.length===4?3:6))}get prefixed(){return this[K]}set prefixed(e){this[K]=e,this.toggleAttribute(`prefixed`,e),this[q](this.color)}constructor(){super();let e=this.attachShadow({mode:`open`});e.appendChild(xe.content.cloneNode(!0)),e.firstElementChild.addEventListener(`slotchange`,()=>this[G](e))}connectedCallback(){if(this[G](this.shadowRoot),this.hasOwnProperty(`alpha`)){let e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute(`alpha`);if(this.hasOwnProperty(`prefixed`)){let e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute(`prefixed`);if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute(`color`)||``:this[H]&&this[q](this[H])}handleEvent(e){let{value:t}=e.target;switch(e.type){case`input`:let e=B(t,this.alpha);this[U]=this.color,(z(e,this.alpha)||t===``)&&(this.color=e,this.dispatchEvent(new CustomEvent(`color-changed`,{bubbles:!0,detail:{value:e?`#`+e:``}})));break;case`blur`:t&&!z(t,this.alpha)&&(this.color=this[U])}}attributeChangedCallback(e,t,n){e===`color`&&this.color!==n&&(this.color=n);let r=n!=null;e===`alpha`&&this.alpha!==r&&(this.alpha=r),e===`prefixed`&&this.prefixed!==r&&(this.prefixed=r)}[G](e){let t=this.querySelector(`input`);if(!t){let n;for(;n=this.firstChild;)n.remove();t=e.querySelector(`input`)}t.addEventListener(`input`,this),t.addEventListener(`blur`,this),this[W]=t,this[q](this.color)}[q](e){this[W]&&(this[W].value=e==null||e==``?``:(this.prefixed?`#`:``)+B(e,this.alpha))}},J=class extends Se{};customElements.define(`hex-input`,J);var Y=`vvd-hex-picker`,X=`vvd-hex-input`,Ce=class extends R{static{this.displayName=`VvdHexPicker`}},we=class extends J{static{this.displayName=`VvdHexInput`}};customElements.get(Y)||customElements.define(Y,Ce),customElements.get(X)||customElements.define(X,we);var Z=Y,Q=X,$=class extends l.t(h.t(c.t(s.t(d.t(ee.t(_.t(e.t))))))){constructor(...e){super(...e),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.#e=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)},this.copyIconName=`copy-2-line`,this.#t=null,this._copyValueToClipboard=async e=>{try{await navigator.clipboard.writeText(e),this._setTemporaryCopyIcon(`check-circle-line`),this._ariaLiveDescription=this.locale.colorPicker.copySuccessMessage(e)}catch{alert(this.locale.colorPicker.copyErrorText),this._setTemporaryCopyIcon(`error-line`),this._ariaLiveDescription=this.locale.colorPicker.copyErrorText}},this._ariaLiveDescription=``}static{this.HEX_COLOR_PATTERN=/^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}handleChange(){this.$emit(`change`)}openChanged(e,t){t&&this.isConnected&&requestAnimationFrame(()=>{this._refreshCanvasColor()})}savedColorsKeyChanged(){this.savedColors=this._loadSavedColors()}get _savedColorsStorageKey(){return this.savedColorsKey?this.savedColorsKey:`vvd-saved-colors:${this.tagName.toLowerCase()}`}_handleColorSaving(){this._saveCurrentColor()}_saveCurrentColor(){let e=this.value;if(typeof e!=`string`||!_.n(e))return;let t=Array.isArray(this.savedColors)?[...this.savedColors]:[],n=t.findIndex(t=>t?.value===e);n!==-1&&t.splice(n,1),t.unshift({value:e}),this.savedColors=t.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{let e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.value==`string`&&_.n(e.value)).map(e=>({value:e.value,label:typeof e.label==`string`?e.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){let e=Array.isArray(this.swatches)?this.swatches:[],t=Array.isArray(this.savedColors)?this.savedColors:[],n=new Set,r=[],i=e=>{!e||typeof e.value!=`string`||!_.n(e.value)||n.has(e.value)||(n.add(e.value),r.push(e))};return this.disableSavedColors||t.forEach(i),e.forEach(i),r.slice(0,this._maxSwatchesNormalized)}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){let e=this._maxSwatchesNormalized;this.savedColors?.length>e&&(this.savedColors=this.savedColors.slice(0,e),this._setSavedColors(this.savedColors))}_onPickerColorChanged(e){typeof e.detail?.value==`string`&&(this.value=e.detail?.value)}valueChanged(e,t){this._vcHexPickerEl&&typeof t==`string`&&(this._vcHexPickerEl.color=t),this._vcHexInputEl&&typeof t==`string`&&(this._vcHexInputEl.color=t)}_onTextFieldInput(e){let t=e.currentTarget;this.value=t.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&_.n(this.value)?this.value:`var(--vvd-color-canvas-text)`}_onButtonClick(){this.open=!this.open}_handleCloseRequest(){this.open=!1}_isInPath(e,t){if(!t)return!1;let n=e.composedPath?.();return!!(n&&n.includes(t))}#e;connectedCallback(){super.connectedCallback(),this.savedColors=this._loadSavedColors(),document.addEventListener(`mousedown`,this.#e,!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`mousedown`,this.#e,!0)}#t;_setTemporaryCopyIcon(e,t=2e3){this.copyIconName=e,this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.copyIconName=`copy-2-line`,this.#t=null},t)}_onBaseKeydown(e){return this.open&&te.t(e)?(this.open=!1,!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_focusableElsWithinDialog(){return this._popupEl.querySelectorAll(`button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])`)}_handleCellKeydown(e,t,n,r){if(e.key===`Tab`){e.preventDefault();let t=this._focusableElsWithinDialog(),n=Array.prototype.indexOf.call(t,e.currentTarget);return t[e.shiftKey?(n-1+t.length)%t.length:(n+1)%t.length]?.focus(),!1}return super._handleCellKeydown(e,t,n,r)}_handleSwatchSelection(e){this.value!==e&&(this._ariaLiveDescription=this.locale.colorPicker.selectionSuccessMessage(e)),super._handleSwatchSelection(e)}};a.t([e.u],$.prototype,`placeholder`,void 0),a.t([e.u({attribute:`saved-colors-key`})],$.prototype,`savedColorsKey`,void 0),a.t([e.u({mode:`boolean`,attribute:`disable-saved-colors`})],$.prototype,`disableSavedColors`,void 0),a.t([e.D],$.prototype,`savedColors`,void 0),a.t([e.u({attribute:`max-swatches`,mode:`fromView`,converter:e.d})],$.prototype,`maxSwatches`,void 0),a.t([e.D],$.prototype,`copyIconName`,void 0),a.t([e.D],$.prototype,`_ariaLiveDescription`,void 0);function Te(t,r){return e.f`
 		<${t} 
 			id="text-field"
-			class="${e=>d.t(`control`)}"
+			class="${e=>u.t(`control`)}"
 			pattern="${$.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
 			label="${e=>e.label}"
@@ -16,14 +16,14 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 			@change="${e=>e.handleChange()}"
 			@blur="${e=>{e.$emit(`blur`,void 0,{bubbles:!1})}}"
 			@focus="${e=>{e.$emit(`focus`,void 0,{bubbles:!1})}}"
-			${u.n()}
+			${d.n()}
 			${n.t(`_textFieldEl`)}
 		>
 			<button 
 				aria-label="${e=>e.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${e=>e.open}"
   			aria-haspopup="dialog"
-				class="button ${e=>d.t(e._applyContrastClass(e._buttonColor)?`contrast`:``,e.disabled?`disabled`:``)}" 
+				class="button ${e=>u.t(e._applyContrastClass(e._buttonColor)?`contrast`:``,e.disabled?`disabled`:``)}" 
 				style="--button-color: ${e=>e._buttonColor};" 
 				?disabled="${e=>e.disabled}"
 				@click="${e=>e._onButtonClick()}"
@@ -42,7 +42,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				${i.t(`_contextualHelpSlottedContent`)}
 			></slot>
 		</${t}>
-	`}function Ee(t,n){return e.d`
+	`}function Ee(t,n){return e.f`
 		<div class="header">
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${e=>e.locale.colorPicker.popupLabel}</slot>
@@ -53,16 +53,16 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				<${n} slot="icon" name="close-line"></${n}>
 			</${t}>
 		</div>
-	`}function De(t,r,i){return e.d`
+	`}function De(t,r,i){return e.f`
 		<div class="body">
-			<${e.d.partial(Z)}
+			<${e.f.partial(Z)}
 				part="hex-picker"
 				color="${e=>e.value}"
 				@color-changed="${(e,t)=>e._onPickerColorChanged(t.event)}"
 				${n.t(`_vcHexPickerEl`)}
-			></${e.d.partial(Z)}>
+			></${e.f.partial(Z)}>
 			<div class="hex-input-wrapper">
-				<${e.d.partial(Q)}
+				<${e.f.partial(Q)}
 					part="hex-input"
 					prefixed
 					color="${e=>e.value}"
@@ -73,7 +73,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 						placeholder="${e=>e.placeholder}"
     				@blur="${(e,t)=>t.event.stopImmediatePropagation()}"
 						part="input">
-				</${e.d.partial(Q)}>
+				</${e.f.partial(Q)}>
 				<${i} placement="top" 
 					text="${e=>e.locale.colorPicker.copyButtonLabel}" 
 					exportparts="vvd-theme-alternate">
@@ -86,7 +86,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				</${i}>
 			</div>
 		</div>
-	`}function Oe(n,i,a){return e.d`
+	`}function Oe(n,i,a){return e.f`
 		<div class="footer">
 			<div class="footer-header">
 				<span class="footer-title" id="color-picker-footer-title"
@@ -105,7 +105,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				aria-labelledby="color-picker-footer-title"
 			>
 				${t.n(e=>e.allSwatches,e=>e._renderColorSwatch(i,a),{positioning:!0})}
-				${r.t(e=>!e.disableSavedColors,e.d`
+				${r.t(e=>!e.disableSavedColors,e.f`
 						<${a} placement="top" 
 							text="${e=>e.locale.colorPicker.saveButtonLabel}" 
 							exportparts="vvd-theme-alternate">
@@ -124,19 +124,19 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 					`)}
 			</div>
 		</div>
-	`}function ke(){return e.d`
+	`}function ke(){return e.f`
 		<span
 			id="swatches-count"
 			class="swatches-count"
 			aria-label="${e=>e.locale.colorPicker.maxSwatchesMessage(e.allSwatches.length,e.maxSwatches)}"
 			>${e=>`${e.allSwatches.length}/${e.maxSwatches}`}</span
 		>
-	`}var Ae=e.o(`color-picker`,$,t=>{let i=t.tagFor(g.r),o=t.tagFor(a.r),s=t.tagFor(p.i),c=t.tagFor(f.i),l=t.tagFor(m.r);return e.d`
+	`}var Ae=e.s(`color-picker`,$,t=>{let i=t.tagFor(g.r),a=t.tagFor(o.r),s=t.tagFor(p.i),c=t.tagFor(f.i),l=t.tagFor(m.r);return e.f`
 		<div class="base" @keydown="${(e,{event:t})=>e._onBaseKeydown(t)}">
 			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 				${e=>e._ariaLiveDescription}
 			</span>
-			${Te(i,o)}
+			${Te(i,a)}
 			<${s}
 				:open="${e=>e.open}"
 				:anchor="${e=>e._buttonEl}"
@@ -147,10 +147,10 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 					role="dialog" 
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
-					${Ee(c,o)}
-					${De(c,o,l)}
-					${r.t(e=>!e.disableSavedColors||e.allSwatches.length>0,Oe(c,o,l))}
+					${Ee(c,a)}
+					${De(c,a,l)}
+					${r.t(e=>!e.disableSavedColors||e.allSwatches.length>0,Oe(c,a,l))}
 				</div>
 			</${s}>
 		</div>
-	`},[p.t,a.t,g.n,f.t,m.n,h.a],{styles:ne});e.s(Ae)();
+	`},[p.t,o.t,g.n,f.t,m.n,h.a],{styles:ne});e.c(Ae)();