@vonage/vivid 4.24.0 → 4.26.0

package/shared/affix.js

@@ -45,7 +45,7 @@ const IconAriaHidden = {
   Hidden: "true"};
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);
-  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
+  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = { label: "", announceOnUpdate: false }) => {
     if (!icon && !slottedState) {
       return html`<slot
 				name="icon"
@@ -56,13 +56,18 @@ const affixIconTemplateFactory = (context) => {
     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
-			  >`;
+    const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+    const wrapperTag = slottedState ? "span" : "slot";
+    return html`<${wrapperTag}
+					class="${() => slottedState ? "icon" : void 0}"
+					:name="${() => slottedState ? void 0 : "icon"}"
+					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
+					:role="${() => announcement?.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => announcement?.announceOnUpdate ? "polite" : void 0}"
+			  >
+					${iconTemplate}
+			  </${wrapperTag}>`;
   };
 };
 
-export { AffixIconWithTrailing as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIcon as b };
+export { AffixIconWithTrailing as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIcon as b, IconAriaHidden as c };

package/shared/aria/delegates-aria.d.ts

@@ -9,10 +9,10 @@ export declare function delegateAria<T>(boundProperties?: BoundAriaProperties<T>
 export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
+        connectedCallback(): void;
         specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -335,6 +335,12 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
     };
 } & T;
 export type DelegatesAriaElement = MixinType<typeof DelegatesAria>;

package/shared/aria/host-semantics.d.ts

@@ -6,10 +6,10 @@ export declare function applyHostSemantics<T>(boundProperties?: BoundAriaPropert
 export declare const HostSemantics: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
+        connectedCallback(): void;
         specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -332,6 +332,12 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
     };
 } & T;
 export type HostSemanticsElement = MixinType<typeof HostSemantics>;

package/shared/breadcrumb-item.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
-const anchor = require('./anchor.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
+const linkable = require('./linkable.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends delegatesAria.DelegatesAria(vividElement.VividElement) {
+class BreadcrumbItem extends linkable.Linkable(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.separator = true;
@@ -26,6 +24,5 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], BreadcrumbItem.prototype, "separator");
-applyMixins.applyMixins(BreadcrumbItem, anchor.Anchor);
 
 exports.BreadcrumbItem = BreadcrumbItem;

package/shared/breadcrumb-item.js

@@ -1,7 +1,5 @@
-import { A as Anchor } from './anchor.js';
 import { V as VividElement, a as attr, o as observable } from './vivid-element.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { L as Linkable } from './linkable.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends DelegatesAria(VividElement) {
+class BreadcrumbItem extends Linkable(VividElement) {
   constructor() {
     super(...arguments);
     this.separator = true;
@@ -24,6 +22,5 @@ __decorateClass([
 __decorateClass([
   observable
 ], BreadcrumbItem.prototype, "separator");
-applyMixins(BreadcrumbItem, Anchor);
 
 export { BreadcrumbItem as B };

package/shared/button.cjs

@@ -1,17 +1,8 @@
 'use strict';
 
 const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
-
-class _FoundationButton extends vividElement.VividElement {
-}
-class FormAssociatedButton extends formAssociated.FormAssociated(_FoundationButton) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
+const formAssociated = require('./form-associated.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,9 +13,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class VividFoundationButton extends delegatesAria.DelegatesAria(FormAssociatedButton) {
+class VividFoundationButton extends delegatesAria.DelegatesAria(
+  formAssociated.FormAssociated(vividElement.VividElement)
+) {
   constructor() {
     super(...arguments);
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
     /**
      * Prevent events to propagate if disabled
      * @internal
@@ -121,6 +118,11 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(FormAssociatedBu
     super.connectedCallback();
     this.proxy.setAttribute("type", this.type);
     this.handleUnsupportedDelegatesFocus();
+    if (this.autofocus) {
+      vividElement.DOM.queueUpdate(() => {
+        this.focus();
+      });
+    }
     const elements = Array.from(this.control.children);
     if (elements) {
       elements.forEach((span) => {

package/shared/button.js

@@ -1,15 +1,6 @@
 import { D as DelegatesAria } from './delegates-aria.js';
+import { V as VividElement, D as DOM, a as attr } from './vivid-element.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement, a as attr } from './vivid-element.js';
-
-class _FoundationButton extends VividElement {
-}
-class FormAssociatedButton extends FormAssociated(_FoundationButton) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,9 +11,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class VividFoundationButton extends DelegatesAria(FormAssociatedButton) {
+class VividFoundationButton extends DelegatesAria(
+  FormAssociated(VividElement)
+) {
   constructor() {
     super(...arguments);
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
     /**
      * Prevent events to propagate if disabled
      * @internal
@@ -119,6 +116,11 @@ class VividFoundationButton extends DelegatesAria(FormAssociatedButton) {
     super.connectedCallback();
     this.proxy.setAttribute("type", this.type);
     this.handleUnsupportedDelegatesFocus();
+    if (this.autofocus) {
+      DOM.queueUpdate(() => {
+        this.focus();
+      });
+    }
     const elements = Array.from(this.control.children);
     if (elements) {
       elements.forEach((span) => {

package/shared/calendar-picker.template.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const definition$1 = require('./definition23.cjs');
+const divider = require('./divider.cjs');
 const definition = require('./definition11.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
@@ -6140,7 +6140,7 @@ function renderDialogHeader(context) {
 	</div>`;
 }
 function renderCalendarGrid(context) {
-  const dividerTag = context.tagFor(definition$1.Divider);
+  const dividerTag = context.tagFor(divider.Divider);
   return vividElement.html`
 		<div
 			class='calendar'
@@ -6245,7 +6245,7 @@ function renderCalendarGrid(context) {
   )}`;
 }
 function renderMonthPickerGrid(context) {
-  const dividerTag = context.tagFor(definition$1.Divider);
+  const dividerTag = context.tagFor(divider.Divider);
   return vividElement.html`
 		<${dividerTag}
 			class='months-separator'

package/shared/calendar-picker.template.js

@@ -1,5 +1,5 @@
 import { o as observable, v as volatile, D as DOM, a as attr, h as html } from './vivid-element.js';
-import { D as Divider } from './definition23.js';
+import { D as Divider } from './divider.js';
 import { B as Button } from './definition11.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';

package/shared/char-count.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+const definition = require('./definition66.cjs');
+const localized = require('./localized.cjs');
+const vividElement = require('./vivid-element.cjs');
+const ref = require('./ref.cjs');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const WithCharCount = (Base) => {
+  class ElementWithCharCount extends localized.Localized(Base) {
+    constructor() {
+      super(...arguments);
+      this.charCount = false;
+      /**
+       * Timeout of the character count update,
+       * used to debounce screen reader announcements
+       * @internal
+       */
+      this.#charCountTimeout = null;
+      /**
+       * ID of the character count limit description
+       * @internal
+       */
+      this._charCountDescribedBy = "char-count-description";
+      /**
+       * @internal
+       */
+      this._renderCharCountRemaining = () => {
+        if (!this.charCount || !this.maxlength) {
+          return;
+        }
+        this.charCountRemaining.textContent = this.locale.charCount.charactersRemainingMessage(
+          this.maxlength - this.value.length
+        );
+      };
+      /**
+       * @internal
+       */
+      this._updateCharCountRemaining = () => {
+        const delay = 1e3;
+        if (this.#charCountTimeout !== null) {
+          clearTimeout(this.#charCountTimeout);
+        }
+        this.#charCountTimeout = setTimeout(
+          () => this._renderCharCountRemaining(),
+          delay
+        );
+      };
+      /**
+       * @internal
+       */
+      this._getCharCountTemplate = (context) => {
+        const visuallyHiddenTag = context.tagFor(definition.VisuallyHidden);
+        return vividElement.html`
+				<div class="char-count">
+					<span aria-hidden="true"
+						> ${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span
+					>
+					<${visuallyHiddenTag} id="${(x) => x._charCountDescribedBy}"
+						>${(x) => x.locale.charCount.charactersLimitMessage(
+          x.maxlength
+        )}</${visuallyHiddenTag}
+					>
+					<${visuallyHiddenTag} id="char-count-remaining" aria-live="polite" ${ref.ref(
+          "charCountRemaining"
+        )}
+						></${visuallyHiddenTag}
+					>
+				</div>
+			`;
+      };
+    }
+    #charCountTimeout;
+  }
+  __decorateClass([
+    vividElement.attr({
+      attribute: "char-count",
+      mode: "boolean"
+    })
+  ], ElementWithCharCount.prototype, "charCount");
+  return ElementWithCharCount;
+};
+
+exports.WithCharCount = WithCharCount;

package/shared/char-count.js

@@ -0,0 +1,90 @@
+import { V as VisuallyHidden } from './definition66.js';
+import { L as Localized } from './localized.js';
+import { a as attr, h as html } from './vivid-element.js';
+import { r as ref } from './ref.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const WithCharCount = (Base) => {
+  class ElementWithCharCount extends Localized(Base) {
+    constructor() {
+      super(...arguments);
+      this.charCount = false;
+      /**
+       * Timeout of the character count update,
+       * used to debounce screen reader announcements
+       * @internal
+       */
+      this.#charCountTimeout = null;
+      /**
+       * ID of the character count limit description
+       * @internal
+       */
+      this._charCountDescribedBy = "char-count-description";
+      /**
+       * @internal
+       */
+      this._renderCharCountRemaining = () => {
+        if (!this.charCount || !this.maxlength) {
+          return;
+        }
+        this.charCountRemaining.textContent = this.locale.charCount.charactersRemainingMessage(
+          this.maxlength - this.value.length
+        );
+      };
+      /**
+       * @internal
+       */
+      this._updateCharCountRemaining = () => {
+        const delay = 1e3;
+        if (this.#charCountTimeout !== null) {
+          clearTimeout(this.#charCountTimeout);
+        }
+        this.#charCountTimeout = setTimeout(
+          () => this._renderCharCountRemaining(),
+          delay
+        );
+      };
+      /**
+       * @internal
+       */
+      this._getCharCountTemplate = (context) => {
+        const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+        return html`
+				<div class="char-count">
+					<span aria-hidden="true"
+						> ${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span
+					>
+					<${visuallyHiddenTag} id="${(x) => x._charCountDescribedBy}"
+						>${(x) => x.locale.charCount.charactersLimitMessage(
+          x.maxlength
+        )}</${visuallyHiddenTag}
+					>
+					<${visuallyHiddenTag} id="char-count-remaining" aria-live="polite" ${ref(
+          "charCountRemaining"
+        )}
+						></${visuallyHiddenTag}
+					>
+				</div>
+			`;
+      };
+    }
+    #charCountTimeout;
+  }
+  __decorateClass([
+    attr({
+      attribute: "char-count",
+      mode: "boolean"
+    })
+  ], ElementWithCharCount.prototype, "charCount");
+  return ElementWithCharCount;
+};
+
+export { WithCharCount as W };

package/shared/definition.cjs

@@ -4,6 +4,7 @@ const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition28.cjs');
 const affix = require('./affix.cjs');
 const ref = require('./ref.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
@@ -52,12 +53,18 @@ __decorateClass([
 __decorateClass([
   vividElement.attr
 ], AccordionItem.prototype, "heading");
+__decorateClass([
+  vividElement.observable
+], AccordionItem.prototype, "_headingSlottedContent");
 __decorateClass([
   vividElement.attr({ mode: "boolean", attribute: "no-indicator" })
 ], AccordionItem.prototype, "noIndicator");
 __decorateClass([
   vividElement.attr
 ], AccordionItem.prototype, "meta");
+__decorateClass([
+  vividElement.observable
+], AccordionItem.prototype, "_metaSlottedContent");
 __decorateClass([
   vividElement.attr
 ], AccordionItem.prototype, "size");
@@ -77,13 +84,22 @@ const header = (context, hTag) => {
 
 				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, affix.IconWrapper.Slot) : null}
 
-				<span class="heading-content">${(x) => x.heading}</span>
+				<span class="heading-content">
+					<slot name="heading" ${slotted.slotted("_headingSlottedContent")}></slot>
+					${when.when(
+    (x) => x.heading && !x._headingSlottedContent?.length,
+    vividElement.html`${(x) => x.heading}`
+  )}
+				</span>
 
-				${when.when((x) => x.meta, vividElement.html`<span class="meta">${(x) => x.meta}</span>`)}
+				<span class="meta">
+					<slot name="meta" ${slotted.slotted("_metaSlottedContent")}></slot>
+					${when.when((x) => x.meta && !x._metaSlottedContent?.length, vividElement.html`${(x) => x.meta}`)}
+				</span>
 
 				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
 				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
-    x.expanded ? "chevron-up-solid" : "chevron-down-solid"
+    x.expanded ? "chevron-up-line" : "chevron-down-line"
   ) : null}
 
 			</button>

package/shared/definition.js

@@ -1,7 +1,8 @@
-import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, o as observable, 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 { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
@@ -50,12 +51,18 @@ __decorateClass([
 __decorateClass([
   attr
 ], AccordionItem.prototype, "heading");
+__decorateClass([
+  observable
+], AccordionItem.prototype, "_headingSlottedContent");
 __decorateClass([
   attr({ mode: "boolean", attribute: "no-indicator" })
 ], AccordionItem.prototype, "noIndicator");
 __decorateClass([
   attr
 ], AccordionItem.prototype, "meta");
+__decorateClass([
+  observable
+], AccordionItem.prototype, "_metaSlottedContent");
 __decorateClass([
   attr
 ], AccordionItem.prototype, "size");
@@ -75,13 +82,22 @@ const header = (context, hTag) => {
 
 				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
 
-				<span class="heading-content">${(x) => x.heading}</span>
+				<span class="heading-content">
+					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
+					${when(
+    (x) => x.heading && !x._headingSlottedContent?.length,
+    html`${(x) => x.heading}`
+  )}
+				</span>
 
-				${when((x) => x.meta, html`<span class="meta">${(x) => x.meta}</span>`)}
+				<span class="meta">
+					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
+					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
+				</span>
 
 				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
 				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
-    x.expanded ? "chevron-up-solid" : "chevron-down-solid"
+    x.expanded ? "chevron-up-line" : "chevron-down-line"
   ) : null}
 
 			</button>

package/shared/definition10.js

@@ -1,4 +1,4 @@
-import { h as html, V as VividElement, o as observable, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { h as html, V as VividElement, o as observable, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { d as delegateAria, D as DelegatesAria } from './delegates-aria.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { B as BreadcrumbItem } from './breadcrumb-item.js';