@vonage/vivid 3.0.0-next.91 → 3.0.0-next.93

package/shared/index7.js

@@ -0,0 +1,349 @@
+import '../icon/index.js';
+import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from './index.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { S as StartEnd } from './start-end.js';
+import { D as Direction, g as getDirection } from './direction.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
+
+/**
+ * Menu items roles.
+ * @public
+ */
+const MenuItemRole = {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    menuitem: "menuitem",
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    menuitemcheckbox: "menuitemcheckbox",
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    menuitemradio: "menuitemradio",
+};
+/**
+ * @internal
+ */
+const roleForMenuItem = {
+    [MenuItemRole.menuitem]: "menuitem",
+    [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+    [MenuItemRole.menuitemradio]: "menuitemradio",
+};
+
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+class MenuItem$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = MenuItemRole.menuitem;
+        /**
+         * @internal
+         */
+        this.hasSubmenu = false;
+        /**
+         * Track current direction to pass to the anchored region
+         *
+         * @internal
+         */
+        this.currentDirection = Direction.ltr;
+        this.focusSubmenuOnLoad = false;
+        /**
+         * @internal
+         */
+        this.handleMenuItemKeyDown = (e) => {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            switch (e.key) {
+                case keyEnter:
+                case keySpace:
+                    this.invoke();
+                    return false;
+                case keyArrowRight:
+                    //open/focus on submenu
+                    this.expandAndFocus();
+                    return false;
+                case keyArrowLeft:
+                    //close submenu
+                    if (this.expanded) {
+                        this.expanded = false;
+                        this.focus();
+                        return false;
+                    }
+            }
+            return true;
+        };
+        /**
+         * @internal
+         */
+        this.handleMenuItemClick = (e) => {
+            if (e.defaultPrevented || this.disabled) {
+                return false;
+            }
+            this.invoke();
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.submenuLoaded = () => {
+            if (!this.focusSubmenuOnLoad) {
+                return;
+            }
+            this.focusSubmenuOnLoad = false;
+            if (this.hasSubmenu) {
+                this.submenu.focus();
+                this.setAttribute("tabindex", "-1");
+            }
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOver = (e) => {
+            if (this.disabled || !this.hasSubmenu || this.expanded) {
+                return false;
+            }
+            this.expanded = true;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOut = (e) => {
+            if (!this.expanded || this.contains(document.activeElement)) {
+                return false;
+            }
+            this.expanded = false;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.expandAndFocus = () => {
+            if (!this.hasSubmenu) {
+                return;
+            }
+            this.focusSubmenuOnLoad = true;
+            this.expanded = true;
+        };
+        /**
+         * @internal
+         */
+        this.invoke = () => {
+            if (this.disabled) {
+                return;
+            }
+            switch (this.role) {
+                case MenuItemRole.menuitemcheckbox:
+                    this.checked = !this.checked;
+                    break;
+                case MenuItemRole.menuitem:
+                    // update submenu
+                    this.updateSubmenu();
+                    if (this.hasSubmenu) {
+                        this.expandAndFocus();
+                    }
+                    else {
+                        this.$emit("change");
+                    }
+                    break;
+                case MenuItemRole.menuitemradio:
+                    if (!this.checked) {
+                        this.checked = true;
+                    }
+                    break;
+            }
+        };
+        /**
+         * Gets the submenu element if any
+         *
+         * @internal
+         */
+        this.updateSubmenu = () => {
+            this.submenu = this.domChildren().find((element) => {
+                return element.getAttribute("role") === "menu";
+            });
+            this.hasSubmenu = this.submenu === undefined ? false : true;
+        };
+    }
+    expandedChanged(oldValue) {
+        if (this.$fastController.isConnected) {
+            if (this.submenu === undefined) {
+                return;
+            }
+            if (this.expanded === false) {
+                this.submenu.collapseExpandedItem();
+            }
+            else {
+                this.currentDirection = getDirection(this);
+            }
+            this.$emit("expanded-change", this, { bubbles: false });
+        }
+    }
+    checkedChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.$emit("change");
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        DOM.queueUpdate(() => {
+            this.updateSubmenu();
+        });
+        if (!this.startColumnCount) {
+            this.startColumnCount = 1;
+        }
+        this.observer = new MutationObserver(this.updateSubmenu);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.submenu = undefined;
+        if (this.observer !== undefined) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+    }
+    /**
+     * get an array of valid DOM children
+     */
+    domChildren() {
+        return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "expanded", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "startColumnCount", void 0);
+__decorate([
+    attr
+], MenuItem$1.prototype, "role", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "checked", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "submenuRegion", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "hasSubmenu", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "currentDirection", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "submenu", void 0);
+applyMixins(MenuItem$1, StartEnd);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Nov 2022 11:12:43 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\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  block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  padding-inline: 8px;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.focus-indicator {\n  border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n.base:not(.item-checkbox, .item-radio) .icon {\n  color: var(--vvd-color-neutral-600);\n}\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
+
+class MenuItem extends MenuItem$1 {}
+__decorate([attr, __metadata("design:type", String)], MenuItem.prototype, "text", void 0);
+applyMixins(MenuItem, AffixIcon);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5;
+const getClasses = ({
+  disabled,
+  checked,
+  expanded,
+  role
+}) => classNames('base', ['disabled', Boolean(disabled)], ['selected', role !== MenuItemRole.menuitem && Boolean(checked)], ['expanded', Boolean(expanded)], ['item-checkbox', role === MenuItemRole.menuitemcheckbox], ['item-radio', role === MenuItemRole.menuitemradio]);
+const MenuItemTemplate = (context, definition) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+	<template
+		aria-checked="${0}"
+		aria-disabled="${0}"
+		aria-expanded="${0}"
+		@keydown="${0}"
+		@click="${0}"
+		@mouseover="${0}"
+		@mouseout="${0}"
+	>
+		<div class="${0}">
+
+				${0}
+			${0}
+
+			${0}
+
+			${0}
+
+			${0}
+
+			<span class="text">
+				${0}
+			</span>
+		</div>
+	</template>
+	`), x => x.role !== MenuItemRole.menuitem ? x.checked : void 0, x => x.disabled, x => x.expanded, (x, c) => x.handleMenuItemKeyDown(c.event), (x, c) => x.handleMenuItemClick(c.event), (x, c) => x.handleMouseOver(c.event), (x, c) => x.handleMouseOut(c.event), getClasses, when(x => x.hasSubmenu, html(_t2 || (_t2 = _`
+								<div
+										class="expand-collapse-glyph-container"
+								>
+										<span class="expand-collapse">
+												<slot name="expand-collapse-indicator">
+														${0}
+												</slot>
+										</span>
+								</div>
+						`), definition.expandCollapseGlyph || '')), () => focusTemplate, when(x => x.role === MenuItemRole.menuitemcheckbox, html(_t3 || (_t3 = _`${0}`), x => affixIconTemplate(x.checked ? 'checkbox-checked-line' : 'checkbox-unchecked-line'))), when(x => x.role === MenuItemRole.menuitemradio, html(_t4 || (_t4 = _`${0}`), x => affixIconTemplate(x.checked ? 'radio-checked-line' : 'radio-unchecked-line'))), when(x => x.role === MenuItemRole.menuitem && x.icon, html(_t5 || (_t5 = _`${0}`), x => affixIconTemplate(x.icon))), x => x.text);
+};
+
+const vividMenuItem = MenuItem.compose({
+  baseName: 'menu-item',
+  template: MenuItemTemplate,
+  styles: css_248z
+});
+designSystem.register(vividMenuItem());
+
+export { MenuItem$1 as M, MenuItemRole as a, roleForMenuItem as r, vividMenuItem as v };

package/shared/key-codes.js

@@ -86,6 +86,7 @@ const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
 const keySpace = " ";
+const keyTab = "Tab";
 const ArrowKeys = {
     ArrowDown: keyArrowDown,
     ArrowLeft: keyArrowLeft,
@@ -93,4 +94,4 @@ const ArrowKeys = {
     ArrowUp: keyArrowUp,
 };
 
-export { ArrowKeys as A, keySpace as a, keyHome as b, keyEnd as c, keyArrowUp as d, keyArrowDown as e, keyEscape as f, keyArrowLeft as g, keyArrowRight as h, keyEnter as k };
+export { ArrowKeys as A, keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowLeft as h, keyArrowRight as i, keyEnter as k };

package/shared/patterns/form-elements/form-elements.d.ts

@@ -18,7 +18,7 @@ export declare function formElements<T extends {
         successText?: string | undefined;
         charCount: boolean;
         userValid: boolean;
-        "__#6608@#blurred": boolean;
+        "__#6755@#blurred": boolean;
         readonly errorValidationMessage: any;
         validate: () => void;
     };

package/side-drawer/index.js

@@ -44,7 +44,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Nov 2022 11:12:43 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
   _t,

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 .vvd-root {
   font-feature-settings: "kern"; /* turns on kerning */

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ * Generated on Mon, 07 Nov 2022 11:12:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/text-area/index.js

@@ -198,7 +198,7 @@ __decorate([
 ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
 applyMixins(TextArea$1, DelegatesARIATextbox);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-alert-500);\n  --_appearance-color-fill: var(--vvd-color-alert-100);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-success-100);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n  pointer-events: none;\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/3;\n  grid-row: 1;\n  line-height: 20px;\n}\n.base:not(.disabled) .label {\n  color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-400);\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  grid-column: 1/3;\n}\n.success .fieldset {\n  --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n  --focus-stroke-color: var(--vvd-color-alert-500);\n}\n\n.control {\n  width: 100%;\n  padding: 8px 16px;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  min-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Nov 2022 11:12:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-alert-500);\n  --_appearance-color-fill: var(--vvd-color-alert-100);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-success-100);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-underpin: var(--vvd-color-neutral-400);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n  pointer-events: none;\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/3;\n  grid-row: 1;\n  line-height: 20px;\n}\n.base:not(.disabled) .label {\n  color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-400);\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  grid-column: 1/3;\n}\n.success .fieldset {\n  --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n  --focus-stroke-color: var(--vvd-color-alert-500);\n}\n\n.control {\n  width: 100%;\n  padding: 8px 16px;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  min-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
 let TextArea = class TextArea extends TextArea$1 {};
 __decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);

package/text-field/index.js

@@ -28,7 +28,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
 TextField = __decorate([formElements], TextField);
 applyMixins(TextField, AffixIcon);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-alert-500);\n  --_appearance-color-fill: var(--vvd-color-alert-100);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-success-100);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n  color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: var(--_appearance-color-text);\n  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.success .fieldset {\n  --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n  --focus-stroke-color: var(--vvd-color-alert-500);\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.control {\n  width: 100%;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: inherit;\n  font: var(--vvd-typography-base);\n  padding-inline-end: 16px;\n  padding-inline-start: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: 20px;\n  inset-inline-start: 16px;\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Nov 2022 11:12:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-alert-500);\n  --_appearance-color-fill: var(--vvd-color-alert-100);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-success-100);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-underpin: var(--vvd-color-neutral-400);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n  color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: var(--_appearance-color-text);\n  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.success .fieldset {\n  --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n  --focus-stroke-color: var(--vvd-color-alert-500);\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.control {\n  width: 100%;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: inherit;\n  font: var(--vvd-typography-base);\n  padding-inline-end: 16px;\n  padding-inline-start: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: 20px;\n  inset-inline-start: 16px;\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
 let _ = t => t,
   _t,

package/tooltip/index.js

@@ -1,4 +1,4 @@
-import '../shared/index5.js';
+import '../shared/index6.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
@@ -25,7 +25,7 @@ import '../shared/focus2.js';
 import '../shared/es.object.assign.js';
 import '../shared/object-keys.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Nov 2022 11:12:43 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
 
 class Tooltip extends FoundationElement {
   constructor() {