@m3e/web 2.2.1 → 2.2.2

package/dist/all.js

@@ -3755,7 +3755,7 @@ class CalendarViewElementBase extends LitElement {
   }
 }
 /** The styles of the element. */
-CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken$1.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
+CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; color: var(--m3e-calendar-item-color, ${DesignToken$1.color.onSurface}); } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken$1.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken$1.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken$1.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
 __decorate([query(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
 __decorate([property({
   converter: dateConverter$1
@@ -3978,7 +3978,7 @@ _M3eMonthViewElement_clearRangeHighlight = function _M3eMonthViewElement_clearRa
   }
 };
 /** The styles of the element. */
-M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken$1.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken$1.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken$1.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken$1.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken$1.shape.corner.full}; border-end-end-radius: ${DesignToken$1.shape.corner.full}; border-inline-start-style: none; } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: Highlight; } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { background-color: Highlight; } td:not(:has(.item[aria-disabled])):not(.selected).range { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-color: GrayText; } }`];
+M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); color: var(--m3e-calendar-weekday-color, ${DesignToken$1.color.onSurface}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken$1.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken$1.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken$1.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken$1.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken$1.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken$1.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken$1.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken$1.shape.corner.full}; border-end-end-radius: ${DesignToken$1.shape.corner.full}; border-inline-start-style: none; } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: Highlight; } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { background-color: Highlight; } td:not(:has(.item[aria-disabled])):not(.selected).range { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-color: GrayText; } }`];
 __decorate([property({
   attribute: "range-start",
   converter: dateConverter$1
@@ -4264,6 +4264,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
  * @cssprop --m3e-calendar-weekday-font-weight - Font weight of weekday labels in month view.
  * @cssprop --m3e-calendar-weekday-line-height - Line height of weekday labels in month view.
  * @cssprop --m3e-calendar-weekday-tracking - Letter spacing of weekday labels in month view.
+ * @cssprop --m3e-calendar-weekday-color - Text color for weekday labels in month view.
  * @cssprop --m3e-calendar-date-font-size - Font size of date cells in month view.
  * @cssprop --m3e-calendar-date-font-weight - Font weight of date cells in month view.
  * @cssprop --m3e-calendar-date-line-height - Line height of date cells in month view.
@@ -4272,6 +4273,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
  * @cssprop --m3e-calendar-item-font-weight - Font weight of items in year and multi‑year views.
  * @cssprop --m3e-calendar-item-line-height - Line height of items in year and multi‑year views.
  * @cssprop --m3e-calendar-item-tracking - Letter spacing of items in year and multi‑year views.
+ * @cssprop --m3e-calendar-item-color - Text color for date items.
  * @cssprop --m3e-calendar-item-selected-color - Text color for selected date items.
  * @cssprop --m3e-calendar-item-selected-container-color - Background color for selected date items.
  * @cssprop --m3e-calendar-item-selected-ripple-color - Ripple color used when interacting with selected date items.
@@ -11495,10 +11497,12 @@ var M3eDatepickerElement_1;
  * @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.
  * @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.
  * @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.
+ * @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.
  * @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.
  * @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.
  * @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.
  * @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.
+ * @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.
  * @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.
  * @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.
  * @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.
@@ -11893,7 +11897,7 @@ _M3eDatepickerElement_clearSelectionState = function _M3eDatepickerElement_clear
   this._date = this._rangeStart = this._rangeEnd = undefined;
 };
 /** The styles of the element. */
-M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-calendar-container-shape: ${DesignToken$1.shape.corner.none}; } .headline { font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:state(-docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken$1.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:state(-modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken$1.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken$1.shape.corner.extraLarge}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eDatepickerElement.styles = css`:host { flex-direction: column; margin: unset; border: unset; padding-block: var(--m3e-datepicker-container-padding-block, 0.75rem); padding-inline: var(--m3e-datepicker-container-padding-inline, 0.25rem); background-color: var(--m3e-datepicker-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-datepicker-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .calendar { --m3e-calendar-container-color: transparent; --m3e-calendar-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-calendar-container-shape: ${DesignToken$1.shape.corner.none}; } .headline { color: var(--m3e-datepicker-modal-headline-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-headline-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-headline-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-headline-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-headline-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking} ); margin-block-start: 2.25rem; margin-block-end: 0.75rem; margin-inline: 1.5rem; } .supporting-text { color: var(--m3e-datepicker-modal-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); font-size: var( --m3e-datepicker-modal-supporting-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize} ); font-weight: var( --m3e-datepicker-modal-supporting-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-datepicker-modal-supporting-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-datepicker-modal-supporting-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking} ); margin-block-start: 1rem; margin-inline: 1.5rem; } .divider { height: var(--m3e-divider-thickness, 1px); width: 100%; position: relative; } .divider::before { content: ""; box-sizing: border-box; position: absolute; border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); height: inherit; left: -0.25rem; right: -0.25rem; } .actions { display: flex; align-items: center; column-gap: 0.5rem; padding-inline: var(--m3e-datepicker-actions-padding-inline, 0.5rem); } .spacer { flex: 1 1 auto; } :host(:state(-docked)) { position: absolute; background-color: var(--m3e-datepicker-docked-container-color, ${DesignToken$1.color.surfaceContainer}); border-radius: var(--m3e-datepicker-docked-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:state(-modal)) { position: fixed; inset: 0; margin: auto; transform-origin: top; background-color: var(--m3e-datepicker-modal-container-color, ${DesignToken$1.color.surfaceContainerHigh}); border-radius: var(--m3e-datepicker-modal-container-shape, ${DesignToken$1.shape.corner.extraLarge}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
         transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: inline-flex; opacity: 1; } :host(:state(-docked))::backdrop { background-color: transparent; } :host(:state(-modal))::backdrop { background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent); margin-inline-end: -20px; } :host(:state(-modal):not(:popover-open))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},