@nuralyui/dropdown 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/bundle.js +36 -23
  2. package/dropdown.style.js +19 -6
  3. package/dropdown.style.js.map +1 -1
  4. package/package.json +1 -1
package/dropdown.style.js CHANGED
@@ -240,9 +240,9 @@ export const styles = css `
240
240
  align-items: center;
241
241
  gap: var(--nuraly-dropdown-item-gap);
242
242
  padding: var(--nuraly-dropdown-item-padding);
243
- background: transparent;
243
+ background: var(--nuraly-color-dropdown-item-background);
244
244
  border: none;
245
- color: var(--nuraly-dropdown-item-color);
245
+ color: var(--nuraly-color-dropdown-item-text);
246
246
  cursor: pointer;
247
247
  text-align: left;
248
248
  width: 100%;
@@ -251,17 +251,30 @@ export const styles = css `
251
251
  font-size: inherit;
252
252
  font-family: inherit;
253
253
  line-height: var(--nuraly-dropdown-item-line-height);
254
+ position: relative;
254
255
  }
255
256
 
256
257
  .dropdown__item:hover:not(.dropdown__item--disabled) {
257
- background: var(--nuraly-dropdown-item-hover-background);
258
- color: var(--nuraly-dropdown-item-hover-color);
258
+ background: var(--nuraly-color-dropdown-item-background-hover);
259
+ color: var(--nuraly-color-dropdown-item-text-hover);
259
260
  }
260
261
 
261
262
  .dropdown__item:focus {
262
263
  outline: none;
263
- background: var(--nuraly-dropdown-item-focus-background);
264
- color: var(--nuraly-dropdown-item-focus-color);
264
+ background: var(--nuraly-color-dropdown-item-background-focus);
265
+ color: var(--nuraly-color-dropdown-item-text-focus);
266
+ }
267
+
268
+ .dropdown__item:focus-visible {
269
+ outline: 2px solid var(--nuraly-focus-color, #0f62fe);
270
+ outline-offset: -2px;
271
+ background: var(--nuraly-color-dropdown-item-background-focus);
272
+ color: var(--nuraly-color-dropdown-item-text-focus);
273
+ }
274
+
275
+ .dropdown__item:active:not(.dropdown__item--disabled) {
276
+ background: var(--nuraly-color-dropdown-item-background-active);
277
+ color: var(--nuraly-color-dropdown-item-text-active);
265
278
  }
266
279
 
267
280
  .dropdown__item--disabled {
package/dropdown.style.js.map CHANGED
@@ -1 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,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: transparent;\n border: none;\n color: var(--nuraly-dropdown-item-color);\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 }\n\n .dropdown__item:hover:not(.dropdown__item--disabled) {\n background: var(--nuraly-dropdown-item-hover-background);\n color: var(--nuraly-dropdown-item-hover-color);\n }\n\n .dropdown__item:focus {\n outline: none;\n background: var(--nuraly-dropdown-item-focus-background);\n color: var(--nuraly-dropdown-item-focus-color);\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`;"]}
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/dropdown",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "description": "Dropdown component for NuralyUI",
5
5
  "main": "index.js",
6
6
  "type": "module",