@vonage/vivid 3.9.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/accordion/index.js +1 -0
  2. package/alert/index.js +28 -0
  3. package/avatar/index.js +1 -1
  4. package/badge/index.js +1 -1
  5. package/banner/index.js +3 -3
  6. package/breadcrumb/index.js +2 -1
  7. package/breadcrumb-item/index.js +1 -1
  8. package/button/index.js +2 -2
  9. package/calendar/index.js +1 -1
  10. package/calendar-event/index.js +1 -1
  11. package/card/index.js +3 -2
  12. package/checkbox/index.js +1 -1
  13. package/combobox/index.js +7 -6
  14. package/custom-elements.json +589 -377
  15. package/data-grid/index.js +3 -2
  16. package/dialog/index.js +5 -4
  17. package/divider/index.js +1 -1
  18. package/elevation/index.js +1 -1
  19. package/fab/index.js +1 -1
  20. package/header/index.js +2 -2
  21. package/index.js +54 -52
  22. package/layout/index.js +1 -1
  23. package/lib/alert/alert.d.ts +24 -0
  24. package/lib/alert/alert.template.d.ts +4 -0
  25. package/lib/alert/definition.d.ts +2 -0
  26. package/lib/alert/index.d.ts +1 -0
  27. package/lib/components.d.ts +1 -0
  28. package/lib/enums.d.ts +10 -9
  29. package/lib/layout/layout.d.ts +2 -0
  30. package/lib/pagination/definition.d.ts +3 -0
  31. package/lib/pagination/index.d.ts +1 -0
  32. package/lib/pagination/pagination.d.ts +18 -0
  33. package/lib/pagination/pagination.template.d.ts +4 -0
  34. package/lib/popup/popup.d.ts +2 -2
  35. package/lib/text-area/text-area.d.ts +2 -1
  36. package/lib/tooltip/tooltip.d.ts +10 -4
  37. package/listbox/index.js +3 -2
  38. package/menu/index.js +7 -6
  39. package/menu-item/index.js +1 -1
  40. package/nav/index.js +1 -1
  41. package/nav-disclosure/index.js +1 -1
  42. package/nav-item/index.js +1 -1
  43. package/note/index.js +1 -1
  44. package/number-field/index.js +4 -4
  45. package/option/index.js +1 -1
  46. package/package.json +1 -1
  47. package/pagination/index.js +329 -0
  48. package/popup/index.js +4 -4
  49. package/progress/index.js +1 -1
  50. package/progress-ring/index.js +1 -1
  51. package/radio/index.js +1 -1
  52. package/radio-group/index.js +3 -2
  53. package/select/index.js +7 -6
  54. package/shared/children.js +1 -1
  55. package/shared/definition.js +3 -2
  56. package/shared/definition10.js +46 -63
  57. package/shared/definition11.js +38 -92
  58. package/shared/definition12.js +96 -31
  59. package/shared/definition13.js +85 -757
  60. package/shared/definition14.js +32 -95
  61. package/shared/definition15.js +758 -100
  62. package/shared/definition16.js +103 -24
  63. package/shared/definition17.js +96 -154
  64. package/shared/definition18.js +108 -663
  65. package/shared/definition19.js +667 -1532
  66. package/shared/definition2.js +1 -1
  67. package/shared/definition20.js +1532 -223
  68. package/shared/definition21.js +183 -964
  69. package/shared/definition22.js +1034 -218
  70. package/shared/definition23.js +226 -67
  71. package/shared/definition24.js +68 -77
  72. package/shared/definition25.js +76 -47
  73. package/shared/definition26.js +46 -32
  74. package/shared/definition27.js +39 -49
  75. package/shared/definition28.js +48 -344
  76. package/shared/definition29.js +273 -282
  77. package/shared/definition30.js +356 -14
  78. package/shared/definition31.js +13 -67
  79. package/shared/definition32.js +65 -21
  80. package/shared/definition33.js +21 -39
  81. package/shared/definition34.js +31 -432
  82. package/shared/definition35.js +432 -76
  83. package/shared/definition36.js +82 -33
  84. package/shared/definition37.js +31 -422
  85. package/shared/definition38.js +358 -564
  86. package/shared/definition39.js +628 -75
  87. package/shared/definition4.js +1 -1
  88. package/shared/definition40.js +70 -573
  89. package/shared/definition41.js +538 -81
  90. package/shared/definition42.js +127 -47
  91. package/shared/definition43.js +51 -16
  92. package/shared/definition44.js +17 -425
  93. package/shared/definition45.js +421 -103
  94. package/shared/definition46.js +114 -19
  95. package/shared/definition47.js +19 -269
  96. package/shared/definition48.js +244 -86
  97. package/shared/definition49.js +110 -70
  98. package/shared/definition5.js +1 -1
  99. package/shared/definition50.js +88 -67
  100. package/shared/definition51.js +69 -294
  101. package/shared/definition52.js +305 -0
  102. package/shared/definition6.js +142 -45
  103. package/shared/definition7.js +97 -24
  104. package/shared/definition8.js +22 -103
  105. package/shared/definition9.js +62 -102
  106. package/shared/enums.js +10 -9
  107. package/shared/es.object.assign.js +1 -1
  108. package/shared/form-associated.js +1 -1
  109. package/shared/form-elements.js +2 -2
  110. package/shared/index.js +1 -1
  111. package/shared/listbox.js +2 -2
  112. package/shared/node-observation.js +74 -0
  113. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  114. package/shared/repeat.js +1 -1
  115. package/shared/slotted.js +3 -73
  116. package/shared/text-field.js +1 -1
  117. package/shared/text-field2.js +1 -1
  118. package/side-drawer/index.js +1 -1
  119. package/slider/index.js +1 -1
  120. package/styles/core/all.css +1 -1
  121. package/styles/core/theme.css +1 -1
  122. package/styles/core/typography.css +1 -1
  123. package/styles/tokens/theme-dark.css +4 -4
  124. package/styles/tokens/theme-light.css +4 -4
  125. package/switch/index.js +1 -1
  126. package/tab/index.js +1 -1
  127. package/tab-panel/index.js +1 -1
  128. package/tabs/index.js +4 -3
  129. package/tag/index.js +1 -1
  130. package/tag-group/index.js +1 -1
  131. package/text-area/index.js +1 -1
  132. package/text-field/index.js +1 -1
  133. package/tooltip/index.js +5 -5
  134. package/tree-item/index.js +2 -1
  135. package/tree-view/index.js +2 -1
  136. package/vivid.api.json +128 -16
@@ -0,0 +1,74 @@
1
+ import { O as Observable, e as emptyArray } from './index.js';
2
+
3
+ /**
4
+ * Creates a function that can be used to filter a Node array, selecting only elements.
5
+ * @param selector - An optional selector to restrict the filter to.
6
+ * @public
7
+ */
8
+ function elements(selector) {
9
+ if (selector) {
10
+ return function (value, index, array) {
11
+ return value.nodeType === 1 && value.matches(selector);
12
+ };
13
+ }
14
+ return function (value, index, array) {
15
+ return value.nodeType === 1;
16
+ };
17
+ }
18
+ /**
19
+ * A base class for node observation.
20
+ * @internal
21
+ */
22
+ class NodeObservationBehavior {
23
+ /**
24
+ * Creates an instance of NodeObservationBehavior.
25
+ * @param target - The target to assign the nodes property on.
26
+ * @param options - The options to use in configuring node observation.
27
+ */
28
+ constructor(target, options) {
29
+ this.target = target;
30
+ this.options = options;
31
+ this.source = null;
32
+ }
33
+ /**
34
+ * Bind this behavior to the source.
35
+ * @param source - The source to bind to.
36
+ * @param context - The execution context that the binding is operating within.
37
+ */
38
+ bind(source) {
39
+ const name = this.options.property;
40
+ this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
41
+ this.source = source;
42
+ this.updateTarget(this.computeNodes());
43
+ if (this.shouldUpdate) {
44
+ this.observe();
45
+ }
46
+ }
47
+ /**
48
+ * Unbinds this behavior from the source.
49
+ * @param source - The source to unbind from.
50
+ */
51
+ unbind() {
52
+ this.updateTarget(emptyArray);
53
+ this.source = null;
54
+ if (this.shouldUpdate) {
55
+ this.disconnect();
56
+ }
57
+ }
58
+ /** @internal */
59
+ handleEvent() {
60
+ this.updateTarget(this.computeNodes());
61
+ }
62
+ computeNodes() {
63
+ let nodes = this.getNodes();
64
+ if (this.options.filter !== void 0) {
65
+ nodes = nodes.filter(this.options.filter);
66
+ }
67
+ return nodes;
68
+ }
69
+ updateTarget(value) {
70
+ this.source[this.options.property] = value;
71
+ }
72
+ }
73
+
74
+ export { NodeObservationBehavior as N, elements as e };
@@ -33,10 +33,10 @@ export declare function formElements<T extends {
33
33
  [x: string]: any;
34
34
  label?: string | undefined;
35
35
  userValid: boolean;
36
- "__#8956@#blurred": boolean;
36
+ "__#9405@#blurred": boolean;
37
37
  readonly errorValidationMessage: any;
38
38
  connectedCallback(): void;
39
- "__#8956@#handleInvalidEvent": () => void;
39
+ "__#9405@#handleInvalidEvent": () => void;
40
40
  disconnectedCallback(): void;
41
41
  validate: () => void;
42
42
  };
@@ -49,8 +49,8 @@ export declare function errorText<T extends {
49
49
  new (...args: any[]): {
50
50
  [x: string]: any;
51
51
  errorText?: string | undefined;
52
- "__#8957@#shouldValidate": boolean;
53
- "__#8957@#prevSuccessText": string;
52
+ "__#9406@#shouldValidate": boolean;
53
+ "__#9406@#prevSuccessText": string;
54
54
  errorTextChanged(_: string, newmsg: string | undefined): void;
55
55
  };
56
56
  } & T;
package/shared/repeat.js CHANGED
@@ -1,4 +1,4 @@
1
- import { e as emptyArray, O as Observable, X as SubscriberSet, W as DOM, Y as HTMLDirective, Z as HTMLView } from './index.js';
1
+ import { e as emptyArray, O as Observable, Z as SubscriberSet, Y as DOM, $ as HTMLDirective, a0 as HTMLView } from './index.js';
2
2
 
3
3
  /** @internal */
4
4
  function newSplice(index, removed, addedCount) {
package/shared/slotted.js CHANGED
@@ -1,75 +1,5 @@
1
- import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective } from './index.js';
2
-
3
- /**
4
- * Creates a function that can be used to filter a Node array, selecting only elements.
5
- * @param selector - An optional selector to restrict the filter to.
6
- * @public
7
- */
8
- function elements(selector) {
9
- if (selector) {
10
- return function (value, index, array) {
11
- return value.nodeType === 1 && value.matches(selector);
12
- };
13
- }
14
- return function (value, index, array) {
15
- return value.nodeType === 1;
16
- };
17
- }
18
- /**
19
- * A base class for node observation.
20
- * @internal
21
- */
22
- class NodeObservationBehavior {
23
- /**
24
- * Creates an instance of NodeObservationBehavior.
25
- * @param target - The target to assign the nodes property on.
26
- * @param options - The options to use in configuring node observation.
27
- */
28
- constructor(target, options) {
29
- this.target = target;
30
- this.options = options;
31
- this.source = null;
32
- }
33
- /**
34
- * Bind this behavior to the source.
35
- * @param source - The source to bind to.
36
- * @param context - The execution context that the binding is operating within.
37
- */
38
- bind(source) {
39
- const name = this.options.property;
40
- this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
41
- this.source = source;
42
- this.updateTarget(this.computeNodes());
43
- if (this.shouldUpdate) {
44
- this.observe();
45
- }
46
- }
47
- /**
48
- * Unbinds this behavior from the source.
49
- * @param source - The source to unbind from.
50
- */
51
- unbind() {
52
- this.updateTarget(emptyArray);
53
- this.source = null;
54
- if (this.shouldUpdate) {
55
- this.disconnect();
56
- }
57
- }
58
- /** @internal */
59
- handleEvent() {
60
- this.updateTarget(this.computeNodes());
61
- }
62
- computeNodes() {
63
- let nodes = this.getNodes();
64
- if (this.options.filter !== void 0) {
65
- nodes = nodes.filter(this.options.filter);
66
- }
67
- return nodes;
68
- }
69
- updateTarget(value) {
70
- this.source[this.options.property] = value;
71
- }
72
- }
1
+ import { A as AttachedBehaviorHTMLDirective } from './index.js';
2
+ import { N as NodeObservationBehavior } from './node-observation.js';
73
3
 
74
4
  /**
75
5
  * The runtime behavior for slotted node observation.
@@ -116,4 +46,4 @@ function slotted(propertyOrOptions) {
116
46
  return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
117
47
  }
118
48
 
119
- export { NodeObservationBehavior as N, elements as e, slotted as s };
49
+ export { slotted as s };
@@ -1,3 +1,3 @@
1
- var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Apr 2023 10:27:51 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 appearance: none; /* for box-shadow visibility on IOS */\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-block: 0;\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}";
1
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 08 May 2023 11:40:49 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-600);\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 appearance: none; /* for box-shadow visibility on IOS */\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-block: 0;\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}";
2
2
 
3
3
  export { css_248z as c };
@@ -1,4 +1,4 @@
1
- import { F as FoundationElement, W as DOM, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
1
+ import { F as FoundationElement, Y as DOM, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
2
2
  import { a as applyMixins } from './apply-mixins.js';
3
3
  import { F as FormAssociated } from './form-associated.js';
4
4
  import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
@@ -1,4 +1,4 @@
1
- import { r as registerSideDrawer } from '../shared/definition39.js';
1
+ import { r as registerSideDrawer } from '../shared/definition40.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/when.js';
4
4
  import '../shared/class-names.js';
package/slider/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { r as registerSlider } from '../shared/definition40.js';
1
+ import { r as registerSlider } from '../shared/definition41.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition4.js';
4
4
  import '../shared/focus.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
3
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
3
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
3
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
3
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
7
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
11
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
15
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
3
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
7
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
11
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 24 Apr 2023 10:27:51 GMT
15
+ * Generated on Mon, 08 May 2023 11:40:49 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/switch/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { r as registerSwitch } from '../shared/definition41.js';
1
+ import { r as registerSwitch } from '../shared/definition42.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition3.js';
4
4
  import '../shared/icon.js';
package/tab/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { r as registerTab } from '../shared/definition42.js';
1
+ import { r as registerTab } from '../shared/definition43.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition3.js';
4
4
  import '../shared/icon.js';
@@ -1,4 +1,4 @@
1
- import { r as registerTabPanel } from '../shared/definition43.js';
1
+ import { r as registerTabPanel } from '../shared/definition44.js';
2
2
  import '../shared/index.js';
3
3
 
4
4
  registerTabPanel();
package/tabs/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { r as registerTabs } from '../shared/definition44.js';
1
+ import { r as registerTabs } from '../shared/definition45.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition42.js';
3
+ import '../shared/definition43.js';
4
4
  import '../shared/definition3.js';
5
5
  import '../shared/icon.js';
6
6
  import '../shared/to-string.js';
@@ -13,12 +13,13 @@ import '../shared/focus.js';
13
13
  import '../shared/affix.js';
14
14
  import '../shared/apply-mixins.js';
15
15
  import '../shared/focus2.js';
16
- import '../shared/definition43.js';
16
+ import '../shared/definition44.js';
17
17
  import '../shared/start-end.js';
18
18
  import '../shared/ref.js';
19
19
  import '../shared/key-codes.js';
20
20
  import '../shared/strings.js';
21
21
  import '../shared/numbers.js';
22
22
  import '../shared/slotted.js';
23
+ import '../shared/node-observation.js';
23
24
 
24
25
  registerTabs();
package/tag/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { r as registerTag } from '../shared/definition45.js';
1
+ import { r as registerTag } from '../shared/definition46.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition3.js';
4
4
  import '../shared/icon.js';
@@ -1,4 +1,4 @@
1
- import { r as registerTagGroup } from '../shared/definition46.js';
1
+ import { r as registerTagGroup } from '../shared/definition47.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/class-names.js';
4
4
 
@@ -1,4 +1,4 @@
1
- import { r as registerTextArea } from '../shared/definition47.js';
1
+ import { r as registerTextArea } from '../shared/definition48.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition3.js';
4
4
  import '../shared/icon.js';
@@ -1,4 +1,4 @@
1
- import { r as registerTextField } from '../shared/definition48.js';
1
+ import { r as registerTextField } from '../shared/definition49.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition4.js';
4
4
  import '../shared/focus.js';
package/tooltip/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { r as registerTooltip } from '../shared/definition49.js';
1
+ import { r as registerTooltip } from '../shared/definition50.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition19.js';
4
- import '../shared/definition9.js';
3
+ import '../shared/definition20.js';
4
+ import '../shared/definition7.js';
5
5
  import '../shared/definition3.js';
6
6
  import '../shared/icon.js';
7
7
  import '../shared/to-string.js';
@@ -11,7 +11,7 @@ import '../shared/class-names.js';
11
11
  import '../shared/when.js';
12
12
  import '../shared/definition4.js';
13
13
  import '../shared/focus.js';
14
- import '../shared/definition10.js';
14
+ import '../shared/definition9.js';
15
15
  import '../shared/base-progress.js';
16
16
  import '../shared/affix.js';
17
17
  import '../shared/button.js';
@@ -22,7 +22,7 @@ import '../shared/aria-global.js';
22
22
  import '../shared/start-end.js';
23
23
  import '../shared/ref.js';
24
24
  import '../shared/focus2.js';
25
- import '../shared/definition16.js';
25
+ import '../shared/definition8.js';
26
26
  import '../shared/es.object.assign.js';
27
27
 
28
28
  registerTooltip();
@@ -1,4 +1,4 @@
1
- import { r as registerTreeItem } from '../shared/definition50.js';
1
+ import { r as registerTreeItem } from '../shared/definition51.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/definition3.js';
4
4
  import '../shared/icon.js';
@@ -16,6 +16,7 @@ import '../shared/ref.js';
16
16
  import '../shared/apply-mixins.js';
17
17
  import '../shared/dom.js';
18
18
  import '../shared/focus2.js';
19
+ import '../shared/node-observation.js';
19
20
  import '../shared/slotted.js';
20
21
  import '../shared/children.js';
21
22
 
@@ -1,4 +1,4 @@
1
- import { r as registerTreeView } from '../shared/definition51.js';
1
+ import { r as registerTreeView } from '../shared/definition52.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/tree-item.js';
4
4
  import '../shared/start-end.js';
@@ -7,6 +7,7 @@ import '../shared/apply-mixins.js';
7
7
  import '../shared/dom.js';
8
8
  import '../shared/key-codes.js';
9
9
  import '../shared/slotted.js';
10
+ import '../shared/node-observation.js';
10
11
  import '../shared/class-names.js';
11
12
 
12
13
  registerTreeView();