@vonage/vivid 3.0.0-next.119 → 3.0.0-next.120

package/README.md

@@ -77,27 +77,32 @@ Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rul
 
 ## Advanced Usage
 
-### Scoped Elements
+### Scoped Elements (🧪 Alpha)
 
 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.
 
-This burdens micro frontend architecture and updates to outdated versions of the Vivid, enforcing a single version of the library to be used. Meaning, any update to the library will require a full application update.
+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.
+Also, in a micro-frontend architecture, this can be a major bottleneck as each micro-frontend may use a different version of the library.
 
-To avoid this bottleneck, Vivid provides a way for authors' to scope each custom element namespace by setting a `prefix` query parameter to their import call.
+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.
 
 The following example will register *badge* custom element as `dashboard-badge`:
 
 ```js
-import '/node_modules/@vonage/vivid/badge/index.js?prefix=dashboard';
+import { registerBadge } from '@vonage/vivid';
+
+registerBadge('dashboard');
 ```
 
 then use it as:
 
 ```html
-<dashboard-badge text="I'm a custom prefixed badge"></dashboard-badge>
+<dashboard-badge text="dashboard scoped badge"></dashboard-badge>
 ```
 
-Even though the custom elements are registered under different namespaces, [npm packages version range handling](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#dependencies) can still be used for multiple versions saving.
+Remember to not include the default side-effect import (`import '@vonage/vivid/button';`) when using scoped elements as it will register the default namespace.
+
+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.
 
 ## Support
 

package/accordion/index.js

@@ -1,52 +1,5 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerAccordion } from '../shared/definition.js';
+import '../shared/index.js';
+import '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 GMT\n */\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
-
-class Accordion extends FoundationElement {
-  constructor() {
-    super();
-    this.accordionItems = undefined;
-    this.multi = false;
-    this.addEventListener('opened', this.handleOpened);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.accordionItems = this.children;
-  }
-  handleOpened(e) {
-    if (!this.multi && this.accordionItems) {
-      for (let i = 0; i < this.accordionItems.length; i++) {
-        if (this.accordionItems[i] !== e.target) {
-          this.accordionItems[i].open = false;
-        }
-      }
-    }
-  }
-  closeAll() {
-    if (this.accordionItems) {
-      for (let i = 0; i < this.accordionItems.length; i++) {
-        this.accordionItems[i].open = false;
-      }
-    }
-  }
-}
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Accordion.prototype, "multi", void 0);
-
-let _2 = t => t,
-  _t;
-const getClasses = _ => classNames('base');
-const AccordionTemplate = () => html(_t || (_t = _2`<div class="${0}">
-	<slot></slot>
-</div>`), getClasses);
-
-const vividAccordion = Accordion.compose({
-  baseName: 'accordion',
-  template: AccordionTemplate,
-  styles: css_248z
-});
-designSystem.withPrefix(getPrefix(import.meta.url)).register(vividAccordion());
-
-export { vividAccordion };
+registerAccordion();

package/accordion-item/index.js

@@ -1,114 +1,16 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.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/focus.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerAccordionItem } from '../shared/definition2.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
 import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
 import '../shared/focus2.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 GMT\n */\n.body {\n  padding: 8px 32px 24px 16px;\n  font: var(--vvd-typography-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-typography-heading-4);\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\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: transparent;\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-typography-base-bold);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  color: var(--vvd-color-neutral-600);\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.noIndicator = false;
-    this.open = false;
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === 'open') {
-      newValue === null ? this.emitEvent('closed') : this.emitEvent('opened');
-    }
-  }
-  emitEvent(name) {
-    const init = {
-      bubbles: true,
-      composed: true
-    };
-    const ev = new CustomEvent(name, init);
-    this.dispatchEvent(ev);
-  }
-}
-__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "heading", void 0);
-__decorate([attr({
-  attribute: 'heading-level'
-}), __metadata("design:type", Number)], AccordionItem.prototype, "headingLevel", void 0);
-__decorate([attr({
-  mode: 'boolean',
-  attribute: 'no-indicator'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "noIndicator", void 0);
-__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "meta", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "open", void 0);
-applyMixins(AccordionItem, AffixIconWithTrailing);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
-const PANEL = 'panel';
-const getClasses = ({
-  open,
-  iconTrailing,
-  icon,
-  noIndicator
-}) => classNames('base', ['open', open], ['icon', Boolean(icon)], ['icon-trailing', iconTrailing], ['no-indicator', noIndicator]);
-const AccordionItemTemplate = context => html(_t || (_t = _`
-	<div class="${0}">
-		${0}
-		<div class="body" id="${0}" role="region" aria-labelledby="header">
-			<slot></slot>
-		</div>
-	</div>
-`), getClasses, x => renderPanelHeader(context, x.headingLevel), PANEL);
-const renderPanelHeader = (context, headingLevel) => {
-  const header = headingLevel ? 'h' + headingLevel : 'h3';
-  return html(_t2 || (_t2 = _`
-	<${0} class="header">
-		${0}
-	</${0}>
-	`), header, renderHeaderButton(context), header);
-};
-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-controls="${0}">
-		${0}
-		${0}
-		<span class="heading-text">${0}</span>
-		${0}
-		
-		${0}
-	</button>
-`), 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}`), x => {
-    return affixIconTemplate(x.open ? 'chevron-up-solid' : 'chevron-down-solid', 'indicator');
-  })));
-};
-
-const prefix = getPrefix(import.meta.url);
-const dependencies = ['icon', 'focus'];
-const vividAccordionItem = AccordionItem.compose({
-  baseName: 'accordion-item',
-  template: AccordionItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-(async () => {
-  await loadComponentsModules(dependencies, prefix);
-  designSystem.withPrefix(prefix).register(vividAccordionItem());
-})();
-
-export { vividAccordionItem };
+registerAccordionItem();

package/action-group/index.js

@@ -1,37 +1,5 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerActionGroup } from '../shared/definition5.js';
+import '../shared/index.js';
+import '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\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::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([role=separator]) {\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.withPrefix(getPrefix(import.meta.url)).register(vividActionGroup());
-
-export { vividActionGroup };
+registerActionGroup();

package/avatar/index.js

@@ -1,67 +1,11 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.js';
-import { I as Icon } from '../shared/icon.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerAvatar } from '../shared/definition6.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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(--_size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\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: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\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: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\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, "size", void 0);
-__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "icon", void 0);
-__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "name", void 0);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
-const getClasses = ({
-  appearance,
-  connotation,
-  shape,
-  size
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)]);
-function renderIcon(iconTag) {
-  return html(_t || (_t = _`
-		<span class="icon">
-			<${0} name="${0}"></${0}>
-		</span>
-	`), iconTag, x => x.icon ? `${x.icon}` : 'user-line', iconTag);
-}
-function renderInitials() {
-  return html(_t2 || (_t2 = _`
-		<span class="initials">${0}</span>
-	`), ({
-    name
-  }) => name.substring(0, 2));
-}
-const AvatarTemplate = context => {
-  const iconTag = context.tagFor(Icon);
-  return html(_t3 || (_t3 = _`
-	<span class="${0}">
-		<slot name="graphic">
-			${0}
-			${0}
-		</slot>
-</span>`), getClasses, when(x => x.name, renderInitials()), when(x => !x.name, renderIcon(iconTag)));
-};
-
-const prefix = getPrefix(import.meta.url);
-const dependencies = ['icon'];
-const vividAvatar = Avatar.compose({
-  baseName: 'avatar',
-  template: AvatarTemplate,
-  styles: css_248z
-});
-(async () => {
-  await loadComponentsModules(dependencies, prefix);
-  designSystem.withPrefix(prefix).register(vividAvatar());
-})();
-
-export { vividAvatar };
+registerAvatar();

package/badge/index.js

@@ -1,52 +1,13 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
-import { a as applyMixins } from '../shared/apply-mixins.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerBadge } from '../shared/definition7.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
 import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
 
-class Badge extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], Badge.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", String)], Badge.prototype, "shape", void 0);
-__decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearance", 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 Wed, 14 Dec 2022 14:20:57 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\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-typography-base-condensed-bold);\n  max-inline-size: 100%;\n  padding-inline: 8px;\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-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.base.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.base.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.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-300);\n  --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n  --_connotation-color-intermediate: var(--vvd-color-warning-300);\n  --_connotation-color-soft: var(--vvd-color-warning-100);\n  --_connotation-color-contrast: var(--vvd-color-warning-800);\n}\n.base.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.base: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.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
-
-let _ = t => t,
-  _t,
-  _t2;
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  iconTrailing,
-  text,
-  icon
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['icon-trailing', iconTrailing], ['icon-only', !text && Boolean(icon)]);
-const badgeTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html(_t || (_t = _`
-    <span class="${0}">
-      ${0}
-			${0}
-		</span>`), getClasses, x => affixIconTemplate(x.icon), when(x => x.text, x => html(_t2 || (_t2 = _`<span class="text">${0}</span>`), x.text)));
-};
-
-const prefix = getPrefix(import.meta.url);
-const vividBadge = Badge.compose({
-  baseName: 'badge',
-  template: badgeTemplate,
-  styles: css_248z
-});
-(async () => {
-  await loadComponentsModules(['icon'], prefix);
-  designSystem.withPrefix(prefix).register(vividBadge());
-})();
-
-export { vividBadge };
+registerBadge();

package/banner/index.js

@@ -1,126 +1,24 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, Y as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.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 { B as Button } from '../shared/button.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerBanner } from '../shared/definition8.js';
+import '../shared/index.js';
+import '../shared/definition9.js';
+import '../shared/definition3.js';
 import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
-import '../shared/button2.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
 import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/enums.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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-300);\n  --_connotation-color-primary-text: var(--vvd-color-canvas-text);\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: transparent;\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-typography-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.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
-const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    _Banner_handleRemoveEnd.set(this, () => {
-      this.$emit('removed');
-      this.parentElement && this.parentElement.removeChild(this);
-    });
-    _Banner_closeOnKeyDown.set(this, e => {
-      if (e.key !== 'Escape' || !this.removable) {
-        return;
-      }
-      this.remove();
-    });
-  }
-  get conditionedIcon() {
-    var _a;
-    return (_a = this.icon) !== null && _a !== void 0 ? _a : defaultConnotation(this.connotation);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('keydown', __classPrivateFieldGet(this, _Banner_closeOnKeyDown, "f"));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('keydown', __classPrivateFieldGet(this, _Banner_closeOnKeyDown, "f"));
-  }
-  remove() {
-    this.$emit('removing');
-    const banner = this.shadowRoot && this.shadowRoot.querySelector('.banner');
-    if (banner) {
-      banner.classList.add('removing');
-      banner.addEventListener('transitionend', __classPrivateFieldGet(this, _Banner_handleRemoveEnd, "f"));
-    }
-  }
-}
-_Banner_handleRemoveEnd = new WeakMap(), _Banner_closeOnKeyDown = new WeakMap();
-__decorate([attr({
-  attribute: 'action-href'
-}), __metadata("design:type", Object)], Banner.prototype, "actionHref", void 0);
-__decorate([attr({
-  attribute: 'action-text'
-}), __metadata("design:type", Object)], Banner.prototype, "actionText", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Banner.prototype, "removable", void 0);
-__decorate([attr({
-  attribute: 'aria-live'
-}), __metadata("design:type", Object)], Banner.prototype, "ariaLive", void 0);
-__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "role", void 0);
-__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "text", void 0);
-__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "connotation", void 0);
-applyMixins(Banner, AffixIcon);
-
-let _2 = t => t,
-  _t,
-  _t2;
-const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !!_.connotation]);
-function renderDismissButton(buttonTag) {
-  return html(_t || (_t = _2`
-	  <${0}
-				part="vvd-theme-alternate"
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${0}">
-	  </${0}>`), buttonTag, x => x.remove(), buttonTag);
-}
-const BannerTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const buttonTag = context.tagFor(Button);
-  return html(_t2 || (_t2 = _2`
-	  <div class="banner ${0}" tabindex="0">
-		  <header class="header">
-					<div class="user-content">
-            ${0}
-						<div class="banner--message"
-				 role="${0}"
-				 aria-live="${0}">
-              ${0}
-            </div>
-						<slot class="action-items" name="action-items"></slot>
-					</div>
-
-			  ${0}
-		  </header>
-	  </div>
-	`), getClasses, x => affixIconTemplate(x.conditionedIcon), x => x.role ? x.role : 'status', x => x.ariaLive ? x.ariaLive : 'polite', x => x.text, when(x => x.removable, renderDismissButton(buttonTag)));
-};
-
-const prefix = getPrefix(import.meta.url);
-const vividBanner = Banner.compose({
-  baseName: 'banner',
-  template: BannerTemplate,
-  styles: css_248z
-});
-(async () => {
-  await loadComponentsModules(['button'], prefix);
-  designSystem.withPrefix(prefix).register(vividBanner());
-})();
-
-export { vividBanner };
+registerBanner();