@vonage/vivid 3.0.0-next.134 → 3.0.0-next.136

package/shared/form-elements.js

@@ -2,7 +2,7 @@ import { _ as __decorate, a as attr, b as __metadata, N as observable, a6 as vol
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 12 Jan 2023 07:26:42 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 17 Jan 2023 16:12:43 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
 let _ = t => t,
   _t,
@@ -10,12 +10,28 @@ let _ = t => t,
   _t3;
 const ElementInternalsKey = 'ElementInternals';
 const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
+class FormElementHelperText {}
+__decorate([attr({
+  attribute: 'helper-text'
+}), __metadata("design:type", String)], FormElementHelperText.prototype, "helperText", void 0);
+class FormElementSuccessText {}
+__decorate([attr({
+  attribute: 'success-text'
+}), __metadata("design:type", String)], FormElementSuccessText.prototype, "successText", void 0);
+class FormElementCharCount {
+  constructor() {
+    this.charCount = false;
+  }
+}
+__decorate([attr({
+  attribute: 'char-count',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], FormElementCharCount.prototype, "charCount", void 0);
 function formElements(constructor) {
   var _Decorated_blurred, _Decorated_handleInvalidEvent;
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);
-      this.charCount = false;
       this.userValid = true;
       _Decorated_blurred.set(this, false);
       _Decorated_handleInvalidEvent.set(this, () => {
@@ -62,16 +78,6 @@ function formElements(constructor) {
   }
   _Decorated_blurred = new WeakMap(), _Decorated_handleInvalidEvent = 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: 'success-text'
-  }), __metadata("design:type", String)], Decorated.prototype, "successText", 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;
@@ -118,4 +124,4 @@ function feedbackMessage({
 	`), x => x[messageProperty]);
 }
 
-export { formElements as f, getFeedbackTemplate as g };
+export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, formElements as f, getFeedbackTemplate as g };

package/shared/listbox.js

@@ -3,6 +3,7 @@ import { i as isListboxOption } from './definition19.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
+import { u as uniqueId } from './strings.js';
 import { i as inRange } from './numbers.js';
 
 /**
@@ -21,14 +22,6 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-let uniqueIdCounter = 0;
-/**
- * Generates a unique ID based on incrementing a counter.
- */
-function uniqueId(prefix = "") {
-    return `${prefix}${uniqueIdCounter++}`;
-}
-
 /**
  * A Listbox Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
@@ -999,4 +992,4 @@ __decorate([
 class Listbox extends ListboxElement {}
 __decorate([attr, __metadata("design:type", String)], Listbox.prototype, "appearance", void 0);
 
-export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b, uniqueId as u };
+export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b };

package/shared/numbers.js

@@ -3,6 +3,15 @@
  * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
  * the maximum will be returned. Otherwise, the value is returned un-changed.
  */
+function wrapInBounds(min, max, value) {
+    if (value < min) {
+        return max;
+    }
+    else if (value > max) {
+        return min;
+    }
+    return value;
+}
 /**
  * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
  * If value is greater than max, max will be returned.
@@ -22,4 +31,4 @@ function inRange(value, min, max = 0) {
     return min <= value && value < max;
 }
 
-export { inRange as i, limit as l };
+export { inRange as i, limit as l, wrapInBounds as w };

package/shared/patterns/focus.d.ts

@@ -1,3 +1,3 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-export declare const focusTemplateFactory: (context: ElementDefinitionContext) => ViewTemplate | null;
+export declare const focusTemplateFactory: (context: ElementDefinitionContext) => ViewTemplate;

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

@@ -1,27 +1,39 @@
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 export interface FormElement {
-    charCount: boolean;
     errorValidationMessage: boolean;
-    helperText: string;
-    successText: string;
     label: string;
     userValid: boolean;
     dirtyValue: boolean;
 }
+export interface FormElementHelperText {
+    helperText?: string;
+}
+export interface FormElementSuccessText {
+    successText?: string;
+}
+export interface FormElementCharCount {
+    charCount: boolean;
+}
+export declare class FormElementHelperText {
+    helperText?: string;
+}
+export declare class FormElementSuccessText {
+    successText?: string;
+}
+export declare class FormElementCharCount {
+    charCount: boolean;
+}
 export declare function formElements<T extends {
     new (...args: any[]): Record<string, any>;
 }>(constructor: T): {
     new (...args: any[]): {
         [x: string]: any;
         label?: string | undefined;
-        helperText?: string | undefined;
-        successText?: string | undefined;
-        charCount: boolean;
         userValid: boolean;
-        "__#7690@#blurred": boolean;
+        "__#8096@#blurred": boolean;
         readonly errorValidationMessage: any;
         connectedCallback(): void;
-        "__#7690@#handleInvalidEvent": () => void;
+        "__#8096@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         validate: () => void;
     };

package/shared/select.options.js

@@ -0,0 +1,10 @@
+/**
+ * Positioning directions for the listbox when a select is open.
+ * @public
+ */
+const SelectPosition = {
+    above: "above",
+    below: "below",
+};
+
+export { SelectPosition as S };

package/shared/strings.js

@@ -0,0 +1,9 @@
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+export { uniqueId as u };

package/shared/text-field.js

@@ -1,3 +1,3 @@
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 12 Jan 2023 07:26:42 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\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(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\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, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).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-200);\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):where(:not(:disabled, .disabled)) {\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):where(:not(: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.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-backdrop: var(--vvd-color-success-50);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-backdrop: var(--vvd-color-alert-50);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\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  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\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\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  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\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: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-inline-start: var(--_text-field-gutter);\n  line-height: 1;\n}\n.icon + .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 17 Jan 2023 16:12:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\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(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\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, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).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-200);\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):where(:not(:disabled, .disabled)) {\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):where(:not(: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.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-backdrop: var(--vvd-color-success-50);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-backdrop: var(--vvd-color-alert-50);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\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  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\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\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  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\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: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-inline-start: var(--_text-field-gutter);\n  line-height: 1;\n}\n.icon + .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 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}";
 
 export { css_248z as c };

package/side-drawer/index.js

@@ -1,4 +1,4 @@
-import { r as registerSideDrawer } from '../shared/definition36.js';
+import { r as registerSideDrawer } from '../shared/definition37.js';
 import '../shared/index.js';
 import '../shared/when.js';
 import '../shared/class-names.js';

package/slider/index.js

@@ -1,4 +1,4 @@
-import { r as registerSlider } from '../shared/definition37.js';
+import { r as registerSlider } from '../shared/definition38.js';
 import '../shared/index.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16: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, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16: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, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 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 Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16: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, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 12 Jan 2023 07:26:42 GMT
+ * Generated on Tue, 17 Jan 2023 16:12:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/switch/index.js

@@ -1,4 +1,4 @@
-import { r as registerSwitch } from '../shared/definition38.js';
+import { r as registerSwitch } from '../shared/definition39.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
@@ -13,5 +13,6 @@ import '../shared/form-associated.js';
 import '../shared/key-codes.js';
 import '../shared/affix.js';
 import '../shared/focus2.js';
+import '../shared/form-elements.js';
 
 registerSwitch();

package/tab/index.js

@@ -0,0 +1,16 @@
+import { r as registerTab } from '../shared/definition40.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
+
+registerTab();

package/tab-panel/index.js

@@ -0,0 +1,4 @@
+import { r as registerTabPanel } from '../shared/definition41.js';
+import '../shared/index.js';
+
+registerTabPanel();

package/tabs/index.js

@@ -0,0 +1,24 @@
+import { r as registerTabs } from '../shared/definition42.js';
+import '../shared/index.js';
+import '../shared/definition40.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
+import '../shared/definition41.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/key-codes.js';
+import '../shared/strings.js';
+import '../shared/numbers.js';
+import '../shared/slotted.js';
+
+registerTabs();

package/text-area/index.js

@@ -1,4 +1,4 @@
-import { r as registerTextArea } from '../shared/definition39.js';
+import { r as registerTextArea } from '../shared/definition43.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/text-field/index.js

@@ -1,4 +1,4 @@
-import { r as registerTextField } from '../shared/definition40.js';
+import { r as registerTextField } from '../shared/definition44.js';
 import '../shared/index.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';

package/tooltip/index.js

@@ -1,4 +1,4 @@
-import { r as registerTooltip } from '../shared/definition41.js';
+import { r as registerTooltip } from '../shared/definition45.js';
 import '../shared/index.js';
 import '../shared/definition18.js';
 import '../shared/definition9.js';