@vonage/vivid 3.1.1 → 3.1.3

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 (68) hide show
  1. package/README.md +45 -73
  2. package/data-grid/index.js +2 -2
  3. package/index.js +17 -16
  4. package/lib/components.d.ts +1 -0
  5. package/number-field/index.js +18 -448
  6. package/package.json +1 -1
  7. package/progress/index.js +1 -1
  8. package/progress-ring/index.js +1 -1
  9. package/radio/index.js +1 -1
  10. package/radio-group/index.js +1 -1
  11. package/select/index.js +1 -1
  12. package/shared/definition.js +1 -1
  13. package/shared/definition11.js +1 -1
  14. package/shared/definition12.js +1 -1
  15. package/shared/definition13.js +1 -1
  16. package/shared/definition14.js +1 -1
  17. package/shared/definition16.js +1 -1
  18. package/shared/definition17.js +1 -1
  19. package/shared/definition19.js +1 -1
  20. package/shared/definition2.js +1 -1
  21. package/shared/definition20.js +1 -1
  22. package/shared/definition21.js +1 -1
  23. package/shared/definition22.js +1 -1
  24. package/shared/definition23.js +1 -1
  25. package/shared/definition25.js +1 -1
  26. package/shared/definition27.js +1 -1
  27. package/shared/definition29.js +1 -1
  28. package/shared/definition30.js +1 -1
  29. package/shared/definition31.js +1 -1
  30. package/shared/definition32.js +432 -76
  31. package/shared/definition33.js +76 -59
  32. package/shared/definition34.js +67 -35
  33. package/shared/definition35.js +31 -422
  34. package/shared/definition36.js +357 -555
  35. package/shared/definition37.js +618 -74
  36. package/shared/definition38.js +70 -573
  37. package/shared/definition39.js +527 -81
  38. package/shared/definition4.js +1 -1
  39. package/shared/definition40.js +127 -47
  40. package/shared/definition41.js +51 -16
  41. package/shared/definition42.js +17 -425
  42. package/shared/definition43.js +367 -209
  43. package/shared/definition44.js +248 -85
  44. package/shared/definition45.js +110 -68
  45. package/shared/definition46.js +77 -0
  46. package/shared/definition5.js +1 -1
  47. package/shared/definition6.js +1 -1
  48. package/shared/definition7.js +1 -1
  49. package/shared/definition8.js +1 -1
  50. package/shared/definition9.js +1 -1
  51. package/shared/form-elements.js +1 -1
  52. package/shared/patterns/form-elements/form-elements.d.ts +2 -2
  53. package/shared/text-field.js +1 -1
  54. package/side-drawer/index.js +1 -1
  55. package/slider/index.js +1 -1
  56. package/styles/core/all.css +1 -1
  57. package/styles/core/theme.css +1 -1
  58. package/styles/core/typography.css +1 -1
  59. package/styles/tokens/theme-dark.css +4 -4
  60. package/styles/tokens/theme-light.css +4 -4
  61. package/switch/index.js +1 -1
  62. package/tab/index.js +1 -1
  63. package/tab-panel/index.js +1 -1
  64. package/tabs/index.js +3 -3
  65. package/text-area/index.js +1 -1
  66. package/text-field/index.js +1 -1
  67. package/tooltip/index.js +1 -1
  68. package/vivid.api.json +164 -0
package/README.md CHANGED
@@ -10,10 +10,10 @@ Essential UI **web components** for building modern web applications, bound to p
10
10
  To integrate Vivid components into your project, run:
11
11
 
12
12
  ```bash
13
- npm install @vonage/vivid # or yarn add @vonage/vivid
13
+ npm install @vonage/vivid
14
14
  ```
15
15
 
16
- ## Usage
16
+ ### Usage
17
17
 
18
18
  Import components in your project via [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only):
19
19
 
@@ -27,17 +27,13 @@ And include in HTML:
27
27
  <vwc-button label="Click me"></vwc-button>
28
28
  ```
29
29
 
30
- For a full list of components and API, explore the [components docs](https://vivid.deno.dev/components/accordion/) 📚.
30
+ For a full list of components and API, explore the [components docs](https://vivid.deno.dev) 📚.
31
31
 
32
- ### Tokens (Prerequisite)
32
+ ## Prerequisite
33
33
 
34
- The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
35
-
36
- Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
37
-
38
- As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
34
+ ### Tokens
39
35
 
40
- To **include the tokens**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder and *require a `vvd-root` class* selector to be present on a wrapping element (advisably the `:root`).
36
+ To **include the tokens**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder.
41
37
 
42
38
  Tokens folder contains the following files:
43
39
 
@@ -47,67 +43,70 @@ Tokens folder contains the following files:
47
43
 
48
44
  Only one theme is required to be loaded.
49
45
 
50
- ### Fonts (Prerequisite)
46
+ #### About tokens
51
47
 
52
- Vivid uses `Montserrat` and `Roboto Mono` Google fonts.
53
- Learn how to load fonts into your application [with google-fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service#loading-web-fonts)
48
+ The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
54
49
 
55
- ** Unless explicitly stated otherwise, *Vonage products* should use the brand specified `Spezia` font families.
56
- Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).
50
+ Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
57
51
 
58
- Note that font files are not included within the css file, and must be copied to application assets separately (within the same parsed css folder).
59
- This is to allow the author to choose the most appropriate way to load the font files based on their project.
52
+ As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
60
53
 
61
- ### Core (Optional)
54
+ ### Setting Vivid class
62
55
 
63
- In Addition, this library provides a set of styles (combined with the tokens and fonts) that can be used to embody the Vivid design system into an application.
56
+ The Vivid tokens require a `vvd-root` class selector to be present on a wrapping element (advisably the `:root`) for it to apply its css custom properties to.
64
57
 
65
- These styles are not required by vivid components directly. however, native HTML tags do.
58
+ 💡 The [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) CSS pseudo-class matches the root element of a tree representing the document
66
59
 
67
- These **core styles** rely on the tokens and fonts 👆 to be loaded.
60
+ ```html
61
+ <html class="vvd-root">...</html>
62
+ ```
68
63
 
69
- To **include the core styles**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/core` folder and *require a `vvd-root` class* selector to be present on a wrapping element (advisably the `:root`. When set on the `:root` (html element), typeface sizes are able to descend from the root font-size, thus comply with the [WCAG 1.4.4](https://www.w3.org/WAI/WCAG21/Understanding/resize-text)).
64
+ You can also add it to any wrapping element if you would like to scope the styles to only a certain part of your application.
70
65
 
71
- - `theme.css` - Sets theme related styles
66
+ ### Fonts (Prerequisite)
72
67
 
73
- - `typography.css` - Sets typography related styles
68
+ Vivid uses `Montserrat` and `Roboto Mono` Google fonts.
69
+ Learn how to load fonts into your application [with google-fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service#loading-web-fonts)
74
70
 
75
- - `all.css` - Sets all the above styles
71
+ #### Vonage authors
76
72
 
77
- Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
73
+ Unless explicitly stated otherwise, *Vonage* products should use the brand specified font families by `Spezia`.
74
+ Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).
78
75
 
79
- ```css
80
- @forward 'node_modules/@vonage/vivid/styles/[path to file].css';
81
- ```
76
+ 💡 For more information check out [Vonage Authors](/getting-started/vonage-authors)
82
77
 
83
78
  ## Advanced Usage
84
79
 
85
- ### Scoped Elements (🧪 Alpha)
80
+ For further information on **core application styles** & **scoped elements** check out [advanced usage](/getting-started/advanced)
86
81
 
87
- Custom elements, by browsers limitations, are registered globally, and thus may conflict when multiple versions of the library are used in the same application as all custom elements register under the same namespace.
82
+ ## CDN - Quickstart
88
83
 
89
- Enforcing only a single version of the library to be used simultaneously makes it difficult to progressively migrate to newer versions of the library, as each update will require a full application update.
90
- Also, in a micro-frontend architecture, this can be a major bottleneck as each micro-frontend may use a different version of the library.
91
-
92
- To work around this limitation, Vivid provides a way for authors' to scope each custom element namespace by passing an argument to the `prefix` parameter when registering each custom element.
84
+ Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
85
+ Such practice is often used when working on POCs or reproduction environments.
86
+ Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
93
87
 
94
- The following example will register *badge* custom element as `dashboard-badge`:
88
+ The following snippet fully renders a Vivid button component
95
89
 
96
- ```js
97
- import { registerBadge } from '@vonage/vivid';
90
+ ```html
91
+ <!-- import Montserrat & Roboto-Mono fonts -->
92
+ <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
93
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
98
94
 
99
- registerBadge('dashboard');
100
- ```
95
+ <!-- import light theme style tokens -->
96
+ <link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
101
97
 
102
- then use it as:
98
+ <!-- import Vivid button component -->
99
+ <script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
103
100
 
104
- ```html
105
- <dashboard-badge text="dashboard scoped badge"></dashboard-badge>
101
+ <!-- Part of the app (or a whole app) that contains vivid components -->
102
+ <div class="vvd-root">
103
+ <vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
104
+ </div>
106
105
  ```
107
106
 
108
- Remember to not include the default side-effect import (`import '@vonage/vivid/button';`) when using scoped elements as it will register the default namespace.
107
+ ## Support Matrix
109
108
 
110
- Even though custom elements can be registered under different namespaces, as many as needed, this approach lets you enjoy the benefits of [npm dedupe](https://docs.npmjs.com/cli/v8/commands/npm-dedupe) to ensure only a single version of the library is used in the application.
109
+ This library is supported on 2 recent versions of major browsers (Chrome, Firefox, Safari, Edge).
111
110
 
112
111
  ## Support
113
112
 
@@ -123,8 +122,6 @@ For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/
123
122
 
124
123
  - See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
125
124
 
126
- We publish a *next* release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
127
-
128
125
  ## Contributing
129
126
 
130
127
  Please read [CONTRIBUTING.md](https://github.com/Vonage/vivid-3/blob/main/.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
@@ -147,33 +144,8 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE.md](htt
147
144
  - Inspiration
148
145
  - etc -->
149
146
 
150
- ## Built With
147
+ ## Built With ♡ And
151
148
 
152
149
  - [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
153
150
  - [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
154
151
  - [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency
155
-
156
- ## Quickstart
157
-
158
- Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
159
- Such practice is often used when working on POCs or reproduction environments.
160
- Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
161
-
162
- The following snippet fully renders a Vivid button component
163
-
164
- ```html
165
- <!-- import Montserrat & Roboto-Mono fonts -->
166
- <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
167
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
168
-
169
- <!-- import light theme style tokens -->
170
- <link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
171
-
172
- <!-- import Vivid button component -->
173
- <script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
174
-
175
- <!-- Part of the app (or a whole app) that contains vivid components -->
176
- <div class="vvd-root">
177
- <vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
178
- </div>
179
- ```
package/data-grid/index.js CHANGED
@@ -961,9 +961,9 @@ __decorate([
961
961
 
962
962
  var css_248z$2 = ":host {\n position: relative;\n display: block;\n}\n\n:host([generate-header=sticky]) {\n max-height: var(--data-grid-max-height, 200px);\n overflow-y: auto;\n}";
963
963
 
964
- var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Sun, 12 Feb 2023 10:53:43 GMT\n */\n:host {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n position: sticky;\n z-index: 999;\n top: 0;\n background: var(--vvd-color-canvas);\n}";
964
+ var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu, 16 Feb 2023 07:39:15 GMT\n */\n:host {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n position: sticky;\n z-index: 999;\n top: 0;\n background: var(--vvd-color-canvas);\n}";
965
965
 
966
- var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 12 Feb 2023 10:53:43 GMT\n */\n:host {\n position: relative;\n display: flex;\n overflow: hidden;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-100);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n outline: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n border-color: currentColor;\n font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n display: none;\n}";
966
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 16 Feb 2023 07:39:15 GMT\n */\n:host {\n position: relative;\n display: flex;\n overflow: hidden;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-100);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n outline: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n border-color: currentColor;\n font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n display: none;\n}";
967
967
 
968
968
  class DataGrid extends DataGrid$1 {}
969
969
 
package/index.js CHANGED
@@ -27,21 +27,22 @@ export { n as navDefinition, a as navRegistries, r as registerNav } from './shar
27
27
  export { n as navDisclosureDefinition, a as navDisclosureRegistries, r as registerNavDisclosure } from './shared/definition29.js';
28
28
  export { n as navItemDefinition, a as navItemRegistries, r as registerNavItem } from './shared/definition30.js';
29
29
  export { n as noteDefinition, a as noteRegistries, r as registerNote } from './shared/definition31.js';
30
+ export { n as numberFieldDefinition, a as numberFieldRegistries, r as registerNumberField } from './shared/definition32.js';
30
31
  export { a as popupDefinition, p as popupRegistries, r as registerPopup } from './shared/definition18.js';
31
- export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition32.js';
32
- export { p as progressRingDefinition, a as progressRingRegistries, r as registerProgressRing } from './shared/definition33.js';
33
- export { a as radioDefinition, b as radioRegistries, r as registerRadio } from './shared/definition34.js';
34
- export { a as radioGroupDefinition, b as radioGroupRegistries, r as registerRadioGroup } from './shared/definition35.js';
35
- export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition36.js';
36
- export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition37.js';
37
- export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition38.js';
38
- export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition39.js';
39
- export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition44.js';
40
- export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition43.js';
41
- export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition45.js';
42
- export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition42.js';
43
- export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition40.js';
44
- export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition41.js';
32
+ export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition33.js';
33
+ export { p as progressRingDefinition, a as progressRingRegistries, r as registerProgressRing } from './shared/definition34.js';
34
+ export { a as radioDefinition, b as radioRegistries, r as registerRadio } from './shared/definition35.js';
35
+ export { a as radioGroupDefinition, b as radioGroupRegistries, r as registerRadioGroup } from './shared/definition36.js';
36
+ export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition37.js';
37
+ export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition38.js';
38
+ export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition39.js';
39
+ export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition40.js';
40
+ export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition45.js';
41
+ export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition44.js';
42
+ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition46.js';
43
+ export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition43.js';
44
+ export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition41.js';
45
+ export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition42.js';
45
46
  export { a7 as designSystem, r as registerFactory } from './shared/index.js';
46
47
  import './shared/key-codes.js';
47
48
  import './shared/numbers.js';
@@ -78,8 +79,8 @@ import './shared/aria.js';
78
79
  import './shared/dom.js';
79
80
  import './shared/direction.js';
80
81
  import './shared/text-anchor.js';
82
+ import './shared/text-field2.js';
83
+ import './shared/es.regexp.to-string.js';
81
84
  import './shared/base-progress.js';
82
85
  import './shared/radio.js';
83
86
  import './shared/aria2.js';
84
- import './shared/es.regexp.to-string.js';
85
- import './shared/text-field2.js';
package/lib/components.d.ts CHANGED
@@ -27,6 +27,7 @@ export * from './nav/definition';
27
27
  export * from './nav-disclosure/definition';
28
28
  export * from './nav-item/definition';
29
29
  export * from './note/definition';
30
+ export * from './number-field/definition';
30
31
  export * from './popup/definition';
31
32
  export * from './progress/definition';
32
33
  export * from './progress-ring/definition';