@nuralyui/dropdown 0.0.10 → 0.0.16

package/dropdown.style.js

@@ -0,0 +1,451 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+    color: var(--nuraly-color-text);
+    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown__trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .dropdown__trigger:focus-within {
+    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);
+    outline-offset: var(--nuraly-focus-outline-offset, 1px);
+  }
+
+  .dropdown__panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: var(--nuraly-dropdown-z-index, 9999);
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-radius: var(--nuraly-dropdown-border-radius, 6px);
+    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    min-width: var(--nuraly-dropdown-min-width, 10rem);
+    max-width: var(--nuraly-dropdown-max-width, 20rem);
+    max-height: var(--nuraly-dropdown-max-height, 200px);
+    overflow: auto;
+    /* Use opacity and visibility for smooth animations */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    /* Ensure proper containment */
+    box-sizing: border-box;
+    /* Create new stacking context to prevent layering issues */
+    isolation: isolate;
+    /* Force above other elements */
+    transform-origin: top center;
+  }
+
+  .dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* Alternative attribute-based selector (like select component) */
+  :host([open]) .dropdown__panel {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* Placement variants */
+  .dropdown__panel--top,
+  .dropdown__panel--top-start,
+  .dropdown__panel--top-end {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+    margin-top: 0;
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--top-end.dropdown__panel--open {
+    transform: translateY(0);
+  }
+
+  .dropdown__panel--bottom-end,
+  .dropdown__panel--top-end {
+    left: auto;
+    right: 0;
+  }
+
+  .dropdown__panel--bottom-start,
+  .dropdown__panel--top-start {
+    left: 0;
+    right: auto;
+  }
+
+  /* Size variants */
+  .dropdown__panel--small {
+    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);
+  }
+
+  .dropdown__panel--medium {
+    font-size: var(--nuraly-dropdown-font-size, 0.875rem);
+  }
+
+  .dropdown__panel--large {
+    font-size: var(--nuraly-dropdown-large-font-size, 1rem);
+  }
+
+  /* Animation variants */
+  
+  /* No animation - instant show/hide */
+  .dropdown__panel--none {
+    transition: none;
+  }
+
+  .dropdown__panel--none:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--none.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* Fade animation - opacity only */
+  .dropdown__panel--fade {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+  }
+
+  .dropdown__panel--fade:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--fade.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* Slide animation - slide down/up with opacity */
+  .dropdown__panel--slide {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+  }
+
+  .dropdown__panel--slide:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-12px);
+  }
+
+  .dropdown__panel--slide.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* For top-positioned dropdowns, slide direction is reversed */
+  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: translateY(12px);
+  }
+
+  /* Scale animation - scale and opacity */
+  .dropdown__panel--scale {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .dropdown__panel--scale:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.9) translateY(-8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1) translateY(0);
+  }
+
+  /* For top-positioned scale dropdowns */
+  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: scale(0.9) translateY(8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {
+    transform: scale(1) translateY(0);
+  }
+
+  /* Arrow */
+  .dropdown__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: var(--nuraly-dropdown-arrow-size) solid transparent;
+    border-bottom-color: var(--nuraly-dropdown-background);
+    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown__arrow::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;
+    border-bottom-color: var(--nuraly-dropdown-border-color);
+    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
+    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
+  }
+
+  /* Content areas */
+  .dropdown__content {
+    overflow: auto;
+  }
+
+  .dropdown__items {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: visible; /* Allow submenus to extend outside */
+  }
+
+  .dropdown__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-dropdown-item-gap);
+    padding: var(--nuraly-dropdown-item-padding);
+    background: var(--nuraly-color-dropdown-item-background);
+    border: none;
+    color: var(--nuraly-color-dropdown-item-text);
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    min-height: var(--nuraly-dropdown-item-min-height);
+    transition: var(--nuraly-dropdown-item-transition);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: var(--nuraly-dropdown-item-line-height);
+    position: relative;
+  }
+
+  .dropdown__item:hover:not(.dropdown__item--disabled) {
+    background: var(--nuraly-color-dropdown-item-background-hover);
+    color: var(--nuraly-color-dropdown-item-text-hover);
+  }
+
+  .dropdown__item:focus {
+    outline: none;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:focus-visible {
+    outline: 2px solid var(--nuraly-focus-color, #0f62fe);
+    outline-offset: -2px;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:active:not(.dropdown__item--disabled) {
+    background: var(--nuraly-color-dropdown-item-background-active);
+    color: var(--nuraly-color-dropdown-item-text-active);
+  }
+
+  .dropdown__item--disabled {
+    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .dropdown__item-icon {
+    flex-shrink: 0;
+    width: var(--nuraly-dropdown-item-icon-size);
+    height: var(--nuraly-dropdown-item-icon-size);
+  }
+
+  .dropdown__item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown__divider {
+    height: 1px;
+    background: var(--nuraly-dropdown-divider-color);
+    margin: var(--nuraly-dropdown-divider-margin);
+  }
+
+  /* Cascading dropdown styles */
+  .dropdown__item-container {
+    position: relative;
+  }
+
+  /* Allow submenus to overflow when dropdown has cascading items */
+  :host([has-cascading]) .dropdown__panel {
+    overflow: visible !important;
+    max-height: none !important; /* Remove height restriction for cascading */
+  }
+
+  :host([has-cascading]) .dropdown__items {
+    overflow: visible !important;
+  }
+
+  /* For cascading dropdowns, we need to handle scrolling differently */
+  :host([has-cascading]) .dropdown__content {
+    overflow: visible !important;
+  }
+
+  .dropdown__item--has-submenu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dropdown__submenu-arrow {
+    margin-left: auto;
+    font-size: 0.75em;
+    opacity: 0.6;
+    transition: transform 0.15s ease;
+  }
+
+  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {
+    opacity: 1;
+  }
+
+  .dropdown__submenu {
+    position: absolute;
+    top: 0;
+    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-radius: var(--nuraly-dropdown-border-radius, 6px);
+    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    min-width: var(--nuraly-dropdown-min-width, 10rem);
+    max-width: var(--nuraly-dropdown-max-width, 20rem);
+    max-height: var(--nuraly-dropdown-max-height, 200px);
+    overflow: auto;
+    box-sizing: border-box;
+    animation: fadeInSubmenu 0.15s ease;
+    /* Ensure submenu is visible */
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .dropdown__custom-content {
+    padding: var(--nuraly-dropdown-item-padding, 8px 12px);
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Custom content styling */
+  .dropdown__custom-content h3,
+  .dropdown__custom-content h4 {
+    margin: 0 0 8px 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--nuraly-color-text-primary);
+  }
+
+  .dropdown__custom-content p {
+    margin: 0 0 8px 0;
+    font-size: 0.75rem;
+    color: var(--nuraly-color-text-secondary);
+    line-height: 1.4;
+  }
+
+  .dropdown__custom-content button,
+  .dropdown__custom-content input,
+  .dropdown__custom-content select {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .dropdown__custom-content button:last-child,
+  .dropdown__custom-content input:last-child,
+  .dropdown__custom-content p:last-child {
+    margin-bottom: 0;
+  }
+
+  .dropdown__submenu--right {
+    left: 100%;
+    margin-left: 4px;
+  }
+
+  .dropdown__submenu--left {
+    right: 100%;
+    margin-right: 4px;
+  }
+
+  @keyframes fadeInSubmenu {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .dropdown__submenu--left {
+    animation-name: fadeInSubmenuLeft;
+  }
+
+  @keyframes fadeInSubmenuLeft {
+    from {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Focus styles for accessibility */
+  :host(:focus-within) .dropdown__trigger {
+    outline: var(--nuraly-dropdown-focus-outline);
+    outline-offset: var(--nuraly-dropdown-focus-offset);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  /* Hidden state */
+  [hidden] {
+    display: none !important;
+  }
+
+`;
+//# sourceMappingURL=dropdown.style.js.map

package/dropdown.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgcxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    color: var(--nuraly-color-text);\n    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);\n  }\n\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n\n  .dropdown__trigger {\n    display: inline-block;\n    cursor: pointer;\n  }\n\n  .dropdown__trigger:focus-within {\n    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);\n    outline-offset: var(--nuraly-focus-outline-offset, 1px);\n  }\n\n  .dropdown__panel {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    z-index: var(--nuraly-dropdown-z-index, 9999);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, 200px);\n    overflow: auto;\n    /* Use opacity and visibility for smooth animations */\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-8px);\n    transition: all var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n    /* Ensure proper containment */\n    box-sizing: border-box;\n    /* Create new stacking context to prevent layering issues */\n    isolation: isolate;\n    /* Force above other elements */\n    transform-origin: top center;\n  }\n\n  .dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* Alternative attribute-based selector (like select component) */\n  :host([open]) .dropdown__panel {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* Placement variants */\n  .dropdown__panel--top,\n  .dropdown__panel--top-start,\n  .dropdown__panel--top-end {\n    top: auto;\n    bottom: 100%;\n    margin-bottom: 1px;\n    margin-top: 0;\n    transform: translateY(8px);\n  }\n\n  .dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--top-end.dropdown__panel--open {\n    transform: translateY(0);\n  }\n\n  .dropdown__panel--bottom-end,\n  .dropdown__panel--top-end {\n    left: auto;\n    right: 0;\n  }\n\n  .dropdown__panel--bottom-start,\n  .dropdown__panel--top-start {\n    left: 0;\n    right: auto;\n  }\n\n  /* Size variants */\n  .dropdown__panel--small {\n    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);\n  }\n\n  .dropdown__panel--medium {\n    font-size: var(--nuraly-dropdown-font-size, 0.875rem);\n  }\n\n  .dropdown__panel--large {\n    font-size: var(--nuraly-dropdown-large-font-size, 1rem);\n  }\n\n  /* Animation variants */\n  \n  /* No animation - instant show/hide */\n  .dropdown__panel--none {\n    transition: none;\n  }\n\n  .dropdown__panel--none:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--none.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Fade animation - opacity only */\n  .dropdown__panel--fade {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--fade:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--fade.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Slide animation - slide down/up with opacity */\n  .dropdown__panel--slide {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--slide:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-12px);\n  }\n\n  .dropdown__panel--slide.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* For top-positioned dropdowns, slide direction is reversed */\n  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: translateY(12px);\n  }\n\n  /* Scale animation - scale and opacity */\n  .dropdown__panel--scale {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  }\n\n  .dropdown__panel--scale:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.9) translateY(-8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1) translateY(0);\n  }\n\n  /* For top-positioned scale dropdowns */\n  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: scale(0.9) translateY(8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {\n    transform: scale(1) translateY(0);\n  }\n\n  /* Arrow */\n  .dropdown__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: var(--nuraly-dropdown-arrow-size) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-background);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .dropdown__arrow::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-border-color);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n  }\n\n  /* Content areas */\n  .dropdown__content {\n    overflow: auto;\n  }\n\n  .dropdown__items {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow: visible; /* Allow submenus to extend outside */\n  }\n\n  .dropdown__item {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-dropdown-item-gap);\n    padding: var(--nuraly-dropdown-item-padding);\n    background: var(--nuraly-color-dropdown-item-background);\n    border: none;\n    color: var(--nuraly-color-dropdown-item-text);\n    cursor: pointer;\n    text-align: left;\n    width: 100%;\n    min-height: var(--nuraly-dropdown-item-min-height);\n    transition: var(--nuraly-dropdown-item-transition);\n    font-size: inherit;\n    font-family: inherit;\n    line-height: var(--nuraly-dropdown-item-line-height);\n    position: relative;\n  }\n\n  .dropdown__item:hover:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-hover);\n    color: var(--nuraly-color-dropdown-item-text-hover);\n  }\n\n  .dropdown__item:focus {\n    outline: none;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:focus-visible {\n    outline: 2px solid var(--nuraly-focus-color, #0f62fe);\n    outline-offset: -2px;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:active:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-active);\n    color: var(--nuraly-color-dropdown-item-text-active);\n  }\n\n  .dropdown__item--disabled {\n    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .dropdown__item-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-dropdown-item-icon-size);\n    height: var(--nuraly-dropdown-item-icon-size);\n  }\n\n  .dropdown__item-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown__divider {\n    height: 1px;\n    background: var(--nuraly-dropdown-divider-color);\n    margin: var(--nuraly-dropdown-divider-margin);\n  }\n\n  /* Cascading dropdown styles */\n  .dropdown__item-container {\n    position: relative;\n  }\n\n  /* Allow submenus to overflow when dropdown has cascading items */\n  :host([has-cascading]) .dropdown__panel {\n    overflow: visible !important;\n    max-height: none !important; /* Remove height restriction for cascading */\n  }\n\n  :host([has-cascading]) .dropdown__items {\n    overflow: visible !important;\n  }\n\n  /* For cascading dropdowns, we need to handle scrolling differently */\n  :host([has-cascading]) .dropdown__content {\n    overflow: visible !important;\n  }\n\n  .dropdown__item--has-submenu {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .dropdown__submenu-arrow {\n    margin-left: auto;\n    font-size: 0.75em;\n    opacity: 0.6;\n    transition: transform 0.15s ease;\n  }\n\n  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {\n    opacity: 1;\n  }\n\n  .dropdown__submenu {\n    position: absolute;\n    top: 0;\n    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, 200px);\n    overflow: auto;\n    box-sizing: border-box;\n    animation: fadeInSubmenu 0.15s ease;\n    /* Ensure submenu is visible */\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .dropdown__custom-content {\n    padding: var(--nuraly-dropdown-item-padding, 8px 12px);\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  /* Custom content styling */\n  .dropdown__custom-content h3,\n  .dropdown__custom-content h4 {\n    margin: 0 0 8px 0;\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--nuraly-color-text-primary);\n  }\n\n  .dropdown__custom-content p {\n    margin: 0 0 8px 0;\n    font-size: 0.75rem;\n    color: var(--nuraly-color-text-secondary);\n    line-height: 1.4;\n  }\n\n  .dropdown__custom-content button,\n  .dropdown__custom-content input,\n  .dropdown__custom-content select {\n    width: 100%;\n    margin-bottom: 8px;\n  }\n\n  .dropdown__custom-content button:last-child,\n  .dropdown__custom-content input:last-child,\n  .dropdown__custom-content p:last-child {\n    margin-bottom: 0;\n  }\n\n  .dropdown__submenu--right {\n    left: 100%;\n    margin-left: 4px;\n  }\n\n  .dropdown__submenu--left {\n    right: 100%;\n    margin-right: 4px;\n  }\n\n  @keyframes fadeInSubmenu {\n    from {\n      opacity: 0;\n      transform: translateX(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  .dropdown__submenu--left {\n    animation-name: fadeInSubmenuLeft;\n  }\n\n  @keyframes fadeInSubmenuLeft {\n    from {\n      opacity: 0;\n      transform: translateX(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  /* Focus styles for accessibility */\n  :host(:focus-within) .dropdown__trigger {\n    outline: var(--nuraly-dropdown-focus-outline);\n    outline-offset: var(--nuraly-dropdown-focus-offset);\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);\n    pointer-events: none;\n  }\n\n  /* Hidden state */\n  [hidden] {\n    display: none !important;\n  }\n\n`;"]}

package/dropdown.types.d.ts

@@ -1,4 +1,86 @@
-export interface IOption {
+import { TemplateResult } from 'lit';
+/**
+ * Dropdown placement options
+ */
+export declare const enum DropdownPlacement {
+    Bottom = "bottom",
+    Top = "top",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    Auto = "auto"
+}
+/**
+ * Dropdown trigger events
+ */
+export declare const enum DropdownTrigger {
+    Click = "click",
+    Hover = "hover",
+    Focus = "focus",
+    Manual = "manual"
+}
+/**
+ * Dropdown size variants
+ */
+export declare const enum DropdownSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+/**
+ * Dropdown animation types
+ */
+export declare const enum DropdownAnimation {
+    None = "none",
+    Fade = "fade",
+    Slide = "slide",
+    Scale = "scale"
+}
+/**
+ * Dropdown item configuration
+ */
+export interface DropdownItem {
+    id: string;
+    label: string;
+    value?: any;
+    icon?: string;
+    disabled?: boolean;
+    divider?: boolean;
+    options?: DropdownItem[];
+    customContent?: string | TemplateResult;
+    additionalData?: any;
+}
+/**
+ * Dropdown position information
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    height?: number;
+    placement: DropdownPlacement;
+}
+/**
+ * Dropdown configuration
+ */
+export interface DropdownConfig {
+    placement?: DropdownPlacement;
+    trigger?: DropdownTrigger;
+    size?: DropdownSize;
+    animation?: DropdownAnimation;
+    disabled?: boolean;
+    arrow?: boolean;
+    autoClose?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    offset?: number;
+    delay?: number;
+    maxHeight?: string;
+    minWidth?: string;
+    items?: DropdownItem[];
+}
+export interface IOption extends DropdownItem {
     label: string;
     value?: string;
     disabled?: boolean;

package/dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IOption {\n  label: string;\n  value?: string;\n  disabled?: boolean;\n  icon?: string;\n  children?: IOption[];\n  additionalData?: any;\n}\n\nexport const enum TriggerMode {\n  Click = 'click',\n  Hover = 'hover',\n}\nexport const enum DropDownDirection {\n  Right = 'right',\n  Left = 'left',\n}\n"]}
+{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * Dropdown placement options\n */\nexport const enum DropdownPlacement {\n  Bottom = 'bottom',\n  Top = 'top',\n  BottomStart = 'bottom-start',\n  BottomEnd = 'bottom-end',\n  TopStart = 'top-start',\n  TopEnd = 'top-end',\n  Auto = 'auto'\n}\n\n/**\n * Dropdown trigger events\n */\nexport const enum DropdownTrigger {\n  Click = 'click',\n  Hover = 'hover',\n  Focus = 'focus',\n  Manual = 'manual'\n}\n\n/**\n * Dropdown size variants\n */\nexport const enum DropdownSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Dropdown animation types\n */\nexport const enum DropdownAnimation {\n  None = 'none',\n  Fade = 'fade',\n  Slide = 'slide',\n  Scale = 'scale'\n}\n\n/**\n * Dropdown item configuration\n */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  value?: any;\n  icon?: string;\n  disabled?: boolean;\n  divider?: boolean;\n  options?: DropdownItem[]; // Cascading submenu items (use either this OR customContent)\n  customContent?: string | TemplateResult; // Custom HTML string or Lit template for interactive submenu\n  additionalData?: any;\n}\n\n/**\n * Dropdown position information\n */\nexport interface DropdownPosition {\n  top: number;\n  left: number;\n  width: number;\n  height?: number;\n  placement: DropdownPlacement;\n}\n\n/**\n * Dropdown configuration\n */\nexport interface DropdownConfig {\n  placement?: DropdownPlacement;\n  trigger?: DropdownTrigger;\n  size?: DropdownSize;\n  animation?: DropdownAnimation;\n  disabled?: boolean;\n  arrow?: boolean;\n  autoClose?: boolean;\n  closeOnEscape?: boolean;\n  closeOnOutsideClick?: boolean;\n  offset?: number;\n  delay?: number;\n  maxHeight?: string;\n  minWidth?: string;\n  items?: DropdownItem[];\n}\n\n// Legacy interfaces for backward compatibility - will be deprecated\nexport interface IOption extends DropdownItem {\n  label: string;\n  value?: string;\n  disabled?: boolean;\n  icon?: string;\n  children?: IOption[];\n  additionalData?: any;\n}\n\nexport const enum TriggerMode {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport const enum DropDownDirection {\n  Right = 'right',\n  Left = 'left',\n}\n"]}

package/index.d.ts

@@ -1,2 +1,3 @@
-export * from './hy-dropdown.component.js';
+export * from './dropdown.component.js';
+export * from './dropdown.types.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,3 @@
-export * from './hy-dropdown.component.js';
+export * from './dropdown.component.js';
+export * from './dropdown.types.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './hy-dropdown.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './dropdown.component.js';\nexport * from './dropdown.types.js';\n"]}

package/package.json

@@ -1,15 +1,26 @@
 {
     "name": "@nuralyui/dropdown",
-    "version": "0.0.10",
-    "description": "",
+    "version": "0.0.16",
+    "description": "Dropdown component for NuralyUI",
     "main": "index.js",
     "type": "module",
-    "dependencies": {
-        "dayjs": "^1.11.7"
-    },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.d.ts

@@ -1,3 +1,7 @@
-import { HyDropdownComponent } from './hy-dropdown.component.js';
-export declare const HyDropdown: import("@lit-labs/react").ReactWebComponent<HyDropdownComponent, {}>;
+import { NrDropdownElement } from './dropdown.component.js';
+export declare const NrDropdown: import("@lit-labs/react").ReactWebComponent<NrDropdownElement, {
+    'nr-dropdown-open': string;
+    'nr-dropdown-close': string;
+    'nr-dropdown-item-click': string;
+}>;
 //# sourceMappingURL=react.d.ts.map

package/react.js

@@ -1,10 +1,14 @@
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { HyDropdownComponent } from './hy-dropdown.component.js';
-export const HyDropdown = createComponent({
-    tagName: 'hy-dropdown',
-    elementClass: HyDropdownComponent,
+import { NrDropdownElement } from './dropdown.component.js';
+export const NrDropdown = createComponent({
+    tagName: 'nr-dropdown',
+    elementClass: NrDropdownElement,
     react: React,
-    events: {},
+    events: {
+        'nr-dropdown-open': 'onDropdownOpen',
+        'nr-dropdown-close': 'onDropdownClose',
+        'nr-dropdown-item-click': 'onDropdownItemClick'
+    },
 });
 //# sourceMappingURL=react.js.map

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyDropdownComponent} from './hy-dropdown.component.js';\nexport const HyDropdown = createComponent({\n  tagName: 'hy-dropdown',\n  elementClass: HyDropdownComponent,\n  react: React,\n  events: {},\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB,EAAE,gBAAgB;QACpC,mBAAmB,EAAE,iBAAiB;QACtC,wBAAwB,EAAE,qBAAqB;KAChD;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrDropdownElement } from './dropdown.component.js';\n\nexport const NrDropdown = createComponent({\n  tagName: 'nr-dropdown',\n  elementClass: NrDropdownElement,\n  react: React,\n  events: {\n    'nr-dropdown-open': 'onDropdownOpen',\n    'nr-dropdown-close': 'onDropdownClose',\n    'nr-dropdown-item-click': 'onDropdownItemClick'\n  },\n});\n"]}

package/demo/hy-dropdowns-demo.d.ts

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-import '../hy-dropdown.component';
-import { IOption } from '../dropdown.types';
-export declare class ElButtonDemoElement extends LitElement {
-    static styles: import("lit").CSSResult[];
-    options: IOption[];
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'hy-dropdwon-demo': ElButtonDemoElement;
-    }
-}
-//# sourceMappingURL=hy-dropdowns-demo.d.ts.map