@vonage/vivid 3.0.0-next.11 → 3.0.0-next.110

package/calendar/index.js

@@ -1,10 +1,7 @@
-import '../elevation/index.js';
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView, F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import '../shared/web.dom-collections.iterator.js';
+import { $ as emptyArray, Z as Observable, a3 as SubscriberSet, a2 as DOM, a4 as HTMLDirective, a5 as HTMLView, F as FoundationElement, Y as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
+import { C as CalendarEvent } from '../shared/calendar-event.js';
 import '../shared/es.object.assign.js';
 import { b as _has, _ as _curry1, a as _curry2 } from '../shared/_has.js';
-import '../shared/class-names.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {
@@ -361,6 +358,10 @@ class ArrayObserver extends SubscriberSet {
             enumerable: false,
         });
     }
+    subscribe(subscriber) {
+        this.flush();
+        super.subscribe(subscriber);
+    }
     addSplice(splice) {
         if (this.splices === void 0) {
             this.splices = [splice];
@@ -610,34 +611,50 @@ class RepeatBehavior {
     updateViews(splices) {
         const childContext = this.childContext;
         const views = this.views;
-        const totalRemoved = [];
         const bindView = this.bindView;
-        let removeDelta = 0;
-        for (let i = 0, ii = splices.length; i < ii; ++i) {
-            const splice = splices[i];
-            const removed = splice.removed;
-            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-            removeDelta -= splice.addedCount;
-        }
         const items = this.items;
         const template = this.template;
+        const recycle = this.options.recycle;
+        const leftoverViews = [];
+        let leftoverIndex = 0;
+        let availableViews = 0;
         for (let i = 0, ii = splices.length; i < ii; ++i) {
             const splice = splices[i];
+            const removed = splice.removed;
+            let removeIndex = 0;
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
+            const removedViews = views.splice(splice.index, removed.length);
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
-                const view = this.options.recycle && totalRemoved.length > 0
-                    ? totalRemoved.shift()
-                    : template.create();
+                let view;
+                if (recycle && availableViews > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                        view = removedViews[removeIndex];
+                        removeIndex++;
+                    }
+                    else {
+                        view = leftoverViews[leftoverIndex];
+                        leftoverIndex++;
+                    }
+                    availableViews--;
+                }
+                else {
+                    view = template.create();
+                }
                 views.splice(addIndex, 0, view);
                 bindView(view, items, addIndex, childContext);
                 view.insertBefore(location);
             }
+            if (removedViews[removeIndex]) {
+                leftoverViews.push(...removedViews.slice(removeIndex));
+            }
         }
-        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-            totalRemoved[i].dispose();
+        for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+            leftoverViews[i].dispose();
         }
         if (this.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
@@ -656,7 +673,7 @@ class RepeatBehavior {
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged) {
+        if (itemsLength === 0 || templateChanged || !this.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -744,7 +761,7 @@ function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeat
     const templateBinding = typeof templateOrTemplateBinding === "function"
         ? templateOrTemplateBinding
         : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, options);
+    return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
 /**
@@ -1240,8 +1257,7 @@ _curry1(function isEmpty(x) {
 
 var isEmpty$1 = isEmpty;
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background-color: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: 48px;\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-info-10);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  text-transform: uppercase;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: var(--vvd-typography-base-condensed);\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-information-400);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  font: var(--vvd-typography-heading-4);\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: var(--vvd-typography-base-condensed);\n  text-transform: uppercase;\n}";
 
 const ARROW_UP = 'ArrowUp';
 const ARROW_RIGHT = 'ArrowRight';
@@ -1250,18 +1266,14 @@ const ARROW_LEFT = 'ArrowLeft';
 function isCellOrHeader(el) {
   return el instanceof HTMLElement && (el.matches('[role="gridcell"i]') || el.matches('[role="columnheader"i]'));
 }
-
 const getCellOrHeader = f => f.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
-
 function getNextFocusableGridElement(key, activeElement) {
   if (activeElement.parentNode instanceof HTMLElement) {
     switch (key) {
       case ARROW_RIGHT:
         return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
-
       case ARROW_LEFT:
         return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
-
       case ARROW_UP:
       case ARROW_DOWN:
         {
@@ -1278,7 +1290,6 @@ function getHeaderDescendantGridCell(key, activeElement) {
   if (key !== ARROW_DOWN) {
     return;
   }
-
   const header = activeElement.closest('[role="columnheader"i]');
   const columnHeaders = this.shadowRoot.querySelectorAll('[role="columnheader"i]');
   const i = Array.from(columnHeaders).indexOf(header);
@@ -1287,21 +1298,17 @@ function getHeaderDescendantGridCell(key, activeElement) {
 
 function getDay(el) {
   const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
-
   if (cellOrHeader) {
     const {
       parentElement
     } = cellOrHeader;
-
     if (parentElement) {
       return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
     }
   }
 }
-
 function getHour(e, el, hours) {
   const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]');
-
   if (rowHeaderOrCell) {
     const DOMRect = rowHeaderOrCell.getBoundingClientRect();
     const offsetY = e.clientY - DOMRect.y;
@@ -1310,25 +1317,19 @@ function getHour(e, el, hours) {
     return Math.round((hour + Number.EPSILON) * 100) / 100;
   }
 }
-
 const getEventContext = function getEventContext(e) {
   if (!(e instanceof KeyboardEvent || e instanceof 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');
   }
-
   const day = getDay(el);
   let hour;
-
   if (e instanceof MouseEvent) {
     hour = getHour(e, el, this._hours);
   }
-
   const context = Object.assign(Object.assign({}, day != undefined && {
     day
   }), hour != undefined && {
@@ -1337,85 +1338,85 @@ const getEventContext = function getEventContext(e) {
   return not$1(isEmpty$1(context)) ? context : null;
 };
 
+var _Calendar_instances, _Calendar_activeCalendarEvent_get;
 class Calendar extends FoundationElement {
   constructor() {
     super(...arguments);
+    _Calendar_instances.add(this);
     this.hour12 = false;
     this._hours = 24;
     this._days = 7;
     this.hoursAsDatetime = Array.from({
       length: this._hours - 1
     }).fill(new Date(new Date().setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
-
     this._generateDaysArr = dateArr => {
       if (dateArr.length == this._days) {
         return dateArr;
       }
-
       const lastDate = new Date(dateArr[dateArr.length - 1]);
       lastDate.setDate(lastDate.getDate() + 1);
       return this._generateDaysArr([...dateArr, lastDate]);
     };
-
     this.getEventContext = getEventContext;
   }
-
+  getCalendarEventContainingCell(calendarEvent) {
+    const slotName = calendarEvent.getAttribute('slot');
+    const gridCell = this.shadowRoot.querySelector(`slot[name="${slotName}"i]`);
+    return gridCell.parentElement;
+  }
   arrowKeysInteractions(key) {
-    const activeElement = this.shadowRoot.activeElement;
+    const {
+      activeElement
+    } = this.shadowRoot;
     let focusNext;
-
     if (isCellOrHeader(activeElement)) {
       focusNext = getNextFocusableGridElement.call(this, key, activeElement);
+    } else if (__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get)) {
+      focusNext = this.getCalendarEventContainingCell(__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get));
     } else if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('em[role="button"i]')) {
       focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
     } else {
       focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
     }
-
-    this.moveTo(focusNext);
+    this.activateElement(focusNext);
   }
-
-  moveTo(el) {
+  activateElement(el) {
     const onBlur = ({
       target
     }) => target.setAttribute('tabindex', '-1');
-
     el === null || el === void 0 ? void 0 : el.addEventListener('blur', onBlur, {
       once: true
     });
     el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
     el === null || el === void 0 ? void 0 : el.focus();
   }
-
   onKeydown({
     key
   }) {
     const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(predefinedKey => predefinedKey == key);
-
     if (isArrow) {
       this.arrowKeysInteractions(key);
     }
-
     return !isArrow;
   }
-
 }
-
+_Calendar_instances = new WeakSet(), _Calendar_activeCalendarEvent_get = function _Calendar_activeCalendarEvent_get() {
+  const {
+    activeElement
+  } = document;
+  return activeElement instanceof CalendarEvent ? activeElement : null;
+};
 __decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "datetime", void 0);
-
 __decorate([attr({
   attribute: 'start-day'
 }), __metadata("design:type", String)], Calendar.prototype, "startDay", void 0);
-
 __decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "locales", void 0);
-
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], Calendar.prototype, "hour12", void 0);
 
 function getValidDateString(date) {
   const twoDigit = num => `0${num}`.slice(-2);
-
   return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
 }
 const weekdaysMap = new Map([['sunday', 0], ['monday', 1]]);
@@ -1428,14 +1429,13 @@ function getFirstDateOfTheWeek(date = new Date(), startDay) {
 }
 
 let _2 = t => t,
-    _t,
-    _t2,
-    _t3,
-    _t4,
-    _t5,
-    _t6,
-    _t7;
-
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7;
 const HoursTemplate = () => {
   return html(_t || (_t = _2`
   <div class="row-headers" role="presentation">
@@ -1453,7 +1453,6 @@ const HoursTemplate = () => {
     hour12: c.parent.hour12
   }).format(x))));
 };
-
 const DaysTemplate = () => {
   return html(_t3 || (_t3 = _2`
 			<div class="column-headers" role="row">
@@ -1482,7 +1481,6 @@ const DaysTemplate = () => {
     weekday: 'short'
   }).format(x))));
 };
-
 const ColumnTemplate = html(_t5 || (_t5 = _2`
             <div role="gridcell" tabindex="-1">
               <slot name="day-${0}"></slot>
@@ -1514,8 +1512,11 @@ const CalendarTemplate = () => html(_t6 || (_t6 = _2`
 const vividCalendar = Calendar.compose({
   baseName: 'calendar',
   template: CalendarTemplate,
-  styles: css_248z
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-designSystem.register(vividCalendar());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividCalendar());
 
 export { vividCalendar };

package/calendar-event/index.js

@@ -0,0 +1,109 @@
+import { E as _export, i as descriptors, e as global$1, n as functionUncurryThis, y as hasOwnProperty_1, r as isCallable$1, o as objectDefineProperty, a8 as copyConstructorProperties$1, P as objectIsPrototypeOf, X as toString$1, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
+import { C as CalendarEvent } from '../shared/calendar-event.js';
+import '../shared/es.object.assign.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-soft: var(--vvd-color-cta-100);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-success-800);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-alert-800);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-300);\n  --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n  --_connotation-color-contrast: var(--vvd-color-warning-800);\n  --_connotation-color-soft: var(--vvd-color-warning-100);\n}\n.base.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-announcement-800);\n  --_connotation-color-soft: var(--vvd-color-announcement-100);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-information-800);\n  --_connotation-color-soft: var(--vvd-color-information-100);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
+
+var $ = _export;
+var DESCRIPTORS = descriptors;
+var global = global$1;
+var uncurryThis = functionUncurryThis;
+var hasOwn = hasOwnProperty_1;
+var isCallable = isCallable$1;
+var isPrototypeOf = objectIsPrototypeOf;
+var toString = toString$1;
+var defineProperty = objectDefineProperty.f;
+var copyConstructorProperties = copyConstructorProperties$1;
+
+var NativeSymbol = global.Symbol;
+var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+
+if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
+  // Safari 12 bug
+  NativeSymbol().description !== undefined
+)) {
+  var EmptyStringDescriptionStore = {};
+  // wrap Symbol constructor for correct work with undefined description
+  var SymbolWrapper = function Symbol() {
+    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
+    var result = isPrototypeOf(SymbolPrototype, this)
+      ? new NativeSymbol(description)
+      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
+      : description === undefined ? NativeSymbol() : NativeSymbol(description);
+    if (description === '') EmptyStringDescriptionStore[result] = true;
+    return result;
+  };
+
+  copyConstructorProperties(SymbolWrapper, NativeSymbol);
+  SymbolWrapper.prototype = SymbolPrototype;
+  SymbolPrototype.constructor = SymbolWrapper;
+
+  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
+  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
+  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis(''.replace);
+  var stringSlice = uncurryThis(''.slice);
+
+  defineProperty(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = thisSymbolValue(this);
+      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      var string = symbolDescriptiveString(symbol);
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      return desc === '' ? undefined : desc;
+    }
+  });
+
+  $({ global: true, constructor: true, forced: true }, {
+    Symbol: SymbolWrapper
+  });
+}
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const getClasses = ({
+  connotation,
+  appearance
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
+const getStyles = ({
+  start,
+  duration,
+  overlapCount
+}) => {
+  const stylesObj = Object.assign(Object.assign(Object.assign({}, overlapCount && {
+    '--vvd-calendar-event--overlap-count': overlapCount
+  }), start && {
+    '--vvd-calendar-event--start': start
+  }), duration && {
+    '--vvd-calendar-event--duration': duration
+  });
+  return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
+};
+const CalendarEventTemplate = () => html(_t || (_t = _`
+<div
+  style="${0}"
+  class="${0}"
+  role="button"
+  tabindex="0"
+>
+  ${0}
+  ${0}
+</div>`), getStyles, getClasses, when(x => x.heading, html(_t2 || (_t2 = _`<h2><strong>${0}</strong></h2>`), x => x.heading)), when(x => x.description, html(_t3 || (_t3 = _`<p>${0}</p>`), x => x.description)));
+
+const vividCalendarEvent = CalendarEvent.compose({
+  baseName: 'calendar-event',
+  template: CalendarEventTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividCalendarEvent());
+
+export { vividCalendarEvent };

package/card/index.js

@@ -0,0 +1,112 @@
+import '../shared/es.promise.resolve.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, V as observable, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
+import { s as slotted } from '../shared/slotted.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
+
+class Card extends FoundationElement {}
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "subtitle", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "icon", void 0);
+__decorate([attr, __metadata("design:type", Number)], Card.prototype, "elevation", void 0);
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "footerSlottedContent", void 0);
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8;
+const getClasses = _ => classNames('base', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
+function renderHeaderIcon() {
+  return html(_t || (_t = _2`
+	  <vwc-icon class="icon" inline name="${0}"></vwc-icon>`), x => x.icon);
+}
+function Headline() {
+  return html(_t2 || (_t2 = _2`
+		<div class="header-headline">${0}</div>
+	`), x => x.headline);
+}
+function Subtitle() {
+  return html(_t3 || (_t3 = _2`
+		<div class="header-subtitle">${0}</div>
+	`), x => x.subtitle);
+}
+function headerContent() {
+  return html(_t4 || (_t4 = _2`
+		<div class="header-content">
+			${0}
+			${0}
+		</div>
+	`), when(x => x.headline, Headline()), when(x => x.subtitle, Subtitle()));
+}
+function renderHeader() {
+  return html(_t5 || (_t5 = _2`
+		<header class="header">
+			<slot name="graphic" ${0}>${0}</slot>
+			${0}
+		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.headline || x.subtitle, headerContent()));
+}
+function shouldHideHeader(card) {
+  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+function renderMetaSlot() {
+  return html(_t6 || (_t6 = _2`
+		<slot name="meta" ${0}></slot>
+	`), slotted('metaSlottedContent'));
+}
+function text() {
+  return html(_t7 || (_t7 = _2`
+		<div class="text">${0}</div>
+	`), x => x.text);
+}
+const CardTemplate = () => html(_t8 || (_t8 = _2`
+	<vwc-elevation dp=${0}>
+
+		<div class="${0}">
+			<div class="wrapper">
+				<div class="vwc-card-media">
+					<slot name="media"></slot>
+				</div>
+				<slot name="main">
+					<div class="main-content">
+						<div class="header-wrapper">
+							${0}
+							${0}
+						</div>
+						${0}
+					</div>
+				</slot>
+				<div class="footer">
+					<slot name="footer" ${0}></slot>
+				</div>
+			</div>
+		</div>
+
+	</vwc-elevation>
+`), x => {
+  var _a;
+  return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
+}, getClasses, renderHeader(), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'));
+
+const prefix = getPrefix(import.meta.url);
+const vividCard = Card.compose({
+  baseName: 'card',
+  template: CardTemplate,
+  styles: css_248z
+});
+(async () => {
+  await loadComponentsModules(['icon', 'elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividCard());
+})();
+
+export { vividCard };