acinguiux-ds-react-framework 0.0.6 → 0.0.7

package/build/esm/components/Menu/styles/menuItem.styles.js

@@ -1,99 +1,153 @@
-import { css as a } from "styled-components";
-import { menuConsts as i } from "../Menu.consts.js";
-import { indicatorPositionStyle as r, indicatorBottomStyle as c } from "./indicator.styles.js";
-import { MENU_CLASS as o } from "../../../react-base/src/consts.js";
-const b = a`
-  ${({ theme: e, size: t }) => {
-  const n = `${i[t].padding}px`, l = `${i[t].indent}px`;
-  return a`
-      .${o}-item {
+import { css as n } from "styled-components";
+import { States as c, Surfaces as f } from "acinguiux-ds-fabrics";
+import { getFabricStyles as a, getModeIndicatorPosition as b, getMenuItemSelectedStyle as u, getMenuItemDisabledStyle as v } from "../Menu.utils.js";
+import { indicatorPositionStyle as d } from "./indicator.styles.js";
+import { MENU_CLASS as e, Directions as $ } from "../../../react-base/src/consts.js";
+import { consts as S } from "../../../react-base/src/components/Menu/Menu.consts.js";
+import { LayerColor as t } from "../../../react-base/src/theme/theme.js";
+const T = n`
+  ${({ theme: l, size: r, $indicatorPosition: o, $itemContentDirection: i = $.Vertical, mode: s }) => n`
+      .${e}-item {
         position: relative;
         display: flex;
-        justify-content: space-between;
-        align-items: stretch;
-        padding: ${n} ${l};
-        border-radius: 2px;
+        justify-content: ${s === $.Horizontal ? "center" : "space-between"};
+        align-items: ${s === $.Horizontal ? "center" : "stretch"};
+        flex-direction: column;
+        padding: ${S[r].itemPadding[s === $.Horizontal ? $.Horizontal : $.Vertical][i]};
         cursor: pointer;
 
+        & .${e}-label {
+          color: ${a(l, t.TextOnSurfaceSubtle)};
+
+          svg {
+            fill: ${a(l, t.TextOnSurfaceSubtle)};
+          }
+        }
+
+        &.${e}-item-selected:not(.${e}-item-active):not(.${e}-item-disabled) {
+          .${e}-label {
+            color: ${a(l, t.TextOnSurfaceStrong, c.Hover)};
+
+            svg {
+              fill: ${a(l, t.TextOnSurfaceStrong, c.Hover)};
+            }
+          }
+        }
+
+        &.${e}-item-active:not(.${e}-item-disabled) {
+          .${e}-label {
+            color: ${a(l, t.TextOnSurfaceStrong, c.Active)};
+
+            svg {
+              fill: ${a(l, t.TextOnSurfaceStrong, c.Active)};
+            }
+          }
+        }
+
         /* Disabled */
-        &.${o}-item-disabled {
-          &, .${o}-label {
-            color: ${e.text.onSurface.inactive};
+        &.${e}-item-disabled {
+          &, .${e}-label {
+            color: ${a(l, t.TextOnSurfaceSubtle, c.Default, f.Inactive)};
             cursor: not-allowed;
+
+            svg {
+              fill: ${a(l, t.TextOnSurfaceSubtle, c.Default, f.Inactive)};
+            }
           }
         }
 
-        &.${o}-item-active:not(.${o}-item-selected):not(.${o}-item-disabled) {
-          .${o}-label {
-            background-color: ${e.onSurface.surface.hover.background};
+        &.${e}-item-active:not(.${e}-item-selected):not(.${e}-item-disabled) {
+          .${e}-label {
+            background-color: ${a(l, t.BackgroundSurface, c.Hover)};
           }
 
-          &:active .${o}-label {
-            background-color: ${e.onSurface.surface.active.background};
+          &:active .${e}-label {
+            background-color: ${a(l, t.BackgroundSurface, c.Active)};
+
+            &::after {
+              ${s === "horizontal" ? n`
+                ${d[r][b(o, "horizontal")][i].active};
+              ` : n`
+                ${d[r][b(o)][i].active};
+              `}
+            }
           }
 
           /* Span focus */
           &:focus-visible {
-            .${o}-label {
+            .${e}-label {
               background-color: transparent;
             }
           }
 
           /* Anchor focus */
-          .${o}-label:focus-visible {
+          .${e}-label:focus-visible {
             background-color: transparent;
           }
         }
 
-        /* Span focus */
+        /* remove default focus */
         &:focus-visible {
           outline: none;
-
-          .${o}-label {
-            border-radius: 4px;
-            outline: 3px solid ${e.additional.focus.subtle} !important;
-          }
         }
 
-        /* Anchor focus */
-        .${o}-label:focus-visible {
-          border-radius: 4px;
-          outline: 3px solid ${e.additional.focus.subtle} !important;
+        /* set focus visible for label & custom render items */
+        &:focus-visible .${e}-label,
+        .${e}-label:focus-visible {
+          outline: 3px solid ${l.additional.focus.subtle};
         }
       }
 
       /* Vertical and horizontal popup  */
-      .${o}-vertical .${o}-item.${o}-item-selected .${o}-label {
-        background-color: ${e.onSurface.section.default.background};
 
-        &::after {
-          ${r};
+      .${e}-vertical {
+        .${e}-label {
+          ${s === "horizontal" && n`
+            margin: -4px 2px;
+          `}
         }
       }
 
-      /* Inline and vertical top level */
-      &.${o}-inline, &.${o}-vertical {
-        .${o}-item.${o}-item-selected .${o}-label {
-          background-color: ${e.onSurface.section.default.background};
-
+      .${e}-vertical .${e}-item-active.${e}-item:not(.${e}-item-selected) {
+        &:active .${e}-label {
           &::after {
-            ${r};
+            ${d[r][b(o)][i].active};
           }
         }
       }
 
-      /* Horizontal */
-      &.${o}-horizontal .${o}-item.${o}-item-selected .${o}-label {
-        background-color: ${e.onSurface.section.default.background};
+      .${e}-vertical .${e}-item.${e}-item-selected .${e}-label {
+        ${u(l, o, "vertical", i, r)};
+      }
+
+      /* Inline and vertical top level */
 
-        &::after {
-          ${c};
+      /* Disabled */
+      &.${e}-inline, &.${e}-vertical {
+        .${e}-item.${e}-item-selected.${e}-item-disabled .${e}-label {
+        ${v(l, o, "vertical", i, r)};
         }
       }
-    `;
-}}
+
+      &.${e}-inline, &.${e}-vertical {
+        .${e}-item.${e}-item-selected:not(.${e}-item-disabled) .${e}-label {
+          ${u(l, o, "vertical", i, r)};
+        }
+      }
+
+      /* Horizontal */
+
+      /* Disabled */
+      &.${e}-horizontal .${e}-item.${e}-item-selected.${e}-item-disabled .${e}-label {
+        ${v(l, o, "horizontal")};
+      }
+    
+      &.${e}-horizontal .${e}-item.${e}-item-selected:not(.${e}-item-disabled) .${e}-label {
+        ${u(l, o, "horizontal", i, r)};
+      }
+    `}
 `;
 export {
-  b as menuItemStyle
+  T as menuItemStyle
 };
 //# sourceMappingURL=menuItem.styles.js.map

package/build/esm/components/Menu/styles/menuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\r\n\r\nimport { menuConsts } from '../Menu.consts';\r\nimport { StyledMenuProps } from '../Menu.types';\r\nimport { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';\r\n\r\nexport const menuItemStyle = css<StyledMenuProps>`\r\n  ${({ theme, size }) => {\r\n    const verticalPadding = `${menuConsts[size].padding}px`;\r\n    const horizontalPadding = `${menuConsts[size].indent}px`;\r\n\r\n    return css`\r\n      .${MENU_CLASS}-item {\r\n        position: relative;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: stretch;\r\n        padding: ${verticalPadding} ${horizontalPadding};\r\n        border-radius: 2px;\r\n        cursor: pointer;\r\n\r\n        /* Disabled */\r\n        &.${MENU_CLASS}-item-disabled {\r\n          &, .${MENU_CLASS}-label {\r\n            color: ${theme.text.onSurface.inactive};\r\n            cursor: not-allowed;\r\n          }\r\n        }\r\n\r\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\r\n          .${MENU_CLASS}-label {\r\n            background-color: ${theme.onSurface.surface.hover.background};\r\n          }\r\n\r\n          &:active .${MENU_CLASS}-label {\r\n            background-color: ${theme.onSurface.surface.active.background};\r\n          }\r\n\r\n          /* Span focus */\r\n          &:focus-visible {\r\n            .${MENU_CLASS}-label {\r\n              background-color: transparent;\r\n            }\r\n          }\r\n\r\n          /* Anchor focus */\r\n          .${MENU_CLASS}-label:focus-visible {\r\n            background-color: transparent;\r\n          }\r\n        }\r\n\r\n        /* Span focus */\r\n        &:focus-visible {\r\n          outline: none;\r\n\r\n          .${MENU_CLASS}-label {\r\n            border-radius: 4px;\r\n            outline: 3px solid ${theme.additional.focus.subtle} !important;\r\n          }\r\n        }\r\n\r\n        /* Anchor focus */\r\n        .${MENU_CLASS}-label:focus-visible {\r\n          border-radius: 4px;\r\n          outline: 3px solid ${theme.additional.focus.subtle} !important;\r\n        }\r\n      }\r\n\r\n      /* Vertical and horizontal popup  */\r\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\r\n        background-color: ${theme.onSurface.section.default.background};\r\n\r\n        &::after {\r\n          ${indicatorPositionStyle};\r\n        }\r\n      }\r\n\r\n      /* Inline and vertical top level */\r\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\r\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\r\n          background-color: ${theme.onSurface.section.default.background};\r\n\r\n          &::after {\r\n            ${indicatorPositionStyle};\r\n          }\r\n        }\r\n      }\r\n\r\n      /* Horizontal */\r\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\r\n        background-color: ${theme.onSurface.section.default.background};\r\n\r\n        &::after {\r\n          ${indicatorBottomStyle};\r\n        }\r\n      }\r\n    `;\r\n  }}\r\n`;\r\n"],"names":["menuItemStyle","css","theme","size","verticalPadding","menuConsts","horizontalPadding","MENU_CLASS","indicatorPositionStyle","indicatorBottomStyle"],"mappings":";;;;AAOO,MAAMA,IAAgBC;AAAA,IACzB,CAAC,EAAE,OAAAC,GAAO,MAAAC,QAAW;AACrB,QAAMC,IAAkB,GAAGC,EAAWF,CAAI,EAAE,OAAO,MAC7CG,IAAoB,GAAGD,EAAWF,CAAI,EAAE,MAAM;AAE7C,SAAAF;AAAA,SACFM,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKAH,CAAe,IAAIE,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,YAK3CC,CAAU;AAAA,gBACNA,CAAU;AAAA,qBACLL,EAAM,KAAK,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKtCK,CAAU,qBAAqBA,CAAU,wBAAwBA,CAAU;AAAA,aAC1EA,CAAU;AAAA,gCACSL,EAAM,UAAU,QAAQ,MAAM,UAAU;AAAA;AAAA;AAAA,sBAGlDK,CAAU;AAAA,gCACAL,EAAM,UAAU,QAAQ,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAK1DK,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMZA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASVA,CAAU;AAAA;AAAA,iCAEUL,EAAM,WAAW,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,WAKnDK,CAAU;AAAA;AAAA,+BAEUL,EAAM,WAAW,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnDK,CAAU,cAAcA,CAAU,SAASA,CAAU,mBAAmBA,CAAU;AAAA,4BAC/DL,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA,YAG1DM,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKxBD,CAAU,cAAcA,CAAU;AAAA,WACjCA,CAAU,SAASA,CAAU,mBAAmBA,CAAU;AAAA,8BACvCL,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA,cAG1DM,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM1BD,CAAU,gBAAgBA,CAAU,SAASA,CAAU,mBAAmBA,CAAU;AAAA,4BAClEL,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA,YAG1DO,CAAoB;AAAA;AAAA;AAAA;AAI9B,CAAC;AAAA;"}
+{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MenuConsts, LayerColor, MENU_CLASS, Directions } from 'acinguiux-ds-react-base';\nimport { States, Surfaces } from 'acinguiux-ds-fabrics';\n\nimport { getFabricStyles, getMenuItemSelectedStyle, getModeIndicatorPosition, getMenuItemDisabledStyle } from '../Menu.utils';\nimport { StyledMenuProps } from '../Menu.types';\nimport { indicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, size, $indicatorPosition, $itemContentDirection = Directions.Vertical, mode }) => css`\n      .${MENU_CLASS}-item {\n        position: relative;\n        display: flex;\n        justify-content: ${mode === Directions.Horizontal ? 'center' : 'space-between'};\n        align-items: ${mode === Directions.Horizontal ? 'center' : 'stretch'};\n        flex-direction: column;\n        padding: ${MenuConsts.consts[size].itemPadding[mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical][$itemContentDirection]};\n        cursor: pointer;\n\n        & .${MENU_CLASS}-label {\n          color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle)};\n\n          svg {\n            fill: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle)};\n          }\n        }\n\n        &.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-active):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Hover)};\n\n            svg {\n              fill: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Hover)};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Active)};\n\n            svg {\n              fill: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Active)};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-item-disabled {\n          &, .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default, Surfaces.Inactive)};\n            cursor: not-allowed;\n\n            svg {\n              fill: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default, Surfaces.Inactive)};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Hover)};\n          }\n\n          &:active .${MENU_CLASS}-label {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Active)};\n\n            &::after {\n              ${mode === 'horizontal' ? css`\n                ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition, 'horizontal')][$itemContentDirection].active};\n              `: css`\n                ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition)][$itemContentDirection].active};\n              `}\n            }\n          }\n\n          /* Span focus */\n          &:focus-visible {\n            .${MENU_CLASS}-label {\n              background-color: transparent;\n            }\n          }\n\n          /* Anchor focus */\n          .${MENU_CLASS}-label:focus-visible {\n            background-color: transparent;\n          }\n        }\n\n        /* remove default focus */\n        &:focus-visible {\n          outline: none;\n        }\n\n        /* set focus visible for label & custom render items */\n        &:focus-visible .${MENU_CLASS}-label,\n        .${MENU_CLASS}-label:focus-visible {\n          outline: 3px solid ${theme.additional.focus.subtle};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n\n      .${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-label {\n          ${mode === 'horizontal' && css`\n            margin: -4px 2px;\n          `}\n        }\n      }\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item-active.${MENU_CLASS}-item:not(.${MENU_CLASS}-item-selected) {\n        &:active .${MENU_CLASS}-label {\n          &::after {\n            ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition)][$itemContentDirection].active};\n          }\n        }\n      }\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $itemContentDirection, size)};\n      }\n\n      /* Inline and vertical top level */\n\n      /* Disabled */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'vertical', $itemContentDirection, size)};\n        }\n      }\n\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n          ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $itemContentDirection, size)};\n        }\n      }\n\n      /* Horizontal */\n\n      /* Disabled */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'horizontal')};\n      }\n    \n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'horizontal', $itemContentDirection, size)};\n      }\n    `}\n`;\n"],"names":["menuItemStyle","css","theme","size","$indicatorPosition","$itemContentDirection","Directions","mode","MENU_CLASS","MenuConsts.consts","getFabricStyles","LayerColor","States","Surfaces","indicatorPositionStyle","getModeIndicatorPosition","getMenuItemSelectedStyle","getMenuItemDisabledStyle"],"mappings":"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"}

package/build/esm/components/Menu/styles/menuLabel.styles.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import { StyledMenuProps } from '../Menu.types';
+export declare const TooltipLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").ILabelProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const menuLabelStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
 //# sourceMappingURL=menuLabel.styles.d.ts.map

package/build/esm/components/Menu/styles/menuLabel.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuLabel.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,cAAc,4JAmF1B,CAAC"}
+{"version":3,"file":"menuLabel.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,eAAO,MAAM,YAAY,8NAMxB,CAAC;AAGF,eAAO,MAAM,cAAc,4JA8G1B,CAAC"}

package/build/esm/components/Menu/styles/menuLabel.styles.js

@@ -1,21 +1,27 @@
-import { css as o } from "styled-components";
-import { menuConsts as n } from "../Menu.consts.js";
-import { MENU_CLASS as t } from "../../../react-base/src/consts.js";
-const u = o`
-  ${({ theme: a, size: e, inlineCollapsed: r }) => {
-  const i = `${n[e].iconSize}px`, s = `${n[e].gap}px`, $ = `${n[e].iconContainer.width}px`, c = `${n[e].iconContainer.height}px`, l = `${n[e].padding - 4}px`;
-  return o`
+import g, { css as a } from "styled-components";
+import d from "../../Text/components/Label/Label.js";
+import { MENU_CLASS as t, Directions as i, NAV_BAR_CLASS as b } from "../../../react-base/src/consts.js";
+import * as u from "../../../react-base/src/components/Menu/Menu.consts.js";
+import { consts as n } from "../../../react-base/src/components/Menu/Menu.consts.js";
+const { consts: o } = u, y = g(d)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  max-width: 240px;
+`, v = a`
+  ${({ size: e, inlineCollapsed: s, $itemContentDirection: r = i.Horizontal, mode: c }) => {
+  const l = `${o[e].iconSize}px`, $ = `${o[e].gap}px`, m = `${o[e].iconContainer.width}px`, p = `${o[e].iconContainer.height}px`;
+  return a`
       .${t}-label {
         display: flex;
-        align-items: flex-start;
-        gap: ${s};
-        border-radius: 4px;
-        padding: ${l};
-        margin: -${l};
+        align-items: center;
+        flex-direction: ${r === i.Vertical ? "column" : "row"};
+        gap: ${$};
+        border-radius: ${n[e].borderRadius}px;
+        padding: ${n[e].labelPadding[c === i.Horizontal ? i.Horizontal : i.Vertical][r]};
         transition: background-color 0.3s ease-out;
-        flex-grow: 1;
         min-width: 0;
-        color: ${a.onSurface.surface.default.text.strong};
         text-decoration: none;
 
         .${t}-label-text {
@@ -26,16 +32,16 @@ const u = o`
         }
 
         .${t}-label-icon {
-          min-width: ${$};
-          max-height: ${c};
+          min-width: ${m};
+          max-height: ${p};
           display: flex;
           align-items: center;
           justify-content: center;
 
           > svg {
             display: block;
-            width: ${i};
-            height: ${i};
+            width: ${l};
+            height: ${l};
           }
         }
       }
@@ -46,7 +52,7 @@ const u = o`
 
         .${t}-label-icon {
           margin-left: -2px;
-          min-width: ${i};
+          min-width: ${l};
         }
       }
 
@@ -62,16 +68,47 @@ const u = o`
         }
       }
 
-      ${r && o`
+      ${s && a`
         &.${t}-inline-collapsed {
-          > .${t}-submenu
-            > .${t}-submenu-title
-            > .${t}-submenu-title-content,
-            > .${t}-item {
-            > .${t}-label > .${t}-label-text {
-              opacity: 0;
-              text-overflow: clip;
-              white-space: nowrap;
+          &:focus-visible {
+            ::before {
+              margin-right: ${n[e].collapsedItemMarginRight};
+            }
+          }
+          .${t}-item {
+            margin-right: ${n[e].collapsedItemMarginRight};
+          }
+
+          .${t}-submenu {
+            .${t}-submenu-title {
+              margin-right: ${n[e].collapsedItemMarginRight};
+              .${t}-submenu-title-content {
+                .${t}-item {
+                  .${t}-label .${t}-label-text {
+                    opacity: 0;
+                    text-overflow: clip;
+                    white-space: nowrap;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .${b} > div > &.${t}-inline-collapsed {
+          &:focus-visible {
+            ::before {
+              margin-right: 0;
+            }
+          }
+
+          .${t}-item {
+            margin-right: 0;
+          }
+
+          .${t}-submenu {
+            .${t}-submenu-title {
+              margin-right: 0;
             }
           }
         }
@@ -80,6 +117,7 @@ const u = o`
 }}
 `;
 export {
-  u as menuLabelStyle
+  y as TooltipLabel,
+  v as menuLabelStyle
 };
 //# sourceMappingURL=menuLabel.styles.js.map

package/build/esm/components/Menu/styles/menuLabel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuLabel.styles.js","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\r\n\r\nimport { menuConsts } from '../Menu.consts';\r\nimport { StyledMenuProps } from '../Menu.types';\r\n\r\nexport const menuLabelStyle = css<StyledMenuProps>`\r\n  ${({ theme, size, inlineCollapsed }) => {\r\n    const iconSize = `${menuConsts[size].iconSize}px`;\r\n    const gap = `${menuConsts[size].gap}px`;\r\n    const iconContainerWidth = `${menuConsts[size].iconContainer.width}px`;\r\n    const iconContainerHeight = `${menuConsts[size].iconContainer.height}px`;\r\n    const padding = `${menuConsts[size].padding - 4}px`;\r\n\r\n    return css`\r\n      .${MENU_CLASS}-label {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: ${gap};\r\n        border-radius: 4px;\r\n        padding: ${padding};\r\n        margin: -${padding};\r\n        transition: background-color 0.3s ease-out;\r\n        flex-grow: 1;\r\n        min-width: 0;\r\n        color: ${theme.onSurface.surface.default.text.strong};\r\n        text-decoration: none;\r\n\r\n        .${MENU_CLASS}-label-text {\r\n          transition: opacity 0.3s ease-out;\r\n          white-space: nowrap;\r\n          text-overflow: ellipsis;\r\n          overflow: hidden;\r\n        }\r\n\r\n        .${MENU_CLASS}-label-icon {\r\n          min-width: ${iconContainerWidth};\r\n          max-height: ${iconContainerHeight};\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n\r\n          > svg {\r\n            display: block;\r\n            width: ${iconSize};\r\n            height: ${iconSize};\r\n          }\r\n        }\r\n      }\r\n\r\n      /* Horizontal */\r\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-label {\r\n        align-items: center;\r\n\r\n        .${MENU_CLASS}-label-icon {\r\n          margin-left: -2px;\r\n          min-width: ${iconSize};\r\n        }\r\n      }\r\n\r\n      /* Top level */\r\n      &.${MENU_CLASS} {\r\n        > .${MENU_CLASS}-submenu\r\n          > .${MENU_CLASS}-submenu-title\r\n          > .${MENU_CLASS}-submenu-title-content,\r\n          > .${MENU_CLASS}-item {\r\n          > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {\r\n            white-space: nowrap;\r\n          }\r\n        }\r\n      }\r\n\r\n      ${inlineCollapsed &&\r\n      css`\r\n        &.${MENU_CLASS}-inline-collapsed {\r\n          > .${MENU_CLASS}-submenu\r\n            > .${MENU_CLASS}-submenu-title\r\n            > .${MENU_CLASS}-submenu-title-content,\r\n            > .${MENU_CLASS}-item {\r\n            > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {\r\n              opacity: 0;\r\n              text-overflow: clip;\r\n              white-space: nowrap;\r\n            }\r\n          }\r\n        }\r\n      `}\r\n    `;\r\n  }}\r\n`;\r\n"],"names":["menuLabelStyle","css","theme","size","inlineCollapsed","iconSize","menuConsts","gap","iconContainerWidth","iconContainerHeight","padding","MENU_CLASS"],"mappings":";;;AAMO,MAAMA,IAAiBC;AAAA,IAC1B,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,iBAAAC,QAAsB;AACtC,QAAMC,IAAW,GAAGC,EAAWH,CAAI,EAAE,QAAQ,MACvCI,IAAM,GAAGD,EAAWH,CAAI,EAAE,GAAG,MAC7BK,IAAqB,GAAGF,EAAWH,CAAI,EAAE,cAAc,KAAK,MAC5DM,IAAsB,GAAGH,EAAWH,CAAI,EAAE,cAAc,MAAM,MAC9DO,IAAU,GAAGJ,EAAWH,CAAI,EAAE,UAAU,CAAC;AAExC,SAAAF;AAAA,SACFU,CAAU;AAAA;AAAA;AAAA,eAGJJ,CAAG;AAAA;AAAA,mBAECG,CAAO;AAAA,mBACPA,CAAO;AAAA;AAAA;AAAA;AAAA,iBAITR,EAAM,UAAU,QAAQ,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,WAGjDS,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOVA,CAAU;AAAA,uBACEH,CAAkB;AAAA,wBACjBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOtBJ,CAAQ;AAAA,sBACPA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpBM,CAAU,gBAAgBA,CAAU;AAAA;AAAA;AAAA,WAGnCA,CAAU;AAAA;AAAA,uBAEEN,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAKrBM,CAAU;AAAA,aACPA,CAAU;AAAA,eACRA,CAAU;AAAA,eACVA,CAAU;AAAA,eACVA,CAAU;AAAA,eACVA,CAAU,aAAaA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCP,KACFH;AAAA,YACMU,CAAU;AAAA,eACPA,CAAU;AAAA,iBACRA,CAAU;AAAA,iBACVA,CAAU;AAAA,iBACVA,CAAU;AAAA,iBACVA,CAAU,aAAaA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAO3C;AAAA;AAEL,CAAC;AAAA;"}
+{"version":3,"file":"menuLabel.styles.js","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { MenuConsts, MENU_CLASS, Directions, NAV_BAR_CLASS } from 'acinguiux-ds-react-base';\n\nimport { StyledMenuProps } from '../Menu.types';\nimport Label from '../../Text/components/Label/Label';\n\nconst { consts } = MenuConsts;\n\nexport const TooltipLabel = styled(Label)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  max-width: 240px;\n`;\n\n\nexport const menuLabelStyle = css<StyledMenuProps>`\n  ${({ size, inlineCollapsed, $itemContentDirection = Directions.Horizontal, mode }) => {\n    const iconSize = `${consts[size].iconSize}px`;\n    const gap = `${consts[size].gap}px`;\n    const iconContainerWidth = `${consts[size].iconContainer.width}px`;\n    const iconContainerHeight = `${consts[size].iconContainer.height}px`;\n\n    return css`\n      .${MENU_CLASS}-label {\n        display: flex;\n        align-items: center;\n        flex-direction: ${$itemContentDirection === Directions.Vertical ? 'column' : 'row'};\n        gap: ${gap};\n        border-radius: ${MenuConsts.consts[size].borderRadius}px;\n        padding: ${MenuConsts.consts[size].labelPadding[mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical][$itemContentDirection]};\n        transition: background-color 0.3s ease-out;\n        min-width: 0;\n        text-decoration: none;\n\n        .${MENU_CLASS}-label-text {\n          transition: opacity 0.3s ease-out;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .${MENU_CLASS}-label-icon {\n          min-width: ${iconContainerWidth};\n          max-height: ${iconContainerHeight};\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          > svg {\n            display: block;\n            width: ${iconSize};\n            height: ${iconSize};\n          }\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-label {\n        align-items: center;\n\n        .${MENU_CLASS}-label-icon {\n          margin-left: -2px;\n          min-width: ${iconSize};\n        }\n      }\n\n      /* Top level */\n      &.${MENU_CLASS} {\n        > .${MENU_CLASS}-submenu\n          > .${MENU_CLASS}-submenu-title\n          > .${MENU_CLASS}-submenu-title-content,\n          > .${MENU_CLASS}-item {\n          > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      ${inlineCollapsed && css`\n        &.${MENU_CLASS}-inline-collapsed {\n          &:focus-visible {\n            ::before {\n              margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n            }\n          }\n          .${MENU_CLASS}-item {\n            margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n          }\n\n          .${MENU_CLASS}-submenu {\n            .${MENU_CLASS}-submenu-title {\n              margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n              .${MENU_CLASS}-submenu-title-content {\n                .${MENU_CLASS}-item {\n                  .${MENU_CLASS}-label .${MENU_CLASS}-label-text {\n                    opacity: 0;\n                    text-overflow: clip;\n                    white-space: nowrap;\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .${NAV_BAR_CLASS} > div > &.${MENU_CLASS}-inline-collapsed {\n          &:focus-visible {\n            ::before {\n              margin-right: 0;\n            }\n          }\n\n          .${MENU_CLASS}-item {\n            margin-right: 0;\n          }\n\n          .${MENU_CLASS}-submenu {\n            .${MENU_CLASS}-submenu-title {\n              margin-right: 0;\n            }\n          }\n        }\n      `}\n    `;\n  }}\n`;\n"],"names":["consts","MenuConsts","TooltipLabel","styled","Label","menuLabelStyle","css","size","inlineCollapsed","$itemContentDirection","Directions","mode","iconSize","gap","iconContainerWidth","iconContainerHeight","MENU_CLASS","MenuConsts.consts","NAV_BAR_CLASS"],"mappings":";;;;;AAMA,MAAM,EAAE,QAAAA,EAAW,IAAAC,GAENC,IAAeC,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS3BC,IAAiBC;AAAA,IAC1B,CAAC,EAAE,MAAAC,GAAM,iBAAAC,GAAiB,uBAAAC,IAAwBC,EAAW,YAAY,MAAAC,QAAW;AACpF,QAAMC,IAAW,GAAGZ,EAAOO,CAAI,EAAE,QAAQ,MACnCM,IAAM,GAAGb,EAAOO,CAAI,EAAE,GAAG,MACzBO,IAAqB,GAAGd,EAAOO,CAAI,EAAE,cAAc,KAAK,MACxDQ,IAAsB,GAAGf,EAAOO,CAAI,EAAE,cAAc,MAAM;AAEzD,SAAAD;AAAA,SACFU,CAAU;AAAA;AAAA;AAAA,0BAGOP,MAA0BC,EAAW,WAAW,WAAW,KAAK;AAAA,eAC3EG,CAAG;AAAA,yBACOI,EAAkBV,CAAI,EAAE,YAAY;AAAA,mBAC1CU,EAAkBV,CAAI,EAAE,aAAaI,MAASD,EAAW,aAAaA,EAAW,aAAaA,EAAW,QAAQ,EAAED,CAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjJO,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOVA,CAAU;AAAA,uBACEF,CAAkB;AAAA,wBACjBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOtBH,CAAQ;AAAA,sBACPA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpBI,CAAU,gBAAgBA,CAAU;AAAA;AAAA;AAAA,WAGnCA,CAAU;AAAA;AAAA,uBAEEJ,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAKrBI,CAAU;AAAA,aACPA,CAAU;AAAA,eACRA,CAAU;AAAA,eACVA,CAAU;AAAA,eACVA,CAAU;AAAA,eACVA,CAAU,aAAaA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCR,KAAmBF;AAAA,YACfU,CAAU;AAAA;AAAA;AAAA,8BAGQC,EAAkBV,CAAI,EAAE,wBAAwB;AAAA;AAAA;AAAA,aAGjES,CAAU;AAAA,4BACKC,EAAkBV,CAAI,EAAE,wBAAwB;AAAA;AAAA;AAAA,aAG/DS,CAAU;AAAA,eACRA,CAAU;AAAA,8BACKC,EAAkBV,CAAI,EAAE,wBAAwB;AAAA,iBAC7DS,CAAU;AAAA,mBACRA,CAAU;AAAA,qBACRA,CAAU,WAAWA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWzCE,CAAa,cAAcF,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOnCA,CAAU;AAAA;AAAA;AAAA;AAAA,aAIVA,CAAU;AAAA,eACRA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,OAKlB;AAAA;AAEL,CAAC;AAAA;"}

package/build/esm/components/Menu/styles/subMenu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"subMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,YAAY,4JAkNxB,CAAC"}
+{"version":3,"file":"subMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMhD,eAAO,MAAM,YAAY,4JA4VxB,CAAC"}