@vonage/vivid 5.15.1 → 5.17.0

package/card/definition.js

@@ -1,188 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, observable, when, html, slotted } from '@microsoft/fast-element';
-import { L as Linkable } from '../unbundled/linkable.js';
-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;--_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) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Card extends Linkable(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.clickableCard = false;
-  }
-}
-__decorateClass([
-  attr
-], Card.prototype, "appearance");
-__decorateClass([
-  attr
-], Card.prototype, "headline");
-__decorateClass([
-  attr
-], Card.prototype, "subtitle");
-__decorateClass([
-  attr
-], Card.prototype, "text");
-__decorateClass([
-  attr
-], Card.prototype, "icon");
-__decorateClass([
-  attr
-], Card.prototype, "elevation");
-__decorateClass([
-  attr({
-    mode: "boolean",
-    attribute: "clickable-card"
-  })
-], Card.prototype, "clickableCard");
-__decorateClass([
-  observable
-], Card.prototype, "footerSlottedContent");
-__decorateClass([
-  observable
-], Card.prototype, "graphicSlottedContent");
-__decorateClass([
-  observable
-], Card.prototype, "hasMetaSlottedContent");
-
-const getClasses = (_) => classNames(
-  "base",
-  ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length],
-  ["hide-header", shouldHideHeader(_)]
-);
-function renderHeaderIcon(iconTag) {
-  return html`
-		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
-}
-function Headline() {
-  return html`
-		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
-	`;
-}
-function Subtitle() {
-  return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
-}
-function headerContent() {
-  return html`
-		<div class="header-content">
-			${when((x) => x.headline, Headline())}
-			${when((x) => x.subtitle, Subtitle())}
-		</div>
-	`;
-}
-function renderHeader(iconTag) {
-  return html` <div class="header">
-		<slot name="graphic" ${slotted("graphicSlottedContent")}
-			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
-		>
-		${when((x) => x.headline || x.subtitle, headerContent())}
-	</div>`;
-}
-function shouldHideHeader(card) {
-  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
-}
-function renderMetaSlot() {
-  return html` <slot name="meta" ${slotted("metaSlottedContent")}></slot> `;
-}
-function text() {
-  return html` <div class="text">${(x) => x.text}</div> `;
-}
-function renderButtonElement(content) {
-  return html`<button
-		class="${getClasses}"
-		type="button"
-		${delegateAria()}
-		aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
-	>
-		${content}
-	</button>`;
-}
-function renderCardBaseElement(x, content) {
-  if (x.href) {
-    return x._renderLinkElement(content, getClasses);
-  } else if (x.clickableCard) {
-    return renderButtonElement(content);
-  } else {
-    return html`<div
-			class="${getClasses}"
-			aria-labelledby="${(x2) => x2.headline ? "card-headline" : null}"
-		>
-			${content}
-		</div>`;
-  }
-}
-function renderCardContent(context) {
-  const iconTag = context.tagFor(Icon);
-  return html`
-		${(x) => renderCardBaseElement(
-    x,
-    html`<div class="wrapper">
-					<div class="vwc-card-media">
-						<slot name="media"></slot>
-					</div>
-					<slot name="main">
-						<div class="main-content">
-							<div class="header-wrapper">
-								${renderHeader(iconTag)} ${renderMetaSlot()}
-							</div>
-							${when((x2) => x2.text, text())}
-						</div>
-					</slot>
-					<div class="footer">
-						<slot name="footer" ${slotted("footerSlottedContent")}></slot>
-					</div>
-				</div> `
-  )}
-	`;
-}
-const CardTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  return html`
-		${when(
-    (x) => x.appearance !== Appearance.Ghost && x.appearance !== Appearance.Outlined,
-    html`
-			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`
-  )}
-		${when(
-    (x) => x.appearance === Appearance.Outlined,
-    html`
-			<${elevationTag} dp='0')}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`
-  )}
-		${when(
-    (x) => x.appearance === Appearance.Ghost,
-    html` ${renderCardContent(context)} `
-  )}
-	`;
-};
-
-const cardDefinition = defineVividComponent(
-  "card",
-  Card,
-  CardTemplate,
-  [iconDefinition, elevationDefinition],
-  {
-    styles
-  }
-);
-const registerCard = createRegisterFunction(cardDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerCard, r as Card, t as cardDefinition } from "../unbundled/definition22.js";
 export { Card as VwcCardElement, cardDefinition, registerCard };

package/card/index.cjs

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

package/card/index.js

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