@nuralyui/menu 0.0.9 → 0.0.15

package/menu.style.js

@@ -1,85 +1,322 @@
 import { css } from 'lit';
 const menuStyle = css `
-  ul {
-    width: var(--hybrid-menu-width);
-    padding: var(--hybrid-menu-padding);
-    border: var(--hybrid-menu-border);
-    font-size: var(--hybrid-menu-font-size);
-    font-family: var(--hybrid-menu-font-family)
-  }
+  /* Root menu container */
   :host {
-    --hybrid-menu-font-size:13px;
-    --hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
-    --hybrid-menu-padding: 2px;
-    --hybrid-menu-width: 45%;
-    --hybrid-menu-border: 1px solid #f4f4f4;
-    --hybrid-menu-link-color: #000000;
-    --hybrid-menu-link-icon-color: #525252;
-    --hybrid-menu-disabled-link-color: #c6c6c6;
-    --hybrid-menu-focus-border: 1px solid #0f62fe;
-    --hybrid-menu-focus-color: #000000;
-    --hybrid-menu-active-color: #000000;
-    --hybrid-menu-active-background-color: #e0e0e0;
-    --hybrid-menu-hover-link-background-color: #f4f4f4;
-    --hybrid-menu-hover-link-color: #000000;
-    --hybrid-menu-selected-link-background-color: #e0e0e0;
-    --hybrid-menu-selected-link-border: 3px solid #0f62fe;
-    --hybrid-menu-selected-color: #000000;
-    --hybrid-menu-link-background-color: transparent;
-    --hybrid-menu-link-padding-y: 8px;
-    --hybrid-menu-link-empty-icon-padding-left: 39px;
-    --hybrid-menu-link-icon-padding-right: 15px;
-    --hybrid-menu-link-icon-padding-left: 10px;
-    --hybrid-menu-link-icon-right-padding-left: 39px;
-    --hybrid-menu-link-icon-only-width: 42px;
-    --hybrid-sub-menu-color: #000000;
-    --hybrid-sub-menu-disabled-color: #c6c6c6;
-    --hybrid-sub-menu-focus-color: #e0e0e0;
-    --hybrid-sub-menu-focus-border: 1px solid #0f62fe;
-    --hybrid-sub-menu-hover-background-color: #f4f4f4;
-    --hybrid-sub-menu-hover-color: #161616;
-    --hybrid-sub-menu-active-background-color: #c6c6c6;
-    --hybrid-sub-menu-active-color: #000000;
-    --hybrid-sub-menu-highlighted-color: #000000;
-    --hybrid-sub-menu-highlighted-background-color: #e2e2e2;
-    --hybrid-sub-menu-text-icon-color: #525252;
-    --hybrid-sub-menu-action-icon-color:#525252;
-    --hybrid-sub-menu-status-icon-color:#525252;
-    --hybrid-sub-menu-toggle-icon-color: #525252;
-    --hybrid-sub-menu-padding-y: 8px;
-    --hybrid-sub-menu-margin-y: 0px;
-    --hybrid-sub-menu-padding-left: 10px;
-    --hybrid-sub-menu-padding-left-text: 5px;
-    --hybrid-sub-menu-empty-icon-padding-left-text: 29px;
-    --hybrid-sub-menu-children-padding-left: 15px;
-  }
-  @media (prefers-color-scheme: dark) {
-    :host {
-      --hybrid-menu-border: 1px solid #ffffff;
-      --hybrid-menu-link-color:#ffffff;
-      --hybrid-menu-focus-border: 1px solid #ffffff;
-      --hybrid-menu-focus-color: #ffffff;
-      --hybrid-menu-hover-link-background-color: #333333;
-      --hybrid-menu-hover-link-color: #ffffff;
-      --hybrid-menu-active-color: #ffffff;
-      --hybrid-menu-active-background-color: #242424;
-      --hybrid-menu-selected-link-border: 3px solid #ffffff;
-      --hybrid-menu-selected-link-background-color: #3a3a3a;
-      --hybrid-menu-selected-color:#ffffff;
-      --hybrid-menu-disabled-link-color: #525252;
-      --hybrid-sub-menu-color: #ffffff;
-      --hybrid-sub-menu-disabled-color: #525252;
-      --hybrid-sub-menu-focus-border: 1px solid #ffffff;
-      --hybrid-sub-menu-focus-color: #525252;
-      --hybrid-sub-menu-hover-background-color: #333333;
-      --hybrid-sub-menu-hover-color: #ffffff;
-      --hybrid-sub-menu-active-background-color: #242424;
-      --hybrid-sub-menu-active-color: #ffffff;
-      --hybrid-sub-menu-highlighted-color: #ffffff;
-      --hybrid-sub-menu-highlighted-background-color: #3a3a3a;
-      --hybrid-sub-menu-text-icon-color: #525252;
-      --hybrid-sub-menu-toggle-icon-color: #525252;
-    }
+    display: block;
+  }
+
+  .menu-root {
+    font-size: var(--nuraly-menu-font-size);
+    font-family: var(--nuraly-menu-font-family);
+    font-weight: var(--nuraly-menu-font-weight);
+    line-height: var(--nuraly-menu-line-height);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Menu Link Styles */
+  .menu-link {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--nuraly-menu-link-padding-vertical) var(--nuraly-menu-link-padding-horizontal);
+    color: var(--nuraly-menu-link-color);
+    background-color: var(--nuraly-menu-link-background-color);
+    border-left: 4px solid transparent;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--nuraly-menu-border-radius);
+    transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
+                color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
+                border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);
+  }
+
+  .menu-link.disabled {
+    color: var(--nuraly-menu-disabled-link-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .menu-link:not(.disabled):not(.selected):hover {
+    background-color: var(--nuraly-menu-hover-link-background-color);
+    color: var(--nuraly-menu-hover-link-color);
+  }
+
+  .menu-link.selected {
+    background-color: var(--nuraly-menu-selected-link-background-color);
+    color: var(--nuraly-menu-selected-color);
+    border-left: var(--nuraly-menu-selected-link-border);
+  }
+
+  .menu-link:not(.disabled):not(.selected):focus {
+    outline: none;
+    border-left: 4px solid transparent;
+    border-top: var(--nuraly-menu-focus-border);
+    border-right: var(--nuraly-menu-focus-border);
+    border-bottom: var(--nuraly-menu-focus-border);
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link.selected:not(.disabled):focus {
+    outline: none;
+    border-left: var(--nuraly-menu-selected-link-border);
+    border-top: var(--nuraly-menu-focus-border);
+    border-right: var(--nuraly-menu-focus-border);
+    border-bottom: var(--nuraly-menu-focus-border);
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  /* Focus-visible for keyboard navigation */
+  .menu-link:not(.disabled):focus-visible {
+    outline: none;
+    border-top: var(--nuraly-menu-focus-border);
+    border-right: var(--nuraly-menu-focus-border);
+    border-bottom: var(--nuraly-menu-focus-border);
+  }
+
+  .menu-link:not(.disabled):not(.selected):focus-visible {
+    border-left: var(--nuraly-menu-focus-border);
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link.selected:not(.disabled):focus-visible {
+    border-left: var(--nuraly-menu-selected-link-border) !important;
+    color: var(--nuraly-menu-focus-color);
+  }
+
+  .menu-link:not(.disabled):not(.selected):active {
+    color: var(--nuraly-menu-active-color);
+    background-color: var(--nuraly-menu-active-background-color);
+  }
+
+  .menu-link.selected:not(.disabled):active {
+    background-color: var(--nuraly-menu-active-background-color);
+    color: var(--nuraly-menu-active-color);
+    border-left: var(--nuraly-menu-selected-link-border) !important;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+  }
+
+  .menu-link .action-text-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  .menu-link .text-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .menu-link nr-icon {
+    display: flex;
+    align-items: center;
+    --nuraly-icon-color: var(--nuraly-menu-link-icon-color);
+  }
+
+  .menu-link nr-icon:first-child {
+    padding-right: var(--nuraly-menu-icon-padding-right);
+    padding-left: var(--nuraly-menu-icon-padding-left);
+  }
+
+  /* Sub Menu Styles */
+  .sub-menu {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    list-style: none;
+    color: var(--nuraly-sub-menu-color);
+  }
+
+  .sub-menu.disabled .sub-menu-header {
+    color: var(--nuraly-sub-menu-disabled-color);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .sub-menu.highlighted .sub-menu-header {
+    background-color: var(--nuraly-sub-menu-highlighted-background-color);
+    color: var(--nuraly-sub-menu-highlighted-color);
+  }
+
+  .sub-menu .sub-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--nuraly-sub-menu-padding-vertical) var(--nuraly-sub-menu-padding-horizontal);
+    border-left: 4px solid transparent;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--nuraly-menu-border-radius);
+    transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
+                color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
+                border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);
+  }
+
+  .sub-menu .sub-menu-header span {
+    flex: 1;
+    min-width: 0;
+    padding-left: var(--nuraly-sub-menu-icon-padding-right);
+  }
+
+  .sub-menu .text-icon {
+    flex-shrink: 0;
+  }
+
+  .sub-menu .icons-container {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-sub-menu-icon-padding-right);
+    position: relative;
+    flex-shrink: 0;
+    /* Reserve space for dropdown to prevent layout shift */
+    min-width: fit-content;
+    /* Fixed height to prevent vertical shifting */
+    height: 100%;
+    min-height: 24px;
+  }
+
+  .menu-link .icon-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-shrink: 0;
+    /* Fixed height to prevent vertical shifting */
+    height: 100%;
+    min-height: 24px;
+  }
+
+  .sub-menu nr-dropdown,
+  .menu-link nr-dropdown {
+    /* Keep in normal flow but ensure it doesn't grow/shrink */
+    display: inline-flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .sub-menu .action-icon,
+  .menu-link .action-icon {
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .sub-menu .action-icon {
+    --nuraly-icon-color: var(--nuraly-sub-menu-action-icon-color);
+  }
+
+  .sub-menu .status-icon {
+    --nuraly-icon-color: var(--nuraly-sub-menu-status-icon-color);
+  }
+
+  .sub-menu .text-icon {
+    --nuraly-icon-color: var(--nuraly-sub-menu-text-icon-color);
+  }
+
+  .sub-menu #toggle-icon {
+    --nuraly-icon-color: var(--nuraly-sub-menu-toggle-icon-color);
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {
+    outline: none;
+    border-left: 4px solid transparent;
+    border-top: var(--nuraly-sub-menu-focus-border);
+    border-right: var(--nuraly-sub-menu-focus-border);
+    border-bottom: var(--nuraly-sub-menu-focus-border);
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:focus {
+    outline: none;
+    border-left: var(--nuraly-menu-selected-link-border);
+    border-top: var(--nuraly-sub-menu-focus-border);
+    border-right: var(--nuraly-sub-menu-focus-border);
+    border-bottom: var(--nuraly-sub-menu-focus-border);
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  /* Focus-visible for keyboard navigation on submenus */
+  .sub-menu:not(.disabled) .sub-menu-header:focus-visible {
+    outline: none;
+    border-top: var(--nuraly-sub-menu-focus-border);
+    border-right: var(--nuraly-sub-menu-focus-border);
+    border-bottom: var(--nuraly-sub-menu-focus-border);
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {
+    border-left: var(--nuraly-sub-menu-focus-border);
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {
+    border-left: var(--nuraly-menu-selected-link-border) !important;
+    color: var(--nuraly-sub-menu-focus-color);
+  }
+
+  .sub-menu:not(.disabled) .sub-menu-header:hover {
+    background-color: var(--nuraly-sub-menu-hover-background-color);
+    color: var(--nuraly-sub-menu-hover-color);
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header {
+    background-color: var(--nuraly-menu-selected-link-background-color);
+    color: var(--nuraly-menu-selected-color);
+    border-left: var(--nuraly-menu-selected-link-border);
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+  }
+
+  .sub-menu.selected:not(.disabled) .sub-menu-header:active {
+    background-color: var(--nuraly-sub-menu-active-background-color);
+    color: var(--nuraly-sub-menu-active-color);
+    border-left: var(--nuraly-menu-selected-link-border);
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+  }
+
+  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {
+    background-color: var(--nuraly-sub-menu-active-background-color);
+    color: var(--nuraly-sub-menu-active-color);
+  }
+
+  .sub-menu-children {
+    padding-left: var(--nuraly-sub-menu-nested-padding-left);
+  }
+
+  /* Size Variants */
+  .menu--small .menu-link {
+    padding: var(--nuraly-menu-link-padding-vertical-small) var(--nuraly-menu-link-padding-horizontal-small);
+  }
+
+  .menu--small .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-padding-vertical-small) var(--nuraly-sub-menu-padding-horizontal-small);
+  }
+
+  .menu--medium .menu-link {
+    padding: var(--nuraly-menu-link-padding-vertical-medium) var(--nuraly-menu-link-padding-horizontal-medium);
+  }
+
+  .menu--medium .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-padding-vertical-medium) var(--nuraly-sub-menu-padding-horizontal-medium);
+  }
+
+  .menu--large .menu-link {
+    padding: var(--nuraly-menu-link-padding-vertical-large) var(--nuraly-menu-link-padding-horizontal-large);
+  }
+
+  .menu--large .sub-menu .sub-menu-header {
+    padding: var(--nuraly-sub-menu-padding-vertical-large) var(--nuraly-sub-menu-padding-horizontal-large);
   }
 `;
 export const styles = [menuStyle];

package/menu.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFpB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuStyle = css`\n  ul {\n    width: var(--hybrid-menu-width);\n    padding: var(--hybrid-menu-padding);\n    border: var(--hybrid-menu-border);\n    font-size: var(--hybrid-menu-font-size);\n    font-family: var(--hybrid-menu-font-family)\n  }\n  :host {\n    --hybrid-menu-font-size:13px;\n    --hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n    --hybrid-menu-padding: 2px;\n    --hybrid-menu-width: 45%;\n    --hybrid-menu-border: 1px solid #f4f4f4;\n    --hybrid-menu-link-color: #000000;\n    --hybrid-menu-link-icon-color: #525252;\n    --hybrid-menu-disabled-link-color: #c6c6c6;\n    --hybrid-menu-focus-border: 1px solid #0f62fe;\n    --hybrid-menu-focus-color: #000000;\n    --hybrid-menu-active-color: #000000;\n    --hybrid-menu-active-background-color: #e0e0e0;\n    --hybrid-menu-hover-link-background-color: #f4f4f4;\n    --hybrid-menu-hover-link-color: #000000;\n    --hybrid-menu-selected-link-background-color: #e0e0e0;\n    --hybrid-menu-selected-link-border: 3px solid #0f62fe;\n    --hybrid-menu-selected-color: #000000;\n    --hybrid-menu-link-background-color: transparent;\n    --hybrid-menu-link-padding-y: 8px;\n    --hybrid-menu-link-empty-icon-padding-left: 39px;\n    --hybrid-menu-link-icon-padding-right: 15px;\n    --hybrid-menu-link-icon-padding-left: 10px;\n    --hybrid-menu-link-icon-right-padding-left: 39px;\n    --hybrid-menu-link-icon-only-width: 42px;\n    --hybrid-sub-menu-color: #000000;\n    --hybrid-sub-menu-disabled-color: #c6c6c6;\n    --hybrid-sub-menu-focus-color: #e0e0e0;\n    --hybrid-sub-menu-focus-border: 1px solid #0f62fe;\n    --hybrid-sub-menu-hover-background-color: #f4f4f4;\n    --hybrid-sub-menu-hover-color: #161616;\n    --hybrid-sub-menu-active-background-color: #c6c6c6;\n    --hybrid-sub-menu-active-color: #000000;\n    --hybrid-sub-menu-highlighted-color: #000000;\n    --hybrid-sub-menu-highlighted-background-color: #e2e2e2;\n    --hybrid-sub-menu-text-icon-color: #525252;\n    --hybrid-sub-menu-action-icon-color:#525252;\n    --hybrid-sub-menu-status-icon-color:#525252;\n    --hybrid-sub-menu-toggle-icon-color: #525252;\n    --hybrid-sub-menu-padding-y: 8px;\n    --hybrid-sub-menu-margin-y: 0px;\n    --hybrid-sub-menu-padding-left: 10px;\n    --hybrid-sub-menu-padding-left-text: 5px;\n    --hybrid-sub-menu-empty-icon-padding-left-text: 29px;\n    --hybrid-sub-menu-children-padding-left: 15px;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-menu-border: 1px solid #ffffff;\n      --hybrid-menu-link-color:#ffffff;\n      --hybrid-menu-focus-border: 1px solid #ffffff;\n      --hybrid-menu-focus-color: #ffffff;\n      --hybrid-menu-hover-link-background-color: #333333;\n      --hybrid-menu-hover-link-color: #ffffff;\n      --hybrid-menu-active-color: #ffffff;\n      --hybrid-menu-active-background-color: #242424;\n      --hybrid-menu-selected-link-border: 3px solid #ffffff;\n      --hybrid-menu-selected-link-background-color: #3a3a3a;\n      --hybrid-menu-selected-color:#ffffff;\n      --hybrid-menu-disabled-link-color: #525252;\n      --hybrid-sub-menu-color: #ffffff;\n      --hybrid-sub-menu-disabled-color: #525252;\n      --hybrid-sub-menu-focus-border: 1px solid #ffffff;\n      --hybrid-sub-menu-focus-color: #525252;\n      --hybrid-sub-menu-hover-background-color: #333333;\n      --hybrid-sub-menu-hover-color: #ffffff;\n      --hybrid-sub-menu-active-background-color: #242424;\n      --hybrid-sub-menu-active-color: #ffffff;\n      --hybrid-sub-menu-highlighted-color: #ffffff;\n      --hybrid-sub-menu-highlighted-background-color: #3a3a3a;\n      --hybrid-sub-menu-text-icon-color: #525252;\n      --hybrid-sub-menu-toggle-icon-color: #525252;\n    }\n  }\n`;\nexport const styles = [menuStyle];\n"]}
+{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+TpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuStyle = css`\n  /* Root menu container */\n  :host {\n    display: block;\n  }\n\n  .menu-root {\n    font-size: var(--nuraly-menu-font-size);\n    font-family: var(--nuraly-menu-font-family);\n    font-weight: var(--nuraly-menu-font-weight);\n    line-height: var(--nuraly-menu-line-height);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* Menu Link Styles */\n  .menu-link {\n    list-style: none;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: var(--nuraly-menu-link-padding-vertical) var(--nuraly-menu-link-padding-horizontal);\n    color: var(--nuraly-menu-link-color);\n    background-color: var(--nuraly-menu-link-background-color);\n    border-left: 4px solid transparent;\n    border-top: 2px solid transparent;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    border-radius: var(--nuraly-menu-border-radius);\n    transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n                color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n                border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);\n  }\n\n  .menu-link.disabled {\n    color: var(--nuraly-menu-disabled-link-color);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .menu-link:not(.disabled):not(.selected):hover {\n    background-color: var(--nuraly-menu-hover-link-background-color);\n    color: var(--nuraly-menu-hover-link-color);\n  }\n\n  .menu-link.selected {\n    background-color: var(--nuraly-menu-selected-link-background-color);\n    color: var(--nuraly-menu-selected-color);\n    border-left: var(--nuraly-menu-selected-link-border);\n  }\n\n  .menu-link:not(.disabled):not(.selected):focus {\n    outline: none;\n    border-left: 4px solid transparent;\n    border-top: var(--nuraly-menu-focus-border);\n    border-right: var(--nuraly-menu-focus-border);\n    border-bottom: var(--nuraly-menu-focus-border);\n    color: var(--nuraly-menu-focus-color);\n  }\n\n  .menu-link.selected:not(.disabled):focus {\n    outline: none;\n    border-left: var(--nuraly-menu-selected-link-border);\n    border-top: var(--nuraly-menu-focus-border);\n    border-right: var(--nuraly-menu-focus-border);\n    border-bottom: var(--nuraly-menu-focus-border);\n    color: var(--nuraly-menu-focus-color);\n  }\n\n  /* Focus-visible for keyboard navigation */\n  .menu-link:not(.disabled):focus-visible {\n    outline: none;\n    border-top: var(--nuraly-menu-focus-border);\n    border-right: var(--nuraly-menu-focus-border);\n    border-bottom: var(--nuraly-menu-focus-border);\n  }\n\n  .menu-link:not(.disabled):not(.selected):focus-visible {\n    border-left: var(--nuraly-menu-focus-border);\n    color: var(--nuraly-menu-focus-color);\n  }\n\n  .menu-link.selected:not(.disabled):focus-visible {\n    border-left: var(--nuraly-menu-selected-link-border) !important;\n    color: var(--nuraly-menu-focus-color);\n  }\n\n  .menu-link:not(.disabled):not(.selected):active {\n    color: var(--nuraly-menu-active-color);\n    background-color: var(--nuraly-menu-active-background-color);\n  }\n\n  .menu-link.selected:not(.disabled):active {\n    background-color: var(--nuraly-menu-active-background-color);\n    color: var(--nuraly-menu-active-color);\n    border-left: var(--nuraly-menu-selected-link-border) !important;\n    border-top: 2px solid transparent;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n  }\n\n  .menu-link .action-text-container {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n  }\n\n  .menu-link .text-container {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .menu-link nr-icon {\n    display: flex;\n    align-items: center;\n    --nuraly-icon-color: var(--nuraly-menu-link-icon-color);\n  }\n\n  .menu-link nr-icon:first-child {\n    padding-right: var(--nuraly-menu-icon-padding-right);\n    padding-left: var(--nuraly-menu-icon-padding-left);\n  }\n\n  /* Sub Menu Styles */\n  .sub-menu {\n    display: flex;\n    flex-direction: column;\n    padding-left: 0;\n    list-style: none;\n    color: var(--nuraly-sub-menu-color);\n  }\n\n  .sub-menu.disabled .sub-menu-header {\n    color: var(--nuraly-sub-menu-disabled-color);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .sub-menu.highlighted .sub-menu-header {\n    background-color: var(--nuraly-sub-menu-highlighted-background-color);\n    color: var(--nuraly-sub-menu-highlighted-color);\n  }\n\n  .sub-menu .sub-menu-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    padding: var(--nuraly-sub-menu-padding-vertical) var(--nuraly-sub-menu-padding-horizontal);\n    border-left: 4px solid transparent;\n    border-top: 2px solid transparent;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    border-radius: var(--nuraly-menu-border-radius);\n    transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n                color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n                border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);\n  }\n\n  .sub-menu .sub-menu-header span {\n    flex: 1;\n    min-width: 0;\n    padding-left: var(--nuraly-sub-menu-icon-padding-right);\n  }\n\n  .sub-menu .text-icon {\n    flex-shrink: 0;\n  }\n\n  .sub-menu .icons-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-sub-menu-icon-padding-right);\n    position: relative;\n    flex-shrink: 0;\n    /* Reserve space for dropdown to prevent layout shift */\n    min-width: fit-content;\n    /* Fixed height to prevent vertical shifting */\n    height: 100%;\n    min-height: 24px;\n  }\n\n  .menu-link .icon-container {\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex-shrink: 0;\n    /* Fixed height to prevent vertical shifting */\n    height: 100%;\n    min-height: 24px;\n  }\n\n  .sub-menu nr-dropdown,\n  .menu-link nr-dropdown {\n    /* Keep in normal flow but ensure it doesn't grow/shrink */\n    display: inline-flex;\n    flex-shrink: 0;\n    flex-grow: 0;\n    align-items: center;\n    vertical-align: middle;\n  }\n\n  .sub-menu .action-icon,\n  .menu-link .action-icon {\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .sub-menu .action-icon {\n    --nuraly-icon-color: var(--nuraly-sub-menu-action-icon-color);\n  }\n\n  .sub-menu .status-icon {\n    --nuraly-icon-color: var(--nuraly-sub-menu-status-icon-color);\n  }\n\n  .sub-menu .text-icon {\n    --nuraly-icon-color: var(--nuraly-sub-menu-text-icon-color);\n  }\n\n  .sub-menu #toggle-icon {\n    --nuraly-icon-color: var(--nuraly-sub-menu-toggle-icon-color);\n  }\n\n  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {\n    outline: none;\n    border-left: 4px solid transparent;\n    border-top: var(--nuraly-sub-menu-focus-border);\n    border-right: var(--nuraly-sub-menu-focus-border);\n    border-bottom: var(--nuraly-sub-menu-focus-border);\n    color: var(--nuraly-sub-menu-focus-color);\n  }\n\n  .sub-menu.selected:not(.disabled) .sub-menu-header:focus {\n    outline: none;\n    border-left: var(--nuraly-menu-selected-link-border);\n    border-top: var(--nuraly-sub-menu-focus-border);\n    border-right: var(--nuraly-sub-menu-focus-border);\n    border-bottom: var(--nuraly-sub-menu-focus-border);\n    color: var(--nuraly-sub-menu-focus-color);\n  }\n\n  /* Focus-visible for keyboard navigation on submenus */\n  .sub-menu:not(.disabled) .sub-menu-header:focus-visible {\n    outline: none;\n    border-top: var(--nuraly-sub-menu-focus-border);\n    border-right: var(--nuraly-sub-menu-focus-border);\n    border-bottom: var(--nuraly-sub-menu-focus-border);\n  }\n\n  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {\n    border-left: var(--nuraly-sub-menu-focus-border);\n    color: var(--nuraly-sub-menu-focus-color);\n  }\n\n  .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {\n    border-left: var(--nuraly-menu-selected-link-border) !important;\n    color: var(--nuraly-sub-menu-focus-color);\n  }\n\n  .sub-menu:not(.disabled) .sub-menu-header:hover {\n    background-color: var(--nuraly-sub-menu-hover-background-color);\n    color: var(--nuraly-sub-menu-hover-color);\n  }\n\n  .sub-menu.selected:not(.disabled) .sub-menu-header {\n    background-color: var(--nuraly-menu-selected-link-background-color);\n    color: var(--nuraly-menu-selected-color);\n    border-left: var(--nuraly-menu-selected-link-border);\n    border-top: 2px solid transparent;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n  }\n\n  .sub-menu.selected:not(.disabled) .sub-menu-header:active {\n    background-color: var(--nuraly-sub-menu-active-background-color);\n    color: var(--nuraly-sub-menu-active-color);\n    border-left: var(--nuraly-menu-selected-link-border);\n    border-top: 2px solid transparent;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n  }\n\n  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {\n    background-color: var(--nuraly-sub-menu-active-background-color);\n    color: var(--nuraly-sub-menu-active-color);\n  }\n\n  .sub-menu-children {\n    padding-left: var(--nuraly-sub-menu-nested-padding-left);\n  }\n\n  /* Size Variants */\n  .menu--small .menu-link {\n    padding: var(--nuraly-menu-link-padding-vertical-small) var(--nuraly-menu-link-padding-horizontal-small);\n  }\n\n  .menu--small .sub-menu .sub-menu-header {\n    padding: var(--nuraly-sub-menu-padding-vertical-small) var(--nuraly-sub-menu-padding-horizontal-small);\n  }\n\n  .menu--medium .menu-link {\n    padding: var(--nuraly-menu-link-padding-vertical-medium) var(--nuraly-menu-link-padding-horizontal-medium);\n  }\n\n  .menu--medium .sub-menu .sub-menu-header {\n    padding: var(--nuraly-sub-menu-padding-vertical-medium) var(--nuraly-sub-menu-padding-horizontal-medium);\n  }\n\n  .menu--large .menu-link {\n    padding: var(--nuraly-menu-link-padding-vertical-large) var(--nuraly-menu-link-padding-horizontal-large);\n  }\n\n  .menu--large .sub-menu .sub-menu-header {\n    padding: var(--nuraly-sub-menu-padding-vertical-large) var(--nuraly-sub-menu-padding-horizontal-large);\n  }\n`;\n\nexport const styles = [menuStyle];\n"]}

package/menu.types.d.ts

@@ -1,22 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const EMPTY_STRING = "";
+/**
+ * Menu size variants
+ */
+export declare const enum MenuSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+/**
+ * Icon position in menu items
+ */
+export declare const enum IconPosition {
+    Left = "left",
+    Right = "right"
+}
+/**
+ * Menu item configuration interface
+ */
 export interface IMenu {
+    /** Display text for the menu item */
     text: string;
+    /** URL link for navigation */
     link?: string;
+    /** Menu configuration with icon and actions */
     menu?: {
         icon: string;
         actions: IAction[];
     };
+    /** Status indicator with icon and label */
     status?: {
         icon: string;
         label: string;
     };
+    /** Icon name */
     icon?: string;
-    iconPosition?: string;
+    /** Icon position (left or right) */
+    iconPosition?: IconPosition | string;
+    /** Whether the menu item is selected */
     selected?: boolean;
+    /** Whether the menu item is disabled */
     disabled?: boolean;
+    /** Whether the submenu is opened */
+    opened?: boolean;
+    /** Child menu items for nested menus */
     children?: IMenu[];
 }
+/**
+ * Menu action configuration interface
+ */
 export interface IAction {
+    /** Action label */
     label: string;
+    /** Action value */
     value: string;
 }
 //# sourceMappingURL=menu.types.d.ts.map

package/menu.types.js

@@ -1,2 +1,7 @@
-export {};
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export const EMPTY_STRING = '';
 //# sourceMappingURL=menu.types.js.map

package/menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IMenu {\n  text: string;\n  link?: string;\n  menu?:{icon:string,actions:IAction[]};\n  status?:{icon:string,label:string};\n  icon?: string;\n  iconPosition?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  children?: IMenu[];\n}\nexport interface IAction{\n  label:string,\n  value:string\n}\n"]}
+{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Menu size variants\n */\nexport const enum MenuSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Icon position in menu items\n */\nexport const enum IconPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\n/**\n * Menu item configuration interface\n */\nexport interface IMenu {\n  /** Display text for the menu item */\n  text: string;\n  /** URL link for navigation */\n  link?: string;\n  /** Menu configuration with icon and actions */\n  menu?: { icon: string; actions: IAction[] };\n  /** Status indicator with icon and label */\n  status?: { icon: string; label: string };\n  /** Icon name */\n  icon?: string;\n  /** Icon position (left or right) */\n  iconPosition?: IconPosition | string;\n  /** Whether the menu item is selected */\n  selected?: boolean;\n  /** Whether the menu item is disabled */\n  disabled?: boolean;\n  /** Whether the submenu is opened */\n  opened?: boolean;\n  /** Child menu items for nested menus */\n  children?: IMenu[];\n}\n\n/**\n * Menu action configuration interface\n */\nexport interface IAction {\n  /** Action label */\n  label: string;\n  /** Action value */\n  value: string;\n}\n"]}

package/package.json

@@ -1,15 +1,50 @@
 {
     "name": "@nuralyui/menu",
-    "version": "0.0.9",
-    "description": "",
+    "version": "0.0.15",
+    "description": "Menu component for NuralyUI library with support for nested submenus",
     "main": "index.js",
     "type": "module",
-    "dependencies": {
-        "dayjs": "^1.11.7"
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
     },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "bundle.js"
+    ],
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/NuralyUI/NuralyUI.git",
+        "directory": "src/components/menu"
+    },
+    "keywords": [
+        "web-components",
+        "lit-element",
+        "menu",
+        "navigation",
+        "submenu",
+        "ui-components",
+        "typescript"
+    ],
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "nuralyui": {
+        "requiredComponents": [
+            "nr-icon",
+            "nr-dropdown"
+        ]
+    },
+    "peerDependencies": {
+        "@nuralyui/icon": "^0.0.1",
+        "@nuralyui/dropdown": "^0.0.1"
+    }
 }

package/react.d.ts

@@ -1,3 +1,5 @@
-import { HyMenuComponent } from './menu.component.js';
-export declare const HyDropdown: import("@lit-labs/react").ReactWebComponent<HyMenuComponent, {}>;
+import { NrMenuElement } from './menu.component.js';
+export declare const NrMenu: import("@lit-labs/react").ReactWebComponent<NrMenuElement, {
+    change: string;
+}>;
 //# sourceMappingURL=react.d.ts.map

package/react.js

@@ -1,10 +1,12 @@
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { HyMenuComponent } from './menu.component.js';
-export const HyDropdown = createComponent({
-    tagName: 'hy-menu',
-    elementClass: HyMenuComponent,
+import { NrMenuElement } from './menu.component.js';
+export const NrMenu = createComponent({
+    tagName: 'nr-menu',
+    elementClass: NrMenuElement,
     react: React,
-    events: {},
+    events: {
+        change: 'change',
+    },
 });
 //# sourceMappingURL=react.js.map

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/menu/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyMenuComponent} from './menu.component.js';\nexport const HyDropdown = createComponent({\n  tagName: 'hy-menu',\n  elementClass: HyMenuComponent,\n  react: React,\n  events: {},\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/menu/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrMenuElement } from './menu.component.js';\nexport const NrMenu = createComponent({\n  tagName: 'nr-menu',\n  elementClass: NrMenuElement,\n  react: React,\n  events: {\n    change: 'change',\n  },\n});\n"]}

package/demo/menus-demo.d.ts

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-import '../menu.component';
-import { IMenu } from '../menu.types';
-export declare class ElMeenuElement extends LitElement {
-    path: number[];
-    value: string;
-    items: IMenu[];
-    items2: IMenu[];
-    items3: IMenu[];
-    protected render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'hy-menu-demo': ElMeenuElement;
-    }
-}
-//# sourceMappingURL=menus-demo.d.ts.map

package/demo/menus-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menus-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/demo/menus-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAE5C,IAAI,EAAG,MAAM,EAAE,CAAC;IAEhB,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,EAAE,CA2CZ;IAEF,MAAM,EAAE,KAAK,EAAE,CA4Bb;IAEF,MAAM,EAAE,KAAK,EAAE,CAab;cAEiB,MAAM;CA4C1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}