@vonage/vivid 3.5.0 → 3.7.0

package/README.md

@@ -5,6 +5,7 @@ Essential UI **web components** for building modern web applications, bound to p
 
 ![image](https://user-images.githubusercontent.com/10883919/189522882-968358df-ee7c-4256-b61b-550cf369a087.png)
 
+---
 ## Installation
 
 To integrate Vivid components into your project, run:
@@ -29,19 +30,24 @@ And include in HTML:
 
 For a full list of components and API, explore the [components docs](https://vivid.deno.dev) 📚.
 
+---
 ## Prerequisite
 
 ### Tokens
 
-To **include the tokens**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder.  
+To **include the tokens**, you must load theme css:
 
-Tokens folder contains the following files:
+<vwc-note connotation="warning" icon="warning-solid" headline="Only one theme is required to be loaded."></vwc-note>
 
-- `theme-light.css` - Light theme
+```js
+'node_modules/@vonage/vivid/styles/tokens/theme-light.css';
+```
 
-- `theme-dark.css` - Dark theme
+**Or**
 
-Only one theme is required to be loaded.
+```js
+'node_modules/@vonage/vivid/styles/tokens/theme-dark.css';
+```
 
 #### About tokens
 
@@ -65,20 +71,19 @@ You can also add it to any wrapping element if you would like to scope the style
 
 ### Fonts (Prerequisite)
 
-Vivid uses `Montserrat` and `Roboto Mono` Google fonts.
-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)
+Vivid uses **Montserrat** and **Roboto Mono** Google fonts.
+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)
 
-#### Vonage authors
+Unless explicitly stated otherwise, **Vonage** products should use the brand specified font families by **Spezia**. Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).  
 
-Unless explicitly stated otherwise, *Vonage* products should use the brand specified font families by `Spezia`.  
-Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).  
-
-💡 For more information check out [Vonage Authors](/getting-started/vonage-authors)
+💡 For more information check out [vonage fonts](/getting-started/fonts-and-tokens)
 
+---
 ## Advanced Usage
 
-For further information on **core application styles** & **scoped elements** check out [advanced usage](/getting-started/advanced)
+💡 For more information on **core application styles** & **scoped elements** check out [advanced usage](/getting-started/advanced)
 
+---
 ## CDN - Quickstart
 
 Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
@@ -104,16 +109,19 @@ The following snippet fully renders a Vivid button component
 </div>
 ```
 
+---
 ## Support Matrix
 
 This library is supported on 2 recent versions of major browsers (Chrome, Firefox, Safari, Edge).
 
+---
 ## Support
 
 This library is open source, developed and maintained by the [Vonage Vivid teams](https://github.com/orgs/Vonage/teams/vivid/teams).
 
 For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/issues/new?assignees=yonatankra%2C+rachelbt%2C+rinaok%2C+yinonov&labels=bug&template=bug_report.yml&title=%5BYOUR+TITLE%5D%3A+Brief+description) or [feature request](https://github.com/Vonage/vivid-3/issues/new?assignees=yonatankra%2C+rachelbt%2C+rinaok%2C+yinonov&labels=Feature+request&template=feature_request.yml&title=%5BYOUR+TITLE%5D%3A+Brief+description).
 
+---
 ## Roadmap
 
 - View [components status](https://github.com/orgs/Vonage/projects/6)
@@ -121,19 +129,22 @@ For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/
 - [What's on our plate](https://github.com/orgs/Vonage/projects/3/views/7)
 
 - See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
-
+---
 ## Contributing
 
 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.
 
+---
 ## Versioning
 
 We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [npm page](https://www.npmjs.com/package/@vonage/vivid).
 
+---
 ## Authors
 
 See also the list of [contributors](https://github.com/Vonage/vivid-3/graphs/contributors) who participated in this project.
 
+---
 ## License
 
 This project is licensed under the Apache 2.0 License - see the [LICENSE.md](https://github.com/Vonage/vivid-3/blob/main/LICENSE.md) file for details
@@ -144,8 +155,14 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE.md](htt
 - Inspiration
 - etc -->
 
+---
 ## Built With ♡ And
 
 - [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
 - [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
 - [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency
+
+---
+## Have questions?
+
+Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.

package/banner/index.js

@@ -10,6 +10,8 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';

package/breadcrumb/index.js

@@ -1,4 +1,4 @@
-import { r as registerBreadcrumb } from '../shared/definition10.js';
+import { r as registerBreadcrumb } from '../shared/definition11.js';
 import '../shared/index.js';
 import '../shared/slotted.js';
 import '../shared/breadcrumb-item.js';

package/breadcrumb-item/index.js

@@ -1,4 +1,4 @@
-import { r as registerBreadcrumbItem } from '../shared/definition11.js';
+import { r as registerBreadcrumbItem } from '../shared/definition12.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/button/index.js

@@ -9,6 +9,8 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';

package/calendar/index.js

@@ -1,4 +1,4 @@
-import { r as registerCalendar } from '../shared/definition12.js';
+import { r as registerCalendar } from '../shared/definition13.js';
 import '../shared/index.js';
 import '../shared/calendar-event.js';
 import '../shared/es.object.assign.js';

package/calendar-event/index.js

@@ -1,4 +1,4 @@
-import { r as registerCalendarEvent } from '../shared/definition13.js';
+import { r as registerCalendarEvent } from '../shared/definition14.js';
 import '../shared/index.js';
 import '../shared/calendar-event.js';
 import '../shared/es.object.assign.js';

package/card/index.js

@@ -1,4 +1,4 @@
-import { r as registerCard } from '../shared/definition14.js';
+import { r as registerCard } from '../shared/definition15.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
@@ -7,7 +7,7 @@ import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition15.js';
+import '../shared/definition16.js';
 import '../shared/slotted.js';
 
 registerCard();

package/checkbox/index.js

@@ -1,4 +1,4 @@
-import { r as registerCheckbox } from '../shared/definition16.js';
+import { r as registerCheckbox } from '../shared/definition17.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/combobox/index.js

@@ -1,4 +1,4 @@
-import { r as registerCombobox } from '../shared/definition17.js';
+import { r as registerCombobox } from '../shared/definition18.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
@@ -7,10 +7,12 @@ import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition18.js';
+import '../shared/definition19.js';
 import '../shared/definition9.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
@@ -20,9 +22,9 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition15.js';
+import '../shared/definition16.js';
 import '../shared/es.object.assign.js';
-import '../shared/definition19.js';
+import '../shared/definition20.js';
 import '../shared/dom.js';
 import '../shared/form-elements.js';
 import '../shared/text-field.js';