@vonage/vivid 4.25.0 → 4.27.0

package/package.json

@@ -1,46 +1,74 @@
 {
-	"name": "@vonage/vivid",
-	"version": "4.25.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"
-	},
-	"sideEffects": [
-		"./*/index.js",
-		"./*/index.cjs",
-		"*.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",
-	"dependencies": {
-		"@floating-ui/dom": "^1.6.13",
-		"@microsoft/fast-element": "^1.14.0",
-		"@microsoft/fast-web-utilities": "^6.0.0"
-	}
-}
+  "name": "@vonage/vivid",
+  "version": "4.27.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"
+  },
+  "sideEffects": [
+    "./*/index.js",
+    "./*/index.cjs",
+    "*.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",
+  "scripts": {
+    "prebuild": "cem analyze --config ./cem.config.mjs",
+    "build": "vite build",
+    "postbuild": "api-extractor run -c ./dist/api-extractor.json && tsx scripts/copyPackageJson.ts",
+    "dev": "WATCH_MODE=true vite build -w",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --max-warnings=0 --fix",
+    "stylelint": "stylelint 'src/**/*.{css,scss}'",
+    "stylelint:fix": "stylelint 'src/**/*.{css,scss}' --fix",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:docker": "PW_TEST_CONNECT_WS_ENDPOINT=ws://0.0.0.0:3000/ playwright test",
+    "e2e:docker:ui": "PW_TEST_CONNECT_WS_ENDPOINT=ws://0.0.0.0:3000/ playwright test --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "@microsoft/fast-element": "^1.14.0",
+    "@microsoft/fast-web-utilities": "^6.0.0"
+  },
+  "devDependencies": {
+    "@repo/cem-analyzer-plugins": "*",
+    "@repo/consts": "*",
+    "@repo/eslint-config": "*",
+    "@repo/eslint-plugin-repo": "*",
+    "@repo/shared": "*",
+    "@repo/stylelint-config": "*",
+    "@repo/styles": "*",
+    "@repo/typescript-config": "*",
+    "@repo/vitest-config": "*"
+  }
+}

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;

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;

package/shared/calendar-picker.template.cjs

@@ -3,6 +3,7 @@
 const vividElement = require('./vivid-element.cjs');
 const divider = require('./divider.cjs');
 const definition = require('./definition11.cjs');
+const definition$1 = require('./definition66.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -5775,6 +5776,9 @@ const CalendarPicker = (Base) => {
           type: "month-picker",
           title: `${this._monthPickerYear}`,
           titleClickable: true,
+          titleAriaLabel: this.locale.calendarPicker.showCalendarForMonthLabel(
+            `${this.locale.calendarPicker.months.name[this._selectedMonth.month]} ${this._selectedMonth.year}`
+          ),
           prevYearButton: true,
           nextYearButton: true,
           months: buildMonthPickerGrid(
@@ -5793,6 +5797,9 @@ const CalendarPicker = (Base) => {
             type: "calendar",
             title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
             titleClickable: isSingle,
+            titleAriaLabel: this.locale.calendarPicker.changeMonthLabel(
+              `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`
+            ),
             prevYearButton: isFirst && isSingle,
             prevMonthButton: isFirst,
             nextMonthButton: isLast,
@@ -6089,6 +6096,7 @@ function renderDialogHeader(context) {
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action button"
 						aria-live="polite"
+						aria-label="${(x) => x.titleAriaLabel}"
 						@click="${(_, c) => c.parent._onTitleActionClick()}"
 					>
 						${(x) => x.title}
@@ -6141,6 +6149,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(divider.Divider);
+  const visuallyHiddenTag = context.tagFor(definition$1.VisuallyHidden);
   return vividElement.html`
 		<div
 			class='calendar'
@@ -6213,16 +6222,9 @@ function renderCalendarGrid(context) {
           x.date
         )}"
 											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-											aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(
-          x.date
-        )}"
 											data-date="${(x) => x.date}"
-											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(
-          x.date
-        )}"
-											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(
-          x.date
-        )}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
 											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
           x.date
         )}"
@@ -6235,6 +6237,21 @@ function renderCalendarGrid(context) {
         )}"
 										>
 											${(x) => x.label}
+											<${visuallyHiddenTag}>${(x, c) => {
+          const picker = c.parentContext.parentContext.parent;
+          const announcements = [];
+          if (x.date === picker._currentDate) {
+            announcements.push(
+              picker.locale.calendarPicker.todayLabel
+            );
+          }
+          if (picker._isDateAriaSelected(x.date)) {
+            announcements.push(
+              picker.locale.calendarPicker.selectedLabel
+            );
+          }
+          return announcements.join(" ");
+        }}</${visuallyHiddenTag}>
 										</button>
 									</span>`
       )}
@@ -6246,6 +6263,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(divider.Divider);
+  const visuallyHiddenTag = context.tagFor(definition$1.VisuallyHidden);
   return vividElement.html`
 		<${dividerTag}
 			class='months-separator'
@@ -6288,10 +6306,6 @@ function renderMonthPickerGrid(context) {
         c.parentContext.parentContext.parent._tabbableMonth
       ) ? 2 : -1}"
 										aria-label="${(x) => x.monthName}"
-										aria-selected="${(x, c) => areMonthsEqual(
-        x.month,
-        c.parentContext.parentContext.parent._selectedMonth
-      )}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
         x.month
@@ -6308,6 +6322,19 @@ function renderMonthPickerGrid(context) {
       )}"
 									>
 										${(x) => x.label}
+										<${visuallyHiddenTag}>${(x, c) => {
+        const picker = c.parentContext.parentContext.parent;
+        const announcements = [];
+        if (areMonthsEqual(x.month, picker._currentMonth)) {
+          announcements.push(picker.locale.calendarPicker.currentLabel);
+        }
+        if (areMonthsEqual(x.month, picker._selectedMonth)) {
+          announcements.push(
+            picker.locale.calendarPicker.selectedLabel
+          );
+        }
+        return announcements.join(" ");
+      }}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`

package/shared/calendar-picker.template.js

@@ -1,6 +1,7 @@
 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 './divider.js';
 import { B as Button } from './definition11.js';
+import { V as VisuallyHidden } from './definition66.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -5773,6 +5774,9 @@ const CalendarPicker = (Base) => {
           type: "month-picker",
           title: `${this._monthPickerYear}`,
           titleClickable: true,
+          titleAriaLabel: this.locale.calendarPicker.showCalendarForMonthLabel(
+            `${this.locale.calendarPicker.months.name[this._selectedMonth.month]} ${this._selectedMonth.year}`
+          ),
           prevYearButton: true,
           nextYearButton: true,
           months: buildMonthPickerGrid(
@@ -5791,6 +5795,9 @@ const CalendarPicker = (Base) => {
             type: "calendar",
             title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
             titleClickable: isSingle,
+            titleAriaLabel: this.locale.calendarPicker.changeMonthLabel(
+              `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`
+            ),
             prevYearButton: isFirst && isSingle,
             prevMonthButton: isFirst,
             nextMonthButton: isLast,
@@ -6087,6 +6094,7 @@ function renderDialogHeader(context) {
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action button"
 						aria-live="polite"
+						aria-label="${(x) => x.titleAriaLabel}"
 						@click="${(_, c) => c.parent._onTitleActionClick()}"
 					>
 						${(x) => x.title}
@@ -6139,6 +6147,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<div
 			class='calendar'
@@ -6211,16 +6220,9 @@ function renderCalendarGrid(context) {
           x.date
         )}"
 											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-											aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(
-          x.date
-        )}"
 											data-date="${(x) => x.date}"
-											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(
-          x.date
-        )}"
-											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(
-          x.date
-        )}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
 											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
           x.date
         )}"
@@ -6233,6 +6235,21 @@ function renderCalendarGrid(context) {
         )}"
 										>
 											${(x) => x.label}
+											<${visuallyHiddenTag}>${(x, c) => {
+          const picker = c.parentContext.parentContext.parent;
+          const announcements = [];
+          if (x.date === picker._currentDate) {
+            announcements.push(
+              picker.locale.calendarPicker.todayLabel
+            );
+          }
+          if (picker._isDateAriaSelected(x.date)) {
+            announcements.push(
+              picker.locale.calendarPicker.selectedLabel
+            );
+          }
+          return announcements.join(" ");
+        }}</${visuallyHiddenTag}>
 										</button>
 									</span>`
       )}
@@ -6244,6 +6261,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<${dividerTag}
 			class='months-separator'
@@ -6286,10 +6304,6 @@ function renderMonthPickerGrid(context) {
         c.parentContext.parentContext.parent._tabbableMonth
       ) ? 2 : -1}"
 										aria-label="${(x) => x.monthName}"
-										aria-selected="${(x, c) => areMonthsEqual(
-        x.month,
-        c.parentContext.parentContext.parent._selectedMonth
-      )}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
         x.month
@@ -6306,6 +6320,19 @@ function renderMonthPickerGrid(context) {
       )}"
 									>
 										${(x) => x.label}
+										<${visuallyHiddenTag}>${(x, c) => {
+        const picker = c.parentContext.parentContext.parent;
+        const announcements = [];
+        if (areMonthsEqual(x.month, picker._currentMonth)) {
+          announcements.push(picker.locale.calendarPicker.currentLabel);
+        }
+        if (areMonthsEqual(x.month, picker._selectedMonth)) {
+          announcements.push(
+            picker.locale.calendarPicker.selectedLabel
+          );
+        }
+        return announcements.join(" ");
+      }}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`

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, d as createRegisterFunction, f 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/definition11.cjs

@@ -160,7 +160,7 @@ const buttonContent = (context) => {
     vividElement.html`<span class="text" aria-hidden="true">${(x) => x.label}</span>`
   )}
 			<span class="sr-only"
-				>${(x) => x.pending ? x.locale.button.pendingLabel : x.label ?? x.ariaLabel}</span
+				>${(x) => x.pending ? x.locale.button.pendingLabel : x.ariaLabel ?? x.label}</span
 			>
 		</span>
 		${when.when((x) => x.dropdownIndicator, chevronTemplate)}`;

package/shared/definition11.js

@@ -158,7 +158,7 @@ const buttonContent = (context) => {
     html`<span class="text" aria-hidden="true">${(x) => x.label}</span>`
   )}
 			<span class="sr-only"
-				>${(x) => x.pending ? x.locale.button.pendingLabel : x.label ?? x.ariaLabel}</span
+				>${(x) => x.pending ? x.locale.button.pendingLabel : x.ariaLabel ?? x.label}</span
 			>
 		</span>
 		${when((x) => x.dropdownIndicator, chevronTemplate)}`;

package/shared/definition13.cjs

@@ -527,6 +527,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const isScrollable = (node) => {
+  const overflowY = window.getComputedStyle(node).overflowY;
+  const overflowX = window.getComputedStyle(node).overflowX;
+  return {
+    vertical: (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight,
+    horizontal: (overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth
+  };
+};
 class Calendar extends vividElement.VividElement {
   constructor() {
     super(...arguments);
@@ -613,6 +621,23 @@ class Calendar extends vividElement.VividElement {
     }
     return !isArrow;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeScrollPosition();
+  }
+  initializeScrollPosition() {
+    if (!isScrollable(this).vertical) {
+      return;
+    }
+    const initialScrollHour = 8;
+    const rowHeight = this.scrollHeight / this._hours;
+    const scrollPosition = rowHeight * (initialScrollHour - 1);
+    vividElement.DOM.queueUpdate(() => {
+      this.scrollTo({
+        top: scrollPosition
+      });
+    });
+  }
 }
 __decorateClass([
   vividElement.attr

package/shared/definition13.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, D as DOM, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { d as Sticky } from './enums.js';
 import { C as CalendarEvent } from './calendar-event.js';
 import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
@@ -525,6 +525,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const isScrollable = (node) => {
+  const overflowY = window.getComputedStyle(node).overflowY;
+  const overflowX = window.getComputedStyle(node).overflowX;
+  return {
+    vertical: (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight,
+    horizontal: (overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth
+  };
+};
 class Calendar extends VividElement {
   constructor() {
     super(...arguments);
@@ -611,6 +619,23 @@ class Calendar extends VividElement {
     }
     return !isArrow;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeScrollPosition();
+  }
+  initializeScrollPosition() {
+    if (!isScrollable(this).vertical) {
+      return;
+    }
+    const initialScrollHour = 8;
+    const rowHeight = this.scrollHeight / this._hours;
+    const scrollPosition = rowHeight * (initialScrollHour - 1);
+    DOM.queueUpdate(() => {
+      this.scrollTo({
+        top: scrollPosition
+      });
+    });
+  }
 }
 __decorateClass([
   attr

package/shared/definition15.cjs

@@ -124,7 +124,7 @@ __decorateClass([
   vividElement.observable
 ], Checkbox.prototype, "defaultSlottedNodes");
 __decorateClass([
-  vividElement.observable
+  vividElement.attr({ attribute: "indeterminate", mode: "boolean" })
 ], Checkbox.prototype, "indeterminate");
 __decorateClass([
   vividElement.observable

package/shared/definition15.js

@@ -122,7 +122,7 @@ __decorateClass([
   observable
 ], Checkbox.prototype, "defaultSlottedNodes");
 __decorateClass([
-  observable
+  attr({ attribute: "indeterminate", mode: "boolean" })
 ], Checkbox.prototype, "indeterminate");
 __decorateClass([
   observable

package/shared/definition16.cjs

@@ -160,7 +160,7 @@ class Combobox extends mixins.WithFeedback(
     }
     if (this.open) {
       const capturedOption = e.target.closest(
-        `option,[role=option]`
+        `option,[role=option],[data-vvd-component=option]`
       );
       if (!capturedOption || capturedOption.disabled) {
         return;

package/shared/definition16.js

@@ -158,7 +158,7 @@ class Combobox extends WithFeedback(
     }
     if (this.open) {
       const capturedOption = e.target.closest(
-        `option,[role=option]`
+        `option,[role=option],[data-vvd-component=option]`
       );
       if (!capturedOption || capturedOption.disabled) {
         return;