@vonage/vivid 3.0.1 → 3.1.1

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 (72) hide show
  1. package/README.md +2 -2
  2. package/calendar/index.js +1 -0
  3. package/custom-elements.json +6206 -0
  4. package/data-grid/index.js +1104 -0
  5. package/index.js +2 -0
  6. package/lib/data-grid/data-grid-cell.d.ts +5 -0
  7. package/lib/data-grid/data-grid-cell.template.d.ts +4 -0
  8. package/lib/data-grid/data-grid-row.d.ts +3 -0
  9. package/lib/data-grid/data-grid-row.template.d.ts +3 -0
  10. package/lib/data-grid/data-grid.d.ts +3 -0
  11. package/lib/data-grid/data-grid.options.d.ts +31 -0
  12. package/lib/data-grid/data-grid.template.d.ts +3 -0
  13. package/lib/data-grid/definition.d.ts +6 -0
  14. package/lib/data-grid/index.d.ts +1 -0
  15. package/lib/popup/definition.d.ts +0 -1
  16. package/lib/popup/popup.d.ts +2 -2
  17. package/number-field/index.js +1 -1
  18. package/package.json +28 -29
  19. package/radio-group/index.js +1 -0
  20. package/shared/aria2.js +9 -0
  21. package/shared/definition.js +1 -1
  22. package/shared/definition11.js +1 -1
  23. package/shared/definition12.js +46 -797
  24. package/shared/definition13.js +1 -1
  25. package/shared/definition14.js +1 -1
  26. package/shared/definition16.js +1 -1
  27. package/shared/definition17.js +1 -1
  28. package/shared/definition18.js +594 -843
  29. package/shared/definition19.js +1 -1
  30. package/shared/definition2.js +1 -1
  31. package/shared/definition20.js +24 -28
  32. package/shared/definition21.js +1 -1
  33. package/shared/definition22.js +1 -1
  34. package/shared/definition23.js +1 -1
  35. package/shared/definition25.js +1 -1
  36. package/shared/definition27.js +2 -2
  37. package/shared/definition29.js +1 -1
  38. package/shared/definition30.js +1 -1
  39. package/shared/definition31.js +1 -1
  40. package/shared/definition32.js +1 -1
  41. package/shared/definition33.js +1 -1
  42. package/shared/definition34.js +1 -1
  43. package/shared/definition35.js +4 -3
  44. package/shared/definition36.js +1 -1
  45. package/shared/definition37.js +7 -3
  46. package/shared/definition38.js +3 -2
  47. package/shared/definition39.js +1 -1
  48. package/shared/definition4.js +1 -1
  49. package/shared/definition40.js +1 -1
  50. package/shared/definition42.js +2 -2
  51. package/shared/definition43.js +1 -1
  52. package/shared/definition45.js +1 -1
  53. package/shared/definition5.js +1 -1
  54. package/shared/definition6.js +1 -1
  55. package/shared/definition7.js +1 -1
  56. package/shared/definition8.js +1 -1
  57. package/shared/definition9.js +1 -1
  58. package/shared/form-elements.js +1 -1
  59. package/shared/icon.js +18 -6
  60. package/shared/index.js +10 -19
  61. package/shared/key-codes.js +4 -1
  62. package/shared/patterns/form-elements/form-elements.d.ts +2 -2
  63. package/shared/repeat.js +764 -0
  64. package/shared/slotted.js +1 -1
  65. package/shared/text-field.js +1 -1
  66. package/slider/index.js +1 -0
  67. package/styles/core/all.css +1 -1
  68. package/styles/core/theme.css +1 -1
  69. package/styles/core/typography.css +1 -1
  70. package/styles/tokens/theme-dark.css +4 -4
  71. package/styles/tokens/theme-light.css +4 -4
  72. package/vivid.api.json +3695 -0
package/shared/slotted.js CHANGED
@@ -116,4 +116,4 @@ function slotted(propertyOrOptions) {
116
116
  return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
117
117
  }
118
118
 
119
- export { elements as e, slotted as s };
119
+ export { NodeObservationBehavior as N, elements as e, slotted as s };
package/shared/text-field.js CHANGED
@@ -1,3 +1,3 @@
1
- var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 30 Jan 2023 11:28:31 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-faint: var(--vvd-color-success-50);\n --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n grid-column: 1/4;\n transition: color 0.2s;\n /* Shape */\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.control {\n width: 100%;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n padding-inline-end: var(--_text-field-gutter);\n padding-inline-start: var(--_text-field-gutter);\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: var(--_text-field-icon-size);\n inset-inline-start: var(--_text-field-gutter);\n line-height: 1;\n}\n.icon + .control {\n padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
1
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 12 Feb 2023 10:53:43 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-faint: var(--vvd-color-success-50);\n --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n grid-column: 1/4;\n transition: color 0.2s;\n /* Shape */\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.control {\n width: 100%;\n border: 0 none;\n 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 };
package/slider/index.js CHANGED
@@ -12,6 +12,7 @@ import '../shared/key-codes.js';
12
12
  import '../shared/aria.js';
13
13
  import '../shared/focus2.js';
14
14
  import '../shared/ref.js';
15
+ import '../shared/aria2.js';
15
16
  import '../shared/class-names.js';
16
17
 
17
18
  registerSlider();
package/styles/core/all.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
3
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
package/styles/core/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
3
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
package/styles/core/typography.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
3
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
package/styles/tokens/theme-dark.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
3
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
7
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
11
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
15
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/styles/tokens/theme-light.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
3
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
7
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
11
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 30 Jan 2023 11:28:31 GMT
15
+ * Generated on Sun, 12 Feb 2023 10:53:43 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";