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

package/_styles.scss

@@ -22,6 +22,7 @@
   @include _load-styles($options, button);
 
   // Internal
+  @include _load-styles($options, scrollbar);
   @include _load-styles($options, clear-actions);
   @include _load-styles($options, overflow-tooltip);
 
@@ -51,7 +52,7 @@
   @include _load-styles($options, app-bar);
   @include _load-styles($options, page-footer);
   @include _load-styles($options, page-header);
-  @include _load-styles($options, page-toolbar);
+  @include _load-styles($options, content-header);
   @include _load-styles($options, stepper);
 
   // Data Display
@@ -70,6 +71,7 @@
   @include _load-styles($options, input);
   @include _load-styles($options, radio);
   @include _load-styles($options, select);
+  @include _load-styles($options, autocomplete);
   @include _load-styles($options, selection);
   @include _load-styles($options, textarea);
   @include _load-styles($options, toggle);
@@ -85,13 +87,14 @@
 
   // Data Entry Form
   @include _load-styles($options, form, form-field);
+  @include _load-styles($options, filter-area);
 
   // Feedback
   @include _load-styles($options, alert);
   @include _load-styles($options, alert-banner);
   @include _load-styles($options, message);
   @include _load-styles($options, modal);
-  @include _load-styles($options, notification);
+  @include _load-styles($options, notification-center);
   @include _load-styles($options, popconfirm);
   @include _load-styles($options, progress);
   @include _load-styles($options, spin);

package/anchor/_anchor-styles.scss

@@ -1,48 +1,88 @@
-@use '~@mezzanine-ui/system/palette';
-@use '~@mezzanine-ui/system/transition';
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use '~@mezzanine-ui/system/transition' as transition;
+@use '~@mezzanine-ui/system/effect' as effect;
 @use '../button/utils' as btn-utils;
 @use './anchor' as *;
 
-$bar-width: 1px !default;
-$anchor-left-padding: 12px !default;
+$bar-width: 2px !default;
 
 .#{$prefix} {
+  position: relative;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
-  gap: 8px;
-  position: relative;
 
-  &__bar {
+  &::before {
+    content: '';
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 0;
+    bottom: 0;
     width: $bar-width;
-    height: 100%;
-    background-color: palette.color(border);
+    background-color: palette.semantic-variable('border', neutral-faint);
+    pointer-events: none;
   }
 
-  &__anchor {
+  &__anchorItem {
     @include btn-utils.reset();
 
     display: inline-grid;
     position: relative;
-    z-index: 1;
     width: 100%;
-    border-left: $bar-width solid palette.color(border);
-    padding-left: $anchor-left-padding;
+    padding-left: calc(spacing.semantic-variable(gap, base) + $bar-width);
+    padding-top: spacing.semantic-variable(padding, vertical, calm);
+    padding-bottom: spacing.semantic-variable(padding, vertical, calm);
     text-align: left;
-    color: palette.color(action-inactive);
+    color: palette.semantic-variable(text, neutral);
     transition: transition.standard(border-left), transition.standard(color);
 
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: spacing.semantic-variable(gap, tight);
+      width: $bar-width;
+      height: calc(100% - 2 * spacing.semantic-variable(gap, tight));
+      background-color: palette.semantic-variable('border', neutral-faint);
+      transition: transition.standard(background-color);
+    }
+
     &:hover {
-      color: palette.color(primary);
+      color: palette.semantic-variable(text, neutral-solid);
     }
 
     &--active {
-      color: palette.color(primary);
-      border-left: $bar-width solid palette.color(primary);
+      color: palette.semantic-variable(text, brand);
+      position: relative;
+
+      &::before {
+        background-color: palette.semantic-variable(text, brand);
+      }
+    }
+
+    &--disabled {
+      color: palette.semantic-variable(text, neutral-light);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &:focus-visible {
+      background-color: palette.semantic-variable(background, base);
+      box-shadow: effect.variable(focus, primary);
+    }
+  }
+
+  &__nested {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    &--level-1 {
+      padding-left: spacing.semantic-variable(gap, spacious);
+    }
+
+    &--level-2 {
+      padding-left: spacing.semantic-variable(gap, loose);
     }
   }
 }

package/anchor/anchor.d.ts

@@ -1,7 +1,10 @@
 export declare const anchorPrefix = "mzn-anchor";
 export declare const anchorClasses: {
+    readonly anchorItem: "mzn-anchor__anchorItem";
+    readonly anchorItemActive: "mzn-anchor__anchorItem--active";
+    readonly anchorItemDisabled: "mzn-anchor__anchorItem--disabled";
     readonly host: "mzn-anchor";
-    readonly bar: "mzn-anchor__bar";
-    readonly anchor: "mzn-anchor__anchor";
-    readonly anchorActive: "mzn-anchor__anchor--active";
+    readonly nested: "mzn-anchor__nested";
+    readonly nestedLevel1: "mzn-anchor__nested--level-1";
+    readonly nestedLevel2: "mzn-anchor__nested--level-2";
 };

package/anchor/anchor.js

@@ -1,9 +1,12 @@
 const anchorPrefix = 'mzn-anchor';
 const anchorClasses = {
+    anchorItem: `${anchorPrefix}__anchorItem`,
+    anchorItemActive: `${anchorPrefix}__anchorItem--active`,
+    anchorItemDisabled: `${anchorPrefix}__anchorItem--disabled`,
     host: anchorPrefix,
-    bar: `${anchorPrefix}__bar`,
-    anchor: `${anchorPrefix}__anchor`,
-    anchorActive: `${anchorPrefix}__anchor--active`,
+    nested: `${anchorPrefix}__nested`,
+    nestedLevel1: `${anchorPrefix}__nested--level-1`,
+    nestedLevel2: `${anchorPrefix}__nested--level-2`,
 };
 
 export { anchorClasses, anchorPrefix };

package/autocomplete/_autocomplete-styles.scss

@@ -0,0 +1,22 @@
+@use '../select/select' as select;
+@use './autocomplete' as *;
+
+.#{$prefix} {
+  position: relative;
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--inside-closed {
+    .#{select.$trigger-prefix} {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .#{select.$trigger-prefix}__input {
+    padding: 0;
+  }
+}
+

package/autocomplete/_autocomplete.scss

@@ -0,0 +1,2 @@
+$prefix: mzn-autocomplete;
+

package/autocomplete/_index.scss

@@ -0,0 +1,2 @@
+@forward './autocomplete';
+

package/autocomplete/autocomplete.d.ts

@@ -0,0 +1,11 @@
+import { Size } from '@mezzanine-ui/system/size';
+export type AutoCompleteInputSize = Size;
+export type AutoCompleteMode = 'single' | 'multiple';
+export type AutoCompleteTriggerType = 'default' | 'error';
+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";
+};

package/autocomplete/autocomplete.js

@@ -0,0 +1,8 @@
+const autocompletePrefix = 'mzn-autocomplete';
+const autocompleteClasses = {
+    host: autocompletePrefix,
+    hostFullWidth: `${autocompletePrefix}--full-width`,
+    hostInsideClosed: `${autocompletePrefix}--inside-closed`,
+};
+
+export { autocompleteClasses, autocompletePrefix };

package/autocomplete/index.d.ts

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

package/autocomplete/index.js

@@ -0,0 +1 @@
+export { autocompleteClasses, autocompletePrefix } from './autocomplete.js';

package/breadcrumb/_breadcrumb-styles.scss

@@ -14,45 +14,122 @@
   display: flex;
   flex-wrap: nowrap;
   gap: spacing.semantic-variable(gap, tiny);
+  position: relative;
+
+  &__icon-button {
+    @include button.reset();
+
+    border-radius: radius.variable(tiny);
+    position: relative;
+
+    & > :first-child {
+      color: palette.semantic-variable(icon, neutral);
+      transition: transition.standard(color, fast);
+    }
+
+    &:focus-visible {
+      box-shadow: effect.variable(focus, primary);
+    }
+  }
+
+  &__menu {
+    z-index: 1;
+    background-color: palette.semantic-variable('background', base);
+    border-radius: radius.variable(roomy);
+    box-shadow: effect.variable(shadow, raised);
+    display: flex;
+    height: fit-content;
+    margin-top: spacing.semantic-variable(padding, vertical, tight);
+    padding: spacing.semantic-variable(padding, vertical, tight) spacing.semantic-variable(padding, horizontal, tight);
+    position: relative;
+    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;
+    }
+  }
 }
 
 .#{$prefix}__item {
-  @include button.reset();
+  position: relative;
 
-  align-items: center;
-  border-radius: radius.variable(tiny);
-  color: palette.semantic-variable(text, neutral);
-  display: flex;
-  gap: spacing.semantic-variable(gap, tiny);
-  transition: transition.standard(color, fast), transition.standard(background-color, fast), transition.standard(box-shadow, fast);
-  white-space: nowrap;
+  &__trigger {
+    @include button.reset();
+
+    align-items: center;
+    border-radius: radius.variable(tiny);
+    color: palette.semantic-variable(text, neutral);
+    display: flex;
+    gap: spacing.semantic-variable(gap, tiny);
+    transition: transition.standard(color, fast), transition.standard(background-color, fast), transition.standard(box-shadow, fast);
+    white-space: nowrap;
+
+    &:focus-visible {
+      box-shadow: effect.variable(focus, primary);
+    }
+  }
 
   &__icon {
     color: palette.semantic-variable(icon, neutral);
     transition: transition.standard(color, fast);
   }
 
-  &__menu {
-    inset-block-start: calc(100% + spacing.semantic-variable(gap, tight-fixed));
-    inset-inline-start: 0;
-    position: absolute;
-  }
-
   &--current {
-    color: palette.semantic-variable(text, neutral-solid);
+    .#{$prefix}__item__trigger {
+      color: palette.semantic-variable(text, neutral-solid);
+    }
   }
 
   &--expanded {
+    .#{$prefix}__item__trigger {
+      color: palette.semantic-variable(text, neutral-solid);
+
+      .#{$prefix}__item__icon {
+        color: palette.semantic-variable(icon, neutral-solid);
+      }
+    }
+  }
+}
+
+.#{$prefix}__overflow-menu-item {
+  display: grid;
+
+  > :first-child {
+    display: grid;
+  }
+
+  &__trigger {
+    @include button.reset();
+
+    align-items: center;
     color: palette.semantic-variable(text, neutral-solid);
+    display: flex;
+    gap: spacing.semantic-variable(gap, tiny);
+    justify-content: space-between;
+    transition: transition.standard(color, fast), transition.standard(background-color, fast), transition.standard(box-shadow, fast);
+    white-space: nowrap;
+    padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, base);
+    background-color: palette.semantic-variable('background', base);
+    border-radius: radius.variable(base);
 
-    .#{$prefix}__item__icon {
-      color: palette.semantic-variable(icon, neutral-solid);
+    &:focus-visible {
+      box-shadow: effect.variable(focus, primary);
     }
   }
 
-  &:focus-visible {
-    background-color: palette.semantic-variable(background, white);
-    box-shadow: effect.variable(focus, primary);
+  &__icon {
+    color: palette.semantic-variable(icon, neutral);
+    transition: transition.standard(color, fast);
+  }
+
+  &--expanded {
+    .#{$prefix}__overflow-menu-item__trigger {
+      background-color: palette.semantic-variable('background', neutral-subtle);
+    }
   }
 }
 

package/breadcrumb/breadcrumb.d.ts

@@ -1,11 +1,21 @@
 export declare const breadcrumbPrefix = "mzn-breadcrumb";
 export declare const breadcrumbClasses: {
     readonly host: "mzn-breadcrumb";
+    readonly iconButton: "mzn-breadcrumb__icon-button";
+    readonly menu: "mzn-breadcrumb__menu";
+    readonly menuContent: "mzn-breadcrumb__menu__content";
+    readonly menuItem: "mzn-breadcrumb__menu-item";
 };
 export declare const breadcrumbItemClasses: {
     readonly host: "mzn-breadcrumb__item";
+    readonly trigger: "mzn-breadcrumb__item__trigger";
     readonly current: "mzn-breadcrumb__item--current";
     readonly expanded: "mzn-breadcrumb__item--expanded";
     readonly icon: "mzn-breadcrumb__item__icon";
-    readonly menu: "mzn-breadcrumb__item__menu";
+};
+export declare const breadcrumbOverflowMenuItemClasses: {
+    readonly host: "mzn-breadcrumb__overflow-menu-item";
+    readonly trigger: "mzn-breadcrumb__overflow-menu-item__trigger";
+    readonly expanded: "mzn-breadcrumb__overflow-menu-item--expanded";
+    readonly icon: "mzn-breadcrumb__overflow-menu-item__icon";
 };

package/breadcrumb/breadcrumb.js

@@ -1,13 +1,23 @@
 const breadcrumbPrefix = 'mzn-breadcrumb';
 const breadcrumbClasses = {
     host: breadcrumbPrefix,
+    iconButton: `${breadcrumbPrefix}__icon-button`,
+    menu: `${breadcrumbPrefix}__menu`,
+    menuContent: `${breadcrumbPrefix}__menu__content`,
+    menuItem: `${breadcrumbPrefix}__menu-item`,
 };
 const breadcrumbItemClasses = {
     host: `${breadcrumbPrefix}__item`,
+    trigger: `${breadcrumbPrefix}__item__trigger`,
     current: `${breadcrumbPrefix}__item--current`,
     expanded: `${breadcrumbPrefix}__item--expanded`,
     icon: `${breadcrumbPrefix}__item__icon`,
-    menu: `${breadcrumbPrefix}__item__menu`,
+};
+const breadcrumbOverflowMenuItemClasses = {
+    host: `${breadcrumbPrefix}__overflow-menu-item`,
+    trigger: `${breadcrumbPrefix}__overflow-menu-item__trigger`,
+    expanded: `${breadcrumbPrefix}__overflow-menu-item--expanded`,
+    icon: `${breadcrumbPrefix}__overflow-menu-item__icon`,
 };
 
-export { breadcrumbClasses, breadcrumbItemClasses, breadcrumbPrefix };
+export { breadcrumbClasses, breadcrumbItemClasses, breadcrumbOverflowMenuItemClasses, breadcrumbPrefix };

package/breadcrumb/index.js

@@ -1 +1 @@
-export { breadcrumbClasses, breadcrumbItemClasses, breadcrumbPrefix } from './breadcrumb.js';
+export { breadcrumbClasses, breadcrumbItemClasses, breadcrumbOverflowMenuItemClasses, breadcrumbPrefix } from './breadcrumb.js';

package/button/_button-styles.scss

@@ -477,7 +477,7 @@ $inverse: (
     text-color: palette.semantic-variable(text, fixed-light),
     icon-color: palette.semantic-variable(icon, fixed-light),
     background-color: none,
-    border-color: palette.semantic-variable(surface, subtle),
+    border-color: palette.semantic-variable(border, fixed-light-alpha),
     focus-color: none,
   ),
   hover: (
@@ -636,6 +636,7 @@ $size-sub-configs: (
 $size-minor-configs: (
   // 無 icon
   default: (
+    min-width: spacing.semantic-variable(size, element, extra-wide),
     padding-y: spacing.semantic-variable(padding, vertical, tiny),
     padding-x: spacing.semantic-variable(padding, horizontal, tight),
   ),
@@ -759,6 +760,10 @@ $size-configs: (
     // 非對稱 padding (leading 和 trailing)
     padding: map.get($padding-config, padding-y) map.get($padding-config, padding-right) map.get($padding-config, padding-y) map.get($padding-config, padding-left);
   }
+
+  @if map.has-key($padding-config, min-width) {
+    min-width: map.get($padding-config, min-width);
+  }
 }
 
 // 套用 size 配置
@@ -801,6 +806,7 @@ $size-configs: (
 
       width: fit-content;
       aspect-ratio: 1;
+      min-width: unset;
     }
   }
 }

package/button/button.d.ts

@@ -1,12 +1,7 @@
 import { GeneralSize } from '@mezzanine-ui/system/size';
-import { IconDefinition } from '@mezzanine-ui/icons';
 export type ButtonVariant = 'base-primary' | 'base-secondary' | 'base-tertiary' | 'base-ghost' | 'base-dashed' | 'base-text-link' | 'destructive-primary' | 'destructive-secondary' | 'destructive-ghost' | 'destructive-text-link' | 'inverse' | 'inverse-ghost';
 export type ButtonSize = GeneralSize;
-export type ButtonIconPosition = 'leading' | 'trailing' | 'icon-only';
-export interface ButtonIcon {
-    position: ButtonIconPosition;
-    src: IconDefinition;
-}
+export type ButtonIconType = 'leading' | 'trailing' | 'icon-only';
 export declare const buttonPrefix = "mzn-button";
 export declare const buttonClasses: {
     host: string;

package/checkbox/_checkbox-styles.scss

@@ -581,7 +581,7 @@ $checked-states: (
     width: 1px;
     height: spacing.semantic-variable(size, element, gentle);
     margin-inline: 1px;
-    background-color: palette.semantic-variable(border, neutral-faint);
+    background-color: palette.semantic-variable(separator, neutral-faint);
   }
 
   &--nested {

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

@@ -0,0 +1,56 @@
+
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/spacing';
+@use './content-header' as *;
+
+.#{$prefix} {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: spacing.semantic-variable(gap, calm);
+
+  &__title-area {
+    align-items: flex-start;
+    display: flex;
+    flex-grow: 1;
+    gap: spacing.semantic-variable(gap, tiny);
+    max-width: spacing.semantic-variable(size, container, balanced);
+    width: 100%;
+  }
+
+  &__action-area {
+    display: flex;
+    align-items: center;
+    gap: spacing.semantic-variable(gap, calm);
+    width: fit-content;
+
+    .#{$prefix}__utilities {
+      display: flex;
+      align-items: center;
+      gap: spacing.semantic-variable(gap, base);
+      width: fit-content;
+    }
+  }
+
+
+  &--main {
+    .#{$prefix}__title-area {
+      gap: spacing.semantic-variable(gap, tiny);
+
+      .#{$prefix}__text-group {
+        padding: spacing.semantic-variable(gap, tiny) 0 spacing.semantic-variable(gap, tiny);
+      }
+    }
+
+    .#{$prefix}__action-area {
+      gap: spacing.semantic-variable(gap, calm);
+    }
+  }
+
+  &--sub {
+    .#{$prefix}__action-area {
+      gap: spacing.semantic-variable(gap, base);
+    }
+  }
+}

package/content-header/_content-header.scss

@@ -0,0 +1 @@
+$prefix: mzn-content-header;

package/content-header/_index.scss

@@ -0,0 +1 @@
+@forward './content-header';

package/content-header/contentHeader.d.ts

@@ -0,0 +1,12 @@
+export declare const contentHeaderPrefix = "mzn-content-header";
+type ContentHeaderSize = 'main' | 'sub';
+export declare const contentHeaderClasses: {
+    readonly host: "mzn-content-header";
+    readonly size: (size: ContentHeaderSize) => string;
+    readonly titleArea: "mzn-content-header__title-area";
+    readonly textGroup: "mzn-content-header__text-group";
+    readonly actionArea: "mzn-content-header__action-area";
+    readonly utilities: "mzn-content-header__utilities";
+    readonly backButton: "mzn-content-header__back-button";
+};
+export {};

package/content-header/contentHeader.js

@@ -0,0 +1,12 @@
+const contentHeaderPrefix = 'mzn-content-header';
+const contentHeaderClasses = {
+    host: contentHeaderPrefix,
+    size: (size) => `${contentHeaderPrefix}--${size}`,
+    titleArea: `${contentHeaderPrefix}__title-area`,
+    textGroup: `${contentHeaderPrefix}__text-group`,
+    actionArea: `${contentHeaderPrefix}__action-area`,
+    utilities: `${contentHeaderPrefix}__utilities`,
+    backButton: `${contentHeaderPrefix}__back-button`,
+};
+
+export { contentHeaderClasses, contentHeaderPrefix };

package/content-header/index.d.ts

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

package/content-header/index.js

@@ -0,0 +1 @@
+export { contentHeaderClasses, contentHeaderPrefix } from './contentHeader.js';