@nova-design-system/nova-webcomponents 3.0.0-beta.43 → 3.0.0-beta.45

package/dist/collection/components/nv-calendar/nv-calendar.css

@@ -14,31 +14,31 @@ nv-calendar {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background: var(--color-level-00-background);
-  border-radius: var(--menu-contextual-radius);
-  padding: 0.25rem;
-  box-shadow: 0 2px 6px 1px solid var(--components-button-medium-border);
-  border: 1px solid var(--components-button-medium-border);
+  background: var(--components-calendar-background);
+  border-radius: var(--calendar-radius);
+  padding: var(--calendar-padding);
+  box-shadow: 0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);
+  border: 1px solid var(--components-calendar-border);
   width: auto;
   max-width: 100%;
 }
 
 .datepicker-container-single {
-  width: 300px;
+  max-width: 300px;
 }
 .datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),
 .datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right) {
-  width: 410px !important;
+  max-width: 410px !important;
 }
 .datepicker-container-single:has(.shortcuts-placement-left), .datepicker-container-single:has(.shortcuts-placement-right) {
-  width: 410px !important;
+  max-width: 410px !important;
 }
 
 .datepicker-wrapper {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  gap: 0.5rem;
+  gap: var(--calendar-gap-x);
   width: auto;
   overflow-x: hidden;
 }
@@ -51,14 +51,14 @@ nv-calendar {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.25rem;
+  padding: var(--calendar-padding);
   width: auto;
   position: relative;
 }
 
 .calendar-separator {
   width: 1px;
-  background: var(--components-button-medium-border);
+  background: var(--components-calendar-border);
   height: auto;
   min-height: 100%;
   margin: 0 10px;
@@ -66,15 +66,19 @@ nv-calendar {
 
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--calendar-header-margin-bottom);
   width: 100%;
 }
+.header nv-iconbutton {
+  width: var(--calendar-header-button-size);
+  height: var(--calendar-header-button-size);
+}
 
 .nav-buttons {
   display: flex;
-  gap: 0.15rem;
+  gap: var(--spacing-0);
   margin-left: auto;
 }
 
@@ -84,22 +88,31 @@ nv-calendar {
 
 .date-controls {
   display: flex;
-  gap: 0.25rem;
+  gap: var(--spacing-1);
   align-items: center;
   min-height: 34px;
   justify-content: center;
 }
 .datepicker-container-single .date-controls {
-  justify-content: flex-start !important;
+  justify-content: flex-start;
 }
 .datepicker-container:not(.datepicker-container-single) .date-controls {
-  justify-content: center !important;
+  justify-content: start;
+  flex-grow: 1;
+}
+.date-controls .month-select,
+.date-controls .year-input {
+  background: transparent !important;
+}
+
+.calendar-wrapper:nth-child(n+2) .datepicker-container {
+  margin-left: 42px;
 }
 
 .calendar-grid {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 0.25rem;
+  column-gap: var(--calendar-weeks-calendar-gap-x);
   position: relative;
 }
 .calendar-grid.slide-left {
@@ -111,68 +124,73 @@ nv-calendar {
 
 .week-numbers {
   display: grid;
-  grid-template-rows: 2rem repeat(6, 2rem);
-  background: var(--color-level-30-background);
-  border-radius: var(--menu-contextual-radius);
-  width: 2.5rem;
+  grid-template-rows: var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));
+  background: var(--components-calendar-weeks-background);
+  color: var(--components-calendar-weeks-text);
+  border-radius: var(--calendar-weeks-radius);
+  width: var(--calendar-weeks-size);
+  row-gap: var(--calendar-grid-gap-y);
 }
 .week-numbers .clickable {
   cursor: pointer;
 }
 .week-numbers .clickable:hover {
-  background: var(--components-button-high-background-hover);
-  color: white;
-  border-radius: var(--menu-contextual-radius);
+  background-color: var(--components-calendar-weeks-background-hover);
+  color: var(--components-calendar-weeks-text-hover);
+  border-radius: var(--calendar-radius);
 }
 
 .week-header,
 .week-number {
   display: grid;
   place-items: center;
-  font-size: 0.875rem;
+  font-size: var(--calendar-cell-font-size);
 }
 
 .week-header {
-  font-weight: 600;
-  color: var(--components-form-text-label-default);
+  font-weight: 700;
+  color: var(--components-calendar-weeks-text);
 }
 
 .week-number {
-  color: var(--components-form-text-description-default);
+  color: var(--components-calendar-cell-text);
 }
 
 .days-container {
   display: grid;
   grid-template-rows: auto 1fr;
+  row-gap: var(--calendar-grid-gap-y);
 }
 
 .days-header {
   display: grid;
-  grid-template-columns: repeat(7, 2rem);
-  height: 2rem;
+  grid-template-columns: repeat(7, var(--calendar-cell-size));
+  height: var(--calendar-cell-size);
 }
 
 .day-header {
   display: grid;
   place-items: center;
-  font-size: 0.875rem;
-  color: var(--components-form-text-description-default);
+  font-size: var(--calendar-cell-font-size);
+  color: var(--components-calendar-cell-text);
 }
 
 .days-grid {
   display: grid;
-  grid-template-columns: repeat(7, 2rem);
-  grid-template-rows: repeat(6, 2rem);
+  grid-template-columns: repeat(7, var(--calendar-cell-size));
+  grid-template-rows: repeat(6, var(--calendar-cell-size));
   animation: fadeIn 0.2s ease-in;
+  row-gap: var(--calendar-grid-gap-y);
+  z-index: 0;
 }
 
 .day {
   display: grid;
   place-items: center;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.875rem;
-  border-radius: var(--menu-contextual-radius);
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  font-size: var(--calendar-cell-font-size);
+  border-radius: var(--calendar-cell-radius);
   cursor: pointer;
   border: none;
   background: transparent;
@@ -181,73 +199,107 @@ nv-calendar {
   animation: scaleIn 0.2s ease-out;
 }
 .day:hover:not(.disabled, .empty, .selected) {
-  background: var(--components-button-high-background-hover);
-  color: white;
+  background: var(--components-calendar-cell-background-hover);
+  color: var(--components-calendar-cell-text-hover);
 }
-.day.selected, .day.selected:hover {
-  background: var(--components-button-high-background);
-  color: white;
+.day.selected, .day.selected:hover .day.is-today.selected, .day.is-today.selected:hover {
+  background: var(--components-calendar-cell-background-selected);
+  color: var(--components-calendar-cell-text-selected) !important;
 }
 .day.disabled {
-  color: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
+  opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 .day.outside-month {
-  color: var(--components-form-text-description-default);
-  opacity: 0.6;
+  color: var(--components-calendar-cell-text);
+  opacity: var(--opacity-disabled);
 }
-.day.outside-month.selected, .day.outside-month.in-range {
+.day.outside-month.selected {
   opacity: 1 !important;
-  color: inherit;
+  color: var(--components-calendar-cell-text-selected);
+}
+.day.outside-month.in-range {
+  opacity: 1 !important;
+  background-color: var(--components-calendar-cell-background-in-range);
+  color: var(--components-calendar-cell-text-in-range);
 }
 .day.in-range {
-  background: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
-  color: white;
+  background: var(--components-calendar-cell-background-in-range);
+  color: var(--components-calendar-cell-text-in-range);
   border-radius: 0;
   position: relative;
 }
-.day.range-start, .day.range-end {
-  background: var(--components-button-high-background);
-  color: white;
+.day.range-start, .day.range-start:focus, .day.range-start:hover, .day.range-end, .day.range-end:focus, .day.range-end:hover {
+  background-color: var(--components-calendar-cell-background-selected) !important;
+  color: var(--components-calendar-cell-text-selected) !important;
+}
+.day.range-start, .day.range-end, .day.range-start.is-today, .day.range-end.is-today {
+  background: var(--components-calendar-cell-background-selected);
+  color: var(--components-calendar-cell-text-selected);
   position: relative;
+  border-radius: var(--radius-rounded-full);
 }
-.day.range-start {
-  border-radius: var(--menu-contextual-radius) 0 0 var(--menu-contextual-radius);
+.day.range-start:hover, .day.range-end:hover, .day.range-start.is-today:hover, .day.range-end.is-today:hover {
+  color: var(--components-calendar-cell-text-today);
 }
-.day.range-end {
-  border-radius: 0 var(--menu-contextual-radius) var(--menu-contextual-radius) 0;
+.day.range-start:before, .day.range-end:before, .day.range-start.is-today:before, .day.range-end.is-today:before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: -1;
+  background-color: var(--components-calendar-cell-background-in-range);
+  border-radius: var(--radius-rounded-full);
+  width: auto;
+  height: auto;
+}
+.day.range-start:has(~ .range-end):before, .day.range-start:has(+ .in-range):before {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.day.range-end:before {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
 }
 .day.outside-month.range-start, .day.outside-month.range-end {
-  background: var(--components-button-high-background) !important;
-  color: white;
+  background: var(--components-calendar-cell-background-selected) !important;
+  color: var(--components-calendar-cell-text-selected);
   opacity: 1 !important;
 }
-.day.outside-month.in-range {
-  background: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
-  color: white;
-}
 .day.is-today {
-  font-weight: 600;
+  font-weight: 700;
   position: relative;
+  color: var(--components-calendar-cell-text-today);
+}
+.day.is-today.range-start, .day.is-today.range-end {
+  color: var(--components-calendar-cell-text-selected);
+}
+.day.is-today.range-start:hover, .day.is-today.range-end:hover {
+  color: var(--components-calendar-cell-text-today);
 }
 .day.is-today::after {
   content: "";
   position: absolute;
-  bottom: 0.15rem;
+  bottom: var(--spacing-1);
   left: 50%;
   transform: translateX(-50%);
-  width: 0.15rem;
-  height: 0.15rem;
+  width: var(--calendar-cell-dot-size);
+  height: var(--calendar-cell-dot-size);
   background-color: currentColor;
   border-radius: 50%;
 }
 .day.is-today.selected::after {
-  background-color: white;
+  color: var(--components-calendar-cell-text-selected);
+}
+.day.is-today.selected::after::after {
+  background-color: var(--components-calendar-cell-dot-selected);
 }
 
 .calendar-footer {
   display: flex;
-  gap: 0.25rem;
+  gap: var(--spacing-1);
   justify-content: flex-start;
   width: 100%;
   flex-wrap: wrap;
@@ -268,16 +320,16 @@ nv-calendar {
 .datepicker-controls {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--components-button-medium-border);
-  padding: 1rem;
-  gap: 0.25rem;
-  width: 100%;
+  border-top: 1px solid var(--components-calendar-border);
+  padding: var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);
+  gap: var(--calendar-grid-gap-y);
+  margin-top: var(--calendar-controls-margin-top);
 }
 
 .datepicker-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 0.25rem;
+  gap: var(--spacing-1);
   width: 100%;
 }
 .datepicker-actions slot-fb {
@@ -292,8 +344,8 @@ nv-calendar {
 .shortcuts-placement-right {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  margin-top: 1rem;
+  gap: var(--spacing-1);
+  margin-top: var(--spacing-4);
 }
 
 .shortcuts-placement-left {

package/dist/collection/components/nv-calendar/nv-calendar.js

@@ -892,8 +892,8 @@ export class NvCalendar {
      * @description Renders the header of the calendar
      */
     renderHeader(offset, index) {
-        return (h("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "low", name: "chevron-left", size: "sm", onClick: this.getChangeMonthHandler(-1, offset) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
-                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "low", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) }), h("nv-iconbutton", { emphasis: "low", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "low", name: "chevron-right", size: "sm", onClick: this.getChangeMonthHandler(1, offset), class: "nav-right" }))));
+        return (h("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
+                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) }), h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset), class: "nav-right" }))));
     }
     /**
      * Renders the week numbers
@@ -977,7 +977,7 @@ export class NvCalendar {
      * @slot actions - Child content of the component.
      */
     renderActions() {
-        return (h("div", { class: "datepicker-actions" }, h("slot", { name: "actions" }, h("nv-button", { emphasis: "low", size: "sm", onClick: this.resetSelection }, "Cancel"), h("nv-button", { size: "sm", onClick: this.confirmSelection }, "OK"))));
+        return (h("div", { class: "datepicker-actions" }, h("slot", { name: "actions" }, h("nv-button", { emphasis: "low", size: "xs", onClick: this.resetSelection }, "Cancel"), h("nv-button", { size: "xs", onClick: this.confirmSelection }, "OK"))));
     }
     /**
      * Renders the datepicker
@@ -986,7 +986,7 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: 'f7835b1457300a2faddc249b426c07a7a0269783' }, h("div", { key: '2e064a4abdda98fd60707ee2fac75bfe13214655', class: "datepicker-root" }, h("div", { key: '5041c7cc3efae4aa27194be09d3f8814f134b4c8', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '8f622f0ec26ab2caf7edd4a05da6b00aabd9c472', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '908067dd983f9e27fd80b475767d464fe192d245', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'd27b083edc68386b6b9f0bf048b15fb36b75dcd0' })));
+        return (h(Host, { key: '43c78a6ec3df4b8e8c909a84ba11172081c87757' }, h("div", { key: 'd60d2695e78a5361af1365d10482d74734adc35e', class: "datepicker-root" }, h("div", { key: '6fd36abda10808660474a9473e45344162f5f34a', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '443a6ca08d7ba5d7cc1f3a261f9173e7aa3ab037', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '3fddbf390693d2f291f1a834447c24e26a2900cc', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'ec40ab4d4ac408554b700deff08d1b202718963a' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {