@vonage/vivid 3.0.0-next.30 → 3.0.0-next.31

package/action-group/index.js

@@ -6,7 +6,7 @@ import '../shared/export.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-var css_248z = ":host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
+var css_248z = ":host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}\n\n::slotted([vwc-divider]) {\n  align-self: stretch;\n  margin-block: 4px;\n}";
 styleInject(css_248z);
 
 class ActionGroup extends FoundationElement {

package/divider/index.js

@@ -0,0 +1,88 @@
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { c as classNames } from '../shared/class-names.js';
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+/**
+ * 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
+ */
+class Divider$1 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);
+
+var css_248z = ":host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-30);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+styleInject(css_248z);
+
+class Divider extends Divider$1 {}
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
+
+const vividDivider = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividDivider());
+
+export { vividDivider };

package/lib/divider/divider.d.ts

@@ -0,0 +1,3 @@
+import { Divider as FoundationDivider } from '@microsoft/fast-foundation';
+export declare class Divider extends FoundationDivider {
+}

package/lib/divider/divider.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Divider } from './divider';
+export declare const DividerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Divider>;

package/lib/divider/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.30",
+  "version": "3.0.0-next.31",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -30,7 +30,8 @@
     "./text": "./text",
     "./text-field": "./text-field",
     "./tooltip": "./tooltip",
-    "./checkbox": "./checkbox"
+    "./checkbox": "./checkbox",
+    "./divider": "./divider"
   },
   "typings": "./index.d.ts",
   "dependencies": {

package/popup/index.js

@@ -6,6 +6,7 @@ import { o as objectCreate } from '../shared/web.dom-collections.iterator.js';
 import '../shared/es.object.assign.js';
 import { j as anObject$3, e as fails$5, g as global$3, v as functionCall, f as functionUncurryThis, Q as shared$1, y as internalState, _ as _export, w as wellKnownSymbol$2, u as defineBuiltIn$1, K as createNonEnumerableProperty$1, x as isObject$1, c as classofRaw, B as requireObjectCoercible$2, R as toIntegerOrInfinity$1, S as toPropertyKey$1, o as objectDefineProperty, J as createPropertyDescriptor$1, A as lengthOfArrayLike$1, T as toAbsoluteIndex$1, i as isCallable$1, U as toLength$1, z as getMethod$1 } from '../shared/export.js';
 import { t as toString$3 } from '../shared/to-string.js';
+import { a as keyEscape } from '../shared/form-associated.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { w as when } from '../shared/when.js';
 import { r as ref } from '../shared/aria-global.js';
@@ -18,7 +19,6 @@ import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
-import '../shared/form-associated.js';
 import '../shared/focus2.js';
 import '../shared/object-keys.js';
 
@@ -1927,7 +1927,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
-var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById;
+var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById, _Popup_handleKeydown;
 class Popup extends FoundationElement {
   constructor() {
     super();
@@ -1946,14 +1946,15 @@ class Popup extends FoundationElement {
   }
 
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
 
     super.disconnectedCallback();
-    (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+    (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', e => __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_handleKeydown).call(this, e));
+    (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a;
+    var _a, _b;
 
     super.attributeChangedCallback(name, oldValue, newValue);
 
@@ -1962,6 +1963,7 @@ class Popup extends FoundationElement {
         {
           __classPrivateFieldSet(this, _Popup_anchorEl, __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_getAnchorById).call(this), "f");
 
+          (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', e => __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_handleKeydown).call(this, e));
           break;
         }
     }
@@ -1969,7 +1971,7 @@ class Popup extends FoundationElement {
     if (__classPrivateFieldGet(this, _Popup_anchorEl, "f") && this.popupEl) {
       __classPrivateFieldSet(this, _Popup_cleanup, autoUpdate(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, () => this.updatePosition()), "f");
     } else {
-      (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+      (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
     }
   }
 
@@ -2046,6 +2048,12 @@ _Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_instance
   });
 }, _Popup_getAnchorById = function _Popup_getAnchorById() {
   return document.getElementById(this.anchor);
+}, _Popup_handleKeydown = function _Popup_handleKeydown({
+  key
+}) {
+  if (key === keyEscape) {
+    this.open = false;
+  }
 };
 
 __decorate([attr({

package/shared/form-associated.js

@@ -77,6 +77,7 @@ var KeyCodes;
     KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
 })(KeyCodes || (KeyCodes = {}));
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keySpace = " ";
 
 const proxySlotName = "form-associated-proxy";
@@ -544,4 +545,4 @@ function CheckableFormAssociated(BaseCtor) {
     return D;
 }
 
-export { CheckableFormAssociated as C, FormAssociated as F, keySpace as k };
+export { CheckableFormAssociated as C, FormAssociated as F, keyEscape as a, keySpace as k };

package/tooltip/index.js

@@ -50,9 +50,9 @@ let _2 = t => t,
 const getClasses = _ => classNames('control');
 
 const TooltipTemplate = () => html(_t || (_t = _2`
-<vwc-popup class="${0}" arrow alternate="true" 
+<vwc-popup class="${0}" arrow alternate
 corner=${0} open=${0} anchor=${0}
-  exportparts="vvd-theme-alternate">
+  exportparts="vvd-theme-alternate" role="tooltip">
   <div class="tooltip">
     <header part="vvd-theme-alternate" class="tooltip-header">
       <div class="tooltip-text">${0}</div>