@vonage/vivid 3.0.0-next.20 → 3.0.0-next.23

package/README.md

@@ -27,8 +27,8 @@
 
 run:
 
-```
-npm install codemirror
+```bash
+npm install @vonage/vivid
 ```
 
 use:

package/accordion-item/index.js

@@ -1,16 +1,22 @@
+import '../icon/index.js';
+import '../focus/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../icon/index.js';
-import '../shared/object-set-prototype-of.js';
 import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
+import '../shared/focus.js';
+import '../shared/object-keys.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.control {\n  display: flex;\n  flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n  display: none;\n}\n.control.open .toggle-open {\n  display: none;\n}\n.control.open .toggle-close {\n  display: initial;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  background: transparent;\n  cursor: pointer;\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 1rem;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.control {\n  display: flex;\n  flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n  display: none;\n}\n.control.open .toggle-open {\n  display: none;\n}\n.control.open .toggle-close {\n  display: initial;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  background: transparent;\n  cursor: pointer;\n  outline: 0 none;\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class AccordionItem extends FoundationElement {
@@ -93,10 +99,12 @@ const renderPanelHeader = (context, headingLevel) => {
 
 const renderHeaderButton = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html(_t3 || (_t3 = _`
 	<button class="button" id="header" @click=${0}
-		?aria-expanded=${0}
+		aria-expanded=${0}
 		aria-controls="${0}">
+    ${0}
 		${0}
 		<span class="heading-text">${0}</span>
 		${0}
@@ -104,7 +112,7 @@ const renderHeaderButton = context => {
 			${0}
 		</span>
 	</button>
-`), x => x.open = !x.open, x => x.open, PANEL, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
+`), x => x.open = !x.open, x => x.open, PANEL, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
 			<vwc-icon class="toggle-open" type='chevron-down-solid'></vwc-icon>
 			<vwc-icon class="toggle-close" type='chevron-up-solid'></vwc-icon>
 			`))));

package/action-group/index.js

@@ -1,23 +1,38 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
 
-var css_248z = ".base {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 4px;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
+var css_248z = ":host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
 styleInject(css_248z);
 
-class ActionGroup extends FoundationElement {}
+class ActionGroup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.tight = false;
+  }
+
+}
 
 __decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "shape", void 0);
 
 __decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "appearance", void 0);
 
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], ActionGroup.prototype, "tight", void 0);
+
 let _ = t => t,
     _t;
 
 const getClasses = ({
   appearance,
-  shape
-}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
+  shape,
+  tight
+}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['tight', tight]);
 
 const ActionGroupTemplate = () => html(_t || (_t = _`
 <div class="${0}">

package/badge/index.js

@@ -5,10 +5,13 @@ import { a as applyMixins } from '../shared/apply-mixins.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/when.js';
 import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
 
 class Badge extends FoundationElement {}
 

package/banner/index.js

@@ -1,27 +1,28 @@
+import '../button/index.js';
 import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { C as Connotation } from '../shared/enums.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import '../button/index.js';
-import '../text-anchor/index.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/object-set-prototype-of.js';
+import '../icon/index.js';
 import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
-import '../icon/index.js';
 import '../focus/index.js';
 import '../shared/focus.js';
 import '../shared/button.js';
-import '../shared/focus2.js';
+import '../shared/form-associated.js';
 import '../shared/aria-global.js';
-import '../shared/text-anchor.js';
-import '../shared/anchor.js';
-import '../shared/text-anchor.template.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/object-keys.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  overflow: hidden;\n  max-height: 10rem;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n  --_connotation-color-on-primary: var(--vvd-color-on-announcement);\n}\n.control.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n  --_connotation-color-on-primary: var(--vvd-color-on-warning);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-info);\n  --_connotation-color-on-primary: var(--vvd-color-on-info);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.removing {\n  max-height: 0;\n}\n.control > .header {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: flex-start;\n}\n.control > .header > .user-content {\n  display: flex;\n  flex: 1 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n  flex: 0 0 auto;\n  font-size: 20px;\n  margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n  display: inline-block;\n  flex: 0 0 auto;\n  padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n  padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n  --vvd-icon-button-color: inherit;\n  flex: 0 0 auto;\n  margin-inline-end: 8px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n  --_connotation-color-on-primary: var(--vvd-color-on-announcement);\n}\n.control.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n  --_connotation-color-on-primary: var(--vvd-color-on-warning);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-info);\n  --_connotation-color-on-primary: var(--vvd-color-on-info);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.removing {\n  max-height: 0;\n}\n.control > .header {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: flex-start;\n}\n.control > .header > .user-content {\n  display: flex;\n  flex: 1 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n  flex: 0 0 auto;\n  font-size: 20px;\n  margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n  display: inline-block;\n  flex: 0 0 auto;\n  padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n  padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n  --vvd-icon-button-color: inherit;\n  flex: 0 0 auto;\n  margin-inline-end: 8px;\n}";
 styleInject(css_248z);
 
 var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;

package/breadcrumb/index.js

@@ -5,6 +5,7 @@ import { s as slotted, e as elements } from '../shared/slotted.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
 
 /**
  * The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.

package/breadcrumb-item/index.js

@@ -1,4 +1,5 @@
 import '../icon/index.js';
+import '../focus/index.js';
 import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { B as BreadcrumbItem$1 } from '../shared/breadcrumb-item.js';
@@ -6,15 +7,21 @@ import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
+import '../shared/focus.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
 import '../shared/affix.js';
 import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/focus2.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-on-canvas);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  font: inherit;\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-70);\n  font-size: 12px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-on-canvas);\n}\n.base vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-70);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n  outline: 0 none;\n}\n.control:any-link {\n  color: var(--vvd-color-cta-70);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class BreadcrumbItem extends BreadcrumbItem$1 {
@@ -32,7 +39,7 @@ let _2 = t => t,
     _t3,
     _t4;
 
-const getClasses = _ => classNames('control', 'breadcrumb-item');
+const getClasses = _ => classNames('base');
 
 const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
       <div roll="listitem" part="listitem" class="${0}">
@@ -46,7 +53,10 @@ const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
 const vividBreadcrumbItem = BreadcrumbItem.compose({
   baseName: 'breadcrumb-item',
   template: BreadcrumbItemTemplate,
-  styles: css_248z
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
 designSystem.register(vividBreadcrumbItem());
 

package/button/index.js

@@ -7,13 +7,18 @@ import { B as Button$1 } from '../shared/button.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
-import { r as ref } from '../shared/aria-global.js';
+import { r as ref } from '../shared/ref.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/when.js';
 import '../shared/focus.js';
+import '../shared/object-keys.js';
+import '../shared/form-associated.js';
+import '../shared/aria-global.js';
 
 class Button extends Button$1 {
   constructor() {
@@ -40,7 +45,7 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "label",
 
 applyMixins(Button, AffixIconWithTrailing);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  outline: 0 none;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  outline: 0 none;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n  --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-primary-increment: var(--vvd-color-success-70);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-fierce: var(--vvd-color-success-80);\n  --_connotation-color-firm: var(--vvd-color-success-70);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n  --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-fierce: var(--vvd-color-alert-80);\n  --_connotation-color-firm: var(--vvd-color-alert-70);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n  --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_button-block-size);\n  }\n}\n.control:not(.stacked).density-condensed {\n  --_button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n  --_button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n  --_button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus) > .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  outline: 0 none;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  outline: 0 none;\n  vertical-align: middle;\n  white-space: nowrap;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n  --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-primary-increment: var(--vvd-color-success-70);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-fierce: var(--vvd-color-success-80);\n  --_connotation-color-firm: var(--vvd-color-success-70);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n  --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-fierce: var(--vvd-color-alert-80);\n  --_connotation-color-firm: var(--vvd-color-alert-70);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n  --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_button-block-size);\n  }\n}\n.control:not(.stacked).density-condensed {\n  --_button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n  --_button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n  --_button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/calendar/index.js

@@ -1,11 +1,12 @@
-import '../elevation/index.js';
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView, F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView, F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
+import { C as CalendarEvent } from '../shared/calendar-event.js';
 import '../shared/es.object.assign.js';
 import { b as _has, _ as _curry1, a as _curry2 } from '../shared/_has.js';
-import '../shared/class-names.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {
@@ -1245,7 +1246,7 @@ _curry1(function isEmpty(x) {
 
 var isEmpty$1 = isEmpty;
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background-color: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: 48px;\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-info-10);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  text-transform: uppercase;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background-color: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: 48px;\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-info-10);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  text-transform: uppercase;\n}";
 styleInject(css_248z);
 
 const ARROW_UP = 'ArrowUp';
@@ -1342,9 +1343,13 @@ const getEventContext = function getEventContext(e) {
   return not$1(isEmpty$1(context)) ? context : null;
 };
 
+var _Calendar_instances, _Calendar_activeCalendarEvent_get;
 class Calendar extends FoundationElement {
   constructor() {
     super(...arguments);
+
+    _Calendar_instances.add(this);
+
     this.hour12 = false;
     this._hours = 24;
     this._days = 7;
@@ -1365,22 +1370,32 @@ class Calendar extends FoundationElement {
     this.getEventContext = getEventContext;
   }
 
+  getCalendarEventContainingCell(calendarEvent) {
+    const slotName = calendarEvent.getAttribute('slot');
+    const gridCell = this.shadowRoot.querySelector(`slot[name="${slotName}"i]`);
+    return gridCell.parentElement;
+  }
+
   arrowKeysInteractions(key) {
-    const activeElement = this.shadowRoot.activeElement;
+    const {
+      activeElement
+    } = this.shadowRoot;
     let focusNext;
 
     if (isCellOrHeader(activeElement)) {
       focusNext = getNextFocusableGridElement.call(this, key, activeElement);
+    } else if (__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get)) {
+      focusNext = this.getCalendarEventContainingCell(__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get));
     } else if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('em[role="button"i]')) {
       focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
     } else {
       focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
     }
 
-    this.moveTo(focusNext);
+    this.activateElement(focusNext);
   }
 
-  moveTo(el) {
+  activateElement(el) {
     const onBlur = ({
       target
     }) => target.setAttribute('tabindex', '-1');
@@ -1405,6 +1420,12 @@ class Calendar extends FoundationElement {
   }
 
 }
+_Calendar_instances = new WeakSet(), _Calendar_activeCalendarEvent_get = function _Calendar_activeCalendarEvent_get() {
+  const {
+    activeElement
+  } = document;
+  return activeElement instanceof CalendarEvent ? activeElement : null;
+};
 
 __decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "datetime", void 0);
 
@@ -1519,7 +1540,10 @@ const CalendarTemplate = () => html(_t6 || (_t6 = _2`
 const vividCalendar = Calendar.compose({
   baseName: 'calendar',
   template: CalendarTemplate,
-  styles: css_248z
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
 designSystem.register(vividCalendar());
 

package/calendar-event/index.js

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

package/card/index.js

@@ -1,24 +1,17 @@
 import '../elevation/index.js';
 import '../icon/index.js';
-import '../button/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { s as slotted } from '../shared/slotted.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
-import '../focus/index.js';
-import '../shared/focus.js';
-import '../shared/web.dom-collections.iterator.js';
-import '../shared/affix.js';
-import '../shared/button.js';
-import '../shared/apply-mixins.js';
-import '../shared/focus2.js';
-import '../shared/aria-global.js';
-
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n  :host {\n    block-size: -moz-fit-content;\n    block-size: fit-content;\n    inline-size: -moz-fit-content;\n    inline-size: fit-content;\n  }\n}\n\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n  :host {\n    block-size: -moz-fit-content;\n    block-size: fit-content;\n    inline-size: -moz-fit-content;\n    inline-size: fit-content;\n  }\n}\n\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
 styleInject(css_248z);
 
 class Card extends FoundationElement {}
@@ -103,25 +96,27 @@ function text() {
 
 const CardTemplate = () => html(_t8 || (_t8 = _2`
 	<vwc-elevation dp=${0}>
+
 		<div class="${0}">
 			<div class="wrapper">
 				<div class="vwc-card-media">
 					<slot name="media"></slot>
 				</div>
-				<div class="content">
-					<slot name="content">
-						<div class="content-container">
+				<slot name="main">
+					<div class="main-content">
+						<div class="header-wrapper">
 							${0}
 							${0}
 						</div>
 						${0}
-					</slot>
-				</div>
+					</div>
+				</slot>
 				<div class="footer">
 					<slot name="footer" ${0}></slot>
 				</div>
 			</div>
 		</div>
+
 	</vwc-elevation>
 `), x => {
   var _a;