@ptsecurity/mosaic 14.7.1 → 15.0.0

package/modal/modal.scss

@@ -0,0 +1,143 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/variables' as *;
+
+@use '../core/styles/tokens';
+
+@use './modal-confirm';
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-modal {
+    box-sizing: border-box;
+
+    position: relative;
+
+    top: var(--mc-modal-size-top, map.get($tokens, modal-size-top));
+
+    width: auto;
+
+    margin: 0 auto;
+
+    list-style: none;
+
+    &.zoom-enter,
+    &.zoom-appear {
+        animation-duration: 0.3s;
+        // reset scale avoid mousePosition bug
+        transform: none;
+        opacity: 0;
+    }
+
+    &.mc-modal_small {
+        width: var(--mc-modal-size-small, map.get($tokens, modal-size-small));
+    }
+
+    &.mc-modal_normal {
+        width: var(--mc-modal-size-normal, map.get($tokens, modal-size-normal));
+    }
+
+    &.mc-modal_large {
+        width: var(--mc-modal-size-large, map.get($tokens, modal-size-large));
+    }
+
+    & .mc-modal-close {
+        position: absolute;
+
+        z-index: 10;
+        top: 0;
+        right: 0;
+
+        width: var(--mc-modal-size-close-width, map.get($tokens, modal-size-close-width));
+        height: var(--mc-modal-size-close-width, map.get($tokens, modal-size-close-width));
+    }
+}
+
+.mc-modal-wrap {
+    position: fixed;
+
+    z-index: $z-index-modal;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    outline: 0;
+}
+
+.mc-modal-title {
+    margin: 0;
+}
+
+.mc-modal-content {
+    position: relative;
+
+    border-radius: var(--mc-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
+
+    background-clip: padding-box;
+    background-color: white;
+}
+
+.mc-modal-header {
+    display: flex;
+    align-items: center;
+
+    height: var(--mc-modal-header-size-height, map.get($tokens, modal-header-size-height));
+
+    border-radius: var(--mc-modal-header-size-border-radius, map.get($tokens, modal-header-size-border-radius));
+
+    padding: var(--mc-modal-header-size-padding, map.get($tokens, modal-header-size-padding));
+}
+
+.mc-modal-body {
+    display: block;
+    overflow-y: auto;
+
+    max-height: var(--mc-modal-body-size-max-height, map.get($tokens, modal-body-size-max-height));
+
+    padding: var(--mc-modal-body-size-padding, map.get($tokens, modal-body-size-padding));
+
+    word-wrap: break-word;
+}
+
+.mc-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    height: var(--mc-modal-footer-size-height, map.get($tokens, modal-footer-size-height));
+
+    border-radius: var(--mc-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
+
+    padding: var(--mc-modal-footer-size-padding, map.get($tokens, modal-footer-size-padding));
+
+    button + button {
+        margin-left: 16px;
+        margin-bottom: 0;
+    }
+}
+
+.mc-modal-mask {
+    position: fixed;
+
+    z-index: $z-index-modal-mask;
+
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+
+    height: 100%;
+
+    &.mc-modal-mask-hidden {
+        display: none;
+    }
+}
+
+.mc-modal-open {
+    overflow: hidden;
+}

package/navbar/_navbar-theme.scss

@@ -0,0 +1,125 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-navbar-theme($theme) {
+    $background: map.get($theme, background);
+    $primary: map.get($theme, primary);
+
+    $navbar: map.get(map.get($theme, components), navbar);
+    $navbar-item: map.get(map.get($theme, components), navbar-item);
+
+    .mc-navbar,
+    .mc-vertical-navbar .mc-vertical-navbar__container {
+        background-color: map.get($navbar, background);
+    }
+
+    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
+        background-color: map.get($navbar-item, state-hover);
+    }
+
+    .mc-navbar-brand.mc-vertical.mc-collapsed {
+        & .mc-navbar-logo:hover {
+            background-color: map.get($navbar-item, state-hover);
+        }
+    }
+
+    .mc-navbar-title {
+        color: map.get($navbar-item, color);
+    }
+
+    .mc-navbar-item,
+    .mc-navbar-brand,
+    .mc-navbar-toggle {
+        color: map.get($navbar-item, color);
+
+        & > .mc-icon {
+            color: map.get($navbar-item, icon-color);
+        }
+
+        & .mc-navbar-item__arrow-icon {
+            color: map.get($navbar-item, color);
+        }
+
+        &.mc-active {
+            background: map.get($navbar-item, state-selected);
+        }
+
+        &:hover:not(.mc-navbar-item_button) {
+            cursor: pointer;
+
+            & .mc-navbar-item__overlay {
+                background-color: map.get($navbar-item, state-hover);
+            }
+        }
+
+        &:active:not(.mc-navbar-item_button) {
+            & .mc-navbar-item__overlay {
+                background: map.get($navbar-item, state-active);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            cursor: default;
+
+            .mc-navbar-item__title,
+            .mc-icon {
+                opacity: map.get($navbar-item, state-disabled-opacity);
+            }
+        }
+    }
+
+    .mc-navbar-focusable-item {
+        outline: none;
+
+        /* stylelint-disable no-descending-specificity */
+        &.cdk-keyboard-focused .mc-navbar-item__overlay {
+            box-shadow:
+                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
+                inset 0 0 0 3px map.get($background, background);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .mc-navbar-divider {
+        background-color: map.get($navbar, divider-background);
+    }
+}
+
+button {
+    &.mc-navbar-item,
+    &.mc-navbar-brand,
+    &.mc-navbar-toggle {
+        background: transparent;
+        border: none;
+    }
+}
+
+@mixin mc-navbar-typography($config) {
+    .mc-navbar-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+    }
+
+    .mc-navbar-subtitle {
+        @include mc-typography-level-to-styles($config, extra-small-text);
+    }
+
+    .mc-navbar-brand {
+        .mc-navbar-title {
+            @include mc-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
+
+            &.mc-navbar-title_small {
+                @include mc-typography-level-to-styles($config, subheading);
+
+                white-space: unset;
+            }
+        }
+    }
+}

package/navbar/navbar-brand.scss

@@ -0,0 +1,70 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-navbar-logo {
+    display: flex;
+}
+
+.mc-navbar-brand {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    & .mc-navbar-title {
+        cursor: pointer;
+    }
+}
+
+a.mc-navbar-brand {
+    text-decoration: none;
+}
+
+.mc-navbar-brand.mc-horizontal {
+    height: var(--mc-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+
+    padding-right: var(--mc-navbar-brand-size-margin-right, map.get($tokens, navbar-brand-size-margin-right));
+
+    & .mc-navbar-title {
+        padding-left: var(--mc-navbar-brand-size-padding, map.get($tokens, navbar-brand-size-padding));
+        padding-right: 0;
+    }
+}
+
+.mc-navbar-brand.mc-vertical {
+    & .mc-navbar-logo {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        min-height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+        min-width: var(
+            --mc-vertical-navbar-size-states-collapsed-width,
+            map.get($tokens, vertical-navbar-size-states-collapsed-width)
+        );
+    }
+
+    & .mc-navbar-title {
+        display: flex;
+        align-items: center;
+
+        height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+
+        padding-left: 0;
+    }
+
+    &.mc-expanded {
+        align-items: unset;
+    }
+
+    &.mc-collapsed {
+        & .mc-navbar-title {
+            display: none;
+        }
+    }
+}

package/navbar/navbar-divider.scss

@@ -0,0 +1,18 @@
+.mc-navbar-divider {
+    display: block;
+}
+
+.mc-navbar-divider.mc-vertical {
+    height: 1px;
+
+    margin: 8px 12px;
+}
+
+.mc-navbar-divider.mc-horizontal {
+    width: 1px;
+
+    height: 28px;
+
+    margin-left: 8px;
+    margin-right: 8px;
+}

package/navbar/navbar-item.component.d.ts

@@ -16,11 +16,11 @@ export interface McNavbarFocusableItemEvent {
 export declare class McNavbarLogo {
     readonly hovered: Subject<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarLogo, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarLogo, "mc-navbar-logo, [mc-navbar-logo]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarLogo, "mc-navbar-logo, [mc-navbar-logo]", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbarBento {
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarBento, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarBento, "mc-navbar-item[bento], [mc-navbar-item][bento]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarBento, "mc-navbar-item[bento], [mc-navbar-item][bento]", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbarTitle implements AfterViewInit {
     private elementRef;
@@ -34,7 +34,7 @@ export declare class McNavbarTitle implements AfterViewInit {
     checkTextOverflown(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarTitle, "mc-navbar-title, [mc-navbar-title]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarTitle, "mc-navbar-title, [mc-navbar-title]", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbarSubTitle implements AfterContentInit {
     private elementRef;
@@ -46,7 +46,7 @@ export declare class McNavbarSubTitle implements AfterContentInit {
     getOuterElementWidth(): number;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarSubTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarSubTitle, "mc-navbar-subtitle, [mc-navbar-subtitle]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarSubTitle, "mc-navbar-subtitle, [mc-navbar-subtitle]", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbarBrand implements AfterContentInit, OnDestroy {
     private navbar;
@@ -59,11 +59,11 @@ export declare class McNavbarBrand implements AfterContentInit, OnDestroy {
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarBrand, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarBrand, "mc-navbar-brand, [mc-navbar-brand]", ["mcNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarBrand, "mc-navbar-brand, [mc-navbar-brand]", ["mcNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
 }
 export declare class McNavbarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarDivider, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarDivider, "mc-navbar-divider", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarDivider, "mc-navbar-divider", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbarFocusableItem implements IFocusableOption, AfterContentInit, OnDestroy {
     private elementRef;
@@ -92,7 +92,7 @@ export declare class McNavbarFocusableItem implements IFocusableOption, AfterCon
     blur(): void;
     getLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarFocusableItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarFocusableItem, "mc-navbar-item, [mc-navbar-item], mc-navbar-brand, [mc-navbar-brand], mc-navbar-toggle", never, { "disabled": "disabled"; }, {}, ["title", "button"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarFocusableItem, "mc-navbar-item, [mc-navbar-item], mc-navbar-brand, [mc-navbar-brand], mc-navbar-toggle", never, { "disabled": "disabled"; }, {}, ["title", "button"], never, false, never>;
 }
 export declare class McNavbarRectangleElement {
     elementRef: ElementRef;
@@ -110,7 +110,7 @@ export declare class McNavbarRectangleElement {
     constructor(elementRef: ElementRef);
     getOuterElementWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarRectangleElement, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarRectangleElement, "mc-navbar-item, [mc-navbar-item], mc-navbar-divider, mc-navbar-brand, [mc-navbar-brand]", never, {}, {}, ["button"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarRectangleElement, "mc-navbar-item, [mc-navbar-item], mc-navbar-divider, mc-navbar-brand, [mc-navbar-brand]", never, {}, {}, ["button"], never, false, never>;
 }
 export declare class McNavbarItem extends McTooltipTrigger {
     rectangleElement: McNavbarRectangleElement;
@@ -145,7 +145,7 @@ export declare class McNavbarItem extends McTooltipTrigger {
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarItem, "mc-navbar-item, [mc-navbar-item]", ["mcNavbarItem"], { "collapsedText": "collapsedText"; "trigger": "mcTrigger"; "collapsed": "collapsed"; "collapsable": "collapsable"; }, {}, ["title", "subTitle", "icon"], ["[mc-icon]", "mc-navbar-title, [mc-navbar-title]", "mc-navbar-subtitle, [mc-navbar-subtitle]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarItem, "mc-navbar-item, [mc-navbar-item]", ["mcNavbarItem"], { "collapsedText": "collapsedText"; "trigger": "mcTrigger"; "collapsed": "collapsed"; "collapsable": "collapsable"; }, {}, ["title", "subTitle", "icon"], ["[mc-icon]", "mc-navbar-title, [mc-navbar-title]", "mc-navbar-subtitle, [mc-navbar-subtitle]", "*"], false, never>;
 }
 export declare class McNavbarToggle extends McTooltipTrigger implements OnDestroy {
     navbar: McVerticalNavbar;
@@ -163,5 +163,5 @@ export declare class McNavbarToggle extends McTooltipTrigger implements OnDestro
     private getWindow;
     private windowToggleHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarToggle, "mc-navbar-toggle", never, { "content": "mcCollapsedTooltip"; }, {}, ["customIcon"], ["[mc-icon]", "mc-navbar-title"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarToggle, "mc-navbar-toggle", never, { "content": "mcCollapsedTooltip"; }, {}, ["customIcon"], ["[mc-icon]", "mc-navbar-title"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -0,0 +1,159 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-navbar-title,
+.mc-navbar-subtitle {
+    display: inline-block;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.mc-navbar-item {
+    box-sizing: border-box;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    padding-left: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+    padding-right: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+
+    .mc-badge {
+        position: absolute;
+    }
+}
+
+.mc-navbar-item__title {
+    display: flex;
+
+    flex-direction: column;
+
+    align-self: center;
+
+    min-width: 0;
+}
+
+.mc-navbar-item__container {
+    display: flex;
+    flex-direction: row;
+
+    flex: 1 1 auto;
+    justify-content: space-between;
+
+    min-width: 0;
+
+    & .mc-icon {
+        align-self: center;
+    }
+}
+
+.mc-navbar-item.mc-horizontal {
+    height: var(--mc-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+
+    & .mc-icon {
+        min-width: 16px;
+        min-height: 16px;
+    }
+
+    & .mc-navbar-item__title + .mc-icon {
+        margin-left: var(--mc-navbar-size-right-icon-margin, map.get($tokens, navbar-size-right-icon-margin))
+    }
+
+    & .mc-icon + .mc-navbar-item__container {
+        margin-left: var(--mc-navbar-size-icon-margin, map.get($tokens, navbar-size-icon-margin))
+    }
+
+    &.mc-navbar-item_collapsed .mc-navbar-item__container {
+        display: none;
+    }
+
+    .mc-badge {
+        top: 8px;
+        right: 8px;
+    }
+}
+
+.mc-navbar-item.mc-vertical {
+    height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+
+    /* stylelint-disable no-descending-specificity */
+    & > .mc-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        min-width: 24px;
+        min-height: 24px;
+    }
+
+    & .mc-navbar-item__title,
+    & .mc-icon + .mc-navbar-item__title,
+    & .mc-navbar-item__title + .mc-icon {
+        padding-left: var(--mc-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
+    }
+
+    &.mc-navbar-item_button {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    &.mc-expanded {
+        & .mc-badge {
+            top: 16px;
+            right: 16px;
+        }
+    }
+
+    &.mc-collapsed {
+        & .mc-badge {
+            top: 4px;
+            right: 4px;
+        }
+
+        & .mc-navbar-item__title {
+            display: none;
+        }
+    }
+}
+
+.mc-navbar-item.mc-navbar-item_button .mc-button {
+    flex: 1;
+
+    & .mc-button-wrapper {
+        justify-content: center;
+
+        & .mc-icon.mc-icon_left {
+            margin-left: unset;
+        }
+
+        & .mc-icon.mc-icon_right {
+            margin-right: unset;
+        }
+    }
+}
+
+a.mc-navbar-item,
+a.mc-navbar-title {
+    text-decoration: none;
+}
+
+.mc-navbar-item,
+.mc-navbar-brand,
+.mc-navbar-toggle {
+    & .mc-navbar-item__overlay {
+        position: absolute;
+        top: 0; right: 0; bottom: 0; left: 0;
+    }
+
+    & [mc-button] {
+        z-index: 1;
+    }
+}

package/navbar/navbar.component.d.ts

@@ -28,11 +28,11 @@ export declare class McFocusableComponent implements AfterContentInit, OnDestroy
     private isValidIndex;
     private hasFocusedItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<McFocusableComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McFocusableComponent, never, never, { "tabIndex": "tabIndex"; }, {}, ["focusableItems"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McFocusableComponent, never, never, { "tabIndex": "tabIndex"; }, {}, ["focusableItems"], never, false, never>;
 }
 export declare class McNavbarContainer {
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarContainer, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarContainer, "mc-navbar-container", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McNavbarContainer, "mc-navbar-container", never, {}, {}, never, never, false, never>;
 }
 export declare class McNavbar extends McFocusableComponent implements AfterViewInit, AfterContentInit, OnDestroy {
     private elementRef;
@@ -54,5 +54,5 @@ export declare class McNavbar extends McFocusableComponent implements AfterViewI
     private expandItems;
     private setItemsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<McNavbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbar, "mc-navbar", never, {}, {}, ["rectangleElements", "navbarItems"], ["[mc-navbar-container], mc-navbar-container"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McNavbar, "mc-navbar", never, {}, {}, ["rectangleElements", "navbarItems"], ["[mc-navbar-container], mc-navbar-container"], false, never>;
 }

package/navbar/navbar.scss

@@ -0,0 +1,20 @@
+.mc-navbar {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    position: relative;
+}
+
+.mc-navbar-container {
+    display: flex;
+
+    flex-shrink: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    position: relative;
+}

package/navbar/vertical-navbar.component.d.ts

@@ -19,5 +19,5 @@ export declare class McVerticalNavbar extends McFocusableComponent implements Af
     private updateTooltipForItems;
     private setItemsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<McVerticalNavbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McVerticalNavbar, "mc-vertical-navbar", ["McVerticalNavbar"], { "expanded": "expanded"; }, {}, ["bento", "rectangleElements", "items"], ["[mc-navbar-container], mc-navbar-container", "[mc-navbar-toggle], mc-navbar-toggle"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McVerticalNavbar, "mc-vertical-navbar", ["McVerticalNavbar"], { "expanded": "expanded"; }, {}, ["bento", "rectangleElements", "items"], ["[mc-navbar-container], mc-navbar-container", "[mc-navbar-toggle], mc-navbar-toggle"], false, never>;
 }

package/navbar/vertical-navbar.scss

@@ -0,0 +1,46 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-vertical-navbar {
+    position: relative;
+
+    min-width: var(
+        --mc-vertical-navbar-size-states-collapsed-width,
+        map.get($tokens, vertical-navbar-size-states-collapsed-width)
+    );
+    height: 100%;
+
+    & .mc-navbar-container {
+        flex-direction: column;
+        align-items: unset;
+    }
+
+    & .mc-vertical-navbar__container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: absolute;
+        z-index: 998;
+
+        height: 100%;
+
+        &.mc-collapsed {
+            width: var(
+                --mc-vertical-navbar-size-states-collapsed-width,
+                map.get($tokens, vertical-navbar-size-states-collapsed-width)
+            );
+        }
+
+        &.mc-expanded {
+            width: var(
+                --mc-vertical-navbar-size-states-expanded-width,
+                map.get($tokens, vertical-navbar-size-states-expanded-width)
+            );
+        }
+    }
+}