@vonage/vivid 3.0.0-next.82 → 3.0.0-next.84

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 (80) hide show
  1. package/accordion/index.js +2 -9
  2. package/accordion-item/index.js +8 -22
  3. package/action-group/index.js +2 -8
  4. package/avatar/index.js +4 -14
  5. package/badge/index.js +3 -13
  6. package/banner/index.js +3 -26
  7. package/breadcrumb/index.js +1 -1
  8. package/breadcrumb-item/index.js +5 -9
  9. package/calendar/index.js +12 -49
  10. package/calendar-event/index.js +4 -7
  11. package/card/index.js +9 -28
  12. package/checkbox/index.js +3 -11
  13. package/dialog/index.js +7 -59
  14. package/divider/index.js +1 -0
  15. package/fab/index.js +2 -8
  16. package/focus/index.js +2 -2
  17. package/header/index.js +2 -7
  18. package/icon/index.js +2 -5
  19. package/index.js +5 -1
  20. package/layout/index.js +1 -9
  21. package/lib/badge/badge.d.ts +1 -3
  22. package/lib/components.d.ts +2 -0
  23. package/lib/listbox-option/index.d.ts +4 -0
  24. package/lib/listbox-option/listbox-option.d.ts +7 -0
  25. package/lib/listbox-option/listbox-option.template.d.ts +4 -0
  26. package/lib/radio-group/index.d.ts +10 -0
  27. package/lib/radio-group/radio-group.d.ts +4 -0
  28. package/lib/radio-group/radio-group.template.d.ts +4 -0
  29. package/listbox-option/index.js +248 -0
  30. package/menu/index.js +2 -7
  31. package/menu-item/index.js +1 -0
  32. package/nav/index.js +1 -1
  33. package/nav-disclosure/index.js +4 -11
  34. package/nav-item/index.js +2 -2
  35. package/note/index.js +4 -12
  36. package/number-field/index.js +25 -21
  37. package/package.json +13 -9
  38. package/popup/index.js +0 -1
  39. package/progress/index.js +5 -13
  40. package/progress-ring/index.js +4 -8
  41. package/radio/index.js +7 -131
  42. package/radio-group/index.js +435 -0
  43. package/shared/affix.js +1 -6
  44. package/shared/apply-mixins.js +5 -4
  45. package/shared/aria.js +9 -0
  46. package/shared/calendar-event.js +0 -7
  47. package/shared/direction.js +20 -0
  48. package/shared/enums.js +0 -17
  49. package/shared/es.object.assign.js +4 -4
  50. package/shared/export.js +79 -57
  51. package/shared/focus2.js +1 -1
  52. package/shared/form-associated.js +1 -1
  53. package/shared/form-elements.js +5 -27
  54. package/shared/icon.js +8 -18
  55. package/shared/index.js +38 -25
  56. package/shared/index2.js +2 -13
  57. package/shared/index3.js +1 -5
  58. package/shared/index4.js +3 -12
  59. package/shared/index5.js +6 -581
  60. package/shared/index6.js +7 -29
  61. package/shared/iterators.js +3 -3
  62. package/shared/key-codes.js +7 -1
  63. package/shared/object-keys.js +2 -2
  64. package/shared/patterns/form-elements/form-elements.d.ts +1 -1
  65. package/shared/radio.js +127 -0
  66. package/shared/ref.js +1 -1
  67. package/shared/slotted.js +1 -1
  68. package/shared/text-anchor.js +0 -2
  69. package/shared/text-anchor.template.js +1 -3
  70. package/shared/web.dom-collections.iterator.js +6 -8
  71. package/side-drawer/index.js +3 -16
  72. package/styles/core/all.css +1 -1
  73. package/styles/core/theme.css +1 -1
  74. package/styles/core/typography.css +1 -1
  75. package/styles/tokens/theme-dark.css +29 -23
  76. package/styles/tokens/theme-light.css +29 -23
  77. package/text-area/index.js +3 -9
  78. package/text-field/index.js +4 -14
  79. package/tooltip/index.js +2 -10
  80. package/shared/regexp-flags.js +0 -21
@@ -198,18 +198,15 @@ __decorate([
198
198
  ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
199
199
  applyMixins(TextArea$1, DelegatesARIATextbox);
200
200
 
201
- var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Oct 2022 06:37:06 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: 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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):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-typography-base);\n grid-column: 1/3;\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/3;\n}\n.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\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-typography-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.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}";
201
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 31 Oct 2022 12:51:44 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: 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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):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-typography-base);\n grid-column: 1/3;\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/3;\n}\n.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\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-typography-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.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}";
202
202
 
203
203
  let TextArea = class TextArea extends TextArea$1 {};
204
-
205
204
  __decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
206
-
207
205
  TextArea = __decorate([formElements], TextArea);
208
206
 
209
207
  let _ = t => t,
210
- _t,
211
- _t2;
212
-
208
+ _t,
209
+ _t2;
213
210
  const getClasses = ({
214
211
  value,
215
212
  errorValidationMessage,
@@ -218,14 +215,12 @@ const getClasses = ({
218
215
  readOnly,
219
216
  successText
220
217
  }) => classNames('base', ['readonly', readOnly], ['placeholder', Boolean(placeholder)], ['disabled', disabled], ['error', Boolean(errorValidationMessage)], ['has-value', Boolean(value)], ['success', !!successText]);
221
-
222
218
  function renderLabel() {
223
219
  return html(_t || (_t = _`
224
220
  <label for="control" class="label">
225
221
  ${0}
226
222
  </label>`), x => x.label);
227
223
  }
228
-
229
224
  const TextAreaTemplate = context => {
230
225
  const focusTemplate = focusTemplateFactory(context);
231
226
  return html(_t2 || (_t2 = _`
@@ -276,7 +271,6 @@ const TextAreaTemplate = context => {
276
271
  </div>
277
272
  `), getClasses, when(x => x.label, renderLabel()), x => x.autofocus, x => x.placeholder ? x.placeholder : null, x => x.name ? x.name : null, x => x.maxlength ? x.maxlength : null, x => x.rows ? x.rows : null, x => x.cols ? x.cols : null, x => x.wrap ? x.wrap : null, x => x.readOnly, x => x.required, x => x.spellcheck, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, x => x.handleTextInput(), x => x.handleChange(), ref('control'), () => focusTemplate, when(x => {
278
273
  var _a;
279
-
280
274
  return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
281
275
  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
282
276
  };
@@ -22,25 +22,19 @@ import '../shared/aria-global.js';
22
22
  import '../shared/start-end.js';
23
23
 
24
24
  let TextField = class TextField extends TextField$1 {};
25
-
26
25
  __decorate([attr, __metadata("design:type", String)], TextField.prototype, "density", void 0);
27
-
28
26
  __decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
29
-
30
27
  __decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
31
-
32
28
  __decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
33
-
34
29
  TextField = __decorate([formElements], TextField);
35
30
  applyMixins(TextField, AffixIcon);
36
31
 
37
- var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Oct 2022 06:37:06 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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):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-typography-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-typography-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.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\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-typography-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.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}";
32
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 31 Oct 2022 12:51:44 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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):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-typography-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-typography-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.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\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-typography-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.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}";
38
33
 
39
34
  let _ = t => t,
40
- _t,
41
- _t2,
42
- _t3;
43
-
35
+ _t,
36
+ _t2,
37
+ _t3;
44
38
  const getStateClasses = ({
45
39
  errorValidationMessage,
46
40
  disabled,
@@ -53,20 +47,17 @@ const getStateClasses = ({
53
47
  label,
54
48
  successText
55
49
  }) => classNames(['error', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`density-${density}`, Boolean(density)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success', Boolean(successText)]);
56
-
57
50
  function renderLabel() {
58
51
  return html(_t || (_t = _`
59
52
  <label for="control" class="label">
60
53
  ${0}
61
54
  </label>`), x => x.label);
62
55
  }
63
-
64
56
  function renderCharCount() {
65
57
  return html(_t2 || (_t2 = _`
66
58
  <span class="char-count">${0} / ${0}</span>
67
59
  `), x => x.value ? x.value.length : 0, x => x.maxlength);
68
60
  }
69
-
70
61
  const TextfieldTemplate = context => {
71
62
  const affixIconTemplate = affixIconTemplateFactory(context);
72
63
  const focusTemplate = focusTemplateFactory(context);
@@ -123,7 +114,6 @@ const TextfieldTemplate = context => {
123
114
  ${0}
124
115
  </div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, when(x => {
125
116
  var _a;
126
-
127
117
  return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
128
118
  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
129
119
  };
package/tooltip/index.js CHANGED
@@ -24,33 +24,25 @@ import '../shared/ref.js';
24
24
  import '../shared/focus2.js';
25
25
  import '../shared/es.object.assign.js';
26
26
  import '../shared/object-keys.js';
27
- import '../shared/regexp-flags.js';
28
27
 
29
- var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 27 Oct 2022 06:37:06 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-typography-base-bold);\n}";
28
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 31 Oct 2022 12:51:44 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-typography-base-bold);\n}";
30
29
 
31
30
  class Tooltip extends FoundationElement {
32
31
  constructor() {
33
32
  super(...arguments);
34
33
  this.open = false;
35
34
  }
36
-
37
35
  }
38
-
39
36
  __decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
40
-
41
37
  __decorate([attr({
42
38
  mode: 'boolean'
43
39
  }), __metadata("design:type", Object)], Tooltip.prototype, "open", void 0);
44
-
45
40
  __decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "placement", void 0);
46
-
47
41
  __decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "anchor", void 0);
48
42
 
49
43
  let _2 = t => t,
50
- _t;
51
-
44
+ _t;
52
45
  const getClasses = _ => classNames('control');
53
-
54
46
  const TooltipTemplate = () => html(_t || (_t = _2`
55
47
  <vwc-popup class="${0}" arrow alternate
56
48
  placement=${0} open=${0} anchor=${0}
@@ -1,21 +0,0 @@
1
- import { j as anObject$1 } from './export.js';
2
-
3
- var anObject = anObject$1;
4
-
5
- // `RegExp.prototype.flags` getter implementation
6
- // https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
7
- var regexpFlags = function () {
8
- var that = anObject(this);
9
- var result = '';
10
- if (that.hasIndices) result += 'd';
11
- if (that.global) result += 'g';
12
- if (that.ignoreCase) result += 'i';
13
- if (that.multiline) result += 'm';
14
- if (that.dotAll) result += 's';
15
- if (that.unicode) result += 'u';
16
- if (that.unicodeSets) result += 'v';
17
- if (that.sticky) result += 'y';
18
- return result;
19
- };
20
-
21
- export { regexpFlags as r };