@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition13.cjs → calendar/definition.cjs}

@@ -1,435 +1,13 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const enums = require('./enums.cjs');
-const calendarEvent = require('./calendar-event.cjs');
-const _has = require('./_has.cjs');
-const classNames = require('./class-names.cjs');
-const repeat = require('./repeat.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-/**
- * Tests whether or not an object is an array.
- *
- * @private
- * @param {*} val The object to test.
- * @return {Boolean} `true` if `val` is an array, `false` otherwise.
- * @example
- *
- *      _isArray([]); //=> true
- *      _isArray(null); //=> false
- *      _isArray({}); //=> false
- */
-const _isArray = Array.isArray || function _isArray(val) {
-  return val != null && val.length >= 0 && Object.prototype.toString.call(val) === '[object Array]';
-};
-
-function _arrayFromIterator(iter) {
-  var list = [];
-  var next;
-  while (!(next = iter.next()).done) {
-    list.push(next.value);
-  }
-  return list;
-}
-
-function _includesWith(pred, x, list) {
-  var idx = 0;
-  var len = list.length;
-  while (idx < len) {
-    if (pred(x, list[idx])) {
-      return true;
-    }
-    idx += 1;
-  }
-  return false;
-}
-
-function _functionName(f) {
-  // String(x => x) evaluates to "x => x", so the pattern may not match.
-  var match = String(f).match(/^function (\w*)/);
-  return match == null ? '' : match[1];
-}
-
-// Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-function _objectIs(a, b) {
-  // SameValue algorithm
-  if (a === b) {
-    // Steps 1-5, 7-10
-    // Steps 6.b-6.e: +0 != -0
-    return a !== 0 || 1 / a === 1 / b;
-  } else {
-    // Step 6.a: NaN == NaN
-    return a !== a && b !== b;
-  }
-}
-const _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
-
-var toString = Object.prototype.toString;
-var _isArguments = /*#__PURE__*/function () {
-  return toString.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
-    return toString.call(x) === '[object Arguments]';
-  } : function _isArguments(x) {
-    return _has._has('callee', x);
-  };
-}();
-
-// cover IE < 9 keys issues
-var hasEnumBug = ! /*#__PURE__*/{
-  toString: null
-}.propertyIsEnumerable('toString');
-var nonEnumerableProps = ['constructor', 'valueOf', 'isPrototypeOf', 'toString', 'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];
-// Safari bug
-var hasArgsEnumBug = /*#__PURE__*/function () {
-
-  return arguments.propertyIsEnumerable('length');
-}();
-var contains = function contains(list, item) {
-  var idx = 0;
-  while (idx < list.length) {
-    if (list[idx] === item) {
-      return true;
-    }
-    idx += 1;
-  }
-  return false;
-};
-
-/**
- * Returns a list containing the names of all the enumerable own properties of
- * the supplied object.
- * Note that the order of the output array is not guaranteed to be consistent
- * across different JS platforms.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Object
- * @sig {k: v} -> [k]
- * @param {Object} obj The object to extract properties from
- * @return {Array} An array of the object's own properties.
- * @see R.keysIn, R.values, R.toPairs
- * @example
- *
- *      R.keys({a: 1, b: 2, c: 3}); //=> ['a', 'b', 'c']
- */
-var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ? /*#__PURE__*/_has._curry1(function keys(obj) {
-  return Object(obj) !== obj ? [] : Object.keys(obj);
-}) : /*#__PURE__*/_has._curry1(function keys(obj) {
-  if (Object(obj) !== obj) {
-    return [];
-  }
-  var prop, nIdx;
-  var ks = [];
-  var checkArgsLength = hasArgsEnumBug && _isArguments(obj);
-  for (prop in obj) {
-    if (_has._has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
-      ks[ks.length] = prop;
-    }
-  }
-  if (hasEnumBug) {
-    nIdx = nonEnumerableProps.length - 1;
-    while (nIdx >= 0) {
-      prop = nonEnumerableProps[nIdx];
-      if (_has._has(prop, obj) && !contains(ks, prop)) {
-        ks[ks.length] = prop;
-      }
-      nIdx -= 1;
-    }
-  }
-  return ks;
-});
-
-/**
- * Gives a single-word string description of the (native) type of a value,
- * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
- * attempt to distinguish user Object types any further, reporting them all as
- * 'Object'.
- *
- * @func
- * @memberOf R
- * @since v0.8.0
- * @category Type
- * @sig * -> String
- * @param {*} val The value to test
- * @return {String}
- * @example
- *
- *      R.type({}); //=> "Object"
- *      R.type(1); //=> "Number"
- *      R.type(false); //=> "Boolean"
- *      R.type('s'); //=> "String"
- *      R.type(null); //=> "Null"
- *      R.type([]); //=> "Array"
- *      R.type(/[A-z]/); //=> "RegExp"
- *      R.type(() => {}); //=> "Function"
- *      R.type(async () => {}); //=> "AsyncFunction"
- *      R.type(undefined); //=> "Undefined"
- *      R.type(BigInt(123)); //=> "BigInt"
- */
-var type = /*#__PURE__*/_has._curry1(function type(val) {
-  return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
-});
-
-/**
- * private _uniqContentEquals function.
- * That function is checking equality of 2 iterator contents with 2 assumptions
- * - iterators lengths are the same
- * - iterators values are unique
- *
- * false-positive result will be returned for comparison of, e.g.
- * - [1,2,3] and [1,2,3,4]
- * - [1,1,1] and [1,2,3]
- * */
-
-function _uniqContentEquals(aIterator, bIterator, stackA, stackB) {
-  var a = _arrayFromIterator(aIterator);
-  var b = _arrayFromIterator(bIterator);
-  function eq(_a, _b) {
-    return _equals(_a, _b, stackA.slice(), stackB.slice());
-  }
-
-  // if *a* array contains any element that is not included in *b*
-  return !_includesWith(function (b, aItem) {
-    return !_includesWith(eq, aItem, b);
-  }, b, a);
-}
-function _equals(a, b, stackA, stackB) {
-  if (_objectIs$1(a, b)) {
-    return true;
-  }
-  var typeA = type(a);
-  if (typeA !== type(b)) {
-    return false;
-  }
-  if (typeof a['fantasy-land/equals'] === 'function' || typeof b['fantasy-land/equals'] === 'function') {
-    return typeof a['fantasy-land/equals'] === 'function' && a['fantasy-land/equals'](b) && typeof b['fantasy-land/equals'] === 'function' && b['fantasy-land/equals'](a);
-  }
-  if (typeof a.equals === 'function' || typeof b.equals === 'function') {
-    return typeof a.equals === 'function' && a.equals(b) && typeof b.equals === 'function' && b.equals(a);
-  }
-  switch (typeA) {
-    case 'Arguments':
-    case 'Array':
-    case 'Object':
-      if (typeof a.constructor === 'function' && _functionName(a.constructor) === 'Promise') {
-        return a === b;
-      }
-      break;
-    case 'Boolean':
-    case 'Number':
-    case 'String':
-      if (!(typeof a === typeof b && _objectIs$1(a.valueOf(), b.valueOf()))) {
-        return false;
-      }
-      break;
-    case 'Date':
-      if (!_objectIs$1(a.valueOf(), b.valueOf())) {
-        return false;
-      }
-      break;
-    case 'Error':
-      return a.name === b.name && a.message === b.message;
-    case 'RegExp':
-      if (!(a.source === b.source && a.global === b.global && a.ignoreCase === b.ignoreCase && a.multiline === b.multiline && a.sticky === b.sticky && a.unicode === b.unicode)) {
-        return false;
-      }
-      break;
-  }
-  var idx = stackA.length - 1;
-  while (idx >= 0) {
-    if (stackA[idx] === a) {
-      return stackB[idx] === b;
-    }
-    idx -= 1;
-  }
-  switch (typeA) {
-    case 'Map':
-      if (a.size !== b.size) {
-        return false;
-      }
-      return _uniqContentEquals(a.entries(), b.entries(), stackA.concat([a]), stackB.concat([b]));
-    case 'Set':
-      if (a.size !== b.size) {
-        return false;
-      }
-      return _uniqContentEquals(a.values(), b.values(), stackA.concat([a]), stackB.concat([b]));
-    case 'Arguments':
-    case 'Array':
-    case 'Object':
-    case 'Boolean':
-    case 'Number':
-    case 'String':
-    case 'Date':
-    case 'Error':
-    case 'RegExp':
-    case 'Int8Array':
-    case 'Uint8Array':
-    case 'Uint8ClampedArray':
-    case 'Int16Array':
-    case 'Uint16Array':
-    case 'Int32Array':
-    case 'Uint32Array':
-    case 'Float32Array':
-    case 'Float64Array':
-    case 'ArrayBuffer':
-      break;
-    default:
-      // Values of other types are only equal if identical.
-      return false;
-  }
-  var keysA = keys(a);
-  if (keysA.length !== keys(b).length) {
-    return false;
-  }
-  var extendedStackA = stackA.concat([a]);
-  var extendedStackB = stackB.concat([b]);
-  idx = keysA.length - 1;
-  while (idx >= 0) {
-    var key = keysA[idx];
-    if (!(_has._has(key, b) && _equals(b[key], a[key], extendedStackA, extendedStackB))) {
-      return false;
-    }
-    idx -= 1;
-  }
-  return true;
-}
-
-/**
- * Returns `true` if its arguments are equivalent, `false` otherwise. Handles
- * cyclical data structures.
- *
- * Dispatches symmetrically to the `equals` methods of both arguments, if
- * present.
- *
- * @func
- * @memberOf R
- * @since v0.15.0
- * @category Relation
- * @sig a -> b -> Boolean
- * @param {*} a
- * @param {*} b
- * @return {Boolean}
- * @example
- *
- *      R.equals(1, 1); //=> true
- *      R.equals(1, '1'); //=> false
- *      R.equals([1, 2, 3], [1, 2, 3]); //=> true
- *
- *      const a = {}; a.v = a;
- *      const b = {}; b.v = b;
- *      R.equals(a, b); //=> true
- */
-var equals = /*#__PURE__*/_has._curry2(function equals(a, b) {
-  return _equals(a, b, [], []);
-});
-
-function _isObject(x) {
-  return Object.prototype.toString.call(x) === '[object Object]';
-}
-
-function _isString(x) {
-  return Object.prototype.toString.call(x) === '[object String]';
-}
-
-/**
- * A function that returns the `!` of its argument. It will return `true` when
- * passed false-y value, and `false` when passed a truth-y one.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Logic
- * @sig * -> Boolean
- * @param {*} a any value
- * @return {Boolean} the logical inverse of passed argument.
- * @see R.complement
- * @example
- *
- *      R.not(true); //=> false
- *      R.not(false); //=> true
- *      R.not(0); //=> true
- *      R.not(1); //=> false
- */
-var not = /*#__PURE__*/_has._curry1(function not(a) {
-  return !a;
-});
-
-/**
- * Tests whether or not an object is a typed array.
- *
- * @private
- * @param {*} val The object to test.
- * @return {Boolean} `true` if `val` is a typed array, `false` otherwise.
- * @example
- *
- *      _isTypedArray(new Uint8Array([])); //=> true
- *      _isTypedArray(new Float32Array([])); //=> true
- *      _isTypedArray([]); //=> false
- *      _isTypedArray(null); //=> false
- *      _isTypedArray({}); //=> false
- */
-function _isTypedArray(val) {
-  var type = Object.prototype.toString.call(val);
-  return type === '[object Uint8ClampedArray]' || type === '[object Int8Array]' || type === '[object Uint8Array]' || type === '[object Int16Array]' || type === '[object Uint16Array]' || type === '[object Int32Array]' || type === '[object Uint32Array]' || type === '[object Float32Array]' || type === '[object Float64Array]' || type === '[object BigInt64Array]' || type === '[object BigUint64Array]';
-}
-
-/**
- * Returns the empty value of its argument's type. Ramda defines the empty
- * value of Array (`[]`), Object (`{}`), String (`''`),
- * TypedArray (`Uint8Array []`, `Float32Array []`, etc), and Arguments. Other
- * types are supported if they define `<Type>.empty`,
- * `<Type>.prototype.empty` or implement the
- * [FantasyLand Monoid spec](https://github.com/fantasyland/fantasy-land#monoid).
- *
- * Dispatches to the `empty` method of the first argument, if present.
- *
- * @func
- * @memberOf R
- * @since v0.3.0
- * @category Function
- * @sig a -> a
- * @param {*} x
- * @return {*}
- * @example
- *
- *      R.empty(Just(42));               //=> Nothing()
- *      R.empty([1, 2, 3]);              //=> []
- *      R.empty('unicorns');             //=> ''
- *      R.empty({x: 1, y: 2});           //=> {}
- *      R.empty(Uint8Array.from('123')); //=> Uint8Array []
- */
-var empty = /*#__PURE__*/_has._curry1(function empty(x) {
-  return x != null && typeof x['fantasy-land/empty'] === 'function' ? x['fantasy-land/empty']() : x != null && x.constructor != null && typeof x.constructor['fantasy-land/empty'] === 'function' ? x.constructor['fantasy-land/empty']() : x != null && typeof x.empty === 'function' ? x.empty() : x != null && x.constructor != null && typeof x.constructor.empty === 'function' ? x.constructor.empty() : _isArray(x) ? [] : _isString(x) ? '' : _isObject(x) ? {} : _isArguments(x) ? function () {
-    return arguments;
-  }() : _isTypedArray(x) ? x.constructor.from('') : void 0 // else
-  ;
-});
-
-/**
- * Returns `true` if the given value is its type's empty value; `false`
- * otherwise.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Logic
- * @sig a -> Boolean
- * @param {*} x
- * @return {Boolean}
- * @see R.empty, R.isNotEmpty
- * @example
- *
- *      R.isEmpty([1, 2, 3]);           //=> false
- *      R.isEmpty([]);                  //=> true
- *      R.isEmpty('');                  //=> true
- *      R.isEmpty(null);                //=> false
- *      R.isEmpty({});                  //=> true
- *      R.isEmpty({length: 0});         //=> false
- *      R.isEmpty(Uint8Array.from('')); //=> true
- */
-var isEmpty = /*#__PURE__*/_has._curry1(function isEmpty(x) {
-  return x != null && equals(x, empty(x));
-});
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const enums = require('../unbundled/enums.cjs');
+const calendarEvent = require('../unbundled/calendar-event.cjs');
+const ramda = require('ramda');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ":host{display:block;overflow:auto;block-size:inherit;max-block-size:inherit}ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\"filler 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}.sticky-column .row-headers,.sticky-all .row-headers{position:sticky;z-index:1;background-color:var(--calendar-column-background-color, var(--vvd-color-canvas));inset-inline-start:0;margin-inline-end:3px}.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}.sticky-header .column-headers,.sticky-all .column-headers{position:sticky;z-index:1;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));inset-block-start:0;margin-block-end:3px}.filler{background-color:transparent;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{position:sticky;z-index:2;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));margin-block-end:3px}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
 
@@ -515,7 +93,7 @@ const getEventContext = function(e) {
     ...day != void 0 && { day },
     ...hour != void 0 && { hour }
   };
-  return not(isEmpty(context)) ? context : null;
+  return ramda.not(ramda.isEmpty(context)) ? context : null;
 };
 
 var __defProp = Object.defineProperty;
@@ -632,7 +210,7 @@ class Calendar extends vividElement.VividElement {
     const initialScrollHour = 8;
     const rowHeight = this.scrollHeight / this._hours;
     const scrollPosition = rowHeight * (initialScrollHour - 1);
-    vividElement.DOM.queueUpdate(() => {
+    fastElement.DOM.queueUpdate(() => {
       this.scrollTo({
         top: scrollPosition
       });
@@ -640,19 +218,19 @@ class Calendar extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Calendar.prototype, "datetime");
 __decorateClass([
-  vividElement.attr({ attribute: "start-day" })
+  fastElement.attr({ attribute: "start-day" })
 ], Calendar.prototype, "startDay");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Calendar.prototype, "locales");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Calendar.prototype, "hour12");
 __decorateClass([
-  vividElement.attr({ attribute: "sticky-mode", mode: "fromView" })
+  fastElement.attr({ attribute: "sticky-mode", mode: "fromView" })
 ], Calendar.prototype, "stickyMode");
 
 function getValidDateString(date) {
@@ -673,12 +251,12 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
   return new Date(date.setDate(day));
 }
 
-const getClasses = ({ stickyMode }) => classNames.classNames([`sticky-${stickyMode}`, Boolean(stickyMode)]);
+const getClasses = ({ stickyMode }) => fastWebUtilities.classNames([`sticky-${stickyMode}`, Boolean(stickyMode)]);
 const HoursTemplate = () => {
-  return vividElement.html` <div class="row-headers" role="row">
-		${repeat.repeat(
+  return fastElement.html` <div class="row-headers" role="row">
+		${fastElement.repeat(
     (x) => x.hoursAsDatetime,
-    vividElement.html`<span role="rowheader">
+    fastElement.html`<span role="rowheader">
 				<time
 					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
       hour: "numeric",
@@ -696,10 +274,10 @@ const HoursTemplate = () => {
 	</div>`;
 };
 const DaysTemplate = () => {
-  return vividElement.html` <div class="column-headers" role="row">
-		${repeat.repeat(
+  return fastElement.html` <div class="column-headers" role="row">
+		${fastElement.repeat(
     (x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
-    vividElement.html` <div role="columnheader" tabindex="-1">
+    fastElement.html` <div role="columnheader" tabindex="-1">
 				<time datetime=${(x) => getValidDateString(x)}>
 					<h2>
 						<!-- TODO add to column aria-labelledby or describedby to count
@@ -728,12 +306,12 @@ const DaysTemplate = () => {
   )}
 	</div>`;
 };
-const ColumnTemplate = vividElement.html`
+const ColumnTemplate = fastElement.html`
 	<div role="gridcell" tabindex="-1">
 		<slot name="day-${(_, c) => c.index}"></slot>
 	</div>
 `;
-const CalendarTemplate = vividElement.html`
+const CalendarTemplate = fastElement.html`
 	<div
 		role="grid"
 		class="${getClasses}"
@@ -745,13 +323,13 @@ const CalendarTemplate = vividElement.html`
 			${HoursTemplate}
 			<div class="calendar-grid-presentation" role="presentation">
 				<div class="hours" role="list">
-					${repeat.repeat(
+					${fastElement.repeat(
   (x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
-  vividElement.html` <div role="listitem"></div>`
+  fastElement.html` <div role="listitem"></div>`
 )}
 				</div>
 				<div class="columns" role="row">
-					${repeat.repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
+					${fastElement.repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
   positioning: true
 })}
 				</div>
@@ -775,6 +353,6 @@ const calendarDefinition = vividElement.defineVividComponent(
 );
 const registerCalendar = vividElement.createRegisterFunction(calendarDefinition);
 
-exports.Calendar = Calendar;
+exports.VwcCalendarElement = Calendar;
 exports.calendarDefinition = calendarDefinition;
 exports.registerCalendar = registerCalendar;