@vonage/vivid 3.36.0 → 3.38.0

package/locales/en-US.js

@@ -11,7 +11,7 @@ const enUS = {
         "July",
         "August",
         "September",
-        "Oktober",
+        "October",
         "November",
         "December"
       ],
@@ -25,7 +25,7 @@ const enUS = {
         "Jul",
         "Aug",
         "Sep",
-        "Okt",
+        "Oct",
         "Nov",
         "Dec"
       ]
@@ -46,13 +46,37 @@ const enUS = {
     dateFormat: "MM/dd/yyyy",
     dateFormatPlaceholder: "MM/DD/YYYY",
     chooseDateLabel: "Choose date",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (date) => `Change date, ${date}`
+    ),
+    chooseDatesLabel: "Choose dates",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (range) => `Change dates, ${range}`
+    ),
     prevYearLabel: "Previous year",
     prevMonthLabel: "Previous month",
     nextMonthLabel: "Next month",
     nextYearLabel: "Next year",
     clearLabel: "Clear",
     okLabel: "OK",
-    invalidDateError: "Please enter a valid date."
+    invalidDateError: "Please enter a valid date.",
+    invalidDateRangeError: "Please enter a valid date range.",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (minDate) => `The start date must be ${minDate} or later.`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (maxDate) => `The end date must be ${maxDate} or earlier.`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "You can't select files of this type.",
+    maxFilesExceededError: "You can't select any more files.",
+    fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
+    removeFileLabel: "Remove file"
   }
 };
 

package/locales/ja-JP.js

@@ -46,13 +46,37 @@ const jaJP = {
     dateFormat: "yyyy年MM月dd日",
     dateFormatPlaceholder: "YYYY年MM月DD日",
     chooseDateLabel: "日付を選択",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (date) => `日付を変更, ${date}`
+    ),
+    chooseDatesLabel: "日付を選択",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (range) => `日付を変更, ${range}`
+    ),
     prevYearLabel: "前年",
     prevMonthLabel: "前月",
     nextMonthLabel: "次月",
     nextYearLabel: "翌年",
     clearLabel: "クリア",
     okLabel: "OK",
-    invalidDateError: "有効な日付を入力してください。"
+    invalidDateError: "有効な日付を入力してください。",
+    invalidDateRangeError: "有効な日付範囲を入力してください。",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (minDate) => `開始日は${minDate}以降である必要があります。`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (maxDate) => `終了日は${maxDate}以前である必要があります。`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "この種類のファイルは選択できません。",
+    maxFilesExceededError: "これ以上ファイルを選択できません。",
+    fileTooBigError: "ファイルが大きすぎます ({{filesize}}MiB)。最大ファイルサイズ: {{maxFilesize}}MiB。",
+    removeFileLabel: "ファイルを削除"
   }
 };
 

package/locales/zh-CN.js

@@ -46,13 +46,37 @@ const zhCN = {
     dateFormat: "yyyy年MM月dd日",
     dateFormatPlaceholder: "YYYY年MM月DD日",
     chooseDateLabel: "选择日期",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (date) => `更改日期, ${date}`
+    ),
+    chooseDatesLabel: "选择日期",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (range) => `更改日期, ${range}`
+    ),
     prevYearLabel: "上一年",
     prevMonthLabel: "上个月",
     nextMonthLabel: "下个月",
     nextYearLabel: "下一年",
     clearLabel: "清除",
     okLabel: "确定",
-    invalidDateError: "请输入有效的日期。"
+    invalidDateError: "请输入有效的日期。",
+    invalidDateRangeError: "请输入有效的日期范围。",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (minDate) => `开始日期必须是${minDate}或之后。`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (maxDate) => `结束日期必须是${maxDate}或之前。`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "您不能选择此类型的文件。",
+    maxFilesExceededError: "您不能再选择任何文件。",
+    fileTooBigError: "文件太大 ({{filesize}}MiB)。最大文件大小: {{maxFilesize}}MiB。",
+    removeFileLabel: "删除文件"
   }
 };
 

package/menu/index.js

@@ -1,17 +1,18 @@
-import { r as registerMenu } from '../shared/definition27.js';
+import { r as registerMenu } from '../shared/definition28.js';
 import '../shared/index.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/definition10.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
@@ -20,11 +21,9 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition56.js';
-import '../shared/definition26.js';
+import '../shared/definition57.js';
+import '../shared/definition27.js';
 import '../shared/direction.js';
 import '../shared/dom.js';
-import '../shared/node-observation.js';
-import '../shared/slotted.js';
 
 registerMenu();

package/menu-item/index.js

@@ -1,13 +1,14 @@
-import { r as registerMenuItem } from '../shared/definition26.js';
+import { r as registerMenuItem } from '../shared/definition27.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/apply-mixins.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
@@ -15,7 +16,5 @@ import '../shared/direction.js';
 import '../shared/key-codes.js';
 import '../shared/dom.js';
 import '../shared/focus2.js';
-import '../shared/node-observation.js';
-import '../shared/slotted.js';
 
 registerMenuItem();

package/nav/index.js

@@ -1,4 +1,4 @@
-import { r as registerNav } from '../shared/definition30.js';
+import { r as registerNav } from '../shared/definition31.js';
 import '../shared/index.js';
 
 registerNav();

package/nav-disclosure/index.js

@@ -1,13 +1,14 @@
-import { r as registerNavDisclosure } from '../shared/definition28.js';
+import { r as registerNavDisclosure } from '../shared/definition29.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/apply-mixins.js';
 import '../shared/focus2.js';
 import '../shared/ref.js';

package/nav-item/index.js

@@ -1,13 +1,14 @@
-import { r as registerNavItem } from '../shared/definition29.js';
+import { r as registerNavItem } from '../shared/definition30.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/text-anchor.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';

package/note/index.js

@@ -1,11 +1,12 @@
-import { r as registerNote } from '../shared/definition31.js';
+import { r as registerNote } from '../shared/definition32.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/apply-mixins.js';

package/number-field/index.js

@@ -1,16 +1,17 @@
-import { r as registerNumberField } from '../shared/definition32.js';
+import { r as registerNumberField } from '../shared/definition33.js';
 import '../shared/index.js';
 import '../shared/definition10.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
@@ -19,7 +20,7 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition19.js';
+import '../shared/definition20.js';
 import '../shared/aria.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';

package/option/index.js

@@ -1,13 +1,14 @@
-import { r as registerOption } from '../shared/definition33.js';
+import { r as registerOption } from '../shared/definition34.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.36.0",
+  "version": "3.38.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.js",

package/pagination/index.js

@@ -1,16 +1,17 @@
-import { r as registerPagination } from '../shared/definition34.js';
+import { r as registerPagination } from '../shared/definition35.js';
 import '../shared/definition10.js';
 import '../shared/index.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
@@ -19,7 +20,6 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/node-observation.js';
 import '../shared/children.js';
 import '../shared/repeat.js';
 

package/popup/index.js

@@ -1,16 +1,17 @@
-import { r as registerPopup } from '../shared/definition57.js';
+import { r as registerPopup } from '../shared/definition58.js';
 import '../shared/index.js';
 import '../shared/definition10.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
@@ -19,6 +20,6 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition56.js';
+import '../shared/definition57.js';
 
 registerPopup();

package/progress/index.js

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

package/progress-ring/index.js

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

package/radio/index.js

@@ -1,6 +1,6 @@
-import { b as registerRadio } from '../shared/definition38.js';
+import { b as registerRadio } from '../shared/definition39.js';
 import '../shared/index.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';

package/radio-group/index.js

@@ -1,4 +1,4 @@
-import { b as registerRadioGroup } from '../shared/definition37.js';
+import { b as registerRadioGroup } from '../shared/definition38.js';
 import '../shared/index.js';
 import '../shared/direction.js';
 import '../shared/key-codes.js';
@@ -6,8 +6,7 @@ import '../shared/aria.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';
 import '../shared/aria2.js';
-import '../shared/node-observation.js';
-import '../shared/when.js';
 import '../shared/slotted.js';
+import '../shared/when.js';
 
 registerRadioGroup();

package/select/index.js

@@ -1,17 +1,18 @@
-import { r as registerSelect } from '../shared/definition39.js';
+import { r as registerSelect } from '../shared/definition40.js';
 import '../shared/index.js';
-import '../shared/definition55.js';
+import '../shared/definition56.js';
 import '../shared/focus.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/definition10.js';
-import '../shared/definition24.js';
+import '../shared/definition25.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition35.js';
+import '../shared/definition36.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
+import '../shared/slotted.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
@@ -20,8 +21,8 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition56.js';
-import '../shared/definition33.js';
+import '../shared/definition57.js';
+import '../shared/definition34.js';
 import '../shared/dom.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
@@ -29,7 +30,5 @@ import '../shared/listbox.js';
 import '../shared/strings.js';
 import '../shared/numbers.js';
 import '../shared/select.options.js';
-import '../shared/slotted.js';
-import '../shared/node-observation.js';
 
 registerSelect();

package/shared/affix.js

@@ -1,5 +1,6 @@
 import { I as Icon } from './icon.js';
 import { a as attr, h as html } from './index.js';
+import { s as slotted } from './slotted.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,6 +18,9 @@ class AffixIcon {
 __decorateClass([
   attr
 ], AffixIcon.prototype, "icon", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], AffixIcon.prototype, "iconSlottedContent", 2);
 class AffixIconWithTrailing extends AffixIcon {
   constructor() {
     super(...arguments);
@@ -37,7 +41,7 @@ const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);
   return (icon, slottedState = IconWrapper.Span) => {
     if (!icon && !slottedState) {
-      return html`<slot name="icon"></slot>`;
+      return html`<slot name="icon" ${slotted("iconSlottedContent")}></slot>`;
     }
     if (!icon && slottedState) {
       return null;

package/shared/apply-mixins.js

@@ -1,4 +1,4 @@
-import { b as AttributeConfiguration } from './index.js';
+import { A as AttributeConfiguration } from './index.js';
 
 /**
  * Apply mixins to a constructor.

package/shared/children.js

@@ -1,5 +1,5 @@
-import { A as AttachedBehaviorHTMLDirective } from './index.js';
-import { N as NodeObservationBehavior } from './node-observation.js';
+import { b as AttachedBehaviorHTMLDirective } from './index.js';
+import { N as NodeObservationBehavior } from './slotted.js';
 
 /**
  * The runtime behavior for child node observation.

package/shared/date-picker/calendar/dateRange.d.ts

@@ -0,0 +1,5 @@
+import type { DateStr } from './dateStr';
+export interface DateRange {
+    start: DateStr;
+    end: DateStr;
+}

package/shared/date-picker/calendar/presentationDateRange.d.ts

@@ -0,0 +1,5 @@
+import type { DatePickerLocale } from '../locale';
+import type { DateRange } from './dateRange';
+export declare const formatRange: (from: string, to: string) => string;
+export declare const formatPresentationDateRange: (dateRange: DateRange, locale: DatePickerLocale) => string;
+export declare const parsePresentationDateRange: (presentationDateRange: string, locale: DatePickerLocale) => DateRange;

package/shared/date-picker/date-picker-base.d.ts

@@ -0,0 +1,20 @@
+import { FormElementHelperText, Localized } from '../patterns';
+import { type DateStr } from './calendar/dateStr';
+import { FormAssociatedDatePickerBase } from './date-picker-base.form-associated';
+export declare abstract class DatePickerBase extends FormAssociatedDatePickerBase {
+    #private;
+    abstract label: string;
+    min: string;
+    max: string;
+    initialValue: string;
+    currentValue: string;
+    readOnly: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected abstract _getCustomValidationError(): string | null;
+    protected abstract _getSelectedDates(): DateStr[];
+    abstract _onDateClick(date: DateStr): void;
+}
+export interface DatePickerBase extends Localized, FormElementHelperText {
+}

package/shared/date-picker/date-picker-base.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _DatePickerBase extends FoundationElement {
+}
+interface _DatePickerBase extends FormAssociated {
+}
+declare const FormAssociatedDatePickerBase_base: typeof _DatePickerBase;
+export declare class FormAssociatedDatePickerBase extends FormAssociatedDatePickerBase_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/shared/date-picker/date-picker-base.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { DatePickerBase } from './date-picker-base';
+export declare const DatePickerBaseTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<DatePickerBase>;

package/{lib → shared}/date-picker/locale.d.ts

@@ -11,6 +11,9 @@ export interface DatePickerLocale {
     dateFormat: string;
     dateFormatPlaceholder: string;
     chooseDateLabel: string;
+    changeDateLabel: (date: string) => string;
+    chooseDatesLabel: string;
+    changeDatesLabel: (range: string) => string;
     prevYearLabel: string;
     prevMonthLabel: string;
     nextMonthLabel: string;
@@ -18,4 +21,7 @@ export interface DatePickerLocale {
     clearLabel: string;
     okLabel: string;
     invalidDateError: string;
+    invalidDateRangeError: string;
+    startDateAfterMinDateError: (minDate: string) => string;
+    endDateBeforeMaxDateError: (maxDate: string) => string;
 }

package/shared/definition.js

@@ -1,7 +1,7 @@
 import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition24.js';
-import { f as focusRegistries } from './definition55.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
+import { a as iconRegistries } from './definition25.js';
+import { f as focusRegistries } from './definition56.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { S as StartEnd } from './start-end.js';
 import { f as focusTemplateFactory } from './focus2.js';
@@ -76,7 +76,7 @@ __decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins(AccordionItem$1, StartEnd);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus-visible {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\n.icon {\n  color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) .icon {\n  font: inherit;\n}\n.heading-button.size-condensed .icon {\n  font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) .icon:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Fri, 13 Oct 2023 14:45:50 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus-visible {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\nslot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) slot[name=icon] {\n  font: inherit;\n}\n.heading-button.size-condensed slot[name=icon] {\n  font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) slot[name=icon]:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -124,7 +124,7 @@ const header = (context, hTag) => {
 			>
 				${() => focusTemplate}
 
-				${(x) => x.icon && !x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
 
 				<span class="heading-content">${(x) => x.heading}</span>