@vonage/vivid 3.39.0 → 3.41.0

package/shared/presentationDate.js

@@ -1,20 +1,20 @@
-import { B as Button } from './definition10.js';
-import { P as Popup } from './definition58.js';
-import { T as TextField } from './definition51.js';
+import { B as Button } from './definition11.js';
+import { P as Popup } from './definition60.js';
+import { T as TextField } from './definition53.js';
 import './affix.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { a as FormElementHelperText } from './index2.js';
-import { D as Divider } from './definition20.js';
+import { D as Divider } from './definition21.js';
 import { h as html, F as FoundationElement, a as attr, o as observable, v as volatile, D as DOM } from './index.js';
 import { r as ref } from './ref.js';
-import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { L as Localized } from './localized.js';
 import { F as FormAssociated } from './form-associated.js';
 import { a as applyMixins } from './apply-mixins.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.dialog .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.dialog .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.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.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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.segments {\n  display: flex;\n  gap: 24px;\n}\n\n.segment {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.segment .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.segment .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.segment .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.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.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.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5250,94 +5250,84 @@ function renderDialogHeader(context) {
   const focusTemplate = focusTemplateFactory(context);
   return html`<div class="header">
 		${when(
-    (x) => x._inMonthPicker,
-    html`
-		<${buttonTag}
-			class="vwc-button"
-			size="super-condensed"
-			icon="chevron-left-line"
-			aria-label="${(x) => x.locale.datePicker.prevYearLabel}"
-			?disabled="${(x) => x._isPrevYearDisabled}"
-			@click="${(x) => x._onPrevYearClick()}"
-		></${buttonTag}>
-		`
-  )}
-		${when(
-    (x) => !x._inMonthPicker,
+    (x) => x.prevYearButton,
     html`
 					<${buttonTag}
+						tabindex="1"
 						class="vwc-button"
 						size="super-condensed"
-						icon="double-chevron-left-line"
-						aria-label="${(x) => x.locale.datePicker.prevYearLabel}"
-						?disabled="${(x) => x._isPrevYearDisabled}"
-						@click="${(x) => x._onPrevYearClick()}"
+						icon="${(_, c) => c.parent._inMonthPicker ? "chevron-left-line" : "double-chevron-left-line"}"
+						aria-label="${(_, c) => c.parent.locale.datePicker.prevYearLabel}"
+						?disabled="${(_, c) => c.parent._isPrevYearDisabled}"
+						@click="${(_, c) => c.parent._onPrevYearClick()}"
 					></${buttonTag}>
+		`
+  )}
+		${when(
+    (x) => x.prevMonthButton,
+    html`
 					<${buttonTag}
+						tabindex="1"
 						class="vwc-button"
 						size="super-condensed"
 						icon="chevron-left-line"
-						aria-label="${(x) => x.locale.datePicker.prevMonthLabel}"
-						?disabled="${(x) => x._isPrevMonthDisabled}"
-						@click="${(x) => x._onPrevMonthClick()}"
+						aria-label="${(_, c) => c.parent.locale.datePicker.prevMonthLabel}"
+						?disabled="${(_, c) => c.parent._isPrevMonthDisabled}"
+						@click="${(_, c) => c.parent._onPrevMonthClick()}"
 					></${buttonTag}>
 		`
   )}
-
 		<div class="title">
+			${when((x) => x.titleClickable, html`
 			<button
-				id="grid-label"
+				tabindex="1"
+				id="${(x) => `grid-label-${x.id}`}"
 				class="title-action button"
 				aria-live="polite"
-				@click="${(x) => x._onTitleActionClick()}"
+				@click="${(_, c) => c.parent._onTitleActionClick()}"
 			>
 				${() => focusTemplate}
-				${when(
-    (x) => x._inMonthPicker,
-    html` ${(x) => x._monthPickerYear} `
-  )}
-				${when(
-    (x) => !x._inMonthPicker,
-    html`
-						${(x) => `${x.locale.datePicker.months.name[x._selectedMonth.month]} ${x._selectedMonth.year}`}
-					`
-  )}
+				${(x) => x.title}
 			</button>
+			`)}
+			${when((x) => !x.titleClickable, html`
+			<div
+				id="${(x) => `grid-label-${x.id}`}"
+				class="title-action"
+				aria-live="polite"
+			>
+				${(x) => x.title}
+			</div>
+			`)}
 		</div>
 
 		${when(
-    (x) => x._inMonthPicker,
+    (x) => x.nextMonthButton,
     html`
-			<${buttonTag}
-				class="vwc-button"
-				size="super-condensed"
-				icon="chevron-right-line"
-				aria-label="${(x) => x.locale.datePicker.nextYearLabel}"
-				?disabled="${(x) => x._isNextYearDisabled}"
-				@click="${(x) => x._onNextYearClick()}"
-			></${buttonTag}>
-		`
+				<${buttonTag}
+					tabindex="1"
+					class="vwc-button"
+					size="super-condensed"
+					icon="chevron-right-line"
+					aria-label="${(_, c) => c.parent.locale.datePicker.nextMonthLabel}"
+					?disabled="${(_, c) => c.parent._isNextMonthDisabled}"
+					@click="${(_, c) => c.parent._onNextMonthClick()}"
+				></${buttonTag}>
+			`
   )}
 		${when(
-    (x) => !x._inMonthPicker,
+    (x) => x.nextYearButton,
     html`
-					<${buttonTag}
-						class="vwc-button"
-						size="super-condensed"
-						icon="chevron-right-line"
-						aria-label="${(x) => x.locale.datePicker.nextMonthLabel}"
-						?disabled="${(x) => x._isNextMonthDisabled}"
-						@click="${(x) => x._onNextMonthClick()}"
-					></${buttonTag}>
-					<${buttonTag}
-						class="vwc-button"
-						size="super-condensed"
-						icon="double-chevron-right-line"
-						aria-label="${(x) => x.locale.datePicker.nextYearLabel}"
-						?disabled="${(x) => x._isNextYearDisabled}"
-						@click="${(x) => x._onNextYearClick()}"
-					></${buttonTag}>
-		`
+				<${buttonTag}
+					tabindex="1"
+					class="vwc-button"
+					size="super-condensed"
+					icon="${(_, c) => c.parent._inMonthPicker ? "chevron-right-line" : "double-chevron-right-line"}"
+					aria-label="${(_, c) => c.parent.locale.datePicker.nextYearLabel}"
+					?disabled="${(_, c) => c.parent._isNextYearDisabled}"
+					@click="${(_, c) => c.parent._onNextYearClick()}"
+				></${buttonTag}>
+			`
   )}
 	</div>`;
 }
@@ -5347,11 +5337,11 @@ function renderCalendarGrid(context) {
   return html`<div
 		class="calendar"
 		role="grid"
-		aria-labelledby="grid-label"
+		aria-labelledby="${(x) => `grid-label-${x.id}`}"
 	>
 		<div class="calendar-weekdays" role="row">
 			${repeat(
-    (x) => x._calendarGrid.weekdays,
+    (x) => x.calendar.weekdays,
     html`
 					<div
 						class="calendar-weekday"
@@ -5365,53 +5355,68 @@ function renderCalendarGrid(context) {
 		</div>
 		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
 		${repeat(
-    (x) => x._calendarGrid.grid,
+    (x) => x.calendar.grid,
     html`
 				<div class="calendar-week" role="row">
 					${repeat(
       (x) => x,
-      html`<button
+      html`
+			${when(
+        (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
+        html`<div class="calendar-day"></div>`
+      )}
+			${when(
+        (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
+        html`
+			<button
 							class="${(x, c) => classNames(
-        "calendar-day",
-        "button",
-        ["current", x.date === c.parentContext.parent._currentDate],
-        ["selected", c.parentContext.parent._isDateSelected(x.date)],
-        ["range", c.parentContext.parent._isDateInSelectedRange(x.date)],
-        ["start", c.parentContext.parent._isDateRangeStart(x.date)],
-        ["end", c.parentContext.parent._isDateRangeEnd(x.date)],
-        ["outside-month", x.isOutsideMonth]
-      )}"
+          "calendar-day",
+          "button",
+          ["current", x.date === c.parentContext.parentContext.parent._currentDate],
+          ["selected", c.parentContext.parentContext.parent._isDateSelected(x.date)],
+          ["range", c.parentContext.parentContext.parent._isDateInSelectedRange(x.date)],
+          ["start", c.parentContext.parentContext.parent._isDateRangeStart(x.date)],
+          ["end", c.parentContext.parentContext.parent._isDateRangeEnd(x.date)],
+          ["outside-month", x.isOutsideMonth]
+        )}"
 							role="gridcell"
-							?disabled="${(x, c) => !c.parentContext.parent._isDateInValidRange(x.date)}"
-							tabindex="${(x, c) => x.date === c.parentContext.parent._tabbableDate ? 0 : -1}"
-							aria-selected="${(x, c) => c.parentContext.parent._isDateAriaSelected(x.date)}"
+							?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(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.parent._onDateClick(x.date)}"
-							@focus="${(x, c) => c.parentContext.parent._onDateFocus(x.date)}"
-							@mouseenter="${(x, c) => c.parentContext.parent._onDateMouseEnter(x.date)}"
-							@mouseleave="${(x, c) => c.parentContext.parent._onDateMouseLeave(x.date)}"
-							@keydown="${(x, c) => c.parentContext.parent._onDateKeydown(
-        x.date,
-        c.event
-      )}"
+							@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)}"
+							@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
+							@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
+          x.date,
+          c.event
+        )}"
 						>
 							${() => focusTemplate} ${(x) => x.label}
 						</button>`
-    )}
+      )}
 				</div>
 			`
-  )}
-	</div>`;
+    )}
+	</div>`
+  )}`;
 }
 function renderMonthPickerGrid(context) {
+  const dividerTag = context.tagFor(Divider);
   const focusTemplate = focusTemplateFactory(context);
-  return html`<div
+  return html`
+		<${dividerTag}
+			class="months-separator"
+			role="presentation"
+		></${dividerTag}>
+		<div
 		class="month-grid"
 		role="grid"
 		aria-labelledby="grid-label"
 	>
 		${repeat(
-    (x) => x._monthPickerGrid,
+    (x) => x.months,
     html`
 				<div class="months-row" role="row">
 					${repeat(
@@ -5425,29 +5430,29 @@ function renderMonthPickerGrid(context) {
           "current",
           areMonthsEqual(
             x.month,
-            c.parentContext.parent._currentMonth
+            c.parentContext.parentContext.parent._currentMonth
           )
         ],
         [
           "selected",
           areMonthsEqual(
             x.month,
-            c.parentContext.parent._selectedMonth
+            c.parentContext.parentContext.parent._selectedMonth
           )
         ]
       )}"
 								role="gridcell"
-								tabindex="${(x, c) => c.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parent._tabbableMonth) ? 0 : -1}"
+								tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth) ? 2 : -1}"
 								aria-label="${(x) => x.monthName}"
 								aria-selected="${(x, c) => areMonthsEqual(
         x.month,
-        c.parentContext.parent._selectedMonth
+        c.parentContext.parentContext.parent._selectedMonth
       )}"
 								data-month="${(x) => monthToStr(x.month)}"
-								?disabled="${(x, c) => !c.parentContext.parent._isMonthInValidRange(x.month)}"
-								@click="${(x, c) => c.parentContext.parent._onMonthClick(x.month)}"
-								@focus="${(x, c) => c.parentContext.parent._onMonthFocus(x.month)}"
-								@keydown="${(x, c) => c.parentContext.parent._onMonthKeydown(
+								?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(x.month)}"
+								@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(x.month)}"
+								@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(x.month)}"
+								@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
         x.month,
         c.event
       )}"
@@ -5465,7 +5470,6 @@ const DatePickerBaseTemplate = (context, _) => {
   const popupTag = context.tagFor(Popup);
   const textFieldTag = context.tagFor(TextField);
   const buttonTag = context.tagFor(Button);
-  const dividerTag = context.tagFor(Divider);
   return html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
 		<${textFieldTag} id="text-field"
 										 ${ref("_textFieldEl")}
@@ -5501,29 +5505,33 @@ const DatePickerBaseTemplate = (context, _) => {
 			<div class="dialog" role="dialog" ${ref(
     "_dialogEl"
   )} aria-modal="true" aria-label="${(x) => x.locale.datePicker.chooseDateLabel}">
+				<div class="segments">
+					${repeat(
+    (x) => x._segments,
+    html`
+					<div class="segment">
 				${renderDialogHeader(context)}
 				${when(
-    (x) => x._inMonthPicker,
-    html`
-						<${dividerTag}
-							class="months-separator"
-							role="presentation"
-						></${dividerTag}>
-						${renderMonthPickerGrid(context)}
-					`
-  )}
+      (x) => x.type === "month-picker",
+      html`${renderMonthPickerGrid(context)}`
+    )}
 				${when(
-    (x) => !x._inMonthPicker,
-    html` ${renderCalendarGrid(context)} `
+      (x) => x.type === "calendar",
+      html`${renderCalendarGrid(context)}`
+    )}
+					</div>`
   )}
+				</div>
 				<div class="footer">
 					<${buttonTag}
+						tabindex="3"
 						class="vwc-button"
 						size="condensed"
 						label="${(x) => x.locale.datePicker.clearLabel}"
 						@click="${(x) => x._onClearClick()}"
 					></${buttonTag}>
 					<${buttonTag}
+						tabindex="3"
 						class="vwc-button"
 						size="condensed"
 						appearance="filled"
@@ -5675,6 +5683,11 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     /// Used to stop the popup from immediately opening when closing popup and returning focus to text field
     this.#isClosingPopup = false;
     this._presentationValue = "";
+    this._numCalendars = 1;
+    /**
+     * @internal
+     */
+    this._hideDatesOutsideMonth = false;
     this._lastFocussedDate = null;
     this._monthPickerYear = null;
     this._lastFocussedMonth = null;
@@ -5719,6 +5732,19 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
       lastFocusableEl: focusableEls[focusableEls.length - 1]
     };
   }
+  _adjustSelectedMonthToEnsureVisibilityOf(date) {
+    const month = monthOfDate(date);
+    const firstDisplayedMonth = this._selectedMonth;
+    const lastDisplayedMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
+    if (compareMonths(month, firstDisplayedMonth) < 0) {
+      this._selectedMonth = month;
+      return true;
+    } else if (compareMonths(month, lastDisplayedMonth) > 0) {
+      this._selectedMonth = addMonths(month, 1 - this._numCalendars);
+      return true;
+    }
+    return false;
+  }
   /**
    * @internal
    */
@@ -5758,7 +5784,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     if (this.proxy) {
       this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
     }
-    super.validate(this._textFieldEl?.shadowRoot?.querySelector("input") ?? void 0);
+    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
   }
   #dismissOnClickOutside;
   #isClosingPopup;
@@ -5902,13 +5928,44 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
   _onNextMonthClick() {
     this._selectedMonth = addMonths(this._selectedMonth, 1);
   }
-  // --- Calendar ---
   /**
-   * The calendar grid used to render the calendar.
    * @internal
    */
-  get _calendarGrid() {
-    return buildCalendarGrid(this._selectedMonth, this.locale.datePicker);
+  get _segments() {
+    const segments = [];
+    if (this._inMonthPicker) {
+      segments.push({
+        id: 0,
+        type: "month-picker",
+        title: `${this._monthPickerYear}`,
+        titleClickable: true,
+        prevYearButton: true,
+        nextYearButton: true,
+        months: buildMonthPickerGrid(
+          this._monthPickerYear,
+          this.locale.datePicker
+        )
+      });
+    } else {
+      for (let i = 0; i < this._numCalendars; i++) {
+        const month = addMonths(this._selectedMonth, i);
+        const isSingle = this._numCalendars === 1;
+        const isFirst = i === 0;
+        const isLast = i === this._numCalendars - 1;
+        segments.push({
+          id: i,
+          type: "calendar",
+          title: `${this.locale.datePicker.months.name[month.month]} ${month.year}`,
+          titleClickable: isSingle,
+          prevYearButton: isFirst && isSingle,
+          prevMonthButton: isFirst,
+          nextMonthButton: isLast,
+          nextYearButton: isLast && isSingle,
+          calendar: buildCalendarGrid(month, this.locale.datePicker)
+        });
+      }
+    }
+    return segments;
   }
   /**
    * @internal
@@ -5960,9 +6017,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
       newDate = addDays(date, 1);
     }
     if (newDate && this._isDateInValidRange(newDate)) {
-      const newMonth = monthOfDate(newDate);
-      if (!areMonthsEqual(newMonth, this._selectedMonth)) {
-        this._selectedMonth = newMonth;
+      if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
         DOM.processUpdates();
       }
       this._dialogEl.querySelector(
@@ -5979,15 +6034,19 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this._lastFocussedDate = date;
   }
   get _tabbableDate() {
-    const datesInGrid = this._calendarGrid.grid.flat().map((date) => date.date);
+    const datesInSegments = this._segments.filter((segment) => segment.type === "calendar").flatMap(
+      (segment) => segment.calendar.grid.flat().map((d) => d.date)
+    );
     const candidates = [
       this._lastFocussedDate,
       ...this._getSelectedDates(),
       currentDateStr(),
-      ...datesInGrid
+      ...datesInSegments
     ];
+    const firstVisibleMonth = this._selectedMonth;
+    const lastVisibleMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
     return candidates.find(
-      (date) => date && areMonthsEqual(monthOfDate(date), this._selectedMonth) && this._isDateInValidRange(date)
+      (date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)
     ) ?? null;
   }
   /**
@@ -5996,16 +6055,6 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
   get _inMonthPicker() {
     return this._monthPickerYear !== null;
   }
-  /**
-   * The months grid used to render the month picker.
-   * @internal
-   */
-  get _monthPickerGrid() {
-    return buildMonthPickerGrid(
-      this._monthPickerYear ?? this._currentMonth.year,
-      this.locale.datePicker
-    );
-  }
   /**
    * Handle month selected in the month picker.
    * @internal
@@ -6048,16 +6097,17 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this._lastFocussedMonth = month;
   }
   get _tabbableMonth() {
-    const year = this._monthPickerYear ?? this._selectedMonth.year;
-    const monthsInGrid = this._monthPickerGrid.flat().map((cell) => cell.month);
+    const monthsInSegments = this._segments.filter(
+      (segments) => segments.type === "month-picker"
+    ).flatMap((segment) => segment.months.flat().map((c) => c.month));
     const candidates = [
       this._lastFocussedMonth,
       this._selectedMonth,
       getCurrentMonth(),
-      ...monthsInGrid
+      ...monthsInSegments
     ];
     return candidates.find(
-      (month) => month && month.year === year && this._isMonthInValidRange(month)
+      (month) => month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)
     ) ?? null;
   }
   // --- Dialog footer ---
@@ -6104,6 +6154,9 @@ __decorateClass([
 __decorateClass([
   volatile
 ], DatePickerBase.prototype, "_isNextYearDisabled", 1);
+__decorateClass([
+  observable
+], DatePickerBase.prototype, "_numCalendars", 2);
 __decorateClass([
   observable
 ], DatePickerBase.prototype, "_lastFocussedDate", 2);
@@ -6130,4 +6183,4 @@ const parsePresentationDate = (presentationDate, locale) => {
   return formatDateStr(date);
 };
 
-export { DatePickerBase as D, DatePickerBaseTemplate as a, compareDateStr as c, formatPresentationDate as f, isValidDateStr as i, monthOfDate as m, parsePresentationDate as p, styles as s };
+export { DatePickerBase as D, DatePickerBaseTemplate as a, compareDateStr as c, formatPresentationDate as f, isValidDateStr as i, parsePresentationDate as p, styles as s };

package/shared/radio.js

@@ -133,7 +133,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class Radio extends Radio$1 {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+  }
 }
+__decorateClass([
+  attr({ attribute: "aria-label" })
+], Radio.prototype, "ariaLabel", 2);
 __decorateClass([
   attr
 ], Radio.prototype, "label", 2);

package/shared/text-field.js

@@ -1,3 +1,3 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset::after {\n  position: absolute;\n  display: block;\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inline-size: 100%;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus-visible {\n  outline: none;\n}\n.has-icon .control {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-block-start: 50%;\n  inset-inline-start: calc(100% + var(--_text-field-gutter));\n  line-height: 1;\n  transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n  position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n  display: none;\n}\n\n.action-items-wrapper {\n  margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label:not(slot),\n.label::slotted(label) {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label:not(slot),\n.char-count + .label::slotted(label) {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset::after {\n  position: absolute;\n  display: block;\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inline-size: 100%;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control:not(slot), .control::slotted(input) {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:not(slot):disabled, .control::slotted(input:disabled) {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot)::placeholder {\n  opacity: 1 !important; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {\n  outline: none;\n}\n.has-icon .control:not(slot), .has-icon .control::slotted(input) {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-block-start: 50%;\n  inset-inline-start: calc(100% + var(--_text-field-gutter));\n  line-height: 1;\n  transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n  position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n  display: none;\n}\n\n.action-items-wrapper {\n  margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
 export { styles as s };

package/shared/utils/Reflector.d.ts

@@ -0,0 +1,8 @@
+export declare class Reflector<S, T extends HTMLElement> {
+    #private;
+    constructor(source: S, target: T);
+    attribute(propertyName: keyof S, attributeName: string): void;
+    booleanAttribute(propertyName: keyof S, attributeName: string): void;
+    property(propertyName: keyof S, targetProperty: keyof T, skipIfEqual?: boolean): void;
+    destroy(): void;
+}

package/shared/utils/randomId.d.ts

@@ -0,0 +1 @@
+export declare const generateRandomId: () => string;

package/side-drawer/index.js

@@ -1,4 +1,4 @@
-import { r as registerSideDrawer } from '../shared/definition41.js';
+import { r as registerSideDrawer } from '../shared/definition43.js';
 import '../shared/index.js';
 import '../shared/when.js';
 import '../shared/class-names.js';