@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -1,6 +1,32 @@
 import { h, Host, forceUpdate } from "@stencil/core";
 import { debounce, generateId, intl } from "../../../global/functions";
 import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, removeSegmentInfoHighlight, } from "../chartFunctions";
+/**
+ * Single progress indicator used inside a wm-progress-monitor. Renders the binary completion
+ * data for one category as either a doughnut chart (wide layout) or a horizontal bar (narrow
+ * layout), switching automatically based on the parent monitor's breakpoint.
+ *
+ * Must contain EXACTLY TWO wm-progress-slice children — one for the "complete" state and one
+ * for the "incomplete" state.
+ *
+ * @usageNotes
+ * - Always used as a direct child of wm-progress-monitor.
+ * - `label` is required for accessibility.
+ * - The optional `completion-message` is displayed inside the doughnut when the first slice
+ *   reaches 100%.
+ *
+ * @example {html} Progress indicator
+ * <wm-progress-indicator label="Biology completion">
+ *   <wm-progress-slice legend="Completed" amount="200"></wm-progress-slice>
+ *   <wm-progress-slice legend="Not Completed" amount="100"></wm-progress-slice>
+ * </wm-progress-indicator>
+ *
+ * @example {react} Progress indicator
+ * <WmProgressIndicator label="Biology completion">
+ *   <WmProgressSlice legend="Completed" amount="200" />
+ *   <WmProgressSlice legend="Not Completed" amount="100" />
+ * </WmProgressIndicator>
+ */
 export class ProgressIndicator {
     constructor() {
         this.uid = generateId();
@@ -95,7 +121,7 @@ export class ProgressIndicator {
         }
     }
     render() {
-        return (h(Host, { key: '81a6206c61ae8fdc9546c7564d17dd279ca0a32c', onBlur: () => exitChart.call(this) }, h("div", { key: '54faeceac38efac7f9dd6083de65fdcd51e42fff', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: '9ed98df8e2147b472df76f88e859d523cfd41bb3', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: 'e8148180a464b9b9da44df5d95eef50c615a0a05', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover-old", { key: '37b742c2d962ff6a9a5437d91c35aaec0b123be9', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+        return (h(Host, { key: '85d7f352ae7aae5d78fff9beac81ca31442293a6', onBlur: () => exitChart.call(this) }, h("div", { key: 'd825d1303dda2945217e5cab2b44557f013b131d', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: '01e6bb346a880614bb6e831e0926de2d3c804680', id: `label-${this.uid}`, class: "label", htmlFor: `graphic-${this.uid}` }, h("span", { key: '72bbfcb2bb807752e73174c885c1074a29b38805', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover-old", { key: '71919459c9cb79897b29771516519354c07bd5a5', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
     }
     static get is() { return "wm-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +149,13 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessible label for this indicator. Required for accessibility \u2014 used as the\n`aria-label` on the chart container and as the visual chart label."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "label",
@@ -140,7 +172,10 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional secondary text displayed beneath the label."
+                        }],
                     "text": ""
                 },
                 "attribute": "subinfo",
@@ -157,7 +192,10 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Text displayed inside the doughnut ring when the completion slice reaches\n100%."
+                        }],
                     "text": ""
                 },
                 "attribute": "completion-message",
@@ -174,7 +212,13 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Show or hide the legend. The legend is still read by screen readers\nregardless of this setting."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": ""
                 },
                 "attribute": "show-legend",
@@ -192,7 +236,13 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, slice values are included in the legend and keyboard interaction\ninstructions are removed from the DOM \u2014 suitable for printed output."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "print-mode",
@@ -210,7 +260,13 @@ export class ProgressIndicator {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Format for legend values when `print-mode` is enabled."
+                        }, {
+                            "name": "default",
+                            "text": "\"amount\""
+                        }],
                     "text": ""
                 },
                 "attribute": "print-mode-format",

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js

@@ -1,6 +1,71 @@
 import { h, Host, forceUpdate } from "@stencil/core";
 import { csvToArray, debounce } from "../../../global/functions";
 import { renderLegendItem, allChartsDetails } from "../chartFunctions";
+/**
+ * Container for one or more wm-progress-indicator elements, each showing binary completion
+ * progress (e.g. "Completed" vs "Not Completed"). Above the layout breakpoint, indicators
+ * render as doughnuts in a horizontal row; below it, they collapse into horizontal bars in a
+ * vertical stack.
+ *
+ * **Strict constraints:**
+ * 1. Each wm-progress-indicator must have EXACTLY TWO wm-progress-slice children — one for
+ *    the "complete" state and one for the "incomplete" state.
+ * 2. This component is ONLY suitable for binary completion tracking. For more than two states,
+ *    general comparisons, composition breakdowns, or distributions, use wm-chart,
+ *    wm-chart-bar, or wm-chart-column.
+ *
+ * @usageNotes
+ * - The `wmProgressMonitorModeChange` event fires once on load and again whenever the layout
+ *   switches between `"doughnut"` and `"bar"`. Listen to it to synchronize any external UI
+ *   that depends on the current layout mode.
+ * - `group-legend` is only shown in bar mode. Provide two comma-separated keys in
+ *   complete/incomplete order (e.g. `"Completed,Not Completed"`). Keys cannot contain commas.
+ *
+ * @example {html} Progress monitor
+ * <wm-progress-monitor group-legend="Completed,Not Completed">
+ *   <wm-progress-indicator label="Biology">
+ *     <wm-progress-slice legend="Completed" amount="200"
+ *       popover-title="200 students" popover-text="Completed all requirements"></wm-progress-slice>
+ *     <wm-progress-slice legend="Not Completed" amount="100"
+ *       popover-title="100 students" popover-text="Have not completed all requirements"></wm-progress-slice>
+ *   </wm-progress-indicator>
+ * </wm-progress-monitor>
+ *
+ * @example {react} Progress monitor
+ * // wmProgressMonitorModeChange fires on load and whenever the layout switches.
+ * // event.detail is "doughnut" | "bar".
+ * const [layoutMode, setLayoutMode] = useState("");
+ *
+ * <WmProgressMonitor
+ *   groupLegend="Completed,Not Completed"
+ *   onWmProgressMonitorModeChange={(e) => setLayoutMode(e.detail)}
+ * >
+ *   <WmProgressIndicator label="Biology">
+ *     <WmProgressSlice legend="Completed" amount="200"
+ *       popoverTitle="200 students" popoverText="Completed all requirements" />
+ *     <WmProgressSlice legend="Not Completed" amount="100"
+ *       popoverTitle="100 students" popoverText="Have not completed all requirements" />
+ *   </WmProgressIndicator>
+ *   <WmProgressIndicator label="English">
+ *     <WmProgressSlice legend="Completed" amount="160"
+ *       popoverTitle="160 students" popoverText="Completed all requirements" />
+ *     <WmProgressSlice legend="Not Completed" amount="40"
+ *       popoverTitle="40 students" popoverText="Have not completed all requirements" />
+ *   </WmProgressIndicator>
+ * </WmProgressMonitor>
+ *
+ * @example {html} Custom breakpoint
+ * <wm-progress-monitor breakpoint="600px" group-legend="Done,Pending">
+ *   <!-- indicators -->
+ * </wm-progress-monitor>
+ *
+ * @example {react} Custom breakpoint
+ * <WmProgressMonitor breakpoint="600px" groupLegend="Done,Pending">
+ *   {/* indicators *\/}
+ * </WmProgressMonitor>
+ *
+ * @category Data Visualization
+ */
 export class ProgressMonitor {
     constructor() {
         this.doughnutWidth = 300;
@@ -59,7 +124,7 @@ export class ProgressMonitor {
         }))));
     }
     render() {
-        return (h(Host, { key: '3e32dea0f3f4ce90efac342208bc9268066f0aef', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '9fdd5461c8105f3e9bf40e618f19b0948d2e81e8' })));
+        return (h(Host, { key: '59bb74cea1b1f2e3d58d04654e0e65a482950f3f', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: 'ff92bc4d21f0277b837796b63d1f62804931cd7b' })));
     }
     static get is() { return "wm-progress-monitor"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +152,10 @@ export class ProgressMonitor {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls when indicators switch between doughnut (horizontal row) and bar\n(vertical stack) layouts. Accepts a unit-less number (minimum number of indicators to\nshow side-by-side \u2014 e.g. `4` \u2192 1200 px) or an exact pixel value (e.g. `\"900px\"`).\nDefaults to the sum of all indicator widths \u2014 the component tries to fit all on one row\nand collapses to bars when it cannot."
+                        }],
                     "text": ""
                 },
                 "attribute": "breakpoint",
@@ -104,7 +172,10 @@ export class ProgressMonitor {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Two comma-separated legend keys in complete/incomplete order, displayed only\nin bar layout mode (e.g. `\"Completed,Not Completed\"`). Keys cannot contain commas."
+                        }],
                     "text": ""
                 },
                 "attribute": "group-legend",
@@ -121,7 +192,10 @@ export class ProgressMonitor {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "CSS width of the indicator labels when in bar layout mode (e.g. `\"180px\"`)."
+                        }],
                     "text": ""
                 },
                 "attribute": "bar-labels-width",
@@ -137,7 +211,13 @@ export class ProgressMonitor {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires once on load and again whenever the layout switches between `\"doughnut\"`\nand `\"bar\"` modes. Use this to synchronize external UI that depends on the current layout."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "`\"doughnut\" | \"bar\"` \u2014 the new layout mode."
+                        }],
                     "text": ""
                 },
                 "complexType": {

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js

@@ -1,3 +1,25 @@
+/**
+ * Data slice for a wm-progress-indicator. Represents one state (complete or incomplete) in
+ * a binary progress chart. Always used as a direct child of wm-progress-indicator.
+ *
+ * Each wm-progress-indicator must contain EXACTLY TWO wm-progress-slice elements.
+ *
+ * @usageNotes
+ * - The first slice is treated as the "complete" state and the second as the "incomplete"
+ *   state for color and layout purposes.
+ * - Use `popover-title`, `popover-text`, and `popover-button-text` to surface additional
+ *   context when the segment is focused or clicked.
+ *
+ * @example {html} Complete/incomplete pair
+ * <wm-progress-slice legend="Completed" amount="200"
+ *   popover-title="200 students" popover-text="Completed all requirements"></wm-progress-slice>
+ * <wm-progress-slice legend="Not Completed" amount="100"></wm-progress-slice>
+ *
+ * @example {react} Complete/incomplete pair
+ * <WmProgressSlice legend="Completed" amount="200"
+ *   popoverTitle="200 students" popoverText="Completed all requirements" />
+ * <WmProgressSlice legend="Not Completed" amount="100" />
+ */
 export class ProgressSlice {
     constructor() {
         this.legend = undefined;
@@ -24,7 +46,13 @@ export class ProgressSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for this slice in the legend and popovers."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "legend",
@@ -41,7 +69,10 @@ export class ProgressSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Numeric value for this slice as a string."
+                        }],
                     "text": ""
                 },
                 "attribute": "amount",
@@ -58,7 +89,10 @@ export class ProgressSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Title text shown in the data popover when this segment is focused or clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-title",
@@ -75,7 +109,10 @@ export class ProgressSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Body text shown in the data popover when this segment is focused or clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-text",
@@ -92,7 +129,10 @@ export class ProgressSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the action button in the data popover. When set, fires\n`wmProgressIndicatorButtonTriggered` when clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-button-text",
@@ -108,7 +148,13 @@ export class ProgressSlice {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal notifying the parent wm-progress-indicator to re-read slice\ndata after a prop update \u2014 not for application use."
+                        }],
                     "text": ""
                 },
                 "complexType": {

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.css

@@ -1088,28 +1088,28 @@
   min-width: 1px;
   background: var(--wm-color-border);
 }
-.popup-wrapper .day-view {
+.popup-wrapper .month-view {
   min-width: 21rem;
 }
-.popup-wrapper .day-view .date-grid {
+.popup-wrapper .month-view .date-grid {
   width: 100%;
   text-align: center;
   border-collapse: collapse;
   margin-bottom: 0.4375rem;
   color: var(--wmcolor-datepicker-day-text);
 }
-.popup-wrapper .day-view .date-grid div[role=row] {
+.popup-wrapper .month-view .date-grid div[role=row] {
   display: flex;
   justify-content: space-around;
   padding-inline: 0.875rem;
 }
-.popup-wrapper .day-view .date-grid div[role=row]:not(.header-row) {
+.popup-wrapper .month-view .date-grid div[role=row]:not(.header-row) {
   height: 2.75rem;
 }
-.popup-wrapper .day-view .date-grid .date-header {
+.popup-wrapper .month-view .date-grid .date-header {
   background-color: var(--wmcolor-datepicker-weekdays-background);
 }
-.popup-wrapper .day-view .date-grid .header-cell {
+.popup-wrapper .month-view .date-grid .header-cell {
   height: 2.0625rem;
   line-height: 2.0625rem;
   width: 2.75rem;
@@ -1121,7 +1121,7 @@
   color: var(--wmcolor-datepicker-weekdays-text);
   border: none;
 }
-.popup-wrapper .day-view .date-grid [role=gridcell] {
+.popup-wrapper .month-view .date-grid [role=gridcell] {
   padding: 0;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
@@ -1136,102 +1136,102 @@
   align-items: center;
   justify-content: center;
 }
-.popup-wrapper .day-view .date-grid .date-cell {
+.popup-wrapper .month-view .date-grid .date-cell {
   cursor: pointer;
 }
-.popup-wrapper .day-view .date-grid .date-cell:hover {
+.popup-wrapper .month-view .date-grid .date-cell:hover {
   background-color: var(--wmcolor-datepicker-day-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell[aria-selected=true] {
+.popup-wrapper .month-view .date-grid .date-cell[aria-selected=true] {
   background-color: var(--wmcolor-datepicker-day-background-selected);
   color: var(--wmcolor-datepicker-day-text-selected);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range {
+.popup-wrapper .month-view .date-grid .date-cell.in-range {
   background: var(--range-background-selected);
   border-radius: 0;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:not(.preview):hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.range-start:not(.preview):hover {
   background-repeat: no-repeat;
   background-position: center, center left 17px;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:not(.preview):hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.range-end:not(.preview):hover {
   background-position: center, center right 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:not(.preview):hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range:not(.preview):hover {
   background-image: radial-gradient(#dbd9ef 20px, transparent 21px), var(--range-background-selected);
   color: var(--wmcolor-datepicker-day-text);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview {
   position: relative;
   background-image: var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), var(--range-background-hover);
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-position: center left -5px, center left 17px;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-position: center right -5px, center right 17px;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start, .preview-end) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start, .preview-end) {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), linear-gradient(transparent, transparent 15px, var(--wmcolor-datepicker-range-background-hover) 15px, var(--wmcolor-datepicker-range-background-hover) 29px, transparent 29px);
   background-position: center left -5px, center right -5px, center;
   background-size: auto, auto, 9px;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:last-child, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:first-child {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:last-child, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:first-child {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start {
   background-position: center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:first-child {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:first-child {
   background-position: center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end {
   background-position: center, center right 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:last-child {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:last-child {
   background-position: center, center right 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:focus-visible {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:focus-visible, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:focus-visible {
   outline: none;
   border: none;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
   background-image: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: -5px center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end):hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end):hover {
   background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: center, -5px center, center left 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:last-child:hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:first-child:hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range.range-start:last-child:hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.range-end:first-child:hover {
   background: radial-gradient(#dbd9ef 20px, transparent 21px);
   background-position: center;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview), .popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview), .popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview) {
+.popup-wrapper .month-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview), .popup-wrapper .month-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview), .popup-wrapper .month-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview) {
   background: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: 5px center, center right 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview-start, .preview-end):hover {
+.popup-wrapper .month-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview-start, .preview-end):hover {
   background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
   background-position: center, 5px center, center right 17px;
   background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.today:after {
+.popup-wrapper .month-view .date-grid .date-cell.today:after {
   content: "";
   display: block;
   position: absolute;
@@ -1243,54 +1243,54 @@
   background-color: var(--wmcolor-datepicker-day-background-selected);
   margin: auto;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start, .popup-wrapper .day-view .date-grid .date-cell.range-end {
+.popup-wrapper .month-view .date-grid .date-cell.range-start, .popup-wrapper .month-view .date-grid .date-cell.range-end {
   border-radius: 0;
   margin: 0;
   outline: none;
   font-weight: 600;
   color: var(--wmcolor-datepicker-day-text-selected);
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible, .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible {
+.popup-wrapper .month-view .date-grid .date-cell.range-start:focus-visible, .popup-wrapper .month-view .date-grid .date-cell.range-end:focus-visible {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: -2px;
   border: none;
   z-index: 11;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true], .popup-wrapper .day-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true] {
+.popup-wrapper .month-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true], .popup-wrapper .month-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true] {
   outline-offset: 2px;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start {
+.popup-wrapper .month-view .date-grid .date-cell.range-start {
   background-image: var(--range-start-svg);
   padding-inline-end: 2px;
   background-color: transparent;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range:not(:hover, :last-of-type, :last-child) {
+.popup-wrapper .month-view .date-grid .date-cell.range-start.in-range:not(:hover, :last-of-type, :last-child) {
   background-image: var(--range-start-svg), var(--range-background-selected);
   border-radius: 0;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type, :last-child) {
+.popup-wrapper .month-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type, :last-child) {
   background-image: var(--range-start-svg), var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-end {
+.popup-wrapper .month-view .date-grid .date-cell.range-end {
   background-image: var(--range-end-svg);
   padding-inline-start: 2px;
   background-color: transparent;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range:not(:hover, :first-of-type, :first-child) {
+.popup-wrapper .month-view .date-grid .date-cell.range-end.in-range:not(:hover, :first-of-type, :first-child) {
   background-image: var(--range-end-svg), var(--range-background-selected);
   border-radius: 0;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type, :first-child) {
+.popup-wrapper .month-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type, :first-child) {
   background-image: var(--range-end-svg), var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start.range-end {
+.popup-wrapper .month-view .date-grid .date-cell.range-start.range-end {
   background: var(--wmcolor-datepicker-day-background-selected);
   border-radius: 50%;
   padding-inline: 0;
   margin: 1px;
   flex-basis: 42px;
 }
-.popup-wrapper .month-view .months {
+.popup-wrapper .year-view .months {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1302,7 +1302,7 @@
   border-bottom: 0.125rem solid;
   border-color: transparent;
 }
-.popup-wrapper .month-view .month-row {
+.popup-wrapper .year-view .month-row {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1314,7 +1314,7 @@
   width: 100%;
   gap: 0.125rem;
 }
-.popup-wrapper .month-view .month {
+.popup-wrapper .year-view .month {
   border: none;
   background: white;
   cursor: pointer;
@@ -1325,10 +1325,10 @@
   font-weight: 500;
   color: var(--wmcolor-datepicker-month-text);
 }
-.popup-wrapper .month-view .month:hover {
+.popup-wrapper .year-view .month:hover {
   background-color: var(--wmcolor-datepicker-month-background-hover);
 }
-.popup-wrapper .month-view .month:active, .popup-wrapper .month-view .month.selected {
+.popup-wrapper .year-view .month:active, .popup-wrapper .year-view .month.selected {
   background-color: var(--wmcolor-datepicker-month-background-selected);
   color: var(--wmcolor-datepicker-month-text-selected);
 }