@vonage/vivid 5.0.0 → 5.2.0

package/breadcrumb/index.cjs

@@ -1,5 +1,12 @@
-'use strict';
-
-const definition = require('../shared/definition10.cjs');
-
-definition.registerBreadcrumb();
+"use strict";const l=require("../bundled/vivid-element.cjs"),d=require("../bundled/delegates-aria.cjs"),n=require("../bundled/slotted.cjs"),u=require("../bundled/breadcrumb-item.cjs"),b=l.html`
+	<nav
+		class="base"
+		${d.delegateAria({ariaLabel:i=>i.ariaLabel||"breadcrumbs"})}
+	>
+		<div role="list" class="list">
+			<slot
+				${n.slotted({property:"slottedBreadcrumbItems",filter:n.elements()})}
+			></slot>
+		</div>
+	</nav>
+`,f=".list{display:flex}";var m=Object.defineProperty,h=(i,e,r,s)=>{for(var t=void 0,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=o(e,r,t)||t);return t&&m(e,r,t),t};class c extends d.DelegatesAria(l.VividElement){slottedBreadcrumbItemsChanged(e,r){r&&r.forEach((s,t)=>{const a=t===r.length-1;this.setItemSeparator(s,a),this.setAriaCurrent(s,a)})}setItemSeparator(e,r){e instanceof u.BreadcrumbItem&&(e.separator=!r)}findChildWithHref(e){return e.childElementCount>0?e.querySelector("a[href]"):e.shadowRoot?e.shadowRoot.querySelector("a[href]"):null}setAriaCurrent(e,r){const s=this.findChildWithHref(e);s!==null&&(r?s.setAttribute("aria-current","page"):s.removeAttribute("aria-current"))}}h([l.observable],c.prototype,"slottedBreadcrumbItems");const v=l.defineVividComponent("breadcrumb",c,b,[],{styles:f}),p=l.createRegisterFunction(v);p();

package/breadcrumb/index.js

@@ -1,3 +1,69 @@
-import { r as registerBreadcrumb } from '../shared/definition10.js';
-
-registerBreadcrumb();
+import { h as d, V as n, o as c, c as m, d as f } from "../bundled/vivid-element.js";
+import { d as u, D as b } from "../bundled/delegates-aria.js";
+import { s as h, e as p } from "../bundled/slotted.js";
+import { B as v } from "../bundled/breadcrumb-item.js";
+const C = d`
+	<nav
+		class="base"
+		${u({
+  ariaLabel: (i) => i.ariaLabel || "breadcrumbs"
+})}
+	>
+		<div role="list" class="list">
+			<slot
+				${h({
+  property: "slottedBreadcrumbItems",
+  filter: p()
+})}
+			></slot>
+		</div>
+	</nav>
+`, g = ".list{display:flex}";
+var B = Object.defineProperty, y = (i, e, r, a) => {
+  for (var t = void 0, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (t = o(e, r, t) || t);
+  return t && B(e, r, t), t;
+};
+class l extends b(n) {
+  /**
+   * @internal
+   */
+  slottedBreadcrumbItemsChanged(e, r) {
+    r && r.forEach((a, t) => {
+      const s = t === r.length - 1;
+      this.setItemSeparator(a, s), this.setAriaCurrent(a, s);
+    });
+  }
+  setItemSeparator(e, r) {
+    e instanceof v && (e.separator = !r);
+  }
+  /**
+   * Finds href on childnodes in the light DOM or shadow DOM.
+   * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+   */
+  findChildWithHref(e) {
+    return e.childElementCount > 0 ? e.querySelector("a[href]") : e.shadowRoot ? e.shadowRoot.querySelector("a[href]") : null;
+  }
+  /**
+   *  Sets ARIA Current for the current node
+   * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+   * otherwise apply aria-current to the host element, with an href
+   */
+  setAriaCurrent(e, r) {
+    const a = this.findChildWithHref(e);
+    a !== null && (r ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current"));
+  }
+}
+y([
+  c
+], l.prototype, "slottedBreadcrumbItems");
+const A = f(
+  "breadcrumb",
+  l,
+  C,
+  [],
+  {
+    styles: g
+  }
+), I = m(A);
+I();

package/{shared/definition9.cjs → breadcrumb-item/definition.cjs}

@@ -1,25 +1,27 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const breadcrumbItem = require('./breadcrumb-item.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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(--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}.control:any-link:hover{text-decoration:underline}";
+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 getClasses = (_) => classNames.classNames("base");
+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(--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(definition.Icon);
-  return vividElement.html` <div role="listitem" class="${getClasses}">
-		${when.when((x) => x.text && !x.href, vividElement.html`${(x) => x.text}`)}
-		${when.when(
+  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,
-    vividElement.html`${(x) => x._renderLinkElement(vividElement.html`${(x2) => x2.text}`, "control")}`
+    fastElement.html`${(x) => x._renderLinkElement(fastElement.html`${(x2) => x2.text}`, "control")}`
   )}
-		${when.when(
+		${fastElement.when(
     (x) => x.separator,
-    vividElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+    fastElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
   )}
 	</div>`;
 };
@@ -28,7 +30,7 @@ const breadcrumbItemDefinition = vividElement.defineVividComponent(
   "breadcrumb-item",
   breadcrumbItem.BreadcrumbItem,
   BreadcrumbItemTemplate,
-  [definition.iconDefinition],
+  [icon_definition.iconDefinition],
   {
     styles,
     shadowOptions: {
@@ -40,5 +42,6 @@ const registerBreadcrumbItem = vividElement.createRegisterFunction(
   breadcrumbItemDefinition
 );
 
+exports.VwcBreadcrumbItemElement = breadcrumbItem.BreadcrumbItem;
 exports.breadcrumbItemDefinition = breadcrumbItemDefinition;
 exports.registerBreadcrumbItem = registerBreadcrumbItem;

package/{shared/definition9.js → breadcrumb-item/definition.js}

@@ -1,10 +1,10 @@
-import { I as Icon, i as iconDefinition } from './definition28.js';
-import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { B as BreadcrumbItem } from './breadcrumb-item.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+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(--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}.control:any-link:hover{text-decoration:underline}";
+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(--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) => {
@@ -38,4 +38,4 @@ const registerBreadcrumbItem = createRegisterFunction(
   breadcrumbItemDefinition
 );
 
-export { breadcrumbItemDefinition as b, registerBreadcrumbItem as r };
+export { BreadcrumbItem as VwcBreadcrumbItemElement, breadcrumbItemDefinition, registerBreadcrumbItem };

package/breadcrumb-item/index.cjs

@@ -1,5 +1,5 @@
-'use strict';
-
-const definition = require('../shared/definition9.cjs');
-
-definition.registerBreadcrumbItem();
+"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),c=require("../bundled/class-names.cjs"),t=require("../bundled/when.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(--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=r=>c.classNames("base"),u=r=>{const n=r.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
+		${t.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
+		${t.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
+		${t.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();

package/breadcrumb-item/index.js

@@ -1,3 +1,33 @@
-import { r as registerBreadcrumbItem } from '../shared/definition9.js';
-
-registerBreadcrumbItem();
+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 { c as v } from "../bundled/class-names.js";
+import { w as e } from "../bundled/when.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(--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 a = 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`${(s) => s.text}`, "control")}`
+  )}
+		${e(
+    (o) => o.separator,
+    r`<${a} class="separator" name="chevron-right-solid"></${a}>`
+  )}
+	</div>`;
+}, u = l(
+  "breadcrumb-item",
+  d,
+  f,
+  [n],
+  {
+    styles: m,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), b = c(
+  u
+);
+b();

package/bundled/_has.cjs

@@ -0,0 +1 @@
+"use strict";function e(r){return r!=null&&typeof r=="object"&&r["@@functional/placeholder"]===!0}function o(r){return function n(t){return arguments.length===0||e(t)?n:r.apply(this,arguments)}}function i(r){return function n(t,c){switch(arguments.length){case 0:return n;case 1:return e(t)?n:o(function(u){return r(t,u)});default:return e(t)&&e(c)?n:e(t)?o(function(u){return r(u,c)}):e(c)?o(function(u){return r(t,u)}):r(t,c)}}}function l(r,n){return Object.prototype.hasOwnProperty.call(n,r)}exports._curry1=o;exports._curry2=i;exports._has=l;

package/bundled/_has.js

@@ -0,0 +1,34 @@
+function e(r) {
+  return r != null && typeof r == "object" && r["@@functional/placeholder"] === !0;
+}
+function o(r) {
+  return function n(t) {
+    return arguments.length === 0 || e(t) ? n : r.apply(this, arguments);
+  };
+}
+function i(r) {
+  return function n(t, c) {
+    switch (arguments.length) {
+      case 0:
+        return n;
+      case 1:
+        return e(t) ? n : o(function(u) {
+          return r(t, u);
+        });
+      default:
+        return e(t) && e(c) ? n : e(t) ? o(function(u) {
+          return r(u, c);
+        }) : e(c) ? o(function(u) {
+          return r(t, u);
+        }) : r(t, c);
+    }
+  };
+}
+function l(r, n) {
+  return Object.prototype.hasOwnProperty.call(n, r);
+}
+export {
+  l as _,
+  o as a,
+  i as b
+};

package/bundled/affix.cjs

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

package/bundled/affix.js

@@ -0,0 +1,63 @@
+import { I as f } from "./definition2.js";
+import { s as d } from "./slotted.js";
+import { a as p, h as s, o as u } from "./vivid-element.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([
+    u
+  ], 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
+				name="icon"
+				aria-hidden="${() => o}"
+				${d("iconSlottedContent")}
+			></slot>`;
+    if (!e && i)
+      return null;
+    const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = i ? "span" : "slot";
+    return s`<${c}
+					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}"
+			  >
+					${t}
+			  </${c}>`;
+  };
+};
+export {
+  x as A,
+  v as I,
+  T as a,
+  m as b,
+  b as c
+};

package/bundled/anchored.cjs

@@ -0,0 +1,4 @@
+"use strict";const n=require("./vivid-element.cjs"),l=require("./slotted.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
+		name="anchor"
+		${l.slotted("_slottedAnchor")}
+	></slot>`;exports.Anchored=d;exports.anchorSlotTemplateFactory=u;

package/bundled/anchored.js

@@ -0,0 +1,67 @@
+import { h as a, D as l, a as d, o as i } from "./vivid-element.js";
+import { s as p } from "./slotted.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);
+      l.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([
+    d
+  ], o.prototype, "anchor"), h([
+    i
+  ], o.prototype, "_slottedAnchor"), h([
+    i
+  ], o.prototype, "_anchorEl"), o;
+}, b = () => a`<slot
+		name="anchor"
+		${p("_slottedAnchor")}
+	></slot>`;
+export {
+  v as A,
+  b as a
+};

package/bundled/aria.cjs

@@ -0,0 +1 @@
+"use strict";const t={horizontal:"horizontal",vertical:"vertical"};exports.Orientation=t;

package/bundled/aria.js

@@ -0,0 +1,7 @@
+const t = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+export {
+  t as O
+};

package/bundled/attribute-binding-behaviour.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./vivid-element.cjs");class r{constructor(i,t,s,n){this.target=i,this.binding=t,this.isBindingVolatile=s,this.attributeName=n,this.source=null,this.context=null}bind(i,t){this.source=i,this.context=t,this.bindingObserver||(this.bindingObserver=e.Observable.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(i,t))}unbind(){this.bindingObserver.disconnect(),this.source=null,this.context=null}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(i){e.DOM.setAttribute(this.target,this.attributeName,i)}}exports.AttributeBindingBehavior=r;

package/bundled/attribute-binding-behaviour.js

@@ -0,0 +1,27 @@
+import { O as n, D as r } from "./vivid-element.js";
+class a {
+  constructor(i, t, s, e) {
+    this.target = i, this.binding = t, this.isBindingVolatile = s, this.attributeName = e, this.source = null, this.context = null;
+  }
+  bind(i, t) {
+    this.source = i, this.context = t, this.bindingObserver || (this.bindingObserver = n.binding(
+      this.binding,
+      this,
+      this.isBindingVolatile
+    )), this.updateTarget(this.bindingObserver.observe(i, t));
+  }
+  unbind() {
+    this.bindingObserver.disconnect(), this.source = null, this.context = null;
+  }
+  handleChange() {
+    this.updateTarget(
+      this.bindingObserver.observe(this.source, this.context)
+    );
+  }
+  updateTarget(i) {
+    r.setAttribute(this.target, this.attributeName, i);
+  }
+}
+export {
+  a as A
+};

package/bundled/base-progress.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("./vivid-element.cjs");var c=Object.defineProperty,o=(a,n,s,i)=>{for(var e=void 0,l=a.length-1,p;l>=0;l--)(p=a[l])&&(e=p(n,s,e)||e);return e&&c(n,s,e),e};class r extends t.VividElement{constructor(){super(...arguments),this.percentComplete=0}valueChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}minChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}maxChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}connectedCallback(){super.connectedCallback(),this.updatePercentComplete()}updatePercentComplete(){const n=typeof this.min=="number"?this.min:0,s=typeof this.max=="number"?this.max:100,i=typeof this.value=="number"?this.value:0,e=s-n;this.percentComplete=e===0?0:Math.fround((i-n)/e*100)}}o([t.attr({converter:t.nullableNumberConverter})],r.prototype,"value");o([t.attr({converter:t.nullableNumberConverter})],r.prototype,"min");o([t.attr({converter:t.nullableNumberConverter})],r.prototype,"max");o([t.attr({mode:"boolean"})],r.prototype,"paused");o([t.observable],r.prototype,"percentComplete");exports.BaseProgress=r;

package/bundled/base-progress.js

@@ -0,0 +1,57 @@
+import { V as m, a, n as l, o as u } from "./vivid-element.js";
+var d = Object.defineProperty, n = (s, t, r, i) => {
+  for (var e = void 0, p = s.length - 1, c; p >= 0; p--)
+    (c = s[p]) && (e = c(t, r, e) || e);
+  return e && d(t, r, e), e;
+};
+class o extends m {
+  constructor() {
+    super(...arguments), this.percentComplete = 0;
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.$fastController.isConnected && this.updatePercentComplete();
+  }
+  /**
+   * @internal
+   */
+  minChanged() {
+    this.$fastController.isConnected && this.updatePercentComplete();
+  }
+  /**
+   * @private
+   */
+  maxChanged() {
+    this.$fastController.isConnected && this.updatePercentComplete();
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.updatePercentComplete();
+  }
+  updatePercentComplete() {
+    const t = typeof this.min == "number" ? this.min : 0, r = typeof this.max == "number" ? this.max : 100, i = typeof this.value == "number" ? this.value : 0, e = r - t;
+    this.percentComplete = e === 0 ? 0 : Math.fround((i - t) / e * 100);
+  }
+}
+n([
+  a({ converter: l })
+], o.prototype, "value");
+n([
+  a({ converter: l })
+], o.prototype, "min");
+n([
+  a({ converter: l })
+], o.prototype, "max");
+n([
+  a({ mode: "boolean" })
+], o.prototype, "paused");
+n([
+  u
+], o.prototype, "percentComplete");
+export {
+  o as B
+};

package/bundled/breadcrumb-item.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("./vivid-element.cjs"),l=require("./linkable.cjs");var p=Object.defineProperty,u=(r,i,n,v)=>{for(var e=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(e=o(i,n,e)||e);return e&&p(i,n,e),e};class a extends l.Linkable(s.VividElement){constructor(){super(...arguments),this.separator=!0}}u([s.attr],a.prototype,"text");u([s.observable],a.prototype,"separator");exports.BreadcrumbItem=a;

package/bundled/breadcrumb-item.js

@@ -0,0 +1,21 @@
+import { V as n, a as m, o as f } from "./vivid-element.js";
+import { L as l } from "./linkable.js";
+var u = Object.defineProperty, p = (e, a, s, v) => {
+  for (var r = void 0, t = e.length - 1, o; t >= 0; t--)
+    (o = e[t]) && (r = o(a, s, r) || r);
+  return r && u(a, s, r), r;
+};
+class i extends l(n) {
+  constructor() {
+    super(...arguments), this.separator = !0;
+  }
+}
+p([
+  m
+], i.prototype, "text");
+p([
+  f
+], i.prototype, "separator");
+export {
+  i as B
+};

package/bundled/button.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("./delegates-aria.cjs"),e=require("./vivid-element.cjs"),d=require("./form-associated.cjs");var l=Object.defineProperty,r=(n,t,o,p)=>{for(var s=void 0,a=n.length-1,h;a>=0;a--)(h=n[a])&&(s=h(t,o,s)||s);return s&&l(t,o,s),s};class i extends c.DelegatesAria(d.FormAssociated(e.VividElement)){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.handleClick=t=>{this.disabled&&t.stopPropagation()},this.handleSubmission=()=>{this.form&&(this.attachProxy(),this.form.requestSubmit(this.proxy),this.detachProxy())},this.handleFormReset=()=>{this.form?.reset()},this.handleUnsupportedDelegatesFocus=()=>{this.$fastController.definition.shadowOptions&&window.ShadowRoot&&!window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus")&&this.$fastController.definition.shadowOptions.delegatesFocus&&Object.defineProperty(this,"focus",{value:()=>{this.control.focus()},configurable:!0})}}formactionChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formAction=this.formaction)}formenctypeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formEnctype=this.formenctype)}formmethodChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formMethod=this.formmethod)}formnovalidateChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formNoValidate=this.formnovalidate)}formtargetChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formTarget=this.formtarget)}typeChanged(t,o){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type),o==="submit"&&this.addEventListener("click",this.handleSubmission),t==="submit"&&this.removeEventListener("click",this.handleSubmission),o==="reset"&&this.addEventListener("click",this.handleFormReset),t==="reset"&&this.removeEventListener("click",this.handleFormReset)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.handleUnsupportedDelegatesFocus(),this.autofocus&&e.DOM.queueUpdate(()=>{this.focus()});const t=Array.from(this.control.children);t&&t.forEach(o=>{o.addEventListener("click",this.handleClick)})}disconnectedCallback(){super.disconnectedCallback();const t=Array.from(this.control.children);t&&t.forEach(o=>{o.removeEventListener("click",this.handleClick)})}}r([e.attr({mode:"boolean"})],i.prototype,"autofocus");r([e.attr({attribute:"form"})],i.prototype,"formId");r([e.attr],i.prototype,"formaction");r([e.attr],i.prototype,"formenctype");r([e.attr],i.prototype,"formmethod");r([e.attr({mode:"boolean"})],i.prototype,"formnovalidate");r([e.attr],i.prototype,"formtarget");r([e.attr],i.prototype,"type");exports.VividFoundationButton=i;