@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition13.js

@@ -505,7 +505,7 @@ _curry1(function isEmpty(x) {
 
 const isEmpty$1 = isEmpty;
 
-const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;background:var(--vvd-color-surface-2dp);border-radius:8px;counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\"}@supports (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}@supports not (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content}@supports (inset: 0){.column-headers [role=columnheader i] h2>em{inset-inline-start:0}}@supports not (inset: 0){.column-headers [role=columnheader i] h2>em{left:0}}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
+const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;border-radius:8px;background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
 
 const ARROW_UP = "ArrowUp";
 const ARROW_RIGHT = "ArrowRight";
@@ -538,9 +538,13 @@ function getHeaderDescendantGridCell(key, activeElement) {
     return;
   }
   const header = activeElement.closest('[role="columnheader"i]');
-  const columnHeaders = this.shadowRoot.querySelectorAll('[role="columnheader"i]');
+  const columnHeaders = this.shadowRoot.querySelectorAll(
+    '[role="columnheader"i]'
+  );
   const i = Array.from(columnHeaders).indexOf(header);
-  return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
+  return this.shadowRoot.querySelector(
+    `[role="gridcell"i]:nth-child(${i + 1})`
+  );
 }
 
 function getDay(el) {
@@ -553,7 +557,9 @@ function getDay(el) {
   }
 }
 function getHour(e, el, hours) {
-  const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]');
+  const rowHeaderOrCell = el.closest(
+    '[role="rowheader"], [role="gridcell"i]'
+  );
   if (rowHeaderOrCell) {
     const DOMRect = rowHeaderOrCell.getBoundingClientRect();
     const offsetY = e.clientY - DOMRect.y;
@@ -564,11 +570,15 @@ function getHour(e, el, hours) {
 }
 const getEventContext = function(e) {
   if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
-    throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
+    throw new Error(
+      "Invalid event. Event must be instance of KeyboardEvent or MouseEvent"
+    );
   }
   const [el] = e.composedPath();
   if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) {
-    throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
+    throw new Error(
+      "Invalid event. Event must contain a target object which is a direct descendant of calendar"
+    );
   }
   const day = getDay(el);
   let hour;
@@ -636,7 +646,9 @@ class Calendar extends FoundationElement {
   }
   getCalendarEventContainingCell(calendarEvent) {
     const slotName = calendarEvent.getAttribute("slot");
-    const gridCell = this.shadowRoot.querySelector(`slot[name="${slotName}"i]`);
+    const gridCell = this.shadowRoot.querySelector(
+      `slot[name="${slotName}"i]`
+    );
     return gridCell.parentElement;
   }
   arrowKeysInteractions(key) {
@@ -645,11 +657,19 @@ class Calendar extends FoundationElement {
     if (isCellOrHeader(activeElement)) {
       focusNext = getNextFocusableGridElement.call(this, key, activeElement);
     } else if (this.#activeCalendarEvent) {
-      focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
+      focusNext = this.getCalendarEventContainingCell(
+        this.#activeCalendarEvent
+      );
     } else if (activeElement?.matches('em[role="button"i]')) {
-      focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
+      focusNext = getHeaderDescendantGridCell.call(
+        this,
+        key,
+        activeElement
+      );
     } else {
-      focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
+      focusNext = this.shadowRoot.querySelector(
+        '[role="columnheader"i]'
+      );
     }
     this.activateElement(focusNext);
   }
@@ -660,7 +680,9 @@ class Calendar extends FoundationElement {
     el?.focus();
   }
   onKeydown({ key }) {
-    const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some((predefinedKey) => predefinedKey == key);
+    const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(
+      (predefinedKey) => predefinedKey == key
+    );
     if (isArrow) {
       this.arrowKeysInteractions(key);
     }
@@ -682,7 +704,9 @@ __decorateClass([
 
 function getValidDateString(date) {
   const twoDigit = (num) => `0${num}`.slice(-2);
-  return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+  return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(
+    date.getDate()
+  )}`;
 }
 const weekdaysMap = /* @__PURE__ */ new Map([
   ["sunday", 0],
@@ -697,78 +721,97 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
 }
 
 const HoursTemplate = () => {
-  return html`
-  <div class="row-headers" role="row">
-    ${repeat((x) => x.hoursAsDatetime, html`<span role="rowheader">
-      <time datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-    hour: "numeric",
-    minute: "numeric",
-    hour12: false
-  }).format(x)}">
-						${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-    hour: "numeric",
-    hour12: c.parent.hour12
-  }).format(x)}
-					</time>
-				</span>`)}
-  </div>`;
+  return html` <div class="row-headers" role="row">
+		${repeat(
+    (x) => x.hoursAsDatetime,
+    html`<span role="rowheader">
+				<time
+					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false
+    }).format(x)}"
+				>
+					${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+      hour: "numeric",
+      hour12: c.parent.hour12
+    }).format(x)}
+				</time>
+			</span>`
+  )}
+	</div>`;
 };
 const DaysTemplate = () => {
-  return html`
-			<div class="column-headers" role="row">
-				${repeat((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html`
-						<div role="columnheader" tabindex="-1">
-              <time datetime=${(x) => getValidDateString(x)}>
-                <h2>
-									<!-- TODO add to column aria-labelledby or describedby to count
+  return html` <div class="column-headers" role="row">
+		${repeat(
+    (x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
+    html` <div role="columnheader" tabindex="-1">
+				<time datetime=${(x) => getValidDateString(x)}>
+					<h2>
+						<!-- TODO add to column aria-labelledby or describedby to count
                   events and related day e.g. "3 events, Sunday, March 8" -->
-									<em tabindex="0" role="button" aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-    weekday: "long",
-    month: "long",
-    day: "2-digit"
-  }).format(x)}>
-										${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { day: "2-digit" }).format(x)}
-									</em>
-									<small aria-hidden="true">
-										${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: "short" }).format(x)}
-									</small>
-                </h2>
-              </time>
-						</div>`)}
-			</div>`;
+						<em
+							tabindex="0"
+							role="button"
+							aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+      weekday: "long",
+      month: "long",
+      day: "2-digit"
+    }).format(x)}
+						>
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+      day: "2-digit"
+    }).format(x)}
+						</em>
+						<small aria-hidden="true">
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+      weekday: "short"
+    }).format(x)}
+						</small>
+					</h2>
+				</time>
+			</div>`
+  )}
+	</div>`;
 };
 const ColumnTemplate = html`
-            <div role="gridcell" tabindex="-1">
-              <slot name="day-${(_, c) => c.index}"></slot>
-            </div>
-          `;
+	<div role="gridcell" tabindex="-1">
+		<slot name="day-${(_, c) => c.index}"></slot>
+	</div>
+`;
 const CalendarTemplate = () => html`
-  <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
-    ${DaysTemplate}
-    <div class="calendar-row" role="rowgroup">
-      ${HoursTemplate}
-      <div class="calendar-grid-presentation" role="presentation">
-        <div class="hours" role="list">
-          ${repeat((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), html`
-            <div role="listitem"></div>`)}
-        </div>
-        <div class="columns" role="row">
-          ${repeat((x) => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
-        </div>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
+	<div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
+		${DaysTemplate}
+		<div class="calendar-row" role="rowgroup">
+			${HoursTemplate}
+			<div class="calendar-grid-presentation" role="presentation">
+				<div class="hours" role="list">
+					${repeat(
+  (x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
+  html` <div role="listitem"></div>`
+)}
+				</div>
+				<div class="columns" role="row">
+					${repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
+  positioning: true
+})}
+				</div>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
 `;
 
-const calendarDefinition = Calendar.compose({
-  baseName: "calendar",
-  template: CalendarTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const calendarDefinition = Calendar.compose(
+  {
+    baseName: "calendar",
+    template: CalendarTemplate,
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
+);
 const calendarRegistries = [calendarDefinition()];
 const registerCalendar = registerFactory(calendarRegistries);
 

package/shared/definition14.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$1 = require('./definition26.cjs');
-const definition = require('./definition59.cjs');
+const definition$1 = require('./definition27.cjs');
+const definition = require('./definition62.cjs');
 const enums = require('./enums.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;block-size:100%;border-radius:inherit;color:var(--vvd-color-canvas-text)}.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-end:-8px;margin-inline-start:auto}\n";
+const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.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}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -62,14 +62,10 @@ function renderHeaderIcon(iconTag) {
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
 }
 function Headline() {
-  return index.html`
-		<div class="header-headline">${(x) => x.headline}</div>
-	`;
+  return index.html` <div class="header-headline">${(x) => x.headline}</div> `;
 }
 function Subtitle() {
-  return index.html`
-		<div class="header-subtitle">${(x) => x.subtitle}</div>
-	`;
+  return index.html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
 }
 function headerContent() {
   return index.html`
@@ -80,29 +76,26 @@ function headerContent() {
 	`;
 }
 function renderHeader(iconTag) {
-  return index.html`
-		<header class="header">
-			<slot name="graphic" ${slotted.slotted("graphicSlottedContent")}>${when.when((x) => x.icon, renderHeaderIcon(iconTag))}</slot>
-			${when.when((x) => x.headline || x.subtitle, headerContent())}
-		</header>`;
+  return index.html` <header class="header">
+		<slot name="graphic" ${slotted.slotted("graphicSlottedContent")}
+			>${when.when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${when.when((x) => x.headline || x.subtitle, headerContent())}
+	</header>`;
 }
 function shouldHideHeader(card) {
   return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
 }
 function renderMetaSlot() {
-  return index.html`
-		<slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
-	`;
+  return index.html` <slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot> `;
 }
 function text() {
-  return index.html`
-		<div class="text">${(x) => x.text}</div>
-	`;
+  return index.html` <div class="text">${(x) => x.text}</div> `;
 }
 function renderCardContent(context) {
   const iconTag = context.tagFor(icon.Icon);
   return index.html`
-	<div class="${getClasses}">
+		<div class="${getClasses}">
 			<div class="wrapper">
 				<div class="vwc-card-media">
 					<slot name="media"></slot>
@@ -110,8 +103,7 @@ function renderCardContent(context) {
 				<slot name="main">
 					<div class="main-content">
 						<div class="header-wrapper">
-							${renderHeader(iconTag)}
-							${renderMetaSlot()}
+							${renderHeader(iconTag)} ${renderMetaSlot()}
 						</div>
 						${when.when((x) => x.text, text())}
 					</div>
@@ -126,21 +118,26 @@ function renderCardContent(context) {
 const CardTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   return index.html`
-		${when.when((x) => x.appearance !== enums.Appearance.Ghost && x.appearance !== enums.Appearance.Outlined, index.html`
+		${when.when(
+    (x) => x.appearance !== enums.Appearance.Ghost && x.appearance !== enums.Appearance.Outlined,
+    index.html`
 			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
 			  ${renderCardContent(context)}
 			</${elevationTag}>
-		`)}
-
-		${when.when((x) => x.appearance === enums.Appearance.Outlined, index.html`
+		`
+  )}
+		${when.when(
+    (x) => x.appearance === enums.Appearance.Outlined,
+    index.html`
 			<${elevationTag} dp='0')}>
 			  ${renderCardContent(context)}
 			</${elevationTag}>
-		`)}
-
-		${when.when((x) => x.appearance === enums.Appearance.Ghost, index.html`
-			${renderCardContent(context)}
-		`)}
+		`
+  )}
+		${when.when(
+    (x) => x.appearance === enums.Appearance.Ghost,
+    index.html` ${renderCardContent(context)} `
+  )}
 	`;
 };
 
@@ -149,7 +146,11 @@ const cardDefinition = Card.compose({
   template: CardTemplate,
   styles
 });
-const cardRegistries = [cardDefinition(), ...definition$1.iconRegistries, ...definition.elevationRegistries];
+const cardRegistries = [
+  cardDefinition(),
+  ...definition$1.iconRegistries,
+  ...definition.elevationRegistries
+];
 const registerCard = index.registerFactory(cardRegistries);
 
 exports.cardDefinition = cardDefinition;

package/shared/definition14.js

@@ -1,13 +1,13 @@
 import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { a as iconRegistries } from './definition27.js';
+import { E as Elevation, e as elevationRegistries } from './definition62.js';
 import { A as Appearance } from './enums.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;block-size:100%;border-radius:inherit;color:var(--vvd-color-canvas-text)}.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-end:-8px;margin-inline-start:auto}\n";
+const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.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}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -60,14 +60,10 @@ function renderHeaderIcon(iconTag) {
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
 }
 function Headline() {
-  return html`
-		<div class="header-headline">${(x) => x.headline}</div>
-	`;
+  return html` <div class="header-headline">${(x) => x.headline}</div> `;
 }
 function Subtitle() {
-  return html`
-		<div class="header-subtitle">${(x) => x.subtitle}</div>
-	`;
+  return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
 }
 function headerContent() {
   return html`
@@ -78,29 +74,26 @@ function headerContent() {
 	`;
 }
 function renderHeader(iconTag) {
-  return html`
-		<header class="header">
-			<slot name="graphic" ${slotted("graphicSlottedContent")}>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot>
-			${when((x) => x.headline || x.subtitle, headerContent())}
-		</header>`;
+  return html` <header class="header">
+		<slot name="graphic" ${slotted("graphicSlottedContent")}
+			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${when((x) => x.headline || x.subtitle, headerContent())}
+	</header>`;
 }
 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>
-	`;
+  return html` <slot name="meta" ${slotted("metaSlottedContent")}></slot> `;
 }
 function text() {
-  return html`
-		<div class="text">${(x) => x.text}</div>
-	`;
+  return html` <div class="text">${(x) => x.text}</div> `;
 }
 function renderCardContent(context) {
   const iconTag = context.tagFor(Icon);
   return html`
-	<div class="${getClasses}">
+		<div class="${getClasses}">
 			<div class="wrapper">
 				<div class="vwc-card-media">
 					<slot name="media"></slot>
@@ -108,8 +101,7 @@ function renderCardContent(context) {
 				<slot name="main">
 					<div class="main-content">
 						<div class="header-wrapper">
-							${renderHeader(iconTag)}
-							${renderMetaSlot()}
+							${renderHeader(iconTag)} ${renderMetaSlot()}
 						</div>
 						${when((x) => x.text, text())}
 					</div>
@@ -124,21 +116,26 @@ function renderCardContent(context) {
 const CardTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
   return html`
-		${when((x) => x.appearance !== Appearance.Ghost && x.appearance !== Appearance.Outlined, 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`
+		`
+  )}
+		${when(
+    (x) => x.appearance === Appearance.Outlined,
+    html`
 			<${elevationTag} dp='0')}>
 			  ${renderCardContent(context)}
 			</${elevationTag}>
-		`)}
-
-		${when((x) => x.appearance === Appearance.Ghost, html`
-			${renderCardContent(context)}
-		`)}
+		`
+  )}
+		${when(
+    (x) => x.appearance === Appearance.Ghost,
+    html` ${renderCardContent(context)} `
+  )}
 	`;
 };
 
@@ -147,7 +144,11 @@ const cardDefinition = Card.compose({
   template: CardTemplate,
   styles
 });
-const cardRegistries = [cardDefinition(), ...iconRegistries, ...elevationRegistries];
+const cardRegistries = [
+  cardDefinition(),
+  ...iconRegistries,
+  ...elevationRegistries
+];
 const registerCard = registerFactory(cardRegistries);
 
 export { cardRegistries as a, cardDefinition as c, registerCard as r };

package/shared/definition15.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition26.cjs');
+const definition = require('./definition27.cjs');
 require('./affix.cjs');
 const index$1 = require('./index2.cjs');
+const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
@@ -98,7 +98,7 @@ index.__decorate([
     index.observable
 ], Checkbox$1.prototype, "indeterminate", void 0);
 
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:2px;content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -182,7 +182,11 @@ exports.Checkbox = __decorateClass([
   index$1.errorText,
   index$1.formElements
 ], exports.Checkbox);
-applyMixins.applyMixins(exports.Checkbox, index$1.FormElementHelperText, index$1.FormElementSuccessText);
+applyMixinsWithObservables.applyMixinsWithObservables(
+  exports.Checkbox,
+  index$1.FormElementHelperText,
+  index$1.FormElementSuccessText
+);
 
 const getClasses = ({
   connotation,
@@ -207,7 +211,8 @@ const getClasses = ({
 const CheckboxTemplate = (context) => {
   const iconTag = context.tagFor(icon.Icon);
   return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-		<div class="${getClasses}"
+		<div
+			class="${getClasses}"
 			role="checkbox"
 			aria-label="${(x) => x.ariaLabel}"
 			aria-checked="${(x) => x.checked}"
@@ -216,16 +221,23 @@ const CheckboxTemplate = (context) => {
 			aria-readonly="${(x) => x.readOnly}"
 			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"
-			@click="${(x, c) => x.clickHandler(c.event)}">
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
 			<div class="control">
-				${when.when((x) => x.checked, index.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
-				${when.when((x) => x.indeterminate, index.html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+				${when.when(
+    (x) => x.checked,
+    index.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
+  )}
+				${when.when(
+    (x) => x.indeterminate,
+    index.html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`
+  )}
 			</div>
-			${index.html`<label>${(x) => x.label}<slot ${slotted.slotted("slottedContent")}></slot></label>`}
+			${index.html`<label
+				>${(x) => x.label}<slot ${slotted.slotted("slottedContent")}></slot
+			></label>`}
 		</div>
-		${when.when((x) => x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
-		${when.when((x) => !x.successText && x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
-		${when.when((x) => x.successText, index$1.getFeedbackTemplate("success", context))}
+		${index$1.getFeedbackTemplate(context)}
 	</template>`;
 };