@vonage/vivid 3.50.1 → 3.52.0

package/shared/definition13.cjs

@@ -507,7 +507,7 @@ _has._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";
@@ -540,9 +540,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) {
@@ -555,7 +559,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;
@@ -566,11 +572,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;
@@ -638,7 +648,9 @@ class Calendar extends index.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) {
@@ -647,11 +659,19 @@ class Calendar extends index.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);
   }
@@ -662,7 +682,9 @@ class Calendar extends index.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);
     }
@@ -684,7 +706,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],
@@ -699,78 +723,97 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
 }
 
 const HoursTemplate = () => {
-  return index.html`
-  <div class="row-headers" role="row">
-    ${repeat.repeat((x) => x.hoursAsDatetime, index.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 index.html` <div class="row-headers" role="row">
+		${repeat.repeat(
+    (x) => x.hoursAsDatetime,
+    index.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 index.html`
-			<div class="column-headers" role="row">
-				${repeat.repeat((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), index.html`
-						<div role="columnheader" tabindex="-1">
-              <time datetime=${(x) => getValidDateString(x)}>
-                <h2>
-									<!-- TODO add to column aria-labelledby or describedby to count
+  return index.html` <div class="column-headers" role="row">
+		${repeat.repeat(
+    (x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
+    index.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 = index.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 = () => index.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.repeat((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), index.html`
-            <div role="listitem"></div>`)}
-        </div>
-        <div class="columns" role="row">
-          ${repeat.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.repeat(
+  (x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
+  index.html` <div role="listitem"></div>`
+)}
+				</div>
+				<div class="columns" role="row">
+					${repeat.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 = index.registerFactory(calendarRegistries);
 

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);