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

package/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
-import { Size } from '@mezzanine-ui/system/size';
-export type AutoCompleteInputSize = Size;
+import { GeneralSize } from '@mezzanine-ui/system/size';
+export type AutoCompleteInputSize = GeneralSize;
 export type AutoCompleteMode = 'single' | 'multiple';
 export type AutoCompleteTriggerType = 'default' | 'error';
 export type AutoCompleteSelector = 'input' | 'selection';

package/breadcrumb/_breadcrumb-styles.scss

@@ -20,7 +20,9 @@
     @include button.reset();
 
     border-radius: radius.variable(tiny);
+    line-height: 0;
     position: relative;
+    transition: transition.standard(background-color, fast), transition.standard(box-shadow, fast);
 
     & > :first-child {
       color: palette.semantic-variable(icon, neutral);
@@ -28,8 +30,13 @@
     }
 
     &:focus-visible {
+      background-color: palette.semantic-variable('background', base);
       box-shadow: effect.variable(focus, primary);
     }
+
+    &:hover > :first-child {
+      color: palette.semantic-variable(icon, brand);
+    }
   }
 
   &__menu {
@@ -67,8 +74,17 @@
     white-space: nowrap;
 
     &:focus-visible {
+      background-color: palette.semantic-variable('background', base);
       box-shadow: effect.variable(focus, primary);
     }
+
+    &:hover {
+      color: palette.semantic-variable(text, brand);
+
+      .#{$prefix}__item__icon {
+        color: palette.semantic-variable(icon, brand);
+      }
+    }
   }
 
   &__icon {
@@ -79,6 +95,14 @@
   &--current {
     .#{$prefix}__item__trigger {
       color: palette.semantic-variable(text, neutral-solid);
+
+      &:hover {
+        color: palette.semantic-variable(text, neutral-solid);
+
+        .#{$prefix}__item__icon {
+          color: palette.semantic-variable(icon, neutral);
+        }
+      }
     }
   }
 
@@ -89,6 +113,14 @@
       .#{$prefix}__item__icon {
         color: palette.semantic-variable(icon, neutral-solid);
       }
+
+      &:hover {
+        color: palette.semantic-variable(text, neutral-solid);
+
+        .#{$prefix}__item__icon {
+          color: palette.semantic-variable(icon, neutral-solid);
+        }
+      }
     }
   }
 }
@@ -134,13 +166,3 @@
     }
   }
 }
-
-a.#{$prefix}__item, button.#{$prefix}__item:not(.#{$prefix}__item--expanded) {
-  &:hover {
-    color: palette.semantic-variable(text, brand);
-
-    .#{$prefix}__item__icon {
-      color: palette.semantic-variable(icon, brand);
-    }
-  }
-}

package/content-header/_content-header-styles.scss

@@ -56,6 +56,8 @@
   }
 
   &--sub {
+    gap: spacing.semantic-variable(gap, base);
+
     .#{$prefix}__action-area {
       gap: spacing.semantic-variable(gap, base);
     }

package/navigation/_navigation-styles.scss

@@ -352,13 +352,21 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
     }
   }
 
-  &--active.#{$option-prefix}--open {
+  &--active:not(.#{$option-prefix}--open):not(.#{$option-prefix}--basic) {
     & > .#{$option-prefix}__content {
       background-color: palette.semantic-variable('background', brand-ghost);
+
+      .#{$option-prefix}__title {
+        color: palette.semantic-variable(text, neutral-solid);
+      }
+
+      .#{$option-prefix}__icon {
+        color: palette.semantic-variable(icon, neutral-solid);
+      }
     }
   }
 
-  &--active {
+  &--active.#{$option-prefix}--open {
     & > .#{$option-prefix}__content {
       .#{$option-prefix}__title {
         color: palette.semantic-variable(text, brand);
@@ -367,6 +375,10 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
       .#{$option-prefix}__icon {
         color: palette.semantic-variable(icon, brand);
       }
+
+      .#{$option-prefix}__toggle-icon {
+        color: palette.semantic-variable(icon, neutral-solid);
+      }
     }
   }
 
@@ -388,6 +400,7 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
     @include utils.reset();
 
     display: grid;
+    gap: spacing.semantic-variable(gap, tight);
   }
 
 

package/package.json

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

package/stepper/_stepper-styles.scss

@@ -1,5 +1,8 @@
 @use 'sass:map';
+@use '~@mezzanine-ui/system/effect' as effect;
+@use '~@mezzanine-ui/system/motion' as motion;
 @use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/radius';
 @use '~@mezzanine-ui/system/spacing';
 @use '~@mezzanine-ui/system/transition';
 @use '~@mezzanine-ui/system/typography';
@@ -70,9 +73,29 @@ $status-colors: (
 
 $dotBoxShadowMargin: #{spacing.semantic-variable(size, element, tiny)};
 
+@keyframes stepper-dot-breath {
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  50% {
+    box-shadow: 0 0 0 #{$dotBoxShadowMargin} palette.semantic-variable(background, brand-subtle);
+  }
+
+  100% {
+    box-shadow: 0 0 0 #{$dotBoxShadowMargin} transparent;
+  }
+}
+
 .#{$prefix-step} {
   &--interactive {
+    border-radius: radius.variable(base);
     cursor: pointer;
+    outline: none;
+
+    &:focus-visible {
+      box-shadow: effect.variable(focus, primary);
+    }
   }
 
   // transitions
@@ -253,6 +276,17 @@ $dotBoxShadowMargin: #{spacing.semantic-variable(size, element, tiny)};
     }
   }
 
+  &--dot {
+    &.#{$prefix-step}--processing {
+      .#{$prefix-step}__status-indicator-dot {
+        @include motion.pattern(breathe, animation);
+
+        animation-iteration-count: infinite;
+        animation-name: stepper-dot-breath;
+      }
+    }
+  }
+
   &__status-indicator {
     width: spacing.semantic-variable(size, element, relaxed);
     height: spacing.semantic-variable(size, element, relaxed);

package/tab/_tab-styles.scss

@@ -26,19 +26,33 @@
       position: absolute;
     }
 
+    &.#{$prefix}--main {
+      padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, spacious) 0;
+    }
+
     .#{$prefix}__item {
       padding: spacing.semantic-variable(padding, vertical, base) 0 spacing.semantic-variable(padding, vertical, comfort);
     }
 
+    &.#{$prefix}--sub .#{$prefix}__item {
+      padding: spacing.semantic-variable(padding, vertical, tight) 0 spacing.semantic-variable(padding, vertical, calm);
+    }
+
     .#{$prefix}__active-bar {
       border-bottom: spacing.semantic-variable(size, element, hairline) solid palette.semantic-variable(border, brand);
       bottom: 0;
       height: spacing.semantic-variable(size, element, hairline);
       left: var(--active-bar-shift, 0);
       position: absolute;
-      transition: transition.standard(left, moderate), transition.standard(width, moderate);
+      transition: transition.standard(left, moderate), transition.standard(width, moderate), transition.standard(border-color, fast);
       width: var(--active-bar-length, 0);
     }
+
+    &:has(.#{$prefix}__item--active.#{$prefix}__item--error) {
+      .#{$prefix}__active-bar {
+        border-bottom-color: palette.semantic-variable(border, error);
+      }
+    }
   }
 
   &--vertical {
@@ -55,11 +69,19 @@
       position: absolute;
     }
 
+    &.#{$prefix}--main {
+      padding: 0 0 0 spacing.semantic-variable(padding, horizontal, spacious);
+    }
+
     .#{$prefix}__item {
       padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, base) spacing.semantic-variable(padding, vertical, calm) 0;
       width: fit-content;
     }
 
+    &.#{$prefix}--sub .#{$prefix}__item {
+      padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, base) spacing.semantic-variable(padding, vertical, base) 0;
+    }
+
     .#{$prefix}__active-bar {
       $vertical-spacing: spacing.semantic-variable(padding, vertical, tiny);
 
@@ -68,9 +90,15 @@
       position: absolute;
       right: 0;
       top: calc(var(--active-bar-shift, 0) + #{$vertical-spacing});
-      transition: transition.standard(top, moderate), transition.standard(height, moderate);
+      transition: transition.standard(top, moderate), transition.standard(height, moderate), transition.standard(border-color, fast);
       width: spacing.semantic-variable(size, element, hairline);
     }
+
+    &:has(.#{$prefix}__item--active.#{$prefix}__item--error) {
+      .#{$prefix}__active-bar {
+        border-right-color: palette.semantic-variable(border, error);
+      }
+    }
   }
 
   &__item {
@@ -81,10 +109,12 @@
     box-sizing: border-box;
     color: palette.semantic-variable(text, neutral-strong);
     display: flex;
+    transition: transition.standard(color, fast);
 
     &__icon {
       color: palette.semantic-variable(icon, neutral-strong);
       margin-right: spacing.semantic-variable(gap, base);
+      transition: transition.standard(color, fast);
     }
 
     &__badge {
@@ -92,7 +122,7 @@
     }
 
     &:hover:not(&--active) {
-      color: palette.semantic-variable(text, neutral-solid);
+      color: palette.semantic-variable(text, brand);
 
       .#{$prefix}__item__icon {
         color: palette.semantic-variable(icon, brand);
@@ -120,6 +150,14 @@
       }
     }
 
+    &--error {
+      color: palette.semantic-variable(text, error);
+
+      .#{$prefix}__item__icon {
+        color: palette.semantic-variable(icon, error);
+      }
+    }
+
     &:disabled {
       color: palette.semantic-variable(text, neutral-light);
       cursor: default;

package/tab/tab.d.ts

@@ -3,9 +3,12 @@ export declare const tabClasses: {
     readonly host: "mzn-tab";
     readonly tabHorizontal: "mzn-tab--horizontal";
     readonly tabVertical: "mzn-tab--vertical";
+    readonly tabSizeMain: "mzn-tab--main";
+    readonly tabSizeSub: "mzn-tab--sub";
     readonly tabActiveBar: "mzn-tab__active-bar";
     readonly tabItem: "mzn-tab__item";
     readonly tabItemActive: "mzn-tab__item--active";
+    readonly tabItemError: "mzn-tab__item--error";
     readonly tabItemIcon: "mzn-tab__item__icon";
     readonly tabItemBadge: "mzn-tab__item__badge";
 };

package/tab/tab.js

@@ -3,9 +3,12 @@ const tabClasses = {
     host: tabPrefix,
     tabHorizontal: `${tabPrefix}--horizontal`,
     tabVertical: `${tabPrefix}--vertical`,
+    tabSizeMain: `${tabPrefix}--main`,
+    tabSizeSub: `${tabPrefix}--sub`,
     tabActiveBar: `${tabPrefix}__active-bar`,
     tabItem: `${tabPrefix}__item`,
     tabItemActive: `${tabPrefix}__item--active`,
+    tabItemError: `${tabPrefix}__item--error`,
     tabItemIcon: `${tabPrefix}__item__icon`,
     tabItemBadge: `${tabPrefix}__item__badge`,
 };

package/table/_table-styles.scss

@@ -337,6 +337,24 @@ $z-index-config: (
       }
     }
 
+    &--state-added {
+      td {
+        background-color: palette.semantic-variable("background", brand-ghost);
+      }
+    }
+
+    &--state-deleted {
+      td {
+        background-color: palette.semantic-variable("background", error-ghost);
+      }
+    }
+
+    &--state-disabled {
+      td {
+        background-color: palette.semantic-variable("background", neutral-subtle);
+      }
+    }
+
     &--zebra {
       td {
         background-color: palette.semantic-variable("background", neutral-ghost);

package/table/table.d.ts

@@ -21,6 +21,9 @@ export declare const tableClasses: {
     readonly bodyRowSelected: "mzn-table__body__row--selected";
     readonly bodyRowSeparator: "mzn-table__body__row--separator";
     readonly bodyRowZebra: "mzn-table__body__row--zebra";
+    readonly bodyRowStateAdded: "mzn-table__body__row--state-added";
+    readonly bodyRowStateDeleted: "mzn-table__body__row--state-deleted";
+    readonly bodyRowStateDisabled: "mzn-table__body__row--state-disabled";
     readonly bulkActions: "mzn-table__bulk-actions";
     readonly bulkActionsFixed: "mzn-table__bulk-actions--fixed";
     readonly bulkActionsSelectionSummary: "mzn-table__bulk-actions__selection-summary";
@@ -93,6 +96,8 @@ export type HighlightMode = 'cell' | 'column' | 'row' | 'cross';
 export type FixedType = boolean | 'start' | 'end';
 /** Table size type */
 export type TableSize = 'main' | 'sub';
+/** Row state for semantic background color overrides */
+export type TableRowState = 'added' | 'deleted' | 'disabled';
 /**
  * Title menu configuration for table column header dropdown
  */

package/table/table.js

@@ -17,6 +17,9 @@ const tableClasses = {
     bodyRowSelected: `${tableBodyPrefix}__row--selected`,
     bodyRowSeparator: `${tableBodyPrefix}__row--separator`,
     bodyRowZebra: `${tableBodyPrefix}__row--zebra`,
+    bodyRowStateAdded: `${tableBodyPrefix}__row--state-added`,
+    bodyRowStateDeleted: `${tableBodyPrefix}__row--state-deleted`,
+    bodyRowStateDisabled: `${tableBodyPrefix}__row--state-disabled`,
     bulkActions: `${tablePrefix}__bulk-actions`,
     bulkActionsFixed: `${tablePrefix}__bulk-actions--fixed`,
     bulkActionsSelectionSummary: `${tablePrefix}__bulk-actions__selection-summary`,

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

@@ -323,6 +323,38 @@ $size-configs: (
     }
   }
 
+  &--clearing {
+    & > .#{$prefix}__clear-icon {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .#{$prefix}__suffix--overlay {
+      .#{$prefix}__suffix-content {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .#{$prefix}__clear-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__suffix--overlay {
+    display: grid;
+
+    .#{$prefix}__suffix-content,
+    .#{$prefix}__clear-icon {
+      grid-area: 1 / 1;
+    }
+  }
+
+  &__suffix-content {
+    transition: transition.standard(opacity, fast);
+  }
+
   &--disabled {
     cursor: not-allowed;
     pointer-events: none;

package/text-field/textField.d.ts

@@ -7,6 +7,9 @@ export declare const textFieldClasses: {
     readonly active: "mzn-text-field--active";
     readonly clearIcon: "mzn-text-field__clear-icon";
     readonly clearable: "mzn-text-field--clearable";
+    readonly clearing: "mzn-text-field--clearing";
+    readonly suffixContent: "mzn-text-field__suffix-content";
+    readonly suffixOverlay: "mzn-text-field__suffix--overlay";
     readonly disabled: "mzn-text-field--disabled";
     readonly error: "mzn-text-field--error";
     readonly fullWidth: "mzn-text-field--full-width";

package/text-field/textField.js

@@ -5,6 +5,9 @@ const textFieldClasses = {
     active: `${textFieldPrefix}--active`,
     clearIcon: `${textFieldPrefix}__clear-icon`,
     clearable: `${textFieldPrefix}--clearable`,
+    clearing: `${textFieldPrefix}--clearing`,
+    suffixContent: `${textFieldPrefix}__suffix-content`,
+    suffixOverlay: `${textFieldPrefix}__suffix--overlay`,
     disabled: `${textFieldPrefix}--disabled`,
     error: `${textFieldPrefix}--error`,
     fullWidth: `${textFieldPrefix}--full-width`,