@vonage/vivid 3.0.0-next.3 → 3.0.0-next.6

package/breadcrumb-item/index.js

@@ -1,15 +1,19 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import '../icon/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { B as BreadcrumbItem$1 } from '../shared/breadcrumb-item.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
-import { w as when } from '../shared/index.js';
+import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/apply-mixins.js';
+import '../shared/icon.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/_has.js';
 import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/affix.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-on-canvas);\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  font: inherit;\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-on-canvas);\n}";
 styleInject(css_248z);
 
 class BreadcrumbItem extends BreadcrumbItem$1 {
@@ -20,7 +24,9 @@ class BreadcrumbItem extends BreadcrumbItem$1 {
 
 }
 
-__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
 
 let _2 = t => t,
     _t,
@@ -37,7 +43,7 @@ const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
   ${0}
 
         ${0}
-      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate())), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-line"></vwc-icon>`))));
+      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-line"></vwc-icon>`))));
 
 const vividBreadcrumbItem = BreadcrumbItem.compose({
   baseName: 'breadcrumb-item',

package/button/index.js

@@ -1,12 +1,15 @@
-import '../shared/index.js';
-import { F as Focus } from '../shared/index3.js';
-import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import '../icon/index.js';
+import { F as Focus } from '../shared/index2.js';
+import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
-import { P as PrefixOrSuffix, p as prefixOrSuffixTemplate } from '../shared/affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/_has.js';
+import '../shared/when.js';
 
 /**
  * Key Code values
@@ -93,7 +96,7 @@ const ElementInternalsKey = "ElementInternals";
  */
 const supportsElementInternals = ElementInternalsKey in window &&
     "setFormValue" in window[ElementInternalsKey].prototype;
-const InternalsMap = new Map();
+const InternalsMap = new WeakMap();
 /**
  * Base function for providing Custom Element Form Association.
  *
@@ -639,10 +642,10 @@ __decorate([
 class DelegatesARIAButton {
 }
 __decorate([
-    attr({ attribute: "aria-expanded", mode: "fromView" })
+    attr({ attribute: "aria-expanded" })
 ], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
 __decorate([
-    attr({ attribute: "aria-pressed", mode: "fromView" })
+    attr({ attribute: "aria-pressed" })
 ], DelegatesARIAButton.prototype, "ariaPressed", void 0);
 applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
 applyMixins(Button$1, StartEnd, DelegatesARIAButton);
@@ -663,11 +666,13 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "appeara
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
 
-__decorate([attr, __metadata("design:type", Object)], Button.prototype, "label", void 0);
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", Object)], Button.prototype, "label", void 0);
 
-applyMixins(Button, PrefixOrSuffix);
+applyMixins(Button, AffixIconWithTrailing);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control.appearance-filled {\n  --appearance-color-fill: var(--connotation);\n  --appearance-color-text: var(--on-connotation);\n}\n\n.control.appearance-outlined {\n  --appearance-color-fill: transparent;\n  --appearance-color-outline: var(--connotation-diverse);\n  --appearance-color-text: var(--connotation-diverse);\n}\n\n.control.appearance-ghost,\n.control:not(.appearance-filled):not(.appearance-filled-idle):not(.appearance-outlined):not(.appearance-outlined-idle):not(.appearance-ghost-idle) {\n  --appearance-color-fill: transparent;\n  --appearance-color-text: var(--connotation-diverse);\n}\n\n.control.appearance-filled-idle {\n  --appearance-color-fill: var(--vvd-color-neutral-10);\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\n\n.control.appearance-outlined-idle {\n  --appearance-color-fill: transparent;\n  --appearance-color-outline: var(--vvd-color-neutral-30);\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\n\n.control.appearance-ghost-idle {\n  --appearance-color-fill: transparent;\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\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  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  outline: 0 none;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-diverse: var(--vvd-color-primary);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-diverse: var(--vvd-color-cta-70);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-diverse: var(--vvd-color-success-70);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-diverse: var(--vvd-color-alert-70);\n}\n\n.control.icon-only {\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\n/* Size */\n.control.size-base-small {\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.size-base-small:not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-base-small .icon {\n  font-size: 16px;\n}\n\n.control.size-base-large {\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.size-base-large:not(.icon-only) {\n  --button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.size-base-large .icon {\n  font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\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(.size-base-small):not(.size-base-large):not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon:not(.icon-trailing) {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon.icon-trailing {\n  order: 1;\n  margin-inline-start: var(--button-icon-gap);\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 Sun, 23 Jan 2022 11:15:05 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  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  cursor: pointer;\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-diverse: var(--vvd-color-neutral-70);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-diverse: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-diverse: var(--vvd-color-success-70);\n  --connotation-contrast: var(--vvd-color-success-90);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-diverse: var(--vvd-color-alert-70);\n  --connotation-contrast: var(--vvd-color-alert-90);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-pale: var(--vvd-color-alert-10);\n}\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);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation);\n}\n.control {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:hover.appearance-filled, .control.hovered.appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-diverse);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover.appearance-outlined, .control.hovered.appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: var(--connotation);\n}\n.control:hover, .control.hovered {\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-30);\n  --_appearance-color-fill: var(--vvd-color-neutral-10);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-30);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-30);\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-30);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:active.appearance-filled, .control.active.appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-contrast);\n  --_appearance-color-outline: transaprent;\n}\n.control:active.appearance-outlined, .control.active.appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: var(--connotation);\n}\n.control:active, .control.active {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\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\n/* Size */\n.control.size-base-small {\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.size-base-small:not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-base-small .icon {\n  font-size: 16px;\n}\n\n.control.size-base-large {\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.size-base-large:not(.icon-only) {\n  --button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.size-base-large .icon {\n  font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\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(.size-base-small):not(.size-base-large):not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n  order: 1;\n  margin-inline-start: var(--button-icon-gap);\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,
@@ -676,7 +681,7 @@ let _ = t => t,
 
 const getAppearanceClassName = (appearance, disabled) => {
   let className = `appearance-${appearance}`;
-  disabled && (className += '-idle');
+  disabled && (className += ' disabled');
   return className;
 };
 
@@ -687,15 +692,18 @@ const getClasses = ({
   size,
   icon,
   label,
-  disabled
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon]);
+  disabled,
+  iconTrailing
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing]);
 
 const focusTemplate = context => {
   const focusTag = context.tagFor(Focus);
   return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
 };
 
-const buttonTemplate = context => html(_t2 || (_t2 = _`
+const buttonTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html(_t2 || (_t2 = _`
     <button
         class="${0}"
         ?autofocus="${0}"
@@ -736,7 +744,8 @@ const buttonTemplate = context => html(_t2 || (_t2 = _`
         ${0}
         ${0}
     </button>
-`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate(context), () => prefixOrSuffixTemplate(context), x => x.label);
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate(context), x => affixIconTemplate(x.icon), x => x.label);
+};
 
 const vividButton = Button.compose({
   baseName: 'button',