@vonage/vivid 4.9.0 → 4.11.0

package/shared/definition21.cjs

@@ -31,10 +31,13 @@ class Dialog extends index.FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
+    this.noDismissOnEsc = false;
+    this.noDismissButton = false;
+    this.nonDismissible = false;
     this.modal = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || this.noLightDismiss) {
+      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
         return;
       }
       const rect = this.#dialog.getBoundingClientRect();
@@ -100,6 +103,22 @@ class Dialog extends index.FoundationElement {
       this.$emit("open", void 0, { bubbles: false });
     }
   }
+  get _showDismissButton() {
+    return this.#isDismissibleVia("dismiss-button");
+  }
+  #isDismissibleVia(method) {
+    if (this.nonDismissible) {
+      return false;
+    }
+    switch (method) {
+      case "escape":
+        return !this.noDismissOnEsc;
+      case "dismiss-button":
+        return !this.noDismissButton;
+      case "light-dismiss":
+        return !this.noLightDismiss;
+    }
+  }
   #handleScrimClick;
   #handleInternalFormSubmit;
   /**
@@ -107,7 +126,9 @@ class Dialog extends index.FoundationElement {
    */
   _onKeyDown(event) {
     if (index$1.handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
-      this._handleCloseRequest();
+      if (this.#isDismissibleVia("escape")) {
+        this._handleCloseRequest();
+      }
       return false;
     }
     return true;
@@ -199,6 +220,15 @@ __decorateClass([
 __decorateClass([
   index.attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  index.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+], Dialog.prototype, "noDismissOnEsc");
+__decorateClass([
+  index.attr({ attribute: "no-dismiss-button", mode: "boolean" })
+], Dialog.prototype, "noDismissButton");
+__decorateClass([
+  index.attr({ attribute: "non-dismissible", mode: "boolean" })
+], Dialog.prototype, "nonDismissible");
 __decorateClass([
   index.attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
@@ -256,7 +286,7 @@ function renderDismissButton(buttonTag) {
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const iconTag = context.tagFor(icon$1.Icon);
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`
 	<${elevationTag} dp="8">
 		<dialog class="${getClasses}"
@@ -273,7 +303,7 @@ const DialogTemplate = (context) => {
 							</slot>
 							${when.when((x) => x.headline, headline())}
 							${when.when((x) => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
+							${when.when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
 						<slot name="body" ${slotted.slotted("bodySlottedContent")}></slot>

package/shared/definition21.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { a as applyMixins } from './apply-mixins.js';
@@ -29,10 +29,13 @@ class Dialog extends FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
+    this.noDismissOnEsc = false;
+    this.noDismissButton = false;
+    this.nonDismissible = false;
     this.modal = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || this.noLightDismiss) {
+      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
         return;
       }
       const rect = this.#dialog.getBoundingClientRect();
@@ -98,6 +101,22 @@ class Dialog extends FoundationElement {
       this.$emit("open", void 0, { bubbles: false });
     }
   }
+  get _showDismissButton() {
+    return this.#isDismissibleVia("dismiss-button");
+  }
+  #isDismissibleVia(method) {
+    if (this.nonDismissible) {
+      return false;
+    }
+    switch (method) {
+      case "escape":
+        return !this.noDismissOnEsc;
+      case "dismiss-button":
+        return !this.noDismissButton;
+      case "light-dismiss":
+        return !this.noLightDismiss;
+    }
+  }
   #handleScrimClick;
   #handleInternalFormSubmit;
   /**
@@ -105,7 +124,9 @@ class Dialog extends FoundationElement {
    */
   _onKeyDown(event) {
     if (handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
-      this._handleCloseRequest();
+      if (this.#isDismissibleVia("escape")) {
+        this._handleCloseRequest();
+      }
       return false;
     }
     return true;
@@ -197,6 +218,15 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+], Dialog.prototype, "noDismissOnEsc");
+__decorateClass([
+  attr({ attribute: "no-dismiss-button", mode: "boolean" })
+], Dialog.prototype, "noDismissButton");
+__decorateClass([
+  attr({ attribute: "non-dismissible", mode: "boolean" })
+], Dialog.prototype, "nonDismissible");
 __decorateClass([
   attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
@@ -271,7 +301,7 @@ const DialogTemplate = (context) => {
 							</slot>
 							${when((x) => x.headline, headline())}
 							${when((x) => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
+							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
 						<slot name="body" ${slotted("bodySlottedContent")}></slot>

package/shared/definition22.cjs

@@ -1,62 +1,43 @@
 'use strict';
 
 const index = require('./index.cjs');
-const aria = require('./aria2.cjs');
+const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-    /**
-     * The divider semantically separates content
-     */
-    separator: "separator",
-    /**
-     * The divider has no semantic value and is for visual presentation only.
-     */
-    presentation: "presentation",
-};
-
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-let Divider$1 = class Divider extends index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The role of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: role
-         */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = aria.Orientation.horizontal;
-    }
-};
-index.__decorate([
-    index.attr
-], Divider$1.prototype, "role", void 0);
-index.__decorate([
-    index.attr
-], Divider$1.prototype, "orientation", void 0);
-
 const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
-class Divider extends Divider$1 {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
+};
+class Divider extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.role = DividerRole.separator;
+    this.orientation = aria.Orientation.horizontal;
+  }
 }
+__decorateClass([
+  index.attr
+], Divider.prototype, "role");
+__decorateClass([
+  index.attr
+], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
 const DividerTemplate = () => index.html` <span

package/shared/definition22.js

@@ -1,60 +1,41 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria2.js';
+import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
+import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-    /**
-     * The divider semantically separates content
-     */
-    separator: "separator",
-    /**
-     * The divider has no semantic value and is for visual presentation only.
-     */
-    presentation: "presentation",
-};
-
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-let Divider$1 = class Divider extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The role of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: role
-         */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-    }
-};
-__decorate([
-    attr
-], Divider$1.prototype, "role", void 0);
-__decorate([
-    attr
-], Divider$1.prototype, "orientation", void 0);
-
 const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
-class Divider extends Divider$1 {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
+};
+class Divider extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.role = DividerRole.separator;
+    this.orientation = Orientation.horizontal;
+  }
 }
+__decorateClass([
+  attr
+], Divider.prototype, "role");
+__decorateClass([
+  attr
+], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
 const DividerTemplate = () => html` <span

package/shared/definition24.cjs

@@ -3,13 +3,167 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const button = require('./button.cjs');
+const formAssociated = require('./form-associated.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.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))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-nonedp);--_elevation-shadow: var(--vvd-shadow-surface-nonedp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
+class _FoundationButton extends index.FoundationElement {
+}
+class FormAssociatedButton extends formAssociated.FormAssociated(_FoundationButton) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+class FoundationButton extends FormAssociatedButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Prevent events to propagate if disabled
+     * @internal
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+      }
+    };
+    /**
+     * Submits the parent form
+     */
+    this.handleSubmission = () => {
+      if (!this.form) {
+        return;
+      }
+      this.attachProxy();
+      this.form.requestSubmit(this.proxy);
+      this.detachProxy();
+    };
+    /**
+     * Resets the parent form
+     */
+    this.handleFormReset = () => {
+      this.form?.reset();
+    };
+  }
+  // @ts-expect-error Function is delcared but not used
+  formactionChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formAction = this.formaction;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formenctypeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formEnctype = this.formenctype;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formmethodChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formMethod = this.formmethod;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formnovalidateChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formNoValidate = this.formnovalidate;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formtargetChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formTarget = this.formtarget;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  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);
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.addEventListener("click", this.handleClick);
+      });
+    }
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.removeEventListener("click", this.handleClick);
+      });
+    }
+  }
+}
+__decorateClass$1([
+  index.attr({ mode: "boolean" })
+], FoundationButton.prototype, "autofocus");
+__decorateClass$1([
+  index.attr({ attribute: "form" })
+], FoundationButton.prototype, "formId");
+__decorateClass$1([
+  index.attr
+], FoundationButton.prototype, "formaction");
+__decorateClass$1([
+  index.attr
+], FoundationButton.prototype, "formenctype");
+__decorateClass$1([
+  index.attr
+], FoundationButton.prototype, "formmethod");
+__decorateClass$1([
+  index.attr({ mode: "boolean" })
+], FoundationButton.prototype, "formnovalidate");
+__decorateClass$1([
+  index.attr
+], FoundationButton.prototype, "formtarget");
+__decorateClass$1([
+  index.attr
+], FoundationButton.prototype, "type");
+class DelegatesARIAButton {
+}
+__decorateClass$1([
+  index.attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded");
+__decorateClass$1([
+  index.attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed");
+applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(FoundationButton, DelegatesARIAButton);
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -19,7 +173,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Fab extends button.Button {
+class Fab extends FoundationButton {
 }
 __decorateClass([
   index.attr