npm - @nuralyui/dropdown - Versions diffs - 0.0.15 → 0.0.17 - Mend

@nuralyui/dropdown 0.0.15 → 0.0.17

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 (7) hide show

package/dropdown.component.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import { LitElement } from 'lit';
 import '../icon/index.js';
 import { DropdownPlacement, DropdownTrigger, DropdownSize, DropdownAnimation, DropdownItem } from './dropdown.types.js';
-declare const NrDropdownElement_base: (new (...args: any[]) => import("../../shared").DependencyAware) & (new (...args: any[]) => import("../../shared").ThemeAware) & (new (...args: any[]) => import("../../shared").EventHandlerCapable) & typeof LitElement;
+declare const NrDropdownElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Dropdown Component
  *

package/dropdown.component.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './dropdown.style';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { NrDropdownController } from './controllers/dropdown.controller.js';
 import '../icon/index.js';
 /**

package/dropdown.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n /\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './dropdown.style';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { NrDropdownController } from './controllers/dropdown.controller.js';\nimport '../icon/index.js';\n\nimport {\n DropdownPlacement,\n DropdownTrigger,\n DropdownSize,\n DropdownAnimation,\n DropdownItem\n} from './dropdown.types.js';\n\n/\n # Dropdown Component\n * \n * A versatile dropdown component that provides floating panel functionality with customizable triggers,\n * content, and positioning. Supports both predefined item lists and custom slot content with\n * cascading submenus and interactive elements.\n * \n * ## Features\n * - Multiple trigger modes (hover, click, focus, manual)\n * - Flexible positioning with auto-placement\n * - Cascading submenus with custom content support\n * - Interactive elements (forms, buttons) within dropdowns\n * - Keyboard navigation and accessibility\n * - Customizable animations and styling\n * - Event delegation and outside click detection\n * \n * ## Usage\n * ```html\n * <!-- Basic dropdown with slot content -->\n * <nr-dropdown trigger=\"hover\">\n * <button slot=\"trigger\">Menu</button>\n * <div slot=\"content\">\n * <p>Custom content here</p>\n * </div>\n * </nr-dropdown>\n * \n * <!-- Dropdown with predefined items -->\n * <nr-dropdown \n * .items=\"${items}\" \n * placement=\"bottom-start\"\n * trigger=\"click\">\n * <button slot=\"trigger\">Menu</button>\n * </nr-dropdown>\n * \n * <!-- Hover dropdown with custom positioning -->\n * <nr-dropdown \n * trigger=\"hover\" \n * placement=\"top\"\n * size=\"large\">\n * <span slot=\"trigger\">Hover me</span>\n * <div slot=\"content\">Tooltip content</div>\n * </nr-dropdown>\n * ```\n * \n * @element nr-dropdown\n * @fires nr-dropdown-open - Fired when dropdown opens\n * @fires nr-dropdown-close - Fired when dropdown closes\n * @fires nr-dropdown-item-click - Fired when dropdown item is clicked\n * \n * @slot trigger - Element that triggers the dropdown\n * @slot content - Custom content for the dropdown panel\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n * \n * @cssproperty --dropdown-background - Background color of dropdown panel\n * @cssproperty --dropdown-border - Border of dropdown panel\n * @cssproperty --dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --dropdown-border-radius - Border radius of dropdown panel\n * @cssproperty --dropdown-max-width - Maximum width of dropdown panel\n * @cssproperty --dropdown-min-width - Minimum width of dropdown panel\n * @cssproperty --dropdown-max-height - Maximum height of dropdown panel\n */\n@customElement('nr-dropdown')\nexport class NrDropdownElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-icon'];\n\n @property({ type: Array }) items: DropdownItem[] = [];\n @property({ type: Boolean, reflect: true }) open = false;\n @property({ type: String }) placement: DropdownPlacement = DropdownPlacement.Bottom;\n @property({ type: String }) trigger: DropdownTrigger = DropdownTrigger.Hover;\n @property({ type: String }) size: DropdownSize = DropdownSize.Medium;\n @property({ type: String }) animation: DropdownAnimation = DropdownAnimation.Fade;\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) arrow = false;\n @property({ type: Boolean, attribute: 'auto-close' }) autoClose = false;\n @property({ type: Boolean, attribute: 'close-on-outside-click' }) closeOnOutsideClick = true;\n @property({ type: Boolean, attribute: 'close-on-escape' }) closeOnEscape = true;\n @property({ type: Number }) offset = 4;\n @property({ type: Number }) delay = 50;\n @property({ type: String, attribute: 'max-height' }) maxHeight = '300px';\n @property({ type: String, attribute: 'min-width' }) minWidth = 'auto';\n @property({ type: String, attribute: 'cascade-direction' }) cascadeDirection: 'right' \| 'left' \| 'auto' = 'auto';\n @property({ type: Number, attribute: 'cascade-delay' }) cascadeDelay = 50;\n @property({ type: Boolean, attribute: 'cascade-on-hover' }) cascadeOnHover = true;\n\n private dropdownController = new NrDropdownController(this);\n private openSubmenus = new Set<string>();\n private submenuTimers = new Map<string, number>();\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateCascadingAttribute();\n }\n\n override updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n if (changedProperties.has('items')) {\n this.updateCascadingAttribute();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n override firstUpdated(): void {\n }\n\n private updateCascadingAttribute(): void {\n const hasCascading = this.items.some(item => \n (item.options && item.options.length > 0) \|\| !!item.customContent\n );\n if (hasCascading) {\n this.setAttribute('has-cascading', '');\n } else {\n this.removeAttribute('has-cascading');\n }\n }\n\n private handleDropdownPanelClick = (e: Event): void => {\n e.stopPropagation();\n };\n\n private handleItemClick = (item: DropdownItem): void => {\n if (item.disabled) return;\n\n if ((item.options && item.options.length > 0) \|\| item.customContent) {\n this.toggleSubmenu(item.id);\n return;\n }\n\n this.dropdownController.handleItemClick(item);\n };\n\n private handleItemHover = (item: DropdownItem): void => {\n if (!item.options?.length && !item.customContent) return;\n\n this.clearSubmenuTimer(item.id);\n\n if (this.cascadeOnHover) {\n const timer = window.setTimeout(() => {\n this.showSubmenu(item.id);\n }, this.cascadeDelay);\n this.submenuTimers.set(item.id, timer);\n }\n };\n\n private handleItemLeave = (item: DropdownItem): void => {\n if (!item.options?.length && !item.customContent) return;\n\n this.clearSubmenuTimer(item.id);\n\n const timer = window.setTimeout(() => {\n this.hideSubmenu(item.id);\n }, 100);\n this.submenuTimers.set(`hide-${item.id}`, timer);\n };\n\n private handleSubmenuEnter = (itemId: string): void => {\n this.clearSubmenuTimer(`hide-${itemId}`);\n };\n\n private handleSubmenuLeave = (itemId: string): void => {\n const timer = window.setTimeout(() => {\n this.hideSubmenu(itemId);\n }, 100);\n this.submenuTimers.set(`hide-${itemId}`, timer);\n };\n\n private clearSubmenuTimer(key: string): void {\n const timer = this.submenuTimers.get(key);\n if (timer) {\n clearTimeout(timer);\n this.submenuTimers.delete(key);\n }\n }\n\n private toggleSubmenu(itemId: string): void {\n if (this.openSubmenus.has(itemId)) {\n this.hideSubmenu(itemId);\n } else {\n this.showSubmenu(itemId);\n }\n }\n\n private showSubmenu(itemId: string): void {\n this.openSubmenus.add(itemId);\n this.requestUpdate();\n }\n\n private hideSubmenu(itemId: string): void {\n this.openSubmenus.delete(itemId);\n this.requestUpdate();\n }\n\n show(): void {\n this.dropdownController.open();\n }\n\n hide(): void {\n this.dropdownController.close();\n }\n\n toggle(): void {\n this.dropdownController.toggle();\n }\n\n private renderItems(): unknown {\n if (!this.items.length) return nothing;\n\n return html`\n <div class=\"dropdown__items\">\n ${this.items.map(item => {\n if (item.divider) {\n return html`<div class=\"dropdown__divider\"></div>`;\n }\n\n const hasSubmenu = !!(item.options && item.options.length > 0) \|\| !!item.customContent;\n const isSubmenuOpen = hasSubmenu && this.openSubmenus.has(item.id);\n\n return html`\n <div class=\"dropdown__item-container ${classMap({\n 'dropdown__item-container--has-submenu': hasSubmenu\n })}\">\n <button\n class=\"dropdown__item ${classMap({\n 'dropdown__item--disabled': !!item.disabled,\n 'dropdown__item--has-submenu': hasSubmenu\n })}\"\n ?disabled=\"${item.disabled}\"\n @click=\"${() => this.handleItemClick(item)}\"\n @mouseenter=\"${() => hasSubmenu && this.handleItemHover(item)}\"\n @mouseleave=\"${() => hasSubmenu && this.handleItemLeave(item)}\"\n >\n ${item.icon ? html`<nr-icon name=\"${item.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n <span class=\"dropdown__item-label\">${item.label}</span>\n ${hasSubmenu ? html`<nr-icon name=\"chevron-right\" class=\"dropdown__submenu-arrow\"></nr-icon>` : nothing}\n </button>\n \n ${hasSubmenu && isSubmenuOpen ? html`\n <div class=\"dropdown__submenu ${classMap({\n 'dropdown__submenu--right': this.cascadeDirection === 'right' \|\| this.cascadeDirection === 'auto',\n 'dropdown__submenu--left': this.cascadeDirection === 'left'\n })}\"\n @mouseenter=\"${() => this.handleSubmenuEnter(item.id)}\"\n @mouseleave=\"${() => this.handleSubmenuLeave(item.id)}\">\n ${item.customContent ? html`\n <div class=\"dropdown__custom-content\">\n ${typeof item.customContent === 'string' \n ? html`<div .innerHTML=\"${item.customContent}\"></div>`\n : item.customContent\n }\n </div>\n ` : html`\n <div class=\"dropdown__items\">\n ${item.options!.map(subItem => {\n if (subItem.divider) {\n return html`<div class=\"dropdown__divider\"></div>`;\n }\n \n return html`\n <button\n class=\"dropdown__item ${classMap({\n 'dropdown__item--disabled': !!subItem.disabled\n })}\"\n ?disabled=\"${subItem.disabled}\"\n @click=\"${() => this.handleItemClick(subItem)}\"\n >\n ${subItem.icon ? html`<nr-icon name=\"${subItem.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n <span class=\"dropdown__item-label\">${subItem.label}</span>\n </button>\n `;\n })}\n </div>\n `}\n </div>\n ` : nothing}\n </div>\n `;\n })}\n </div>\n `;\n }\n\n override render() {\n const panelClasses = {\n 'dropdown__panel': true,\n 'dropdown__panel--open': this.open,\n [`dropdown__panel--${this.size}`]: true,\n [`dropdown__panel--${this.animation}`]: true,\n [`dropdown__panel--${this.placement}`]: true,\n 'dropdown__panel--with-arrow': this.arrow\n };\n\n const panelStyles = {\n maxHeight: this.maxHeight,\n minWidth: this.minWidth\n };\n\n return html`\n <div class=\"dropdown\">\n <div class=\"dropdown__trigger\">\n <slot name=\"trigger\"></slot>\n </div>\n \n <div \n class=\"${classMap(panelClasses)}\"\n style=\"${styleMap(panelStyles)}\"\n @click=\"${this.handleDropdownPanelClick}\"\n >\n ${this.arrow ? html`<div class=\"dropdown__arrow\"></div>` : nothing}\n \n <slot name=\"header\"></slot>\n \n <div class=\"dropdown__content\">\n <slot name=\"content\">${this.renderItems()}</slot>\n </div>\n \n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}"]}
1	+ {"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n /\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './dropdown.style';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { NrDropdownController } from './controllers/dropdown.controller.js';\nimport '../icon/index.js';\n\nimport {\n DropdownPlacement,\n DropdownTrigger,\n DropdownSize,\n DropdownAnimation,\n DropdownItem\n} from './dropdown.types.js';\n\n/\n # Dropdown Component\n * \n * A versatile dropdown component that provides floating panel functionality with customizable triggers,\n * content, and positioning. Supports both predefined item lists and custom slot content with\n * cascading submenus and interactive elements.\n * \n * ## Features\n * - Multiple trigger modes (hover, click, focus, manual)\n * - Flexible positioning with auto-placement\n * - Cascading submenus with custom content support\n * - Interactive elements (forms, buttons) within dropdowns\n * - Keyboard navigation and accessibility\n * - Customizable animations and styling\n * - Event delegation and outside click detection\n * \n * ## Usage\n * ```html\n * <!-- Basic dropdown with slot content -->\n * <nr-dropdown trigger=\"hover\">\n * <button slot=\"trigger\">Menu</button>\n * <div slot=\"content\">\n * <p>Custom content here</p>\n * </div>\n * </nr-dropdown>\n * \n * <!-- Dropdown with predefined items -->\n * <nr-dropdown \n * .items=\"${items}\" \n * placement=\"bottom-start\"\n * trigger=\"click\">\n * <button slot=\"trigger\">Menu</button>\n * </nr-dropdown>\n * \n * <!-- Hover dropdown with custom positioning -->\n * <nr-dropdown \n * trigger=\"hover\" \n * placement=\"top\"\n * size=\"large\">\n * <span slot=\"trigger\">Hover me</span>\n * <div slot=\"content\">Tooltip content</div>\n * </nr-dropdown>\n * ```\n * \n * @element nr-dropdown\n * @fires nr-dropdown-open - Fired when dropdown opens\n * @fires nr-dropdown-close - Fired when dropdown closes\n * @fires nr-dropdown-item-click - Fired when dropdown item is clicked\n * \n * @slot trigger - Element that triggers the dropdown\n * @slot content - Custom content for the dropdown panel\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n * \n * @cssproperty --dropdown-background - Background color of dropdown panel\n * @cssproperty --dropdown-border - Border of dropdown panel\n * @cssproperty --dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --dropdown-border-radius - Border radius of dropdown panel\n * @cssproperty --dropdown-max-width - Maximum width of dropdown panel\n * @cssproperty --dropdown-min-width - Minimum width of dropdown panel\n * @cssproperty --dropdown-max-height - Maximum height of dropdown panel\n */\n@customElement('nr-dropdown')\nexport class NrDropdownElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-icon'];\n\n @property({ type: Array }) items: DropdownItem[] = [];\n @property({ type: Boolean, reflect: true }) open = false;\n @property({ type: String }) placement: DropdownPlacement = DropdownPlacement.Bottom;\n @property({ type: String }) trigger: DropdownTrigger = DropdownTrigger.Hover;\n @property({ type: String }) size: DropdownSize = DropdownSize.Medium;\n @property({ type: String }) animation: DropdownAnimation = DropdownAnimation.Fade;\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) arrow = false;\n @property({ type: Boolean, attribute: 'auto-close' }) autoClose = false;\n @property({ type: Boolean, attribute: 'close-on-outside-click' }) closeOnOutsideClick = true;\n @property({ type: Boolean, attribute: 'close-on-escape' }) closeOnEscape = true;\n @property({ type: Number }) offset = 4;\n @property({ type: Number }) delay = 50;\n @property({ type: String, attribute: 'max-height' }) maxHeight = '300px';\n @property({ type: String, attribute: 'min-width' }) minWidth = 'auto';\n @property({ type: String, attribute: 'cascade-direction' }) cascadeDirection: 'right' \| 'left' \| 'auto' = 'auto';\n @property({ type: Number, attribute: 'cascade-delay' }) cascadeDelay = 50;\n @property({ type: Boolean, attribute: 'cascade-on-hover' }) cascadeOnHover = true;\n\n private dropdownController = new NrDropdownController(this);\n private openSubmenus = new Set<string>();\n private submenuTimers = new Map<string, number>();\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateCascadingAttribute();\n }\n\n override updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n if (changedProperties.has('items')) {\n this.updateCascadingAttribute();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n override firstUpdated(): void {\n }\n\n private updateCascadingAttribute(): void {\n const hasCascading = this.items.some(item => \n (item.options && item.options.length > 0) \|\| !!item.customContent\n );\n if (hasCascading) {\n this.setAttribute('has-cascading', '');\n } else {\n this.removeAttribute('has-cascading');\n }\n }\n\n private handleDropdownPanelClick = (e: Event): void => {\n e.stopPropagation();\n };\n\n private handleItemClick = (item: DropdownItem): void => {\n if (item.disabled) return;\n\n if ((item.options && item.options.length > 0) \|\| item.customContent) {\n this.toggleSubmenu(item.id);\n return;\n }\n\n this.dropdownController.handleItemClick(item);\n };\n\n private handleItemHover = (item: DropdownItem): void => {\n if (!item.options?.length && !item.customContent) return;\n\n this.clearSubmenuTimer(item.id);\n\n if (this.cascadeOnHover) {\n const timer = window.setTimeout(() => {\n this.showSubmenu(item.id);\n }, this.cascadeDelay);\n this.submenuTimers.set(item.id, timer);\n }\n };\n\n private handleItemLeave = (item: DropdownItem): void => {\n if (!item.options?.length && !item.customContent) return;\n\n this.clearSubmenuTimer(item.id);\n\n const timer = window.setTimeout(() => {\n this.hideSubmenu(item.id);\n }, 100);\n this.submenuTimers.set(`hide-${item.id}`, timer);\n };\n\n private handleSubmenuEnter = (itemId: string): void => {\n this.clearSubmenuTimer(`hide-${itemId}`);\n };\n\n private handleSubmenuLeave = (itemId: string): void => {\n const timer = window.setTimeout(() => {\n this.hideSubmenu(itemId);\n }, 100);\n this.submenuTimers.set(`hide-${itemId}`, timer);\n };\n\n private clearSubmenuTimer(key: string): void {\n const timer = this.submenuTimers.get(key);\n if (timer) {\n clearTimeout(timer);\n this.submenuTimers.delete(key);\n }\n }\n\n private toggleSubmenu(itemId: string): void {\n if (this.openSubmenus.has(itemId)) {\n this.hideSubmenu(itemId);\n } else {\n this.showSubmenu(itemId);\n }\n }\n\n private showSubmenu(itemId: string): void {\n this.openSubmenus.add(itemId);\n this.requestUpdate();\n }\n\n private hideSubmenu(itemId: string): void {\n this.openSubmenus.delete(itemId);\n this.requestUpdate();\n }\n\n show(): void {\n this.dropdownController.open();\n }\n\n hide(): void {\n this.dropdownController.close();\n }\n\n toggle(): void {\n this.dropdownController.toggle();\n }\n\n private renderItems(): unknown {\n if (!this.items.length) return nothing;\n\n return html`\n <div class=\"dropdown__items\">\n ${this.items.map(item => {\n if (item.divider) {\n return html`<div class=\"dropdown__divider\"></div>`;\n }\n\n const hasSubmenu = !!(item.options && item.options.length > 0) \|\| !!item.customContent;\n const isSubmenuOpen = hasSubmenu && this.openSubmenus.has(item.id);\n\n return html`\n <div class=\"dropdown__item-container ${classMap({\n 'dropdown__item-container--has-submenu': hasSubmenu\n })}\">\n <button\n class=\"dropdown__item ${classMap({\n 'dropdown__item--disabled': !!item.disabled,\n 'dropdown__item--has-submenu': hasSubmenu\n })}\"\n ?disabled=\"${item.disabled}\"\n @click=\"${() => this.handleItemClick(item)}\"\n @mouseenter=\"${() => hasSubmenu && this.handleItemHover(item)}\"\n @mouseleave=\"${() => hasSubmenu && this.handleItemLeave(item)}\"\n >\n ${item.icon ? html`<nr-icon name=\"${item.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n <span class=\"dropdown__item-label\">${item.label}</span>\n ${hasSubmenu ? html`<nr-icon name=\"chevron-right\" class=\"dropdown__submenu-arrow\"></nr-icon>` : nothing}\n </button>\n \n ${hasSubmenu && isSubmenuOpen ? html`\n <div class=\"dropdown__submenu ${classMap({\n 'dropdown__submenu--right': this.cascadeDirection === 'right' \|\| this.cascadeDirection === 'auto',\n 'dropdown__submenu--left': this.cascadeDirection === 'left'\n })}\"\n @mouseenter=\"${() => this.handleSubmenuEnter(item.id)}\"\n @mouseleave=\"${() => this.handleSubmenuLeave(item.id)}\">\n ${item.customContent ? html`\n <div class=\"dropdown__custom-content\">\n ${typeof item.customContent === 'string' \n ? html`<div .innerHTML=\"${item.customContent}\"></div>`\n : item.customContent\n }\n </div>\n ` : html`\n <div class=\"dropdown__items\">\n ${item.options!.map(subItem => {\n if (subItem.divider) {\n return html`<div class=\"dropdown__divider\"></div>`;\n }\n \n return html`\n <button\n class=\"dropdown__item ${classMap({\n 'dropdown__item--disabled': !!subItem.disabled\n })}\"\n ?disabled=\"${subItem.disabled}\"\n @click=\"${() => this.handleItemClick(subItem)}\"\n >\n ${subItem.icon ? html`<nr-icon name=\"${subItem.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n <span class=\"dropdown__item-label\">${subItem.label}</span>\n </button>\n `;\n })}\n </div>\n `}\n </div>\n ` : nothing}\n </div>\n `;\n })}\n </div>\n `;\n }\n\n override render() {\n const panelClasses = {\n 'dropdown__panel': true,\n 'dropdown__panel--open': this.open,\n [`dropdown__panel--${this.size}`]: true,\n [`dropdown__panel--${this.animation}`]: true,\n [`dropdown__panel--${this.placement}`]: true,\n 'dropdown__panel--with-arrow': this.arrow\n };\n\n const panelStyles = {\n maxHeight: this.maxHeight,\n minWidth: this.minWidth\n };\n\n return html`\n <div class=\"dropdown\">\n <div class=\"dropdown__trigger\">\n <slot name=\"trigger\"></slot>\n </div>\n \n <div \n class=\"${classMap(panelClasses)}\"\n style=\"${styleMap(panelStyles)}\"\n @click=\"${this.handleDropdownPanelClick}\"\n >\n ${this.arrow ? html`<div class=\"dropdown__arrow\"></div>` : nothing}\n \n <slot name=\"header\"></slot>\n \n <div class=\"dropdown__content\">\n <slot name=\"content\">${this.renderItems()}</slot>\n </div>\n \n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}"]}

package/dropdown.style.js CHANGED Viewed

@@ -240,9 +240,9 @@ export const styles = css `
     align-items: center;
     gap: var(--nuraly-dropdown-item-gap);
     padding: var(--nuraly-dropdown-item-padding);
-    background: transparent;
+    background: var(--nuraly-color-dropdown-item-background);
     border: none;
-    color: var(--nuraly-dropdown-item-color);
+    color: var(--nuraly-color-dropdown-item-text);
     cursor: pointer;
     text-align: left;
     width: 100%;
@@ -251,17 +251,30 @@ export const styles = css `
     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-dropdown-item-hover-background);
-    color: var(--nuraly-dropdown-item-hover-color);
+    background: var(--nuraly-color-dropdown-item-background-hover);
+    color: var(--nuraly-color-dropdown-item-text-hover);
   }
   .dropdown__item:focus {
     outline: none;
-    background: var(--nuraly-dropdown-item-focus-background);
-    color: var(--nuraly-dropdown-item-focus-color);
+    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 {

package/dropdown.style.js.map CHANGED Viewed

	@@ -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 Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/dropdown",
-    "version": "0.0.15",
+    "version": "0.0.17",
     "description": "Dropdown component for NuralyUI",
     "main": "index.js",
     "type": "module",