@vonage/vivid 5.8.0 → 5.10.0

package/bundled/vivid-element.js

@@ -44,6 +44,25 @@ var tt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
 function ci(i) {
   return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
+function di(i) {
+  if (i.__esModule) return i;
+  var t = i.default;
+  if (typeof t == "function") {
+    var e = function s() {
+      return this instanceof s ? Reflect.construct(t, arguments, this.constructor) : t.apply(this, arguments);
+    };
+    e.prototype = t.prototype;
+  } else e = {};
+  return Object.defineProperty(e, "__esModule", { value: !0 }), Object.keys(i).forEach(function(s) {
+    var n = Object.getOwnPropertyDescriptor(i, s);
+    Object.defineProperty(e, s, n.get ? n : {
+      enumerable: !0,
+      get: function() {
+        return i[s];
+      }
+    });
+  }), e;
+}
 (function() {
   if (!(typeof globalThis < "u"))
     if (typeof tt < "u")
@@ -93,7 +112,7 @@ v.error === void 0 && Object.assign(v, {
   addMessages() {
   }
 });
-const di = Object.freeze([]);
+const hi = Object.freeze([]);
 function Pt() {
   const i = /* @__PURE__ */ new Map();
   return Object.freeze({
@@ -529,10 +548,10 @@ const J = Object.freeze({
     }
   });
 });
-function hi(i, t) {
+function ui(i, t) {
   g.defineProperty(i, t);
 }
-function ui(i, t, e) {
+function fi(i, t, e) {
   return Object.assign({}, e, {
     get() {
       return g.trackVolatile(), e.get.apply(this);
@@ -783,7 +802,7 @@ function U(i) {
 }
 const ct = `fast-${Math.random().toString(36).substring(2, 8)}`, H = `${ct}{`, R = `}${ct}`, ve = R.length;
 let me = 0;
-const L = () => `${ct}-${++me}`, Kt = Object.freeze({
+const j = () => `${ct}-${++me}`, Kt = Object.freeze({
   /**
    * Creates a placeholder string suitable for marking out a location *within*
    * an attribute value or HTML content.
@@ -800,7 +819,7 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    * @remarks
    * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
    */
-  attribute: (i) => `${L()}="${H}${i}${R}"`,
+  attribute: (i) => `${j()}="${H}${i}${R}"`,
   /**
    * Creates a placeholder that manifests itself as a marker within the DOM structure.
    * @param index - The directive index to create the placeholder for.
@@ -1460,7 +1479,7 @@ class Re {
   }
   addFactory(t, e, s, n, r) {
     var o, c;
-    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (o = t.id) !== null && o !== void 0 ? o : L(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
+    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (o = t.id) !== null && o !== void 0 ? o : j(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
   }
   freeze() {
     return this.proto = Object.create(null, this.descriptors), this;
@@ -1503,7 +1522,7 @@ function se(i, t, e, s, n, r = !1) {
     u === null ? r && (b = new M(Gt(() => h, i.policy)), $.assignAspect(b, a.name)) : b = ht.aggregate(u, i.policy), b !== null && (e.removeAttributeNode(a), d--, l--, i.addFactory(b, t, s, n, e.tagName));
   }
 }
-function Ie(i, t, e, s, n) {
+function _e(i, t, e, s, n) {
   const r = K.parse(t.textContent, i.directives);
   if (r === null)
     return C.node = t.nextSibling, C.index = n + 1, C;
@@ -1517,18 +1536,18 @@ function Ie(i, t, e, s, n) {
 function ne(i, t, e) {
   let s = 0, n = t.firstChild;
   for (; n; ) {
-    const r = _e(i, e, n, s);
+    const r = Ie(i, e, n, s);
     n = r.node, s = r.index;
   }
 }
-function _e(i, t, e, s) {
+function Ie(i, t, e, s) {
   const n = ie(t, s);
   switch (e.nodeType) {
     case 1:
       se(i, t, e, n, s), ne(i, e, n);
       break;
     case 3:
-      return Ie(i, e, t, n, s);
+      return _e(i, e, t, n, s);
     case 8:
       const r = K.parse(e.data, i.directives);
       r !== null && i.addFactory(
@@ -1543,7 +1562,7 @@ function _e(i, t, e, s) {
   }
   return C.index = s + 1, C.node = e.nextSibling, C;
 }
-function Le(i, t) {
+function je(i, t) {
   return i && i.nodeType == 8 && K.parse(i.data, t) !== null;
 }
 const At = "TEMPLATE", ht = {
@@ -1581,7 +1600,7 @@ const At = "TEMPLATE", ht = {
     // because something like a when, repeat, etc. could add nodes before the marker.
     // To mitigate this, we insert a stable first node. However, if we insert a node,
     // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-    (Le(n.firstChild, t) || // Or if there is only one node and a directive, it means the template's content
+    (je(n.firstChild, t) || // Or if there is only one node and a directive, it means the template's content
     // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
     // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
     n.childNodes.length === 1 && Object.keys(t).length > 0) && n.insertBefore(document.createComment(""), n.firstChild), ne(
@@ -1618,16 +1637,16 @@ const At = "TEMPLATE", ht = {
     }, d = new M(Wt(c, n ?? t, s));
     return $.assignAspect(d, e), d;
   }
-}, Ve = (
+}, Le = (
   /* eslint-disable-next-line no-control-regex, max-len */
   /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/
-), je = /* @__PURE__ */ Object.create(null);
-class V {
+), Ve = /* @__PURE__ */ Object.create(null);
+class L {
   /**
    * Creates an instance of InlineTemplateDirective.
    * @param template - The template to inline.
    */
-  constructor(t, e = je) {
+  constructor(t, e = Ve) {
     this.html = t, this.factories = e;
   }
   /**
@@ -1641,11 +1660,11 @@ class V {
     return this.html;
   }
 }
-V.empty = new V("");
-$.define(V);
+L.empty = new L("");
+$.define(L);
 function Fe(i, t, e, s = $.getForInstance(i)) {
   if (s.aspected) {
-    const n = Ve.exec(t);
+    const n = Le.exec(t);
     n !== null && $.assignAspect(i, n[2]);
   }
   return i.createHTML(e);
@@ -1677,7 +1696,7 @@ class Y {
    * Returns a directive that can inline the template.
    */
   inline() {
-    return new V(B(this.html) ? this.html : this.html.innerHTML, this.factories);
+    return new L(B(this.html) ? this.html : this.html.innerHTML, this.factories);
   }
   /**
    * Sets the DOMPolicy for this template.
@@ -1728,7 +1747,7 @@ class Y {
     let n = "";
     const r = /* @__PURE__ */ Object.create(null), o = (c) => {
       var d;
-      const l = (d = c.id) !== null && d !== void 0 ? d : c.id = L();
+      const l = (d = c.id) !== null && d !== void 0 ? d : c.id = j();
       return r[l] = c, l;
     };
     for (let c = 0, d = t.length - 1; c < d; ++c) {
@@ -1756,7 +1775,7 @@ const re = (i, ...t) => {
     /* Message.directCallToHTMLTagNotAllowed */
   );
 };
-re.partial = (i) => new V(i);
+re.partial = (i) => new L(i);
 const Mt = "boolean", Ot = "reflect", ae = Object.freeze({
   /**
    * Locates all attribute configurations associated with a type.
@@ -1776,7 +1795,7 @@ function Et(i) {
   const t = i * 1;
   return isNaN(t) ? null : t;
 }
-const fi = {
+const pi = {
   toView(i) {
     const t = Et(i);
     return t && t.toString();
@@ -1891,7 +1910,7 @@ var Pe = function(i, t, e, s) {
     l((s = s.apply(i, t || [])).next());
   });
 };
-const Rt = { mode: "open" }, It = {}, it = /* @__PURE__ */ new Set(), I = v.getById(N.elementRegistry, () => Pt()), ze = {
+const Rt = { mode: "open" }, _t = {}, it = /* @__PURE__ */ new Set(), _ = v.getById(N.elementRegistry, () => Pt()), ze = {
   deferAndHydrate: "defer-and-hydrate"
 };
 class p {
@@ -1906,7 +1925,7 @@ class p {
     Reflect.defineProperty(t, "observedAttributes", {
       value: o,
       enumerable: !0
-    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? Rt : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Rt), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? It : Object.assign(Object.assign({}, It), e.elementOptions), this.styles = m.normalize(e.styles), I.register(this), g.defineProperty(p.isRegistered, this.name), p.isRegistered[this.name] = this.type;
+    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? Rt : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Rt), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? _t : Object.assign(Object.assign({}, _t), e.elementOptions), this.styles = m.normalize(e.styles), _.register(this), g.defineProperty(p.isRegistered, this.name), p.isRegistered[this.name] = this.type;
   }
   /**
    * Indicates if this element has been defined in at least one registry.
@@ -1932,7 +1951,7 @@ class p {
    * that describes the element to define.
    */
   static compose(t, e) {
-    return it.has(t) || I.getByType(t) ? new p(class extends t {
+    return it.has(t) || _.getByType(t) ? new p(class extends t {
     }, e) : new p(t, e);
   }
   /**
@@ -1954,7 +1973,7 @@ class p {
    */
   static composeAsync(t, e) {
     return new Promise((s) => {
-      (it.has(t) || I.getByType(t)) && s(new p(class extends t {
+      (it.has(t) || _.getByType(t)) && s(new p(class extends t {
       }, e));
       const n = new p(t, e);
       g.getNotifier(n).subscribe({
@@ -1967,8 +1986,8 @@ class p {
   }
 }
 p.isRegistered = {};
-p.getByType = I.getByType;
-p.getForInstance = I.getForInstance;
+p.getByType = _.getByType;
+p.getForInstance = _.getForInstance;
 p.registerAsync = (i) => Pe(void 0, void 0, void 0, function* () {
   return new Promise((t) => {
     p.isRegistered[i] && t(p.isRegistered[i]), g.getNotifier(p.isRegistered).subscribe({ handleChange: () => t(p.isRegistered[i]) }, i);
@@ -1993,7 +2012,7 @@ class Ue extends MutationObserver {
     this.observedNodes.delete(t), this.observedNodes.size < 1 && this.disconnect();
   }
 }
-const pi = Object.freeze({
+const bi = Object.freeze({
   /**
    * Creates a ViewBehaviorOrchestrator.
    * @param source - The source to to associate behaviors with.
@@ -2012,7 +2031,7 @@ const pi = Object.freeze({
       addBehaviorFactory(r, o) {
         var c, d, l, a;
         const h = r;
-        h.id = (c = h.id) !== null && c !== void 0 ? c : L(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : L(), h.targetTagName = (l = o.tagName) !== null && l !== void 0 ? l : null, h.policy = (a = h.policy) !== null && a !== void 0 ? a : T.policy, this.addTarget(h.targetNodeId, o), this.addBehavior(h.createBehavior());
+        h.id = (c = h.id) !== null && c !== void 0 ? c : j(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : j(), h.targetTagName = (l = o.tagName) !== null && l !== void 0 ? l : null, h.policy = (a = h.policy) !== null && a !== void 0 ? a : T.policy, this.addTarget(h.targetNodeId, o), this.addBehavior(h.createBehavior());
       },
       addTarget(r, o) {
         e[r] = o;
@@ -2036,11 +2055,11 @@ const pi = Object.freeze({
   composed: !0,
   cancelable: !0
 }, P = "isConnected", oe = /* @__PURE__ */ new WeakMap();
-function _(i) {
+function I(i) {
   var t, e;
   return (e = (t = i.shadowRoot) !== null && t !== void 0 ? t : oe.get(i)) !== null && e !== void 0 ? e : null;
 }
-let _t;
+let It;
 class S extends qt {
   /**
    * Creates a Controller to control the specified element.
@@ -2171,7 +2190,7 @@ class S extends qt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = _(s)) !== null && e !== void 0 ? e : this.source).append(t);
+      ((e = I(s)) !== null && e !== void 0 ? e : this.source).append(t);
     else if (!t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.addStylesTo(s), n !== null)
@@ -2189,7 +2208,7 @@ class S extends qt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = _(s)) !== null && e !== void 0 ? e : s).removeChild(t);
+      ((e = I(s)) !== null && e !== void 0 ? e : s).removeChild(t);
     else if (t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.removeStylesFrom(s), n !== null)
@@ -2279,7 +2298,7 @@ class S extends qt {
    */
   renderTemplate(t) {
     var e;
-    const s = this.source, n = (e = _(s)) !== null && e !== void 0 ? e : s;
+    const s = this.source, n = (e = I(s)) !== null && e !== void 0 ? e : s;
     if (this.view !== null)
       this.view.dispose(), this.view = null;
     else if (!this.needsInitialization || this.hasExistingShadowRoot) {
@@ -2316,7 +2335,7 @@ class S extends qt {
       handleChange: () => {
         S.forCustomElement(t, !0), t.$fastController.connect();
       }
-    }, "shadowOptions"), t.$fastController = new _t(t, n);
+    }, "shadowOptions"), t.$fastController = new It(t, n);
   }
   /**
    * Sets the strategy that ElementController.forCustomElement uses to construct
@@ -2324,14 +2343,14 @@ class S extends qt {
    * @param strategy - The strategy to use.
    */
   static setStrategy(t) {
-    _t = t;
+    It = t;
   }
 }
 x(S);
 S.setStrategy(S);
 function Q(i) {
   var t;
-  return "adoptedStyleSheets" in i ? i : (t = _(i)) !== null && t !== void 0 ? t : i.getRootNode();
+  return "adoptedStyleSheets" in i ? i : (t = I(i)) !== null && t !== void 0 ? t : i.getRootNode();
 }
 class Z {
   constructor(t) {
@@ -2353,7 +2372,7 @@ class Z {
 Z.styleSheetCache = /* @__PURE__ */ new Map();
 let We = 0;
 const Qe = () => `fast-${++We}`;
-function Lt(i) {
+function jt(i) {
   return i === document ? document.body : i;
 }
 class Ge {
@@ -2361,7 +2380,7 @@ class Ge {
     this.styles = t, this.styleClass = Qe();
   }
   addStylesTo(t) {
-    t = Lt(Q(t));
+    t = jt(Q(t));
     const e = this.styles, s = this.styleClass;
     for (let n = 0; n < e.length; n++) {
       const r = document.createElement("style");
@@ -2369,7 +2388,7 @@ class Ge {
     }
   }
   removeStylesFrom(t) {
-    t = Lt(Q(t));
+    t = jt(Q(t));
     const e = t.querySelectorAll(`.${this.styleClass}`);
     for (let s = 0, n = e.length; s < n; ++s)
       t.removeChild(e[s]);
@@ -2395,7 +2414,7 @@ if (m.supportsAdoptedStyleSheets) {
   m.setDefaultStrategy(Z);
 } else
   m.setDefaultStrategy(Ge);
-const j = "defer-hydration", st = "needs-hydration";
+const V = "defer-hydration", st = "needs-hydration";
 class f extends S {
   /**
    * {@inheritdoc ElementController.shadowOptions}
@@ -2404,7 +2423,7 @@ class f extends S {
     return super.shadowOptions;
   }
   set shadowOptions(t) {
-    super.shadowOptions = t, (this.hasExistingShadowRoot || t !== void 0 && !this.template) && this.definition.templateOptions === ze.deferAndHydrate && (this.source.toggleAttribute(j, !0), this.source.toggleAttribute(st, !0));
+    super.shadowOptions = t, (this.hasExistingShadowRoot || t !== void 0 && !this.template) && this.definition.templateOptions === ze.deferAndHydrate && (this.source.toggleAttribute(V, !0), this.source.toggleAttribute(st, !0));
   }
   /**
    * Adds the current element instance to the hydrating instances map
@@ -2424,7 +2443,7 @@ class f extends S {
   }
   static hydrationObserverHandler(t) {
     for (const e of t)
-      e.target.hasAttribute(j) || (f.hydrationObserver.unobserve(e.target), e.target.$fastController.connect());
+      e.target.hasAttribute(V) || (f.hydrationObserver.unobserve(e.target), e.target.$fastController.connect());
   }
   /**
    * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
@@ -2446,9 +2465,9 @@ class f extends S {
    */
   connect() {
     var t, e, s, n, r;
-    if (this.needsHydration = (t = this.needsHydration) !== null && t !== void 0 ? t : this.source.hasAttribute(st), this.needsHydration && ((s = (e = f.lifecycleCallbacks) === null || e === void 0 ? void 0 : e.elementWillHydrate) === null || s === void 0 || s.call(e, this.definition.name)), this.source.hasAttribute(j)) {
+    if (this.needsHydration = (t = this.needsHydration) !== null && t !== void 0 ? t : this.source.hasAttribute(st), this.needsHydration && ((s = (e = f.lifecycleCallbacks) === null || e === void 0 ? void 0 : e.elementWillHydrate) === null || s === void 0 || s.call(e, this.definition.name)), this.source.hasAttribute(V)) {
       this.addHydratingInstance(), f.hydrationObserver.observe(this.source, {
-        attributeFilter: [j]
+        attributeFilter: [V]
       });
       return;
     }
@@ -2459,7 +2478,7 @@ class f extends S {
     if (this.stage === 3) {
       if (this.stage = 0, this.bindObservables(), this.connectBehaviors(), this.template)
         if (U(this.template)) {
-          const o = this.source, c = (n = _(o)) !== null && n !== void 0 ? n : o;
+          const o = this.source, c = (n = I(o)) !== null && n !== void 0 ? n : o;
           let d = c.firstChild, l = c.lastChild;
           o.shadowRoot === null && (w.isElementBoundaryStartMarker(d) && (d.data = "", d = d.nextSibling), w.isElementBoundaryEndMarker(l) && (l.data = "", l = l.previousSibling)), this.view = this.template.hydrate(d, l, o), (r = this.view) === null || r === void 0 || r.bind(this.source);
         } else
@@ -2564,14 +2583,14 @@ const Ze = Object.assign(de(HTMLElement), {
 function ti(i, t) {
   return i instanceof Function ? i(t) : i;
 }
-const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), bi = (i) => (t = "vwc") => {
+const Lt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), gi = (i) => (t = "vwc") => {
   const e = (n) => `${t}-${n}`, s = (n) => {
     const r = e(n.name);
     let o = n.type;
-    if (o.componentName = n.name, Vt.has(r))
+    if (o.componentName = n.name, Lt.has(r))
       return;
     nt.has(o) && nt.get(o) !== r && (o = class extends o {
-    }), Vt.add(r), nt.set(o, r);
+    }), Lt.add(r), nt.set(o, r);
     for (const a of n.dependencies)
       s(a);
     const c = new Map([
@@ -2602,16 +2621,16 @@ const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), bi = (i) =
     }).define();
   };
   s(i);
-}, gi = (i, t, e, s, n) => ({
+}, yi = (i, t, e, s, n) => ({
   name: i,
   type: t,
   template: e,
   dependencies: s,
   options: n
-}), jt = /* @__PURE__ */ new WeakMap(), he = (i) => {
-  let t = jt.get(i);
-  return t || (t = [], jt.set(i, t)), t;
-}, yi = (i, t) => {
+}), Vt = /* @__PURE__ */ new WeakMap(), he = (i) => {
+  let t = Vt.get(i);
+  return t || (t = [], Vt.set(i, t)), t;
+}, vi = (i, t) => {
   he(i).push(t);
 }, ei = (i, t) => {
   he(i).forEach((e) => e(i, t));
@@ -2705,7 +2724,7 @@ function oi() {
   const i = /* @__PURE__ */ new WeakMap();
   return (t) => (i.has(t) || i.set(t, []), i.get(t));
 }
-const fe = oi(), vi = (i) => (t, e) => {
+const fe = oi(), mi = (i) => (t, e) => {
   fe(t.constructor).push({
     newPropertyName: e,
     ...i
@@ -2742,9 +2761,9 @@ const fe = oi(), vi = (i) => (t, e) => {
   }
   return t;
 };
-class mi extends ai(li(Ze)) {
+class wi extends ai(li(Ze)) {
   static {
-    this.VIVID_VERSION = "5.8.0";
+    this.VIVID_VERSION = "5.10.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -2757,6 +2776,7 @@ class mi extends ai(li(Ze)) {
   }
 }
 export {
+  di as A,
   lt as B,
   T as D,
   O as E,
@@ -2765,12 +2785,12 @@ export {
   g as O,
   we as S,
   Ut as U,
-  mi as V,
+  wi as V,
   He as a,
-  pi as b,
-  bi as c,
-  gi as d,
-  di as e,
+  bi as b,
+  gi as c,
+  yi as d,
+  hi as e,
   E as f,
   Wt as g,
   re as h,
@@ -2779,15 +2799,15 @@ export {
   Dt as k,
   rt as l,
   U as m,
-  fi as n,
-  hi as o,
+  pi as n,
+  ui as o,
   A as p,
   X as q,
-  vi as r,
-  yi as s,
+  mi as r,
+  vi as s,
   w as t,
   Gt as u,
-  ui as v,
+  fi as v,
   m as w,
   pe as x,
   ci as y,

package/card/definition.cjs

@@ -11,7 +11,7 @@ const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('../unbundled/enums.cjs');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');
 
-const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";
+const styles = ":host{display:flex;--_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))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/card/definition.js

@@ -7,7 +7,7 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { A as Appearance } from '../unbundled/enums.js';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
-const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";
+const styles = ":host{display:flex;--_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))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/card/index.cjs

@@ -1,16 +1,16 @@
-"use strict";const f=require("../bundled/definition2.cjs"),b=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),m=require("../bundled/linkable.cjs"),c=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),i=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),y=":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";var $=Object.defineProperty,n=(e,a,r,h)=>{for(var l=void 0,d=e.length-1,u;d>=0;d--)(u=e[d])&&(l=u(a,r,l)||l);return l&&$(a,r,l),l};class o extends m.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],o.prototype,"appearance");n([t.attr],o.prototype,"headline");n([t.attr],o.prototype,"subtitle");n([t.attr],o.prototype,"text");n([t.attr],o.prototype,"icon");n([t.attr],o.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],o.prototype,"clickableCard");n([t.observable],o.prototype,"footerSlottedContent");n([t.observable],o.prototype,"graphicSlottedContent");n([t.observable],o.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function w(e){return t.html`
+"use strict";const f=require("../bundled/definition2.cjs"),b=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),m=require("../bundled/linkable.cjs"),d=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),l=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),w=":host{display:flex;--_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))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;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{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.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{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.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}";var y=Object.defineProperty,n=(e,a,r,h)=>{for(var i=void 0,c=e.length-1,u;c>=0;c--)(u=e[c])&&(i=u(a,r,i)||i);return i&&y(a,r,i),i};class o extends m.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],o.prototype,"appearance");n([t.attr],o.prototype,"headline");n([t.attr],o.prototype,"subtitle");n([t.attr],o.prototype,"text");n([t.attr],o.prototype,"icon");n([t.attr],o.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],o.prototype,"clickableCard");n([t.observable],o.prototype,"footerSlottedContent");n([t.observable],o.prototype,"graphicSlottedContent");n([t.observable],o.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function $(e){return t.html`
 		<${e} class="icon" inline name="${a=>a.icon}"></${e}>`}function _(){return t.html`
 		<div class="header-headline" id="card-headline">${e=>e.headline}</div>
 	`}function C(){return t.html` <div class="header-subtitle">${e=>e.subtitle}</div> `}function k(){return t.html`
 		<div class="header-content">
-			${i.when(e=>e.headline,_())}
-			${i.when(e=>e.subtitle,C())}
+			${l.when(e=>e.headline,_())}
+			${l.when(e=>e.subtitle,C())}
 		</div>
 	`}function S(e){return t.html` <div class="header">
 		<slot name="graphic" ${v.slotted("graphicSlottedContent")}
-			>${i.when(a=>a.icon,w(e))}</slot
+			>${l.when(a=>a.icon,$(e))}</slot
 		>
-		${i.when(a=>a.headline||a.subtitle,k())}
+		${l.when(a=>a.headline||a.subtitle,k())}
 	</div>`}function q(e){return!e.headline&&!e.subtitle&&!e.icon&&(!e.graphicSlottedContent||!e.graphicSlottedContent.length)}function A(){return t.html` <slot name="meta" ${v.slotted("metaSlottedContent")}></slot> `}function E(){return t.html` <div class="text">${e=>e.text}</div> `}function H(e){return t.html`<button
 		class="${p}"
 		type="button"
@@ -33,7 +33,7 @@
 							<div class="header-wrapper">
 								${S(a)} ${A()}
 							</div>
-							${i.when(h=>h.text,E())}
+							${l.when(h=>h.text,E())}
 						</div>
 					</slot>
 					<div class="footer">
@@ -41,15 +41,15 @@
 					</div>
 				</div> `)}
 	`}const D=e=>{const a=e.tagFor(b.Elevation);return t.html`
-		${i.when(r=>r.appearance!==c.Appearance.Ghost&&r.appearance!==c.Appearance.Outlined,t.html`
+		${l.when(r=>r.appearance!==d.Appearance.Ghost&&r.appearance!==d.Appearance.Outlined,t.html`
 			<${a} dp=${r=>r.elevation??"4"}>
 			  ${s(e)}
 			</${a}>
 		`)}
-		${i.when(r=>r.appearance===c.Appearance.Outlined,t.html`
+		${l.when(r=>r.appearance===d.Appearance.Outlined,t.html`
 			<${a} dp='0')}>
 			  ${s(e)}
 			</${a}>
 		`)}
-		${i.when(r=>r.appearance===c.Appearance.Ghost,t.html` ${s(e)} `)}
-	`},F=t.defineVividComponent("card",o,D,[f.iconDefinition,b.elevationDefinition],{styles:y}),O=t.createRegisterFunction(F);O();
+		${l.when(r=>r.appearance===d.Appearance.Ghost,t.html` ${s(e)} `)}
+	`},F=t.defineVividComponent("card",o,D,[f.iconDefinition,b.elevationDefinition],{styles:w}),O=t.createRegisterFunction(F);O();