@vonage/vivid 3.0.0-next.52 → 3.0.0-next.55

package/text-field/index.js

@@ -1,13 +1,10 @@
 import '../icon/index.js';
 import '../focus/index.js';
-import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, b as __metadata, v as volatile, c as __classPrivateFieldGet, i as __classPrivateFieldSet, h as html, d as designSystem } from '../shared/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
 import '../shared/focus.js';
-import '../shared/web.dom-collections.iterator.js';
+import { T as TextField$1, f as formElements } from '../shared/form-elements.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import { F as FormAssociated } from '../shared/form-associated.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from '../shared/aria-global.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
 import { w as when } from '../shared/when.js';
 import { r as ref } from '../shared/ref.js';
@@ -17,294 +14,10 @@ import '../shared/export.js';
 import '../shared/iterators.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
+import '../shared/web.dom-collections.iterator.js';
 import '../shared/object-keys.js';
-
-class _TextField extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextField extends FormAssociated(_TextField) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * Text field sub-types
- * @public
- */
-const TextFieldType = {
-    /**
-     * An email TextField
-     */
-    email: "email",
-    /**
-     * A password TextField
-     */
-    password: "password",
-    /**
-     * A telephone TextField
-     */
-    tel: "tel",
-    /**
-     * A text TextField
-     */
-    text: "text",
-    /**
-     * A URL TextField
-     */
-    url: "url",
-};
-
-/**
- * A Text Field Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
- *
- * @slot start - Content which can be provided before the number field input
- * @slot end - Content which can be provided after the number field input
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The text field element
- * @fires change - Fires a custom 'change' event when the value has changed
- *
- * @public
- */
-class TextField$1 extends FormAssociatedTextField {
-    constructor() {
-        super(...arguments);
-        /**
-         * Allows setting a type or mode of text.
-         * @public
-         * @remarks
-         * HTML Attribute: type
-         */
-        this.type = TextFieldType.text;
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-            this.validate();
-        }
-    }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.autofocus = this.autofocus;
-            this.validate();
-        }
-    }
-    placeholderChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
-    }
-    typeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-            this.validate();
-        }
-    }
-    listChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.setAttribute("list", this.list);
-            this.validate();
-        }
-    }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.maxLength = this.maxlength;
-            this.validate();
-        }
-    }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.minLength = this.minlength;
-            this.validate();
-        }
-    }
-    patternChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.pattern = this.pattern;
-            this.validate();
-        }
-    }
-    sizeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.size = this.size;
-        }
-    }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.validate();
-        if (this.autofocus) {
-            DOM.queueUpdate(() => {
-                this.focus();
-            });
-        }
-    }
-    /**
-     * Selects all the text in the text field
-     *
-     * @public
-     */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit("select");
-    }
-    /**
-     * Handles the internal control's `input` event
-     * @internal
-     */
-    handleTextInput() {
-        this.value = this.control.value;
-    }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit("change");
-    }
-}
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], TextField$1.prototype, "readOnly", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextField$1.prototype, "autofocus", void 0);
-__decorate([
-    attr
-], TextField$1.prototype, "placeholder", void 0);
-__decorate([
-    attr
-], TextField$1.prototype, "type", void 0);
-__decorate([
-    attr
-], TextField$1.prototype, "list", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField$1.prototype, "maxlength", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField$1.prototype, "minlength", void 0);
-__decorate([
-    attr
-], TextField$1.prototype, "pattern", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField$1.prototype, "size", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextField$1.prototype, "spellcheck", void 0);
-__decorate([
-    observable
-], TextField$1.prototype, "defaultSlottedNodes", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA textbox role
- *
- * @public
- */
-class DelegatesARIATextbox {
-}
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins(TextField$1, StartEnd, DelegatesARIATextbox);
-
-const ElementInternalsKey = 'ElementInternals';
-
-const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
-
-function formElements(constructor) {
-  var _Decorated_blurred;
-
-  class Decorated extends constructor {
-    constructor(...args) {
-      super(...args);
-      this.charCount = false;
-      this.userValid = true;
-
-      _Decorated_blurred.set(this, false);
-
-      this.validate = () => {
-        if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
-          this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
-        } else {
-          super.validate();
-        }
-
-        this.userValid = !this.userValid;
-
-        if (this.proxy instanceof HTMLElement) {
-          this.userValid = __classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
-        }
-      };
-
-      this.addEventListener('blur', () => {
-        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
-
-        this.validate();
-      });
-      this.addEventListener('focus', () => {
-        __classPrivateFieldSet(this, _Decorated_blurred, false, "f");
-      });
-      this.addEventListener('invalid', () => {
-        if (__classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue) return;
-
-        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
-
-        this.dirtyValue = true;
-        this.validate();
-      });
-    }
-
-    get errorValidationMessage() {
-      return this.userValid ? '' : this.validationMessage;
-    }
-
-  }
-
-  _Decorated_blurred = new WeakMap();
-
-  __decorate([attr, __metadata("design:type", String)], Decorated.prototype, "label", void 0);
-
-  __decorate([attr({
-    attribute: 'helper-text'
-  }), __metadata("design:type", String)], Decorated.prototype, "helperText", void 0);
-
-  __decorate([attr({
-    attribute: 'char-count',
-    mode: 'boolean'
-  }), __metadata("design:type", Object)], Decorated.prototype, "charCount", void 0);
-
-  __decorate([observable, __metadata("design:type", Object)], Decorated.prototype, "userValid", void 0);
-
-  __decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Decorated.prototype, "errorValidationMessage", null);
-
-  return Decorated;
-}
+import '../shared/form-associated.js';
+import '../shared/aria-global.js';
 
 let TextField = class TextField extends TextField$1 {};
 
@@ -319,8 +32,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 Mon, 05 Sep 2022 17:52:00 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: transaprent;\n  --_appearance-color-outline: transaprent;\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: transaprent;\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: transaprent;\n  --_appearance-color-outline: transaprent;\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: transaprent;\n  --_appearance-color-outline: transaprent;\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@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .base {\n    -webkit-user-select: none;\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-font-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-font-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  /* Size */\n  /* Shape */\n}\n.base:not(.density-extended) > .fieldset {\n  block-size: 40px;\n}\n.base.density-extended > .fieldset {\n  block-size: 48px;\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-font-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  inset-inline-start: 16px;\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.helper-text {\n  color: var(--_low-ink-color);\n  font: var(--vvd-font-base-condensed);\n  grid-column: 1/4;\n  margin-inline-start: 16px;\n}\n\n.error-message {\n  display: flex;\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-font-base-condensed);\n  grid-column: 2/4;\n}\n.error-message-icon {\n  color: var(--vvd-color-alert-500);\n  font-size: 16px;\n  grid-column: 1/2;\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}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 09 Sep 2022 10:25:24 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: transaprent;\n  --_appearance-color-outline: transaprent;\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: transaprent;\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: transaprent;\n  --_appearance-color-outline: transaprent;\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: transaprent;\n  --_appearance-color-outline: transaprent;\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@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-font-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-font-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  /* Size */\n  /* Shape */\n}\n.base:not(.density-extended) > .fieldset {\n  block-size: 40px;\n}\n.base.density-extended > .fieldset {\n  block-size: 48px;\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-font-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  inset-inline-start: 16px;\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.helper-text {\n  color: var(--_low-ink-color);\n  font: var(--vvd-font-base-condensed);\n  grid-column: 1/4;\n  margin-inline-start: 16px;\n}\n\n.error-message {\n  display: flex;\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-font-base-condensed);\n  grid-column: 2/4;\n}\n.error-message-icon {\n  color: var(--vvd-color-alert-500);\n  font-size: 16px;\n  grid-column: 1/2;\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,6 +1,5 @@
 import '../shared/index3.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/index2.js';
@@ -24,8 +23,7 @@ import '../shared/focus2.js';
 import '../shared/object-keys.js';
 import '../shared/es.object.assign.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 05 Sep 2022 17:52:00 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-font-base-bold);\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 09 Sep 2022 10:25:24 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-font-base-bold);\n}";
 
 class Tooltip extends FoundationElement {
   constructor() {

package/shared/style-inject.es.js

@@ -1,28 +0,0 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as s };