@vonage/vivid 3.0.0-next.21 → 3.0.0-next.24

package/sidenav-item/index.js

@@ -1,4 +1,5 @@
 import '../icon/index.js';
+import '../focus/index.js';
 import { h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { b as AffixIcon } from '../shared/affix.js';
@@ -7,17 +8,20 @@ import { a as applyMixins } from '../shared/apply-mixins.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 import '../shared/icon.js';
 import '../shared/export.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/iterators.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/when.js';
 import '../shared/class-names.js';
+import '../shared/focus.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/object-keys.js';
 import '../shared/anchor.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-on-canvas);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  outline: 0 none;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n:host, .control {\n  outline: 0 none;\n}\n\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:focus {\n  background-color: var(--vvd-color-neutral-20);\n}\n\n.control:focus-visible {\n  box-shadow: inset 0 0 0 1px darkorange;\n}\n\n.icon {\n  font-size: 20px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-on-canvas);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  outline: 0 none;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n:host, .control {\n  outline: 0 none;\n}\n\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:focus {\n  background-color: var(--vvd-color-neutral-20);\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
 styleInject(css_248z);
 
 class SidenavItem extends TextAnchor {}
@@ -32,10 +36,7 @@ const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
 const vividSidenavItem = SidenavItem.compose({
   baseName: 'sidenav-item',
   template: SidenavItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: css_248z
 });
 designSystem.register(vividSidenavItem());
 

package/text/index.js

@@ -4,7 +4,7 @@ import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/export.js';
 import '../shared/object-keys.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/iterators.js';
 
 var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n  display: block;\n  margin: var(--font-face-margin, 0);\n}\n\n.control {\n  color: var(--_connotation-color-primary);\n}\n.control.font-face-body-1 {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-bold {\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-code {\n  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-link {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-body-2 {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-bold {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-code {\n  font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-link {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-button {\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-button-dense {\n  font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-button-enlarge {\n  font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-bold {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-code {\n  font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-link {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-headline-1 {\n  font: 500 condensed 66px / 88px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-headline-2 {\n  font: 500 condensed 52px / 68px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-subtitle-1 {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-subtitle-2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-title-1 {\n  font: 500 condensed 40px / 52px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-title-2 {\n  font: 500 condensed 32px / 44px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n.control.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.control.font-face-headline-1, .control.font-face-headline-2 {\n  --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n  --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n  --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n  --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n  margin: initial;\n}\n\n::slotted(*) {\n  color: inherit;\n  font: inherit;\n}";
 styleInject(css_248z);

package/text-anchor/index.js

@@ -5,13 +5,16 @@ import '../shared/affix.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/export.js';
 import '../shared/object-keys.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/iterators.js';
 import '../shared/icon.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/focus.js';
 import '../shared/class-names.js';
 
 const vividTextAnchor = TextAnchor.compose({

package/text-field/index.js

@@ -5,14 +5,16 @@ import '../shared/web.dom-collections.iterator.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
 import '../shared/focus.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import { F as FormAssociated, f as focusTemplateFactory } from '../shared/focus2.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.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';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
 import '../shared/export.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/iterators.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/object-keys.js';
@@ -277,7 +279,7 @@ __decorate([volatile, __metadata("design:type", Object), __metadata("design:para
 
 applyMixins(TextField, AffixIcon);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: grid;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-on-canvas);\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-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\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-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\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);\n  --_appearance-color-fill: var(--vvd-color-alert-20);\n  --_appearance-color-outline: var(--vvd-color-alert);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-70);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\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-on-canvas);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-50);\n}\n\n.char-count {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--_low-ink-color);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  contain: strict;\n  grid-column: 1/4;\n  padding-inline: 16px;\n  transition: color 0.2s, box-shadow 0.2s, background-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  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: absolute;\n  padding: 1px;\n  border: 0 none;\n  background-color: unset;\n  border-radius: inherit;\n  color: inherit;\n  inset: 0;\n  outline: 0 none;\n  padding-inline-start: 16px;\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.icon {\n  position: relative;\n  z-index: 1;\n  color: var(--_low-ink-color);\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.helper-text {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--_low-ink-color);\n  grid-column: 1/4;\n  margin-inline-start: 16px;\n}\n\n.error-message {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  color: var(--vvd-color-on-canvas);\n  grid-column: 2/4;\n}\n.error-message-icon {\n  color: var(--vvd-color-alert);\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-within) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 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-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-on-canvas);\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-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\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-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\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);\n  --_appearance-color-fill: var(--vvd-color-alert-20);\n  --_appearance-color-outline: var(--vvd-color-alert);\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-70);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  contain: inline-size;\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-on-canvas);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-50);\n}\n\n.char-count {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--_low-ink-color);\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  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\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  outline: 0 none;\n  padding-inline-end: 16px;\n  padding-inline-start: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\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  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--_low-ink-color);\n  grid-column: 1/4;\n  margin-inline-start: 16px;\n}\n\n.error-message {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  color: var(--vvd-color-on-canvas);\n  contain: inline-size;\n  grid-column: 2/4;\n}\n.error-message-icon {\n  color: var(--vvd-color-alert);\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);
 
 let _ = t => t,
@@ -345,7 +347,7 @@ const TextfieldTemplate = context => {
             placeholder="${0}"
             ?readonly="${0}"
             ?required="${0}"
-            size="${0}" 
+            size="${0}"
             autocomplete="${0}"
             name="${0}"
             ?spellcheck="${0}"

package/tooltip/index.js

@@ -8,7 +8,7 @@ import '../button/index.js';
 import '../icon/index.js';
 import '../shared/icon.js';
 import '../shared/export.js';
-import '../shared/object-set-prototype-of.js';
+import '../shared/iterators.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/when.js';
@@ -17,8 +17,10 @@ import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
-import '../shared/focus2.js';
+import '../shared/form-associated.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
 import '../shared/object-keys.js';
 import '../shared/es.object.assign.js';