@vonage/vivid 4.24.0 → 4.26.0

package/shared/definition28.js

@@ -1,4 +1,5 @@
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -132,7 +133,7 @@ var memoizeWith = /*#__PURE__*/_curry2(function memoizeWith(keyGen, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.5";
+const ICONS_VERSION = "4.6.6";
 
 const numberConverter = {
   toView(value) {
@@ -241,6 +242,9 @@ __decorateClass([
 __decorateClass([
   observable
 ], Icon.prototype, "iconLoaded", 2);
+__decorateClass([
+  attr
+], Icon.prototype, "label", 2);
 __decorateClass([
   attr
 ], Icon.prototype, "name", 2);
@@ -253,24 +257,35 @@ const getClasses = ({ connotation, size }) => classNames(
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
-const iconTemplate = html`
-	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
-		<slot>
-			${when(
-  (x) => !x.iconLoaded,
-  html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
-)}
-			${when(
-  (x) => x.iconLoaded && x._svg,
-  (x) => html`${x._svg}`
-)}
-		</slot>
-	</figure>
-`;
+const iconTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+  const isDecorative = (x) => !x.label || x.label.trim().length === 0;
+  return html`
+		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
+			<slot>
+				${when(
+    (x) => !x.iconLoaded,
+    html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+  )}
+				${when(
+    (x) => x.iconLoaded && x._svg,
+    (x) => html`${x._svg}`
+  )}
+			</slot>
+			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
+		</figure>
+	`;
+};
 
-const iconDefinition = defineVividComponent("icon", Icon, iconTemplate, [], {
-  styles
-});
+const iconDefinition = defineVividComponent(
+  "icon",
+  Icon,
+  iconTemplate,
+  [visuallyHiddenDefinition],
+  {
+    styles
+  }
+);
 const registerIcon = createRegisterFunction(iconDefinition);
 
 export { Icon as I, iconDefinition as i, memoizeWith as m, registerIcon as r };

package/shared/definition29.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;

package/shared/definition3.cjs

@@ -4,7 +4,7 @@ const vividElement = require('./vivid-element.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition3.js

@@ -1,8 +1,8 @@
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {