@mezzanine-ui/core 1.0.0-rc.0 → 1.0.0-rc.2

package/_styles.scss

@@ -86,6 +86,7 @@
   @include _load-styles($options, date-time-range-picker);
   @include _load-styles($options, slider);
   @include _load-styles($options, dropdown);
+  @include _load-styles($options, cascader);
 
   // Data Entry Form
   @include _load-styles($options, form, form-field);

package/badge/_badge-styles.scss

@@ -71,7 +71,7 @@ $count-type-config: (
     &.#{$prefix}--dot-#{$type} {
       @include typography.semantic-variable(body);
 
-      column-gap: spacing.semantic-variable(gap, base);
+      column-gap: spacing.semantic-variable(gap, tight-fixed);
       color: map.get($dot-type-config, $type, text-color);
 
       &::before {
@@ -81,6 +81,10 @@ $count-type-config: (
         border-radius: radius.variable(full);
         background-color: map.get($dot-type-config, $type, icon-color);
       }
+
+      &.#{$prefix}--sub {
+        @include typography.semantic-variable(caption);
+      }
     }
   }
 
@@ -90,6 +94,10 @@ $count-type-config: (
 
       column-gap: spacing.semantic-variable(gap, base);
       color: map.get($dot-type-config, $type, text-color);
+
+      &.#{$prefix}--sub {
+        @include typography.semantic-variable(caption);
+      }
     }
   }
 

package/badge/badge.d.ts

@@ -3,9 +3,11 @@ export type BadgeVariant = BadgeDotVariant | BadgeCountVariant | BadgeTextVarian
 export type BadgeTextVariant = 'text-success' | 'text-error' | 'text-warning' | 'text-info' | 'text-inactive';
 export type BadgeDotVariant = 'dot-success' | 'dot-error' | 'dot-warning' | 'dot-info' | 'dot-inactive';
 export type BadgeCountVariant = 'count-alert' | 'count-inactive' | 'count-inverse' | 'count-brand' | 'count-info';
+export type BadgeTextSize = 'main' | 'sub';
 export declare const badgeClasses: {
     readonly host: "mzn-badge";
     readonly variant: (variant: BadgeDotVariant | BadgeCountVariant | BadgeTextVariant) => string;
-    readonly container: (hasChilden: boolean) => "mzn-badge__container--has-children" | "mzn-badge__container";
+    readonly size: (size: BadgeTextSize) => string;
+    readonly container: (hasChildren: boolean) => "mzn-badge__container--has-children" | "mzn-badge__container";
     readonly hide: "mzn-badge--hide";
 };

package/badge/badge.js

@@ -2,7 +2,8 @@ const badgePrefix = 'mzn-badge';
 const badgeClasses = {
     host: badgePrefix,
     variant: (variant) => `${badgePrefix}--${variant}`,
-    container: (hasChilden) => hasChilden
+    size: (size) => `${badgePrefix}--${size}`,
+    container: (hasChildren) => hasChildren
         ? `${badgePrefix}__container--has-children`
         : `${badgePrefix}__container`,
     hide: `${badgePrefix}--hide`,

package/button/_button-styles.scss

@@ -685,7 +685,11 @@ $size-configs: (
     @if $hierarchy-map {
       $value: map.get($hierarchy-map, $property);
 
-      @return if($value == none, null, $value);
+      @if $value == none {
+        @return null;
+      } @else {
+        @return $value;
+      }
     }
   }
 

package/calendar/_calendar-styles.scss

@@ -162,7 +162,6 @@
 }
 
 .#{$cell-prefix} {
-  --today-dot-color: #{palette.semantic-variable(icon, brand)};
   --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, neutral-solid)};
 
   position: relative;
@@ -178,6 +177,11 @@
   &--mode-week {
     width: spacing.semantic-variable(size, element, loose);
     height: spacing.semantic-variable(size, element, loose);
+
+    &.#{$cell-prefix}--with-annotation {
+      width: spacing.semantic-variable(size, element, extra-wide);
+      height: spacing.semantic-variable(size, element, extra-wide);
+    }
   }
 
   &--mode-month,
@@ -209,7 +213,7 @@
   }
 
   &--weekend {
-    --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, brand)};
+    --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, neutral)};
   }
 
   &--range-start {
@@ -223,7 +227,6 @@
   }
 
   &--active {
-    --today-dot-color: #{palette.semantic-variable(icon, fixed-light)};
     --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, neutral-solid)};
   }
 
@@ -237,27 +240,9 @@
   }
 
   &--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 {
-      display: none;
-    }
+    --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, brand)};
 
-    &.#{$cell-prefix}--with-annotation {
-      --#{$cell-prefix}-text-color: #{palette.semantic-variable(text, brand)};
-    }
+    @include typography.semantic-variable(input-highlight);
   }
 }
 

package/cascader/_cascader-styles.scss

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use '~@mezzanine-ui/system/radius' as radius;
+@use '~@mezzanine-ui/system/effect' as effect;
+@use '~@mezzanine-ui/system/transition' as transition;
+@use '~@mezzanine-ui/system/typography' as typography;
+@use '~@mezzanine-ui/system/motion' as motion;
+@use './cascader' as *;
+
+@keyframes #{$prefix}-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes #{$prefix}-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+// When trigger shows partial selection (open + navigating), apply brand color to input text.
+// Two-class selector to win over text-field's active state selector.
+.#{$prefix}-trigger--partial.mzn-text-field,
+.#{$prefix}-trigger--partial.mzn-text-field.mzn-text-field--active {
+  color: palette.semantic-variable(text, brand);
+}
+
+.#{$prefix} {
+  position: relative;
+  min-width: spacing.semantic-variable(size, container, concentrate-fixed);
+
+  &--full-width {
+    width: 100%;
+  }
+}
+
+.#{$dropdown-prefix}-panels {
+  background-color: palette.semantic-variable('background', base);
+  border-radius: radius.variable(roomy);
+  box-shadow: effect.variable(shadow, inner-top-and-bottom);
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.#{$panel-prefix} {
+  display: flex;
+  flex-direction: column;
+  width: spacing.semantic-variable(size, container, tight);
+  max-height: spacing.semantic-variable(size, container, expanded);
+  overflow-y: auto;
+  padding: spacing.semantic-variable(padding, vertical, tight)
+    spacing.semantic-variable(padding, horizontal, tight);
+  box-sizing: border-box;
+  animation: #{$prefix}-fade-in motion.duration(fast) motion.easing(standard) both;
+
+  & + & {
+    border-inline-start: 1px solid palette.semantic-variable(separator, neutral-faint);
+  }
+}
+
+.#{$item-prefix} {
+  display: flex;
+  align-items: center;
+  gap: spacing.semantic-variable(gap, base);
+  padding-inline: spacing.semantic-variable(padding, horizontal, base);
+  padding-block: spacing.semantic-variable(padding, vertical, base);
+  border-radius: radius.variable(base);
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: palette.semantic-variable('background', base);
+  list-style: none;
+  transition:
+    transition.standard(background-color, fast),
+    transition.standard(color, fast);
+
+  &:hover:not(.#{$item-prefix}--active):not(.#{$item-prefix}--disabled) {
+    background-color: palette.semantic-variable('background', neutral-faint);
+  }
+
+  &--active {
+    background-color: palette.semantic-variable('background', neutral-subtle);
+  }
+
+  &--focused:not(.#{$item-prefix}--disabled) {
+    box-shadow: effect.variable(focus, primary);
+    position: relative;
+    z-index: 1;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+
+    .#{$item-prefix}-label {
+      color: palette.semantic-variable(text, neutral-light);
+    }
+
+    .#{$item-prefix}-append {
+      color: palette.semantic-variable(icon, neutral-light);
+    }
+  }
+}
+
+.#{$item-prefix}-label {
+  @include typography.semantic-variable(label-primary);
+
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: palette.semantic-variable(text, neutral-solid);
+  transition: transition.standard(color, fast);
+  font-feature-settings: 'liga' off, 'clig' off;
+
+  .#{$item-prefix}--selected & {
+    color: palette.semantic-variable(text, brand);
+  }
+}
+
+.#{$item-prefix}-append {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: palette.semantic-variable(icon, neutral);
+  transition: transition.standard(color, fast);
+}

package/cascader/_cascader.scss

@@ -0,0 +1,4 @@
+$prefix: mzn-cascader;
+$dropdown-prefix: #{$prefix}-dropdown;
+$panel-prefix: #{$prefix}-panel;
+$item-prefix: #{$prefix}-item;

package/cascader/_index.scss

@@ -0,0 +1 @@
+@forward './cascader';

package/cascader/cascader.d.ts

@@ -0,0 +1,18 @@
+import { TextFieldSize } from '../text-field';
+export type CascaderSize = TextFieldSize;
+export declare const cascaderPrefix = "mzn-cascader";
+export declare const cascaderClasses: {
+    readonly host: "mzn-cascader";
+    readonly hostFullWidth: "mzn-cascader--full-width";
+    readonly dropdown: "mzn-cascader-dropdown";
+    readonly dropdownPanels: "mzn-cascader-dropdown-panels";
+    readonly panel: "mzn-cascader-panel";
+    readonly triggerPartial: "mzn-cascader-trigger--partial";
+    readonly item: "mzn-cascader-item";
+    readonly itemActive: "mzn-cascader-item--active";
+    readonly itemDisabled: "mzn-cascader-item--disabled";
+    readonly itemFocused: "mzn-cascader-item--focused";
+    readonly itemSelected: "mzn-cascader-item--selected";
+    readonly itemLabel: "mzn-cascader-item-label";
+    readonly itemAppend: "mzn-cascader-item-append";
+};

package/cascader/cascader.js

@@ -0,0 +1,18 @@
+const cascaderPrefix = 'mzn-cascader';
+const cascaderClasses = {
+    host: cascaderPrefix,
+    hostFullWidth: `${cascaderPrefix}--full-width`,
+    dropdown: `${cascaderPrefix}-dropdown`,
+    dropdownPanels: `${cascaderPrefix}-dropdown-panels`,
+    panel: `${cascaderPrefix}-panel`,
+    triggerPartial: `${cascaderPrefix}-trigger--partial`,
+    item: `${cascaderPrefix}-item`,
+    itemActive: `${cascaderPrefix}-item--active`,
+    itemDisabled: `${cascaderPrefix}-item--disabled`,
+    itemFocused: `${cascaderPrefix}-item--focused`,
+    itemSelected: `${cascaderPrefix}-item--selected`,
+    itemLabel: `${cascaderPrefix}-item-label`,
+    itemAppend: `${cascaderPrefix}-item-append`,
+};
+
+export { cascaderClasses, cascaderPrefix };

package/cascader/index.d.ts

@@ -0,0 +1 @@
+export * from './cascader';

package/cascader/index.js

@@ -0,0 +1 @@
+export { cascaderClasses, cascaderPrefix } from './cascader.js';

package/checkbox/_checkbox-styles.scss

@@ -83,7 +83,11 @@ $chip-host-states: (
 @function _get-mode-property($mode-map, $property) {
   $value: map.get($mode-map, $property);
 
-  @return if($value == none, null, $value);
+  @if $value == none {
+    @return null;
+  } @else {
+    @return $value;
+  }
 }
 
 // Apply mode styles
@@ -214,7 +218,11 @@ $checked-states: (
 @function _get-state-color($state-map, $property) {
   $value: map.get($state-map, $property);
 
-  @return if($value == none, null, $value);
+  @if $value == none {
+    @return null;
+  } @else {
+    @return $value;
+  }
 }
 
 // Apply state colors to input

package/clear-actions/_clear-actions-styles.scss

@@ -146,7 +146,11 @@ $variant-hierarchy: (
     @if $hierarchy-map {
       $value: map.get($hierarchy-map, $property);
 
-      @return if($value == none, null, $value);
+      @if $value == none {
+        @return null;
+      } @else {
+        @return $value;
+      }
     }
   }
 

package/empty/_empty-styles.scss

@@ -54,7 +54,11 @@ $size-configs: (
   @if $size-map {
     $value: map.get($size-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;

package/floating-button/_floating-button-styles.scss

@@ -50,7 +50,11 @@ $floating: (
     @if $hierarchy-map {
       $value: map.get($hierarchy-map, $property);
 
-      @return if($value == none, null, $value);
+      @if $value == none {
+        @return null;
+      } @else {
+        @return $value;
+      }
     }
   }
 

package/inline-message/_inline-message-styles.scss

@@ -48,7 +48,11 @@ $variant-hierarchy: (
   @if $variant-map {
     $value: map.get($variant-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;
@@ -111,11 +115,15 @@ $variant-hierarchy: (
 
   @each $severity in $severities {
     &--#{$severity} {
-      $variant-key: if(
-        $severity == 'info',
-        'base-info',
-        if($severity == 'error', 'base-error', 'base-warning')
-      );
+      $variant-key: null;
+
+      @if $severity == 'info' {
+        $variant-key: 'base-info';
+      } @else if $severity == 'error' {
+        $variant-key: 'base-error';
+      } @else {
+        $variant-key: 'base-warning';
+      }
 
       @include _apply-variant-colors($variant-key);
     }

package/layout/_layout-styles.scss

@@ -6,21 +6,56 @@
 @use './layout' as *;
 
 .#{$prefix} {
+  display: flex;
+  flex-flow: row nowrap;
+
+  &__navigation {
+    position: sticky;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100dvh;
+    z-index: z-index.get(base);
+  }
+
+  &__content-wrapper {
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
   &__main {
+    flex: 1;
     min-inline-size: spacing.semantic-variable(size, container, slim);
+    overflow: hidden;
 
-    .#{$prefix}--open & {
-      margin-inline-end: calc(var(--mzn-layout-side-panel-width) + 1px);
+    &__content {
+      min-inline-size: spacing.semantic-variable(size, container, expanded);
     }
   }
 
+  &__side-panel {
+    background-color: palette.semantic-variable('background', base);
+    block-size: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    min-inline-size: spacing.semantic-variable(size, container, slim);
+  }
+
+  &__side-panel-content {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
   &__divider {
     background-color: palette.semantic-variable(separator, neutral-faint);
     cursor: col-resize;
+    flex-shrink: 0;
     inline-size: 1px;
-    inset-block: 0;
-    inset-inline-end: var(--mzn-layout-side-panel-width);
-    position: fixed;
+    position: relative;
     z-index: z-index.get(base);
 
     &::before {
@@ -40,15 +75,4 @@
       background-color: palette.semantic-variable(separator, neutral-light);
     }
   }
-
-  &__side-panel {
-    background-color: palette.semantic-variable(background, base);
-    inline-size: var(--mzn-layout-side-panel-width);
-    inset-block: 0;
-    inset-inline-end: 0;
-    min-inline-size: spacing.semantic-variable(size, container, slim);
-    overflow-y: auto;
-    position: fixed;
-    z-index: z-index.get(base);
-  }
 }

package/layout/layout.d.ts

@@ -3,7 +3,12 @@ export declare const layoutClasses: {
     readonly divider: "mzn-layout__divider";
     readonly dividerDragging: "mzn-layout__divider--dragging";
     readonly host: "mzn-layout";
-    readonly hostOpen: "mzn-layout--open";
+    readonly navigation: "mzn-layout__navigation";
+    readonly contentWrapper: "mzn-layout__content-wrapper";
     readonly main: "mzn-layout__main";
+    readonly mainContent: "mzn-layout__main__content";
     readonly sidePanel: "mzn-layout__side-panel";
+    readonly sidePanelContent: "mzn-layout__side-panel-content";
+    readonly sidePanelLeft: "mzn-layout__side-panel--left";
+    readonly sidePanelRight: "mzn-layout__side-panel--right";
 };

package/layout/layout.js

@@ -3,9 +3,14 @@ const layoutClasses = {
     divider: `${layoutPrefix}__divider`,
     dividerDragging: `${layoutPrefix}__divider--dragging`,
     host: layoutPrefix,
-    hostOpen: `${layoutPrefix}--open`,
+    navigation: `${layoutPrefix}__navigation`,
+    contentWrapper: `${layoutPrefix}__content-wrapper`,
     main: `${layoutPrefix}__main`,
+    mainContent: `${layoutPrefix}__main__content`,
     sidePanel: `${layoutPrefix}__side-panel`,
+    sidePanelContent: `${layoutPrefix}__side-panel-content`,
+    sidePanelLeft: `${layoutPrefix}__side-panel--left`,
+    sidePanelRight: `${layoutPrefix}__side-panel--right`,
 };
 
 export { layoutClasses, layoutPrefix };

package/modal/_modal-styles.scss

@@ -81,10 +81,6 @@ $modalSizes: (
     @include _full-screen();
   }
 
-  &__overlay {
-    z-index: z-index.get(modal);
-  }
-
   &__content-wrapper {
     display: flex;
     justify-content: center;

package/modal/modal.d.ts

@@ -13,7 +13,6 @@ export declare const modalStatusTypeIcons: {
 };
 export declare const modalClasses: {
     readonly host: "mzn-modal";
-    readonly overlay: "mzn-modal__overlay";
     readonly contentWrapper: "mzn-modal__content-wrapper";
     readonly closeIcon: "mzn-modal__close-icon";
     readonly modalStatusType: (severity: ModalStatusType) => string;

package/modal/modal.js

@@ -11,7 +11,6 @@ const modalStatusTypeIcons = {
 };
 const modalClasses = {
     host: modalPrefix,
-    overlay: `${modalPrefix}__overlay`,
     contentWrapper: `${modalPrefix}__content-wrapper`,
     closeIcon: `${modalPrefix}__close-icon`,
     modalStatusType: (severity) => `${modalPrefix}--${severity}`,

package/navigation/_navigation-styles.scss

@@ -41,6 +41,7 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
 
   &--expand {
     width: spacing.semantic-variable(size, container, slim);
+    min-width: spacing.semantic-variable(size, container, slim);
     height: 100%;
 
     .#{$prefix}__content {
@@ -50,6 +51,7 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
 
   &--collapsed {
     width: spacing.semantic-variable(size, container, collapsed);
+    min-width: spacing.semantic-variable(size, container, collapsed);
     height: 100%;
     max-height: 100%;
 
@@ -275,8 +277,10 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
       padding: 0;
       width: 100%;
 
-      > :not(:first-child) {
-        display: none;
+      &__content {
+        & > :not(:first-child) {
+          display: none;
+        }
       }
     }
   }
@@ -349,13 +353,13 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
   }
 
   &--active.#{$option-prefix}--open {
-    .#{$option-prefix}__content {
+    & > .#{$option-prefix}__content {
       background-color: palette.semantic-variable('background', brand-ghost);
     }
   }
 
   &--active {
-    .#{$option-prefix}__content {
+    & > .#{$option-prefix}__content {
       .#{$option-prefix}__title {
         color: palette.semantic-variable(text, brand);
       }
@@ -367,7 +371,7 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
   }
 
   &--active.#{$option-prefix}--basic {
-    .#{$option-prefix}__content {
+    & > .#{$option-prefix}__content {
       background-color: palette.semantic-variable('background', brand-faint);
 
       .#{$option-prefix}__title {
@@ -457,32 +461,47 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
 .#{$user-menu-prefix} {
   @include btn-utils.reset();
 
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: spacing.semantic-variable(gap, tight-fixed);
-  width: fit-content;
-  border-radius: radius.variable(base);
   padding: spacing.semantic-variable(padding, vertical, micro)
     spacing.semantic-variable(padding, horizontal, tiny);
+  max-width: calc(spacing.semantic-variable(size, container, slim) - var(--icons-width) - spacing.semantic-variable(padding, horizontal, comfort-fixed) * 2 - spacing.semantic-variable(gap, tight-fixed));
 
-  &__avatar {
+  &__content {
+    align-items: center;
+    border-radius: radius.variable(base);
     box-sizing: border-box;
-    width: spacing.semantic-variable(size, element, airy);
-    height: spacing.semantic-variable(size, element, airy);
-    border-radius: radius.variable(full);
+    display: flex;
+    gap: spacing.semantic-variable(gap, tight-fixed);
+    position: relative;
+  }
+
+  &__avatar {
+    align-items: center;
     background-color: palette.semantic-variable('background', neutral);
-    color: palette.semantic-variable(icon, fixed-light);
+    border-radius: radius.variable(full);
     border: 1px solid palette.semantic-variable('background', neutral-subtle);
+    box-sizing: border-box;
+    color: palette.semantic-variable(icon, fixed-light);
     display: flex;
-    align-items: center;
+    flex-shrink: 0;
+    height: spacing.semantic-variable(size, element, airy);
     justify-content: center;
+    width: spacing.semantic-variable(size, element, airy);
   }
 
   &__user-name {
     @include typography.semantic-variable(caption);
 
+    align-items: center;
     color: palette.semantic-variable(text, neutral-solid);
+    display: flex;
+    flex-shrink: 1;
+    overflow-x: hidden;
+
+    & > span {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   &__icon {

package/navigation/navigation.d.ts

@@ -63,6 +63,7 @@ export declare const navigationOptionCategoryClasses: {
 export declare const navigationUserMenuPrefix: "mzn-navigation-user-menu";
 export declare const navigationUserMenuClasses: {
     readonly host: "mzn-navigation-user-menu";
+    readonly content: "mzn-navigation-user-menu__content";
     readonly open: "mzn-navigation-user-menu--open";
     readonly avatar: "mzn-navigation-user-menu__avatar";
     readonly userName: "mzn-navigation-user-menu__user-name";

package/navigation/navigation.js

@@ -63,6 +63,7 @@ const navigationOptionCategoryClasses = {
 const navigationUserMenuPrefix = `${navigationPrefix}-user-menu`;
 const navigationUserMenuClasses = {
     host: navigationUserMenuPrefix,
+    content: `${navigationUserMenuPrefix}__content`,
     open: `${navigationUserMenuPrefix}--open`,
     avatar: `${navigationUserMenuPrefix}__avatar`,
     userName: `${navigationUserMenuPrefix}__user-name`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.2",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -40,8 +40,8 @@
     }
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "1.0.0-rc.0",
-    "@mezzanine-ui/system": "1.0.0-rc.0",
+    "@mezzanine-ui/icons": "1.0.0-rc.2",
+    "@mezzanine-ui/system": "1.0.0-rc.2",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },

package/page-footer/_page-footer-styles.scss

@@ -4,7 +4,7 @@
 
 .#{$prefix} {
   width: 100%;
-  padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, comfort-fixed);
+  padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, spacious);
   background-color: palette.semantic-variable("background", base);
   display: flex;
   align-items: center;

package/picker/_picker-styles.scss

@@ -8,6 +8,10 @@
   display: inline-flex;
   align-items: center;
 
+  &--range {
+    min-width: spacing.semantic-variable(size, container, slender);
+  }
+
   &__arrow-icon {
     display: flex;
     align-items: center;

package/picker/picker.d.ts

@@ -3,6 +3,7 @@ import { DateType } from '../calendar';
 export declare const pickerPrefix = "mzn-picker";
 export declare const pickerClasses: {
     readonly host: "mzn-picker";
+    readonly hostRange: "mzn-picker--range";
     readonly arrowIcon: "mzn-picker__arrow-icon";
     readonly inputMono: "mzn-picker__input-mono";
     readonly formattedInput: "mzn-picker__formatted-input";

package/picker/picker.js

@@ -2,6 +2,7 @@
 const pickerPrefix = 'mzn-picker';
 const pickerClasses = {
     host: pickerPrefix,
+    hostRange: `${pickerPrefix}--range`,
     arrowIcon: `${pickerPrefix}__arrow-icon`,
     inputMono: `${pickerPrefix}__input-mono`,
     formattedInput: `${pickerPrefix}__formatted-input`,

package/progress/_progress-styles.scss

@@ -69,7 +69,11 @@ $status-hierarchy: (
   @if $type-map {
     $value: map.get($type-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;
@@ -82,7 +86,11 @@ $status-hierarchy: (
   @if $status-map {
     $value: map.get($status-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;

package/section/_section-styles.scss

@@ -14,4 +14,8 @@
   justify-content: flex-start;
   align-items: stretch;
   gap: spacing.semantic-variable(gap, calm);
+
+  &__content {
+    min-height: spacing.semantic-variable(size, container, small);
+  }
 }

package/section/section.d.ts

@@ -1,4 +1,5 @@
 export declare const sectionPrefix = "mzn-section";
 export declare const sectionClasses: {
     readonly host: "mzn-section";
+    readonly hostContent: "mzn-section__content";
 };

package/section/section.js

@@ -1,6 +1,7 @@
 const sectionPrefix = 'mzn-section';
 const sectionClasses = {
     host: sectionPrefix,
+    hostContent: `${sectionPrefix}__content`,
 };
 
 export { sectionClasses, sectionPrefix };

package/stepper/_stepper-styles.scss

@@ -49,7 +49,11 @@ $status-colors: (
   @if $status-map {
     $value: map.get($status-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;

package/tag/_tag-styles.scss

@@ -94,6 +94,7 @@ $tag-type-config: (
 $tag-size-config: (
   main: (
     typography: label-primary,
+    height: spacing.semantic-variable(size, element, airy),
     padding-vertical: spacing.semantic-variable(padding, vertical, tight),
     padding-horizontal: spacing.semantic-variable(padding, horizontal, tight),
     padding-text-side: spacing.semantic-variable(padding, horizontal, base),
@@ -101,6 +102,7 @@ $tag-size-config: (
   ),
   sub: (
     typography: label-primary,
+    height: spacing.semantic-variable(size, element, gentle-fixed),
     padding-vertical: spacing.semantic-variable(padding, vertical, micro),
     padding-horizontal: spacing.semantic-variable(padding, horizontal, micro),
     padding-text-side: spacing.semantic-variable(padding, horizontal, tiny),
@@ -108,6 +110,7 @@ $tag-size-config: (
   ),
   minor: (
     typography: caption,
+    height: spacing.semantic-variable(size, element, gentle-fixed),
     padding-vertical: spacing.semantic-variable(padding, vertical, micro),
     padding-horizontal: spacing.semantic-variable(padding, horizontal, micro),
     padding-text-side: spacing.semantic-variable(padding, horizontal, tiny),
@@ -146,7 +149,6 @@ $tag-size-config: (
   flex-shrink: 0;
   border-radius: radius.variable(base);
   width: fit-content;
-  height: fit-content;
   transition:
     transition.standard(color, fast),
     transition.standard(background-color, fast),
@@ -209,6 +211,7 @@ $tag-size-config: (
           map.get($size-config, typography)
         );
 
+        height: map.get($size-config, height);
         padding-block: map.get($size-config, padding-vertical);
         padding-inline: map.get($size-config, padding-horizontal);
 

package/text-field/_text-field-styles.scss

@@ -155,7 +155,11 @@ $size-configs: (
     @if $state-map {
       $value: map.get($state-map, $property);
 
-      @return if($value == none, null, $value);
+      @if $value == none {
+        @return null;
+      } @else {
+        @return $value;
+      }
     }
   }
 

package/toggle/_toggle-styles.scss

@@ -71,7 +71,11 @@ $radius: radius.variable(full);
     @if $switch-map {
       $value: map.get($switch-map, $switch);
 
-      @return if($value == none, null, $value);
+      @if $value == none {
+        @return null;
+      } @else {
+        @return $value;
+      }
     }
   }
 
@@ -85,7 +89,11 @@ $radius: radius.variable(full);
   @if $size-map {
     $value: map.get($size-map, $property);
 
-    @return if($value == none, null, $value);
+    @if $value == none {
+      @return null;
+    } @else {
+      @return $value;
+    }
   }
 
   @return null;

package/upload/_upload-picture-card-styles.scss

@@ -182,6 +182,49 @@ $image-size: spacing.primitive-variable(140);
     }
   }
 
+  &--replace-mode {
+    cursor: pointer;
+
+    .#{$prefix}__container:hover {
+      .#{$prefix}__actions--done {
+        opacity: 1;
+        pointer-events: auto;
+        background: palette.semantic-variable(overlay, subtle);
+
+        .#{$prefix}__replace-label {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .#{$prefix}__tools {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  &__replace-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: palette.semantic-variable("overlay", default);
+    color: palette.semantic-variable(text, fixed-light);
+    border-radius: radius.variable(base);
+    padding-block: spacing.semantic-variable(padding, vertical, tight);
+    padding-inline: spacing.semantic-variable(padding, horizontal, base);
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      transition.standard(opacity, fast),
+      transition.standard(visibility, fast);
+
+    @include typography.semantic-variable(input);
+  }
+
   &__size {
     color: palette.semantic-variable(text, neutral);
     @include typography.semantic-variable(annotation);

package/upload/uploadPictureCard.d.ts

@@ -20,6 +20,8 @@ export declare const uploadPictureCardClasses: {
     readonly errorIcon: "mzn-upload-picture-card__error-icon";
     readonly error: "mzn-upload-picture-card--error";
     readonly disabled: "mzn-upload-picture-card--disabled";
+    readonly replaceMode: "mzn-upload-picture-card--replace-mode";
+    readonly replaceLabel: "mzn-upload-picture-card__replace-label";
 };
 /**
  * Default error message for upload picture card when upload fails.

package/upload/uploadPictureCard.js

@@ -16,6 +16,8 @@ const uploadPictureCardClasses = {
     errorIcon: `${uploadPictureCardPrefix}__error-icon`,
     error: `${uploadPictureCardPrefix}--error`,
     disabled: `${uploadPictureCardPrefix}--disabled`,
+    replaceMode: `${uploadPictureCardPrefix}--replace-mode`,
+    replaceLabel: `${uploadPictureCardPrefix}__replace-label`,
 };
 /**
  * Default error message for upload picture card when upload fails.