@vonage/vivid 4.8.0 → 4.9.0

package/shared/definition46.cjs

@@ -36,6 +36,28 @@ class SideDrawer extends index.FoundationElement {
   #open() {
     this.$emit("open", void 0, { bubbles: false });
   }
+  /**
+   * @internal
+   */
+  _onKeydown(event) {
+    if (index$1.handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
 }
 __decorateClass([
   index.attr({
@@ -72,7 +94,7 @@ const sideDrawerTemplate = () => index.html`
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
 		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(x, c) => handleKeydown(x, c.event)}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
 	>
 		<slot></slot>
 	</div>
@@ -85,17 +107,10 @@ const sideDrawerTemplate = () => index.html`
   (x) => x.modal,
   index.html`<div
 			class="${getScrimClasses}"
-			@click="${(x) => x.open = false}"
+			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
-const handleKeydown = (x, event) => {
-  if (index$1.handleEscapeKeyAndStopPropogation(event)) {
-    x.open = false;
-  } else {
-    return true;
-  }
-};
 
 const sideDrawerDefinition = SideDrawer.compose({
   baseName: "side-drawer",

package/shared/definition46.js

@@ -34,6 +34,28 @@ class SideDrawer extends FoundationElement {
   #open() {
     this.$emit("open", void 0, { bubbles: false });
   }
+  /**
+   * @internal
+   */
+  _onKeydown(event) {
+    if (handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
 }
 __decorateClass([
   attr({
@@ -70,7 +92,7 @@ const sideDrawerTemplate = () => html`
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
 		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(x, c) => handleKeydown(x, c.event)}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
 	>
 		<slot></slot>
 	</div>
@@ -83,17 +105,10 @@ const sideDrawerTemplate = () => html`
   (x) => x.modal,
   html`<div
 			class="${getScrimClasses}"
-			@click="${(x) => x.open = false}"
+			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
-const handleKeydown = (x, event) => {
-  if (handleEscapeKeyAndStopPropogation(event)) {
-    x.open = false;
-  } else {
-    return true;
-  }
-};
 
 const sideDrawerDefinition = SideDrawer.compose({
   baseName: "side-drawer",

package/shared/definition9.cjs

@@ -10,24 +10,6 @@ const classNames = require('./class-names.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}";
 
-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;
-};
-class BreadcrumbItem extends breadcrumbItem.BreadcrumbItem {
-  constructor() {
-    super();
-  }
-}
-__decorateClass([
-  index.attr
-], BreadcrumbItem.prototype, "text");
-
 const getClasses = (_) => classNames.classNames("base");
 const BreadcrumbItemTemplate = (context, definition) => {
   const iconTag = context.tagFor(icon.Icon);
@@ -44,7 +26,7 @@ const BreadcrumbItemTemplate = (context, definition) => {
 	</div>`;
 };
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
+const breadcrumbItemDefinition = breadcrumbItem.BreadcrumbItem.compose({
   baseName: "breadcrumb-item",
   template: BreadcrumbItemTemplate,
   styles,

package/shared/definition9.js

@@ -1,6 +1,6 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
+import { h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { B as BreadcrumbItem } from './breadcrumb-item.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
@@ -8,24 +8,6 @@ import { c as classNames } from './class-names.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}";
 
-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;
-};
-class BreadcrumbItem extends BreadcrumbItem$1 {
-  constructor() {
-    super();
-  }
-}
-__decorateClass([
-  attr
-], BreadcrumbItem.prototype, "text");
-
 const getClasses = (_) => classNames("base");
 const BreadcrumbItemTemplate = (context, definition) => {
   const iconTag = context.tagFor(Icon);

package/shared/patterns/anchor.d.ts

@@ -0,0 +1,18 @@
+import { ARIAGlobalStatesAndProperties } from './aria-global';
+export declare class Anchor {
+    download: string;
+    href: string;
+    hreflang: string;
+    ping: string;
+    referrerpolicy: string;
+    rel: string;
+    target: '_self' | '_blank' | '_parent' | '_top';
+    type: string;
+}
+export declare class DelegatesARIALink {
+    ariaExpanded: 'true' | 'false' | string | null;
+}
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+export interface Anchor extends DelegatesARIALink {
+}

package/shared/patterns/anchored.d.ts

@@ -14,10 +14,10 @@ export declare function anchored<T extends {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#6@#updateAnchorEl": () => void;
-        "__#6@#observer"?: MutationObserver | undefined;
-        "__#6@#observeMissingAnchor": (anchorId: string) => void;
-        "__#6@#cleanupObserverIfNeeded": () => void;
+        "__#7@#updateAnchorEl": () => void;
+        "__#7@#observer"?: MutationObserver | undefined;
+        "__#7@#observeMissingAnchor": (anchorId: string) => void;
+        "__#7@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
     };

package/shared/patterns/aria-global.d.ts

@@ -0,0 +1,21 @@
+export declare class ARIAGlobalStatesAndProperties {
+    ariaAtomic: 'true' | 'false' | string | null;
+    ariaBusy: 'true' | 'false' | string | null;
+    ariaControls: string | null;
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+    ariaDescribedby: string | null;
+    ariaDetails: string | null;
+    ariaDisabled: 'true' | 'false' | string | null;
+    ariaErrormessage: string | null;
+    ariaFlowto: string | null;
+    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+    ariaHidden: 'false' | 'true' | string | null;
+    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+    ariaKeyshortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
+    ariaOwns: string | null;
+    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+    ariaRoledescription: string | null;
+}

package/shared/text-anchor.cjs

@@ -1,9 +1,91 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const anchor = require('./anchor.cjs');
 const index = require('./index.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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 = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+index.__decorate([
+    index.attr
+], Anchor.prototype, "download", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "href", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "hreflang", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "ping", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "referrerpolicy", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "rel", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "target", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "type", void 0);
+index.__decorate([
+    index.observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+index.__decorate([
+    index.attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +96,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends anchor.Anchor {
+class TextAnchor extends Anchor {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal

package/shared/text-anchor.js

@@ -1,7 +1,89 @@
 import { A as AffixIcon } from './affix.js';
-import { A as Anchor } from './anchor.js';
-import { a as attr } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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 = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+__decorate([
+    attr
+], Anchor.prototype, "download", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "href", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "target", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "type", void 0);
+__decorate([
+    observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(Anchor, StartEnd, DelegatesARIALink);
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/shared/anchor.cjs

@@ -1,90 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
-
-/**
- * An Anchor Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
- *
- * @slot start - Content which can be provided before the anchor content
- * @slot end - Content which can be provided after the anchor content
- * @slot - The default slot for anchor content
- * @csspart control - The anchor element
- * @csspart content - The element wrapping anchor content
- *
- * @public
- */
-class Anchor extends index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * 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 = () => {
-                    var _a;
-                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
-                };
-            }
-        };
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.handleUnsupportedDelegatesFocus();
-    }
-}
-index.__decorate([
-    index.attr
-], Anchor.prototype, "download", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "href", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "hreflang", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "ping", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "referrerpolicy", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "rel", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "target", void 0);
-index.__decorate([
-    index.attr
-], Anchor.prototype, "type", void 0);
-index.__decorate([
-    index.observable
-], Anchor.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-class DelegatesARIALink {
-}
-index.__decorate([
-    index.attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
-
-exports.Anchor = Anchor;
-exports.DelegatesARIALink = DelegatesARIALink;