From 5ebaedd0d4413a191acb9bb0f3e6d48aabf3df40 Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Tue, 12 Dec 2023 17:10:12 +0200
Subject: [PATCH 01/10] Added floating toolbar component

---
 .../src/lib/stencil-generated/components.ts   | 48 +++++++++++
 .../src/lib/stencil-generated/index.ts        |  2 +
 .../src/components/stencil-generated/index.ts |  2 +
 .../src/components/stencil-generated/index.ts |  2 +
 stencil-workspace/src/components.d.ts         | 79 +++++++++++++++++
 .../button/modus-toolbar-button.scss          | 85 +++++++++++++++++++
 .../button/modus-toolbar-button.tsx           | 49 +++++++++++
 .../components/modus-toolbar/button/readme.md | 49 +++++++++++
 .../modus-toolbar/modus-toolbar.models.ts     | 14 +++
 .../modus-toolbar/modus-toolbar.scss          | 42 +++++++++
 .../modus-toolbar/modus-toolbar.tsx           | 50 +++++++++++
 .../src/components/modus-toolbar/readme.md    | 33 +++++++
 .../src/components/modus-tooltip/readme.md    |  2 +
 stencil-workspace/src/index.html              | 22 ++++-
 14 files changed, 478 insertions(+), 1 deletion(-)
 create mode 100644 stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
 create mode 100644 stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
 create mode 100644 stencil-workspace/src/components/modus-toolbar/button/readme.md
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
 create mode 100644 stencil-workspace/src/components/modus-toolbar/readme.md

diff --git a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
index 9d05b8ac7..61d004dbb 100644
--- a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
+++ b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
@@ -1502,6 +1502,54 @@ export declare interface ModusToast extends Components.ModusToast {
 }
 
 
+@ProxyCmp({
+  inputs: ['buttons', 'layout', 'toolbarStyle']
+})
+@Component({
+  selector: 'modus-toolbar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['buttons', 'layout', 'toolbarStyle'],
+})
+export class ModusToolbar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface ModusToolbar extends Components.ModusToolbar {}
+
+
+@ProxyCmp({
+  inputs: ['active', 'buttonStyle', 'disabled', 'divader', 'divaderLayout', 'iconSrc', 'textButton', 'tooltip']
+})
+@Component({
+  selector: 'modus-toolbar-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['active', 'buttonStyle', 'disabled', 'divader', 'divaderLayout', 'iconSrc', 'textButton', 'tooltip'],
+})
+export class ModusToolbarButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['buttonClick']);
+  }
+}
+
+
+export declare interface ModusToolbarButton extends Components.ModusToolbarButton {
+
+  buttonClick: EventEmitter<CustomEvent<any>>;
+}
+
+
 @ProxyCmp({
   inputs: ['ariaLabel', 'disabled', 'position', 'text']
 })
diff --git a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/index.ts b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/index.ts
index 2c3e291a1..504d826b4 100644
--- a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/index.ts
+++ b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/index.ts
@@ -53,6 +53,8 @@ export const DIRECTIVES = [
   d.ModusTextInput,
   d.ModusTimePicker,
   d.ModusToast,
+  d.ModusToolbar,
+  d.ModusToolbarButton,
   d.ModusTooltip,
   d.ModusTreeView,
   d.ModusTreeViewItem
diff --git a/react-workspace/react-17/src/components/stencil-generated/index.ts b/react-workspace/react-17/src/components/stencil-generated/index.ts
index ae784bedd..ef7fd3261 100644
--- a/react-workspace/react-17/src/components/stencil-generated/index.ts
+++ b/react-workspace/react-17/src/components/stencil-generated/index.ts
@@ -59,6 +59,8 @@ export const ModusTabs = /*@__PURE__*/createReactComponent<JSX.ModusTabs, HTMLMo
 export const ModusTextInput = /*@__PURE__*/createReactComponent<JSX.ModusTextInput, HTMLModusTextInputElement>('modus-text-input');
 export const ModusTimePicker = /*@__PURE__*/createReactComponent<JSX.ModusTimePicker, HTMLModusTimePickerElement>('modus-time-picker');
 export const ModusToast = /*@__PURE__*/createReactComponent<JSX.ModusToast, HTMLModusToastElement>('modus-toast');
+export const ModusToolbar = /*@__PURE__*/createReactComponent<JSX.ModusToolbar, HTMLModusToolbarElement>('modus-toolbar');
+export const ModusToolbarButton = /*@__PURE__*/createReactComponent<JSX.ModusToolbarButton, HTMLModusToolbarButtonElement>('modus-toolbar-button');
 export const ModusTooltip = /*@__PURE__*/createReactComponent<JSX.ModusTooltip, HTMLModusTooltipElement>('modus-tooltip');
 export const ModusTreeView = /*@__PURE__*/createReactComponent<JSX.ModusTreeView, HTMLModusTreeViewElement>('modus-tree-view');
 export const ModusTreeViewItem = /*@__PURE__*/createReactComponent<JSX.ModusTreeViewItem, HTMLModusTreeViewItemElement>('modus-tree-view-item');
diff --git a/react-workspace/react-18/src/components/stencil-generated/index.ts b/react-workspace/react-18/src/components/stencil-generated/index.ts
index ae784bedd..ef7fd3261 100644
--- a/react-workspace/react-18/src/components/stencil-generated/index.ts
+++ b/react-workspace/react-18/src/components/stencil-generated/index.ts
@@ -59,6 +59,8 @@ export const ModusTabs = /*@__PURE__*/createReactComponent<JSX.ModusTabs, HTMLMo
 export const ModusTextInput = /*@__PURE__*/createReactComponent<JSX.ModusTextInput, HTMLModusTextInputElement>('modus-text-input');
 export const ModusTimePicker = /*@__PURE__*/createReactComponent<JSX.ModusTimePicker, HTMLModusTimePickerElement>('modus-time-picker');
 export const ModusToast = /*@__PURE__*/createReactComponent<JSX.ModusToast, HTMLModusToastElement>('modus-toast');
+export const ModusToolbar = /*@__PURE__*/createReactComponent<JSX.ModusToolbar, HTMLModusToolbarElement>('modus-toolbar');
+export const ModusToolbarButton = /*@__PURE__*/createReactComponent<JSX.ModusToolbarButton, HTMLModusToolbarButtonElement>('modus-toolbar-button');
 export const ModusTooltip = /*@__PURE__*/createReactComponent<JSX.ModusTooltip, HTMLModusTooltipElement>('modus-tooltip');
 export const ModusTreeView = /*@__PURE__*/createReactComponent<JSX.ModusTreeView, HTMLModusTreeViewElement>('modus-tree-view');
 export const ModusTreeViewItem = /*@__PURE__*/createReactComponent<JSX.ModusTreeViewItem, HTMLModusTreeViewItemElement>('modus-tree-view-item');
diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
index 1b9c39117..70bc45ece 100644
--- a/stencil-workspace/src/components.d.ts
+++ b/stencil-workspace/src/components.d.ts
@@ -19,6 +19,7 @@ import { Cell, Column, Row } from "@tanstack/table-core";
 import { TableCellEdited, TableRowActionsMenuEvent } from "./components/modus-table/models/table-context.model";
 import { Tab } from "./components/modus-tabs/modus-tabs";
 import { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
+import { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 import { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
 export { Crumb } from "./components/modus-breadcrumb/modus-breadcrumb";
@@ -34,6 +35,7 @@ export { Cell, Column, Row } from "@tanstack/table-core";
 export { TableCellEdited, TableRowActionsMenuEvent } from "./components/modus-table/models/table-context.model";
 export { Tab } from "./components/modus-tabs/modus-tabs";
 export { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
+export { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 export { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export namespace Components {
     interface ModusAccordion {
@@ -1343,6 +1345,33 @@ export namespace Components {
          */
         "type": 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
     }
+    interface ModusToolbar {
+        /**
+          * The buttons to render.
+         */
+        "buttons": ModusToolbarButton[];
+        /**
+          * (optional) The toolbar's layout.
+         */
+        "layout": 'horizontal' | 'vertical';
+        /**
+          * (optional) The style of the toolbar
+         */
+        "toolbarStyle": 'combined' | 'split';
+    }
+    interface ModusToolbarButton {
+        "active": boolean;
+        "buttonStyle": 'combined' | 'split';
+        /**
+          * (optional) Disables the button.
+         */
+        "disabled": boolean;
+        "divader": boolean;
+        "divaderLayout": 'horizontal' | 'vertical';
+        "iconSrc": string;
+        "textButton": string;
+        "tooltip": ModusToolbarTooltip;
+    }
     interface ModusTooltip {
         /**
           * (optional) The tooltip's aria-label.
@@ -1564,6 +1593,10 @@ export interface ModusToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusToastElement;
 }
+export interface ModusToolbarButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLModusToolbarButtonElement;
+}
 export interface ModusTreeViewItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusTreeViewItemElement;
@@ -1878,6 +1911,18 @@ declare global {
         prototype: HTMLModusToastElement;
         new (): HTMLModusToastElement;
     };
+    interface HTMLModusToolbarElement extends Components.ModusToolbar, HTMLStencilElement {
+    }
+    var HTMLModusToolbarElement: {
+        prototype: HTMLModusToolbarElement;
+        new (): HTMLModusToolbarElement;
+    };
+    interface HTMLModusToolbarButtonElement extends Components.ModusToolbarButton, HTMLStencilElement {
+    }
+    var HTMLModusToolbarButtonElement: {
+        prototype: HTMLModusToolbarButtonElement;
+        new (): HTMLModusToolbarButtonElement;
+    };
     interface HTMLModusTooltipElement extends Components.ModusTooltip, HTMLStencilElement {
     }
     var HTMLModusTooltipElement: {
@@ -1948,6 +1993,8 @@ declare global {
         "modus-text-input": HTMLModusTextInputElement;
         "modus-time-picker": HTMLModusTimePickerElement;
         "modus-toast": HTMLModusToastElement;
+        "modus-toolbar": HTMLModusToolbarElement;
+        "modus-toolbar-button": HTMLModusToolbarButtonElement;
         "modus-tooltip": HTMLModusTooltipElement;
         "modus-tree-view": HTMLModusTreeViewElement;
         "modus-tree-view-item": HTMLModusTreeViewItemElement;
@@ -3460,6 +3507,34 @@ declare namespace LocalJSX {
          */
         "type"?: 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
     }
+    interface ModusToolbar {
+        /**
+          * The buttons to render.
+         */
+        "buttons"?: ModusToolbarButton[];
+        /**
+          * (optional) The toolbar's layout.
+         */
+        "layout"?: 'horizontal' | 'vertical';
+        /**
+          * (optional) The style of the toolbar
+         */
+        "toolbarStyle"?: 'combined' | 'split';
+    }
+    interface ModusToolbarButton {
+        "active"?: boolean;
+        "buttonStyle"?: 'combined' | 'split';
+        /**
+          * (optional) Disables the button.
+         */
+        "disabled"?: boolean;
+        "divader"?: boolean;
+        "divaderLayout"?: 'horizontal' | 'vertical';
+        "iconSrc"?: string;
+        "onButtonClick"?: (event: ModusToolbarButtonCustomEvent<any>) => void;
+        "textButton"?: string;
+        "tooltip"?: ModusToolbarTooltip;
+    }
     interface ModusTooltip {
         /**
           * (optional) The tooltip's aria-label.
@@ -3607,6 +3682,8 @@ declare namespace LocalJSX {
         "modus-text-input": ModusTextInput;
         "modus-time-picker": ModusTimePicker;
         "modus-toast": ModusToast;
+        "modus-toolbar": ModusToolbar;
+        "modus-toolbar-button": ModusToolbarButton;
         "modus-tooltip": ModusTooltip;
         "modus-tree-view": ModusTreeView;
         "modus-tree-view-item": ModusTreeViewItem;
@@ -3670,6 +3747,8 @@ declare module "@stencil/core" {
             "modus-text-input": LocalJSX.ModusTextInput & JSXBase.HTMLAttributes<HTMLModusTextInputElement>;
             "modus-time-picker": LocalJSX.ModusTimePicker & JSXBase.HTMLAttributes<HTMLModusTimePickerElement>;
             "modus-toast": LocalJSX.ModusToast & JSXBase.HTMLAttributes<HTMLModusToastElement>;
+            "modus-toolbar": LocalJSX.ModusToolbar & JSXBase.HTMLAttributes<HTMLModusToolbarElement>;
+            "modus-toolbar-button": LocalJSX.ModusToolbarButton & JSXBase.HTMLAttributes<HTMLModusToolbarButtonElement>;
             "modus-tooltip": LocalJSX.ModusTooltip & JSXBase.HTMLAttributes<HTMLModusTooltipElement>;
             "modus-tree-view": LocalJSX.ModusTreeView & JSXBase.HTMLAttributes<HTMLModusTreeViewElement>;
             "modus-tree-view-item": LocalJSX.ModusTreeViewItem & JSXBase.HTMLAttributes<HTMLModusTreeViewItemElement>;
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
new file mode 100644
index 000000000..a2eb29701
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -0,0 +1,85 @@
+div {
+  background-color: $col_gray_0;
+  border-top: $rem-4px solid $col_gray_light;
+  border-left: $rem-4px solid $col_gray_light;
+
+  &.layout-horizontal {
+    height: $rem-24px;
+    width: $rem-1px;
+    border-bottom: $rem-4px solid $col_gray_light;
+    border-right: 0;
+  }
+
+  &.layout-vertical {
+    height: $rem-1px;
+    width: $rem-24px;
+    border-right: $rem-4px solid $col_gray_light;
+    border-bottom: 0;
+  }
+}
+
+button {
+  align-items: center;
+  cursor: default;
+  display: inline-flex;
+  font-family: $primary-font;
+  font-weight: $btn-font-weight;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  min-width: $rem-32px;
+  height: $rem-32px;
+  background-color: $col_gray_light;
+  padding: 0;
+
+  &.style-margin {
+    border-radius: $rem-4px;
+    border: $rem-4px solid $col_gray_light;
+    box-shadow: $box-shadow-lg;
+
+    &.layout-horizontal {
+      margin-left: $rem-4px;
+    }
+
+    &.layout-vertical {
+      margin-top: $rem-4px;
+    }
+  }
+
+  &.style-marginless {
+    border-top: $rem-4px solid $col_gray_light;
+    border-left: $rem-4px solid $col_gray_light;
+
+    &.layout-horizontal {
+      border-bottom: $rem-4px solid $col_gray_light;
+      border-right: 0;
+    }
+
+    &.layout-vertical {
+      border-right: $rem-4px solid $col_gray_light;
+      border-bottom: 0;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: $col_gray_0;
+  }
+
+  &:active {
+    background-color: $col_gray_1;
+  }
+
+  &.activeButton {
+    background-color: $col_gray_1;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
new file mode 100644
index 000000000..54be3e212
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -0,0 +1,49 @@
+// eslint-disable-next-line
+import { Component, Event, Fragment, Prop, h } from '@stencil/core';
+import { ModusToolbarTooltip } from '../modus-toolbar.models';
+
+@Component({
+  tag: 'modus-toolbar-button',
+  styleUrl: 'modus-toolbar-button.scss',
+  shadow: true,
+})
+export class ModusToolbarButton {
+  @Prop() active: boolean;
+  @Prop() disabled: boolean;
+  @Prop() divader: boolean;
+  @Prop() iconSrc: string;
+  @Prop() textButton: string;
+  @Prop() tooltip: ModusToolbarTooltip;
+  @Prop() divaderLayout: 'horizontal' | 'vertical';
+  @Prop() buttonStyle: 'combined' | 'split';
+  @Event() onClick: () => void;
+
+  classByLayout: Map<string, string> = new Map([
+    ['horizontal', 'layout-horizontal'],
+    ['vertical', 'layout-vertical'],
+  ]);
+
+  classByStyle: Map<string, string> = new Map([
+    ['combined', 'style-marginless'],
+    ['split', 'style-margin'],
+  ]);
+
+  render(): unknown {
+    const layout = `${this.classByLayout.get(this.divaderLayout)}`;
+    const buttonClass = `${this.classByStyle.get(this.buttonStyle)} ${this.classByLayout.get(this.divaderLayout)} ${
+      this.active ? 'activeButton' : ''
+    }`;
+
+    return (
+      <Fragment>
+        {this.divader && this.buttonStyle === 'combined' && <div class={layout} />}
+        <modus-tooltip text={this.tooltip.text} position={this.tooltip.position}>
+          <button class={buttonClass} disabled={this.disabled} onClick={() => (!this.disabled ? this.onClick : null)}>
+            {this.iconSrc && <img src={this.iconSrc} />}
+            {this.textButton}
+          </button>
+        </modus-tooltip>
+      </Fragment>
+    );
+  }
+}
diff --git a/stencil-workspace/src/components/modus-toolbar/button/readme.md b/stencil-workspace/src/components/modus-toolbar/button/readme.md
new file mode 100644
index 000000000..b5b705d7c
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/button/readme.md
@@ -0,0 +1,49 @@
+# modus-toolbar-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute        | Description                     | Type                         | Default     |
+| --------------- | ---------------- | ------------------------------- | ---------------------------- | ----------- |
+| `active`        | `active`         |                                 | `boolean`                    | `undefined` |
+| `buttonStyle`   | `button-style`   |                                 | `"combined" \| "split"`      | `undefined` |
+| `disabled`      | `disabled`       | (optional) Disables the button. | `boolean`                    | `undefined` |
+| `divader`       | `divader`        |                                 | `boolean`                    | `undefined` |
+| `divaderLayout` | `divader-layout` |                                 | `"horizontal" \| "vertical"` | `undefined` |
+| `iconSrc`       | `icon-src`       |                                 | `string`                     | `undefined` |
+| `textButton`    | `text-button`    |                                 | `string`                     | `undefined` |
+| `tooltip`       | --               |                                 | `ModusToolbarTooltip`        | `undefined` |
+
+
+## Events
+
+| Event         | Description | Type               |
+| ------------- | ----------- | ------------------ |
+| `buttonClick` |             | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [modus-toolbar](..)
+
+### Depends on
+
+- [modus-tooltip](../../modus-tooltip)
+
+### Graph
+```mermaid
+graph TD;
+  modus-toolbar-button --> modus-tooltip
+  modus-toolbar --> modus-toolbar-button
+  style modus-toolbar-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
new file mode 100644
index 000000000..73a7b4057
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
@@ -0,0 +1,14 @@
+export interface ModusToolbarButton {
+  onClick: () => void;
+  tooltip: ModusToolbarTooltip;
+  iconSrc?: string;
+  textButton?: string;
+  disabled?: boolean;
+  active?: boolean;
+  divader?: boolean;
+}
+
+export interface ModusToolbarTooltip {
+  text: string;
+  position: 'bottom' | 'left' | 'right' | 'top' | 'auto';
+}
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
new file mode 100644
index 000000000..c9d1349e2
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -0,0 +1,42 @@
+div {
+  width: fit-content;
+  border-radius: $rem-4px;
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  &.layout-horizontal {
+    flex-direction: row;
+  }
+
+  &.layout-vertical {
+    flex-direction: column;
+  }
+
+  &.style-combined {
+    background-color: $col_gray_light;
+    box-shadow: $box-shadow-lg;
+
+    &.layout-horizontal {
+      border-right: $rem-4px solid $col_gray_light;
+    }
+
+    &.layout-vertical {
+      border-bottom: $rem-4px solid $col_gray_light;
+    }
+  }
+
+  modus-toolbar-button {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+
+    &.layout-horizontal {
+      flex-direction: row;
+    }
+
+    &.layout-vertical {
+      flex-direction: column;
+    }
+  }
+}
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
new file mode 100644
index 000000000..9ece3d1b5
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
@@ -0,0 +1,50 @@
+import { Component, Prop, h } from '@stencil/core';
+import { ModusToolbarButton } from './modus-toolbar.models';
+
+@Component({
+  tag: 'modus-toolbar',
+  styleUrl: 'modus-toolbar.scss',
+  shadow: true,
+})
+export class ModusToolbar {
+  /** The buttons to render. */
+  @Prop() buttons: ModusToolbarButton[];
+
+  /** (optional) The toolbar's layout. */
+  @Prop() layout: 'horizontal' | 'vertical' = 'horizontal';
+
+  /** (optional) The style of the toolbar */
+  @Prop() toolbarStyle: 'combined' | 'split' = 'combined';
+
+  classByLayout: Map<string, string> = new Map([
+    ['horizontal', 'layout-horizontal'],
+    ['vertical', 'layout-vertical'],
+  ]);
+
+  classByStyle: Map<string, string> = new Map([
+    ['combined', 'style-combined'],
+    ['split', 'style-split'],
+  ]);
+
+  render(): unknown {
+    const className = `${this.classByLayout.get(this.layout)} ${this.classByStyle.get(this.toolbarStyle)}`;
+
+    return (
+      <div class={className}>
+        {this.buttons.map((button) => (
+          <modus-toolbar-button
+            class={className}
+            active={button.active}
+            disabled={button.disabled}
+            divader={button.divader}
+            iconSrc={button.iconSrc}
+            textButton={button.textButton}
+            tooltip={button.tooltip}
+            divaderLayout={this.layout}
+            buttonStyle={this.toolbarStyle}
+            onClick={button.onClick}></modus-toolbar-button>
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/stencil-workspace/src/components/modus-toolbar/readme.md b/stencil-workspace/src/components/modus-toolbar/readme.md
new file mode 100644
index 000000000..8b2644404
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/readme.md
@@ -0,0 +1,33 @@
+# modus-toolbar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                         | Type                         | Default        |
+| -------------- | --------------- | ----------------------------------- | ---------------------------- | -------------- |
+| `buttons`      | --              | The buttons to render.              | `ModusToolbarButton[]`       | `undefined`    |
+| `layout`       | `layout`        | (optional) The toolbar's layout.    | `"horizontal" \| "vertical"` | `'horizontal'` |
+| `toolbarStyle` | `toolbar-style` | (optional) The style of the toolbar | `"combined" \| "split"`      | `'combined'`   |
+
+
+## Dependencies
+
+### Depends on
+
+- [modus-toolbar-button](button)
+
+### Graph
+```mermaid
+graph TD;
+  modus-toolbar --> modus-toolbar-button
+  modus-toolbar-button --> modus-tooltip
+  style modus-toolbar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+
diff --git a/stencil-workspace/src/components/modus-tooltip/readme.md b/stencil-workspace/src/components/modus-tooltip/readme.md
index 3807d90d6..d41470f10 100644
--- a/stencil-workspace/src/components/modus-tooltip/readme.md
+++ b/stencil-workspace/src/components/modus-tooltip/readme.md
@@ -23,6 +23,7 @@
  - [modus-navbar](../modus-navbar)
  - [modus-side-navigation-item](../modus-side-navigation/modus-side-navigation-item)
  - [modus-table](../modus-table)
+ - [modus-toolbar-button](../modus-toolbar/button)
 
 ### Graph
 ```mermaid
@@ -31,6 +32,7 @@ graph TD;
   modus-navbar --> modus-tooltip
   modus-side-navigation-item --> modus-tooltip
   modus-table --> modus-tooltip
+  modus-toolbar-button --> modus-tooltip
   style modus-tooltip fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html
index 59a52b5d2..131cb02c0 100644
--- a/stencil-workspace/src/index.html
+++ b/stencil-workspace/src/index.html
@@ -17,5 +17,25 @@
 
   <body>
     <!-- Test components -->
- </body>
+    <modus-toolbar></modus-toolbar>
+    
+     
+    <script>
+      const modusToolbar = document.querySelector('modus-toolbar');
+      const buttons1 = [
+        {  textButton: 'test button'},
+        {  iconSrc: 'icon 2', divader: true},
+        {  iconSrc: 'icon 1', disabled: true},
+        {  iconSrc: 'icon 2', divader: true},
+        {  iconSrc: 'icon 1', divader: true},
+        {  iconSrc: 'icon 2', active: true},
+        ];
+      const style = "split"
+      const layout = 'horizontal'
+      modusToolbar.buttons = buttons1;
+      modusToolbar.toolbarStyle = style;
+      modusToolbar.layout = layout;
+    </script>
+
+  </body>
 </html>

From dbd79e6f38be7a9bffb25e407907a44de36447f1 Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Wed, 13 Dec 2023 17:49:34 +0200
Subject: [PATCH 02/10] Added storybook

---
 .../button/modus-toolbar-button.scss          |  28 ++---
 .../button/modus-toolbar-button.tsx           |   6 +-
 .../components/modus-toolbar/button/readme.md |  20 ++--
 .../modus-toolbar/modus-toolbar.scss          |   4 +-
 .../modus-toolbar/modus-toolbar.tsx           |   4 +-
 .../src/components/modus-toolbar/readme.md    |  10 +-
 .../modus-toolbar-storybook-docs.mdx          | 108 +++++++++++++++++
 .../modus-toolbar/modus-toolbar.stories.tsx   | 110 ++++++++++++++++++
 8 files changed, 254 insertions(+), 36 deletions(-)
 create mode 100644 stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
 create mode 100644 stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx

diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
index a2eb29701..e1abda357 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -1,43 +1,43 @@
 div {
   background-color: $col_gray_0;
-  border-top: $rem-4px solid $col_gray_light;
   border-left: $rem-4px solid $col_gray_light;
+  border-top: $rem-4px solid $col_gray_light;
 
   &.layout-horizontal {
-    height: $rem-24px;
-    width: $rem-1px;
     border-bottom: $rem-4px solid $col_gray_light;
     border-right: 0;
+    height: $rem-24px;
+    width: $rem-1px;
   }
 
   &.layout-vertical {
+    border-bottom: 0;
+    border-right: $rem-4px solid $col_gray_light;
     height: $rem-1px;
     width: $rem-24px;
-    border-right: $rem-4px solid $col_gray_light;
-    border-bottom: 0;
   }
 }
 
 button {
   align-items: center;
+  background-color: $col_gray_light;
   cursor: default;
   display: inline-flex;
   font-family: $primary-font;
   font-weight: $btn-font-weight;
+  height: $rem-32px;
   justify-content: center;
+  min-width: $rem-32px;
+  padding: 0;
   position: relative;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   width: auto;
-  min-width: $rem-32px;
-  height: $rem-32px;
-  background-color: $col_gray_light;
-  padding: 0;
 
   &.style-margin {
-    border-radius: $rem-4px;
     border: $rem-4px solid $col_gray_light;
+    border-radius: $rem-4px;
     box-shadow: $box-shadow-lg;
 
     &.layout-horizontal {
@@ -50,8 +50,8 @@ button {
   }
 
   &.style-marginless {
-    border-top: $rem-4px solid $col_gray_light;
     border-left: $rem-4px solid $col_gray_light;
+    border-top: $rem-4px solid $col_gray_light;
 
     &.layout-horizontal {
       border-bottom: $rem-4px solid $col_gray_light;
@@ -59,21 +59,21 @@ button {
     }
 
     &.layout-vertical {
-      border-right: $rem-4px solid $col_gray_light;
       border-bottom: 0;
+      border-right: $rem-4px solid $col_gray_light;
     }
   }
 
   &:hover {
-    cursor: pointer;
     background-color: $col_gray_0;
+    cursor: pointer;
   }
 
   &:active {
     background-color: $col_gray_1;
   }
 
-  &.activeButton {
+  &.active-button {
     background-color: $col_gray_1;
   }
 
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
index 54be3e212..de6abed1d 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -16,7 +16,7 @@ export class ModusToolbarButton {
   @Prop() tooltip: ModusToolbarTooltip;
   @Prop() divaderLayout: 'horizontal' | 'vertical';
   @Prop() buttonStyle: 'combined' | 'split';
-  @Event() onClick: () => void;
+  @Event() buttonClick: () => void;
 
   classByLayout: Map<string, string> = new Map([
     ['horizontal', 'layout-horizontal'],
@@ -31,14 +31,14 @@ export class ModusToolbarButton {
   render(): unknown {
     const layout = `${this.classByLayout.get(this.divaderLayout)}`;
     const buttonClass = `${this.classByStyle.get(this.buttonStyle)} ${this.classByLayout.get(this.divaderLayout)} ${
-      this.active ? 'activeButton' : ''
+      this.active ? 'active-button' : ''
     }`;
 
     return (
       <Fragment>
         {this.divader && this.buttonStyle === 'combined' && <div class={layout} />}
         <modus-tooltip text={this.tooltip.text} position={this.tooltip.position}>
-          <button class={buttonClass} disabled={this.disabled} onClick={() => (!this.disabled ? this.onClick : null)}>
+          <button class={buttonClass} disabled={this.disabled} onClick={() => (!this.disabled ? this.buttonClick : null)}>
             {this.iconSrc && <img src={this.iconSrc} />}
             {this.textButton}
           </button>
diff --git a/stencil-workspace/src/components/modus-toolbar/button/readme.md b/stencil-workspace/src/components/modus-toolbar/button/readme.md
index b5b705d7c..d1861c876 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/readme.md
+++ b/stencil-workspace/src/components/modus-toolbar/button/readme.md
@@ -7,16 +7,16 @@
 
 ## Properties
 
-| Property        | Attribute        | Description                     | Type                         | Default     |
-| --------------- | ---------------- | ------------------------------- | ---------------------------- | ----------- |
-| `active`        | `active`         |                                 | `boolean`                    | `undefined` |
-| `buttonStyle`   | `button-style`   |                                 | `"combined" \| "split"`      | `undefined` |
-| `disabled`      | `disabled`       | (optional) Disables the button. | `boolean`                    | `undefined` |
-| `divader`       | `divader`        |                                 | `boolean`                    | `undefined` |
-| `divaderLayout` | `divader-layout` |                                 | `"horizontal" \| "vertical"` | `undefined` |
-| `iconSrc`       | `icon-src`       |                                 | `string`                     | `undefined` |
-| `textButton`    | `text-button`    |                                 | `string`                     | `undefined` |
-| `tooltip`       | --               |                                 | `ModusToolbarTooltip`        | `undefined` |
+| Property        | Attribute        | Description | Type                         | Default     |
+| --------------- | ---------------- | ----------- | ---------------------------- | ----------- |
+| `active`        | `active`         |             | `boolean`                    | `undefined` |
+| `buttonStyle`   | `button-style`   |             | `"combined" \| "split"`      | `undefined` |
+| `disabled`      | `disabled`       |             | `boolean`                    | `undefined` |
+| `divader`       | `divader`        |             | `boolean`                    | `undefined` |
+| `divaderLayout` | `divader-layout` |             | `"horizontal" \| "vertical"` | `undefined` |
+| `iconSrc`       | `icon-src`       |             | `string`                     | `undefined` |
+| `textButton`    | `text-button`    |             | `string`                     | `undefined` |
+| `tooltip`       | --               |             | `ModusToolbarTooltip`        | `undefined` |
 
 
 ## Events
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
index c9d1349e2..49c0fe4d1 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -1,9 +1,9 @@
 div {
-  width: fit-content;
+  align-items: center;
   border-radius: $rem-4px;
   display: flex;
   position: relative;
-  align-items: center;
+  width: fit-content;
 
   &.layout-horizontal {
     flex-direction: row;
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
index 9ece3d1b5..d2c20a0e2 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
@@ -13,7 +13,7 @@ export class ModusToolbar {
   /** (optional) The toolbar's layout. */
   @Prop() layout: 'horizontal' | 'vertical' = 'horizontal';
 
-  /** (optional) The style of the toolbar */
+  /** (optional) The toolbar's style */
   @Prop() toolbarStyle: 'combined' | 'split' = 'combined';
 
   classByLayout: Map<string, string> = new Map([
@@ -42,7 +42,7 @@ export class ModusToolbar {
             tooltip={button.tooltip}
             divaderLayout={this.layout}
             buttonStyle={this.toolbarStyle}
-            onClick={button.onClick}></modus-toolbar-button>
+            buttonClick={button.onClick}></modus-toolbar-button>
         ))}
       </div>
     );
diff --git a/stencil-workspace/src/components/modus-toolbar/readme.md b/stencil-workspace/src/components/modus-toolbar/readme.md
index 8b2644404..d0753632e 100644
--- a/stencil-workspace/src/components/modus-toolbar/readme.md
+++ b/stencil-workspace/src/components/modus-toolbar/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                         | Type                         | Default        |
-| -------------- | --------------- | ----------------------------------- | ---------------------------- | -------------- |
-| `buttons`      | --              | The buttons to render.              | `ModusToolbarButton[]`       | `undefined`    |
-| `layout`       | `layout`        | (optional) The toolbar's layout.    | `"horizontal" \| "vertical"` | `'horizontal'` |
-| `toolbarStyle` | `toolbar-style` | (optional) The style of the toolbar | `"combined" \| "split"`      | `'combined'`   |
+| Property       | Attribute       | Description                      | Type                         | Default        |
+| -------------- | --------------- | -------------------------------- | ---------------------------- | -------------- |
+| `buttons`      | --              | The buttons to render.           | `ModusToolbarButton[]`       | `undefined`    |
+| `layout`       | `layout`        | (optional) The toolbar's layout. | `"horizontal" \| "vertical"` | `'horizontal'` |
+| `toolbarStyle` | `toolbar-style` | (optional) The toolbar's style   | `"combined" \| "split"`      | `'combined'`   |
 
 
 ## Dependencies
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
new file mode 100644
index 000000000..afc22e454
--- /dev/null
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
@@ -0,0 +1,108 @@
+import { Anchor } from '@storybook/addon-docs';
+
+# Toolbar
+
+---
+
+[Modus Toolbar](https://modus.trimble.com/components/web/toolbar/) web components consists of a series of icon buttons occupying minimum workspace. They are referenced using the `<modus-toolbar>` custom HTML element.
+
+A new TypeScript typing has been provided named Buttton defined as:
+
+```ts
+{
+  onClick: () => void; // required.
+  tooltip: ModusToolbarTooltip; // required.
+  iconSrc?: string; // optional.
+  textButton?: string; // optional.
+  disabled?: boolean; // optional.
+  active?: boolean; // optional.
+  divader?: boolean; // optional.
+}
+```
+
+### Default
+
+<Story id="components-toolbar--default" />
+
+```html
+<modus-toolbar />
+
+<script>
+  const element = document.querySelector('modus-toolbar');
+  element.buttons = [
+    { tooltip: {
+      text: 'Text button',
+      position: 'bottom',
+      },
+    textButton: 'Text button',
+    },
+    { tooltip: {
+      text: 'Add',
+      position: 'bottom',
+      },
+    iconSrc: 'add', 
+    divader: true,
+    },
+    {  tooltip: {
+      text: 'Edit',
+      position: 'bottom',
+      },
+    iconSrc: 'edit', 
+    disabled: true,
+    },
+    {  tooltip: {
+      text: 'Refresh',
+      position: 'bottom',
+      },
+    iconSrc: 'refresh', 
+    active: true, 
+    divader: true,
+    }
+  ]
+</script>
+```
+
+### Vertical Split Toolbar
+
+<Story id="components-toolbar--vertical-split" />
+
+```html
+<modus-toolbar
+  layout="vertical"
+  toolbarStyle="split" />
+
+<script>
+  const element = document.querySelector('modus-toolbar');
+  element.buttons = [
+    { tooltip: {
+      text: 'Add',
+      position: 'bottom',
+      },
+    iconSrc: 'add', 
+    },
+    {  tooltip: {
+      text: 'Edit',
+      position: 'bottom',
+      },
+    iconSrc: 'edit', 
+    disabled: true,
+    },
+    {  tooltip: {
+      text: 'Refresh',
+      position: 'bottom',
+      },
+    iconSrc: 'refresh', 
+    active: true, 
+    }
+  ]
+</script>
+```
+
+### Properties
+
+| Name            | Description                         | Type                         | Default        |
+| --------------- | ----------------------------------- | ---------------------------- | -------------- |
+| `buttons`       | The buttons to render.              | `ModusToolbarButton[]`       | `undefined`    |
+| `layout`        | (optional) The toolbar's layout.    | `"horizontal" \| "vertical"` | `'horizontal'` |
+| `toolbar-style` | (optional) The style of the toolbar | `"combined" \| "split"`      | `'combined'`   |
+
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
new file mode 100644
index 000000000..ab909b575
--- /dev/null
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
@@ -0,0 +1,110 @@
+import { html } from 'lit-html';
+// @ts-ignore: JSX/MDX with Stencil
+import docs from './modus-toolbar-storybook-docs.mdx';
+
+export default {  
+  title: 'Components/Toolbar', 
+  argTypes: {
+    buttons: {
+      name: 'buttons',
+      description: 'Buttons added to the toolbar',
+      table: {
+        type: { summary: 'ModusToolbarButton[]' },
+      },
+      type: { required: true },
+    },
+    layout: {
+      name: 'layout',      
+      control: {
+        options: ['horizontal', 'vertical'],
+        type: 'select',
+      },
+      description: "The toolbar's layout",
+      table: {
+        defaultValue: { summary: `'horizontal'` },
+        type: { summary: `'horizontal', 'vertical'` },
+      },
+    },
+    toolbarStyle: {
+      name: 'toolbar-style',   
+      control: {
+        options: ['combined', 'split'],
+        type: 'select',
+      },
+      description: "The toolbar's style",
+      table: {
+        defaultValue: { summary: `'combined'` },
+        type: { summary: `'combined', 'split'` },
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true, sort: 'requiredFirst' },
+    docs: {
+      page: docs,
+    },
+    options: {
+      isToolshown: true,
+    },
+  },
+};
+
+const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar buttons=${buttons} layout=${layout} toolbarStyle=${toolbarStyle}></modus-toolbar>`;
+
+export const Default = Template.bind({});
+Default.args = {
+  buttons: [
+    { tooltip: {
+        text: 'Text button',
+        position: 'bottom',
+        },
+    textButton: 'Text button',
+    },
+    { tooltip: {
+        text: 'Add',
+        position: 'bottom',
+        },
+    iconSrc: 'add', divader: true,
+    },
+    {  tooltip: {
+        text: 'Edit',
+        position: 'bottom',
+        },
+    iconSrc: 'edit', disabled: true,
+    },
+    {  tooltip: {
+        text: 'Refresh',
+        position: 'bottom',
+        },
+    iconSrc: 'refresh', active: true, divader: true,
+    }
+  ],
+  layout: 'horizontal',
+  toolbarStyle: 'combined',
+};
+
+export const VerticalSplitToolbar = Template.bind({});
+Default.args = {
+    buttons: [
+      { tooltip: {
+          text: 'Add',
+          position: 'bottom',
+          },
+      iconSrc: 'add',
+      },
+      {  tooltip: {
+          text: 'Edit',
+          position: 'bottom',
+          },
+      iconSrc: 'edit', disabled: true,
+      },
+      {  tooltip: {
+          text: 'Refresh',
+          position: 'bottom',
+          },
+      iconSrc: 'refresh', active: true,
+      }
+    ],
+    layout: 'vertical',
+    toolbarStyle: 'split',
+};
\ No newline at end of file

From e3c329affc6e38737289e7f987080e130742e9ae Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Thu, 14 Dec 2023 17:45:02 +0200
Subject: [PATCH 03/10] Added E2E tests and UTs for the modus toolbar component

---
 stencil-workspace/src/components.d.ts         | 48 ++++++++++++-------
 .../components/modus-switch/modus-switch.scss |  3 +-
 .../button/modus-toolbar-button.tsx           |  2 +-
 .../modus-toolbar/modus-toolbar.e2e.ts        | 37 ++++++++++++++
 .../modus-toolbar/modus-toolbar.spec.ts       | 36 ++++++++++++++
 .../modus-toolbar/modus-toolbar.tsx           |  2 +-
 6 files changed, 107 insertions(+), 21 deletions(-)
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.e2e.ts
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.spec.ts

diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
index 67e149cea..58093924c 100644
--- a/stencil-workspace/src/components.d.ts
+++ b/stencil-workspace/src/components.d.ts
@@ -5,45 +5,46 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Cell, Column, Row } from "@tanstack/table-core";
 import { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
 import { BadgeProperties } from "./components/modus-badge/modus-badge";
 import { Crumb } from "./components/modus-breadcrumb/modus-breadcrumb";
-import { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 import { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRowAction, ModusDataTableRowActionClickEvent, ModusDataTableSelectionOptions, ModusDataTableSortEvent, ModusDataTableSortOptions, TCell, TColumn, TRow } from "./components/modus-data-table/modus-data-table.models";
 import { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models";
-import { ModusNavbarApp, ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
+import { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 import { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models";
+import { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 import { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 import { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
 import { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnVisibilityState, ModusTableColumnsVisibilityOptions, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+import { Cell, Column, Row } from "@tanstack/table-core";
 import { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
 import { TableRowActionsMenuEvent } from "./components/modus-table/models/table-row-actions.models";
 import { Tab } from "./components/modus-tabs/modus-tabs";
 import { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
-import { ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
+import { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 import { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
-export { Cell, Column, Row } from "@tanstack/table-core";
+import { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
 export { BadgeProperties } from "./components/modus-badge/modus-badge";
 export { Crumb } from "./components/modus-breadcrumb/modus-breadcrumb";
-export { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRowAction, ModusDataTableRowActionClickEvent, ModusDataTableSelectionOptions, ModusDataTableSortEvent, ModusDataTableSortOptions, TCell, TColumn, TRow } from "./components/modus-data-table/modus-data-table.models";
 export { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models";
-export { ModusNavbarApp, ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
+export { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 export { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models";
+export { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 export { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 export { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
 export { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnVisibilityState, ModusTableColumnsVisibilityOptions, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+export { Cell, Column, Row } from "@tanstack/table-core";
 export { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
 export { TableRowActionsMenuEvent } from "./components/modus-table/models/table-row-actions.models";
 export { Tab } from "./components/modus-tabs/modus-tabs";
 export { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
 export { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 export { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
-export { LocalJSX as JSX };
+export { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export namespace Components {
     interface ModusAccordion {
         /**
@@ -282,6 +283,10 @@ export namespace Components {
           * (optional) The checkbox label.
          */
         "label": string;
+        /**
+          * (optional) The size of the checkbox.
+         */
+        "size": 'small' | 'medium';
         /**
           * (optional) If you wish to prevent the propagation of your event, you may opt for this.
          */
@@ -1038,6 +1043,10 @@ export namespace Components {
           * (optional) The switch label.
          */
         "label": string;
+        /**
+          * (optional) The size of the radiobutton.
+         */
+        "size"?: 'small' | 'medium';
     }
     interface ModusTable {
         /**
@@ -1384,16 +1393,13 @@ export namespace Components {
          */
         "layout": 'horizontal' | 'vertical';
         /**
-          * (optional) The style of the toolbar
+          * (optional) The toolbar's style
          */
         "toolbarStyle": 'combined' | 'split';
     }
     interface ModusToolbarButton {
         "active": boolean;
         "buttonStyle": 'combined' | 'split';
-        /**
-          * (optional) Disables the button.
-         */
         "disabled": boolean;
         "divader": boolean;
         "divaderLayout": 'horizontal' | 'vertical';
@@ -2302,6 +2308,10 @@ declare namespace LocalJSX {
           * An event that fires on checkbox click.
          */
         "onCheckboxClick"?: (event: ModusCheckboxCustomEvent<boolean>) => void;
+        /**
+          * (optional) The size of the checkbox.
+         */
+        "size"?: 'small' | 'medium';
         /**
           * (optional) If you wish to prevent the propagation of your event, you may opt for this.
          */
@@ -3196,6 +3206,10 @@ declare namespace LocalJSX {
           * An event that fires on switch click.
          */
         "onSwitchClick"?: (event: ModusSwitchCustomEvent<boolean>) => void;
+        /**
+          * (optional) The size of the radiobutton.
+         */
+        "size"?: 'small' | 'medium';
     }
     interface ModusTable {
         /**
@@ -3583,16 +3597,13 @@ declare namespace LocalJSX {
          */
         "layout"?: 'horizontal' | 'vertical';
         /**
-          * (optional) The style of the toolbar
+          * (optional) The toolbar's style
          */
         "toolbarStyle"?: 'combined' | 'split';
     }
     interface ModusToolbarButton {
         "active"?: boolean;
         "buttonStyle"?: 'combined' | 'split';
-        /**
-          * (optional) Disables the button.
-         */
         "disabled"?: boolean;
         "divader"?: boolean;
         "divaderLayout"?: 'horizontal' | 'vertical';
@@ -3756,6 +3767,7 @@ declare namespace LocalJSX {
         "modus-tree-view-item": ModusTreeViewItem;
     }
 }
+export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.scss b/stencil-workspace/src/components/modus-switch/modus-switch.scss
index b56744f1a..1afc00f71 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.scss
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.scss
@@ -28,6 +28,7 @@
         transform: translateX($rem-14px);
       }
     }
+
     label {
       font-size: $rem-12px;
     }
@@ -95,8 +96,8 @@
 
   label {
     color: $modus-switch-label-color;
-    margin-left: $rem-8px;
     margin-bottom: 0.01rem;
+    margin-left: $rem-8px;
   }
 
   &.disabled {
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
index de6abed1d..7e8371c53 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -37,7 +37,7 @@ export class ModusToolbarButton {
     return (
       <Fragment>
         {this.divader && this.buttonStyle === 'combined' && <div class={layout} />}
-        <modus-tooltip text={this.tooltip.text} position={this.tooltip.position}>
+        <modus-tooltip text={this.tooltip?.text} position={this.tooltip?.position}>
           <button class={buttonClass} disabled={this.disabled} onClick={() => (!this.disabled ? this.buttonClick : null)}>
             {this.iconSrc && <img src={this.iconSrc} />}
             {this.textButton}
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.e2e.ts b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.e2e.ts
new file mode 100644
index 000000000..13ffba75b
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.e2e.ts
@@ -0,0 +1,37 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('modus-toolbar', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-toolbar></modus-toolbar>');
+    const element = await page.find('modus-toolbar');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to the layout prop', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-toolbar></modus-toolbar>');
+    const component = await page.find('modus-toolbar');
+    const element = await page.find('modus-toolbar >>> div');
+    expect(element).toHaveClass('layout-horizontal');
+
+    component.setProperty('layout', 'vertical');
+    await page.waitForChanges();
+    expect(element).toHaveClass('layout-vertical');
+  });
+
+  it('renders changes to the toolbarStyle prop', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-toolbar></modus-toolbar>');
+    const component = await page.find('modus-toolbar');
+    const element = await page.find('modus-toolbar >>> div');
+    expect(element).toHaveClass('style-combined');
+
+    component.setProperty('toolbarStyle', 'split');
+    await page.waitForChanges();
+    expect(element).toHaveClass('style-split');
+  });
+});
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.spec.ts b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.spec.ts
new file mode 100644
index 000000000..258b1e7c7
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.spec.ts
@@ -0,0 +1,36 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { ModusToolbar } from './modus-toolbar';
+
+describe('modus-toolbar', () => {
+  it('renders', async () => {
+    const { root } = await newSpecPage({
+      components: [ModusToolbar],
+      html: '<modus-toolbar></modus-toolbar>',
+    });
+    expect(root).toEqualHtml(`
+      <modus-toolbar>
+        <mock:shadow-root>
+          <div class="layout-horizontal style-combined"></div>
+        </mock:shadow-root>
+      </modus-toolbar>
+    `);
+  });
+
+  it('should get the correct class by layout', () => {
+    const modusToolbar = new ModusToolbar();
+    let className = modusToolbar.classByLayout.get('horizontal');
+    expect(className).toEqual('layout-horizontal');
+
+    className = modusToolbar.classByLayout.get('vertical');
+    expect(className).toEqual('layout-vertical');
+  });
+
+  it('should get the correct class by style', () => {
+    const modusToolbar = new ModusToolbar();
+    let className = modusToolbar.classByStyle.get('combined');
+    expect(className).toEqual('style-combined');
+
+    className = modusToolbar.classByStyle.get('split');
+    expect(className).toEqual('style-split');
+  });
+});
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
index d2c20a0e2..bb3dc8e4f 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
@@ -8,7 +8,7 @@ import { ModusToolbarButton } from './modus-toolbar.models';
 })
 export class ModusToolbar {
   /** The buttons to render. */
-  @Prop() buttons: ModusToolbarButton[];
+  @Prop() buttons: ModusToolbarButton[] = [];
 
   /** (optional) The toolbar's layout. */
   @Prop() layout: 'horizontal' | 'vertical' = 'horizontal';

From a871a44ab5e87e155075eb8f12afc547a83a192b Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Fri, 15 Dec 2023 11:47:40 +0200
Subject: [PATCH 04/10] Fixed the build

---
 .../modus-toolbar/button/modus-toolbar-button.tsx        | 9 ++++++---
 .../src/components/modus-toolbar/modus-toolbar.tsx       | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
index 7e8371c53..db2e7dbb9 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import { Component, Event, Fragment, Prop, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Fragment, Prop, h } from '@stencil/core';
 import { ModusToolbarTooltip } from '../modus-toolbar.models';
 
 @Component({
@@ -16,7 +16,7 @@ export class ModusToolbarButton {
   @Prop() tooltip: ModusToolbarTooltip;
   @Prop() divaderLayout: 'horizontal' | 'vertical';
   @Prop() buttonStyle: 'combined' | 'split';
-  @Event() buttonClick: () => void;
+  @Event() buttonClick: EventEmitter;
 
   classByLayout: Map<string, string> = new Map([
     ['horizontal', 'layout-horizontal'],
@@ -38,7 +38,10 @@ export class ModusToolbarButton {
       <Fragment>
         {this.divader && this.buttonStyle === 'combined' && <div class={layout} />}
         <modus-tooltip text={this.tooltip?.text} position={this.tooltip?.position}>
-          <button class={buttonClass} disabled={this.disabled} onClick={() => (!this.disabled ? this.buttonClick : null)}>
+          <button
+            class={buttonClass}
+            disabled={this.disabled}
+            onClick={() => (!this.disabled ? this.buttonClick.emit() : null)}>
             {this.iconSrc && <img src={this.iconSrc} />}
             {this.textButton}
           </button>
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
index bb3dc8e4f..686e881bf 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
@@ -42,7 +42,7 @@ export class ModusToolbar {
             tooltip={button.tooltip}
             divaderLayout={this.layout}
             buttonStyle={this.toolbarStyle}
-            buttonClick={button.onClick}></modus-toolbar-button>
+            onButtonClick={button.onClick}></modus-toolbar-button>
         ))}
       </div>
     );

From 03409ec8c69be0214b7c05174c6882e9d4ae527a Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Fri, 15 Dec 2023 12:46:49 +0200
Subject: [PATCH 05/10] Added icons in the storybook

---
 .../src/components/modus-toolbar/readme.md     |  2 +-
 .../modus-toolbar/modus-toolbar.stories.tsx    | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/stencil-workspace/src/components/modus-toolbar/readme.md b/stencil-workspace/src/components/modus-toolbar/readme.md
index d0753632e..3c5eca4e4 100644
--- a/stencil-workspace/src/components/modus-toolbar/readme.md
+++ b/stencil-workspace/src/components/modus-toolbar/readme.md
@@ -9,7 +9,7 @@
 
 | Property       | Attribute       | Description                      | Type                         | Default        |
 | -------------- | --------------- | -------------------------------- | ---------------------------- | -------------- |
-| `buttons`      | --              | The buttons to render.           | `ModusToolbarButton[]`       | `undefined`    |
+| `buttons`      | --              | The buttons to render.           | `ModusToolbarButton[]`       | `[]`           |
 | `layout`       | `layout`        | (optional) The toolbar's layout. | `"horizontal" \| "vertical"` | `'horizontal'` |
 | `toolbarStyle` | `toolbar-style` | (optional) The toolbar's style   | `"combined" \| "split"`      | `'combined'`   |
 
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
index ab909b575..664a217d6 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
@@ -51,6 +51,12 @@ export default {
 
 const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar buttons=${buttons} layout=${layout} toolbarStyle=${toolbarStyle}></modus-toolbar>`;
 
+const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
+
+const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
+
+const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
+
 export const Default = Template.bind({});
 Default.args = {
   buttons: [
@@ -64,19 +70,19 @@ Default.args = {
         text: 'Add',
         position: 'bottom',
         },
-    iconSrc: 'add', divader: true,
+    iconSrc: `${addIcon}`, divader: true,
     },
     {  tooltip: {
         text: 'Edit',
         position: 'bottom',
         },
-    iconSrc: 'edit', disabled: true,
+    iconSrc: `${addEdit}`, disabled: true,
     },
     {  tooltip: {
         text: 'Refresh',
         position: 'bottom',
         },
-    iconSrc: 'refresh', active: true, divader: true,
+    iconSrc: `${addRefresh}`, active: true, divader: true,
     }
   ],
   layout: 'horizontal',
@@ -90,19 +96,19 @@ Default.args = {
           text: 'Add',
           position: 'bottom',
           },
-      iconSrc: 'add',
+      iconSrc: `${addIcon}`,
       },
       {  tooltip: {
           text: 'Edit',
           position: 'bottom',
           },
-      iconSrc: 'edit', disabled: true,
+      iconSrc: `${addEdit}`, disabled: true,
       },
       {  tooltip: {
           text: 'Refresh',
           position: 'bottom',
           },
-      iconSrc: 'refresh', active: true,
+      iconSrc: `${addRefresh}`, active: true,
       }
     ],
     layout: 'vertical',

From 0b1b1da95a9bbdb0aad11481e990d49f3f452925 Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Fri, 15 Dec 2023 18:09:45 +0200
Subject: [PATCH 06/10] Fixed typo and updated storybook

---
 .../modus-toolbar-storybook-docs.mdx          | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
index afc22e454..2a633aa69 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
@@ -1,4 +1,4 @@
-import { Anchor } from '@storybook/addon-docs';
+import { Story } from '@storybook/addon-docs';
 
 # Toolbar
 
@@ -6,7 +6,7 @@ import { Anchor } from '@storybook/addon-docs';
 
 [Modus Toolbar](https://modus.trimble.com/components/web/toolbar/) web components consists of a series of icon buttons occupying minimum workspace. They are referenced using the `<modus-toolbar>` custom HTML element.
 
-A new TypeScript typing has been provided named Buttton defined as:
+A new TypeScript typing has been provided named Button defined as:
 
 ```ts
 {
@@ -25,10 +25,17 @@ A new TypeScript typing has been provided named Buttton defined as:
 <Story id="components-toolbar--default" />
 
 ```html
-<modus-toolbar />
+<modus-toolbar></modus-toolbar>
 
 <script>
   const element = document.querySelector('modus-toolbar');
+
+  const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
+
+  const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
+
+  const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
+
   element.buttons = [
     { tooltip: {
       text: 'Text button',
@@ -40,21 +47,21 @@ A new TypeScript typing has been provided named Buttton defined as:
       text: 'Add',
       position: 'bottom',
       },
-    iconSrc: 'add', 
+    iconSrc: addIcon, 
     divader: true,
     },
     {  tooltip: {
       text: 'Edit',
       position: 'bottom',
       },
-    iconSrc: 'edit', 
+    iconSrc: addEdit, 
     disabled: true,
     },
     {  tooltip: {
       text: 'Refresh',
       position: 'bottom',
       },
-    iconSrc: 'refresh', 
+    iconSrc: addRefresh, 
     active: true, 
     divader: true,
     }
@@ -64,34 +71,41 @@ A new TypeScript typing has been provided named Buttton defined as:
 
 ### Vertical Split Toolbar
 
-<Story id="components-toolbar--vertical-split" />
+<Story id="components-toolbar--vertical-split-toolbar" />
 
 ```html
 <modus-toolbar
   layout="vertical"
-  toolbarStyle="split" />
+  toolbarStyle="split"></modus-toolbar>
 
 <script>
   const element = document.querySelector('modus-toolbar');
+
+  const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
+
+  const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
+
+  const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
+
   element.buttons = [
     { tooltip: {
       text: 'Add',
       position: 'bottom',
       },
-    iconSrc: 'add', 
+    iconSrc: addIcon, 
     },
     {  tooltip: {
       text: 'Edit',
       position: 'bottom',
       },
-    iconSrc: 'edit', 
+    iconSrc: addEdit, 
     disabled: true,
     },
     {  tooltip: {
       text: 'Refresh',
       position: 'bottom',
       },
-    iconSrc: 'refresh', 
+    iconSrc: addRefresh, 
     active: true, 
     }
   ]
@@ -103,6 +117,6 @@ A new TypeScript typing has been provided named Buttton defined as:
 | Name            | Description                         | Type                         | Default        |
 | --------------- | ----------------------------------- | ---------------------------- | -------------- |
 | `buttons`       | The buttons to render.              | `ModusToolbarButton[]`       | `undefined`    |
-| `layout`        | (optional) The toolbar's layout.    | `"horizontal" \| "vertical"` | `'horizontal'` |
-| `toolbar-style` | (optional) The style of the toolbar | `"combined" \| "split"`      | `'combined'`   |
+| `layout`        | (optional) The toolbar's layout.    | `"horizontal" | "vertical"`  | `'horizontal'` |
+| `toolbar-style` | (optional) The style of the toolbar | `"combined" | "split"`       | `'combined'`   |
 

From 2ec473030e429966eaa59c518f99aa95089d120a Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Wed, 17 Jan 2024 15:10:04 +0200
Subject: [PATCH 07/10] Fixed border-radius and handel some of the PR comments

---
 .../src/lib/stencil-generated/components.ts   |  8 +--
 stencil-workspace/src/components.d.ts         |  8 +--
 .../button/modus-toolbar-button.scss          | 70 +++++++++++++------
 .../button/modus-toolbar-button.tsx           | 20 ++++--
 .../components/modus-toolbar/button/readme.md |  4 +-
 .../modus-toolbar/modus-toolbar.models.ts     |  2 +-
 .../modus-toolbar/modus-toolbar.scss          |  8 ++-
 .../modus-toolbar/modus-toolbar.tsx           |  5 +-
 stencil-workspace/src/index.html              | 10 +--
 9 files changed, 86 insertions(+), 49 deletions(-)

diff --git a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
index 0a7e8e2ae..3fba5a14b 100644
--- a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
+++ b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
@@ -90,14 +90,14 @@ export declare interface ModusAlert extends Components.ModusAlert {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'clearable', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value']
+  inputs: ['ariaLabel', 'clearable', 'disableCloseOnSelect', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value']
 })
 @Component({
   selector: 'modus-autocomplete',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'clearable', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value'],
+  inputs: ['ariaLabel', 'clearable', 'disableCloseOnSelect', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value'],
 })
 export class ModusAutocomplete {
   protected el: HTMLElement;
@@ -1553,14 +1553,14 @@ export declare interface ModusToolbar extends Components.ModusToolbar {}
 
 
 @ProxyCmp({
-  inputs: ['active', 'buttonStyle', 'disabled', 'divader', 'divaderLayout', 'iconSrc', 'textButton', 'tooltip']
+  inputs: ['active', 'buttonStyle', 'disabled', 'divider', 'dividerLayout', 'iconSrc', 'textButton', 'tooltip']
 })
 @Component({
   selector: 'modus-toolbar-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['active', 'buttonStyle', 'disabled', 'divader', 'divaderLayout', 'iconSrc', 'textButton', 'tooltip'],
+  inputs: ['active', 'buttonStyle', 'disabled', 'divider', 'dividerLayout', 'iconSrc', 'textButton', 'tooltip'],
 })
 export class ModusToolbarButton {
   protected el: HTMLElement;
diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
index 1ef98f388..87cb0b2bc 100644
--- a/stencil-workspace/src/components.d.ts
+++ b/stencil-workspace/src/components.d.ts
@@ -1429,8 +1429,8 @@ export namespace Components {
         "active": boolean;
         "buttonStyle": 'combined' | 'split';
         "disabled": boolean;
-        "divader": boolean;
-        "divaderLayout": 'horizontal' | 'vertical';
+        "divider": boolean;
+        "dividerLayout": 'horizontal' | 'vertical';
         "iconSrc": string;
         "textButton": string;
         "tooltip": ModusToolbarTooltip;
@@ -3661,8 +3661,8 @@ declare namespace LocalJSX {
         "active"?: boolean;
         "buttonStyle"?: 'combined' | 'split';
         "disabled"?: boolean;
-        "divader"?: boolean;
-        "divaderLayout"?: 'horizontal' | 'vertical';
+        "divider"?: boolean;
+        "dividerLayout"?: 'horizontal' | 'vertical';
         "iconSrc"?: string;
         "onButtonClick"?: (event: ModusToolbarButtonCustomEvent<any>) => void;
         "textButton"?: string;
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
index e1abda357..aa937e93a 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -1,10 +1,8 @@
 div {
   background-color: $col_gray_0;
-  border-left: $rem-4px solid $col_gray_light;
-  border-top: $rem-4px solid $col_gray_light;
 
   &.layout-horizontal {
-    border-bottom: $rem-4px solid $col_gray_light;
+    border-left: $rem-4px solid $col_gray_light;
     border-right: 0;
     height: $rem-24px;
     width: $rem-1px;
@@ -12,7 +10,7 @@ div {
 
   &.layout-vertical {
     border-bottom: 0;
-    border-right: $rem-4px solid $col_gray_light;
+    border-top: $rem-4px solid $col_gray_light;
     height: $rem-1px;
     width: $rem-24px;
   }
@@ -25,10 +23,11 @@ button {
   display: inline-flex;
   font-family: $primary-font;
   font-weight: $btn-font-weight;
-  height: $rem-32px;
+  height: $rem-24px;
   justify-content: center;
-  min-width: $rem-32px;
-  padding: 0;
+  min-width: $rem-24px;
+  padding: 0 $rem-4px 0 $rem-4px;
+  border: 0;
   position: relative;
   user-select: none;
   vertical-align: middle;
@@ -36,9 +35,10 @@ button {
   width: auto;
 
   &.style-margin {
-    border: $rem-4px solid $col_gray_light;
     border-radius: $rem-4px;
     box-shadow: $box-shadow-lg;
+    height: $rem-32px;
+    min-width: $rem-32px;
 
     &.layout-horizontal {
       margin-left: $rem-4px;
@@ -50,31 +50,55 @@ button {
   }
 
   &.style-marginless {
-    border-left: $rem-4px solid $col_gray_light;
-    border-top: $rem-4px solid $col_gray_light;
+    border-radius: $rem-4px;
 
     &.layout-horizontal {
-      border-bottom: $rem-4px solid $col_gray_light;
-      border-right: 0;
+      margin-left: $rem-4px;
     }
 
     &.layout-vertical {
-      border-bottom: 0;
-      border-right: $rem-4px solid $col_gray_light;
+      margin-top: $rem-4px;
     }
-  }
 
-  &:hover {
-    background-color: $col_gray_0;
-    cursor: pointer;
-  }
+    &:hover {
+      background-color: $col_gray_0;
+      cursor: pointer;
+    }
 
-  &:active {
-    background-color: $col_gray_1;
+    &:active {
+      background-color: $col_gray_1;
+    }
+
+    &.active-button {
+      background-color: $col_gray_1;
+    }
   }
 
-  &.active-button {
-    background-color: $col_gray_1;
+  div {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $col_gray_light;
+    border-radius: $rem-2px;
+
+    &.style-margin {
+      height: $rem-24px;
+      min-width: $rem-24px;
+    }
+
+    &:hover {
+      background-color: $col_gray_0;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: $col_gray_1;
+    }
+
+    &.active-button {
+      background-color: $col_gray_1;
+    }
   }
 
   &:disabled {
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
index db2e7dbb9..06ace0f5a 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -10,11 +10,11 @@ import { ModusToolbarTooltip } from '../modus-toolbar.models';
 export class ModusToolbarButton {
   @Prop() active: boolean;
   @Prop() disabled: boolean;
-  @Prop() divader: boolean;
+  @Prop() divider: boolean;
   @Prop() iconSrc: string;
   @Prop() textButton: string;
   @Prop() tooltip: ModusToolbarTooltip;
-  @Prop() divaderLayout: 'horizontal' | 'vertical';
+  @Prop() dividerLayout: 'horizontal' | 'vertical';
   @Prop() buttonStyle: 'combined' | 'split';
   @Event() buttonClick: EventEmitter;
 
@@ -29,20 +29,28 @@ export class ModusToolbarButton {
   ]);
 
   render(): unknown {
-    const layout = `${this.classByLayout.get(this.divaderLayout)}`;
-    const buttonClass = `${this.classByStyle.get(this.buttonStyle)} ${this.classByLayout.get(this.divaderLayout)} ${
+    const layout = `${this.classByLayout.get(this.dividerLayout)}`;
+    const buttonClass = `${this.classByStyle.get(this.buttonStyle)} ${this.classByLayout.get(this.dividerLayout)} ${
       this.active ? 'active-button' : ''
     }`;
+    const iconClass = `${this.classByStyle.get(this.buttonStyle)} ${this.active ? 'active-button' : ''}`;
 
     return (
       <Fragment>
-        {this.divader && this.buttonStyle === 'combined' && <div class={layout} />}
+        {this.divider && this.buttonStyle === 'combined' && <div class={layout} />}
         <modus-tooltip text={this.tooltip?.text} position={this.tooltip?.position}>
           <button
             class={buttonClass}
             disabled={this.disabled}
             onClick={() => (!this.disabled ? this.buttonClick.emit() : null)}>
-            {this.iconSrc && <img src={this.iconSrc} />}
+            {this.iconSrc &&
+              (this.buttonStyle === 'split' ? (
+                <div class={iconClass}>
+                  <img src={this.iconSrc} />
+                </div>
+              ) : (
+                <img src={this.iconSrc} />
+              ))}
             {this.textButton}
           </button>
         </modus-tooltip>
diff --git a/stencil-workspace/src/components/modus-toolbar/button/readme.md b/stencil-workspace/src/components/modus-toolbar/button/readme.md
index d1861c876..6da19018f 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/readme.md
+++ b/stencil-workspace/src/components/modus-toolbar/button/readme.md
@@ -12,8 +12,8 @@
 | `active`        | `active`         |             | `boolean`                    | `undefined` |
 | `buttonStyle`   | `button-style`   |             | `"combined" \| "split"`      | `undefined` |
 | `disabled`      | `disabled`       |             | `boolean`                    | `undefined` |
-| `divader`       | `divader`        |             | `boolean`                    | `undefined` |
-| `divaderLayout` | `divader-layout` |             | `"horizontal" \| "vertical"` | `undefined` |
+| `divider`       | `divider`        |             | `boolean`                    | `undefined` |
+| `dividerLayout` | `divider-layout` |             | `"horizontal" \| "vertical"` | `undefined` |
 | `iconSrc`       | `icon-src`       |             | `string`                     | `undefined` |
 | `textButton`    | `text-button`    |             | `string`                     | `undefined` |
 | `tooltip`       | --               |             | `ModusToolbarTooltip`        | `undefined` |
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
index 73a7b4057..8ac9bca0b 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.models.ts
@@ -5,7 +5,7 @@ export interface ModusToolbarButton {
   textButton?: string;
   disabled?: boolean;
   active?: boolean;
-  divader?: boolean;
+  divider?: boolean;
 }
 
 export interface ModusToolbarTooltip {
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
index 49c0fe4d1..e242fde90 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -18,11 +18,15 @@ div {
     box-shadow: $box-shadow-lg;
 
     &.layout-horizontal {
-      border-right: $rem-4px solid $col_gray_light;
+      padding: $rem-4px 0 $rem-4px 0;
+      border-left: $rem-4px solid $col_gray_light;
+      border-right: $rem-8px solid $col_gray_light;
     }
 
     &.layout-vertical {
-      border-bottom: $rem-4px solid $col_gray_light;
+      padding: 0 $rem-4px 0 $rem-4px;
+      border-top: $rem-4px solid $col_gray_light;
+      border-bottom: $rem-8px solid $col_gray_light;
     }
   }
 
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
index 686e881bf..71b42b128 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { Component, Prop, h } from '@stencil/core';
 import { ModusToolbarButton } from './modus-toolbar.models';
 
@@ -36,11 +37,11 @@ export class ModusToolbar {
             class={className}
             active={button.active}
             disabled={button.disabled}
-            divader={button.divader}
+            divider={button.divider}
             iconSrc={button.iconSrc}
             textButton={button.textButton}
             tooltip={button.tooltip}
-            divaderLayout={this.layout}
+            dividerLayout={this.layout}
             buttonStyle={this.toolbarStyle}
             onButtonClick={button.onClick}></modus-toolbar-button>
         ))}
diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html
index 0c746c88f..02e2effa3 100644
--- a/stencil-workspace/src/index.html
+++ b/stencil-workspace/src/index.html
@@ -23,14 +23,14 @@
     <script>
       const modusToolbar = document.querySelector('modus-toolbar');
       const buttons1 = [
-        {  textButton: 'test button'},
-        {  iconSrc: 'icon 2', divader: true},
+        // {  textButton: 'test'},
+        {  iconSrc: 'icon 2', divider: false},
         {  iconSrc: 'icon 1', disabled: true},
-        {  iconSrc: 'icon 2', divader: true},
-        {  iconSrc: 'icon 1', divader: true},
+        {  iconSrc: 'icon 2', divider: true},
+        {  iconSrc: 'icon 1', divider: true},
         {  iconSrc: 'icon 2', active: true},
         ];
-      const style = "split"
+      const style = "combined"
       const layout = 'horizontal'
       modusToolbar.buttons = buttons1;
       modusToolbar.toolbarStyle = style;

From 1567d88def4b0485eb218070aa8be1914ee6946b Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Wed, 17 Jan 2024 15:58:59 +0200
Subject: [PATCH 08/10] Added IconMap component and variables for the colours

---
 .../button/modus-toolbar-button.scss          | 24 ++++++++++---------
 .../button/modus-toolbar-button.tsx           |  5 ++--
 .../modus-toolbar/modus-toolbar.scss          | 12 ++++++----
 .../modus-toolbar/modus-toolbar.vars.scss     |  4 ++++
 stencil-workspace/src/global/themes.scss      |  6 +++++
 stencil-workspace/src/index.html              | 20 ----------------
 6 files changed, 33 insertions(+), 38 deletions(-)
 create mode 100644 stencil-workspace/src/components/modus-toolbar/modus-toolbar.vars.scss

diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
index aa937e93a..bd931661c 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -1,8 +1,10 @@
+@import '../modus-toolbar.vars.scss';
+
 div {
-  background-color: $col_gray_0;
+  background-color: $modus-toolbar-divider-bg;
 
   &.layout-horizontal {
-    border-left: $rem-4px solid $col_gray_light;
+    border-left: $rem-4px solid $modus-toolbar-bg;
     border-right: 0;
     height: $rem-24px;
     width: $rem-1px;
@@ -10,7 +12,7 @@ div {
 
   &.layout-vertical {
     border-bottom: 0;
-    border-top: $rem-4px solid $col_gray_light;
+    border-top: $rem-4px solid $modus-toolbar-bg;
     height: $rem-1px;
     width: $rem-24px;
   }
@@ -18,7 +20,7 @@ div {
 
 button {
   align-items: center;
-  background-color: $col_gray_light;
+  background-color: $modus-toolbar-bg;
   cursor: default;
   display: inline-flex;
   font-family: $primary-font;
@@ -61,16 +63,16 @@ button {
     }
 
     &:hover {
-      background-color: $col_gray_0;
+      background-color: $modus-toolbar-button-hover-bg;
       cursor: pointer;
     }
 
     &:active {
-      background-color: $col_gray_1;
+      background-color: $modus-toolbar-button-active-bg;
     }
 
     &.active-button {
-      background-color: $col_gray_1;
+      background-color: $modus-toolbar-button-active-bg;
     }
   }
 
@@ -79,7 +81,7 @@ button {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $col_gray_light;
+    background-color: $modus-toolbar-bg;
     border-radius: $rem-2px;
 
     &.style-margin {
@@ -88,16 +90,16 @@ button {
     }
 
     &:hover {
-      background-color: $col_gray_0;
+      background-color: $modus-toolbar-button-hover-bg;
       cursor: pointer;
     }
 
     &:active {
-      background-color: $col_gray_1;
+      background-color: $modus-toolbar-button-active-bg;
     }
 
     &.active-button {
-      background-color: $col_gray_1;
+      background-color: $modus-toolbar-button-active-bg;
     }
   }
 
diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
index 06ace0f5a..88137362b 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line
 import { Component, Event, EventEmitter, Fragment, Prop, h } from '@stencil/core';
+import { IconMap } from '../../icons/IconMap';
 import { ModusToolbarTooltip } from '../modus-toolbar.models';
 
 @Component({
@@ -46,10 +47,10 @@ export class ModusToolbarButton {
             {this.iconSrc &&
               (this.buttonStyle === 'split' ? (
                 <div class={iconClass}>
-                  <img src={this.iconSrc} />
+                  <IconMap icon={this.iconSrc} />
                 </div>
               ) : (
-                <img src={this.iconSrc} />
+                <IconMap icon={this.iconSrc} />
               ))}
             {this.textButton}
           </button>
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
index e242fde90..af7a4edf2 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -1,3 +1,5 @@
+@import './modus-toolbar.vars.scss';
+
 div {
   align-items: center;
   border-radius: $rem-4px;
@@ -14,19 +16,19 @@ div {
   }
 
   &.style-combined {
-    background-color: $col_gray_light;
+    background-color: $modus-toolbar-bg;
     box-shadow: $box-shadow-lg;
 
     &.layout-horizontal {
       padding: $rem-4px 0 $rem-4px 0;
-      border-left: $rem-4px solid $col_gray_light;
-      border-right: $rem-8px solid $col_gray_light;
+      border-left: $rem-4px solid $modus-toolbar-bg;
+      border-right: $rem-8px solid $modus-toolbar-bg;
     }
 
     &.layout-vertical {
       padding: 0 $rem-4px 0 $rem-4px;
-      border-top: $rem-4px solid $col_gray_light;
-      border-bottom: $rem-8px solid $col_gray_light;
+      border-top: $rem-4px solid $modus-toolbar-bg;
+      border-bottom: $rem-8px solid $modus-toolbar-bg;
     }
   }
 
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.vars.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.vars.scss
new file mode 100644
index 000000000..824dfd59e
--- /dev/null
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.vars.scss
@@ -0,0 +1,4 @@
+$modus-toolbar-bg: var(--modus-toolbar-bg, #fff) !default;
+$modus-toolbar-button-hover-bg: var(--modus-toolbar-button-hover-bg, #e0e1e9) !default;
+$modus-toolbar-button-active-bg: var(--modus-toolbar-button-active-bg, #cbcdd6) !default;
+$modus-toolbar-divider-bg: var(--modus-toolbar-divider-bg, #e0e1e9) !default;
diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss
index e0943a4aa..8567b0ad5 100644
--- a/stencil-workspace/src/global/themes.scss
+++ b/stencil-workspace/src/global/themes.scss
@@ -765,6 +765,12 @@
 
   // Radio Button
   --modus-radio-btn-focus-color: #0a7ebc;
+
+  // Toolbar
+  --modus-toolbar-bg: var(--modus-white);
+  --modus-toolbar-button-hover-bg: var(--modus-gray-0);
+  --modus-toolbar-button-active-bg: var(--modus-gray-1);
+  --modus-toolbar-divider-bg: var(--modus-gray-0);
 }
 
 // Mixins
diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html
index 02e2effa3..6cedf5201 100644
--- a/stencil-workspace/src/index.html
+++ b/stencil-workspace/src/index.html
@@ -17,25 +17,5 @@
 
   <body data-mwc-theme="light">
     <!-- Test components -->
-    <modus-toolbar></modus-toolbar>
-    
-     
-    <script>
-      const modusToolbar = document.querySelector('modus-toolbar');
-      const buttons1 = [
-        // {  textButton: 'test'},
-        {  iconSrc: 'icon 2', divider: false},
-        {  iconSrc: 'icon 1', disabled: true},
-        {  iconSrc: 'icon 2', divider: true},
-        {  iconSrc: 'icon 1', divider: true},
-        {  iconSrc: 'icon 2', active: true},
-        ];
-      const style = "combined"
-      const layout = 'horizontal'
-      modusToolbar.buttons = buttons1;
-      modusToolbar.toolbarStyle = style;
-      modusToolbar.layout = layout;
-    </script>
-
   </body>
 </html>

From 339767b7fc82e596ee6eefb273755ee93273cf9e Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Wed, 17 Jan 2024 16:52:06 +0200
Subject: [PATCH 09/10] Storybook changes

---
 .../modus-toolbar-storybook-docs.mdx          | 120 +++++++++---------
 .../modus-toolbar/modus-toolbar.stories.tsx   |  18 +--
 2 files changed, 66 insertions(+), 72 deletions(-)

diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
index 2a633aa69..f37b9dfee 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
@@ -25,47 +25,49 @@ A new TypeScript typing has been provided named Button defined as:
 <Story id="components-toolbar--default" />
 
 ```html
-<modus-toolbar></modus-toolbar>
+<modus-toolbar layout="horizontal" toolbarStyle="combined"></modus-toolbar>
 
 <script>
-  const element = document.querySelector('modus-toolbar');
-
-  const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
-
-  const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
-
-  const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
-
-  element.buttons = [
-    { tooltip: {
-      text: 'Text button',
-      position: 'bottom',
+  const modusToolbar = document.querySelector('modus-toolbar');
+
+  modusToolbar.buttons = [
+    { 
+      tooltip: 
+      {
+        text: 'Text button',
+        position: 'bottom',
       },
-    textButton: 'Text button',
+      textButton: 'Text button',
     },
-    { tooltip: {
-      text: 'Add',
-      position: 'bottom',
+    { 
+      tooltip: 
+      {
+        text: 'Add',
+        position: 'bottom',
       },
-    iconSrc: addIcon, 
-    divader: true,
+      iconSrc: 'add', 
+      divider: true,
     },
-    {  tooltip: {
-      text: 'Edit',
-      position: 'bottom',
+    {  
+      tooltip: 
+      {
+        text: 'Edit',
+        position: 'bottom',
       },
-    iconSrc: addEdit, 
-    disabled: true,
+      iconSrc: 'edit', 
+      disabled: true,
     },
-    {  tooltip: {
-      text: 'Refresh',
-      position: 'bottom',
+    {  
+      tooltip: 
+      {
+        text: 'Refresh',
+        position: 'bottom',
       },
-    iconSrc: addRefresh, 
-    active: true, 
-    divader: true,
-    }
-  ]
+      iconSrc: 'refresh', 
+      active: true, 
+      divider: true,
+    },
+  ];
 </script>
 ```
 
@@ -74,41 +76,39 @@ A new TypeScript typing has been provided named Button defined as:
 <Story id="components-toolbar--vertical-split-toolbar" />
 
 ```html
-<modus-toolbar
-  layout="vertical"
-  toolbarStyle="split"></modus-toolbar>
+<modus-toolbar layout="vertical" toolbarStyle="split"></modus-toolbar>
 
 <script>
-  const element = document.querySelector('modus-toolbar');
-
-  const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
-
-  const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
-
-  const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
-
-  element.buttons = [
-    { tooltip: {
-      text: 'Add',
-      position: 'bottom',
+  const modusToolbar = document.querySelector('modus-toolbar');
+
+  modusToolbar.buttons = [
+    { 
+      tooltip: 
+      {
+        text: 'Add',
+        position: 'bottom',
       },
-    iconSrc: addIcon, 
+      iconSrc: 'add', 
     },
-    {  tooltip: {
-      text: 'Edit',
-      position: 'bottom',
+    {  
+      tooltip: 
+      {
+        text: 'Edit',
+        position: 'bottom',
       },
-    iconSrc: addEdit, 
-    disabled: true,
+      iconSrc: 'edit', 
+      disabled: true,
     },
-    {  tooltip: {
-      text: 'Refresh',
-      position: 'bottom',
+    {  
+      tooltip: 
+      {
+        text: 'Refresh',
+        position: 'bottom',
       },
-    iconSrc: addRefresh, 
-    active: true, 
-    }
-  ]
+      iconSrc: 'refresh', 
+      active: true, 
+    },
+  ];
 </script>
 ```
 
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
index 664a217d6..d361a2012 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
@@ -51,12 +51,6 @@ export default {
 
 const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar buttons=${buttons} layout=${layout} toolbarStyle=${toolbarStyle}></modus-toolbar>`;
 
-const addIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M19,13H13v6H11V13H5V11h6V5h2v6h6Z' fill='#171c1e' /%3E%3C/g%3E%3C/svg%3E";
-
-const addEdit = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z' /%3E%3C/g%3E%3C/svg%3E";
-
-const addRefresh = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#171c1e' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z";
-
 export const Default = Template.bind({});
 Default.args = {
   buttons: [
@@ -70,19 +64,19 @@ Default.args = {
         text: 'Add',
         position: 'bottom',
         },
-    iconSrc: `${addIcon}`, divader: true,
+    iconSrc: 'add', divider: true,
     },
     {  tooltip: {
         text: 'Edit',
         position: 'bottom',
         },
-    iconSrc: `${addEdit}`, disabled: true,
+    iconSrc: 'edit', disabled: true,
     },
     {  tooltip: {
         text: 'Refresh',
         position: 'bottom',
         },
-    iconSrc: `${addRefresh}`, active: true, divader: true,
+    iconSrc: 'refresh', active: true, divider: true,
     }
   ],
   layout: 'horizontal',
@@ -96,19 +90,19 @@ Default.args = {
           text: 'Add',
           position: 'bottom',
           },
-      iconSrc: `${addIcon}`,
+      iconSrc: 'add',
       },
       {  tooltip: {
           text: 'Edit',
           position: 'bottom',
           },
-      iconSrc: `${addEdit}`, disabled: true,
+      iconSrc: 'edit', disabled: true,
       },
       {  tooltip: {
           text: 'Refresh',
           position: 'bottom',
           },
-      iconSrc: `${addRefresh}`, active: true,
+      iconSrc: 'refresh', active: true,
       }
     ],
     layout: 'vertical',

From a6007573dac0a19f59304516e8dcd0c68c68095e Mon Sep 17 00:00:00 2001
From: Sorina-Andreea Ocheana <sorinaandreea_ocheana@trimble.com>
Date: Thu, 18 Jan 2024 11:42:32 +0200
Subject: [PATCH 10/10] Fixed storybook and added colours for dark mode

---
 .../modus-toolbar/button/modus-toolbar-button.scss     | 10 +++++-----
 .../src/components/modus-toolbar/modus-toolbar.scss    |  8 ++++----
 stencil-workspace/src/global/themes.scss               |  4 ++++
 .../modus-toolbar/modus-toolbar-storybook-docs.mdx     |  8 ++++----
 .../components/modus-toolbar/modus-toolbar.stories.tsx | 10 +++++-----
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
index bd931661c..6d3b15b9a 100644
--- a/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
+++ b/stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss
@@ -1,4 +1,4 @@
-@import '../modus-toolbar.vars.scss';
+@import '../modus-toolbar.vars';
 
 div {
   background-color: $modus-toolbar-divider-bg;
@@ -21,6 +21,7 @@ div {
 button {
   align-items: center;
   background-color: $modus-toolbar-bg;
+  border: 0;
   cursor: default;
   display: inline-flex;
   font-family: $primary-font;
@@ -29,7 +30,6 @@ button {
   justify-content: center;
   min-width: $rem-24px;
   padding: 0 $rem-4px 0 $rem-4px;
-  border: 0;
   position: relative;
   user-select: none;
   vertical-align: middle;
@@ -77,12 +77,12 @@ button {
   }
 
   div {
-    position: relative;
-    display: flex;
     align-items: center;
-    justify-content: center;
     background-color: $modus-toolbar-bg;
     border-radius: $rem-2px;
+    display: flex;
+    justify-content: center;
+    position: relative;
 
     &.style-margin {
       height: $rem-24px;
diff --git a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
index af7a4edf2..1a2828667 100644
--- a/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
+++ b/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss
@@ -1,4 +1,4 @@
-@import './modus-toolbar.vars.scss';
+@import './modus-toolbar.vars';
 
 div {
   align-items: center;
@@ -20,15 +20,15 @@ div {
     box-shadow: $box-shadow-lg;
 
     &.layout-horizontal {
-      padding: $rem-4px 0 $rem-4px 0;
       border-left: $rem-4px solid $modus-toolbar-bg;
       border-right: $rem-8px solid $modus-toolbar-bg;
+      padding: $rem-4px 0 $rem-4px 0;
     }
 
     &.layout-vertical {
-      padding: 0 $rem-4px 0 $rem-4px;
-      border-top: $rem-4px solid $modus-toolbar-bg;
       border-bottom: $rem-8px solid $modus-toolbar-bg;
+      border-top: $rem-4px solid $modus-toolbar-bg;
+      padding: 0 $rem-4px 0 $rem-4px;
     }
   }
 
diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss
index 8567b0ad5..2c6c1d45c 100644
--- a/stencil-workspace/src/global/themes.scss
+++ b/stencil-workspace/src/global/themes.scss
@@ -771,6 +771,10 @@
   --modus-toolbar-button-hover-bg: var(--modus-gray-0);
   --modus-toolbar-button-active-bg: var(--modus-gray-1);
   --modus-toolbar-divider-bg: var(--modus-gray-0);
+  --modus-toolbar-dark-bg: var(--modus-gray-10);
+  --modus-toolbar-button-dark-hover-bg: var(--modus-gray-4);
+  --modus-toolbar-button-dark-active-bg: var(--modus-gray-6);
+  --modus-toolbar-divider-dark-bg: var(--modus-gray-8);
 }
 
 // Mixins
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
index f37b9dfee..9d2e50be3 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar-storybook-docs.mdx
@@ -16,7 +16,7 @@ A new TypeScript typing has been provided named Button defined as:
   textButton?: string; // optional.
   disabled?: boolean; // optional.
   active?: boolean; // optional.
-  divader?: boolean; // optional.
+  divider?: boolean; // optional.
 }
 ```
 
@@ -86,7 +86,7 @@ A new TypeScript typing has been provided named Button defined as:
       tooltip: 
       {
         text: 'Add',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'add', 
     },
@@ -94,7 +94,7 @@ A new TypeScript typing has been provided named Button defined as:
       tooltip: 
       {
         text: 'Edit',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'edit', 
       disabled: true,
@@ -103,7 +103,7 @@ A new TypeScript typing has been provided named Button defined as:
       tooltip: 
       {
         text: 'Refresh',
-        position: 'bottom',
+        position: 'right',
       },
       iconSrc: 'refresh', 
       active: true, 
diff --git a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
index d361a2012..39ec2f3c3 100644
--- a/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
+++ b/stencil-workspace/storybook/stories/components/modus-toolbar/modus-toolbar.stories.tsx
@@ -49,7 +49,7 @@ export default {
   },
 };
 
-const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar buttons=${buttons} layout=${layout} toolbarStyle=${toolbarStyle}></modus-toolbar>`;
+const Template = ({buttons, layout, toolbarStyle}) => html`<modus-toolbar .buttons=${buttons} .layout=${layout} .toolbarStyle=${toolbarStyle}></modus-toolbar>`;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -84,23 +84,23 @@ Default.args = {
 };
 
 export const VerticalSplitToolbar = Template.bind({});
-Default.args = {
+VerticalSplitToolbar.args = {
     buttons: [
       { tooltip: {
           text: 'Add',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'add',
       },
       {  tooltip: {
           text: 'Edit',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'edit', disabled: true,
       },
       {  tooltip: {
           text: 'Refresh',
-          position: 'bottom',
+          position: 'right',
           },
       iconSrc: 'refresh', active: true,
       }