@vonage/vivid 3.50.1 → 3.52.0

package/shared/definition11.js

@@ -1,12 +1,12 @@
 import { a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
 import { P as ProgressRing, a as progressRingRegistries } from './definition37.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from './affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { B as Button$1 } from './button.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { b as Size } from './enums.js';
-import { r as ref } from './ref.js';
 import { w as when } from './when.js';
+import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;
@@ -25,11 +25,17 @@ class Button extends Button$1 {
     super();
     this.stacked = false;
     this.pending = false;
+    this.active = false;
     this.title = "";
   }
 }
 __decorateClass([
-  attr({ converter: { fromView: (value) => value || null, toView: (value) => value || null } })
+  attr({
+    converter: {
+      fromView: (value) => value || null,
+      toView: (value) => value || null
+    }
+  })
 ], Button.prototype, "title", 2);
 __decorateClass([
   attr
@@ -55,12 +61,39 @@ __decorateClass([
     attribute: "pending"
   })
 ], Button.prototype, "pending", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "active"
+  })
+], Button.prototype, "active", 2);
 __decorateClass([
   attr
 ], Button.prototype, "label", 2);
+__decorateClass([
+  attr
+], Button.prototype, "href", 2);
+__decorateClass([
+  attr
+], Button.prototype, "download", 2);
+__decorateClass([
+  attr
+], Button.prototype, "hreflang", 2);
+__decorateClass([
+  attr
+], Button.prototype, "ping", 2);
+__decorateClass([
+  attr
+], Button.prototype, "referrerpolicy", 2);
+__decorateClass([
+  attr
+], Button.prototype, "rel", 2);
+__decorateClass([
+  attr
+], Button.prototype, "target", 2);
 applyMixins(Button, AffixIconWithTrailing);
 
-const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control.stacked.size-condensed{--stacked-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
+const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control.stacked.size-condensed{--stacked-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
 
 const getAppearanceClassName = (appearance, disabled) => {
   let className = `appearance-${appearance}`;
@@ -77,16 +110,22 @@ const getClasses = ({
   disabled,
   stacked,
   size,
-  iconSlottedContent
+  iconSlottedContent,
+  ariaExpanded,
+  active
 }) => classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [getAppearanceClassName(appearance, disabled), Boolean(appearance)],
+  [
+    getAppearanceClassName(appearance, disabled),
+    Boolean(appearance)
+  ],
   [`shape-${shape}`, Boolean(shape)],
   [`size-${size}`, Boolean(size)],
   ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
   ["icon-trailing", iconTrailing],
-  ["stacked", Boolean(stacked)]
+  ["stacked", Boolean(stacked)],
+  ["active", ariaExpanded === "true" || active]
 );
 function renderIconOrPending(context, icon, pending, size = Size.Normal) {
   if (pending && size != Size.SuperCondensed) {
@@ -99,48 +138,88 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
     return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
   } else {
     const affixIconTemplate = affixIconTemplateFactory(context);
-    return affixIconTemplate(icon, IconWrapper.Slot, IconAriaHidden.Hidden);
+    return affixIconTemplate(icon, IconWrapper.Slot);
   }
 }
+function renderButtonContent(context) {
+  return html` <button
+		class="${getClasses}"
+		?autofocus="${(x) => x.autofocus}"
+		?disabled="${(x) => x.disabled || x.pending}"
+		form="${(x) => x.formId}"
+		formaction="${(x) => x.formaction}"
+		formenctype="${(x) => x.formenctype}"
+		formmethod="${(x) => x.formmethod}"
+		formnovalidate="${(x) => x.formnovalidate}"
+		formtarget="${(x) => x.formtarget}"
+		name="${(x) => x.name}"
+		type="${(x) => x.type}"
+		value="${(x) => x.value}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-pressed="${(x) => x.ariaPressed}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		title="${(x) => x.title}"
+		${ref("control")}
+	>
+		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+		${when(
+    (x) => x.label,
+    html`<span class="text" role="presentation">${(x) => x.label}</span>`
+  )}
+	</button>`;
+}
+function renderAnchorContent(context) {
+  return html`<a
+		class="${getClasses}"
+		download="${(x) => x.download}"
+		href="${(x) => x.href}"
+		hreflang="${(x) => x.hreflang}"
+		ping="${(x) => x.ping}"
+		referrerpolicy="${(x) => x.referrerpolicy}"
+		rel="${(x) => x.rel}"
+		target="${(x) => x.target}"
+		type="${(x) => x.type}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref("control")}
+	>
+		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+		${when(
+    (x) => x.label,
+    html`<span class="text" role="presentation">${(x) => x.label}</span>`
+  )}
+	</a>`;
+}
 const buttonTemplate = (context) => {
-  return html`
-		<template role="presentation">
-			<button
-				class="${getClasses}"
-				?autofocus="${(x) => x.autofocus}"
-				?disabled="${(x) => x.disabled || x.pending}"
-				form="${(x) => x.formId}"
-				formaction="${(x) => x.formaction}"
-				formenctype="${(x) => x.formenctype}"
-				formmethod="${(x) => x.formmethod}"
-				formnovalidate="${(x) => x.formnovalidate}"
-				formtarget="${(x) => x.formtarget}"
-				name="${(x) => x.name}"
-				type="${(x) => x.type}"
-				value="${(x) => x.value}"
-				aria-atomic="${(x) => x.ariaAtomic}"
-				aria-busy="${(x) => x.ariaBusy}"
-				aria-current="${(x) => x.ariaCurrent}"
-				aria-details="${(x) => x.ariaDetails}"
-				aria-disabled="${(x) => x.ariaDisabled}"
-				aria-expanded="${(x) => x.ariaExpanded}"
-				aria-haspopup="${(x) => x.ariaHaspopup}"
-				aria-hidden="${(x) => x.ariaHidden}"
-				aria-invalid="${(x) => x.ariaInvalid}"
-				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-				aria-label="${(x) => x.ariaLabel}"
-				aria-live="${(x) => x.ariaLive}"
-				aria-pressed="${(x) => x.ariaPressed}"
-				aria-relevant="${(x) => x.ariaRelevant}"
-				aria-roledescription="${(x) => x.ariaRoledescription}"
-				title="${(x) => x.title}"
-				${ref("control")}
-			>
-				${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
-				${when((x) => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
-			</button>
-		</template>
-`;
+  return html` <template role="presentation">
+		${when((x) => !x.href, html`${renderButtonContent(context)}`)}
+		${when((x) => x.href, html`${renderAnchorContent(context)}`)}
+	</template>`;
 };
 
 const buttonDefinition = Button.compose({
@@ -152,7 +231,11 @@ const buttonDefinition = Button.compose({
     delegatesFocus: true
   }
 });
-const buttonRegistries = [buttonDefinition(), ...iconRegistries, ...progressRingRegistries];
+const buttonRegistries = [
+  buttonDefinition(),
+  ...iconRegistries,
+  ...progressRingRegistries
+];
 const registerButton = registerFactory(buttonRegistries);
 
 export { Button as B, buttonRegistries as a, buttonDefinition as b, registerButton as r };

package/shared/definition12.cjs

@@ -5,33 +5,31 @@ const calendarEvent = require('./calendar-event.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);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;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);border-radius:8px;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-end:8px;margin-inline-start:min(var(--vvd-calendar-event--indent),32px);max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.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}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
+const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc( 0px + var(--vvd-calendar-event--overlap-count, 0) * 8px );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)}.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}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
 
-const getClasses = ({
-  connotation,
-  appearance
-}) => classNames.classNames(
+const getClasses = ({ connotation, appearance }) => classNames.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)]
 );
 const getStyles = ({ start, duration, overlapCount }) => {
   const stylesObj = {
-    ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+    ...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 = () => index.html`
-<div
-  style="${getStyles}"
-  class="${getClasses}"
-  role="button"
-  tabindex="0"
+const CalendarEventTemplate = () => index.html` <div
+	style="${getStyles}"
+	class="${getClasses}"
+	role="button"
+	tabindex="0"
 >
-  ${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
-  ${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
+	${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
 </div>`;
 
 const calendarEventDefinition = calendarEvent.CalendarEvent.compose({

package/shared/definition12.js

@@ -3,33 +3,31 @@ import { C as CalendarEvent } from './calendar-event.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);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;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);border-radius:8px;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-end:8px;margin-inline-start:min(var(--vvd-calendar-event--indent),32px);max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.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}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
+const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc( 0px + var(--vvd-calendar-event--overlap-count, 0) * 8px );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)}.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}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
 
-const getClasses = ({
-  connotation,
-  appearance
-}) => classNames(
+const getClasses = ({ connotation, appearance }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)]
 );
 const getStyles = ({ start, duration, overlapCount }) => {
   const stylesObj = {
-    ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+    ...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`
-<div
-  style="${getStyles}"
-  class="${getClasses}"
-  role="button"
-  tabindex="0"
+const CalendarEventTemplate = () => html` <div
+	style="${getStyles}"
+	class="${getClasses}"
+	role="button"
+	tabindex="0"
 >
-  ${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
-  ${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
+	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
 </div>`;
 
 const calendarEventDefinition = CalendarEvent.compose({