@vonage/vivid 3.0.0-next.57 → 3.0.0-next.59

package/shared/index3.js

@@ -4,7 +4,7 @@ import { F as FoundationElement, c as __classPrivateFieldGet, i as __classPrivat
 import { s as speciesConstructor$1, f as functionApply } from './icon.js';
 import { o as objectCreate } from './web.dom-collections.iterator.js';
 import './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 './export.js';
+import { j as anObject$3, e as fails$5, g as global$3, x as functionCall, f as functionUncurryThis, R as shared$1, z as internalState, _ as _export, w as wellKnownSymbol$2, v as defineBuiltIn$1, L as createNonEnumerableProperty$1, y as isObject$1, c as classofRaw, C as requireObjectCoercible$2, S as toIntegerOrInfinity$1, T as toPropertyKey$1, o as objectDefineProperty, K as createPropertyDescriptor$1, B as lengthOfArrayLike$1, U as toAbsoluteIndex$1, i as isCallable$1, k as isNullOrUndefined$1, V as toLength$1, A as getMethod$1 } from './export.js';
 import { t as toString$3 } from './to-string.js';
 import { h as keyEscape } from './form-associated.js';
 import { w as when } from './when.js';
@@ -24,6 +24,7 @@ var regexpFlags$1 = function () {
   if (that.multiline) result += 'm';
   if (that.dotAll) result += 's';
   if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
   if (that.sticky) result += 'y';
   return result;
 };
@@ -177,7 +178,7 @@ if (PATCH) {
     }
     if (NPCG_INCLUDED && match && match.length > 1) {
       // Fix browsers whose `exec` methods don't consistently return `undefined`
-      // for NPCG, like IE8. NOTE: This doesn' work for /(.?)?/
+      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
       call$2(nativeReplace, match[0], reCopy, function () {
         for (i = 1; i < arguments.length - 2; i++) {
           if (arguments[i] === undefined) match[i] = undefined;
@@ -392,8 +393,9 @@ var apply = functionApply;
 var call = functionCall;
 var uncurryThis = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var isRegExp = isRegexp;
 var anObject = anObject$3;
+var isNullOrUndefined = isNullOrUndefined$1;
+var isRegExp = isRegexp;
 var requireObjectCoercible = requireObjectCoercible$2;
 var speciesConstructor = speciesConstructor$1;
 var advanceStringIndex = advanceStringIndex$1;
@@ -485,7 +487,7 @@ fixRegExpWellKnownSymbolLogic('split', function (SPLIT, nativeSplit, maybeCallNa
     // https://tc39.es/ecma262/#sec-string.prototype.split
     function split(separator, limit) {
       var O = requireObjectCoercible(this);
-      var splitter = separator == undefined ? undefined : getMethod(separator, SPLIT);
+      var splitter = isNullOrUndefined(separator) ? undefined : getMethod(separator, SPLIT);
       return splitter
         ? call(splitter, separator, O, limit)
         : call(internalSplit, toString(O), separator, limit);
@@ -666,17 +668,9 @@ const computePosition$1 = async (reference, floating, config) => {
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
   let middlewareData = {};
-  let _debug_loop_count_ = 0;
+  let resetCount = 0;
 
   for (let i = 0; i < middleware.length; i++) {
-    {
-      _debug_loop_count_++;
-
-      if (_debug_loop_count_ > 100) {
-        throw new Error(['Floating UI: The middleware lifecycle appears to be', 'running in an infinite loop. This is usually caused by a `reset`', 'continually being returned without a break condition.'].join(' '));
-      }
-    }
-
     const {
       name,
       fn
@@ -708,7 +702,15 @@ const computePosition$1 = async (reference, floating, config) => {
       }
     };
 
-    if (reset) {
+    {
+      if (resetCount > 50) {
+        console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
+      }
+    }
+
+    if (reset && resetCount <= 50) {
+      resetCount++;
+
       if (typeof reset === 'object') {
         if (reset.placement) {
           statefulPlacement = reset.placement;
@@ -1862,7 +1864,14 @@ function autoUpdate(reference, floating, update, options) {
   let observer = null;
 
   if (elementResize) {
-    observer = new ResizeObserver(update);
+    let initialUpdate = true;
+    observer = new ResizeObserver(() => {
+      if (!initialUpdate) {
+        update();
+      }
+
+      initialUpdate = false;
+    });
     isElement(reference) && !animationFrame && observer.observe(reference);
     observer.observe(floating);
   }
@@ -1885,10 +1894,7 @@ function autoUpdate(reference, floating, update, options) {
     frameId = requestAnimationFrame(frameLoop);
   }
 
-  if (!elementResize) {
-    update();
-  }
-
+  update();
   return () => {
     var _observer;
 

package/shared/iterators.js

@@ -1,4 +1,4 @@
-import { i as isCallable$1, f as functionUncurryThis, j as anObject$1, o as objectDefineProperty, w as wellKnownSymbol$1, p as hasOwnProperty_1, a as getBuiltIn$1 } from './export.js';
+import { i as isCallable$1, f as functionUncurryThis, j as anObject$1, o as objectDefineProperty, w as wellKnownSymbol$1, q as hasOwnProperty_1, a as getBuiltIn$1 } from './export.js';
 
 var isCallable = isCallable$1;
 

package/shared/object-keys.js

@@ -1,4 +1,4 @@
-import { L as objectKeysInternal, H as enumBugKeys$1 } from './export.js';
+import { M as objectKeysInternal, I as enumBugKeys$1 } from './export.js';
 
 var internalObjectKeys = objectKeysInternal;
 var enumBugKeys = enumBugKeys$1;

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

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

package/shared/web.dom-collections.iterator.js

@@ -1,4 +1,4 @@
-import { d as descriptors, D as v8PrototypeDefineBug, o as objectDefineProperty, j as anObject$2, E as toIndexedObject$2, F as hiddenKeys$1, G as sharedKey$2, H as enumBugKeys$1, n as documentCreateElement$2, w as wellKnownSymbol$4, e as fails$2, p as hasOwnProperty_1, i as isCallable$3, I as toObject$1, u as defineBuiltIn$2, J as createPropertyDescriptor$1, _ as _export, K as createNonEnumerableProperty$2, v as functionCall, C as functionName, y as internalState, g as global$1 } from './export.js';
+import { d as descriptors, E as v8PrototypeDefineBug, o as objectDefineProperty, j as anObject$2, F as toIndexedObject$2, G as hiddenKeys$1, H as sharedKey$2, I as enumBugKeys$1, p as documentCreateElement$2, w as wellKnownSymbol$4, e as fails$2, q as hasOwnProperty_1, i as isCallable$3, J as toObject$1, y as isObject$1, v as defineBuiltIn$2, K as createPropertyDescriptor$1, _ as _export, L as createNonEnumerableProperty$2, x as functionCall, D as functionName, z as internalState, g as global$1 } from './export.js';
 import { o as objectKeys$1 } from './object-keys.js';
 import { h as html$1, s as setToStringTag$2, i as iterators, o as objectSetPrototypeOf } from './iterators.js';
 
@@ -164,6 +164,7 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : f
 
 var fails = fails$2;
 var isCallable$1 = isCallable$3;
+var isObject = isObject$1;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$1 = defineBuiltIn$2;
 var wellKnownSymbol$2 = wellKnownSymbol$4;
@@ -186,7 +187,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = IteratorPrototype$2 == undefined || fails(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
@@ -215,7 +216,7 @@ var Iterators$2 = iterators;
 
 var returnThis$1 = function () { return this; };
 
-var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next, ENUMERABLE_NEXT) {
+var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUMERABLE_NEXT) {
   var TO_STRING_TAG = NAME + ' Iterator';
   IteratorConstructor.prototype = create(IteratorPrototype$1, { next: createPropertyDescriptor(+!ENUMERABLE_NEXT, next) });
   setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
@@ -227,7 +228,7 @@ var $ = _export;
 var call = functionCall;
 var FunctionName = functionName;
 var isCallable = isCallable$3;
-var createIteratorConstructor = createIteratorConstructor$1;
+var createIteratorConstructor = iteratorCreateConstructor;
 var getPrototypeOf = objectGetPrototypeOf;
 var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$2;
@@ -248,7 +249,7 @@ var ENTRIES = 'entries';
 
 var returnThis = function () { return this; };
 
-var defineIterator$1 = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) {
+var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) {
   createIteratorConstructor(IteratorConstructor, NAME, next);
 
   var getIterationMethod = function (KIND) {
@@ -320,12 +321,19 @@ var defineIterator$1 = function (Iterable, NAME, IteratorConstructor, next, DEFA
   return methods;
 };
 
+// `CreateIterResultObject` abstract operation
+// https://tc39.es/ecma262/#sec-createiterresultobject
+var createIterResultObject$1 = function (value, done) {
+  return { value: value, done: done };
+};
+
 var toIndexedObject = toIndexedObject$2;
 var addToUnscopables = addToUnscopables$1;
 var Iterators = iterators;
 var InternalStateModule = internalState;
 var defineProperty = objectDefineProperty.f;
-var defineIterator = defineIterator$1;
+var defineIterator = iteratorDefine;
+var createIterResultObject = createIterResultObject$1;
 var DESCRIPTORS = descriptors;
 
 var ARRAY_ITERATOR = 'Array Iterator';
@@ -358,11 +366,11 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
   var index = state.index++;
   if (!target || index >= target.length) {
     state.target = undefined;
-    return { value: undefined, done: true };
+    return createIterResultObject(undefined, true);
   }
-  if (kind == 'keys') return { value: index, done: false };
-  if (kind == 'values') return { value: target[index], done: false };
-  return { value: [index, target[index]], done: false };
+  if (kind == 'keys') return createIterResultObject(index, false);
+  if (kind == 'values') return createIterResultObject(target[index], false);
+  return createIterResultObject([index, target[index]], false);
 }, 'values');
 
 // argumentsList[@@iterator] is %ArrayProto_values%

package/side-drawer/index.js

@@ -33,18 +33,17 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 10 Sep 2022 18:25:53 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.alternate {\n  background-color: var(--vvd-color-canvas);\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 Thu, 15 Sep 2022 08:34:53 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,
     _t2;
 
 const getClasses = ({
-  alternate,
   modal,
   open,
   trailing
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['trailing', trailing]);
+}) => classNames('control', ['modal', modal], ['open', open], ['trailing', trailing]);
 
 const getScrimClasses = ({
   open

package/styles/core/all.css

@@ -0,0 +1,75 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
+ */
+.vvd-root {
+  color-scheme: var(--vvd-color-scheme);
+  background-color: var(--vvd-color-canvas);
+  color: var(--vvd-color-canvas-text);
+}
+
+.vvd-root {
+  font-feature-settings: "kern"; /* turns on kerning */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  font: var(--vvd-font-base);
+}
+.vvd-root p {
+  font: var(--vvd-font-base);
+  margin-block: 16px;
+}
+.vvd-root b, .vvd-root strong {
+  font: var(--vvd-font-base-bold);
+}
+.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
+  font: var(--vvd-font-base-code);
+}
+.vvd-root .headline {
+  font: var(--vvd-font-headline);
+  margin-block: 40px;
+}
+.vvd-root .subtitle {
+  font: var(--vvd-font-subtitle);
+  margin-block: 40px;
+}
+.vvd-root h1, .vvd-root .heading1 {
+  font: var(--vvd-font-heading1);
+  margin-block: 32px;
+}
+.vvd-root h2, .vvd-root .heading2 {
+  font: var(--vvd-font-heading2);
+  margin-block: 32px;
+}
+.vvd-root h3, .vvd-root .heading3 {
+  font: var(--vvd-font-heading3);
+  margin-block: 24px;
+}
+.vvd-root h4, .vvd-root .heading4 {
+  font: var(--vvd-font-heading4);
+  margin-block: 24px;
+}
+.vvd-root small, .vvd-root figcaption {
+  font: var(--vvd-font-base-condensed);
+}
+.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
+  font: var(--vvd-font-base-condensed-bold);
+}
+.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
+  font: var(--vvd-font-base-condensed-code);
+}
+.vvd-root sub,
+.vvd-root sup {
+  font: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.vvd-root sub {
+  bottom: -0.25em;
+}
+.vvd-root sup {
+  top: -0.5em;
+}
+
+/*# sourceMappingURL=all.css.map */

package/styles/core/theme.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
+ */
+.vvd-root {
+  color-scheme: var(--vvd-color-scheme);
+  background-color: var(--vvd-color-canvas);
+  color: var(--vvd-color-canvas-text);
+}
+
+/*# sourceMappingURL=theme.css.map */

package/styles/core/typography.css

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
+ */
+.vvd-root {
+  font-feature-settings: "kern"; /* turns on kerning */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  font: var(--vvd-font-base);
+}
+.vvd-root p {
+  font: var(--vvd-font-base);
+  margin-block: 16px;
+}
+.vvd-root b, .vvd-root strong {
+  font: var(--vvd-font-base-bold);
+}
+.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
+  font: var(--vvd-font-base-code);
+}
+.vvd-root .headline {
+  font: var(--vvd-font-headline);
+  margin-block: 40px;
+}
+.vvd-root .subtitle {
+  font: var(--vvd-font-subtitle);
+  margin-block: 40px;
+}
+.vvd-root h1, .vvd-root .heading1 {
+  font: var(--vvd-font-heading1);
+  margin-block: 32px;
+}
+.vvd-root h2, .vvd-root .heading2 {
+  font: var(--vvd-font-heading2);
+  margin-block: 32px;
+}
+.vvd-root h3, .vvd-root .heading3 {
+  font: var(--vvd-font-heading3);
+  margin-block: 24px;
+}
+.vvd-root h4, .vvd-root .heading4 {
+  font: var(--vvd-font-heading4);
+  margin-block: 24px;
+}
+.vvd-root small, .vvd-root figcaption {
+  font: var(--vvd-font-base-condensed);
+}
+.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
+  font: var(--vvd-font-base-condensed-bold);
+}
+.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
+  font: var(--vvd-font-base-condensed-code);
+}
+.vvd-root sub,
+.vvd-root sup {
+  font: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.vvd-root sub {
+  bottom: -0.25em;
+}
+.vvd-root sup {
+  top: -0.5em;
+}
+
+/*# sourceMappingURL=typography.css.map */

package/styles/{themes/dark.css → tokens/theme-dark.css}

@@ -1,12 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Sat, 10 Sep 2022 18:25:53 GMT
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Sat, 10 Sep 2022 18:25:53 GMT
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
  */
-:root, .vvd-theme-main, ::part(vvd-theme-main) {
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
+ */
+.vvd-root, ::part(vvd-root) {
+  --vvd-color-scheme: dark;
   --vvd-color-canvas: #000000;
   --vvd-color-canvas-text: #ffffff;
   --vvd-color-neutral-50: #1a1a1a;
@@ -94,14 +99,25 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
-}
-@supports (color-scheme: dark) {
-  :root, .vvd-theme-main, ::part(vvd-theme-main) {
-    color-scheme: dark;
-  }
+  --vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
+  --vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
+  --vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
+  --vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
+  --vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
+  --vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
+  --vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
+  --vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
+  --vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
+  --vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
+  --vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
+  --vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
+  --vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
+  --vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
+  --vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
 }
 
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-color-scheme: light;
   --vvd-color-canvas: #ffffff;
   --vvd-color-canvas-text: #000000;
   --vvd-color-neutral-50: #F2F2F2;
@@ -190,10 +206,5 @@
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
 }
-@supports (color-scheme: light) {
-  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-    color-scheme: light;
-  }
-}
 
-/*# sourceMappingURL=dark.css.map */
+/*# sourceMappingURL=theme-dark.css.map */

package/styles/{themes/light.css → tokens/theme-light.css}

@@ -1,12 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Sat, 10 Sep 2022 18:25:53 GMT
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
  */
 /**
  * Do not edit directly
- * Generated on Sat, 10 Sep 2022 18:25:53 GMT
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
  */
-:root, .vvd-theme-main, ::part(vvd-theme-main) {
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 08:34:53 GMT
+ */
+.vvd-root, ::part(vvd-root) {
+  --vvd-color-scheme: light;
   --vvd-color-canvas: #ffffff;
   --vvd-color-canvas-text: #000000;
   --vvd-color-neutral-50: #F2F2F2;
@@ -94,14 +99,25 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
-}
-@supports (color-scheme: light) {
-  :root, .vvd-theme-main, ::part(vvd-theme-main) {
-    color-scheme: light;
-  }
+  --vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
+  --vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
+  --vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
+  --vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
+  --vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
+  --vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
+  --vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
+  --vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
+  --vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
+  --vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
+  --vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
+  --vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
+  --vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
+  --vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
+  --vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
 }
 
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-color-scheme: dark;
   --vvd-color-canvas: #000000;
   --vvd-color-canvas-text: #ffffff;
   --vvd-color-neutral-50: #1a1a1a;
@@ -190,10 +206,5 @@
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
 }
-@supports (color-scheme: dark) {
-  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-    color-scheme: dark;
-  }
-}
 
-/*# sourceMappingURL=light.css.map */
+/*# sourceMappingURL=theme-light.css.map */

package/text-area/index.js

@@ -149,6 +149,10 @@ class TextArea$1 extends FormAssociatedTextArea {
     handleChange() {
         this.$emit("change");
     }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
 }
 __decorate([
     attr({ mode: "boolean" })
@@ -191,7 +195,7 @@ __decorate([
 ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
 applyMixins(TextArea$1, DelegatesARIATextbox);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 10 Sep 2022 18:25:53 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  pointer-events: none;\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-font-base);\n  grid-column: 1/4;\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/4;\n}\n\n.control {\n  width: 100%;\n  padding: 4px 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-font-base);\n  min-block-size: 40px;\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.helper-text {\n  color: var(--_low-ink-color);\n  font: var(--vvd-font-base-condensed);\n  grid-column: 1/4;\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 08:34:53 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  pointer-events: none;\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-font-base);\n  grid-column: 1/4;\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/4;\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-font-base);\n  min-block-size: 40px;\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.helper-text {\n  color: var(--_low-ink-color);\n  font: var(--vvd-font-base-condensed);\n  grid-column: 1/4;\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 TextArea = class TextArea extends TextArea$1 {};
 

package/text-field/index.js

@@ -32,7 +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 Sat, 10 Sep 2022 18:25:53 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  font-size: 20px;\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 08:34:53 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  font-size: 20px;\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

@@ -23,7 +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 Sat, 10 Sep 2022 18:25:53 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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 08:34:53 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() {