@vonage/vivid 4.19.0-preview.0 → 4.20.0

package/shared/definition7.cjs

@@ -3,7 +3,6 @@
 const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition28.cjs');
 const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
@@ -16,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Badge extends vividElement.VividElement {
+class Badge extends affix.AffixIconWithTrailing(vividElement.VividElement) {
 }
 __decorateClass([
   vividElement.attr
@@ -30,7 +29,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr
 ], Badge.prototype, "text");
-applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
 
 const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
 

package/shared/definition7.js

@@ -1,7 +1,6 @@
 import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { i as iconDefinition } from './definition28.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
@@ -14,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Badge extends VividElement {
+class Badge extends AffixIconWithTrailing(VividElement) {
 }
 __decorateClass([
   attr
@@ -28,7 +27,6 @@ __decorateClass([
 __decorateClass([
   attr
 ], Badge.prototype, "text");
-applyMixins(Badge, AffixIconWithTrailing);
 
 const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
 

package/shared/definition8.cjs

@@ -3,10 +3,9 @@
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
-const affix = require('./affix.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
+const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const classNames = require('./class-names.cjs');
 const slotted = require('./slotted.cjs');
@@ -31,7 +30,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends delegatesAria.DelegatesAria(vividElement.VividElement) {
+class Banner extends affix.AffixIcon(localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement))) {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -90,8 +89,6 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], Banner.prototype, "actionItemsSlottedContent");
-applyMixins.applyMixins(Banner, affix.AffixIcon);
-applyMixins.applyMixins(Banner, localized.Localized);
 
 const getClasses = (_) => classNames.classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
 function renderDismissButton(buttonTag) {

package/shared/definition8.js

@@ -1,10 +1,9 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { i as iconDefinition } from './definition28.js';
 import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { C as Connotation } from './enums.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { D as DelegatesAria } from './delegates-aria.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 import { s as slotted } from './slotted.js';
@@ -29,7 +28,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends DelegatesAria(VividElement) {
+class Banner extends AffixIcon(Localized(DelegatesAria(VividElement))) {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -88,8 +87,6 @@ __decorateClass([
 __decorateClass([
   observable
 ], Banner.prototype, "actionItemsSlottedContent");
-applyMixins(Banner, AffixIcon);
-applyMixins(Banner, Localized);
 
 const getClasses = (_) => classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
 function renderDismissButton(buttonTag) {

package/shared/definition9.cjs

@@ -7,7 +7,7 @@ const textAnchor_template = require('./text-anchor.template.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
+const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
 const getClasses = (_) => classNames.classNames("base");
 const BreadcrumbItemTemplate = (context) => {

package/shared/definition9.js

@@ -5,7 +5,7 @@ import { t as textAnchorTemplate } from './text-anchor.template.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
+const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
 const getClasses = (_) => classNames("base");
 const BreadcrumbItemTemplate = (context) => {

package/shared/form-associated.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './vivid-element.js';
+import { a as attr, b as booleanConverter, o as observable, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/foundation/button/button.d.ts

@@ -146,124 +146,6 @@ declare const VividFoundationButton_base: {
         readonly DOCUMENT_POSITION_CONTAINS: 8;
         readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
         readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
-        pmViewDesc?: {
-            parent: any | undefined;
-            children: any[];
-            dom: Node;
-            contentDOM: HTMLElement | null;
-            dirty: number;
-            node: import("prosemirror-model").Node | null;
-            matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-            matchesMark(mark: import("prosemirror-model").Mark): boolean;
-            matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-            matchesHack(nodeName: string): boolean;
-            parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-            stopEvent(event: Event): boolean;
-            readonly size: number;
-            readonly border: number;
-            destroy(): void;
-            posBeforeChild(child: any): number;
-            readonly posBefore: number;
-            readonly posAtStart: number;
-            readonly posAfter: number;
-            readonly posAtEnd: number;
-            localPosFromDOM(dom: Node, offset: number, bias: number): number;
-            nearestDesc(dom: Node): any | undefined;
-            nearestDesc(dom: Node, onlyNodes: true): {
-                node: import("prosemirror-model").Node;
-                outerDeco: readonly import("prosemirror-view").Decoration[];
-                innerDeco: import("prosemirror-view").DecorationSource;
-                readonly nodeDOM: Node;
-                parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-                matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-                readonly size: number;
-                readonly border: 0 | 1;
-                updateChildren(view: import("prosemirror-view").EditorView, pos: number): void;
-                localCompositionInfo(view: import("prosemirror-view").EditorView, pos: number): {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                } | null;
-                protectLocalComposition(view: import("prosemirror-view").EditorView, { node, pos, text }: {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                }): void;
-                update(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): boolean;
-                updateInner(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): void;
-                updateOuterDeco(outerDeco: readonly import("prosemirror-view").Decoration[]): void;
-                selectNode(): void;
-                deselectNode(): void;
-                readonly domAtom: boolean;
-                parent: any | undefined;
-                children: any[];
-                dom: Node;
-                contentDOM: HTMLElement | null;
-                dirty: number;
-                matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-                matchesMark(mark: import("prosemirror-model").Mark): boolean;
-                matchesHack(nodeName: string): boolean;
-                stopEvent(event: Event): boolean;
-                destroy(): void;
-                posBeforeChild(child: any): number;
-                readonly posBefore: number;
-                readonly posAtStart: number;
-                readonly posAfter: number;
-                readonly posAtEnd: number;
-                localPosFromDOM(dom: Node, offset: number, bias: number): number;
-                nearestDesc(dom: Node): any | undefined;
-                nearestDesc(dom: Node, onlyNodes: true): any | undefined;
-                getDesc(dom: Node): any | undefined;
-                posFromDOM(dom: Node, offset: number, bias: number): number;
-                descAt(pos: number): any | undefined;
-                domFromPos(pos: number, side: number): {
-                    node: Node;
-                    offset: number;
-                    atom?: number | undefined;
-                };
-                parseRange(from: number, to: number, base?: number | undefined): {
-                    node: Node;
-                    from: number;
-                    to: number;
-                    fromOffset: number;
-                    toOffset: number;
-                };
-                emptyChildAt(side: number): boolean;
-                domAfterPos(pos: number): Node;
-                setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-                ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-                readonly contentLost: boolean | null;
-                markDirty(from: number, to: number): void;
-                markParentsDirty(): void;
-                readonly ignoreForCoords: boolean;
-                isText(text: string): boolean;
-            } | undefined;
-            getDesc(dom: Node): any | undefined;
-            posFromDOM(dom: Node, offset: number, bias: number): number;
-            descAt(pos: number): any | undefined;
-            domFromPos(pos: number, side: number): {
-                node: Node;
-                offset: number;
-                atom?: number | undefined;
-            };
-            parseRange(from: number, to: number, base?: number | undefined): {
-                node: Node;
-                from: number;
-                to: number;
-                fromOffset: number;
-                toOffset: number;
-            };
-            emptyChildAt(side: number): boolean;
-            domAfterPos(pos: number): Node;
-            setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-            ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-            readonly contentLost: boolean | null;
-            markDirty(from: number, to: number): void;
-            markParentsDirty(): void;
-            readonly domAtom: boolean;
-            readonly ignoreForCoords: boolean;
-            isText(text: string): boolean;
-        } | undefined;
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;

package/shared/localized.cjs

@@ -25,11 +25,17 @@ const setLocale = (locale) => {
   currentLocale.locale = locale;
 };
 
-class Localized {
-  get locale() {
-    return currentLocale.locale;
+const Localized = (Base) => {
+  class LocalizedElement extends Base {
+    /**
+     * @internal
+     */
+    get locale() {
+      return currentLocale.locale;
+    }
   }
-}
+  return LocalizedElement;
+};
 
 exports.Localized = Localized;
 exports.setLocale = setLocale;

package/shared/localized.js

@@ -23,10 +23,16 @@ const setLocale = (locale) => {
   currentLocale.locale = locale;
 };
 
-class Localized {
-  get locale() {
-    return currentLocale.locale;
+const Localized = (Base) => {
+  class LocalizedElement extends Base {
+    /**
+     * @internal
+     */
+    get locale() {
+      return currentLocale.locale;
+    }
   }
-}
+  return LocalizedElement;
+};
 
 export { Localized as L, setLocale as s };

package/shared/option.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
 const vividElement = require('./vivid-element.cjs');
 const dom = require('./dom.cjs');
@@ -18,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 function isListboxOption(el) {
   return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
 }
-class ListboxOption extends vividElement.VividElement {
+class ListboxOption extends affix.AffixIconWithTrailing(vividElement.VividElement) {
   constructor(text, value, defaultSelected, selected) {
     super();
     this.defaultSelected = false;
@@ -34,9 +33,8 @@ class ListboxOption extends vividElement.VividElement {
     this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
-    this._internalHighlightText = "";
-    this._matchedRange = null;
-    this._hidden = false;
+    this._vvdSearchText = "";
+    this._isNotMatching = false;
     if (text) {
       this.text = text;
     }
@@ -119,15 +117,16 @@ class ListboxOption extends vividElement.VividElement {
   get form() {
     return null;
   }
-  get _highlightTextToUse() {
-    return this.highlightText ?? this._internalHighlightText;
+  get _hasMatchedText() {
+    return Boolean(this.matchedText ?? this._vvdSearchText);
   }
-  get _matchedRangeSafe() {
-    if (this._highlightTextToUse) {
-      const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
+  get _matchedRange() {
+    const matchedText = this.matchedText ?? this._vvdSearchText;
+    if (matchedText) {
+      const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
       return matchIndex === -1 ? { from: 0, to: 0 } : {
         from: matchIndex,
-        to: matchIndex + this._highlightTextToUse.length
+        to: matchIndex + matchedText.length
       };
     }
     return { from: 0, to: 0 };
@@ -170,24 +169,20 @@ __decorateClass([
   vividElement.observable
 ], ListboxOption.prototype, "_displayCheckmark", 2);
 __decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "_internalHighlightText", 2);
+  vividElement.attr({ attribute: "matched-text" })
+], ListboxOption.prototype, "matchedText", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "highlight-text" })
-], ListboxOption.prototype, "highlightText", 2);
+  vividElement.observable
+], ListboxOption.prototype, "_vvdSearchText", 2);
 __decorateClass([
   vividElement.volatile
-], ListboxOption.prototype, "_highlightTextToUse", 1);
+], ListboxOption.prototype, "_hasMatchedText", 1);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "_matchedRange", 2);
+], ListboxOption.prototype, "_isNotMatching", 2);
 __decorateClass([
   vividElement.volatile
-], ListboxOption.prototype, "_matchedRangeSafe", 1);
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "_hidden", 2);
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
+], ListboxOption.prototype, "_matchedRange", 1);
 
 exports.ListboxOption = ListboxOption;
 exports.isListboxOption = isListboxOption;

package/shared/option.js

@@ -1,6 +1,5 @@
-import { a as applyMixins } from './apply-mixins.js';
 import { A as AffixIconWithTrailing } from './affix.js';
-import { V as VividElement, O as Observable, o as observable, a as attr, v as volatile } from './vivid-element.js';
+import { O as Observable, V as VividElement, o as observable, a as attr, v as volatile } from './vivid-element.js';
 import { i as isHTMLElement } from './dom.js';
 
 var __defProp = Object.defineProperty;
@@ -16,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 function isListboxOption(el) {
   return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
 }
-class ListboxOption extends VividElement {
+class ListboxOption extends AffixIconWithTrailing(VividElement) {
   constructor(text, value, defaultSelected, selected) {
     super();
     this.defaultSelected = false;
@@ -32,9 +31,8 @@ class ListboxOption extends VividElement {
     this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
-    this._internalHighlightText = "";
-    this._matchedRange = null;
-    this._hidden = false;
+    this._vvdSearchText = "";
+    this._isNotMatching = false;
     if (text) {
       this.text = text;
     }
@@ -117,15 +115,16 @@ class ListboxOption extends VividElement {
   get form() {
     return null;
   }
-  get _highlightTextToUse() {
-    return this.highlightText ?? this._internalHighlightText;
+  get _hasMatchedText() {
+    return Boolean(this.matchedText ?? this._vvdSearchText);
   }
-  get _matchedRangeSafe() {
-    if (this._highlightTextToUse) {
-      const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
+  get _matchedRange() {
+    const matchedText = this.matchedText ?? this._vvdSearchText;
+    if (matchedText) {
+      const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
       return matchIndex === -1 ? { from: 0, to: 0 } : {
         from: matchIndex,
-        to: matchIndex + this._highlightTextToUse.length
+        to: matchIndex + matchedText.length
       };
     }
     return { from: 0, to: 0 };
@@ -168,23 +167,19 @@ __decorateClass([
   observable
 ], ListboxOption.prototype, "_displayCheckmark", 2);
 __decorateClass([
-  observable
-], ListboxOption.prototype, "_internalHighlightText", 2);
+  attr({ attribute: "matched-text" })
+], ListboxOption.prototype, "matchedText", 2);
 __decorateClass([
-  attr({ attribute: "highlight-text" })
-], ListboxOption.prototype, "highlightText", 2);
+  observable
+], ListboxOption.prototype, "_vvdSearchText", 2);
 __decorateClass([
   volatile
-], ListboxOption.prototype, "_highlightTextToUse", 1);
+], ListboxOption.prototype, "_hasMatchedText", 1);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_matchedRange", 2);
+], ListboxOption.prototype, "_isNotMatching", 2);
 __decorateClass([
   volatile
-], ListboxOption.prototype, "_matchedRangeSafe", 1);
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_hidden", 2);
-applyMixins(ListboxOption, AffixIconWithTrailing);
+], ListboxOption.prototype, "_matchedRange", 1);
 
 export { ListboxOption as L, isListboxOption as i };