@mezzanine-ui/core 1.0.0-beta.0 → 1.0.0-beta.1

package/_styles.scss

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

package/dropdown/_dropdown-styles.scss

@@ -0,0 +1,355 @@
+@use 'sass:map';
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/typography' as typography;
+@use '~@mezzanine-ui/system/radius' as radius;
+@use '~@mezzanine-ui/system/effect' as effect;
+@use '~@mezzanine-ui/system/transition' as transition;
+@use './dropdown' as *;
+
+$card-state-configs: (
+  enable: (
+    background: palette.semantic-variable(background, base),
+    title-color: palette.semantic-variable(text, neutral-strong),
+    description-color: palette.semantic-variable(text, neutral),
+    focus: none,
+  ),
+  hover: (
+    background: palette.semantic-variable(background, neutral-faint),
+  ),
+  active: (
+    background: palette.semantic-variable(background, neutral-subtle),
+  ),
+  focus: (
+    background: palette.semantic-variable(background, base),
+    focus: effect.variable(focus, primary),
+  ),
+  disabled: (
+    background: palette.semantic-variable(background, base),
+    title-color: palette.semantic-variable(text, neutral-light),
+    description-color: palette.semantic-variable(text, neutral-light),
+    focus: none,
+  ),
+);
+
+$card-level-padding: (
+  0: spacing.semantic-variable(padding, horizontal, base),
+  1: spacing.semantic-variable(padding, horizontal, relaxed),
+  2: spacing.semantic-variable(padding, horizontal, ultra),
+);
+
+$section-configs: (
+  list: (
+    radius: radius.variable(roomy),
+    background: palette.semantic-variable(background, base),
+    shadow: effect.variable(shadow, inner-top-and-bottom),
+    padding-inline: spacing.semantic-variable(padding, horizontal, tight),
+    padding-block: spacing.semantic-variable(padding, vertical, tight),
+  ),
+  list-header: (
+    background: palette.semantic-variable(background, base),
+    padding-block: spacing.semantic-variable(padding, vertical, tight),
+    padding-inline: spacing.semantic-variable(padding, horizontal, tight),
+  ),
+  action: (
+    background: palette.semantic-variable(background, base),
+  ),
+  action-top-bar: (
+    background: palette.semantic-variable(separator, neutral-faint),
+    height: 1px,
+    margin-block: spacing.semantic-variable(padding, vertical, tiny),
+  ),
+  status: (
+    background: palette.semantic-variable(background, base),
+    gap: spacing.semantic-variable(gap, tight-fixed),
+    padding-inline: spacing.semantic-variable(padding, horizontal, base),
+    padding-block: spacing.semantic-variable(padding, vertical, base),
+  ),
+);
+
+@function _card-state($state, $property) {
+  $state-map: map.get($card-state-configs, $state);
+
+  @if $state-map {
+    @return map.get($state-map, $property);
+  }
+
+  @return null;
+}
+
+@mixin _apply-card-state($state) {
+  $background: _card-state($state, background);
+  $title-color: _card-state($state, title-color);
+  $description-color: _card-state($state, description-color);
+  $focus: _card-state($state, focus);
+
+  @if $background {
+    background-color: $background;
+  }
+
+  @if $title-color {
+    --#{$prefix}-item-card-title-color: #{$title-color};
+  }
+
+  @if $description-color {
+    --#{$prefix}-item-card-description-color: #{$description-color};
+  }
+
+  @if $focus {
+    box-shadow: $focus;
+  }
+}
+
+@mixin _apply-card-states() {
+  @include _apply-card-state(enable);
+
+  &:hover:not(.#{$prefix}-item-card--disabled) {
+    @include _apply-card-state(hover);
+  }
+
+  &:active:not(.#{$prefix}-item-card--disabled) {
+    @include _apply-card-state(active);
+  }
+
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    @include _apply-card-state(focus);
+    outline: none;
+  }
+
+  &.#{$prefix}-item-card--active:not(.#{$prefix}-item-card--disabled) {
+    @include _apply-card-state(active);
+  }
+
+  &.#{$prefix}-item-card--disabled {
+    @include _apply-card-state(disabled);
+    box-shadow: none;
+  }
+}
+
+@function _section($section, $property) {
+  $section-map: map.get($section-configs, $section);
+
+  @if $section-map {
+    @return map.get($section-map, $property);
+  }
+
+  @return null;
+}
+
+@mixin _apply-section($section) {
+  $background: _section($section, background);
+  $radius: _section($section, radius);
+  $shadow: _section($section, shadow);
+  $padding-inline: _section($section, padding-inline);
+  $padding-block: _section($section, padding-block);
+  $gap: _section($section, gap);
+  $border-color: _section($section, border-color);
+  $height: _section($section, height);
+  $margin-block: _section($section, margin-block);
+
+  @if $background {
+    background-color: $background;
+  }
+
+  @if $radius {
+    border-radius: $radius;
+  }
+
+  @if $shadow {
+    box-shadow: $shadow;
+  }
+
+  @if $padding-inline {
+    padding-inline: $padding-inline;
+  }
+
+  @if $padding-block {
+    padding-block: $padding-block;
+  }
+
+  @if $gap {
+    gap: $gap;
+  }
+
+  @if $border-color {
+    border-color: $border-color;
+  }
+
+  @if $height {
+    height: $height;
+  }
+
+  @if $margin-block {
+    margin-block: $margin-block;
+  }
+}
+
+.#{$prefix}  {
+  position: relative;
+
+  // dropdown items
+  &-list {
+    @include _apply-section(list);
+    width: 100%;
+    min-width: max-content;
+    max-width: 100%;
+    margin: 0;
+    list-style: none;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  &-list-header {
+    @include _apply-section(list-header);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+
+  &-list-header-inner {
+    display: block;
+    width: 100%;
+  }
+
+  &-group-label {
+    @include typography.semantic-variable(body);
+    color: palette.semantic-variable(text, neutral-light);
+    font-feature-settings: 'liga' off, 'clig' off;
+    padding-block: spacing.semantic-variable(padding, vertical, tiny);
+    padding-inline: spacing.semantic-variable(padding, horizontal, tiny);
+  }
+
+  &-list-wrapper {
+    overflow-y: auto;
+    padding-inline: spacing.semantic-variable(padding, horizontal, micro);
+  }
+
+  &-item-card {
+    @include _apply-card-states();
+    border-radius: radius.variable(base);
+    padding-inline: spacing.semantic-variable(padding, horizontal, base);
+    padding-block: spacing.semantic-variable(padding, vertical, base);
+    box-sizing: border-box;
+    cursor: pointer;
+    margin-bottom: spacing.semantic-variable(gap, tiny);
+    position: relative;
+    list-style: none;
+    width: 100%;
+    transition:
+      transition.standard(background-color, fast),
+      transition.standard(color, fast),
+      transition.standard(border, fast),
+      transition.standard(box-shadow, fast);
+    --#{$prefix}-item-card-title-color: palette.semantic-variable(text, neutral-strong);
+    --#{$prefix}-item-card-description-color: palette.semantic-variable(text, neutral);
+    
+    &--disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // dropdown item card
+  @each $level, $padding-inline-start in $card-level-padding {
+    &-item-card--level-#{$level} {
+      padding-inline-start: $padding-inline-start;
+    }
+  }
+
+  &-item-card-underline {
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
+    margin-block: spacing.semantic-variable(padding, vertical, tiny);
+  }
+
+  &-item-card-container {
+    display: flex;
+    gap: spacing.semantic-variable(gap, base);
+    align-items: center;
+    width: 100%;
+  }
+
+  &-item-card-title {
+    @include typography.semantic-variable(label-primary);
+    overflow: hidden;
+    font-feature-settings: 'liga' off, 'clig' off;
+    text-overflow: ellipsis;
+    transition: transition.standard(color, fast);
+    color: var(--#{$prefix}-item-card-title-color, currentColor);
+  }
+  &-item-card-description {
+    @include typography.semantic-variable(caption);
+    overflow: hidden;
+    font-feature-settings: 'liga' off, 'clig' off;
+    text-overflow: ellipsis;
+    transition: transition.standard(color, fast);
+    color: var(--#{$prefix}-item-card-description-color, currentColor);
+  }
+  &-item-card-prepend-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing.semantic-variable(gap, base);
+  }
+  &-item-card-highlighted-text {
+    color: palette.semantic-variable(text, brand);
+    transition: transition.standard(color, fast);
+  }
+  &-item-card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    gap: spacing.semantic-variable(gap, tight);
+  }
+  &-item-card-append-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing.semantic-variable(gap, base);
+  }
+
+  // dropdown action
+  &-action {
+    display: flex;
+    @include _apply-section(action);
+    position: sticky;
+    inset-block-end: 0;
+    flex-direction: column;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &-action--top-bar {
+    @include _apply-section(action-top-bar);
+    display: block;
+    width: 100%;
+    inset-block-start: 0;
+  }
+
+  &-action-tools {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  // dropdown status
+  &-status {
+    display: flex;
+    @include _apply-section(status);
+    position: relative;
+    align-items: center;
+    width: 100%;
+  }
+
+  &-status-text {
+    @include typography.semantic-variable(input);
+    color: palette.semantic-variable(text, neutral);
+    text-align: center;
+    font-feature-settings: 'liga' off, 'clig' off;
+  }
+}

package/dropdown/_dropdown.scss

@@ -0,0 +1 @@
+$prefix: mzn-dropdown;

package/dropdown/_index.scss

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

package/dropdown/dropdown.d.ts

@@ -0,0 +1,143 @@
+import type { IconDefinition } from '@mezzanine-ui/icons';
+export declare const dropdownPrefix = "mzn-dropdown";
+export type dropdownPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type dropdownStatus = 'loading' | 'empty';
+export type dropdownMode = 'single' | 'multiple';
+export type dropdownType = 'default' | 'tree' | 'grouped';
+export type dropdownItemLevel = 0 | 1 | 2;
+export type dropdownItemValidate = 'default' | 'danger';
+export type dropdownCheckPosition = 'prepend' | 'append' | 'none';
+export type dropdownInputPosition = 'inside' | 'outside';
+/**
+ * Base dropdown option interface
+ */
+export interface DropdownOption {
+    /**
+     * The name of the dropdown option.
+     */
+    name: string;
+    /**
+     * The id of the dropdown option.
+     */
+    id: string;
+    /**
+     * Whether to show the checkbox.
+     * @default false
+     */
+    showCheckbox?: boolean;
+    /**
+     * Whether to show the underline.
+     * @default false
+     */
+    showUnderline?: boolean;
+    /**
+     * The icon of the dropdown option.
+     */
+    icon?: IconDefinition;
+    /**
+     * The validation type of the dropdown option.
+     */
+    validate?: dropdownItemValidate;
+    /**
+     * The position of the checkbox.
+     */
+    checkSite?: dropdownCheckPosition;
+    /**
+     * The children options for tree/grouped structure.
+     * If provided, this option will be rendered as a group with expand/collapse functionality.
+     * Maximum depth: 3 levels (enforced at runtime by truncateArrayDepth)
+     */
+    children?: DropdownOption[];
+    /**
+     * The shortcut keys of the dropdown option.
+     */
+    shortcutKeys?: Array<string | number>;
+    /**
+     * The shortcut text of the dropdown option.
+     */
+    shortcutText?: string;
+}
+/**
+ * Base option without children
+ */
+type DropdownOptionBase = Omit<DropdownOption, 'children'>;
+/**
+ * Flat dropdown option (no children) - for 'default' type
+ */
+export type DropdownOptionFlat = DropdownOptionBase;
+/**
+ * Grouped dropdown option (one level of children) - for 'grouped' type
+ * Children cannot have nested children.
+ */
+export interface DropdownOptionGrouped extends DropdownOptionBase {
+    /**
+     * Children options for grouped structure.
+     * Children cannot have nested children.
+     */
+    children: DropdownOptionFlat[];
+}
+/**
+ * Recursive type helper to limit tree depth to exactly N levels
+ * Level 1: no children
+ * Level 2: children with no nested children
+ * Level 3: children with children that have no nested children
+ */
+type DropdownOptionTreeLevel1 = DropdownOptionBase;
+type DropdownOptionTreeLevel2 = DropdownOptionBase & {
+    children?: DropdownOptionTreeLevel1[];
+};
+type DropdownOptionTreeLevel3 = DropdownOptionBase & {
+    children?: DropdownOptionTreeLevel2[];
+};
+/**
+ * Tree dropdown option (nested children up to 3 levels) - for 'tree' type
+ * Maximum depth is enforced at compile time: 3 levels
+ * - Level 1: root options (no children)
+ * - Level 2: options with children (children have no nested children)
+ * - Level 3: options with children that have children (grandchildren have no nested children)
+ */
+export type DropdownOptionTree = DropdownOptionTreeLevel3;
+/**
+ * Type helper to get the appropriate options array type based on dropdown type.
+ * This enforces structure constraints at compile time:
+ * - 'default': flat array (no children allowed)
+ * - 'grouped': array with one level of children (children cannot have children)
+ * - 'tree': array with nested children up to 3 levels
+ */
+export type DropdownOptionsByType<T extends dropdownType | undefined> = T extends 'default' ? DropdownOptionFlat[] : T extends 'grouped' ? DropdownOptionGrouped[] : T extends 'tree' ? DropdownOptionTree[] : DropdownOption[];
+export interface DropdownItemSharedProps {
+    disabled?: boolean;
+    mode?: dropdownMode;
+    onSelect?: (option: DropdownOption) => void;
+    type?: dropdownType;
+    value?: string | string[];
+}
+export declare const dropdownClasses: {
+    root: string;
+    inputPosition: (inputPosition: dropdownInputPosition) => string;
+    list: string;
+    listWrapper: string;
+    listHeader: string;
+    listHeaderInner: string;
+    option: string;
+    optionActive: string;
+    groupLabel: string;
+    status: string;
+    statusText: string;
+    action: string;
+    actionTopBar: string;
+    actionTools: string;
+    card: string;
+    cardContainer: string;
+    cardActive: string;
+    cardDisabled: string;
+    cardUnderline: string;
+    cardLevel: (level: dropdownItemLevel) => string;
+    cardBody: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardHighlightedText: string;
+    cardPrependContent: string;
+    cardAppendContent: string;
+};
+export {};

package/dropdown/dropdown.js

@@ -0,0 +1,35 @@
+const dropdownPrefix = 'mzn-dropdown';
+const dropdownClasses = {
+    root: `${dropdownPrefix}`,
+    inputPosition: (inputPosition) => `${dropdownPrefix}--${inputPosition}`,
+    // dropdown list
+    list: `${dropdownPrefix}-list`,
+    listWrapper: `${dropdownPrefix}-list-wrapper`,
+    listHeader: `${dropdownPrefix}-list-header`,
+    listHeaderInner: `${dropdownPrefix}-list-header-inner`,
+    option: `${dropdownPrefix}-option`,
+    optionActive: `${dropdownPrefix}-option--active`,
+    groupLabel: `${dropdownPrefix}-group-label`,
+    // dropdown status
+    status: `${dropdownPrefix}-status`,
+    statusText: `${dropdownPrefix}-status-text`,
+    // dropdown action
+    action: `${dropdownPrefix}-action`,
+    actionTopBar: `${dropdownPrefix}-action--top-bar`,
+    actionTools: `${dropdownPrefix}-action-tools`,
+    // dropdown item card
+    card: `${dropdownPrefix}-item-card`,
+    cardContainer: `${dropdownPrefix}-item-card-container`,
+    cardActive: `${dropdownPrefix}-item-card--active`,
+    cardDisabled: `${dropdownPrefix}-item-card--disabled`,
+    cardUnderline: `${dropdownPrefix}-item-card-underline`,
+    cardLevel: (level) => `${dropdownPrefix}-item-card--level-${level}`,
+    cardBody: `${dropdownPrefix}-item-card-body`,
+    cardTitle: `${dropdownPrefix}-item-card-title`,
+    cardDescription: `${dropdownPrefix}-item-card-description`,
+    cardHighlightedText: `${dropdownPrefix}-item-card-highlighted-text`,
+    cardPrependContent: `${dropdownPrefix}-item-card-prepend-content`,
+    cardAppendContent: `${dropdownPrefix}-item-card-append-content`,
+};
+
+export { dropdownClasses, dropdownPrefix };

package/dropdown/index.d.ts

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

package/dropdown/index.js

@@ -0,0 +1 @@
+export { dropdownClasses, dropdownPrefix } from './dropdown.js';

package/navigation/_navigation-styles.scss

@@ -1,218 +1,264 @@
-@use '~@mezzanine-ui/system/spacing';
-@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/effect' as effect;
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/radius' as radius;
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use '~@mezzanine-ui/system/transition' as transition;
 @use '~@mezzanine-ui/system/typography';
-@use './navigation' as *;
+@use '../button/utils' as btn-utils;
 @use '../icon';
+@use './navigation' as *;
 @use './utils';
 
-$horizontal-max-height: 64px !default;
-$horizontal-item-height: 64px !default;
-$horizontal-group-item-height: 40px !default;
-$horizontal-toggle-icon-gap: 4px !default;
-$horizontal-icon-gap: 4px !default;
-$horizontal-item-padding-x: 8px !default;
+// spacing.semantic-variable(padding, vertical, tight) * 2 + 16px(icon size, text height)
+$vertical-item-height: 28px !default;
 
-$vertical-max-width: 256px !default;
-$vertical-item-height: 32px !default;
-$vertical-toggle-icon-gap: 8px !default;
-$vertical-icon-gap: 8px !default;
-$vertical-group-indent: 8px !default;
-$vertical-group-icon-indent: 40px !default;
-
-$icon-size: 24px !default;
+$background: background;
 
 .#{$prefix} {
-  @include utils.reset();
   @include typography.variant(button2);
 
   overflow: hidden;
-  background-color: palette.color(surface);
+  background-color: palette.semantic-variable($background, base);
   color: palette.color(action-inactive);
-  display: grid;
-
-  &--horizontal {
-    max-height: $horizontal-max-height;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
-
-    &__toggle-icon {
-      margin-left: $horizontal-toggle-icon-gap;
-    }
-
-    .#{$item-prefix} {
-      padding: 0 spacing.level(4);
-      height: $horizontal-item-height;
-      grid-auto-flow: column;
-      align-items: center;
-      border-bottom: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 
-      &--active {
-        color: palette.color(primary);
-        border-bottom: 2px solid palette.color(primary);
-      }
+  &__content {
+    padding: spacing.semantic-variable(padding, vertical, base)
+      spacing.semantic-variable(padding, horizontal, comfort-fixed);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: spacing.semantic-variable(gap, tight-fixed);
 
-      &__icon {
-        margin-right: $horizontal-icon-gap;
-      }
+    > ul {
+      @include utils.reset();
 
-      &:hover {
-        color: palette.color(primary);
-      }
-    }
-
-    .#{$sub-menu-prefix} {
-      border-bottom: 2px solid transparent;
-      height: $horizontal-item-height;
-
-      &__icon {
-        margin-right: $horizontal-icon-gap;
-      }
-
-      &__group {
-        overflow: hidden;
-        background-color: palette.color(surface);
-        border-color: palette.color(border);
-        border-width: 0 1px 1px;
-        border-style: solid;
-        .#{$item-prefix} {
-          @include typography.variant(input1);
-
-          height: $horizontal-group-item-height;
-          color: palette.color(text-primary);
-          border-bottom: none;
-
-          &--active,
-          &:hover {
-            background-color: palette.color(primary-hover-bg);
-          }
-        }
-      }
-
-      &--open,
-      &--active {
-        color: palette.color(primary);
-        border-bottom: 2px solid palette.color(primary);
-      }
+      display: grid;
+      gap: spacing.semantic-variable(gap, tight);
     }
   }
 
   &--vertical {
-    width: $vertical-max-width;
-    grid-auto-flow: row;
-    grid-auto-rows: max-content;
-    padding: spacing.level(5);
+    width: spacing.semantic-variable(size, container, slim);
     height: 100%;
-    gap: spacing.level(2);
 
-    .#{$item-prefix} {
+    .#{$option-prefix} {
+      display: grid;
+      box-sizing: border-box;
       align-items: center;
-      height: $vertical-item-height;
-      grid-auto-flow: column;
-      padding: 0 $horizontal-item-padding-x;
-      overflow: hidden;
-      max-width: 100%;
+      gap: spacing.semantic-variable(gap, tight);
+      height: unset;
 
-      &__icon {
-        margin-right: $vertical-icon-gap;
-      }
+      &__content {
+        align-items: center;
+        border-radius: radius.variable(base);
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        gap: spacing.semantic-variable(gap, tight);
+        padding: spacing.semantic-variable(padding, vertical, tight)
+          spacing.semantic-variable(padding, horizontal, tight-fixed);
+        transition: transition.standard(background-color, fast);
 
-      &--active,
-      &:hover {
-        background-color: palette.color(primary-hover-bg);
-        color: palette.color(primary);
-      }
-    }
+        &:hover {
+          .#{$option-prefix}__icon {
+            color: palette.semantic-variable(text, neutral-solid);
+          }
 
-    .#{$sub-menu-prefix} {
-      flex-direction: column;
-      height: unset;
-      padding: 0;
-      min-height: $vertical-item-height;
+          background-color: palette.semantic-variable($background, neutral-faint);
+        }
+      }
 
       &__icon {
-        margin-right: $vertical-icon-gap;
+        width: spacing.semantic-variable(size, element, base);
+        height: spacing.semantic-variable(size, element, base);
+        color: palette.semantic-variable(icon, neutral);
       }
 
       &__title {
-        padding: 0 $horizontal-item-padding-x;
-        width: 100%;
+        color: palette.semantic-variable(text, neutral-solid);
+      }
 
-        &:hover {
-          background-color: palette.color(primary-hover-bg);
-          color: palette.color(primary);
+      &--active {
+        .#{$option-prefix}__content {
+          background-color: palette.semantic-variable($background, brand-ghost);
         }
       }
 
-      &__group {
-        display: grid;
-        padding-left: $vertical-group-indent;
-        gap: spacing.level(2);
-        margin-top: spacing.level(2);
-
-        .#{$item-prefix} {
-          height: $vertical-item-height;
+      &--basic.#{$option-prefix}--active {
+        .#{$option-prefix}__title {
+          color: palette.semantic-variable(text, brand-solid);
+        }
 
-          &--active,
-          &:hover {
-            background-color: palette.color(primary-hover-bg);
-            color: palette.color(primary);
-          }
+        .#{$option-prefix}__content {
+          background-color: palette.semantic-variable($background, brand-faint);
         }
       }
 
-      &__toggle-icon {
-        margin-left: auto;
+      &__group {
+        @include utils.reset();
+
+        display: grid;
       }
 
-      &--indent {
-        .#{$sub-menu-prefix}__group {
-          padding-left: $vertical-group-icon-indent;
-        }
+      &__toggle-icon {
+        margin-left: auto;
       }
 
-      &--active {
-        .#{$sub-menu-prefix}__title {
-          background-color: palette.color(primary-hover-bg);
-          color: palette.color(primary);
-        }
+      &--level-1 {
+        margin-left: 0;
       }
 
-      &--open {
-        .#{$sub-menu-prefix}__title {
-          color: palette.color(primary);
-        }
+      &--level-2 {
+        margin-left: spacing.semantic-variable(padding, horizontal, relaxed);
       }
 
-      &:hover {
-        color: unset;
-        background-color: unset;
+      &--level-3 {
+        margin-left: spacing.semantic-variable(padding, horizontal, breath);
       }
     }
   }
 }
 
-.#{$item-prefix} {
+.#{$header-prefix} {
+  @include typography.semantic-variable(h3);
+
+  align-items: center;
+  border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
   box-sizing: border-box;
   display: flex;
+  gap: spacing.semantic-variable(gap, comfort);
+  justify-content: space-between;
+  padding: spacing.semantic-variable(padding, horizontal, comfort)
+    spacing.semantic-variable(padding, horizontal, comfort-fixed)
+    spacing.semantic-variable(padding, vertical, base);
   width: 100%;
-  cursor: pointer;
 
-  .#{icon.$prefix} {
-    width: $icon-size;
-    height: $icon-size;
+  &__content {
+    align-items: center;
+    color: palette.semantic-variable(text, neutral-solid);
+    display: flex;
+    flex-grow: 1;
+    gap: spacing.semantic-variable(gap, base);
+    height: 100%;
+  }
+}
+
+.#{$footer-prefix} {
+  box-sizing: border-box;
+  width: 100%;
+  border-top: 1px solid palette.color(divider);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: spacing.semantic-variable(padding, vertical, base)
+    spacing.semantic-variable(padding, horizontal, comfort-fixed)
+    spacing.semantic-variable(padding, vertical, comfort);
+  gap: spacing.semantic-variable(gap, tight-fixed);
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    gap: spacing.semantic-variable(gap, tiny);
   }
 }
 
-.#{$sub-menu-prefix} {
+.#{$icon-button-prefix} {
+  @include btn-utils.reset();
+
+  align-items: center;
+  justify-content: center;
+  border-radius: radius.variable(base);
   box-sizing: border-box;
+  color: palette.semantic-variable(icon, neutral);
+  display: flex;
+  padding: spacing.semantic-variable(padding, vertical, tight-fixed)
+    spacing.semantic-variable(padding, horizontal, tight-fixed);
+  transition: transition.standard(background-color, fast);
+  width: spacing.semantic-variable(size, element, airy);
+  height: spacing.semantic-variable(size, element, airy);
+
+  &:hover {
+    background-color: palette.semantic-variable($background, neutral-faint);
+  }
 
-  &__title {
+  &:focus-visible {
+    box-shadow: effect.variable(focus, primary);
+  }
+}
+
+.#{$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);
+
+  &__avatar {
     box-sizing: border-box;
+    width: spacing.semantic-variable(size, element, airy);
+    height: spacing.semantic-variable(size, element, airy);
+    border-radius: radius.variable(full);
+    background-color: palette.semantic-variable($background, neutral);
+    color: palette.semantic-variable(icon, fixed-light);
+    border: 1px solid palette.semantic-variable($background, neutral-subtle);
     display: flex;
     align-items: center;
+    justify-content: center;
   }
 
-  &__group {
+  &__user-name {
+    @include typography.variant(caption);
+
+    color: palette.semantic-variable(text, neutral-solid);
+  }
+
+  &__icon {
+    color: palette.semantic-variable(icon, neutral-bold);
+    transition: transition.standard(transform, fast);
+  }
+
+  &--open {
+    background-color: palette.semantic-variable($background, neutral-subtle);
+
+    .#{$user-menu-prefix}__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover,
+  &:active {
+    background-color: palette.semantic-variable($background, neutral-subtle);
+  }
+
+  &:focus-visible {
+    box-shadow: effect.variable(focus, primary);
+  }
+}
+
+.#{$option-category-prefix} {
+  box-sizing: border-box;
+  width: 100%;
+
+  &__title {
+    @include typography.variant(annotation);
+
+    color: palette.semantic-variable(text, neutral-light);
+    padding: spacing.semantic-variable(padding, vertical, micro)
+      spacing.semantic-variable(padding, horizontal, tight-fixed);
+  }
+
+  > ul {
     @include utils.reset();
+
+    display: grid;
+    gap: spacing.semantic-variable(gap, tight);
   }
 }

package/navigation/_navigation.scss

@@ -1,4 +1,8 @@
 $prefix: mzn-navigation;
 
-$item-prefix: #{$prefix}-item;
-$sub-menu-prefix: #{$prefix}-sub-menu;
+$option-prefix: #{$prefix}-option;
+$header-prefix: #{$prefix}-header;
+$footer-prefix: #{$prefix}-footer;
+$icon-button-prefix: #{$prefix}-icon-button;
+$user-menu-prefix: #{$prefix}-user-menu;
+$option-category-prefix: #{$prefix}-option-category;

package/navigation/index.d.ts

@@ -1,3 +1,7 @@
 export * from './navigation';
-export * from './navigationItem';
-export * from './navigationSubMenu';
+export * from './navigationFooter';
+export * from './navigationHeader';
+export * from './navigationIconButton';
+export * from './navigationOption';
+export * from './navigationUserMenu';
+export * from './navigationOptionCategory';

package/navigation/index.js

@@ -1,3 +1,7 @@
 export { navigationClasses, navigationPrefix } from './navigation.js';
-export { navigationItemClasses, navigationItemPrefix } from './navigationItem.js';
-export { navigationSubMenuClasses, navigationSubMenuPrefix } from './navigationSubMenu.js';
+export { navigationFooterClasses, navigationFooterPrefix } from './navigationFooter.js';
+export { navigationHeaderClasses, navigationHeaderPrefix } from './navigationHeader.js';
+export { navigationIconButtonClasses, navigationIconButtonPrefix } from './navigationIconButton.js';
+export { navigationOptionClasses, navigationOptionPrefix } from './navigationOption.js';
+export { navigationUserMenuClasses, navigationUserMenuPrefix } from './navigationUserMenu.js';
+export { navigationOptionCategoryClasses, navigationOptionCategoryPrefix } from './navigationOptionCategory.js';

package/navigation/navigation.d.ts

@@ -3,6 +3,6 @@ export declare const navigationPrefix = "mzn-navigation";
 export type NavigationOrientation = Orientation;
 export declare const navigationClasses: {
     readonly host: "mzn-navigation";
-    readonly horizontal: "mzn-navigation--horizontal";
     readonly vertical: "mzn-navigation--vertical";
+    readonly content: "mzn-navigation__content";
 };

package/navigation/navigation.js

@@ -1,8 +1,8 @@
 const navigationPrefix = 'mzn-navigation';
 const navigationClasses = {
     host: navigationPrefix,
-    horizontal: `${navigationPrefix}--horizontal`,
     vertical: `${navigationPrefix}--vertical`,
+    content: `${navigationPrefix}__content`,
 };
 
 export { navigationClasses, navigationPrefix };

package/navigation/navigationFooter.d.ts

@@ -0,0 +1,5 @@
+export declare const navigationFooterPrefix: "mzn-navigation-footer";
+export declare const navigationFooterClasses: {
+    readonly host: "mzn-navigation-footer";
+    readonly icons: "mzn-navigation-footer__icons";
+};

package/navigation/navigationFooter.js

@@ -0,0 +1,9 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationFooterPrefix = `${navigationPrefix}-footer`;
+const navigationFooterClasses = {
+    host: navigationFooterPrefix,
+    icons: `${navigationFooterPrefix}__icons`,
+};
+
+export { navigationFooterClasses, navigationFooterPrefix };

package/navigation/navigationHeader.d.ts

@@ -0,0 +1,5 @@
+export declare const navigationHeaderPrefix: "mzn-navigation-header";
+export declare const navigationHeaderClasses: {
+    readonly host: "mzn-navigation-header";
+    readonly content: "mzn-navigation-header__content";
+};

package/navigation/navigationHeader.js

@@ -0,0 +1,9 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationHeaderPrefix = `${navigationPrefix}-header`;
+const navigationHeaderClasses = {
+    host: navigationHeaderPrefix,
+    content: `${navigationHeaderPrefix}__content`,
+};
+
+export { navigationHeaderClasses, navigationHeaderPrefix };

package/navigation/navigationIconButton.d.ts

@@ -0,0 +1,4 @@
+export declare const navigationIconButtonPrefix: "mzn-navigation-icon-button";
+export declare const navigationIconButtonClasses: {
+    readonly host: "mzn-navigation-icon-button";
+};

package/navigation/navigationIconButton.js

@@ -0,0 +1,8 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationIconButtonPrefix = `${navigationPrefix}-icon-button`;
+const navigationIconButtonClasses = {
+    host: navigationIconButtonPrefix,
+};
+
+export { navigationIconButtonClasses, navigationIconButtonPrefix };

package/navigation/navigationOption.d.ts

@@ -0,0 +1,13 @@
+export declare const navigationOptionPrefix: "mzn-navigation-option";
+export declare const navigationOptionClasses: {
+    readonly host: "mzn-navigation-option";
+    readonly group: "mzn-navigation-option__group";
+    readonly basic: "mzn-navigation-option--basic";
+    readonly level: (level: number) => `mzn-navigation-option--level-${number}`;
+    readonly content: "mzn-navigation-option__content";
+    readonly title: "mzn-navigation-option__title";
+    readonly toggleIcon: "mzn-navigation-option__toggle-icon";
+    readonly icon: "mzn-navigation-option__icon";
+    readonly active: "mzn-navigation-option--active";
+    readonly open: "mzn-navigation-option--open";
+};

package/navigation/navigationOption.js

@@ -0,0 +1,17 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationOptionPrefix = `${navigationPrefix}-option`;
+const navigationOptionClasses = {
+    host: navigationOptionPrefix,
+    group: `${navigationOptionPrefix}__group`,
+    basic: `${navigationOptionPrefix}--basic`,
+    level: (level) => `${navigationOptionPrefix}--level-${level}`,
+    content: `${navigationOptionPrefix}__content`,
+    title: `${navigationOptionPrefix}__title`,
+    toggleIcon: `${navigationOptionPrefix}__toggle-icon`,
+    icon: `${navigationOptionPrefix}__icon`,
+    active: `${navigationOptionPrefix}--active`,
+    open: `${navigationOptionPrefix}--open`,
+};
+
+export { navigationOptionClasses, navigationOptionPrefix };

package/navigation/navigationOptionCategory.d.ts

@@ -0,0 +1,5 @@
+export declare const navigationOptionCategoryPrefix: "mzn-navigation-option-category";
+export declare const navigationOptionCategoryClasses: {
+    readonly host: "mzn-navigation-option-category";
+    readonly title: "mzn-navigation-option-category__title";
+};

package/navigation/navigationOptionCategory.js

@@ -0,0 +1,9 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationOptionCategoryPrefix = `${navigationPrefix}-option-category`;
+const navigationOptionCategoryClasses = {
+    host: navigationOptionCategoryPrefix,
+    title: `${navigationOptionCategoryPrefix}__title`,
+};
+
+export { navigationOptionCategoryClasses, navigationOptionCategoryPrefix };

package/navigation/navigationUserMenu.d.ts

@@ -0,0 +1,8 @@
+export declare const navigationUserMenuPrefix: "mzn-navigation-user-menu";
+export declare const navigationUserMenuClasses: {
+    readonly host: "mzn-navigation-user-menu";
+    readonly open: "mzn-navigation-user-menu--open";
+    readonly avatar: "mzn-navigation-user-menu__avatar";
+    readonly userName: "mzn-navigation-user-menu__user-name";
+    readonly icon: "mzn-navigation-user-menu__icon";
+};

package/navigation/navigationUserMenu.js

@@ -0,0 +1,12 @@
+import { navigationPrefix } from './navigation.js';
+
+const navigationUserMenuPrefix = `${navigationPrefix}-user-menu`;
+const navigationUserMenuClasses = {
+    host: navigationUserMenuPrefix,
+    open: `${navigationUserMenuPrefix}--open`,
+    avatar: `${navigationUserMenuPrefix}__avatar`,
+    userName: `${navigationUserMenuPrefix}__user-name`,
+    icon: `${navigationUserMenuPrefix}__icon`,
+};
+
+export { navigationUserMenuClasses, navigationUserMenuPrefix };

package/package.json

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

package/navigation/navigationItem.d.ts

@@ -1,6 +0,0 @@
-export declare const navigationItemPrefix: "mzn-navigation-item";
-export declare const navigationItemClasses: {
-    readonly host: "mzn-navigation-item";
-    readonly icon: "mzn-navigation-item__icon";
-    readonly active: "mzn-navigation-item--active";
-};

package/navigation/navigationItem.js

@@ -1,10 +0,0 @@
-import { navigationPrefix } from './navigation.js';
-
-const navigationItemPrefix = `${navigationPrefix}-item`;
-const navigationItemClasses = {
-    host: navigationItemPrefix,
-    icon: `${navigationItemPrefix}__icon`,
-    active: `${navigationItemPrefix}--active`,
-};
-
-export { navigationItemClasses, navigationItemPrefix };

package/navigation/navigationSubMenu.d.ts

@@ -1,11 +0,0 @@
-export declare const navigationSubMenuPrefix: "mzn-navigation-sub-menu";
-export declare const navigationSubMenuClasses: {
-    readonly host: "mzn-navigation-sub-menu";
-    readonly group: "mzn-navigation-sub-menu__group";
-    readonly indent: "mzn-navigation-sub-menu--indent";
-    readonly title: "mzn-navigation-sub-menu__title";
-    readonly toggleIcon: "mzn-navigation-sub-menu__toggle-icon";
-    readonly icon: "mzn-navigation-sub-menu__icon";
-    readonly active: "mzn-navigation-sub-menu--active";
-    readonly open: "mzn-navigation-sub-menu--open";
-};

package/navigation/navigationSubMenu.js

@@ -1,15 +0,0 @@
-import { navigationPrefix } from './navigation.js';
-
-const navigationSubMenuPrefix = `${navigationPrefix}-sub-menu`;
-const navigationSubMenuClasses = {
-    host: navigationSubMenuPrefix,
-    group: `${navigationSubMenuPrefix}__group`,
-    indent: `${navigationSubMenuPrefix}--indent`,
-    title: `${navigationSubMenuPrefix}__title`,
-    toggleIcon: `${navigationSubMenuPrefix}__toggle-icon`,
-    icon: `${navigationSubMenuPrefix}__icon`,
-    active: `${navigationSubMenuPrefix}--active`,
-    open: `${navigationSubMenuPrefix}--open`,
-};
-
-export { navigationSubMenuClasses, navigationSubMenuPrefix };