@vonage/vivid 5.15.1 → 5.17.0

package/breadcrumb-item/definition.cjs

@@ -1,47 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const breadcrumbItem = require('../unbundled/breadcrumb-item.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media(hover:hover){.control:any-link:hover{text-decoration:underline}}";
-
-const getClasses = (_) => fastWebUtilities.classNames("base");
-const BreadcrumbItemTemplate = (context) => {
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html` <div role="listitem" class="${getClasses}">
-		${fastElement.when((x) => x.text && !x.href, fastElement.html`${(x) => x.text}`)}
-		${fastElement.when(
-    (x) => x.text && x.href && x.href.length > 0,
-    fastElement.html`${(x) => x._renderLinkElement(fastElement.html`${(x2) => x2.text}`, "control")}`
-  )}
-		${fastElement.when(
-    (x) => x.separator,
-    fastElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
-  )}
-	</div>`;
-};
-
-const breadcrumbItemDefinition = vividElement.defineVividComponent(
-  "breadcrumb-item",
-  breadcrumbItem.BreadcrumbItem,
-  BreadcrumbItemTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerBreadcrumbItem = vividElement.createRegisterFunction(
-  breadcrumbItemDefinition
-);
-
-exports.VwcBreadcrumbItemElement = breadcrumbItem.BreadcrumbItem;
-exports.breadcrumbItemDefinition = breadcrumbItemDefinition;
-exports.registerBreadcrumbItem = registerBreadcrumbItem;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition18.cjs");
+const require_breadcrumb_item = require("../unbundled/breadcrumb-item.cjs");
+exports.VwcBreadcrumbItemElement = require_breadcrumb_item.BreadcrumbItem;
+exports.breadcrumbItemDefinition = require_definition$1.breadcrumbItemDefinition;
+exports.registerBreadcrumbItem = require_definition$1.registerBreadcrumbItem;

package/breadcrumb-item/definition.js

@@ -1,41 +1,4 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { B as BreadcrumbItem } from '../unbundled/breadcrumb-item.js';
-import { when, html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media(hover:hover){.control:any-link:hover{text-decoration:underline}}";
-
-const getClasses = (_) => classNames("base");
-const BreadcrumbItemTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return html` <div role="listitem" class="${getClasses}">
-		${when((x) => x.text && !x.href, html`${(x) => x.text}`)}
-		${when(
-    (x) => x.text && x.href && x.href.length > 0,
-    html`${(x) => x._renderLinkElement(html`${(x2) => x2.text}`, "control")}`
-  )}
-		${when(
-    (x) => x.separator,
-    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
-  )}
-	</div>`;
-};
-
-const breadcrumbItemDefinition = defineVividComponent(
-  "breadcrumb-item",
-  BreadcrumbItem,
-  BreadcrumbItemTemplate,
-  [iconDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerBreadcrumbItem = createRegisterFunction(
-  breadcrumbItemDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as registerBreadcrumbItem, t as breadcrumbItemDefinition } from "../unbundled/definition18.js";
+import { t as BreadcrumbItem } from "../unbundled/breadcrumb-item.js";
 export { BreadcrumbItem as VwcBreadcrumbItemElement, breadcrumbItemDefinition, registerBreadcrumbItem };

package/breadcrumb-item/index.cjs

@@ -1,5 +1,5 @@
-"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),r=require("../bundled/when.cjs"),c=require("../bundled/class-names.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media(hover:hover){.control:any-link:hover{text-decoration:underline}}',d=t=>c.classNames("base"),u=t=>{const n=t.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
-		${r.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
-		${r.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
-		${r.when(e=>e.separator,o.html`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
-	</div>`},v=o.defineVividComponent("breadcrumb-item",a.BreadcrumbItem,u,[s.iconDefinition],{styles:l,shadowOptions:{delegatesFocus:!0}}),m=o.createRegisterFunction(v);m();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=`.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,o=e=>r.t(`base`),s=e.o(`breadcrumb-item`,i.t,r=>{let i=r.tagFor(n.r);return e.d` <div role="listitem" class="${o}">
+		${t.t(e=>e.text&&!e.href,e.d`${e=>e.text}`)}
+		${t.t(e=>e.text&&e.href&&e.href.length>0,e.d`${t=>t._renderLinkElement(e.d`${e=>e.text}`,`control`)}`)}
+		${t.t(e=>e.separator,e.d`<${i} class="separator" name="chevron-right-solid"></${i}>`)}
+	</div>`},[n.t],{styles:a,shadowOptions:{delegatesFocus:!0}});e.s(s)();

package/breadcrumb-item/index.js

@@ -1,33 +1,21 @@
-import { I as i, i as n } from "../bundled/definition2.js";
-import { h as r, c, d as l } from "../bundled/vivid-element.js";
-import { B as d } from "../bundled/breadcrumb-item.js";
-import { w as e } from "../bundled/when.js";
-import { c as v } from "../bundled/class-names.js";
-const m = '.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media(hover:hover){.control:any-link:hover{text-decoration:underline}}', p = (t) => v("base"), f = (t) => {
-  const s = t.tagFor(i);
-  return r` <div role="listitem" class="${p}">
-		${e((o) => o.text && !o.href, r`${(o) => o.text}`)}
-		${e(
-    (o) => o.text && o.href && o.href.length > 0,
-    r`${(o) => o._renderLinkElement(r`${(a) => a.text}`, "control")}`
-  )}
-		${e(
-    (o) => o.separator,
-    r`<${s} class="separator" name="chevron-right-solid"></${s}>`
-  )}
+import { d as e, o as t, s as n } from "../bundled/vivid-element.js";
+import { t as r } from "../bundled/when.js";
+import { r as i, t as a } from "../bundled/definition2.js";
+import { t as o } from "../bundled/class-names.js";
+import { t as s } from "../bundled/breadcrumb-item.js";
+//#region src/lib/breadcrumb-item/breadcrumb-item.scss?inline
+var c = ".base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}", l = (e) => o("base");
+//#endregion
+//#region src/lib/breadcrumb-item/index.ts
+n(t("breadcrumb-item", s, (t) => {
+	let n = t.tagFor(i);
+	return e` <div role="listitem" class="${l}">
+		${r((e) => e.text && !e.href, e`${(e) => e.text}`)}
+		${r((e) => e.text && e.href && e.href.length > 0, e`${(t) => t._renderLinkElement(e`${(e) => e.text}`, "control")}`)}
+		${r((e) => e.separator, e`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
 	</div>`;
-}, u = l(
-  "breadcrumb-item",
-  d,
-  f,
-  [n],
-  {
-    styles: m,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), b = c(
-  u
-);
-b();
+}, [a], {
+	styles: c,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/bundled/affix.cjs

@@ -1,13 +1,13 @@
-"use strict";const u=require("./definition2.cjs"),r=require("./vivid-element.cjs"),v=require("./slotted.cjs");var $=Object.defineProperty,c=(i,n,t,a)=>{for(var e=void 0,o=i.length-1,l;o>=0;o--)(l=i[o])&&(e=l(n,t,e)||e);return e&&$(n,t,e),e};const f=i=>{class n extends i{}return c([r.attr],n.prototype,"icon"),c([r.observable],n.prototype,"iconSlottedContent"),n},I=i=>{class n extends f(i){constructor(){super(...arguments),this.iconTrailing=!1}}return c([r.attr({mode:"boolean",attribute:"icon-trailing"})],n.prototype,"iconTrailing"),n},d={Slot:!1,Span:!0},p={Hidden:"true"},m=i=>{const n=i.tagFor(u.Icon);return(t,a=d.Span,e=p.Hidden,o={label:"",announceOnUpdate:!1})=>{if(!t&&!a)return r.html`<slot
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./definition2.cjs`),r=require(`./decorate.cjs`);var i=t=>{class n extends t{}return r.t([e.l],n.prototype,`icon`,void 0),r.t([e.T],n.prototype,`iconSlottedContent`,void 0),n},a=t=>{class n extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return r.t([e.l({mode:`boolean`,attribute:`icon-trailing`})],n.prototype,`iconTrailing`,void 0),n},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=r=>{let i=r.tagFor(n.r);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.d`<slot
 				name="icon"
-				aria-hidden="${()=>e}"
-				${v.slotted("iconSlottedContent")}
-			></slot>`;if(!t&&a)return null;const l=r.html`<${n} :name="${()=>t}" :label="${()=>o?.label||void 0}"></${n}>`,s=r.html.partial(a?"span":"slot");return r.html`<${s}
-					class="${()=>a?"icon":void 0}"
-					:name="${()=>a?void 0:"icon"}"
-					aria-hidden="${()=>o?.label?!1:e}"
-					:role="${()=>o?.announceOnUpdate?"status":void 0}"
-					:ariaLive="${()=>o?.announceOnUpdate?"polite":void 0}"
+				aria-hidden="${()=>a}"
+				${t.t(`iconSlottedContent`)}
+			></slot>`;if(!n&&r)return null;let l=e.d`<${i} :name="${()=>n}" :label="${()=>c?.label||void 0}"></${i}>`,u=e.d.partial(r?`span`:`slot`);return e.d`<${u}
+					class="${()=>r?`icon`:void 0}"
+					:name="${()=>r?void 0:`icon`}"
+					aria-hidden="${()=>c?.label?!1:a}"
+					:role="${()=>c?.announceOnUpdate?`status`:void 0}"
+					:ariaLive="${()=>c?.announceOnUpdate?`polite`:void 0}"
 			  >
 					${l}
-			  </${s}>`}};exports.AffixIcon=f;exports.AffixIconWithTrailing=I;exports.IconAriaHidden=p;exports.IconWrapper=d;exports.affixIconTemplateFactory=m;
+			  </${u}>`}};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/bundled/affix.js

@@ -1,63 +1,50 @@
-import { I as f } from "./definition2.js";
-import { a as p, h as s, o as d } from "./vivid-element.js";
-import { s as u } from "./slotted.js";
-var $ = Object.defineProperty, l = (a, n, e, i) => {
-  for (var o = void 0, r = a.length - 1, t; r >= 0; r--)
-    (t = a[r]) && (o = t(n, e, o) || o);
-  return o && $(n, e, o), o;
-};
-const m = (a) => {
-  class n extends a {
-  }
-  return l([
-    p
-  ], n.prototype, "icon"), l([
-    d
-  ], n.prototype, "iconSlottedContent"), n;
-}, x = (a) => {
-  class n extends m(a) {
-    constructor() {
-      super(...arguments), this.iconTrailing = !1;
-    }
-  }
-  return l([
-    p({
-      mode: "boolean",
-      attribute: "icon-trailing"
-    })
-  ], n.prototype, "iconTrailing"), n;
-}, v = {
-  Slot: !1,
-  Span: !0
-}, b = {
-  Hidden: "true"
-}, T = (a) => {
-  const n = a.tagFor(f);
-  return (e, i = v.Span, o = b.Hidden, r = { label: "", announceOnUpdate: !1 }) => {
-    if (!e && !i)
-      return s`<slot
+import { T as e, d as t, l as n } from "./vivid-element.js";
+import { t as r } from "./slotted.js";
+import { r as i } from "./definition2.js";
+import { t as a } from "./decorate.js";
+//#region src/shared/patterns/affix.ts
+var o = (t) => {
+	class r extends t {}
+	return a([n], r.prototype, "icon", void 0), a([e], r.prototype, "iconSlottedContent", void 0), r;
+}, s = (e) => {
+	class t extends o(e) {
+		constructor(...e) {
+			super(...e), this.iconTrailing = !1;
+		}
+	}
+	return a([n({
+		mode: "boolean",
+		attribute: "icon-trailing"
+	})], t.prototype, "iconTrailing", void 0), t;
+}, c = {
+	Slot: !1,
+	Span: !0
+}, l = {
+	Hidden: "true",
+	Visible: "false"
+}, u = (e) => {
+	let n = e.tagFor(i);
+	return (e, i = c.Span, a = l.Hidden, o = {
+		label: "",
+		announceOnUpdate: !1
+	}) => {
+		if (!e && !i) return t`<slot
 				name="icon"
-				aria-hidden="${() => o}"
-				${u("iconSlottedContent")}
+				aria-hidden="${() => a}"
+				${r("iconSlottedContent")}
 			></slot>`;
-    if (!e && i)
-      return null;
-    const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = s.partial(i ? "span" : "slot");
-    return s`<${c}
+		if (!e && i) return null;
+		let s = t`<${n} :name="${() => e}" :label="${() => o?.label || void 0}"></${n}>`, u = t.partial(i ? "span" : "slot");
+		return t`<${u}
 					class="${() => i ? "icon" : void 0}"
 					:name="${() => i ? void 0 : "icon"}"
-					aria-hidden="${() => r?.label ? !1 : o}"
-					:role="${() => r?.announceOnUpdate ? "status" : void 0}"
-					:ariaLive="${() => r?.announceOnUpdate ? "polite" : void 0}"
+					aria-hidden="${() => o?.label ? !1 : a}"
+					:role="${() => o?.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => o?.announceOnUpdate ? "polite" : void 0}"
 			  >
-					${t}
-			  </${c}>`;
-  };
-};
-export {
-  x as A,
-  v as I,
-  T as a,
-  m as b,
-  b as c
+					${s}
+			  </${u}>`;
+	};
 };
+//#endregion
+export { u as a, c as i, s as n, l as r, o as t };

package/bundled/anchored.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("./slotted.cjs"),n=require("./vivid-element.cjs");var a=Object.defineProperty,c=(s,o,r,t)=>{for(var e=void 0,h=s.length-1,i;h>=0;h--)(i=s[h])&&(e=i(o,r,e)||e);return e&&a(o,r,e),e};const d=s=>{class o extends s{anchorChanged(){this.#e()}_slottedAnchorChanged(){const t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);n.DOM.setBooleanAttribute(this,"slotted-anchor",t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#o();let t;this._slottedAnchor&&this._slottedAnchor.length>0?t=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?t=this.anchor:typeof this.anchor=="string"&&(t=document.getElementById(this.anchor)??void 0,t||this.#n(this.anchor)),this._anchorEl=t};#t;#n=t=>{this.#t=new MutationObserver(()=>{const e=document.getElementById(t);e&&(this._anchorEl=e,this.#o())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#o=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#o(),this._anchorEl=void 0}}return c([n.attr],o.prototype,"anchor"),c([n.observable],o.prototype,"_slottedAnchor"),c([n.observable],o.prototype,"_anchorEl"),o},u=()=>n.html`<slot
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`);var r=t=>{class r extends t{anchorChanged(){this.#e()}_slottedAnchorChanged(){let t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);e.k.setBooleanAttribute(this,`slotted-anchor`,t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#r();let e;this._slottedAnchor&&this._slottedAnchor.length>0?e=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?e=this.anchor:typeof this.anchor==`string`&&(e=document.getElementById(this.anchor)??void 0,e||this.#n(this.anchor)),this._anchorEl=e};#t;#n=e=>{this.#t=new MutationObserver(()=>{let t=document.getElementById(e);t&&(this._anchorEl=t,this.#r())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#r=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#r(),this._anchorEl=void 0}}return n.t([e.l],r.prototype,`anchor`,void 0),n.t([e.T],r.prototype,`_slottedAnchor`,void 0),n.t([e.T],r.prototype,`_anchorEl`,void 0),r},i=()=>e.d`<slot
 		name="anchor"
-		${l.slotted("_slottedAnchor")}
-	></slot>`;exports.Anchored=d;exports.anchorSlotTemplateFactory=u;
+		${t.t(`_slottedAnchor`)}
+	></slot>`;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/bundled/anchored.js

@@ -1,67 +1,49 @@
-import { s as a } from "./slotted.js";
-import { h as l, D as d, a as p, o as i } from "./vivid-element.js";
-var u = Object.defineProperty, h = (s, o, n, t) => {
-  for (var e = void 0, r = s.length - 1, c; r >= 0; r--)
-    (c = s[r]) && (e = c(o, n, e) || e);
-  return e && u(o, n, e), e;
-};
-const v = (s) => {
-  class o extends s {
-    /**
-     * @internal
-     */
-    anchorChanged() {
-      this.#e();
-    }
-    /**
-     * @internal
-     */
-    _slottedAnchorChanged() {
-      const t = !!(this._slottedAnchor && this._slottedAnchor.length > 0);
-      d.setBooleanAttribute(
-        this,
-        "slotted-anchor",
-        t
-      ), this.#e();
-    }
-    #e = () => {
-      if (!this.isConnected) {
-        this._anchorEl = void 0;
-        return;
-      }
-      this.#o();
-      let t;
-      this._slottedAnchor && this._slottedAnchor.length > 0 ? t = this._slottedAnchor[0] : this.anchor instanceof HTMLElement ? t = this.anchor : typeof this.anchor == "string" && (t = document.getElementById(this.anchor) ?? void 0, t || this.#s(this.anchor)), this._anchorEl = t;
-    };
-    #t;
-    #s = (t) => {
-      this.#t = new MutationObserver(() => {
-        const e = document.getElementById(t);
-        e && (this._anchorEl = e, this.#o());
-      }), this.#t.observe(document.body, { childList: !0, subtree: !0 });
-    };
-    #o = () => {
-      this.#t?.disconnect(), this.#t = void 0;
-    };
-    connectedCallback() {
-      super.connectedCallback(), this.#e();
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.#o(), this._anchorEl = void 0;
-    }
-  }
-  return h([
-    p
-  ], o.prototype, "anchor"), h([
-    i
-  ], o.prototype, "_slottedAnchor"), h([
-    i
-  ], o.prototype, "_anchorEl"), o;
-}, b = () => l`<slot
+import { T as e, d as t, k as n, l as r } from "./vivid-element.js";
+import { t as i } from "./slotted.js";
+import { t as a } from "./decorate.js";
+//#region src/shared/patterns/anchored.ts
+var o = (t) => {
+	class i extends t {
+		anchorChanged() {
+			this.#e();
+		}
+		_slottedAnchorChanged() {
+			let e = !!(this._slottedAnchor && this._slottedAnchor.length > 0);
+			n.setBooleanAttribute(this, "slotted-anchor", e), this.#e();
+		}
+		#e = () => {
+			if (!this.isConnected) {
+				this._anchorEl = void 0;
+				return;
+			}
+			this.#r();
+			let e;
+			this._slottedAnchor && this._slottedAnchor.length > 0 ? e = this._slottedAnchor[0] : this.anchor instanceof HTMLElement ? e = this.anchor : typeof this.anchor == "string" && (e = document.getElementById(this.anchor) ?? void 0, e || this.#n(this.anchor)), this._anchorEl = e;
+		};
+		#t;
+		#n = (e) => {
+			this.#t = new MutationObserver(() => {
+				let t = document.getElementById(e);
+				t && (this._anchorEl = t, this.#r());
+			}), this.#t.observe(document.body, {
+				childList: !0,
+				subtree: !0
+			});
+		};
+		#r = () => {
+			this.#t?.disconnect(), this.#t = void 0;
+		};
+		connectedCallback() {
+			super.connectedCallback(), this.#e();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.#r(), this._anchorEl = void 0;
+		}
+	}
+	return a([r], i.prototype, "anchor", void 0), a([e], i.prototype, "_slottedAnchor", void 0), a([e], i.prototype, "_anchorEl", void 0), i;
+}, s = () => t`<slot
 		name="anchor"
-		${a("_slottedAnchor")}
+		${i("_slottedAnchor")}
 	></slot>`;
-export {
-  v as A,
-  b as a
-};
+//#endregion
+export { s as n, o as t };

package/bundled/aria.cjs

@@ -1 +1 @@
-"use strict";const t={horizontal:"horizontal",vertical:"vertical"};exports.Orientation=t;
+var e={horizontal:`horizontal`,vertical:`vertical`};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});

package/bundled/aria.js

@@ -1,7 +1,7 @@
-const t = {
-  horizontal: "horizontal",
-  vertical: "vertical"
-};
-export {
-  t as O
+//#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/aria.js
+var e = {
+	horizontal: "horizontal",
+	vertical: "vertical"
 };
+//#endregion
+export { e as t };

package/bundled/attribute-binding-behaviour.cjs

@@ -1 +1 @@
-"use strict";const i=require("./vivid-element.cjs");class r{constructor(t,e,s,n){this.target=t,this.binding=e,this.isBindingVolatile=s,this.attributeName=n,this.source=null,this.context=null}bind(t){this.source=t.source,this.context=t.context,this.bindingObserver||(this.bindingObserver=i.Observable.binding(this.binding.evaluate,this,this.isBindingVolatile)),this.bindingObserver.observe(this.source,this.context),this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(t){i.DOM.setAttribute(this.target,this.attributeName,t)}}exports.AttributeBindingBehavior=r;
+const e=require(`./vivid-element.cjs`);var t=class{constructor(e,t,n,r){this.target=e,this.binding=t,this.isBindingVolatile=n,this.attributeName=r,this.source=null,this.context=null}bind(t){this.source=t.source,this.context=t.context,this.bindingObserver||=e.w.binding(this.binding.evaluate,this,this.isBindingVolatile),this.bindingObserver.observe(this.source,this.context),this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(t){e.k.setAttribute(this.target,this.attributeName,t)}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return t}});

package/bundled/attribute-binding-behaviour.js

@@ -1,29 +1,18 @@
-import { O as n, D as r } from "./vivid-element.js";
-class b {
-  constructor(t, i, e, s) {
-    this.target = t, this.binding = i, this.isBindingVolatile = e, this.attributeName = s, this.source = null, this.context = null;
-  }
-  bind(t) {
-    this.source = t.source, this.context = t.context, this.bindingObserver || (this.bindingObserver = n.binding(
-      this.binding.evaluate,
-      this,
-      this.isBindingVolatile
-    )), this.bindingObserver.observe(this.source, this.context), this.updateTarget(this.bindingObserver.observe(this.source, this.context));
-  }
-  // unbind() {
-  // 	this.bindingObserver!.dispose();
-  // 	this.source = null;
-  // 	this.context = null;
-  // }
-  handleChange() {
-    this.updateTarget(
-      this.bindingObserver.observe(this.source, this.context)
-    );
-  }
-  updateTarget(t) {
-    r.setAttribute(this.target, this.attributeName, t);
-  }
-}
-export {
-  b as A
+import { k as e, w as t } from "./vivid-element.js";
+//#region src/shared/templating/attribute-binding-behaviour.ts
+var n = class {
+	constructor(e, t, n, r) {
+		this.target = e, this.binding = t, this.isBindingVolatile = n, this.attributeName = r, this.source = null, this.context = null;
+	}
+	bind(e) {
+		this.source = e.source, this.context = e.context, this.bindingObserver ||= t.binding(this.binding.evaluate, this, this.isBindingVolatile), this.bindingObserver.observe(this.source, this.context), this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+	}
+	handleChange() {
+		this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+	}
+	updateTarget(t) {
+		e.setAttribute(this.target, this.attributeName, t);
+	}
 };
+//#endregion
+export { n as t };

package/bundled/base-color-picker.cjs

@@ -1,18 +1,18 @@
-"use strict";const m=require("./form-associated.cjs"),u=require("./vivid-element.cjs"),g=require("./when.cjs"),y=require("./localized.cjs"),S=require("./form-element.cjs"),b=require("./class-names.cjs");function C(a){if(!a)return null;const s=a.trim().replace(/^#/,"");return/^[0-9a-fA-F]{3}$/.test(s)?s.split("").map(n=>n+n).join("").toLowerCase():/^[0-9a-fA-F]{6}$/.test(s)?s.toLowerCase():null}function I(a){return C(a)!==null}function w(a){const s=C(a);if(!s)return 0;const n=parseInt(s.slice(0,2),16)/255,t=parseInt(s.slice(2,4),16)/255,o=parseInt(s.slice(4,6),16)/255,e=n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4),r=t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4),l=o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4);return .2126*e+.7152*r+.0722*l}function B(a,s){const n=w(a),t=w(s),o=Math.max(n,t),e=Math.min(n,t);return(o+.05)/(e+.05)}function _(a,s){return s||(s=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(s).getPropertyValue(a).trim()}var $=Object.defineProperty,d=(a,s,n,t)=>{for(var o=void 0,e=a.length-1,r;e>=0;e--)(r=a[e])&&(o=r(s,n,o)||o);return o&&$(s,n,o),o};const A=a=>{class s extends y.Localized(S.FormElement(m.FormAssociated(a))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.swatches=[],this._canvasColor=""}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{this._refreshCanvasColor()})}get _computedCanvasColor(){return this._canvasColor||(this._canvasColor=_("--vvd-color-canvas",this)),this._canvasColor}_refreshCanvasColor(){this._canvasColor=_("--vvd-color-canvas",this)}_applyContrastClass(t,o=3){if(!t)return!1;const e=this._computedCanvasColor;return e?B(t,e)<o:!1}_getRowLength(){return 7}_handleSwatchSelection(t){this.value===t?this.value="":this.value=t,this.$emit("change"),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){const t=this._getFocusReturnEl();t&&u.Updates.enqueue(()=>t.focus())}_getGridCells(){const t=this.shadowRoot?.querySelector('[role="grid"]');return t?Array.from(t.querySelectorAll('[role="gridcell"], [data-vvd-role="gridcell"]')):[]}_handleCellKeydown(t,o,e,r){const l=this._getRowLength(),c=this._getGridCells().length,h=Math.floor(e/l),f=e%l,p=Math.ceil(c/l);switch(t.key){case"ArrowRight":return f<l-1&&e+1<c&&this._focusSwatchByIndex(e+1),!1;case"ArrowLeft":return f>0&&this._focusSwatchByIndex(e-1),!1;case"ArrowDown":return h<p-1&&e+l<c&&this._focusSwatchByIndex(e+l),!1;case"ArrowUp":return h>0&&this._focusSwatchByIndex(e-l),!1;case"PageDown":{const i=(p-1)*l,v=Math.min(i+f,c-1);return e!==v&&this._focusSwatchByIndex(v),!1}case"PageUp":{const i=Math.min(f,c-1);return e!==i&&this._focusSwatchByIndex(i),!1}case"Home":return t.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(h*l),!1;case"End":if(t.ctrlKey)this._focusSwatchByIndex(c-1);else{const i=Math.min((h+1)*l-1,c-1);this._focusSwatchByIndex(i)}return!1;case"Enter":case" ":return r&&this._handleColorSaving(),o&&!r&&(this._handleSwatchSelection(o),this._returnFocusToAnchor()),!1;case"Escape":return this.open=!1,this._returnFocusToAnchor(),!1;case"Tab":return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(t){const o=this._getGridCells();t<0||t>=o.length||o[t]?.focus()}_renderColorSwatch(t,o){return u.html`
-				<${o} placement="top" 
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./form-element.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`);function s(e){if(!e)return null;let t=e.trim().replace(/^#/,``);return/^[0-9a-fA-F]{3}$/.test(t)?t.split(``).map(e=>e+e).join(``).toLowerCase():/^[0-9a-fA-F]{6}$/.test(t)?t.toLowerCase():null}function c(e){return s(e)!==null}function l(e){let t=s(e);if(!t)return 0;let n=parseInt(t.slice(0,2),16)/255,r=parseInt(t.slice(2,4),16)/255,i=parseInt(t.slice(4,6),16)/255,a=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,c=i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*a+.7152*o+.0722*c}function u(e,t){let n=l(e),r=l(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function d(e,t){return t||=document.querySelector(`.vvd-root`)||document.documentElement,getComputedStyle(t).getPropertyValue(e).trim()}var f=s=>{class c extends e.t(i.t(o.n(s))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.open=!1,this.swatches=[],this._canvasColor=``}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{this._refreshCanvasColor()})}get _computedCanvasColor(){return this._canvasColor||=d(`--vvd-color-canvas`,this),this._canvasColor}_refreshCanvasColor(){this._canvasColor=d(`--vvd-color-canvas`,this)}_applyContrastClass(e,t=3){if(!e)return!1;let n=this._computedCanvasColor;return n?u(e,n)<t:!1}_getRowLength(){return 7}_handleSwatchSelection(e){this.value===e?this.value=``:this.value=e,this.$emit(`change`),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){let e=this._getFocusReturnEl();e&&t.O.enqueue(()=>e.focus())}_getGridCells(){let e=this.shadowRoot?.querySelector(`[role="grid"]`);return e?Array.from(e.querySelectorAll(`[role="gridcell"], [data-vvd-role="gridcell"]`)):[]}_handleCellKeydown(e,t,n,r){let i=this._getRowLength(),a=this._getGridCells().length,o=Math.floor(n/i),s=n%i,c=Math.ceil(a/i);switch(e.key){case`ArrowRight`:return s<i-1&&n+1<a&&this._focusSwatchByIndex(n+1),!1;case`ArrowLeft`:return s>0&&this._focusSwatchByIndex(n-1),!1;case`ArrowDown`:return o<c-1&&n+i<a&&this._focusSwatchByIndex(n+i),!1;case`ArrowUp`:return o>0&&this._focusSwatchByIndex(n-i),!1;case`PageDown`:{let e=(c-1)*i,t=Math.min(e+s,a-1);return n!==t&&this._focusSwatchByIndex(t),!1}case`PageUp`:{let e=Math.min(s,a-1);return n!==e&&this._focusSwatchByIndex(e),!1}case`Home`:return e.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(o*i),!1;case`End`:if(e.ctrlKey)this._focusSwatchByIndex(a-1);else{let e=Math.min((o+1)*i-1,a-1);this._focusSwatchByIndex(e)}return!1;case`Enter`:case` `:return r&&this._handleColorSaving(),t&&!r&&(this._handleSwatchSelection(t),this._returnFocusToAnchor()),!1;case`Escape`:return this.open=!1,this._returnFocusToAnchor(),!1;case`Tab`:return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(e){let t=this._getGridCells();e<0||e>=t.length||t[e]?.focus()}_renderColorSwatch(e,r){return t.d`
+				<${r} placement="top" 
 					text="${e=>e.label??e.value}" 
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
-						class="swatch ${(e,r)=>b.classNames(r.parent.value===e.value?"selected":"",r.parent._applyContrastClass(e.value)?"contrast":"")}"
+						class="swatch ${(e,t)=>a.t(t.parent.value===e.value?`selected`:``,t.parent._applyContrastClass(e.value)?`contrast`:``)}"
 						role="gridcell"
 						style="--swatch-color: ${e=>e.value};"
-						tabindex="${(e,r)=>r.index===0?"0":"-1"}"
-						aria-label="${(e,r)=>r.parent.locale.baseColorPicker.colorSwatchLabel(e.value,e.label,r.parent.value===e.value)}"
-						@click="${(e,r)=>r.parent._handleSwatchSelection(e.value)}"
-						@keydown="${(e,r)=>r.parent._handleCellKeydown(r.event,e.value,r.index)}"
+						tabindex="${(e,t)=>t.index===0?`0`:`-1`}"
+						aria-label="${(e,t)=>t.parent.locale.baseColorPicker.colorSwatchLabel(e.value,e.label,t.parent.value===e.value)}"
+						@click="${(e,t)=>t.parent._handleSwatchSelection(e.value)}"
+						@keydown="${(e,t)=>t.parent._handleCellKeydown(t.event,e.value,t.index)}"
 					>
-						${g.when((e,r)=>r.parent.value===e.value,u.html`<${t} size="-6" name="check-solid" aria-hidden="true"></${t}>`)}
+						${n.t((e,t)=>t.parent.value===e.value,t.d`<${e} size="-6" name="check-solid" aria-hidden="true"></${e}>`)}
 					</button>
-				</${o}>
-			`}}return d([u.attr({mode:"boolean"})],s.prototype,"open"),d([u.observable],s.prototype,"swatches"),d([u.observable],s.prototype,"_canvasColor"),s};exports.BaseColorPicker=A;exports.isValidHexColor=I;
+				</${r}>
+			`}}return r.t([t.l({mode:`boolean`})],c.prototype,`open`,void 0),r.t([t.T],c.prototype,`swatches`,void 0),r.t([t.T],c.prototype,`_canvasColor`,void 0),c};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});