@vonage/vivid 5.2.0 → 5.4.0

package/bundled/when.cjs

@@ -1 +1 @@
-"use strict";const o=n=>typeof n=="function",u=()=>null;function e(n){return n===void 0?u:o(n)?n:()=>n}function B(n,s,c){const d=o(n)?n:()=>n,f=e(s),r=e(c);return(t,i)=>d(t,i)?f(t,i):r(t,i)}exports.when=B;
+"use strict";const s=require("./vivid-element.cjs"),l=()=>null;function e(n){return n===void 0?l:s.isFunction(n)?n:()=>n}function m(n,d,r){const u=s.isFunction(n)?n:()=>n,c=e(d),g=e(r);return(i,t)=>u(i,t)?c(i,t):g(i,t)}exports.when=m;

package/bundled/when.js

@@ -1,11 +1,12 @@
-const e = (n) => typeof n == "function", r = () => null;
-function o(n) {
-  return n === void 0 ? r : e(n) ? n : () => n;
+import { f as r } from "./vivid-element.js";
+const g = () => null;
+function e(n) {
+  return n === void 0 ? g : r(n) ? n : () => n;
 }
-function B(n, s, c) {
-  const d = e(n) ? n : () => n, f = o(s), p = o(c);
-  return (t, i) => d(t, i) ? f(t, i) : p(t, i);
+function p(n, s, d) {
+  const f = r(n) ? n : () => n, m = e(s), a = e(d);
+  return (i, t) => f(i, t) ? m(i, t) : a(i, t);
 }
 export {
-  B as w
+  p as w
 };

package/calendar/definition.cjs

@@ -210,7 +210,7 @@ class Calendar extends vividElement.VividElement {
     const initialScrollHour = 8;
     const rowHeight = this.scrollHeight / this._hours;
     const scrollPosition = rowHeight * (initialScrollHour - 1);
-    fastElement.DOM.queueUpdate(() => {
+    fastElement.Updates.enqueue(() => {
       this.scrollTo({
         top: scrollPosition
       });

package/calendar/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { DOM, attr, repeat, html } from '@microsoft/fast-element';
+import { Updates, attr, repeat, html } from '@microsoft/fast-element';
 import { d as Sticky } from '../unbundled/enums.js';
 import { C as CalendarEvent } from '../unbundled/calendar-event.js';
 import { not, isEmpty } from 'ramda';
@@ -206,7 +206,7 @@ class Calendar extends VividElement {
     const initialScrollHour = 8;
     const rowHeight = this.scrollHeight / this._hours;
     const scrollPosition = rowHeight * (initialScrollHour - 1);
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this.scrollTo({
         top: scrollPosition
       });

package/calendar/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("../bundled/vivid-element.cjs"),q=require("../bundled/enums.cjs"),x=require("../bundled/calendar-event.cjs"),a=require("../bundled/_has.cjs"),I=require("../bundled/class-names.cjs"),m=require("../bundled/repeat.cjs"),$=Array.isArray||function(e){return e!=null&&e.length>=0&&Object.prototype.toString.call(e)==="[object Array]"};function v(t){for(var e=[],r;!(r=t.next()).done;)e.push(r.value);return e}function w(t,e,r){for(var n=0,o=r.length;n<o;){if(t(e,r[n]))return!0;n+=1}return!1}function z(t){var e=String(t).match(/^function (\w*)/);return e==null?"":e[1]}function H(t,e){return t===e?t!==0||1/t===1/e:t!==t&&e!==e}const g=typeof Object.is=="function"?Object.is:H;var b=Object.prototype.toString,E=function(){return b.call(arguments)==="[object Arguments]"?function(e){return b.call(e)==="[object Arguments]"}:function(e){return a._has("callee",e)}}(),R=!{toString:null}.propertyIsEnumerable("toString"),A=["constructor","valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"],k=function(){return arguments.propertyIsEnumerable("length")}(),T=function(e,r){for(var n=0;n<e.length;){if(e[n]===r)return!0;n+=1}return!1},_=typeof Object.keys=="function"&&!k?a._curry1(function(e){return Object(e)!==e?[]:Object.keys(e)}):a._curry1(function(e){if(Object(e)!==e)return[];var r,n,o=[],i=k&&E(e);for(r in e)a._has(r,e)&&(!i||r!=="length")&&(o[o.length]=r);if(R)for(n=A.length-1;n>=0;)r=A[n],a._has(r,e)&&!T(o,r)&&(o[o.length]=r),n-=1;return o}),O=a._curry1(function(e){return e===null?"Null":e===void 0?"Undefined":Object.prototype.toString.call(e).slice(8,-1)});function D(t,e,r,n){var o=v(t),i=v(e);function s(c,d){return y(c,d,r.slice(),n.slice())}return!w(function(c,d){return!w(s,d,c)},i,o)}function y(t,e,r,n){if(g(t,e))return!0;var o=O(t);if(o!==O(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"&&z(t.constructor)==="Promise")return t===e;break;case"Boolean":case"Number":case"String":if(!(typeof t==typeof e&&g(t.valueOf(),e.valueOf())))return!1;break;case"Date":if(!g(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:D(t.entries(),e.entries(),r.concat([t]),n.concat([e]));case"Set":return t.size!==e.size?!1:D(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 s=_(t);if(s.length!==_(e).length)return!1;var c=r.concat([t]),d=n.concat([e]);for(i=s.length-1;i>=0;){var f=s[i];if(!(a._has(f,e)&&y(e[f],t[f],c,d)))return!1;i-=1}return!0}var F=a._curry2(function(e,r){return y(e,r,[],[])});function N(t){return Object.prototype.toString.call(t)==="[object Object]"}function M(t){return Object.prototype.toString.call(t)==="[object String]"}var U=a._curry1(function(e){return!e});function P(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 L=a._curry1(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():$(e)?[]:M(e)?"":N(e)?{}:E(e)?function(){return arguments}():P(e)?e.constructor.from(""):void 0}),W=a._curry1(function(e){return e!=null&&F(e,L(e))});const B=':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}',S="ArrowUp",C="ArrowRight",p="ArrowDown",j="ArrowLeft";function K(t){return t instanceof HTMLElement&&(t.matches('[role="gridcell"i]')||t.matches('[role="columnheader"i]'))}const Y=t=>t.matches('[role="columnheader"i]')?'[role="gridcell"i]':'[role="columnheader"i]';function V(t,e){if(e.parentNode instanceof HTMLElement)switch(t){case C:return e.nextElementSibling||e.parentNode.firstElementChild;case j:return e.previousElementSibling||e.parentNode.lastElementChild;case S:case p:{const{children:r}=e.parentNode,n=Array.from(r).indexOf(e);return this.shadowRoot.querySelector(`${Y(e)}:nth-child(${n+1})`)}}}function G(t,e){if(t!==p)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 X(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 J(t,e,r){const n=e.closest('[role="rowheader"], [role="gridcell"i]');if(n){const o=n.getBoundingClientRect(),i=t.clientY-o.y,s=o.height/r,c=i/s;return Math.round((c+Number.EPSILON)*100)/100}}const Q=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=X(e);let n;t instanceof MouseEvent&&(n=J(t,e,this._hours));const o={...r!=null&&{day:r},...n!=null&&{hour:n}};return U(W(o))?o:null};var Z=Object.defineProperty,h=(t,e,r,n)=>{for(var o=void 0,i=t.length-1,s;i>=0;i--)(s=t[i])&&(o=s(e,r,o)||o);return o&&Z(e,r,o),o};const ee=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 l.VividElement{constructor(){super(...arguments),this.hour12=!1,this.stickyMode=q.Sticky.All,this._hours=24,this._days=7,this.hoursAsDatetime=Array.from({length:this._hours-1}).fill(new Date(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=Q}get#e(){const{activeElement:e}=document;return e instanceof x.CalendarEvent?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;K(r)?n=V.call(this,e,r):this.#e?n=this.getCalendarEventContainingCell(this.#e):r?.matches('em[role="button"i]')?n=G.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=[S,C,p,j].some(n=>n==e);return r&&this.arrowKeysInteractions(e),!r}connectedCallback(){super.connectedCallback(),this.initializeScrollPosition()}initializeScrollPosition(){if(!ee(this).vertical)return;const n=this.scrollHeight/this._hours*(8-1);l.DOM.queueUpdate(()=>{this.scrollTo({top:n})})}}h([l.attr],u.prototype,"datetime");h([l.attr({attribute:"start-day"})],u.prototype,"startDay");h([l.attr],u.prototype,"locales");h([l.attr({mode:"boolean"})],u.prototype,"hour12");h([l.attr({attribute:"sticky-mode",mode:"fromView"})],u.prototype,"stickyMode");function te(t){const e=r=>`0${r}`.slice(-2);return`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())}`}const re=new Map([["sunday",0],["monday",1]]);function ne(t=new Date,e){t=new Date(t);let r=re.get(e);r??=1;const n=t.getDate()-(t.getDay()+7-r)%7;return new Date(t.setDate(n))}const oe=({stickyMode:t})=>I.classNames([`sticky-${t}`,!!t]),ie=()=>l.html` <div class="row-headers" role="row">
+"use strict";const l=require("../bundled/vivid-element.cjs"),q=require("../bundled/enums.cjs"),x=require("../bundled/calendar-event.cjs"),a=require("../bundled/_has.cjs"),m=require("../bundled/repeat.cjs"),I=require("../bundled/class-names.cjs"),$=Array.isArray||function(e){return e!=null&&e.length>=0&&Object.prototype.toString.call(e)==="[object Array]"};function v(t){for(var e=[],r;!(r=t.next()).done;)e.push(r.value);return e}function w(t,e,r){for(var n=0,o=r.length;n<o;){if(t(e,r[n]))return!0;n+=1}return!1}function z(t){var e=String(t).match(/^function (\w*)/);return e==null?"":e[1]}function H(t,e){return t===e?t!==0||1/t===1/e:t!==t&&e!==e}const g=typeof Object.is=="function"?Object.is:H;var b=Object.prototype.toString,D=function(){return b.call(arguments)==="[object Arguments]"?function(e){return b.call(e)==="[object Arguments]"}:function(e){return a._has("callee",e)}}(),R=!{toString:null}.propertyIsEnumerable("toString"),A=["constructor","valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"],k=function(){return arguments.propertyIsEnumerable("length")}(),T=function(e,r){for(var n=0;n<e.length;){if(e[n]===r)return!0;n+=1}return!1},_=typeof Object.keys=="function"&&!k?a._curry1(function(e){return Object(e)!==e?[]:Object.keys(e)}):a._curry1(function(e){if(Object(e)!==e)return[];var r,n,o=[],i=k&&D(e);for(r in e)a._has(r,e)&&(!i||r!=="length")&&(o[o.length]=r);if(R)for(n=A.length-1;n>=0;)r=A[n],a._has(r,e)&&!T(o,r)&&(o[o.length]=r),n-=1;return o}),O=a._curry1(function(e){return e===null?"Null":e===void 0?"Undefined":Object.prototype.toString.call(e).slice(8,-1)});function E(t,e,r,n){var o=v(t),i=v(e);function s(c,d){return y(c,d,r.slice(),n.slice())}return!w(function(c,d){return!w(s,d,c)},i,o)}function y(t,e,r,n){if(g(t,e))return!0;var o=O(t);if(o!==O(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"&&z(t.constructor)==="Promise")return t===e;break;case"Boolean":case"Number":case"String":if(!(typeof t==typeof e&&g(t.valueOf(),e.valueOf())))return!1;break;case"Date":if(!g(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:E(t.entries(),e.entries(),r.concat([t]),n.concat([e]));case"Set":return t.size!==e.size?!1:E(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 s=_(t);if(s.length!==_(e).length)return!1;var c=r.concat([t]),d=n.concat([e]);for(i=s.length-1;i>=0;){var f=s[i];if(!(a._has(f,e)&&y(e[f],t[f],c,d)))return!1;i-=1}return!0}var M=a._curry2(function(e,r){return y(e,r,[],[])});function F(t){return Object.prototype.toString.call(t)==="[object Object]"}function N(t){return Object.prototype.toString.call(t)==="[object String]"}var U=a._curry1(function(e){return!e});function P(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 L=a._curry1(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():e==Set||e instanceof Set?new Set:e==Map||e instanceof Map?new Map:$(e)?[]:N(e)?"":F(e)?{}:D(e)?function(){return arguments}():P(e)?e.constructor.from(""):void 0}),W=a._curry1(function(e){return e!=null&&M(e,L(e))});const B=':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}',S="ArrowUp",C="ArrowRight",p="ArrowDown",j="ArrowLeft";function K(t){return t instanceof HTMLElement&&(t.matches('[role="gridcell"i]')||t.matches('[role="columnheader"i]'))}const Y=t=>t.matches('[role="columnheader"i]')?'[role="gridcell"i]':'[role="columnheader"i]';function V(t,e){if(e.parentNode instanceof HTMLElement)switch(t){case C:return e.nextElementSibling||e.parentNode.firstElementChild;case j:return e.previousElementSibling||e.parentNode.lastElementChild;case S:case p:{const{children:r}=e.parentNode,n=Array.from(r).indexOf(e);return this.shadowRoot.querySelector(`${Y(e)}:nth-child(${n+1})`)}}}function G(t,e){if(t!==p)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 X(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 J(t,e,r){const n=e.closest('[role="rowheader"], [role="gridcell"i]');if(n){const o=n.getBoundingClientRect(),i=t.clientY-o.y,s=o.height/r,c=i/s;return Math.round((c+Number.EPSILON)*100)/100}}const Q=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=X(e);let n;t instanceof MouseEvent&&(n=J(t,e,this._hours));const o={...r!=null&&{day:r},...n!=null&&{hour:n}};return U(W(o))?o:null};var Z=Object.defineProperty,h=(t,e,r,n)=>{for(var o=void 0,i=t.length-1,s;i>=0;i--)(s=t[i])&&(o=s(e,r,o)||o);return o&&Z(e,r,o),o};const ee=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 l.VividElement{constructor(){super(...arguments),this.hour12=!1,this.stickyMode=q.Sticky.All,this._hours=24,this._days=7,this.hoursAsDatetime=Array.from({length:this._hours-1}).fill(new Date(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=Q}get#e(){const{activeElement:e}=document;return e instanceof x.CalendarEvent?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;K(r)?n=V.call(this,e,r):this.#e?n=this.getCalendarEventContainingCell(this.#e):r?.matches('em[role="button"i]')?n=G.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=[S,C,p,j].some(n=>n==e);return r&&this.arrowKeysInteractions(e),!r}connectedCallback(){super.connectedCallback(),this.initializeScrollPosition()}initializeScrollPosition(){if(!ee(this).vertical)return;const n=this.scrollHeight/this._hours*(8-1);l.Updates.enqueue(()=>{this.scrollTo({top:n})})}}h([l.attr],u.prototype,"datetime");h([l.attr({attribute:"start-day"})],u.prototype,"startDay");h([l.attr],u.prototype,"locales");h([l.attr({mode:"boolean"})],u.prototype,"hour12");h([l.attr({attribute:"sticky-mode",mode:"fromView"})],u.prototype,"stickyMode");function te(t){const e=r=>`0${r}`.slice(-2);return`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())}`}const re=new Map([["sunday",0],["monday",1]]);function ne(t=new Date,e){t=new Date(t);let r=re.get(e);r??=1;const n=t.getDate()-(t.getDay()+7-r)%7;return new Date(t.setDate(n))}const oe=({stickyMode:t})=>I.classNames([`sticky-${t}`,!!t]),ie=()=>l.html` <div class="row-headers" role="row">
 		${m.repeat(t=>t.hoursAsDatetime,l.html`<span role="rowheader">
 				<time
 					datetime="${(t,e)=>new Intl.DateTimeFormat(e.parent.locales,{hour:"numeric",minute:"numeric",hour12:!1}).format(t)}"

package/calendar/index.js

@@ -1,9 +1,9 @@
-import { V as $, D as q, a as h, h as s, c as z, d as H } from "../bundled/vivid-element.js";
+import { V as $, U 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 { _ as f, a as c, b as M } from "../bundled/_has.js";
 import { r as g } from "../bundled/repeat.js";
+import { c as F } from "../bundled/class-names.js";
 const N = Array.isArray || function(e) {
   return e != null && e.length >= 0 && Object.prototype.toString.call(e) === "[object Array]";
 };
@@ -36,7 +36,7 @@ var k = Object.prototype.toString, C = /* @__PURE__ */ function() {
   };
 }(), L = !/* @__PURE__ */ {
   toString: null
-}.propertyIsEnumerable("toString"), O = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], D = /* @__PURE__ */ function() {
+}.propertyIsEnumerable("toString"), O = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], S = /* @__PURE__ */ function() {
   return arguments.propertyIsEnumerable("length");
 }(), W = function(e, r) {
   for (var n = 0; n < e.length; ) {
@@ -45,19 +45,19 @@ var k = Object.prototype.toString, C = /* @__PURE__ */ function() {
     n += 1;
   }
   return !1;
-}, E = typeof Object.keys == "function" && !D ? /* @__PURE__ */ c(function(e) {
+}, D = typeof Object.keys == "function" && !S ? /* @__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);
+  var r, n, o = [], i = S && 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) {
+}), E = /* @__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) {
@@ -72,8 +72,8 @@ function _(t, e, r, n) {
 function v(t, e, r, n) {
   if (y(t, e))
     return !0;
-  var o = S(t);
-  if (o !== S(e))
+  var o = E(t);
+  if (o !== E(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);
@@ -136,8 +136,8 @@ function v(t, e, r, n) {
     default:
       return !1;
   }
-  var l = E(t);
-  if (l.length !== E(e).length)
+  var l = D(t);
+  if (l.length !== D(e).length)
     return !1;
   var a = r.concat([t]), d = n.concat([e]);
   for (i = l.length - 1; i >= 0; ) {
@@ -148,7 +148,7 @@ function v(t, e, r, n) {
   }
   return !0;
 }
-var B = /* @__PURE__ */ F(function(e, r) {
+var B = /* @__PURE__ */ M(function(e, r) {
   return v(e, r, [], []);
 });
 function K(t) {
@@ -165,7 +165,7 @@ function G(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 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() : e == Set || e instanceof Set ? /* @__PURE__ */ new Set() : e == Map || e instanceof Map ? /* @__PURE__ */ new Map() : N(e) ? [] : V(e) ? "" : K(e) ? {} : C(e) ? /* @__PURE__ */ function() {
     return arguments;
   }() : G(e) ? e.constructor.from("") : void 0;
 }), J = /* @__PURE__ */ c(function(e) {
@@ -299,7 +299,7 @@ class u extends $ {
     if (!ae(this).vertical)
       return;
     const n = this.scrollHeight / this._hours * (8 - 1);
-    q.queueUpdate(() => {
+    q.enqueue(() => {
       this.scrollTo({
         top: n
       });
@@ -338,7 +338,7 @@ function ue(t = /* @__PURE__ */ new Date(), e) {
   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">
+const de = ({ stickyMode: t }) => F([`sticky-${t}`, !!t]), he = () => s` <div class="row-headers" role="row">
 		${g(
   (t) => t.hoursAsDatetime,
   s`<span role="rowheader">

package/calendar-event/index.cjs

@@ -1,4 +1,4 @@
-"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
+"use strict";const n=require("../bundled/vivid-element.cjs"),v=require("../bundled/calendar-event.cjs"),l=require("../bundled/delegates-aria.cjs"),t=require("../bundled/when.cjs"),i=require("../bundled/class-names.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"

package/calendar-event/index.js

@@ -1,8 +1,8 @@
 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";
+import { c as d } from "../bundled/class-names.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],

package/card/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const icon_definition = require('../icon/definition.cjs');
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const linkable = require('../unbundled/linkable.cjs');
@@ -72,7 +72,9 @@ function renderHeaderIcon(iconTag) {
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
 }
 function Headline() {
-  return fastElement.html` <div class="header-headline">${(x) => x.headline}</div> `;
+  return fastElement.html`
+		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
+	`;
 }
 function Subtitle() {
   return fastElement.html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
@@ -107,6 +109,7 @@ function renderButtonElement(content) {
 		class="${getClasses}"
 		type="button"
 		${delegatesAria.delegateAria()}
+		aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
 	>
 		${content}
 	</button>`;
@@ -117,7 +120,12 @@ function renderCardBaseElement(x, content) {
   } else if (x.clickableCard) {
     return renderButtonElement(content);
   } else {
-    return fastElement.html`<div class="${getClasses}">${content}</div>`;
+    return fastElement.html`<div
+			class="${getClasses}"
+			aria-labelledby="${(x2) => x2.headline ? "card-headline" : null}"
+		>
+			${content}
+		</div>`;
   }
 }
 function renderCardContent(context) {

package/card/definition.js

@@ -1,5 +1,5 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, when, html, slotted } from '@microsoft/fast-element';
 import { L as Linkable } from '../unbundled/linkable.js';
@@ -68,7 +68,9 @@ function renderHeaderIcon(iconTag) {
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
 }
 function Headline() {
-  return html` <div class="header-headline">${(x) => x.headline}</div> `;
+  return html`
+		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
+	`;
 }
 function Subtitle() {
   return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
@@ -103,6 +105,7 @@ function renderButtonElement(content) {
 		class="${getClasses}"
 		type="button"
 		${delegateAria()}
+		aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
 	>
 		${content}
 	</button>`;
@@ -113,7 +116,12 @@ function renderCardBaseElement(x, content) {
   } else if (x.clickableCard) {
     return renderButtonElement(content);
   } else {
-    return html`<div class="${getClasses}">${content}</div>`;
+    return html`<div
+			class="${getClasses}"
+			aria-labelledby="${(x2) => x2.headline ? "card-headline" : null}"
+		>
+			${content}
+		</div>`;
   }
 }
 function renderCardContent(context) {

package/card/index.cjs

@@ -1,22 +1,30 @@
-"use strict";const f=require("../bundled/definition2.cjs"),m=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),b=require("../bundled/linkable.cjs"),c=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),i=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),w=":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";var y=Object.defineProperty,n=(e,a,o,h)=>{for(var l=void 0,d=e.length-1,u;d>=0;d--)(u=e[d])&&(l=u(a,o,l)||l);return l&&y(a,o,l),l};class r extends b.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],r.prototype,"appearance");n([t.attr],r.prototype,"headline");n([t.attr],r.prototype,"subtitle");n([t.attr],r.prototype,"text");n([t.attr],r.prototype,"icon");n([t.attr],r.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],r.prototype,"clickableCard");n([t.observable],r.prototype,"footerSlottedContent");n([t.observable],r.prototype,"graphicSlottedContent");n([t.observable],r.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function $(e){return t.html`
-		<${e} class="icon" inline name="${a=>a.icon}"></${e}>`}function _(){return t.html` <div class="header-headline">${e=>e.headline}</div> `}function C(){return t.html` <div class="header-subtitle">${e=>e.subtitle}</div> `}function k(){return t.html`
+"use strict";const f=require("../bundled/definition2.cjs"),b=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),m=require("../bundled/linkable.cjs"),c=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),i=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),y=":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";var $=Object.defineProperty,n=(e,a,r,h)=>{for(var l=void 0,d=e.length-1,u;d>=0;d--)(u=e[d])&&(l=u(a,r,l)||l);return l&&$(a,r,l),l};class o extends m.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],o.prototype,"appearance");n([t.attr],o.prototype,"headline");n([t.attr],o.prototype,"subtitle");n([t.attr],o.prototype,"text");n([t.attr],o.prototype,"icon");n([t.attr],o.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],o.prototype,"clickableCard");n([t.observable],o.prototype,"footerSlottedContent");n([t.observable],o.prototype,"graphicSlottedContent");n([t.observable],o.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function w(e){return t.html`
+		<${e} class="icon" inline name="${a=>a.icon}"></${e}>`}function _(){return t.html`
+		<div class="header-headline" id="card-headline">${e=>e.headline}</div>
+	`}function C(){return t.html` <div class="header-subtitle">${e=>e.subtitle}</div> `}function k(){return t.html`
 		<div class="header-content">
 			${i.when(e=>e.headline,_())}
 			${i.when(e=>e.subtitle,C())}
 		</div>
 	`}function S(e){return t.html` <div class="header">
 		<slot name="graphic" ${v.slotted("graphicSlottedContent")}
-			>${i.when(a=>a.icon,$(e))}</slot
+			>${i.when(a=>a.icon,w(e))}</slot
 		>
 		${i.when(a=>a.headline||a.subtitle,k())}
 	</div>`}function q(e){return!e.headline&&!e.subtitle&&!e.icon&&(!e.graphicSlottedContent||!e.graphicSlottedContent.length)}function A(){return t.html` <slot name="meta" ${v.slotted("metaSlottedContent")}></slot> `}function E(){return t.html` <div class="text">${e=>e.text}</div> `}function H(e){return t.html`<button
 		class="${p}"
 		type="button"
 		${x.delegateAria()}
+		aria-labelledby="${a=>a.headline?"card-headline":null}"
 	>
 		${e}
-	</button>`}function z(e,a){return e.href?e._renderLinkElement(a,p):e.clickableCard?H(a):t.html`<div class="${p}">${a}</div>`}function s(e){const a=e.tagFor(f.Icon);return t.html`
-		${o=>z(o,t.html`<div class="wrapper">
+	</button>`}function z(e,a){return e.href?e._renderLinkElement(a,p):e.clickableCard?H(a):t.html`<div
+			class="${p}"
+			aria-labelledby="${r=>r.headline?"card-headline":null}"
+		>
+			${a}
+		</div>`}function s(e){const a=e.tagFor(f.Icon);return t.html`
+		${r=>z(r,t.html`<div class="wrapper">
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>
@@ -32,16 +40,16 @@
 						<slot name="footer" ${v.slotted("footerSlottedContent")}></slot>
 					</div>
 				</div> `)}
-	`}const D=e=>{const a=e.tagFor(m.Elevation);return t.html`
-		${i.when(o=>o.appearance!==c.Appearance.Ghost&&o.appearance!==c.Appearance.Outlined,t.html`
-			<${a} dp=${o=>o.elevation??"4"}>
+	`}const D=e=>{const a=e.tagFor(b.Elevation);return t.html`
+		${i.when(r=>r.appearance!==c.Appearance.Ghost&&r.appearance!==c.Appearance.Outlined,t.html`
+			<${a} dp=${r=>r.elevation??"4"}>
 			  ${s(e)}
 			</${a}>
 		`)}
-		${i.when(o=>o.appearance===c.Appearance.Outlined,t.html`
+		${i.when(r=>r.appearance===c.Appearance.Outlined,t.html`
 			<${a} dp='0')}>
 			  ${s(e)}
 			</${a}>
 		`)}
-		${i.when(o=>o.appearance===c.Appearance.Ghost,t.html` ${s(e)} `)}
-	`},F=t.defineVividComponent("card",r,D,[f.iconDefinition,m.elevationDefinition],{styles:w}),O=t.createRegisterFunction(F);O();
+		${i.when(r=>r.appearance===c.Appearance.Ghost,t.html` ${s(e)} `)}
+	`},F=t.defineVividComponent("card",o,D,[f.iconDefinition,b.elevationDefinition],{styles:y}),O=t.createRegisterFunction(F);O();

package/card/index.js

@@ -1,19 +1,19 @@
 import { I as b, i as x } from "../bundled/definition2.js";
 import { E as g, e as y } from "../bundled/definition4.js";
-import { V as _, a as l, o as f, h as o, c as $, d as w } from "../bundled/vivid-element.js";
+import { V as $, a as l, o as f, h as o, c as _, d as w } from "../bundled/vivid-element.js";
 import { L as C } from "../bundled/linkable.js";
-import { A as d } from "../bundled/enums.js";
+import { A as c } from "../bundled/enums.js";
 import { d as k } from "../bundled/delegates-aria.js";
 import { w as i } from "../bundled/when.js";
 import { s as u } from "../bundled/slotted.js";
 import { c as S } from "../bundled/class-names.js";
 const E = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
-var H = Object.defineProperty, n = (e, t, a, m) => {
-  for (var c = void 0, s = e.length - 1, h; s >= 0; s--)
-    (h = e[s]) && (c = h(t, a, c) || c);
-  return c && H(t, a, c), c;
+var H = Object.defineProperty, n = (e, a, t, h) => {
+  for (var d = void 0, s = e.length - 1, m; s >= 0; s--)
+    (m = e[s]) && (d = m(a, t, d) || d);
+  return d && H(a, t, d), d;
 };
-class r extends C(_) {
+class r extends C($) {
   constructor() {
     super(...arguments), this.clickableCard = !1;
   }
@@ -58,10 +58,12 @@ const v = (e) => S(
 );
 function z(e) {
   return o`
-		<${e} class="icon" inline name="${(t) => t.icon}"></${e}>`;
+		<${e} class="icon" inline name="${(a) => a.icon}"></${e}>`;
 }
 function A() {
-  return o` <div class="header-headline">${(e) => e.headline}</div> `;
+  return o`
+		<div class="header-headline" id="card-headline">${(e) => e.headline}</div>
+	`;
 }
 function D() {
   return o` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
@@ -77,9 +79,9 @@ function F() {
 function I(e) {
   return o` <div class="header">
 		<slot name="graphic" ${u("graphicSlottedContent")}
-			>${i((t) => t.icon, z(e))}</slot
+			>${i((a) => a.icon, z(e))}</slot
 		>
-		${i((t) => t.headline || t.subtitle, F())}
+		${i((a) => a.headline || a.subtitle, F())}
 	</div>`;
 }
 function L(e) {
@@ -96,18 +98,24 @@ function B(e) {
 		class="${v}"
 		type="button"
 		${k()}
+		aria-labelledby="${(a) => a.headline ? "card-headline" : null}"
 	>
 		${e}
 	</button>`;
 }
-function G(e, t) {
-  return e.href ? e._renderLinkElement(t, v) : e.clickableCard ? B(t) : o`<div class="${v}">${t}</div>`;
+function G(e, a) {
+  return e.href ? e._renderLinkElement(a, v) : e.clickableCard ? B(a) : o`<div
+			class="${v}"
+			aria-labelledby="${(t) => t.headline ? "card-headline" : null}"
+		>
+			${a}
+		</div>`;
 }
 function p(e) {
-  const t = e.tagFor(b);
+  const a = e.tagFor(b);
   return o`
-		${(a) => G(
-    a,
+		${(t) => G(
+    t,
     o`<div class="wrapper">
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
@@ -115,9 +123,9 @@ function p(e) {
 					<slot name="main">
 						<div class="main-content">
 							<div class="header-wrapper">
-								${I(t)} ${O()}
+								${I(a)} ${O()}
 							</div>
-							${i((m) => m.text, V())}
+							${i((h) => h.text, V())}
 						</div>
 					</slot>
 					<div class="footer">
@@ -128,26 +136,26 @@ function p(e) {
 	`;
 }
 const M = (e) => {
-  const t = e.tagFor(g);
+  const a = e.tagFor(g);
   return o`
 		${i(
-    (a) => a.appearance !== d.Ghost && a.appearance !== d.Outlined,
+    (t) => t.appearance !== c.Ghost && t.appearance !== c.Outlined,
     o`
-			<${t} dp=${(a) => a.elevation ?? "4"}>
+			<${a} dp=${(t) => t.elevation ?? "4"}>
 			  ${p(e)}
-			</${t}>
+			</${a}>
 		`
   )}
 		${i(
-    (a) => a.appearance === d.Outlined,
+    (t) => t.appearance === c.Outlined,
     o`
-			<${t} dp='0')}>
+			<${a} dp='0')}>
 			  ${p(e)}
-			</${t}>
+			</${a}>
 		`
   )}
 		${i(
-    (a) => a.appearance === d.Ghost,
+    (t) => t.appearance === c.Ghost,
     o` ${p(e)} `
   )}
 	`;
@@ -159,5 +167,5 @@ const M = (e) => {
   {
     styles: E
   }
-), T = $(P);
+), T = _(P);
 T();