@mezzanine-ui/core 1.0.0-rc.8 → 1.0.1

package/accordion/_accordion-styles.scss

@@ -101,6 +101,10 @@
   &__actions {
     position: absolute;
     right: spacing.semantic-variable(padding, horizontal, spacious);
+
+    .mzn-button {
+      min-width: unset;
+    }
   }
 
   &__icon {

package/autocomplete/_autocomplete-styles.scss

@@ -6,6 +6,7 @@
 
 .#{$prefix} {
   position: relative;
+  width: 100%;
 
   &--single {
     min-width: spacing.semantic-variable(size, container, concentrate-fixed);
@@ -23,10 +24,6 @@
     }
   }
 
-  &--full-width {
-    width: 100%;
-  }
-
   &--inside-closed {
     .#{select.$trigger-prefix} {
       opacity: 0;

package/autocomplete/autocomplete.d.ts

@@ -21,7 +21,6 @@ export type AutoCompleteSelector = 'input' | 'selection';
 export declare const autocompletePrefix = "mzn-autocomplete";
 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

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

package/card/_card-styles.scss

@@ -314,7 +314,7 @@ $file-icon-color: (
     flex: 1;
     display: flex;
     flex-flow: row;
-    align-items: flex-start;
+    align-items: center;
     gap: spacing.semantic-variable(gap, slim);
 
     &__filetype {

package/cascader/_cascader-styles.scss

@@ -61,8 +61,7 @@
   width: spacing.semantic-variable(size, container, tight);
   max-height: spacing.semantic-variable(size, container, expanded);
   overflow: hidden;
-  padding: spacing.semantic-variable(padding, vertical, tight)
-    spacing.semantic-variable(padding, horizontal, tight);
+  padding: 0;
   box-sizing: border-box;
   animation: #{$prefix}-fade-in motion.duration(fast) motion.easing(standard) both;
 
@@ -73,7 +72,7 @@
   ul {
     list-style: none;
     margin: 0;
-    padding: 3px;
+    padding: spacing.semantic-variable(padding, horizontal, tight);
   }
 }
 

package/checkbox/_checkbox-styles.scss

@@ -668,7 +668,7 @@ $checked-disabled: (
 
   &--nested {
     .#{$group-prefix}--content-wrapper.#{$group-prefix}--vertical.#{$group-prefix}--chip {
-      .#{$prefix}.#{$prefix}--indeterminate.#{$prefix}--chip {
+      .#{$prefix}.#{$prefix}--chip:first-child {
         margin-bottom: spacing.semantic-variable(padding, vertical, tiny);
       }
     }

package/input/_input-action-button-styles.scss

@@ -60,7 +60,7 @@ $action-button-sizes: (
 @mixin _apply-action-button-states($state) {
   $config: map.get($action-button-states, $state);
 
-  --#{$prefix}-action-button-icon-color: map.get($config, icon);
+  --#{$prefix}-action-button-icon-color: #{map.get($config, icon)};
 
   color: map.get($config, text);
   background-color: map.get($config, background);

package/input/_input-select-button-styles.scss

@@ -11,28 +11,28 @@
 $select-button-states: (
   enable: (
     text: palette.semantic-variable(text, neutral-solid),
-    icon: palette.semantic-variable(icon, neutral-solid),
+    icon: palette.semantic-variable(icon, neutral),
     background: palette.semantic-variable(background, neutral-faint),
     border: palette.semantic-variable(border, neutral-light),
     focus: none,
   ),
   hover: (
     text: palette.semantic-variable(text, neutral-solid),
-    icon: palette.semantic-variable(icon, neutral-solid),
+    icon: palette.semantic-variable(icon, neutral),
     background: palette.semantic-variable(background, brand-ghost),
     border: palette.semantic-variable(border, neutral-light),
     focus: none,
   ),
   active: (
     text: palette.semantic-variable(text, neutral-solid),
-    icon: palette.semantic-variable(icon, neutral-solid),
+    icon: palette.semantic-variable(icon, neutral),
     background: palette.semantic-variable(background, brand-faint),
     border: palette.semantic-variable(border, neutral-light),
     focus: none,
   ),
   focus: (
     text: palette.semantic-variable(text, neutral-solid),
-    icon: palette.semantic-variable(icon, neutral-solid),
+    icon: palette.semantic-variable(icon, neutral),
     background: palette.semantic-variable(background, neutral-faint),
     border: palette.semantic-variable(border, neutral-light),
     focus: effect.variable(focus, primary),
@@ -60,7 +60,7 @@ $select-button-sizes: (
 @mixin _apply-select-button-states($state) {
   $config: map.get($select-button-states, $state);
 
-  --#{$prefix}-select-button-icon-color: map.get($config, icon);
+  --#{$prefix}-select-button-icon-color: #{map.get($config, icon)};
 
   color: map.get($config, text);
   background-color: map.get($config, background);

package/llms.txt

@@ -13,13 +13,25 @@ This package does **not** export React components. It is a styling and type laye
 
 ## Style Import Pattern
 
-Each component has its own style entry point. Import it once in your application (e.g. in your app entry file or a global CSS barrel):
+The recommended approach is to load all component styles at once via the SCSS barrel:
+
+```scss
+@use '@mezzanine-ui/system' as mzn-system;
+@use '@mezzanine-ui/core' as mzn-core;
+
+:root {
+  @include mzn-system.common-variables('default');
+  @include mzn-system.colors('light');
+}
+
+@include mzn-core.styles();
+```
+
+Per-component JS imports still work but are not the preferred approach:
 
 ```ts
 import '@mezzanine-ui/core/button/styles';
 import '@mezzanine-ui/core/input/styles';
-import '@mezzanine-ui/core/select/styles';
-import '@mezzanine-ui/core/modal/styles';
 ```
 
 Available style directories mirror component names: `accordion`, `alert-banner`, `anchor`, `backdrop`, `badge`, `breadcrumb`, `button`, `calendar`, `checkbox`, `drawer`, `empty`, `form`, `icon`, `inline-message`, `input`, `message`, `modal`, `navigation`, `page-footer`, `page-header`, `pagination`, `picker`, `portal`, `progress`, `radio`, `result-state`, `select`, `skeleton`, `slider`, `spin`, `stepper`, `tag`, `text-field`, `textarea`, `time-panel`, `toggle`, `tooltip`, `typography`, `upload`.

package/navigation/_navigation-styles.scss

@@ -29,14 +29,22 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
     flex-grow: 1;
     gap: spacing.semantic-variable(gap, tight-fixed);
     margin-right: -1px;
-    padding: spacing.semantic-variable(padding, vertical, base)
-      spacing.semantic-variable(padding, horizontal, comfort-fixed);
+    padding-block: spacing.semantic-variable(padding, vertical, base);
 
     .#{$prefix}__list {
       @include utils.reset();
 
       display: grid;
       gap: spacing.semantic-variable(gap, tight);
+      padding-inline: spacing.semantic-variable(padding, horizontal, comfort-fixed);
+    }
+  }
+
+  &__search-input {
+    padding-inline: spacing.semantic-variable(padding, horizontal, comfort-fixed);
+
+    .mzn-text-field {
+      width: 100%;
     }
   }
 
@@ -479,6 +487,15 @@ $option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #
       .mzn-badge {
         display: none;
       }
+
+      &:not(:has(.#{$option-prefix}__icon)) {
+        justify-content: center;
+        padding-inline: 0;
+
+        .#{$option-prefix}__title-wrapper {
+          margin-right: 0;
+        }
+      }
     }
 
     &.#{$option-prefix}--active.#{$option-prefix}--open {

package/package.json

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

package/radio/_radio-styles.scss

@@ -114,6 +114,11 @@
   &--checked & {
     &__segmented-container {
       background-color: var(--#{$prefix}-segmented-checked-color);
+      color: palette.semantic-variable(text, neutral-solid);
+
+      .mzn-icon {
+        color: palette.semantic-variable(icon, neutral-solid);
+      }
     }
   }
 

package/stepper/_stepper-styles.scss

@@ -87,6 +87,20 @@ $dotBoxShadowMargin: #{spacing.semantic-variable(size, element, tiny)};
   }
 }
 
+@keyframes stepper-dot-breath-error {
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  50% {
+    box-shadow: 0 0 0 #{$dotBoxShadowMargin} palette.semantic-variable(background, error-subtle);
+  }
+
+  100% {
+    box-shadow: 0 0 0 #{$dotBoxShadowMargin} transparent;
+  }
+}
+
 .#{$prefix-step} {
   &--interactive {
     border-radius: radius.variable(base);
@@ -285,6 +299,15 @@ $dotBoxShadowMargin: #{spacing.semantic-variable(size, element, tiny)};
         animation-name: stepper-dot-breath;
       }
     }
+
+    &.#{$prefix-step}--processing-error {
+      .#{$prefix-step}__status-indicator-dot {
+        @include motion.pattern(breathe, animation);
+
+        animation-iteration-count: infinite;
+        animation-name: stepper-dot-breath-error;
+      }
+    }
   }
 
   &__status-indicator {