@vonage/vivid 3.51.0 → 3.53.0

package/number-field/index.js

@@ -1,12 +1,12 @@
-import { r as registerNumberField } from '../shared/definition34.js';
+import { r as registerNumberField } from '../shared/definition35.js';
 import '../shared/index.js';
 import '../shared/definition11.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition37.js';
+import '../shared/definition38.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -18,13 +18,12 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/enums.js';
-import '../shared/definition21.js';
+import '../shared/definition22.js';
 import '../shared/aria.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/localized.js';
+import '../shared/applyMixinsWithObservables.js';
 import '../shared/text-field2.js';
-import '../shared/focus2.js';
-import '../shared/focus.js';
 
 registerNumberField();

package/option/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const definition = require('../shared/definition35.cjs');
+const definition = require('../shared/definition36.cjs');
 require('../shared/index.cjs');
-require('../shared/definition26.cjs');
+require('../shared/definition27.cjs');
 require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');

package/option/index.js

@@ -1,6 +1,6 @@
-import { r as registerOption } from '../shared/definition35.js';
+import { r as registerOption } from '../shared/definition36.js';
 import '../shared/index.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';

package/package.json

@@ -1,36 +1,36 @@
 {
-  "name": "@vonage/vivid",
-  "version": "3.51.0",
-  "type": "module",
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./index.cjs"
-    },
-    "./*": {
-      "types": "./*/index.d.ts",
-      "import": "./*/index.js",
-      "require": "./*/index.cjs"
-    },
-    "./locales/*": {
-      "types": "./locales/*.d.ts",
-      "import": "./locales/*.js",
-      "require": "./locales/*.cjs"
-    },
-    "./*.css": "./*.css"
-  },
-  "customElements": "./custom-elements.json",
-  "homepage": "https://vivid.deno.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/vonage/vivid-3",
-    "directory": "libs/components"
-  },
-  "bugs": {
-    "url": "https://github.com/Vonage/vivid-3/issues"
-  },
-  "license": "Apache-2.0"
+	"name": "@vonage/vivid",
+	"version": "3.53.0",
+	"type": "module",
+	"module": "./index.js",
+	"main": "./index.cjs",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"import": "./index.js",
+			"require": "./index.cjs"
+		},
+		"./*": {
+			"types": "./*/index.d.ts",
+			"import": "./*/index.js",
+			"require": "./*/index.cjs"
+		},
+		"./locales/*": {
+			"types": "./locales/*.d.ts",
+			"import": "./locales/*.js",
+			"require": "./locales/*.cjs"
+		},
+		"./*.css": "./*.css"
+	},
+	"customElements": "./custom-elements.json",
+	"homepage": "https://vivid.deno.dev",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid-3",
+		"directory": "libs/components"
+	},
+	"bugs": {
+		"url": "https://github.com/Vonage/vivid-3/issues"
+	},
+	"license": "Apache-2.0"
 }

package/pagination/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-const definition = require('../shared/definition36.cjs');
+const definition = require('../shared/definition37.cjs');
 require('../shared/definition11.cjs');
 require('../shared/index.cjs');
-require('../shared/definition26.cjs');
+require('../shared/definition27.cjs');
 require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition37.cjs');
+require('../shared/definition38.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');

package/pagination/index.js

@@ -1,12 +1,12 @@
-import { r as registerPagination } from '../shared/definition36.js';
+import { r as registerPagination } from '../shared/definition37.js';
 import '../shared/definition11.js';
 import '../shared/index.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition37.js';
+import '../shared/definition38.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';

package/popup/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-const definition = require('../shared/definition60.cjs');
+const definition = require('../shared/definition63.cjs');
 require('../shared/index.cjs');
 require('../shared/definition11.cjs');
-require('../shared/definition26.cjs');
+require('../shared/definition27.cjs');
 require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition37.cjs');
+require('../shared/definition38.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
@@ -20,6 +20,6 @@ require('../shared/aria-global.cjs');
 require('../shared/start-end.cjs');
 require('../shared/ref.cjs');
 require('../shared/enums.cjs');
-require('../shared/definition59.cjs');
+require('../shared/definition62.cjs');
 
 definition.registerPopup();

package/popup/index.js

@@ -1,12 +1,12 @@
-import { r as registerPopup } from '../shared/definition60.js';
+import { r as registerPopup } from '../shared/definition63.js';
 import '../shared/index.js';
 import '../shared/definition11.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition37.js';
+import '../shared/definition38.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -18,6 +18,6 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/enums.js';
-import '../shared/definition59.js';
+import '../shared/definition62.js';
 
 registerPopup();

package/progress/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('../shared/definition38.cjs');
+const definition = require('../shared/definition39.cjs');
 require('../shared/index.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/when.cjs');

package/progress/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgress } from '../shared/definition38.js';
+import { r as registerProgress } from '../shared/definition39.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/progress-ring/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('../shared/definition37.cjs');
+const definition = require('../shared/definition38.cjs');
 require('../shared/index.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/when.cjs');

package/progress-ring/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgressRing } from '../shared/definition37.js';
+import { r as registerProgressRing } from '../shared/definition38.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/radio/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('../shared/definition40.cjs');
+const definition = require('../shared/definition41.cjs');
 require('../shared/index.cjs');
 require('../shared/radio.cjs');
 require('../shared/form-associated.cjs');

package/radio/index.js

@@ -1,4 +1,4 @@
-import { b as registerRadio } from '../shared/definition40.js';
+import { b as registerRadio } from '../shared/definition41.js';
 import '../shared/index.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';

package/radio-group/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('../shared/definition39.cjs');
+const definition = require('../shared/definition40.cjs');
 require('../shared/index.cjs');
 require('../shared/direction.cjs');
 require('../shared/key-codes.cjs');

package/radio-group/index.js

@@ -1,4 +1,4 @@
-import { b as registerRadioGroup } from '../shared/definition39.js';
+import { b as registerRadioGroup } from '../shared/definition40.js';
 import '../shared/index.js';
 import '../shared/direction.js';
 import '../shared/key-codes.js';

package/range-slider/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const definition = require('../shared/definition42.cjs');
+require('../shared/index.cjs');
+require('../shared/key-codes2.cjs');
+require('../shared/affix.cjs');
+require('../shared/icon.cjs');
+require('../shared/_has.cjs');
+require('../shared/slotted.cjs');
+require('../shared/index2.cjs');
+require('../shared/class-names.cjs');
+require('../shared/when.cjs');
+require('../locales/en-US.cjs');
+require('../shared/localized.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/slider.template.cjs');
+require('../shared/aria2.cjs');
+require('../shared/ref.cjs');
+require('../shared/apply-mixins.cjs');
+
+definition.registerRangeSlider();

package/range-slider/index.js

@@ -0,0 +1,20 @@
+import { b as registerRangeSlider } from '../shared/definition42.js';
+import '../shared/index.js';
+import '../shared/key-codes2.js';
+import '../shared/affix.js';
+import '../shared/icon.js';
+import '../shared/_has.js';
+import '../shared/slotted.js';
+import '../shared/index2.js';
+import '../shared/class-names.js';
+import '../shared/when.js';
+import '../locales/en-US.js';
+import '../shared/localized.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/slider.template.js';
+import '../shared/aria2.js';
+import '../shared/ref.js';
+import '../shared/apply-mixins.js';
+
+registerRangeSlider();

package/select/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-const definition = require('../shared/definition41.cjs');
+const definition = require('../shared/definition43.cjs');
 require('../shared/index.cjs');
-require('../shared/definition60.cjs');
+require('../shared/definition63.cjs');
 require('../shared/definition11.cjs');
-require('../shared/definition26.cjs');
+require('../shared/definition27.cjs');
 require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition37.cjs');
+require('../shared/definition38.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
@@ -21,8 +21,8 @@ require('../shared/aria-global.cjs');
 require('../shared/start-end.cjs');
 require('../shared/ref.cjs');
 require('../shared/enums.cjs');
-require('../shared/definition59.cjs');
-require('../shared/definition35.cjs');
+require('../shared/definition62.cjs');
+require('../shared/definition36.cjs');
 require('../shared/dom.cjs');
 require('../shared/index2.cjs');
 require('../locales/en-US.cjs');
@@ -30,6 +30,7 @@ require('../shared/listbox.cjs');
 require('../shared/key-codes2.cjs');
 require('../shared/strings.cjs');
 require('../shared/numbers.cjs');
+require('../shared/applyMixinsWithObservables.cjs');
 require('../shared/select.options.cjs');
 
 definition.registerSelect();

package/select/index.js

@@ -1,13 +1,13 @@
-import { r as registerSelect } from '../shared/definition41.js';
+import { r as registerSelect } from '../shared/definition43.js';
 import '../shared/index.js';
-import '../shared/definition60.js';
+import '../shared/definition63.js';
 import '../shared/definition11.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition37.js';
+import '../shared/definition38.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
@@ -19,8 +19,8 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/enums.js';
-import '../shared/definition59.js';
-import '../shared/definition35.js';
+import '../shared/definition62.js';
+import '../shared/definition36.js';
 import '../shared/dom.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
@@ -28,6 +28,7 @@ import '../shared/listbox.js';
 import '../shared/key-codes2.js';
 import '../shared/strings.js';
 import '../shared/numbers.js';
+import '../shared/applyMixinsWithObservables.js';
 import '../shared/select.options.js';
 
 registerSelect();

package/selectable-box/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-const definition = require('../shared/definition42.cjs');
+const definition = require('../shared/definition44.cjs');
 require('../shared/index.cjs');
 require('../shared/definition15.cjs');
-require('../shared/definition26.cjs');
+require('../shared/definition27.cjs');
 require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
@@ -12,10 +12,11 @@ require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
 require('../shared/index2.cjs');
 require('../locales/en-US.cjs');
+require('../shared/applyMixinsWithObservables.cjs');
+require('../shared/apply-mixins.cjs');
 require('../shared/form-associated.cjs');
 require('../shared/key-codes.cjs');
-require('../shared/apply-mixins.cjs');
-require('../shared/definition40.cjs');
+require('../shared/definition41.cjs');
 require('../shared/radio.cjs');
 require('../shared/enums.cjs');
 

package/selectable-box/index.js

@@ -1,7 +1,7 @@
-import { r as registerSelectableBox } from '../shared/definition42.js';
+import { r as registerSelectableBox } from '../shared/definition44.js';
 import '../shared/index.js';
 import '../shared/definition15.js';
-import '../shared/definition26.js';
+import '../shared/definition27.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
@@ -10,10 +10,11 @@ import '../shared/affix.js';
 import '../shared/slotted.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
+import '../shared/applyMixinsWithObservables.js';
+import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
 import '../shared/key-codes.js';
-import '../shared/apply-mixins.js';
-import '../shared/definition40.js';
+import '../shared/definition41.js';
 import '../shared/radio.js';
 import '../shared/enums.js';
 

package/shared/Reflector.cjs

@@ -48,7 +48,11 @@ class Reflector {
       const value = source[propertyName];
       switch (reflectedProperty.type) {
         case "boolean-attribute":
-          index.DOM.setBooleanAttribute(this.#target, reflectedProperty.destination, Boolean(value));
+          index.DOM.setBooleanAttribute(
+            this.#target,
+            reflectedProperty.destination,
+            Boolean(value)
+          );
           break;
         case "attribute":
           index.DOM.setAttribute(this.#target, reflectedProperty.destination, value);

package/shared/Reflector.js

@@ -46,7 +46,11 @@ class Reflector {
       const value = source[propertyName];
       switch (reflectedProperty.type) {
         case "boolean-attribute":
-          DOM.setBooleanAttribute(this.#target, reflectedProperty.destination, Boolean(value));
+          DOM.setBooleanAttribute(
+            this.#target,
+            reflectedProperty.destination,
+            Boolean(value)
+          );
           break;
         case "attribute":
           DOM.setAttribute(this.#target, reflectedProperty.destination, value);

package/shared/affix.cjs

@@ -45,20 +45,27 @@ const IconAriaHidden = {
 };
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(icon.Icon);
-  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Visible) => {
+  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
     if (!icon && !slottedState) {
-      return index.html`<slot name="icon" aria-hidden="${() => ariaHidden}" ${slotted.slotted("iconSlottedContent")}></slot>`;
+      return index.html`<slot
+				name="icon"
+				aria-hidden="${() => ariaHidden}"
+				${slotted.slotted("iconSlottedContent")}
+			></slot>`;
     }
     if (!icon && slottedState) {
       return null;
     }
     const iconTemplate = index.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? index.html`<span class="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</span>` : index.html`<slot name="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</slot>`;
+    return slottedState ? index.html`<span class="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</span
+			  >` : index.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</slot
+			  >`;
   };
 };
 
 exports.AffixIcon = AffixIcon;
 exports.AffixIconWithTrailing = AffixIconWithTrailing;
-exports.IconAriaHidden = IconAriaHidden;
 exports.IconWrapper = IconWrapper;
 exports.affixIconTemplateFactory = affixIconTemplateFactory;

package/shared/affix.js

@@ -43,16 +43,24 @@ const IconAriaHidden = {
 };
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);
-  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Visible) => {
+  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
     if (!icon && !slottedState) {
-      return html`<slot name="icon" aria-hidden="${() => ariaHidden}" ${slotted("iconSlottedContent")}></slot>`;
+      return html`<slot
+				name="icon"
+				aria-hidden="${() => ariaHidden}"
+				${slotted("iconSlottedContent")}
+			></slot>`;
     }
     if (!icon && slottedState) {
       return null;
     }
     const iconTemplate = html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? html`<span class="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</span>` : html`<slot name="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</slot>`;
+    return slottedState ? html`<span class="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</span
+			  >` : html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</slot
+			  >`;
   };
 };
 
-export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b, IconAriaHidden as c };
+export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b };

package/shared/anchored.cjs

@@ -62,8 +62,14 @@ function anchored(constructor) {
      * @internal
      */
     _slottedAnchorChanged() {
-      const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
-      index.DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
+      const isOccupied = Boolean(
+        this._slottedAnchor && this._slottedAnchor.length > 0
+      );
+      index.DOM.setBooleanAttribute(
+        this,
+        "slotted-anchor",
+        isOccupied
+      );
       this.#updateAnchorEl();
     }
     #updateAnchorEl;

package/shared/anchored.js

@@ -60,8 +60,14 @@ function anchored(constructor) {
      * @internal
      */
     _slottedAnchorChanged() {
-      const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
-      DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
+      const isOccupied = Boolean(
+        this._slottedAnchor && this._slottedAnchor.length > 0
+      );
+      DOM.setBooleanAttribute(
+        this,
+        "slotted-anchor",
+        isOccupied
+      );
       this.#updateAnchorEl();
     }
     #updateAnchorEl;

package/shared/applyMixinsWithObservables.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const applyMixins = require('./apply-mixins.cjs');
+const index = require('./index.cjs');
+
+function applyMixinsWithObservables(derivedCtor, ...baseCtors) {
+  applyMixins.applyMixins(derivedCtor, ...baseCtors);
+  baseCtors.forEach((baseCtor) => {
+    index.Observable.getAccessors(baseCtor.prototype).forEach((accessor) => {
+      index.Observable.defineProperty(derivedCtor.prototype, accessor.name);
+    });
+  });
+}
+
+exports.applyMixinsWithObservables = applyMixinsWithObservables;

package/shared/applyMixinsWithObservables.js

@@ -0,0 +1,13 @@
+import { a as applyMixins } from './apply-mixins.js';
+import { O as Observable } from './index.js';
+
+function applyMixinsWithObservables(derivedCtor, ...baseCtors) {
+  applyMixins(derivedCtor, ...baseCtors);
+  baseCtors.forEach((baseCtor) => {
+    Observable.getAccessors(baseCtor.prototype).forEach((accessor) => {
+      Observable.defineProperty(derivedCtor.prototype, accessor.name);
+    });
+  });
+}
+
+export { applyMixinsWithObservables as a };