@vonage/vivid 3.0.0-next.50 → 3.0.0-next.53

package/index.js

@@ -27,7 +27,6 @@ export { vividTooltip } from './tooltip/index.js';
 export { vividCheckbox } from './checkbox/index.js';
 export { vividHeader } from './header/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
-import './shared/style-inject.es.js';
 import './shared/class-names.js';
 import './focus/index.js';
 import './shared/focus.js';

package/layout/index.js

@@ -1,5 +1,4 @@
 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 { c as classNames } from '../shared/class-names.js';
 
 var AUTO_SIZING;
@@ -25,8 +24,7 @@ __decorate([attr({
   attribute: 'auto-sizing'
 }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
-styleInject(css_248z);
+var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 
 let _ = t => t,
     _t;

package/lib/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Connotation, Density, Shape } from '../enums.js';
+export declare type AvatarConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export declare type AvatarAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined>;
+declare type AvatarShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+declare type AvatarDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
+export declare class Avatar extends FoundationElement {
+    connotation?: AvatarConnotation;
+    shape?: AvatarShape;
+    appearance?: AvatarAppearance;
+    density?: AvatarDensity;
+    icon?: string;
+}
+export {};

package/lib/avatar/avatar.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Avatar } from './avatar';
+export declare const AvatarTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Avatar>;

package/lib/avatar/index.d.ts

@@ -0,0 +1,3 @@
+import '../icon';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAvatar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import type { Appearance, Connotation, Density, Shape } from '../enums.js';
-declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
+declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
 declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
 declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;

package/lib/banner/banner.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
-export declare type BannerConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare type BannerConnotation = Connotation.Information | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
 export declare class Banner extends FoundationElement {
     #private;
     actionHref: string | undefined;

package/lib/calendar-event/calendar-event.d.ts

@@ -1,6 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Appearance, Connotation } from '../enums';
-declare type CalendarEventConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info | Connotation.Announcement>;
+declare type CalendarEventConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
 declare type CalendarEventAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
 export declare class CalendarEvent extends FoundationElement {
     heading?: string;

package/lib/dialog/index.d.ts

@@ -1,5 +1,5 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import '../icon';
 import '../button';
 import '../elevation';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/enums.d.ts

@@ -4,7 +4,7 @@ export declare enum Connotation {
     Success = "success",
     Alert = "alert",
     Warning = "warning",
-    Info = "info",
+    Information = "information",
     Announcement = "announcement"
 }
 export declare enum ConnotationDecorative {

package/lib/icon/icon.d.ts

@@ -1,6 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation, Size } from '../enums';
-declare type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
+declare type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Information>;
 declare type IconSize = Extract<Size, Size.Small | Size.Medium | Size.Large>;
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;

package/lib/note/note.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns';
-export declare type NoteConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare type NoteConnotation = Connotation.Information | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
 export declare class Note extends FoundationElement {
     headline?: string;
     connotation?: NoteConnotation;

package/lib/text-field/text-field.d.ts

@@ -1,23 +1,16 @@
 import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
 import type { Appearance, Density, Shape } from '../enums';
 import { AffixIcon } from '../../shared/patterns';
+import { FormElement } from '../../shared/patterns/form-elements';
 declare type TextFieldDensity = Extract<Density, Density.Normal | Density.Extended>;
 declare type TextFieldAppearance = Extract<Appearance, Appearance.Outlined | Appearance.Ghost>;
 declare type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 export declare class TextField extends FoundationTextfield {
-    #private;
-    label?: string;
-    helperText?: string;
-    charCount: boolean;
     density?: TextFieldDensity;
     appearance?: TextFieldAppearance;
     shape?: TextFieldShape;
-    userValid: boolean;
     autoComplete?: string;
-    get errorValidationMessage(): string;
-    constructor();
-    validate: () => void;
 }
-export interface TextField extends AffixIcon {
+export interface TextField extends AffixIcon, FormElement {
 }
 export {};

package/menu/index.js

@@ -1,6 +1,5 @@
 import { P as Popup } from '../shared/index3.js';
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, 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 { S as StartEnd } from '../shared/aria-global.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
@@ -608,7 +607,6 @@ __decorate([
 ], Menu$1.prototype, "items", void 0);
 
 var css_248z = ".base {\n  padding-block: 8px;\n}";
-styleInject(css_248z);
 
 class Menu extends Menu$1 {
   constructor() {

package/nav-disclosure/index.js

@@ -1,7 +1,6 @@
 import '../icon/index.js';
 import '../focus/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 { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
@@ -17,8 +16,7 @@ import '../shared/class-names.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.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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)) {\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(: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:where(.selected, [aria-current]):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 {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-30);\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  font: var(--vvd-font-base);\n  gap: 8px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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)) {\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(: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:where(.selected, [aria-current]):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 {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-200);\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
 
 var _NavDisclosure_onToggle;
 class NavDisclosure extends FoundationElement {

package/nav-item/index.js

@@ -1,7 +1,6 @@
 import '../icon/index.js';
 import '../focus/index.js';
 import { h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { b as AffixIcon } from '../shared/affix.js';
 import { T as TextAnchor } from '../shared/text-anchor.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
@@ -21,8 +20,7 @@ import '../shared/aria-global.js';
 import '../shared/ref.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.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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)) {\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(: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:where(.selected, [aria-current]):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 {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-font-base);\n  gap: 8px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\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)) {\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(: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:where(.selected, [aria-current]):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 {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
 
 class NavItem extends TextAnchor {}
 applyMixins(NavItem, AffixIcon);

package/note/index.js

@@ -1,5 +1,4 @@
 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 { b as AffixIcon } from '../shared/affix.js';
 import '../shared/focus.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
@@ -15,8 +14,7 @@ import '../shared/to-string.js';
 import '../shared/_has.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.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n  color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .headline {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.text .message {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-300), inset -1px 0 0 0 var(--vvd-color-neutral-300), inset 0 -1px 0 0 var(--vvd-color-neutral-300);\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-500);\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .headline {\n  font: var(--vvd-font-base-bold);\n}\n.text .message {\n  font: var(--vvd-font-base);\n}";
 
 class Note extends FoundationElement {}
 
@@ -30,7 +28,7 @@ let _ = t => t,
     _t,
     _t2,
     _t3;
-const connotationIconMap = new Map([[Connotation.Info, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
 
 const getClasses = ({
   connotation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.50",
+  "version": "3.0.0-next.53",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -43,7 +43,8 @@
     "./checkbox": "./checkbox",
     "./dialog": "./dialog",
     "./divider": "./divider",
-    "./menu": "./menu"
+    "./menu": "./menu",
+    "./avatar": "./avatar"
   },
   "typings": "./index.d.ts",
   "dependencies": {

package/popup/index.js

@@ -2,7 +2,6 @@ import '../shared/index2.js';
 import '../button/index.js';
 import '../shared/index.js';
 export { v as vividPopup } from '../shared/index3.js';
-import '../shared/style-inject.es.js';
 import '../shared/class-names.js';
 import '../icon/index.js';
 import '../shared/icon.js';

package/progress/index.js

@@ -1,5 +1,4 @@
 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 '../shared/web.dom-collections.iterator.js';
 import { c as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/export.js';
 import { B as BaseProgress } from '../shared/base-progress.js';
@@ -8,8 +7,7 @@ import { c as classNames } from '../shared/class-names.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n  /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n  border-radius: 3px;\n}\n\n.indeterminate {\n  display: flex;\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n\n.determinate {\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n.indicator-1 {\n  animation: indeterminate-1 2s infinite;\n  inline-size: 30%;\n}\n\n.indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n  position: absolute;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n  background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n  animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  inline-size: 100%;\n  /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n  border-radius: 3px;\n}\n\n.indeterminate {\n  display: flex;\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n\n.determinate {\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n.paused .determinate {\n  background-color: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n  animation: indeterminate-1 2s infinite;\n  inline-size: 30%;\n}\n\n.indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n  position: absolute;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n  background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n  animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
 
 var classof = classofRaw;
 

package/progress-ring/index.js

@@ -1,11 +1,9 @@
 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 BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-9 {\n  --_density: calc(9 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base.density-13 {\n  --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n  --_density: calc(10 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-9 {\n  --_density: calc(9 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base.density-13 {\n  --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n  --_density: calc(10 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 
 class ProgressRing extends BaseProgress {}
 

package/shared/enums.js

@@ -6,7 +6,7 @@ var Connotation;
   Connotation["Success"] = "success";
   Connotation["Alert"] = "alert";
   Connotation["Warning"] = "warning";
-  Connotation["Info"] = "info";
+  Connotation["Information"] = "information";
   Connotation["Announcement"] = "announcement";
 })(Connotation || (Connotation = {}));
 

package/shared/index2.js

@@ -1,5 +1,4 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from './index.js';
-import { s as styleInject } from './style-inject.es.js';
 import { c as classNames } from './class-names.js';
 
 class Elevation extends FoundationElement {}
@@ -11,8 +10,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
 
-var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background-color: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n  filter: none;\n}";
-styleInject(css_248z);
+var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n  filter: none;\n}";
 
 let _ = t => t,
     _t;

package/shared/index3.js

@@ -7,7 +7,6 @@ import './es.object.assign.js';
 import { j as anObject$3, e as fails$5, g as global$3, v as functionCall, f as functionUncurryThis, Q as shared$1, y as internalState, _ as _export, w as wellKnownSymbol$2, u as defineBuiltIn$1, K as createNonEnumerableProperty$1, x as isObject$1, c as classofRaw, B as requireObjectCoercible$2, R as toIntegerOrInfinity$1, S as toPropertyKey$1, o as objectDefineProperty, J as createPropertyDescriptor$1, A as lengthOfArrayLike$1, T as toAbsoluteIndex$1, i as isCallable$1, U as toLength$1, z as getMethod$1 } from './export.js';
 import { t as toString$3 } from './to-string.js';
 import { h as keyEscape } from './form-associated.js';
-import { s as styleInject } from './style-inject.es.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
@@ -2069,8 +2068,7 @@ __decorate([attr({
 
 __decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
 
-var css_248z = ".control {\n  background-color: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  position: fixed;\n  border-radius: 6px;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-on-canvas); /* neutral-100 */\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background-color: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible-button {\n  align-self: flex-start;\n  margin-block-start: 4px;\n  margin-inline-end: 4px;\n}";
-styleInject(css_248z);
+var css_248z = ".control {\n  background: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n  inline-size: fit-content;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  position: fixed;\n  border-radius: 6px;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible-button {\n  align-self: flex-start;\n  margin-block-start: 4px;\n  margin-inline-end: 4px;\n}";
 
 let _ = t => t,
     _t,

package/shared/patterns/form-elements.d.ts

@@ -0,0 +1,22 @@
+export interface FormElement {
+    charCount: boolean;
+    errorValidationMessage: boolean;
+    helperText: string;
+    label: string;
+    userValid: boolean;
+    dirtyValue: boolean;
+}
+export declare function formElements<T extends {
+    new (...args: any[]): Record<string, any>;
+}>(constructor: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        label?: string | undefined;
+        helperText?: string | undefined;
+        charCount: boolean;
+        userValid: boolean;
+        "__#5805@#blurred": boolean;
+        readonly errorValidationMessage: any;
+        validate: () => void;
+    };
+} & T;

package/side-drawer/index.js

@@ -1,6 +1,5 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/export.js';
@@ -34,8 +33,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = ".control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Sep 2022 15:12:22 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
     _t,

package/styles/fonts/spezia.css

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: SpeziaWebVariable;
+  font-family: SpeziaCompleteVariableUpright;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
   src: url("SpeziaCompleteVariableUprightWeb.woff") format("woff");
@@ -13,7 +13,7 @@
   src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
 }
 @font-face {
-  font-family: SpeziaMonoWebVariable;
+  font-family: SpeziaMonoCompleteVariable;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
   src: url("SpeziaMonoCompleteVariableWeb.woff") format("woff");