@vonage/vivid 4.16.2 → 4.17.0

package/shared/definition7.cjs

@@ -4,8 +4,8 @@ const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition27.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 { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { i as iconDefinition } from './definition27.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

@@ -7,9 +7,9 @@ const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.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}";
 
@@ -150,5 +150,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,13 @@
 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 { 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 { 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}";
 
@@ -148,4 +148,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

@@ -4,8 +4,8 @@ const definition = require('./definition27.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 { 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/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-associated.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './vivid-element.js';
+import { a as attr, o as observable, e as emptyArray, D as DOM, c as booleanConverter } from './vivid-element.js';
 import { k as keyEnter } from './key-codes.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/form-elements.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 { 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/vivid-element/vivid-element.d.ts

@@ -1,3 +1,4 @@
 import { FASTElement } from '@microsoft/fast-element';
 export declare class VividElement extends FASTElement {
+    static VIVID_VERSION: string;
 }