@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/select/select.component.d.ts

@@ -6,7 +6,7 @@
 import { LitElement } from 'lit';
 import { SelectOption, SelectType, SelectSize, SelectStatus } from './select.types.js';
 import { SelectHost } from './interfaces/index.js';
-declare const HySelectComponent_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;
+declare const HySelectComponent_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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Advanced select component with multiple selection modes, validation, and accessibility features.
  *
@@ -54,22 +54,17 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui
  * @slot before-options - Content rendered before the options list (e.g., search, filters)
  * @slot after-options - Content rendered after the options list (e.g., create button, form)
  *
- * @cssproperty --select-border-color - Border color
- * @cssproperty --select-background - Background color
- * @cssproperty --select-text-color - Text color
- * @cssproperty --select-focus-color - Focus indicator color
- * @cssproperty --select-dropdown-shadow - Dropdown shadow
- * @cssproperty --select-dropdown-max-height - Maximum height of dropdown
- * @cssproperty --select-no-options-color - No options message text color
- * @cssproperty --select-no-options-icon-color - No options icon color
- * @cssproperty --select-no-options-padding - Padding for no options message
- * @cssproperty --select-no-options-gap - Gap between icon and text
- * @cssproperty --select-search-border - Search input border
- * @cssproperty --select-search-background - Search input background
- * @cssproperty --select-search-padding - Search input padding
+ * @csspart trigger - The visible select trigger element (shows selected value and arrow)
+ * @csspart dropdown - The dropdown list container
+ * @csspart option - Each individual option item in the dropdown
+ * @csspart label - The label element above the select trigger
+ * @csspart helper-text - The helper text element below the select
+ * @csspart clear - The clear button shown when clearable is true and a value is selected
+ * @csspart tag - Each selected value tag in multiple selection mode
  */
 export declare class HySelectComponent extends HySelectComponent_base implements SelectHost {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /** Array of options to display in the select dropdown */
     options: SelectOption[];
@@ -112,11 +107,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
     /** Makes select full width */
     block: boolean;
     /** Options dropdown container element */
-    optionsElement: HTMLElement;
+    get optionsElement(): HTMLElement | null;
     /** Main wrapper element */
-    wrapper: HTMLElement;
+    get wrapper(): HTMLElement | null;
     /** Search input element */
-    searchInput?: HTMLInputElement;
+    get searchInput(): HTMLInputElement | null;
     /** Handles option selection logic */
     private selectionController;
     /** Manages dropdown visibility and positioning */

package/dist/src/components/select/select.component.js

@@ -10,7 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, nothing } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, customElement } from 'lit/decorators.js';
 import { styles } from './select.style.js';
 import { map } from 'lit/directives/map.js';
 import { choose } from 'lit/directives/choose.js';
@@ -70,19 +70,13 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
  * @slot before-options - Content rendered before the options list (e.g., search, filters)
  * @slot after-options - Content rendered after the options list (e.g., create button, form)
  *
- * @cssproperty --select-border-color - Border color
- * @cssproperty --select-background - Background color
- * @cssproperty --select-text-color - Text color
- * @cssproperty --select-focus-color - Focus indicator color
- * @cssproperty --select-dropdown-shadow - Dropdown shadow
- * @cssproperty --select-dropdown-max-height - Maximum height of dropdown
- * @cssproperty --select-no-options-color - No options message text color
- * @cssproperty --select-no-options-icon-color - No options icon color
- * @cssproperty --select-no-options-padding - Padding for no options message
- * @cssproperty --select-no-options-gap - Gap between icon and text
- * @cssproperty --select-search-border - Search input border
- * @cssproperty --select-search-background - Search input background
- * @cssproperty --select-search-padding - Search input padding
+ * @csspart trigger - The visible select trigger element (shows selected value and arrow)
+ * @csspart dropdown - The dropdown list container
+ * @csspart option - Each individual option item in the dropdown
+ * @csspart label - The label element above the select trigger
+ * @csspart helper-text - The helper text element below the select
+ * @csspart clear - The clear button shown when clearable is true and a value is selected
+ * @csspart tag - Each selected value tag in multiple selection mode
  */
 let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -185,6 +179,18 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
             this.eventController.handleBlur();
         };
     }
+    /** Options dropdown container element */
+    get optionsElement() {
+        return this.renderRoot.querySelector('.options');
+    }
+    /** Main wrapper element */
+    get wrapper() {
+        return this.renderRoot.querySelector('.wrapper');
+    }
+    /** Search input element */
+    get searchInput() {
+        return this.renderRoot.querySelector('.search-input');
+    }
     /**
      * Component connected to DOM - initialize base functionality
      */
@@ -450,9 +456,8 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         const validationClasses = this.validationController.getValidationClasses();
         return html `
       <slot name="label"></slot>
-      <div 
+      <div
         class="${classMap(Object.assign({ 'wrapper': true }, validationClasses))}"
-        data-theme="${this.currentTheme}"
         tabindex="0"
         role="combobox"
         aria-expanded="${this.show}"
@@ -465,22 +470,23 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         @blur=${this.handleBlur}
       >
         <div class="select">
-          <div class="select-trigger">
+          <div part="trigger" class="select-trigger">
             ${this.renderSelectedContent(selectedOptions)}
           </div>
-          
+
           <div class="icons-container">
             ${this.renderStatusIcon()}
             ${this.renderClearButton(selectedOptions)}
-            <nr-icon 
-              name="chevron-down" 
+            <nr-icon
+              name="chevron-down"
               size="${this.size}"
               class="arrow-icon"
               aria-hidden="true"
             ></nr-icon>
           </div>
-          
+
           <div
+            part="dropdown"
             class="options"
             role="listbox"
             aria-multiselectable="${this.multiple}"
@@ -494,7 +500,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
           </div>
         </div>
       </div>
-      
+
       ${this.renderValidationMessage()}
       <slot name="helper-text"></slot>
     `;
@@ -543,7 +549,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
      */
     renderSlot() {
         return html `
-      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+      <span @click=${this.handleTriggerClick}><slot name="trigger"></slot></span>
       <div
         class="options"
         role="listbox"
@@ -567,13 +573,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         if (this.multiple) {
             // Check if custom display slot should be used
             if (this.useCustomSelectedDisplay) {
-                return html `<slot name="selected-display" .selectedOptions=${selectedOptions}></slot>`;
+                return html `<slot name="selected-display"></slot>`;
             }
             // Default behavior: render tags
             return map(selectedOptions, (option) => html `
-        <span class="tag">
+        <span part="tag" class="tag">
           <span class="tag-label">${option.label}</span>
-          <nr-icon 
+          <nr-icon
             name="x"
             size="${this.size}"
             class="tag-close"
@@ -611,6 +617,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         }
         return html `
       <nr-icon
+        part="clear"
         name="x"
         size="${this.size}"
         class="clear-icon"
@@ -651,6 +658,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
             const isFocused = focusedOption && focusedOption.value === option.value;
             return html `
         <div
+          part="option"
           class="${classMap({
                 'option': true,
                 'selected': isSelected,
@@ -699,6 +707,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
     }
 };
 HySelectComponent.styles = styles;
+HySelectComponent.useShadowDom = true;
 __decorate([
     property({ type: Array })
 ], HySelectComponent.prototype, "options", void 0);
@@ -759,15 +768,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], HySelectComponent.prototype, "block", void 0);
-__decorate([
-    query('.options')
-], HySelectComponent.prototype, "optionsElement", void 0);
-__decorate([
-    query('.wrapper')
-], HySelectComponent.prototype, "wrapper", void 0);
-__decorate([
-    query('.search-input')
-], HySelectComponent.prototype, "searchInput", void 0);
 HySelectComponent = __decorate([
     customElement('nr-select')
 ], HySelectComponent);