@ptsecurity/mosaic 12.2.2 → 13.0.0

package/_theming.scss

@@ -648,23 +648,26 @@ $navbar-light-color-scheme-background: #114E77;
 $navbar-light-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
 $navbar-dark-color-scheme-background: #114E77;
 $navbar-dark-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
-$navbar-size-icon-margin: 4px;
+$navbar-size-icon-margin: 6px;
 $navbar-font-title: body;
-$vertical-navbar-size-states-opened-width: 240px;
-$vertical-navbar-size-states-closed-width: 48px;
-$vertical-navbar-size-icon-margin: 10px;
+$vertical-navbar-size-states-expanded-width: 240px;
+$vertical-navbar-size-states-collapsed-width: 56px;
+$vertical-navbar-size-icon-margin: 16px;
 $navbar-item-light-color-scheme-text: #D8EAF7;
-$navbar-item-light-color-scheme-states-active: #206EA2;
-$navbar-item-light-color-scheme-states-hover: #206EA2;
+$navbar-item-light-color-scheme-icon: #D8EAF7;
+$navbar-item-light-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-light-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
 $navbar-item-light-color-scheme-states-progress: #07314D;
 $navbar-item-light-color-scheme-states-disabled-opacity: 0.3;
 $navbar-item-dark-color-scheme-text: #D8EAF7;
-$navbar-item-dark-color-scheme-states-active: #114E77;
-$navbar-item-dark-color-scheme-states-hover: #114E77;
+$navbar-item-dark-color-scheme-icon: #D8EAF7;
+$navbar-item-dark-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-dark-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
 $navbar-item-dark-color-scheme-states-progress: #07314D;
 $navbar-item-dark-color-scheme-states-disabled-opacity: 0.3;
 $navbar-item-size-padding: 16px;
 $navbar-item-size-height: 48px;
+$navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
@@ -2599,6 +2602,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $navbar-item: (
         color: $navbar-item-light-color-scheme-text,
+        icon-color: $navbar-item-light-color-scheme-icon,
 
         state-active: $navbar-item-light-color-scheme-states-active,
         state-hover: $navbar-item-light-color-scheme-states-hover,
@@ -2969,6 +2973,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $navbar-item: (
         color: $navbar-item-dark-color-scheme-text,
+        icon-color: $navbar-item-dark-color-scheme-icon,
 
         state-active: $navbar-item-dark-color-scheme-states-active,
         state-hover: $navbar-item-dark-color-scheme-states-hover,
@@ -3907,8 +3912,8 @@ $fonts: (
         color: map-get($params, icon);
     }
 
-    &:active,
-    &.mc-active {
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
         border-color: map-get($params, active_border);
         background: map-get($params, active_background);
     }
@@ -3921,7 +3926,7 @@ $fonts: (
     border-color: transparent;
     background-color: transparent;
 
-    &:hover {
+    &:hover:not([disabled]) {
         background-color: map-get($background, overlay-hover);
 
         & .mc-button-overlay {
@@ -3929,8 +3934,8 @@ $fonts: (
         }
     }
 
-    &:active,
-    &.mc-active {
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
         border-color: transparent;
         background-color: map-get($background, overlay-active);
         box-shadow: none;
@@ -3992,15 +3997,14 @@ $fonts: (
             }
         }
 
-        &:hover,
-        &.mc-hover {
+        &:hover:not([disabled]) {
             & .mc-button-overlay {
                 background: map-get($background, overlay-hover);
             }
         }
 
-        &:active,
-        &.mc-active {
+        &:active:not([disabled]),
+        &.mc-active:not([disabled]) {
             box-shadow: map-get($button, active-shadow);
         }
 
@@ -4723,19 +4727,22 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 @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 .mc-vertical-navbar__container {
         background-color: map-get($navbar, background);
     }
 
-    .mc-navbar-brand.mc-hovered:not(.mc-closed) {
+    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
         background-color: map-get($navbar-item, state-hover);
     }
 
-    .mc-navbar-brand.mc-vertical.mc-closed {
+    .mc-navbar-brand.mc-vertical.mc-collapsed {
         & .mc-navbar-logo:hover {
             background-color: map-get($navbar-item, state-hover);
         }
@@ -4745,73 +4752,92 @@ $mc-datepicker-today-fade-amount: 0.2;
         color: map-get($navbar-item, color);
     }
 
-    .mc-navbar-item {
-        outline: 0;
-
+    .mc-navbar-item,
+    .mc-navbar-brand,
+    .mc-navbar-toggle {
         color: map-get($navbar-item, color);
 
-        & .mc-icon {
-            color: map-get($navbar-item, color);
+        & > .mc-icon {
+            color: map-get($navbar-item, icon-color);
         }
 
-        &.cdk-keyboard-focused {
-            outline: 0;
-            box-shadow: inset 0 0 0 2px map-get(map-get($theme, states), focused-color);
+        & .mc-navbar-item__arrow-icon {
+            color: map-get($navbar-item, color);
         }
 
         &.mc-active {
-            background-color: map-get($navbar-item, state-active);
+            background-color: mc-color($primary, 600);
         }
 
         &:hover:not(.mc-navbar-item_button) {
             cursor: pointer;
-            background-color: map-get($navbar-item, state-hover);
+
+            & .mc-navbar-item__overlay {
+                background-color: map-get($navbar-item, state-hover);
+            }
         }
 
-        &.mc-progress:hover {
-            background-color: map-get($navbar-item, state-progress);
+        &: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-title,
+            .mc-navbar-item__title,
             .mc-icon {
                 opacity: map-get($navbar-item, state-disabled-opacity);
             }
         }
     }
 
-    .mc-navbar-divider {
-        background-color: map-get($navbar, divider-background);
-    }
-}
+    .mc-navbar-focusable-item {
+        outline: none;
 
-@mixin mc-navbar-typography($config) {
-    .mc-navbar-item.mc-horizontal {
-        .mc-badge {
-            @include mc-typography-level-to-styles($config, extra-small-text);
+        /* 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 white;
         }
+        /* stylelint-enable no-descending-specificity */
     }
 
-    .mc-navbar-item.mc-vertical {
-        &.mc-opened .mc-badge {
-            @include mc-typography-level-to-styles($config, caption);
-        }
+    .mc-navbar-divider {
+        background-color: map-get($navbar, divider-background);
+    }
+}
 
-        &.mc-closed .mc-badge {
-            @include mc-typography-level-to-styles($config, extra-small-text);
-        }
+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, $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, $navbar-brand-font-title);
+
+            &.mc-navbar-title_small {
+                @include mc-typography-level-to-styles($config, subheading);
+
+                white-space: unset;
+            }
         }
     }
 }
@@ -6338,6 +6364,10 @@ $mc-datepicker-today-fade-amount: 0.2;
             cursor: default;
         }
     }
+
+    .mc-gutter-ghost {
+        background: mc-color($background, overlay-disabled);
+    }
 }
 
 

package/_visual.scss

@@ -552,23 +552,26 @@ $navbar-light-color-scheme-background: #114E77;
 $navbar-light-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
 $navbar-dark-color-scheme-background: #114E77;
 $navbar-dark-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
-$navbar-size-icon-margin: 4px;
+$navbar-size-icon-margin: 6px;
 $navbar-font-title: body;
-$vertical-navbar-size-states-opened-width: 240px;
-$vertical-navbar-size-states-closed-width: 48px;
-$vertical-navbar-size-icon-margin: 10px;
+$vertical-navbar-size-states-expanded-width: 240px;
+$vertical-navbar-size-states-collapsed-width: 56px;
+$vertical-navbar-size-icon-margin: 16px;
 $navbar-item-light-color-scheme-text: #D8EAF7;
-$navbar-item-light-color-scheme-states-active: #206EA2;
-$navbar-item-light-color-scheme-states-hover: #206EA2;
+$navbar-item-light-color-scheme-icon: #D8EAF7;
+$navbar-item-light-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-light-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
 $navbar-item-light-color-scheme-states-progress: #07314D;
 $navbar-item-light-color-scheme-states-disabled-opacity: 0.3;
 $navbar-item-dark-color-scheme-text: #D8EAF7;
-$navbar-item-dark-color-scheme-states-active: #114E77;
-$navbar-item-dark-color-scheme-states-hover: #114E77;
+$navbar-item-dark-color-scheme-icon: #D8EAF7;
+$navbar-item-dark-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-dark-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
 $navbar-item-dark-color-scheme-states-progress: #07314D;
 $navbar-item-dark-color-scheme-states-disabled-opacity: 0.3;
 $navbar-item-size-padding: 16px;
 $navbar-item-size-height: 48px;
+$navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;

package/autocomplete/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-autocomplete.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
-  "esm2015": "../esm2015/autocomplete/ptsecurity-mosaic-autocomplete.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-autocomplete.js",
+  "module": "../fesm2015/ptsecurity-mosaic-autocomplete.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-autocomplete.mjs",
+  "esm2020": "../esm2020/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-autocomplete.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-autocomplete.mjs",
   "typings": "ptsecurity-mosaic-autocomplete.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/autocomplete"

package/button/button.component.d.ts

@@ -1,37 +1,40 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
-import { CanColor, CanDisable, CanDisableCtor, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
+import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
 import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
     icons: QueryList<McIcon>;
-    nativeElement: Element;
+    nativeElement: HTMLElement;
     get isIconButton(): boolean;
     constructor(elementRef: ElementRef, renderer: Renderer2);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "button[mc-button], a[mc-button]", never, {}, {}, ["icons"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"]>;
 }
 export declare class McButtonBase {
     _elementRef: ElementRef;
     constructor(_elementRef: ElementRef);
 }
-export declare const McButtonMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof McButtonBase;
+export declare const McButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof McButtonBase;
 export declare class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
-    private _focusMonitor;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor);
+    private focusMonitor;
+    hasFocus: boolean;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
+    onFocus($event: any): void;
+    onBlur(): void;
+    getHostElement(): any;
     focus(): void;
     focusViaKeyboard(): void;
-    getHostElement(): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "button[mc-button]", never, { "disabled": "disabled"; "color": "color"; }, {}, never, ["*"]>;
-}
-export declare class McAnchor extends McButton {
-    constructor(focusMonitor: FocusMonitor, elementRef: ElementRef);
     haltDisabledEvents(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McAnchor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McAnchor, "a[mc-button]", never, { "disabled": "disabled"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "[mc-button]", never, { "color": "color"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, {}, never, ["*"]>;
 }

package/button/button.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class McButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McAnchor, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McAnchor, typeof i1.McButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonModule>;
 }

package/button/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-button.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-button.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-button.js",
-  "esm2015": "../esm2015/button/ptsecurity-mosaic-button.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-button.js",
+  "module": "../fesm2015/ptsecurity-mosaic-button.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-button.mjs",
+  "esm2020": "../esm2020/button/ptsecurity-mosaic-button.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-button.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-button.mjs",
   "typings": "ptsecurity-mosaic-button.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/button"

package/button-toggle/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-button-toggle.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
-  "esm2015": "../esm2015/button-toggle/ptsecurity-mosaic-button-toggle.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-button-toggle.js",
+  "module": "../fesm2015/ptsecurity-mosaic-button-toggle.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-button-toggle.mjs",
+  "esm2020": "../esm2020/button-toggle/ptsecurity-mosaic-button-toggle.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-button-toggle.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-button-toggle.mjs",
   "typings": "ptsecurity-mosaic-button-toggle.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/button-toggle"

package/card/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-card.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-card.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-card.js",
-  "esm2015": "../esm2015/card/ptsecurity-mosaic-card.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-card.js",
+  "module": "../fesm2015/ptsecurity-mosaic-card.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-card.mjs",
+  "esm2020": "../esm2020/card/ptsecurity-mosaic-card.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-card.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-card.mjs",
   "typings": "ptsecurity-mosaic-card.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/card"

package/checkbox/README.md

@@ -0,0 +1 @@
+Please see the official documentation at https://github.com/positive-js/mosaic

package/checkbox/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-checkbox.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-checkbox.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-checkbox.js",
-  "esm2015": "../esm2015/checkbox/ptsecurity-mosaic-checkbox.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-checkbox.js",
+  "module": "../fesm2015/ptsecurity-mosaic-checkbox.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-checkbox.mjs",
+  "esm2020": "../esm2020/checkbox/ptsecurity-mosaic-checkbox.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-checkbox.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-checkbox.mjs",
   "typings": "ptsecurity-mosaic-checkbox.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/checkbox"

package/core/formatters/date/formatter.d.ts

@@ -31,11 +31,11 @@ export interface FormatterRelativeTemplate {
     variables?: {
         [name: string]: string;
     };
-    SECONDS_AGO: string;
-    MINUTES_AGO: string;
-    TODAY: string;
-    YESTERDAY: string;
     BEFORE_YESTERDAY: string;
+    YESTERDAY: string;
+    TODAY: string;
+    TOMORROW: string;
+    AFTER_TOMORROW: string;
 }
 export interface AbsoluteDateTimeOptions {
     milliseconds?: boolean;

package/core/formatters/date/templates/en-US.d.ts

@@ -1,18 +1,18 @@
 export declare const enUS: {
     relativeTemplates: {
         short: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
         long: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
     };
     absoluteTemplates: {

package/core/formatters/date/templates/ru-RU.d.ts

@@ -1,18 +1,18 @@
 export declare const ruRU: {
     relativeTemplates: {
         short: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
         long: {
-            SECONDS_AGO: string;
-            MINUTES_AGO: string;
-            TODAY: string;
-            YESTERDAY: string;
             BEFORE_YESTERDAY: string;
+            YESTERDAY: string;
+            TODAY: string;
+            TOMORROW: string;
+            AFTER_TOMORROW: string;
         };
     };
     absoluteTemplates: {

package/core/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-core.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-core.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-core.js",
-  "esm2015": "../esm2015/core/ptsecurity-mosaic-core.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-core.js",
+  "module": "../fesm2015/ptsecurity-mosaic-core.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-core.mjs",
+  "esm2020": "../esm2020/core/ptsecurity-mosaic-core.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-core.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-core.mjs",
   "typings": "ptsecurity-mosaic-core.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/core"

package/datepicker/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-datepicker.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-datepicker.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-datepicker.js",
-  "esm2015": "../esm2015/datepicker/ptsecurity-mosaic-datepicker.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-datepicker.js",
+  "module": "../fesm2015/ptsecurity-mosaic-datepicker.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-datepicker.mjs",
+  "esm2020": "../esm2020/datepicker/ptsecurity-mosaic-datepicker.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-datepicker.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-datepicker.mjs",
   "typings": "ptsecurity-mosaic-datepicker.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/datepicker"

package/design-tokens/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "../bundles/ptsecurity-mosaic-design-tokens.umd.js",
-  "module": "../fesm2015/ptsecurity-mosaic-design-tokens.js",
-  "es2015": "../fesm2015/ptsecurity-mosaic-design-tokens.js",
-  "esm2015": "../esm2015/design-tokens/ptsecurity-mosaic-design-tokens.js",
-  "fesm2015": "../fesm2015/ptsecurity-mosaic-design-tokens.js",
+  "module": "../fesm2015/ptsecurity-mosaic-design-tokens.mjs",
+  "es2020": "../fesm2020/ptsecurity-mosaic-design-tokens.mjs",
+  "esm2020": "../esm2020/design-tokens/ptsecurity-mosaic-design-tokens.mjs",
+  "fesm2020": "../fesm2020/ptsecurity-mosaic-design-tokens.mjs",
+  "fesm2015": "../fesm2015/ptsecurity-mosaic-design-tokens.mjs",
   "typings": "ptsecurity-mosaic-design-tokens.d.ts",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/design-tokens"

package/design-tokens/tokens/components/navbar.json5

@@ -11,7 +11,7 @@
             'divider-background': { value: 'rgba(255, 255, 255, 0.3)' }
         },
         size: {
-            'icon-margin': { value: '4px' }
+            'icon-margin': { value: '6px' }
         },
         font: {
             title: { value: 'body' }
@@ -20,36 +20,39 @@
     'vertical-navbar': {
         size: {
             states: {
-                'opened-width': { value: '240px' },
-                'closed-width': { value: '48px' }
+                'expanded-width': { value: '240px' },
+                'collapsed-width': { value: '56px' }
             },
-            'icon-margin': { value: '10px' }
+            'icon-margin': { value: '16px' }
         }
     },
     'navbar-item': {
         'light-color-scheme': {
             text: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+            icon: { value: '{light-color-scheme.primary.palette.value.100.value}' },
 
             states: {
-                active: { value: '{light-color-scheme.primary.palette.value.600.value}' },
-                hover: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{light-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }
             }
         },
         'dark-color-scheme': {
             text: { value: '{dark-color-scheme.primary.palette.value.100.value}' },
+            icon: { value: '{dark-color-scheme.primary.palette.value.100.value}' },
 
             states: {
-                active: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
-                hover: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }
             }
         },
         size: {
             padding: { value: '{padding.control-horizontal}' },
-            height: { value: '{size.panel-height}' }
+            height: { value: '48px' },
+            height_vertical: { value: '56px' }
         }
     },
     'navbar-brand': {