@vonage/vivid 4.31.0 → 5.1.0

package/calendar/index.js

@@ -1,3 +1,431 @@
-import { r as registerCalendar } from '../shared/definition13.js';
-
-registerCalendar();
+import { V as $, D as q, a as h, h as s, c as z, d as H } from "../bundled/vivid-element.js";
+import { S as R } from "../bundled/enums.js";
+import { C as T } from "../bundled/calendar-event.js";
+import { _ as f, a as c, b as F } from "../bundled/_has.js";
+import { c as M } from "../bundled/class-names.js";
+import { r as g } from "../bundled/repeat.js";
+const N = Array.isArray || function(e) {
+  return e != null && e.length >= 0 && Object.prototype.toString.call(e) === "[object Array]";
+};
+function b(t) {
+  for (var e = [], r; !(r = t.next()).done; )
+    e.push(r.value);
+  return e;
+}
+function A(t, e, r) {
+  for (var n = 0, o = r.length; n < o; ) {
+    if (t(e, r[n]))
+      return !0;
+    n += 1;
+  }
+  return !1;
+}
+function U(t) {
+  var e = String(t).match(/^function (\w*)/);
+  return e == null ? "" : e[1];
+}
+function P(t, e) {
+  return t === e ? t !== 0 || 1 / t === 1 / e : t !== t && e !== e;
+}
+const y = typeof Object.is == "function" ? Object.is : P;
+var k = Object.prototype.toString, C = /* @__PURE__ */ function() {
+  return k.call(arguments) === "[object Arguments]" ? function(e) {
+    return k.call(e) === "[object Arguments]";
+  } : function(e) {
+    return f("callee", e);
+  };
+}(), L = !/* @__PURE__ */ {
+  toString: null
+}.propertyIsEnumerable("toString"), O = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], D = /* @__PURE__ */ function() {
+  return arguments.propertyIsEnumerable("length");
+}(), W = function(e, r) {
+  for (var n = 0; n < e.length; ) {
+    if (e[n] === r)
+      return !0;
+    n += 1;
+  }
+  return !1;
+}, E = typeof Object.keys == "function" && !D ? /* @__PURE__ */ c(function(e) {
+  return Object(e) !== e ? [] : Object.keys(e);
+}) : /* @__PURE__ */ c(function(e) {
+  if (Object(e) !== e)
+    return [];
+  var r, n, o = [], i = D && C(e);
+  for (r in e)
+    f(r, e) && (!i || r !== "length") && (o[o.length] = r);
+  if (L)
+    for (n = O.length - 1; n >= 0; )
+      r = O[n], f(r, e) && !W(o, r) && (o[o.length] = r), n -= 1;
+  return o;
+}), S = /* @__PURE__ */ c(function(e) {
+  return e === null ? "Null" : e === void 0 ? "Undefined" : Object.prototype.toString.call(e).slice(8, -1);
+});
+function _(t, e, r, n) {
+  var o = b(t), i = b(e);
+  function l(a, d) {
+    return v(a, d, r.slice(), n.slice());
+  }
+  return !A(function(a, d) {
+    return !A(l, d, a);
+  }, i, o);
+}
+function v(t, e, r, n) {
+  if (y(t, e))
+    return !0;
+  var o = S(t);
+  if (o !== S(e))
+    return !1;
+  if (typeof t["fantasy-land/equals"] == "function" || typeof e["fantasy-land/equals"] == "function")
+    return typeof t["fantasy-land/equals"] == "function" && t["fantasy-land/equals"](e) && typeof e["fantasy-land/equals"] == "function" && e["fantasy-land/equals"](t);
+  if (typeof t.equals == "function" || typeof e.equals == "function")
+    return typeof t.equals == "function" && t.equals(e) && typeof e.equals == "function" && e.equals(t);
+  switch (o) {
+    case "Arguments":
+    case "Array":
+    case "Object":
+      if (typeof t.constructor == "function" && U(t.constructor) === "Promise")
+        return t === e;
+      break;
+    case "Boolean":
+    case "Number":
+    case "String":
+      if (!(typeof t == typeof e && y(t.valueOf(), e.valueOf())))
+        return !1;
+      break;
+    case "Date":
+      if (!y(t.valueOf(), e.valueOf()))
+        return !1;
+      break;
+    case "Error":
+      return t.name === e.name && t.message === e.message;
+    case "RegExp":
+      if (!(t.source === e.source && t.global === e.global && t.ignoreCase === e.ignoreCase && t.multiline === e.multiline && t.sticky === e.sticky && t.unicode === e.unicode))
+        return !1;
+      break;
+  }
+  for (var i = r.length - 1; i >= 0; ) {
+    if (r[i] === t)
+      return n[i] === e;
+    i -= 1;
+  }
+  switch (o) {
+    case "Map":
+      return t.size !== e.size ? !1 : _(t.entries(), e.entries(), r.concat([t]), n.concat([e]));
+    case "Set":
+      return t.size !== e.size ? !1 : _(t.values(), e.values(), r.concat([t]), n.concat([e]));
+    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:
+      return !1;
+  }
+  var l = E(t);
+  if (l.length !== E(e).length)
+    return !1;
+  var a = r.concat([t]), d = n.concat([e]);
+  for (i = l.length - 1; i >= 0; ) {
+    var p = l[i];
+    if (!(f(p, e) && v(e[p], t[p], a, d)))
+      return !1;
+    i -= 1;
+  }
+  return !0;
+}
+var B = /* @__PURE__ */ F(function(e, r) {
+  return v(e, r, [], []);
+});
+function K(t) {
+  return Object.prototype.toString.call(t) === "[object Object]";
+}
+function V(t) {
+  return Object.prototype.toString.call(t) === "[object String]";
+}
+var Y = /* @__PURE__ */ c(function(e) {
+  return !e;
+});
+function G(t) {
+  var e = Object.prototype.toString.call(t);
+  return e === "[object Uint8ClampedArray]" || e === "[object Int8Array]" || e === "[object Uint8Array]" || e === "[object Int16Array]" || e === "[object Uint16Array]" || e === "[object Int32Array]" || e === "[object Uint32Array]" || e === "[object Float32Array]" || e === "[object Float64Array]" || e === "[object BigInt64Array]" || e === "[object BigUint64Array]";
+}
+var X = /* @__PURE__ */ c(function(e) {
+  return e != null && typeof e["fantasy-land/empty"] == "function" ? e["fantasy-land/empty"]() : e != null && e.constructor != null && typeof e.constructor["fantasy-land/empty"] == "function" ? e.constructor["fantasy-land/empty"]() : e != null && typeof e.empty == "function" ? e.empty() : e != null && e.constructor != null && typeof e.constructor.empty == "function" ? e.constructor.empty() : N(e) ? [] : V(e) ? "" : K(e) ? {} : C(e) ? /* @__PURE__ */ function() {
+    return arguments;
+  }() : G(e) ? e.constructor.from("") : void 0;
+}), J = /* @__PURE__ */ c(function(e) {
+  return e != null && B(e, X(e));
+});
+const Q = ':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}', j = "ArrowUp", x = "ArrowRight", w = "ArrowDown", I = "ArrowLeft";
+function Z(t) {
+  return t instanceof HTMLElement && (t.matches('[role="gridcell"i]') || t.matches('[role="columnheader"i]'));
+}
+const ee = (t) => t.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
+function te(t, e) {
+  if (e.parentNode instanceof HTMLElement)
+    switch (t) {
+      case x:
+        return e.nextElementSibling || e.parentNode.firstElementChild;
+      case I:
+        return e.previousElementSibling || e.parentNode.lastElementChild;
+      case j:
+      case w: {
+        const { children: r } = e.parentNode, n = Array.from(r).indexOf(e);
+        return this.shadowRoot.querySelector(
+          `${ee(e)}:nth-child(${n + 1})`
+        );
+      }
+    }
+}
+function re(t, e) {
+  if (t !== w)
+    return;
+  const r = e.closest('[role="columnheader"i]'), n = this.shadowRoot.querySelectorAll(
+    '[role="columnheader"i]'
+  ), o = Array.from(n).indexOf(r);
+  return this.shadowRoot.querySelector(
+    `[role="gridcell"i]:nth-child(${o + 1})`
+  );
+}
+function ne(t) {
+  const e = t.closest('[role="gridcell"i], [role="columnheader"i]');
+  if (e) {
+    const { parentElement: r } = e;
+    if (r)
+      return r.children && Array.from(r.children).indexOf(e);
+  }
+}
+function oe(t, e, r) {
+  const n = e.closest(
+    '[role="rowheader"], [role="gridcell"i]'
+  );
+  if (n) {
+    const o = n.getBoundingClientRect(), i = t.clientY - o.y, l = o.height / r, a = i / l;
+    return Math.round((a + Number.EPSILON) * 100) / 100;
+  }
+}
+const ie = function(t) {
+  if (!(t instanceof KeyboardEvent || t instanceof MouseEvent))
+    throw new Error(
+      "Invalid event. Event must be instance of KeyboardEvent or MouseEvent"
+    );
+  const [e] = t.composedPath();
+  if (!(e && e instanceof HTMLElement && this.shadowRoot.contains(e)))
+    throw new Error(
+      "Invalid event. Event must contain a target object which is a direct descendant of calendar"
+    );
+  const r = ne(e);
+  let n;
+  t instanceof MouseEvent && (n = oe(t, e, this._hours));
+  const o = {
+    ...r != null && { day: r },
+    ...n != null && { hour: n }
+  };
+  return Y(J(o)) ? o : null;
+};
+var le = Object.defineProperty, m = (t, e, r, n) => {
+  for (var o = void 0, i = t.length - 1, l; i >= 0; i--)
+    (l = t[i]) && (o = l(e, r, o) || o);
+  return o && le(e, r, o), o;
+};
+const ae = (t) => {
+  const e = window.getComputedStyle(t).overflowY, r = window.getComputedStyle(t).overflowX;
+  return {
+    vertical: (e === "auto" || e === "scroll") && t.scrollHeight > t.clientHeight,
+    horizontal: (r === "auto" || r === "scroll") && t.scrollWidth > t.clientWidth
+  };
+};
+class u extends $ {
+  constructor() {
+    super(...arguments), this.hour12 = !1, this.stickyMode = R.All, this._hours = 24, this._days = 7, this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((e, r) => new Date(e.setHours(++r))), this._generateDaysArr = (e) => {
+      if (e.length == this._days)
+        return e;
+      const r = new Date(e[e.length - 1]);
+      return r.setDate(r.getDate() + 1), this._generateDaysArr([...e, r]);
+    }, this.getEventContext = ie;
+  }
+  get #e() {
+    const { activeElement: e } = document;
+    return e instanceof T ? e : null;
+  }
+  getCalendarEventContainingCell(e) {
+    const r = e.getAttribute("slot");
+    return this.shadowRoot.querySelector(
+      `slot[name="${r}"i]`
+    ).parentElement;
+  }
+  arrowKeysInteractions(e) {
+    const { activeElement: r } = this.shadowRoot;
+    let n;
+    Z(r) ? n = te.call(this, e, r) : this.#e ? n = this.getCalendarEventContainingCell(
+      this.#e
+    ) : r?.matches('em[role="button"i]') ? n = re.call(
+      this,
+      e,
+      r
+    ) : n = this.shadowRoot.querySelector(
+      '[role="columnheader"i]'
+    ), this.activateElement(n);
+  }
+  activateElement(e) {
+    const r = ({ target: n }) => n.setAttribute("tabindex", "-1");
+    e?.addEventListener("blur", r, { once: !0 }), e?.setAttribute("tabindex", "0"), e?.focus();
+  }
+  onKeydown({ key: e }) {
+    const r = [j, x, w, I].some(
+      (n) => n == e
+    );
+    return r && this.arrowKeysInteractions(e), !r;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.initializeScrollPosition();
+  }
+  initializeScrollPosition() {
+    if (!ae(this).vertical)
+      return;
+    const n = this.scrollHeight / this._hours * (8 - 1);
+    q.queueUpdate(() => {
+      this.scrollTo({
+        top: n
+      });
+    });
+  }
+}
+m([
+  h
+], u.prototype, "datetime");
+m([
+  h({ attribute: "start-day" })
+], u.prototype, "startDay");
+m([
+  h
+], u.prototype, "locales");
+m([
+  h({ mode: "boolean" })
+], u.prototype, "hour12");
+m([
+  h({ attribute: "sticky-mode", mode: "fromView" })
+], u.prototype, "stickyMode");
+function se(t) {
+  const e = (r) => `0${r}`.slice(-2);
+  return `${t.getFullYear()}-${e(t.getMonth() + 1)}-${e(
+    t.getDate()
+  )}`;
+}
+const ce = /* @__PURE__ */ new Map([
+  ["sunday", 0],
+  ["monday", 1]
+]);
+function ue(t = /* @__PURE__ */ new Date(), e) {
+  t = new Date(t);
+  let r = ce.get(e);
+  r ??= 1;
+  const n = t.getDate() - (t.getDay() + 7 - r) % 7;
+  return new Date(t.setDate(n));
+}
+const de = ({ stickyMode: t }) => M([`sticky-${t}`, !!t]), he = () => s` <div class="row-headers" role="row">
+		${g(
+  (t) => t.hoursAsDatetime,
+  s`<span role="rowheader">
+				<time
+					datetime="${(t, e) => new Intl.DateTimeFormat(e.parent.locales, {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !1
+  }).format(t)}"
+				>
+					${(t, e) => new Intl.DateTimeFormat(e.parent.locales, {
+    hour: "numeric",
+    hour12: e.parent.hour12
+  }).format(t)}
+				</time>
+			</span>`
+)}
+	</div>`, me = () => s` <div class="column-headers" role="row">
+		${g(
+  (t) => t._generateDaysArr([ue(t.datetime, t.startDay)]),
+  s` <div role="columnheader" tabindex="-1">
+				<time datetime=${(t) => se(t)}>
+					<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=${(t, e) => new Intl.DateTimeFormat(e.parent.locales, {
+    weekday: "long",
+    month: "long",
+    day: "2-digit"
+  }).format(t)}
+						>
+							${(t, e) => new Intl.DateTimeFormat(e.parent.locales, {
+    day: "2-digit"
+  }).format(t)}
+						</em>
+						<small aria-hidden="true">
+							${(t, e) => new Intl.DateTimeFormat(e.parent.locales, {
+    weekday: "short"
+  }).format(t)}
+						</small>
+					</h2>
+				</time>
+			</div>`
+)}
+	</div>`, fe = s`
+	<div role="gridcell" tabindex="-1">
+		<slot name="day-${(t, e) => e.index}"></slot>
+	</div>
+`, ge = s`
+	<div
+		role="grid"
+		class="${de}"
+		@keydown=${(t, e) => t.onKeydown(e.event)}
+	>
+		<div class="filler"></div>
+		${me}
+		<div class="calendar-row" role="rowgroup">
+			${he}
+			<div class="calendar-grid-presentation" role="presentation">
+				<div class="hours" role="list">
+					${g(
+  (t) => Array.from({ length: t.hoursAsDatetime.length + 1 }),
+  s` <div role="listitem"></div>`
+)}
+				</div>
+				<div class="columns" role="row">
+					${g((t) => Array.from(Array(t._days)), fe, {
+  positioning: !0
+})}
+				</div>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+`, pe = H(
+  "calendar",
+  u,
+  ge,
+  [],
+  {
+    styles: Q,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), ye = z(pe);
+ye();

package/{shared/definition12.cjs → calendar-event/definition.cjs}

@@ -1,14 +1,16 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const calendarEvent = require('./calendar-event.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const calendarEvent = require('../unbundled/calendar-event.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
 
 const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
-const getClasses = ({ connotation, appearance }) => classNames.classNames(
+const getClasses = ({ connotation, appearance }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)]
@@ -23,7 +25,7 @@ const getStyles = ({ start, duration, overlapCount }) => {
   };
   return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-const CalendarEventTemplate = vividElement.html` <div
+const CalendarEventTemplate = fastElement.html` <div
 	style="${getStyles}"
 	class="${getClasses}"
 	tabindex="0"
@@ -31,8 +33,8 @@ const CalendarEventTemplate = vividElement.html` <div
   role: "button"
 })}
 >
-	${when.when((x) => x.heading, vividElement.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
-	${when.when((x) => x.description, vividElement.html`<p>${(x) => x.description}</p>`)}
+	${fastElement.when((x) => x.heading, fastElement.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${fastElement.when((x) => x.description, fastElement.html`<p>${(x) => x.description}</p>`)}
 </div>`;
 
 const calendarEventDefinition = vividElement.defineVividComponent(
@@ -51,5 +53,6 @@ const registerCalendarEvent = vividElement.createRegisterFunction(
   calendarEventDefinition
 );
 
+exports.VwcCalendarEventElement = calendarEvent.CalendarEvent;
 exports.calendarEventDefinition = calendarEventDefinition;
 exports.registerCalendarEvent = registerCalendarEvent;

package/{shared/definition12.js → calendar-event/definition.js}

@@ -1,8 +1,8 @@
-import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { C as CalendarEvent } from './calendar-event.js';
-import { d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { C as CalendarEvent } from '../unbundled/calendar-event.js';
+import { when, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
 const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
 
@@ -49,4 +49,4 @@ const registerCalendarEvent = createRegisterFunction(
   calendarEventDefinition
 );
 
-export { calendarEventDefinition as c, registerCalendarEvent as r };
+export { CalendarEvent as VwcCalendarEventElement, calendarEventDefinition, registerCalendarEvent };

package/calendar-event/index.cjs

@@ -1,5 +1,9 @@
-'use strict';
-
-const definition = require('../shared/definition12.cjs');
-
-definition.registerCalendarEvent();
+"use strict";const n=require("../bundled/vivid-element.cjs"),v=require("../bundled/calendar-event.cjs"),l=require("../bundled/delegates-aria.cjs"),i=require("../bundled/class-names.cjs"),t=require("../bundled/when.cjs"),s=":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}",d=({connotation:a,appearance:o})=>i.classNames("base",[`connotation-${a}`,!!a],[`appearance-${o}`,!!o]),p=({start:a,duration:o,overlapCount:r})=>{const e={...r&&{"--vvd-calendar-event--overlap-count":r},...a&&{"--vvd-calendar-event--start":a},...o&&{"--vvd-calendar-event--duration":o}};return Object.entries(e).map(c=>c.join(":")).join(";")},m=n.html` <div
+	style="${p}"
+	class="${d}"
+	tabindex="0"
+	${l.delegateAria({role:"button"})}
+>
+	${t.when(a=>a.heading,n.html`<h2><strong>${a=>a.heading}</strong></h2>`)}
+	${t.when(a=>a.description,n.html`<p>${a=>a.description}</p>`)}
+</div>`,u=n.defineVividComponent("calendar-event",v.CalendarEvent,m,[],{styles:s,shadowOptions:{delegatesFocus:!0}}),x=n.createRegisterFunction(u);x();

package/calendar-event/index.js

@@ -1,3 +1,43 @@
-import { r as registerCalendarEvent } from '../shared/definition12.js';
-
-registerCalendarEvent();
+import { h as n, c as v, d as l } from "../bundled/vivid-element.js";
+import { C as i } from "../bundled/calendar-event.js";
+import { d as s } from "../bundled/delegates-aria.js";
+import { c as d } from "../bundled/class-names.js";
+import { w as t } from "../bundled/when.js";
+const p = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}", m = ({ connotation: a, appearance: o }) => d(
+  "base",
+  [`connotation-${a}`, !!a],
+  [`appearance-${o}`, !!o]
+), x = ({ start: a, duration: o, overlapCount: r }) => {
+  const e = {
+    ...r && {
+      "--vvd-calendar-event--overlap-count": r
+    },
+    ...a && { "--vvd-calendar-event--start": a },
+    ...o && { "--vvd-calendar-event--duration": o }
+  };
+  return Object.entries(e).map((c) => c.join(":")).join(";");
+}, u = n` <div
+	style="${x}"
+	class="${m}"
+	tabindex="0"
+	${s({
+  role: "button"
+})}
+>
+	${t((a) => a.heading, n`<h2><strong>${(a) => a.heading}</strong></h2>`)}
+	${t((a) => a.description, n`<p>${(a) => a.description}</p>`)}
+</div>`, f = l(
+  "calendar-event",
+  i,
+  u,
+  [],
+  {
+    styles: p,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), _ = v(
+  f
+);
+_();