@vonage/vivid 3.0.0-next.16 → 3.0.0-next.19

package/action-group/index.js

@@ -0,0 +1,34 @@
+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 css_248z = ".base {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 4px;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
+styleInject(css_248z);
+
+class ActionGroup extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "appearance", void 0);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  appearance,
+  shape
+}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
+
+const ActionGroupTemplate = () => html(_t || (_t = _`
+<div class="${0}">
+  <slot></slot>
+</div>`), getClasses);
+
+const vividActionGroup = ActionGroup.compose({
+  baseName: 'action-group',
+  template: ActionGroupTemplate,
+  styles: css_248z
+});
+designSystem.register(vividActionGroup());
+
+export { vividActionGroup };

package/banner/index.js

@@ -13,8 +13,9 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../icon/index.js';
 import '../focus/index.js';
-import '../shared/focus2.js';
 import '../shared/focus.js';
+import '../shared/button.js';
+import '../shared/focus2.js';
 import '../shared/aria-global.js';
 import '../shared/text-anchor.js';
 import '../shared/anchor.js';

package/button/index.js

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

package/card/index.js

@@ -10,14 +10,15 @@ import '../shared/icon.js';
 import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 import '../focus/index.js';
-import '../shared/focus2.js';
+import '../shared/focus.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/affix.js';
-import '../shared/focus.js';
+import '../shared/button.js';
 import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
 import '../shared/aria-global.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n  :host {\n    block-size: -moz-fit-content;\n    block-size: fit-content;\n    inline-size: -moz-fit-content;\n    inline-size: fit-content;\n  }\n}\n\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
 styleInject(css_248z);
 
 class Card extends FoundationElement {}

package/fab/index.js

@@ -3,18 +3,19 @@ import '../focus/index.js';
 import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
-import { B as Button, f as focusTemplateFactory } from '../shared/focus.js';
+import { B as Button } from '../shared/button.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
 import { r as ref } from '../shared/aria-global.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
 import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 import '../shared/when.js';
-import '../shared/focus2.js';
+import '../shared/focus.js';
 import '../shared/web.dom-collections.iterator.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: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_fab-block-size: 48px;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_fab-block-size);\n  border-radius: 24px;\n  color: var(--_appearance-color-text);\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-basis: var(--vvd-color-cta);\n  --connotation-basis-increment: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-firm: var(--vvd-color-cta-70);\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-basis-increment: var(--vvd-color-neutral-90);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control:not(.connotation-cta, .connotation-primary) {\n  --connotation: var(--vvd-color-canvas);\n  --on-connotation: var(--vvd-color-on-canvas);\n  --connotation-basis: var(--vvd-color-canvas);\n  --connotation-basis-increment: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-on-canvas);\n  --connotation-fierce: var(--vvd-color-neutral-30);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-basis-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 24px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_fab-block-size: 48px;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_fab-block-size);\n  border-radius: 24px;\n  color: var(--_appearance-color-text);\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-basis: var(--vvd-color-cta);\n  --connotation-basis-increment: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-firm: var(--vvd-color-cta-70);\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-basis-increment: var(--vvd-color-neutral-90);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control:not(.connotation-cta, .connotation-primary) {\n  --connotation: var(--vvd-color-canvas);\n  --on-connotation: var(--vvd-color-on-canvas);\n  --connotation-basis: var(--vvd-color-canvas);\n  --connotation-basis-increment: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-on-canvas);\n  --connotation-fierce: var(--vvd-color-neutral-30);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-basis-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 24px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class Fab extends Button {}

package/focus/index.js

@@ -1,5 +1,5 @@
 import { h as html, d as designSystem } from '../shared/index.js';
-import { F as Focus } from '../shared/focus2.js';
+import { F as Focus } from '../shared/focus.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 
 var css_248z = ":host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 2px var(--focus-stroke-color, var(--vvd-color-on-canvas)), inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: 0;\n}";

package/index.js

@@ -1,5 +1,6 @@
 export { vividAccordion } from './accordion/index.js';
 export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
 export { vividBadge } from './badge/index.js';
 export { vividBanner } from './banner/index.js';
 export { vividBreadcrumb } from './breadcrumb/index.js';
@@ -18,6 +19,7 @@ export { vividProgressRing } from './progress-ring/index.js';
 export { vividSideDrawer } from './side-drawer/index.js';
 export { vividSidenavItem } from './sidenav-item/index.js';
 export { vividText } from './text/index.js';
+export { vividTextfield } from './text-field/index.js';
 export { vividTooltip } from './tooltip/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
 import './shared/style-inject.es.js';
@@ -36,8 +38,9 @@ import './shared/anchor.js';
 import './shared/aria-global.js';
 import './shared/text-anchor.template.js';
 import './focus/index.js';
-import './shared/focus2.js';
 import './shared/focus.js';
+import './shared/button.js';
+import './shared/focus2.js';
 import './shared/breadcrumb-item.js';
 import './shared/slotted.js';
 import './shared/es.object.assign.js';

package/lib/action-group/action-group.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Shape } from '../enums.js';
+export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class ActionGroup extends FoundationElement {
+    shape?: ActionGroupShape;
+    appearance?: ActionGroupAppearance;
+}
+export {};

package/lib/action-group/action-group.template.d.ts

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

package/lib/action-group/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividActionGroup: (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/components.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './accordion-item';
+export * from './action-group';
 export * from './badge';
 export * from './banner';
 export * from './breadcrumb';
@@ -18,4 +19,5 @@ export * from './progress-ring';
 export * from './side-drawer';
 export * from './sidenav-item';
 export * from './text';
+export * from './text-field';
 export * from './tooltip';

package/lib/enums.d.ts

@@ -18,10 +18,10 @@ export declare enum Shape {
     Sharp = "sharp"
 }
 export declare enum Appearance {
-    Text = "text",
     Filled = "filled",
     Outlined = "outlined",
     Duotone = "duotone",
+    Fieldset = "fieldset",
     Subtle = "subtle",
     Ghost = "ghost"
 }

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

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividTextfield: (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/text-field/text-field.d.ts

@@ -0,0 +1,20 @@
+import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
+import type { Appearance, Density, Shape } from '../enums';
+import { AffixIcon } from '../../shared/patterns';
+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 {
+    label?: string;
+    helperText?: string;
+    charCount: boolean;
+    density?: TextFieldDensity;
+    appearance?: TextFieldAppearance;
+    shape?: TextFieldShape;
+    userValid: boolean;
+    get errorValidationMessage(): string;
+    validate(): void;
+}
+export interface TextField extends AffixIcon {
+}
+export {};

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

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import '../icon/index';
+import type { TextField } from './text-field';
+export declare const TextfieldTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<TextField>;

package/note/index.js

@@ -1,7 +1,7 @@
 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/focus2.js';
+import '../shared/focus.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../icon/index.js';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.16",
+  "version": "3.0.0-next.19",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
   "exports": {
     "./accordion": "./accordion",
     "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
     "./badge": "./badge",
     "./banner": "./banner",
     "./breadcrumb": "./breadcrumb",
@@ -25,6 +26,7 @@
     "./side-drawer": "./side-drawer",
     "./sidenav-item": "./sidenav-item",
     "./text": "./text",
+    "./text-field": "./text-field",
     "./tooltip": "./tooltip"
   },
   "typings": "./index.d.ts",

package/popup/index.js

@@ -12,10 +12,11 @@ import { c as classNames } from '../shared/class-names.js';
 import '../icon/index.js';
 import '../shared/_has.js';
 import '../focus/index.js';
-import '../shared/focus2.js';
-import '../shared/affix.js';
 import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/button.js';
 import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
 
 var anObject$2 = anObject$3;
 
@@ -2068,7 +2069,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);\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 {\n  align-self: flex-start;\n  margin-block-start: 0.25rem;\n  margin-inline-end: 0.25rem;\n}";
+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);\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: 0.25rem;\n  margin-inline-end: 0.25rem;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -2096,7 +2097,7 @@ const popupTemplate = () => html(_t || (_t = _`
 			</div>
     </div>
   </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button density="condensed" @click="${0}"
-						class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
+						class="dismissible-button" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
 
 const vividPopup = Popup.compose({
   baseName: 'popup',

package/shared/button.js

@@ -0,0 +1,188 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './focus2.js';
+import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
+
+class _Button extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedButton extends FormAssociated(_Button) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @public
+ */
+class Button extends FormAssociatedButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+         * @internal
+         */
+        this.handleClick = (e) => {
+            var _a;
+            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+                e.stopPropagation();
+            }
+        };
+        /**
+         * Submits the parent form
+         */
+        this.handleSubmission = () => {
+            if (!this.form) {
+                return;
+            }
+            const attached = this.proxy.isConnected;
+            if (!attached) {
+                this.attachProxy();
+            }
+            // Browser support for requestSubmit is not comprehensive
+            // so click the proxy if it isn't supported
+            typeof this.form.requestSubmit === "function"
+                ? this.form.requestSubmit(this.proxy)
+                : this.proxy.click();
+            if (!attached) {
+                this.detachProxy();
+            }
+        };
+        /**
+         * Resets the parent form
+         */
+        this.handleFormReset = () => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    formactionChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formAction = this.formaction;
+        }
+    }
+    formenctypeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formEnctype = this.formenctype;
+        }
+    }
+    formmethodChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formMethod = this.formmethod;
+        }
+    }
+    formnovalidateChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formNoValidate = this.formnovalidate;
+        }
+    }
+    formtargetChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formTarget = this.formtarget;
+        }
+    }
+    typeChanged(previous, next) {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+        }
+        next === "submit" && this.addEventListener("click", this.handleSubmission);
+        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+        next === "reset" && this.addEventListener("click", this.handleFormReset);
+        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.handleUnsupportedDelegatesFocus();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.addEventListener("click", this.handleClick);
+            });
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.removeEventListener("click", this.handleClick);
+            });
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button.prototype, "type", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+class DelegatesARIAButton {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+__decorate([
+    attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(Button, StartEnd, DelegatesARIAButton);
+
+export { Button as B };

package/shared/enums.js

@@ -29,10 +29,10 @@ var Shape;
 var Appearance;
 
 (function (Appearance) {
-  Appearance["Text"] = "text";
   Appearance["Filled"] = "filled";
   Appearance["Outlined"] = "outlined";
   Appearance["Duotone"] = "duotone";
+  Appearance["Fieldset"] = "fieldset";
   Appearance["Subtle"] = "subtle";
   Appearance["Ghost"] = "ghost";
 })(Appearance || (Appearance = {}));