@m3e/web 2.2.1 → 2.3.0

package/dist/calendar.js

@@ -132,7 +132,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.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.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.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.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.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.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.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.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.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.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.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
@@ -355,7 +355,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.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken.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.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken.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.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken.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.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.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.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.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.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken.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.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.shape.corner.full}; border-end-end-radius: ${DesignToken.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.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken.typescale.standard.title.small.tracking}); color: var(--m3e-calendar-weekday-color, ${DesignToken.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.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken.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.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken.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.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.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.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.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.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken.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.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.shape.corner.full}; border-end-end-radius: ${DesignToken.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
@@ -641,6 +641,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.
@@ -649,6 +650,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.