@vonage/vivid 3.0.0-next.6 → 3.0.0-next.60

package/README.md

@@ -1,7 +1,138 @@
-# components
 
-This library was generated with [Nx](https://nx.dev).
+# Vivid UI
 
-## Running unit tests
+Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
 
-Run `nx test components` to execute the unit tests via [Jest](https://jestjs.io).
+![image](https://user-images.githubusercontent.com/10883919/189522882-968358df-ee7c-4256-b61b-550cf369a087.png)
+
+## Installation
+
+To integrate Vivid components into your project, run:
+
+```bash
+npm install @vonage/vivid # or yarn add @vonage/vivid
+```
+
+## Usage
+
+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):
+
+```js
+import '@vonage/vivid/button';
+```
+
+And include in HTML:
+
+```html
+<vwc-button label="Click me"></vwc-button>
+```
+
+For a full list of components and API, explore the [components docs](https://vivid.deno.dev/components/accordion/) 📚.
+
+### Tokens (Prerequisite)
+
+The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
+
+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.
+
+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.
+
+To **include the styles**, 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 the wrapping element (advisably `:root`).
+
+Folder contains the following files:
+
+- `theme-light.css` - Light theme
+
+- `theme-dark.css` - Dark theme
+
+Only one theme is required to be loaded.
+
+### Fonts (Prerequisite)
+
+- `node_modules/@vonage/vivid/styles/fonts/spezia.css` - Loads the *Spezia* variable font and defines its font face values. *Spezia* is Vonage's branded font and is required by most Vivid components. folder also contains the font files.
+
+### Styles (Optional)
+
+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.
+
+These styles are not required by vivid components directly. however, they do rely on the tokens and fonts 👆 to be loaded as components do.
+
+- `node_modules/@vonage/vivid/styles/core/theme.css` - Sets theme related styles
+
+- `node_modules/@vonage/vivid/styles/core/typography.css` - Sets typography related styles
+
+- `node_modules/@vonage/vivid/styles/core/all.css` - Sets all the above styles
+
+Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
+
+```css
+@forward 'node_modules/@vonage/vivid/styles/[path to file].css';
+```
+
+## Support
+
+This library is open source, developed and maintained by the [Vonage Vivid team](Vonage/vivid).
+
+For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=) or [feature request](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=).
+
+## Roadmap
+
+- View [components status](https://github.com/orgs/Vonage/projects/6)
+
+- [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).
+
+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.
+
+## Contributing
+
+Please read [CONTRIBUTING.md](.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/your/project/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the Apache 2.0 License - see the [LICENSE.md](LICENSE.md) file for details
+
+<!-- ## Acknowledgments
+
+- Hat tip to anyone whose code was used
+- Inspiration
+- etc -->
+
+## Built With
+
+- [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
+
+## Quickstart
+
+Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
+Such practice is often used when working on POCs or reproduction environments.
+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.
+
+The following snippet fully renders a Vivid button component
+
+```html
+<!-- import spezia font -->
+<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/fonts/spezia.css">
+
+<!-- import light theme style tokens -->
+<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/themes/light.css">
+
+<!-- import typography for desktop -->
+<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/typography/desktop.css">
+
+<!-- import Vivid button component -->
+<script type="module" src="https://unpkg.com/@vonage/vivid@next/button/index.js"></script>
+
+<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
+```

package/accordion/index.js

@@ -1,9 +1,7 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".control {\n  display: flex;\n  flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-30);\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends FoundationElement {
   constructor() {
@@ -45,7 +43,7 @@ __decorate([attr({
 let _2 = t => t,
     _t;
 
-const getClasses = _ => classNames('control');
+const getClasses = _ => classNames('base');
 
 const AccordionTemplate = () => html(_t || (_t = _2`<div class="${0}">
 	<slot></slot>

package/accordion-item/index.js

@@ -1,23 +1,26 @@
+import '../icon/index.js';
+import '../focus/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../icon/index.js';
 import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
+import '../shared/focus.js';
+import '../shared/object-keys.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.control {\n  display: flex;\n  flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n  display: none;\n}\n.control.open .toggle-open {\n  display: none;\n}\n.control.open .toggle-close {\n  display: initial;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  background: transparent;\n  cursor: pointer;\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 1rem;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.body {\n  padding: 8px 32px 24px 16px;\n  font: var(--vvd-font-base);\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n.base:not(.open) .body {\n  display: none;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  font: var(--vvd-font-heading4);\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.button:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.button {\n  --_connotation-color-primary: 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 selector(:focus-visible) {\n  .button:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .button {\n    user-select: none;\n  }\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-font-base-bold);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 class AccordionItem extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.heading = '';
     this.noIndicator = false;
-    this.meta = '';
     this.open = false;
   }
 
@@ -40,9 +43,7 @@ class AccordionItem extends FoundationElement {
 
 }
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "heading", void 0);
+__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "heading", void 0);
 
 __decorate([attr({
   attribute: 'heading-level'
@@ -53,9 +54,7 @@ __decorate([attr({
   attribute: 'no-indicator'
 }), __metadata("design:type", Object)], AccordionItem.prototype, "noIndicator", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "meta", void 0);
+__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "meta", void 0);
 
 __decorate([attr({
   mode: 'boolean'
@@ -68,7 +67,9 @@ let _ = t => t,
     _t2,
     _t3,
     _t4,
-    _t5;
+    _t5,
+    _t6,
+    _t7;
 const PANEL = 'panel';
 
 const getClasses = ({
@@ -76,7 +77,7 @@ const getClasses = ({
   iconTrailing,
   icon,
   noIndicator
-}) => classNames('control', ['open', open], ['icon', Boolean(icon)], ['icon-trailing', iconTrailing], ['no-indicator', noIndicator]);
+}) => classNames('base', ['open', open], ['icon', Boolean(icon)], ['icon-trailing', iconTrailing], ['no-indicator', noIndicator]);
 
 const AccordionItemTemplate = context => html(_t || (_t = _`
 	<div class="${0}">
@@ -98,10 +99,12 @@ const renderPanelHeader = (context, headingLevel) => {
 
 const renderHeaderButton = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html(_t3 || (_t3 = _`
 	<button class="button" id="header" @click=${0}
-		?aria-expanded=${0}
+		aria-expanded=${0}
 		aria-controls="${0}">
+    ${0}
 		${0}
 		<span class="heading-text">${0}</span>
 		${0}
@@ -109,16 +112,19 @@ const renderHeaderButton = context => {
 			${0}
 		</span>
 	</button>
-`), x => x.open = !x.open, x => x.open, PANEL, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
-			<vwc-icon class="toggle-open" type='chevron-down-solid'></vwc-icon>
-			<vwc-icon class="toggle-close" type='chevron-up-solid'></vwc-icon>
-			`))));
+`), x => x.open = !x.open, x => x.open, PANEL, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
+				${0}
+				${0}
+			`), when(x => !x.open, html(_t6 || (_t6 = _`<vwc-icon type='chevron-down-solid'></vwc-icon>`))), when(x => x.open, html(_t7 || (_t7 = _`<vwc-icon type='chevron-up-solid'></vwc-icon>`))))));
 };
 
 const vividAccordionItem = AccordionItem.compose({
   baseName: 'accordion-item',
   template: AccordionItemTemplate,
-  styles: css_248z
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
 designSystem.register(vividAccordionItem());
 

package/action-group/index.js

@@ -0,0 +1,47 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\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: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n/* Separator */\n::slotted(vwc-divider) {\n  align-self: stretch;\n  margin-block: 4px;\n}";
+
+class ActionGroup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.tight = false;
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "appearance", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], ActionGroup.prototype, "tight", void 0);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  appearance,
+  shape,
+  tight
+}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['tight', tight]);
+
+const ActionGroupTemplate = () => html(_t || (_t = _`
+<div class="${0}">
+  <slot></slot>
+</div>`), getClasses);
+
+const vividActionGroup = ActionGroup.compose({
+  baseName: 'action-group',
+  template: ActionGroupTemplate,
+  styles: css_248z
+});
+designSystem.register(vividActionGroup());
+
+export { vividActionGroup };

package/avatar/index.js

@@ -0,0 +1,51 @@
+import '../icon/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_density);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.base:not(.connotation-cta) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-condensed {\n  --_density: 32px;\n}\n.base.density-condensed .icon {\n  font-size: calc(32px / 2);\n}\n.base.density-extended {\n  --_density: 48px;\n}\n.base.density-extended .icon {\n  font-size: calc(48px / 2);\n}\n.base:not(.density-condensed, .density-extended) {\n  --_density: 40px;\n}\n.base:not(.density-condensed, .density-extended) .icon {\n  font-size: calc(40px / 2);\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
+
+class Avatar extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "appearance", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "density", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "icon", void 0);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  appearance,
+  connotation,
+  shape,
+  density
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)]);
+
+const AvatarTemplate = () => html(_t || (_t = _` 
+	<span class="${0}">
+		<slot>
+			<span class="icon">
+				<vwc-icon type="${0}"></vwc-icon>
+			</span>
+		</slot>
+</span>`), getClasses, x => x.icon ? `${x.icon}` : 'user-line');
+
+const vividAvatar = Avatar.compose({
+  baseName: 'avatar',
+  template: AvatarTemplate,
+  styles: css_248z
+});
+designSystem.register(vividAvatar());
+
+export { vividAvatar };

package/badge/index.js

@@ -1,21 +1,18 @@
 import '../icon/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/when.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
 
-class Badge extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
+class Badge extends FoundationElement {}
 
 __decorate([attr, __metadata("design:type", String)], Badge.prototype, "connotation", void 0);
 
@@ -23,16 +20,13 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "shape",
 
 __decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearance", void 0);
 
-__decorate([attr, __metadata("design:type", String)], Badge.prototype, "size", void 0);
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "density", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Badge.prototype, "text", void 0);
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
 
 applyMixins(Badge, AffixIconWithTrailing);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-contrast: var(--vvd-color-cta-90);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-contrast: var(--vvd-color-success-90);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n  --connotation-soft: var(--vvd-color-warning-20);\n  --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n  --connotation-soft: var(--vvd-color-info-20);\n  --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation);\n}\n.control.appearance-subtle {\n  --_appearance-color-text: var(--connotation-contrast);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n  block-size: 24px;\n  padding-inline: 10px;\n}\n\n.control.size-base-small {\n  block-size: 20px;\n  padding-inline: 8px;\n}\n\n.control.size-base-large {\n  block-size: 28px;\n  padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.control {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-font-base-condensed-bold);\n  vertical-align: middle;\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-cta-500);\n  --_connotation-color-soft: var(--vvd-color-cta-100);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n  --_connotation-color-contrast: var(--vvd-color-success-800);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n  --_connotation-color-contrast: var(--vvd-color-alert-800);\n}\n.control.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-warning-500);\n  --_connotation-color-soft: var(--vvd-color-warning-100);\n  --_connotation-color-contrast: var(--vvd-color-warning-800);\n}\n.control.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-information-500);\n  --_connotation-color-soft: var(--vvd-color-information-100);\n  --_connotation-color-contrast: var(--vvd-color-information-800);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.density-condensed):not(.density-extended) {\n  block-size: 24px;\n  padding-inline: 10px;\n}\n\n.control.density-condensed {\n  block-size: 20px;\n  padding-inline: 8px;\n}\n\n.control.density-extended {\n  block-size: 28px;\n  padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
 
 let _ = t => t,
     _t;
@@ -41,9 +35,9 @@ const getClasses = ({
   connotation,
   appearance,
   shape,
-  size,
+  density,
   iconTrailing
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-trailing', iconTrailing]);
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)], ['icon-trailing', iconTrailing]);
 
 const badgeTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
@@ -54,11 +48,11 @@ const badgeTemplate = context => {
 		</span>`), getClasses, x => affixIconTemplate(x.icon), x => x.text);
 };
 
-const VIVIDBadge = Badge.compose({
+const vividBadge = Badge.compose({
   baseName: 'badge',
   template: badgeTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDBadge());
+designSystem.register(vividBadge());
 
-export { VIVIDBadge };
+export { vividBadge };

package/banner/index.js

@@ -1,97 +1,32 @@
+import '../button/index.js';
 import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
+import { C as Connotation } from '../shared/enums.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import '../button/index.js';
-import '../text-anchor/index.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../icon/index.js';
 import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
-import '../icon/index.js';
-import '../shared/index2.js';
+import '../focus/index.js';
+import '../shared/focus.js';
+import '../shared/button.js';
+import '../shared/form-associated.js';
 import '../shared/aria-global.js';
-import '../shared/text-anchor.js';
-import '../shared/anchor.js';
-import '../shared/text-anchor.template.js';
-
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n  overflow: hidden;\n  max-height: 10rem;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-diverse: var(--vvd-color-success-70);\n}\n\n.control:not(.connotation-success):not(.connotation-alert):not(.connotation-announcement):not(.connotation-warning) {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n  --connotation-diverse: var(--vvd-color-info-70);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-diverse: var(--vvd-color-alert-70);\n}\n\n.control.connotation-announcement {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n  --connotation-diverse: var(--vvd-color-announcement-70);\n}\n\n.control.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n  --connotation-diverse: var(--vvd-color-warning-70);\n}\n\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.removing {\n  max-height: 0;\n}\n.control > .header {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: flex-start;\n}\n.control > .header > .user-content {\n  display: flex;\n  flex: 1 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n  flex: 0 0 auto;\n  font-size: 20px;\n  margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n  display: inline-block;\n  flex: 0 0 auto;\n  padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n  padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n  --vvd-icon-button-color: inherit;\n  flex: 0 0 auto;\n  margin-inline-end: 8px;\n}";
-styleInject(css_248z);
-
-var Connotation;
-
-(function (Connotation) {
-  Connotation["Primary"] = "primary";
-  Connotation["CTA"] = "cta";
-  Connotation["Success"] = "success";
-  Connotation["Alert"] = "alert";
-  Connotation["Warning"] = "warning";
-  Connotation["Info"] = "info";
-  Connotation["Announcement"] = "announcement";
-})(Connotation || (Connotation = {}));
-
-var ConnotationDecorative;
-
-(function (ConnotationDecorative) {
-  ConnotationDecorative["Pacific"] = "pacific";
-})(ConnotationDecorative || (ConnotationDecorative = {}));
-
-var Shape;
-
-(function (Shape) {
-  Shape["Rounded"] = "rounded";
-  Shape["Pill"] = "pill";
-  Shape["Circled"] = "circled";
-  Shape["Sharp"] = "sharp";
-})(Shape || (Shape = {}));
-
-var Appearance;
-
-(function (Appearance) {
-  Appearance["Text"] = "text";
-  Appearance["Filled"] = "filled";
-  Appearance["Outlined"] = "outlined";
-  Appearance["Subtle"] = "subtle";
-  Appearance["Ghost"] = "ghost";
-})(Appearance || (Appearance = {}));
-
-var Size;
-
-(function (Size) {
-  Size["BaseSmall"] = "base-small";
-  Size["Base"] = "base";
-  Size["BaseLarge"] = "base-large";
-})(Size || (Size = {}));
-
-var Position;
-
-(function (Position) {
-  Position["Top"] = "TOP";
-  Position["Bottom"] = "BOTTOM";
-  Position["Start"] = "START";
-  Position["Center"] = "CENTER";
-  Position["End"] = "END";
-})(Position || (Position = {}));
-
-var Role;
-
-(function (Role) {
-  Role["Status"] = "status";
-  Role["Alert"] = "alert";
-})(Role || (Role = {}));
-
-var AriaLive;
-
-(function (AriaLive) {
-  AriaLive["Polite"] = "polite";
-  AriaLive["Assertive"] = "assertive";
-})(AriaLive || (AriaLive = {}));
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/object-keys.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.removing {\n  max-height: 0;\n}\n.control > .header {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: flex-start;\n  font: var(--vvd-font-base-bold);\n}\n.control > .header > .user-content {\n  display: flex;\n  flex: 1 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n  flex: 0 0 auto;\n  font-size: 20px;\n  margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n  display: inline-block;\n  flex: 0 0 auto;\n  padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n  padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n  --vvd-icon-button-color: inherit;\n  flex: 0 0 auto;\n  margin-inline-end: 8px;\n}";
 
 var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
-const connotationIconMap = new Map([[Connotation.Info, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
 
-const defaultConnotation = (connotation = Connotation.Info) => connotationIconMap.get(connotation);
+const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
 
 class Banner extends FoundationElement {
   constructor() {
@@ -99,7 +34,7 @@ class Banner extends FoundationElement {
     this.removable = false;
 
     _Banner_handleRemoveEnd.set(this, () => {
-      this.$emit('vwc-banner:removed');
+      this.$emit('removed');
       this.parentElement && this.parentElement.removeChild(this);
     });
 
@@ -129,7 +64,7 @@ class Banner extends FoundationElement {
   }
 
   remove() {
-    this.$emit('vwc-banner:removing');
+    this.$emit('removing');
     const banner = this.shadowRoot && this.shadowRoot.querySelector('.banner');
 
     if (banner) {
@@ -174,7 +109,7 @@ const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !
 function renderDismissButton() {
   return html(_t || (_t = _2`
 	  <vwc-button
-			  size="base-small"
+			  density="condensed"
 			  class="dismiss-button"
 			  icon="close-line"
 			  @click="${0}">
@@ -193,7 +128,7 @@ const BannerTemplate = context => {
 				 aria-live="${0}">
               ${0}
             </div>
-						<slot class="action-items" name="actionItems"></slot>
+						<slot class="action-items" name="action-items"></slot>
 					</div>
 
 			  ${0}