@mezzanine-ui/core 1.0.0-beta.4 → 1.0.0-beta.6

package/_styles.scss

@@ -28,7 +28,6 @@
 
   // Utility
   @include _load-styles($options, backdrop);
-  @include _load-styles($options, popover);
   @include _load-styles($options, tooltip);
   @include _load-styles($options, calendar);
   @include _load-styles($options, time-panel);
@@ -49,7 +48,6 @@
   @include _load-styles($options, pagination);
   @include _load-styles($options, drawer);
   @include _load-styles($options, navigation);
-  @include _load-styles($options, app-bar);
   @include _load-styles($options, page-footer);
   @include _load-styles($options, page-header);
   @include _load-styles($options, content-header);
@@ -65,6 +63,7 @@
   @include _load-styles($options, tree);
   @include _load-styles($options, table);
   @include _load-styles($options, inline-message);
+  @include _load-styles($options, section);
 
   // Data Entry
   @include _load-styles($options, checkbox);
@@ -80,8 +79,8 @@
   @include _load-styles($options, upload, upload-item);
   @include _load-styles($options, upload, upload-picture-card);
   @include _load-styles($options, picker);
-  @include _load-styles($options, date-range-picker);
-  @include _load-styles($options, date-time-picker);
+  @include _load-styles($options, multiple-date-picker);
+  @include _load-styles($options, date-time-range-picker);
   @include _load-styles($options, slider);
   @include _load-styles($options, dropdown);
 
@@ -95,7 +94,6 @@
   @include _load-styles($options, message);
   @include _load-styles($options, modal);
   @include _load-styles($options, notification-center);
-  @include _load-styles($options, popconfirm);
   @include _load-styles($options, progress);
   @include _load-styles($options, spin);
   @include _load-styles($options, skeleton);

package/autocomplete/_autocomplete-styles.scss

@@ -1,9 +1,18 @@
 @use '../select/select' as select;
 @use './autocomplete' as *;
+@use '~@mezzanine-ui/system/spacing' as spacing;
 
 .#{$prefix} {
   position: relative;
 
+  &--single {
+    min-width: spacing.semantic-variable(size, container, snug);
+  }
+
+  &--multiple {
+    min-width: spacing.semantic-variable(size, container, slim);
+  }
+
   &--full-width {
     width: 100%;
   }

package/autocomplete/autocomplete.d.ts

@@ -8,4 +8,5 @@ export declare const autocompleteClasses: {
     readonly host: "mzn-autocomplete";
     readonly hostFullWidth: "mzn-autocomplete--full-width";
     readonly hostInsideClosed: "mzn-autocomplete--inside-closed";
+    readonly hostMode: (mode: AutoCompleteMode) => string;
 };

package/autocomplete/autocomplete.js

@@ -3,6 +3,7 @@ const autocompleteClasses = {
     host: autocompletePrefix,
     hostFullWidth: `${autocompletePrefix}--full-width`,
     hostInsideClosed: `${autocompletePrefix}--inside-closed`,
+    hostMode: (mode) => `${autocompletePrefix}--${mode}`,
 };
 
 export { autocompleteClasses, autocompletePrefix };

package/breadcrumb/_breadcrumb-styles.scss

@@ -45,9 +45,7 @@
     width: spacing.semantic-variable(size, container, tight);
 
     &__content {
-      margin: spacing.semantic-variable(padding, vertical, tight) 0;
       background-color: palette.semantic-variable('background', base);
-      padding: 0 spacing.semantic-variable(padding, horizontal, tight);
       width: 100%;
       display: grid;
     }
@@ -119,6 +117,10 @@
     &:focus-visible {
       box-shadow: effect.variable(focus, primary);
     }
+
+    &:hover {
+      background-color: palette.semantic-variable('background', neutral-faint);
+    }
   }
 
   &__icon {

package/calendar/_calendar-styles.scss

@@ -8,19 +8,6 @@
 @use '../button/utils' as btn-utils;
 @use './calendar' as *;
 
-// Todo: width fixed?
-@mixin mode-width {
-  @each $mode in $modes {
-    .#{$prefix}--#{$mode} & {
-      @if $mode == week {
-        width: 292px;
-      } @else {
-        width: 260px;
-      }
-    }
-  }
-}
-
 .#{$prefix} {
   display: inline-flex;
   box-sizing: border-box;
@@ -39,8 +26,6 @@
 }
 
 .#{$main-prefix} {
-  @include mode-width();
-
   padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, comfort);
 
   &-with-footer {
@@ -60,16 +45,14 @@
 }
 
 .#{$week-prefix} {
-  width: 32px;
   height: 100%;
-  padding-top: 34px;
+  padding-top: 40px;
   display: flex;
   flex-flow: column;
 
   &__row {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    padding: spacing.semantic-variable(padding, vertical, micro) 0;
+    width: spacing.semantic-variable(size, element, loose);
+    height: spacing.semantic-variable(size, element, loose);
     position: relative;
 
     &::after {
@@ -86,6 +69,9 @@
 
 .#{$days-grid-prefix} {
   flex: 1;
+  display: grid;
+  grid-auto-flow: row;
+  gap: spacing.semantic-variable(padding, vertical, micro);
 }
 
 .#{$button-prefix} {
@@ -96,7 +82,7 @@
   align-items: center;
   justify-content: center;
   gap: 0;
-  border: 1px solid transparent;
+  border: none;
   border-radius: radius.variable(base);
   transition: transition.standard(background-color) transition.standard(color) transition.standard(border);
 
@@ -117,15 +103,13 @@
     background-color: palette.semantic-variable("background", neutral-faint);
   }
 
-  .#{$cell-prefix}--today & {
-    border: 1px solid palette.semantic-variable(border, brand);
-  }
-
   &--inRange {
+    border-radius: 0;
     background-color: palette.semantic-variable("background", brand-faint);
   }
 
   &--active {
+    border-radius: radius.variable(base);
     color: palette.semantic-variable(text, fixed-light);
     background-color: palette.semantic-variable("background", brand);
 
@@ -146,20 +130,19 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: effect.variable(focus, primary);
+    box-shadow: effect.variable(focus, inner);
+
+    &:not(.#{$button-prefix}--active):not(.#{$button-prefix}--inRange) {
+      background-color: palette.semantic-variable("background", neutral-faint);
+    }
   }
 }
 
 .#{$row-prefix} {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
-  column-gap: spacing.semantic-variable(gap, tiny);
+  column-gap: 0;
   width: 100%;
-  padding: spacing.semantic-variable(padding, vertical, micro) 0;
-
-  &:first-child {
-    padding-top: 0;
-  }
 
   .#{$prefix}--quarter & {
     padding: spacing.semantic-variable(padding, vertical, tiny) 0;
@@ -179,16 +162,35 @@
 }
 
 .#{$cell-prefix} {
+  --today-dot-color: #{palette.semantic-variable(icon, brand)};
   --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, neutral-solid)};
 
   position: relative;
-  width: 100%;
-  padding-top: 100%;
+  width: spacing.semantic-variable(size, element, loose);
+  height: spacing.semantic-variable(size, element, loose);
   color: var(--#{$cell-prefix}-text-color);
   user-select: none;
   transition: transition.standard(color);
 
-  @include typography.semantic-variable(label-primary);
+  @include typography.semantic-variable(input);
+
+  &--mode-day,
+  &--mode-week {
+    width: spacing.semantic-variable(size, element, loose);
+    height: spacing.semantic-variable(size, element, loose);
+  }
+
+  &--mode-month,
+  &--mode-half-year,
+  &--mode-year {
+    width: spacing.semantic-variable(size, element, extra);
+    height: spacing.semantic-variable(size, element, loose);
+  }
+
+  &--mode-quarter {
+    width: spacing.semantic-variable(size, element, wide-expanded);
+    height: spacing.semantic-variable(size, element, loose);
+  }
 
   button {
     width: 100%;
@@ -206,7 +208,22 @@
     height: 100%;
   }
 
+  &--weekend {
+    --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, brand)};
+  }
+
+  &--range-start {
+    border-radius: radius.variable(base) 0 0 radius.variable(base);
+    background-color: palette.semantic-variable("background", brand-faint);
+  }
+
+  &--range-end {
+    border-radius: 0 radius.variable(base) radius.variable(base) 0;
+    background-color: palette.semantic-variable("background", brand-faint);
+  }
+
   &--active {
+    --today-dot-color: #{palette.semantic-variable(icon, fixed-light)};
     --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, neutral-solid)};
   }
 
@@ -218,28 +235,47 @@
   .#{$prefix}--half-year & {
     padding-top: 32px;
   }
+
+  &--today {
+    &::after {
+      position: absolute;
+      bottom: 7px;
+      left: 50%;
+      z-index: 1;
+      transform: translateX(-50%);
+      content: '';
+      width: spacing.semantic-variable(size, element, micro);
+      height: spacing.semantic-variable(size, element, micro);
+      border-radius: 1px;
+      background-color: var(--today-dot-color);
+      pointer-events: none;
+    }
+
+    &.#{$cell-prefix}--with-annotation::after {
+      bottom: 3px;
+    }
+  }
 }
 
 .#{$twelve-grid-prefix} {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-auto-rows: 32px;
-  gap: calc(#{spacing.semantic-variable(padding, vertical, micro)} * 2) spacing.semantic-variable(gap, tiny);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: calc(#{spacing.semantic-variable(padding, vertical, micro)} * 2) 0;
   width: 100%;
 
-  @include typography.semantic-variable(label-primary);
+  @include typography.semantic-variable(input);
 
   color: palette.semantic-variable(text, neutral-solid);
 }
 
 .#{$controls-prefix} {
-  padding: spacing.semantic-variable(padding, vertical, tiny) spacing.semantic-variable(padding, horizontal, relaxed);
+  padding: 0;
+  margin: 0;
   display: flex;
   justify-content: space-between;
   gap: spacing.semantic-variable(gap, tiny);
   position: relative;
   width: 100%;
-  margin: 0 0 spacing.semantic-variable(gap, tight);
   box-sizing: border-box;
 
   &__actions {
@@ -252,7 +288,9 @@
     @include btn-utils.reset();
 
     line-height: 0;
-    padding: spacing.semantic-variable(padding, vertical, micro) 0;
+    width: spacing.semantic-variable(size, element, roomy);
+    height: spacing.semantic-variable(size, element, roomy);
+    padding: 0;
     border-radius: radius.variable(base);
     color: palette.semantic-variable(icon, neutral);
 
@@ -290,7 +328,7 @@
 
       &:focus-visible {
         outline: none;
-        box-shadow: effect.variable(focus, primary);
+        box-shadow: effect.variable(focus, inner);
       }
 
       &:disabled {
@@ -312,6 +350,7 @@
 }
 
 .#{$footer-actions-prefix} {
+  box-sizing: border-box;
   width: 100%;
   border-top: 1px solid palette.semantic-variable(separator, neutral-faint);
   padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, comfort);

package/calendar/calendar.d.ts

@@ -39,10 +39,15 @@ export declare const calendarClasses: {
     rowWithBorder: string;
     /** Cell classes */
     cell: string;
+    cellMode: (mode: CalendarMode) => string;
     cellInner: string;
+    cellWeekend: string;
     cellToday: string;
     cellActive: string;
     cellDisabled: string;
+    cellWithAnnotation: string;
+    cellRangeStart: string;
+    cellRangeEnd: string;
     /** Twelve grid classes */
     twelveGrid: string;
     /** Controls classes */
@@ -60,7 +65,7 @@ export declare const calendarClasses: {
 };
 /** Constants */
 export declare const calendarYearsBase: number[];
-export declare const calendarYearModuler = 10;
+export declare const calendarYearModuler = 20;
 export declare const calendarMonths: number[];
 export declare const calendarQuarters: number[];
 export declare const calendarQuarterYearsCount = 5;

package/calendar/calendar.js

@@ -35,10 +35,15 @@ const calendarClasses = {
     rowWithBorder: `${calendarRowPrefix}--with-border`,
     /** Cell classes */
     cell: calendarCellPrefix,
+    cellMode: (mode) => `${calendarCellPrefix}--mode-${mode}`,
     cellInner: `${calendarCellPrefix}__inner`,
+    cellWeekend: `${calendarCellPrefix}--weekend`,
     cellToday: `${calendarCellPrefix}--today`,
     cellActive: `${calendarCellPrefix}--active`,
     cellDisabled: `${calendarCellPrefix}--disabled`,
+    cellWithAnnotation: `${calendarCellPrefix}--with-annotation`,
+    cellRangeStart: `${calendarCellPrefix}--range-start`,
+    cellRangeEnd: `${calendarCellPrefix}--range-end`,
     /** Twelve grid classes */
     twelveGrid: calendarTwelveGridPrefix,
     /** Controls classes */
@@ -55,8 +60,10 @@ const calendarClasses = {
     quickSelectButtonActive: `${calendarQuickSelectPrefix}__button--active`,
 };
 /** Constants */
-const calendarYearsBase = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const calendarYearModuler = 10;
+const calendarYearsBase = [
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+];
+const calendarYearModuler = 20;
 const calendarMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 const calendarQuarters = [1, 2, 3, 4];
 const calendarQuarterYearsCount = 5;
@@ -71,7 +78,7 @@ function getYearRange(year, mod) {
 }
 function getCalendarYearRange(year) {
     const [start, end] = getYearRange(year, calendarYearModuler);
-    return [start - 1, end + 1];
+    return [start, end];
 }
 /**
  * Locales that use ISO week (Monday as first day of week).

package/calendar/typings.d.ts

@@ -39,6 +39,12 @@ export type CalendarMethods<TDateType = DateType> = {
      * Check if locale uses ISO week (Monday as first day)
      */
     isISOWeekLocale: (locale: string) => boolean;
+    /**
+     * Get a boolean array indicating which positions in the week are weekends.
+     * For Monday-first locales: [false, false, false, false, false, true, true] (Sat, Sun at positions 5, 6)
+     * For Sunday-first locales: [true, false, false, false, false, false, true] (Sun at 0, Sat at 6)
+     */
+    getWeekends: (locale: string) => boolean[];
     /** Manipulate */
     addHour: (value: TDateType, diff: number) => TDateType;
     addMinute: (value: TDateType, diff: number) => TDateType;

package/calendarMethodsDayjs/index.js

@@ -198,6 +198,15 @@ const CalendarMethodsDayjs = {
     getMonthShortNames: (locale) => {
         return dayjs().locale(localeMapping(locale)).localeData().monthsShort();
     },
+    getWeekends: (locale) => {
+        // Saturday and Sunday are always weekends
+        // For Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun] → positions 5, 6 are weekends
+        // For Sunday-first: [Sun, Mon, Tue, Wed, Thu, Fri, Sat] → positions 0, 6 are weekends
+        if (isMondayFirst(locale)) {
+            return [false, false, false, false, false, true, true];
+        }
+        return [true, false, false, false, false, false, true];
+    },
     /** Manipulate */
     addHour: (date, diff) => dayjs(date).add(diff, 'hour').toISOString(),
     addMinute: (date, diff) => dayjs(date).add(diff, 'minute').toISOString(),

package/calendarMethodsLuxon/index.js

@@ -35,6 +35,11 @@ const CalendarMethodsLuxon = {
         return names[month];
     },
     getMonthShortNames: (locale) => Info.months('short', { locale }),
+    getWeekends: () => {
+        // Luxon always uses ISO week (Monday-first)
+        // [Mon, Tue, Wed, Thu, Fri, Sat, Sun] → positions 5, 6 are weekends
+        return [false, false, false, false, false, true, true];
+    },
     /** Manipulate */
     addHour: (date, diff) => DateTime.fromISO(date).plus({ hour: diff }).toISO(),
     addMinute: (date, diff) => DateTime.fromISO(date).plus({ minute: diff }).toISO(),

package/calendarMethodsMoment/index.js

@@ -63,6 +63,15 @@ const CalendarMethodsMoment = {
     },
     getFirstDayOfWeek: (locale) => getActualFirstDayOfWeek(locale),
     isISOWeekLocale,
+    getWeekends: (locale) => {
+        // Saturday and Sunday are always weekends
+        // For Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun] → positions 5, 6 are weekends
+        // For Sunday-first: [Sun, Mon, Tue, Wed, Thu, Fri, Sat] → positions 0, 6 are weekends
+        if (isMondayFirst(locale)) {
+            return [false, false, false, false, false, true, true];
+        }
+        return [true, false, false, false, false, false, true];
+    },
     /** Manipulate */
     addHour: (date, diff) => {
         const clone = moment(date);

package/date-time-range-picker/_date-time-range-picker-styles.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '~@mezzanine-ui/system/spacing';
+@use '~@mezzanine-ui/system/palette';
+@use './date-time-range-picker' as *;
+
+.#{$prefix} {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing.semantic-variable(gap, base);
+
+  &--row {
+    flex-direction: row;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: palette.semantic-variable(icon, neutral-light);
+  }
+}

package/date-time-range-picker/_date-time-range-picker.scss

@@ -0,0 +1 @@
+$prefix: mzn-date-time-range-picker;

package/date-time-range-picker/_index.scss

@@ -0,0 +1 @@
+@forward './date-time-range-picker';

package/date-time-range-picker/dateTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+export declare const dateTimeRangePickerPrefix = "mzn-date-time-range-picker";
+export declare const dateTimeRangePickerClasses: {
+    readonly host: "mzn-date-time-range-picker";
+    readonly row: "mzn-date-time-range-picker--row";
+    readonly column: "mzn-date-time-range-picker--column";
+    readonly arrow: "mzn-date-time-range-picker__arrow";
+};

package/date-time-range-picker/dateTimeRangePicker.js

@@ -0,0 +1,9 @@
+const dateTimeRangePickerPrefix = 'mzn-date-time-range-picker';
+const dateTimeRangePickerClasses = {
+    host: dateTimeRangePickerPrefix,
+    row: `${dateTimeRangePickerPrefix}--row`,
+    column: `${dateTimeRangePickerPrefix}--column`,
+    arrow: `${dateTimeRangePickerPrefix}__arrow`,
+};
+
+export { dateTimeRangePickerClasses, dateTimeRangePickerPrefix };

package/date-time-range-picker/index.d.ts

@@ -0,0 +1 @@
+export { dateTimeRangePickerPrefix, dateTimeRangePickerClasses, } from './dateTimeRangePicker';

package/date-time-range-picker/index.js

@@ -0,0 +1 @@
+export { dateTimeRangePickerClasses, dateTimeRangePickerPrefix } from './dateTimeRangePicker.js';

package/drawer/_drawer-styles.scss

@@ -5,7 +5,6 @@
 @use '~@mezzanine-ui/system/spacing';
 @use '~@mezzanine-ui/system/radius';
 
-@use '../app-bar';
 @use './drawer' as *;
 
 $drawer-size: 256px !default;
@@ -70,11 +69,24 @@ $drawer-size-config: (
     }
   }
 
+  &__control-bar {
+    align-items: center;
+    border-block-end: 1px solid palette.semantic-variable(separator, neutral-faint);
+    display: flex;
+    justify-content: space-between;
+    padding-block: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, vertical, comfort);
+    padding-inline: spacing.semantic-variable(padding, horizontal, spacious);
+
+    &--button-only {
+      justify-content: flex-end;
+    }
+  }
+
   &__content {
+    flex-grow: 1;
+    overflow: auto;
     padding-block: spacing.semantic-variable(padding, vertical, comfort);
     padding-inline: spacing.semantic-variable(padding, horizontal, spacious);
-    overflow: auto;
-    flex-grow: 1;
   }
 
   &__bottom {
@@ -94,10 +106,6 @@ $drawer-size-config: (
     }
   }
 
-  .#{app-bar.$prefix} {
-    border: none;
-  }
-
   &__overlay {
     z-index: z-index.get(drawer);
   }

package/drawer/drawer.d.ts

@@ -14,4 +14,6 @@ export declare const drawerClasses: {
     readonly bottom__actions: "mzn-drawer__bottom__actions";
     readonly size: (size: DrawerSize) => string;
     readonly content: "mzn-drawer__content";
+    readonly controlBar: "mzn-drawer__control-bar";
+    readonly controlBarButtonOnly: "mzn-drawer__control-bar--button-only";
 };

package/drawer/drawer.js

@@ -8,6 +8,8 @@ const drawerClasses = {
     bottom__actions: `${drawerPrefix}__bottom__actions`,
     size: (size) => `${drawerPrefix}--${size}`,
     content: `${drawerPrefix}__content`,
+    controlBar: `${drawerPrefix}__control-bar`,
+    controlBarButtonOnly: `${drawerPrefix}__control-bar--button-only`,
 };
 
 export { drawerClasses, drawerPrefix };

package/filter-area/_filter-area-styles.scss

@@ -3,6 +3,7 @@
 @use '~@mezzanine-ui/system/radius' as radius;
 @use '~@mezzanine-ui/system/transition' as transition;
 @use './filter-area' as *;
+@use '../form/form-field' as formField;
 
 // Actions alignment configs
 $actions-align-configs: (
@@ -135,6 +136,12 @@ $layout-configs: (
     min-width: 0;
     grid-column: span var(--#{$prefix}-filter-span);
 
+    .#{formField.$prefix}__data-entry {
+      max-width: none;
+      min-width: 0;
+      width: 100%;
+    }
+    
     @include _apply-filter-align(stretch);
 
     @each $span, $value in $filter-span-configs {

package/form/_form-field-styles.scss

@@ -64,6 +64,23 @@ $form-field-counter-colors: (
 .#{$prefix}__label-area {
   padding-top: spacing.semantic-variable(padding, vertical, calm);
   padding-bottom: spacing.semantic-variable(padding, vertical, calm);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  &--horizontal-main {
+    padding-top: spacing.semantic-variable(padding, vertical, calm);
+    min-height: spacing.semantic-variable(size, container, micro);
+  }
+
+  &--horizontal-sub {
+    padding-top: spacing.semantic-variable(padding, vertical, tight);
+    min-height: spacing.semantic-variable(size, container, atomic);
+  }
+
+  &--vertical {
+    padding-top: spacing.semantic-variable(padding, vertical, tiny);
+  }
 }
 
 @each $size in $form-field-sizes {
@@ -174,6 +191,16 @@ $form-field-counter-colors: (
   gap: spacing.semantic-variable(gap, slim);
 }
 
+.#{$prefix}__control-field-slot {
+  &--main {
+    min-height: spacing.semantic-variable(size, container, micro);
+  }
+
+  &--sub {
+    min-height: spacing.semantic-variable(size, container, atomic);
+  }
+}
+
 .#{$prefix}__hint-text-and-counter-area {
   display: flex;
   flex-flow: row nowrap;