@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition7.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -71,5 +71,6 @@ const badgeDefinition = vividElement.defineVividComponent(
 );
 const registerBadge = vividElement.createRegisterFunction(badgeDefinition);
 
+exports.Badge = Badge;
 exports.badgeDefinition = badgeDefinition;
 exports.registerBadge = registerBadge;

package/shared/definition7.js

@@ -1,9 +1,9 @@
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { i as iconDefinition } from './definition27.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { i as iconDefinition } from './definition28.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -69,4 +69,4 @@ const badgeDefinition = defineVividComponent(
 );
 const registerBadge = createRegisterFunction(badgeDefinition);
 
-export { badgeDefinition as b, registerBadge as r };
+export { Badge as B, badgeDefinition as b, registerBadge as r };

package/shared/definition8.cjs

@@ -1,15 +1,16 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition27.cjs');
+const definition$1 = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const localized = require('./localized.cjs');
+const classNames = require('./class-names.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
 
@@ -30,11 +31,10 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends vividElement.VividElement {
+class Banner extends delegatesAria.DelegatesAria(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
-    this.role = null;
     this.removable = false;
     this.#handleRemoveEnd = () => {
       this.$emit("removed");
@@ -72,9 +72,6 @@ class Banner extends vividElement.VividElement {
 __decorateClass([
   vividElement.attr({ attribute: "dismiss-aria-label" })
 ], Banner.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  vividElement.attr
-], Banner.prototype, "role");
 __decorateClass([
   vividElement.attr({ attribute: "action-href" })
 ], Banner.prototype, "actionHref");
@@ -84,9 +81,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], Banner.prototype, "removable");
-__decorateClass([
-  vividElement.attr({ attribute: "aria-live" })
-], Banner.prototype, "ariaLive");
 __decorateClass([
   vividElement.attr()
 ], Banner.prototype, "text");
@@ -150,5 +144,6 @@ const bannerDefinition = vividElement.defineVividComponent(
 );
 const registerBanner = vividElement.createRegisterFunction(bannerDefinition);
 
+exports.Banner = Banner;
 exports.bannerDefinition = bannerDefinition;
 exports.registerBanner = registerBanner;

package/shared/definition8.js

@@ -1,13 +1,14 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { i as iconDefinition } from './definition28.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { C as Connotation } from './enums.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { D as DelegatesAria } from './delegates-aria.js';
 import { L as Localized } from './localized.js';
+import { c as classNames } from './class-names.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
 
@@ -28,11 +29,10 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends VividElement {
+class Banner extends DelegatesAria(VividElement) {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
-    this.role = null;
     this.removable = false;
     this.#handleRemoveEnd = () => {
       this.$emit("removed");
@@ -70,9 +70,6 @@ class Banner extends VividElement {
 __decorateClass([
   attr({ attribute: "dismiss-aria-label" })
 ], Banner.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  attr
-], Banner.prototype, "role");
 __decorateClass([
   attr({ attribute: "action-href" })
 ], Banner.prototype, "actionHref");
@@ -82,9 +79,6 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], Banner.prototype, "removable");
-__decorateClass([
-  attr({ attribute: "aria-live" })
-], Banner.prototype, "ariaLive");
 __decorateClass([
   attr()
 ], Banner.prototype, "text");
@@ -148,4 +142,4 @@ const bannerDefinition = defineVividComponent(
 );
 const registerBanner = createRegisterFunction(bannerDefinition);
 
-export { bannerDefinition as b, registerBanner as r };
+export { Banner as B, bannerDefinition as b, registerBanner as r };

package/shared/definition9.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const breadcrumbItem = require('./breadcrumb-item.cjs');
 const textAnchor_template = require('./text-anchor.template.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 

package/shared/definition9.js

@@ -1,9 +1,9 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { B as BreadcrumbItem } from './breadcrumb-item.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 

package/shared/delegates-aria.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+
+const ariaMixinProperties = [
+  "role",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColIndexText",
+  "ariaColSpan",
+  "ariaCurrent",
+  "ariaDescription",
+  "ariaDisabled",
+  "ariaExpanded",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaInvalid",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowIndexText",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSetSize",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText",
+  "ariaRelevant"
+  // Non-standard
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const DelegatesAria = (Base) => {
+  class DelegatesAriaElement extends Base {
+    constructor(...rest) {
+      super(...rest);
+      for (const ariaProperty of ariaMixinProperties) {
+        this[ariaProperty] = null;
+      }
+    }
+  }
+  for (const ariaProperty of ariaMixinProperties) {
+    vividElement.attr({ attribute: ariaAttributeName(ariaProperty) })(
+      DelegatesAriaElement.prototype,
+      ariaProperty
+    );
+  }
+  return DelegatesAriaElement;
+};
+
+exports.DelegatesAria = DelegatesAria;

package/shared/delegates-aria.js

@@ -0,0 +1,67 @@
+import { a as attr } from './vivid-element.js';
+
+const ariaMixinProperties = [
+  "role",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColIndexText",
+  "ariaColSpan",
+  "ariaCurrent",
+  "ariaDescription",
+  "ariaDisabled",
+  "ariaExpanded",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaInvalid",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowIndexText",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSetSize",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText",
+  "ariaRelevant"
+  // Non-standard
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const DelegatesAria = (Base) => {
+  class DelegatesAriaElement extends Base {
+    constructor(...rest) {
+      super(...rest);
+      for (const ariaProperty of ariaMixinProperties) {
+        this[ariaProperty] = null;
+      }
+    }
+  }
+  for (const ariaProperty of ariaMixinProperties) {
+    attr({ attribute: ariaAttributeName(ariaProperty) })(
+      DelegatesAriaElement.prototype,
+      ariaProperty
+    );
+  }
+  return DelegatesAriaElement;
+};
+
+export { DelegatesAria as D };

package/shared/enums.cjs

@@ -90,6 +90,13 @@ var MediaSkipBy = /* @__PURE__ */ ((MediaSkipBy2) => {
   MediaSkipBy2["Thirty"] = "30";
   return MediaSkipBy2;
 })(MediaSkipBy || {});
+var Sticky = /* @__PURE__ */ ((Sticky2) => {
+  Sticky2["None"] = "none";
+  Sticky2["Header"] = "header";
+  Sticky2["Column"] = "column";
+  Sticky2["All"] = "all";
+  return Sticky2;
+})(Sticky || {});
 
 exports.Appearance = Appearance;
 exports.AriaLive = AriaLive;
@@ -102,4 +109,5 @@ exports.Position = Position;
 exports.Role = Role;
 exports.Shape = Shape;
 exports.Size = Size;
+exports.Sticky = Sticky;
 exports.TabsGutters = TabsGutters;

package/shared/enums.js

@@ -88,5 +88,12 @@ var MediaSkipBy = /* @__PURE__ */ ((MediaSkipBy2) => {
   MediaSkipBy2["Thirty"] = "30";
   return MediaSkipBy2;
 })(MediaSkipBy || {});
+var Sticky = /* @__PURE__ */ ((Sticky2) => {
+  Sticky2["None"] = "none";
+  Sticky2["Header"] = "header";
+  Sticky2["Column"] = "column";
+  Sticky2["All"] = "all";
+  return Sticky2;
+})(Sticky || {});
 
-export { Appearance as A, Connotation as C, IconDecoration as I, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c };
+export { Appearance as A, Connotation as C, IconDecoration as I, LayoutSize as L, MediaSkipBy as M, Position as P, Role as R, Shape as S, TabsGutters as T, ConnotationDecorative as a, Size as b, AriaLive as c, Sticky as d };

package/shared/form-elements.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
@@ -42,7 +42,7 @@ __decorateClass([
   })
 ], FormElementCharCount.prototype, "charCount");
 function formElements(constructor) {
-  class Decorated extends constructor {
+  class FormElement extends constructor {
     constructor(...args) {
       super(...args);
       this.errorValidationMessage = "";
@@ -88,11 +88,11 @@ function formElements(constructor) {
   }
   __decorateClass([
     vividElement.attr
-  ], Decorated.prototype, "label");
+  ], FormElement.prototype, "label");
   __decorateClass([
     vividElement.observable
-  ], Decorated.prototype, "errorValidationMessage");
-  return Decorated;
+  ], FormElement.prototype, "errorValidationMessage");
+  return FormElement;
 }
 const feedback = {
   helper: {
@@ -168,7 +168,7 @@ function getFeedbackTypeTemplate(context, config, shouldShow) {
 	</div>`;
 }
 function errorText(constructor) {
-  class Decorated extends constructor {
+  class ErrorText extends constructor {
     #blockValidateCalls = false;
     constructor(...args) {
       super(...args);
@@ -197,8 +197,8 @@ function errorText(constructor) {
   }
   __decorateClass([
     vividElement.attr({ attribute: "error-text" })
-  ], Decorated.prototype, "errorText");
-  return Decorated;
+  ], ErrorText.prototype, "errorText");
+  return ErrorText;
 }
 
 exports.FormElementCharCount = FormElementCharCount;

package/shared/form-elements.js

@@ -1,5 +1,5 @@
-import { I as Icon } from './definition27.js';
-import { a as attr, o as observable, h as html } from './vivid-element.js';
+import { I as Icon } from './definition28.js';
+import { h as html, a as attr, o as observable } from './vivid-element.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -40,7 +40,7 @@ __decorateClass([
   })
 ], FormElementCharCount.prototype, "charCount");
 function formElements(constructor) {
-  class Decorated extends constructor {
+  class FormElement extends constructor {
     constructor(...args) {
       super(...args);
       this.errorValidationMessage = "";
@@ -86,11 +86,11 @@ function formElements(constructor) {
   }
   __decorateClass([
     attr
-  ], Decorated.prototype, "label");
+  ], FormElement.prototype, "label");
   __decorateClass([
     observable
-  ], Decorated.prototype, "errorValidationMessage");
-  return Decorated;
+  ], FormElement.prototype, "errorValidationMessage");
+  return FormElement;
 }
 const feedback = {
   helper: {
@@ -166,7 +166,7 @@ function getFeedbackTypeTemplate(context, config, shouldShow) {
 	</div>`;
 }
 function errorText(constructor) {
-  class Decorated extends constructor {
+  class ErrorText extends constructor {
     #blockValidateCalls = false;
     constructor(...args) {
       super(...args);
@@ -195,8 +195,8 @@ function errorText(constructor) {
   }
   __decorateClass([
     attr({ attribute: "error-text" })
-  ], Decorated.prototype, "errorText");
-  return Decorated;
+  ], ErrorText.prototype, "errorText");
+  return ErrorText;
 }
 
 export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, errorText as e, formElements as f, getFeedbackTemplate as g };

package/shared/foundation/anchor/anchor.d.ts

@@ -1,4 +1,3 @@
-import { ARIAGlobalStatesAndProperties } from '../patterns/aria-global';
 export declare class Anchor {
     download: string;
     href: string;
@@ -10,10 +9,3 @@ export declare class Anchor {
     type: string;
     control: HTMLAnchorElement | undefined;
 }
-export declare class DelegatesARIALink {
-    ariaExpanded: 'true' | 'false' | string | null;
-}
-export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
-}
-export interface Anchor extends DelegatesARIALink {
-}