@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,170 +1,113 @@
-import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property as s,query as o,customElement as n}from"lit/decorators.js";import{map as a}from"lit/directives/map.js";import{choose as l}from"lit/directives/choose.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{unsafeHTML as u}from"lit/directives/unsafe-html.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";import{renderValidationMessage as p}from"@nuralyui/common/utils";import{BaseComponentController as v,BaseValidationController as y}from"@nuralyui/common/controllers";const g=t`
+import{css as t,nothing as i,html as e,LitElement as s}from"lit";import{property as o,customElement as r}from"lit/decorators.js";import{map as n}from"lit/directives/map.js";import{choose as a}from"lit/directives/choose.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{unsafeHTML as l}from"lit/directives/unsafe-html.js";import"lit/directives/if-defined.js";const d=t`
   :host {
     width: fit-content;
     display: block;
-    font-family: var(--nuraly-select-font-family, var(--nuraly-font-family));
-    font-size: var(--nuraly-select-font-size, var(--nuraly-font-size-sm));
-    line-height: var(--nuraly-select-line-height, var(--nuraly-line-height-normal));
-    margin: var(--nuraly-select-margin, 0);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    margin: 0;
   }
 
-  /* Host attribute selectors for configuration */
+  /* Disabled */
   :host([disabled]) {
-    opacity: var(--nuraly-select-disabled-opacity, 0.5);
+    opacity: 0.5;
     pointer-events: none;
   }
-
   :host([disabled]) .wrapper {
-    background-color: var(--nuraly-select-disabled-background, var(--nuraly-color-background-disabled));
-    border-color: var(--nuraly-select-disabled-border-color, var(--nuraly-color-border));
-    color: var(--nuraly-select-disabled-text-color, var(--nuraly-color-text-disabled));
+    background-color: #f4f4f4;
+    border-color: var(--nr-border, #e0e0e0);
+    color: var(--nr-disabled, #c6c6c6);
     cursor: not-allowed;
   }
 
-  /* Size variants */
-  :host([size='small']) .wrapper {
-    height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
-    min-height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
-    font-size: var(--nuraly-select-small-font-size, var(--nuraly-font-size-xs));
+  /* Size: Small */
+  :host([size="small"]) .wrapper {
+    min-height: 28px;
+    font-size: 12px;
   }
-
-  :host([size='small']) .select-trigger {
-    padding: var(--nuraly-select-small-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
-    padding-right: calc(var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm)) + var(--nuraly-spacing-5));
+  :host([size="small"]) .select-trigger {
+    padding: 4px 8px;
+    padding-right: 28px;
   }
-
-  :host([size='small']) .icons-container nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm));
+  :host([size="small"]) .option {
+    padding: 4px 8px;
+    font-size: 12px;
   }
 
-  :host([size='small']) .option {
-    padding: var(--nuraly-select-small-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
-    font-size: var(--nuraly-select-small-font-size, var(--nuraly-font-size-xs));
-    min-height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
+  /* Size: Medium */
+  :host([size="medium"]) .wrapper {
+    min-height: 32px;
+    font-size: 13px;
   }
-
-  :host([size='small']) .option-icon,
-  :host([size='small']) .option nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm));
+  :host([size="medium"]) .select-trigger {
+    padding: 5px 10px;
+    padding-right: 30px;
   }
-
-  :host([size='medium']) .wrapper {
-    min-height: var(--nuraly-select-medium-height, var(--nuraly-size-lg));
-    font-size: var(--nuraly-select-medium-font-size, var(--nuraly-font-size-sm));
+  :host([size="medium"]) .option {
+    padding: 5px 10px;
+    font-size: 13px;
   }
 
-  :host([size='medium']) .select-trigger {
-    padding: var(--nuraly-select-medium-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
-    padding-right: calc(var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base)) + var(--nuraly-spacing-5));
+  /* Size: Large */
+  :host([size="large"]) .wrapper {
+    min-height: 38px;
+    font-size: 14px;
   }
-
-  :host([size='medium']) .icons-container nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base));
+  :host([size="large"]) .select-trigger {
+    padding: 8px 12px;
+    padding-right: 34px;
   }
-
-  :host([size='medium']) .option {
-    padding: var(--nuraly-select-medium-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
-    font-size: var(--nuraly-select-medium-font-size, var(--nuraly-font-size-sm));
-    min-height: var(--nuraly-select-medium-height, var(--nuraly-size-lg));
+  :host([size="large"]) .option {
+    padding: 8px 12px;
+    font-size: 14px;
   }
 
-  :host([size='medium']) .option-icon,
-  :host([size='medium']) .option nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base));
-  }
-
-  :host([size='large']) .wrapper {
-    min-height: var(--nuraly-select-large-height, var(--nuraly-size-xl));
-    font-size: var(--nuraly-select-large-font-size, var(--nuraly-font-size-lg));
-  }
-
-  :host([size='large']) .select-trigger {
-    padding: var(--nuraly-select-large-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
-    padding-right: calc(var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl)) + var(--nuraly-spacing-5));
-  }
-
-  :host([size='large']) .icons-container nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl));
-  }
+  /* Status */
+  :host([status="error"]) .wrapper { border-color: var(--nr-danger, #da1e28); }
+  :host([status="warning"]) .wrapper { border-color: var(--nr-warning, #f1c21b); }
+  :host([status="success"]) .wrapper { border-color: var(--nr-success, #198038); }
 
-  :host([size='large']) .option {
-    padding: var(--nuraly-select-large-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
-    font-size: var(--nuraly-select-large-font-size, var(--nuraly-font-size-lg));
-    min-height: var(--nuraly-select-large-height, var(--nuraly-size-xl));
-  }
-
-  :host([size='large']) .option-icon,
-  :host([size='large']) .option nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl));
-  }
-
-  /* Status variants */
-  :host([status='error']) .wrapper {
-    border-color: var(--nuraly-select-error-border-color, var(--nuraly-color-danger));
-  }
-
-  :host([status='warning']) .wrapper {
-    border-color: var(--nuraly-select-warning-border-color, var(--nuraly-color-warning));
-  }
-
-  :host([status='success']) .wrapper {
-    border-color: var(--nuraly-select-success-border-color, var(--nuraly-color-success));
-  }
-
-  /* Type variants */
-  :host([type='inline']) {
+  /* Type: inline */
+  :host([type="inline"]) {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2);
-  }
-
-  :host([type='inline']) .wrapper {
-    flex: 1;
+    gap: 0.5rem;
   }
+  :host([type="inline"]) .wrapper { flex: 1; }
 
   /* Block (full width) */
-  :host([block]) {
-    width: 100%;
-  }
-
-  :host([block]) .wrapper {
-    width: 100%;
-  }
+  :host([block]) { width: 100%; }
+  :host([block]) .wrapper { width: 100%; }
 
-  /* Show dropdown */
-  :host([show]) .options {
-    display: flex !important;
+  /* Arrow rotation when open */
+  :host([show]) .arrow-icon {
+    transform: rotate(180deg);
   }
 
-  /* Main wrapper container */
+  /* Wrapper */
   .wrapper {
     position: relative;
-    width: var(--nuraly-select-width, fit-content);
-    background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
-    border: var(--nuraly-select-border-width, var(--nuraly-border-width-1)) solid
-            var(--nuraly-select-border-color, var(--nuraly-color-border));
-    border-radius: var(--nuraly-select-border-radius, var(--nuraly-border-radius-md));
-    transition: all var(--nuraly-select-transition-duration, var(--nuraly-transition-fast))
-                var(--nuraly-select-transition-timing, ease-in-out);
+    width: fit-content;
+    background-color: var(--nr-bg, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 8px;
+    transition: all 0.15s ease-in-out;
     cursor: pointer;
     outline: none;
-    margin: var(--nuraly-select-wrapper-margin, 0);
-    min-height: var(--nuraly-select-min-height, var(--nuraly-size-lg));
+    margin: 0;
+    min-height: 32px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    /* Ensure dropdown can overflow the wrapper */
     overflow: visible;
   }
-
   .wrapper:hover:not(:disabled) {
-    border-color: var(--nuraly-select-border-hover, var(--nuraly-color-primary));
+    border-color: var(--nr-primary, #7c3aed);
   }
-
   .wrapper:focus,
   .wrapper:focus-within {
-    border-color: var(--nuraly-select-border-focus, var(--nuraly-color-primary));
-    box-shadow: var(--nuraly-focus-ring);
+    border-color: var(--nr-primary, #7c3aed);
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.2);
   }
 
   /* Select container */
@@ -173,243 +116,159 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
     flex-direction: column;
   }
 
-  /* Select trigger (main display area) */
+  /* Trigger */
   .select-trigger {
     display: flex;
     align-items: center;
-    padding: var(--nuraly-select-padding-top, var(--nuraly-spacing-2))
-             calc(var(--nuraly-select-icon-size, var(--nuraly-font-size-base)) + var(--nuraly-spacing-5))
-             var(--nuraly-select-padding-bottom, var(--nuraly-spacing-2))
-             var(--nuraly-select-padding-left, var(--nuraly-spacing-3));
-    color: var(--nuraly-select-color, var(--nuraly-color-text));
+    padding: 5px 30px 5px 10px;
+    color: var(--nr-text, #161616);
     font-size: inherit;
     line-height: inherit;
     word-break: break-word;
     flex: 1;
     min-height: 0;
     flex-wrap: wrap;
-    gap: var(--nuraly-select-tag-margin, var(--nuraly-spacing-1));
+    gap: 0.25rem;
     box-sizing: border-box;
   }
 
-  .select-trigger:empty:before {
-    content: attr(data-placeholder);
-    color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
-    font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-font-size-sm));
+  /* Placeholder */
+  .placeholder {
+    color: var(--nr-text-secondary, #525252);
+    font-size: 13px;
   }
 
-  /* Multi-select tags */
+  /* Tags (multi-select) */
   .tag {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1);
-    background-color: var(--nuraly-select-tag-background, var(--nuraly-color-background-active));
-    color: var(--nuraly-select-tag-color, var(--nuraly-color-text));
-    padding: var(--nuraly-select-tag-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
-    border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-border-radius-xs));
-    font-size: calc(var(--nuraly-select-font-size, var(--nuraly-font-size-sm)) - 1px);
+    gap: 4px;
+    background-color: var(--nr-bg-hover, #f4f4f4);
+    color: var(--nr-text, #161616);
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 12px;
     max-width: 100%;
   }
-
   .tag-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
   .tag-close {
-    color: var(--nuraly-select-tag-close-color, var(--nuraly-color-text-secondary));
+    color: var(--nr-text-secondary, #525252);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
-    height: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
-    border-radius: var(--nuraly-border-radius-full);
-    transition: color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
-  }
-
-  .tag-close:hover {
-    color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-color-text));
+    border-radius: 50%;
+    transition: color 0.15s;
   }
+  .tag-close:hover { color: var(--nr-text, #161616); }
 
   /* Icons container */
   .icons-container {
     position: absolute;
     top: 50%;
-    right: var(--nuraly-spacing-3);
+    right: 0.75rem;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-1);
+    gap: 0.25rem;
     pointer-events: none;
   }
-
   .icons-container nr-icon {
-    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
-    --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
     pointer-events: auto;
     cursor: pointer;
-    transition: color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
-  }
-
-  .icons-container nr-icon:hover {
-    --nuraly-icon-color: var(--nuraly-color-select-icon-hover, var(--nuraly-color-text));
+    color: var(--nr-text-secondary, #525252);
+    transition: color 0.15s;
   }
+  .icons-container nr-icon:hover { color: var(--nr-text, #161616); }
 
   .arrow-icon {
-    --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-font-size-base));
-    transition: transform var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+    transition: transform 0.15s;
     pointer-events: none !important;
   }
 
-  :host([show]) .arrow-icon {
-    transform: rotate(180deg);
-  }
-
-  /* Dropdown options */
+  /* Dropdown */
   .options {
-    /* Fixed positioning to escape overflow containers */
     position: fixed;
-    /* top/left will be set by controller */
-    background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
-    border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, var(--nuraly-border-width-1))) solid
-            var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
-    border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, var(--nuraly-border-radius-md)));
-    box-shadow: var(--nuraly-select-dropdown-shadow, var(--nuraly-shadow-lg));
-    z-index: var(--nuraly-select-dropdown-z-index, var(--nuraly-z-dropdown));
-    max-height: var(--nuraly-select-dropdown-max-height, auto);
+    background-color: var(--nr-surface, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+    max-height: auto;
     overflow-y: auto;
     overflow-x: hidden;
     display: none;
     flex-direction: column;
-    animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
-    /* Ensure proper containment and exact wrapper width */
+    animation: nr-select-dropdown-enter 0.15s ease-out;
     box-sizing: border-box;
-    /* Allow overriding width via either of these custom props */
-    width: var(
-      --nuraly-select-dropdown-width,
-      var(--select-dropdown-width, max-content)
-    );
-    /* Create new stacking context to prevent layering issues */
+    width: max-content;
     isolation: isolate;
-    /* Ensure solid background to prevent visual bleed-through */
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-    /* Prevent pointer events when hidden */
-    pointer-events: none;
   }
 
+  /* Show dropdown — must come after base .options */
   :host([show]) .options {
-    pointer-events: auto;
+    display: flex !important;
+    pointer-events: auto !important;
   }
 
   .options.placement-top {
-    animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
-  }
-
-  .options.placement-bottom {
-    animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
+    animation: nr-select-dropdown-enter-top 0.15s ease-out;
   }
 
-  @keyframes dropdown-enter {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  @keyframes nr-select-dropdown-enter {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
-
-  @keyframes dropdown-enter-top {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  @keyframes nr-select-dropdown-enter-top {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
-  /* Search container - sticky at top of dropdown */
+  /* Search */
   .search-container {
     position: sticky;
     top: 0;
-    z-index: var(--nuraly-z-sticky);
-    background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
-    border-bottom: var(--nuraly-select-border-width, var(--nuraly-border-width-1)) solid
-                   var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
-    padding: var(--nuraly-spacing-2);
+    z-index: 1;
+    background-color: var(--nr-surface, #ffffff);
+    border-bottom: 1px solid var(--nr-border, #e0e0e0);
+    padding: 0.5rem;
     margin: 0;
-    /* Ensure it stays above options during scroll */
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    /* Ensure proper stacking and smooth scrolling */
-    will-change: transform;
-    transform: translateZ(0);
   }
-
-  /* Search input styling */
   .search-container .search-input {
     width: 100%;
-    max-width: var(--nuraly-select-input-container-max-width, var(--nuraly-select-width));
-    --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-border-radius-md));
-    --nuraly-input-background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
-    --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-color-border));
-    --nuraly-input-text-color: var(--nuraly-select-color, var(--nuraly-color-text));
-    --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
-  }
-
-  /* Search icon in the search input */
-  .search-container .search-icon {
-    --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
   }
 
-  /* Options list container - ensure proper scroll behavior with sticky search */
-  .options:has(.search-container) {
-    /* Add small padding-top when search is present to ensure proper separation */
-    padding-top: 0;
-  }
-
-  /* Option items */
+  /* Options */
   .option {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2);
-    padding: var(--nuraly-select-option-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
-    min-height: var(--nuraly-select-option-min-height, auto);
-    color: var(--nuraly-select-option-color, var(--nuraly-color-text));
-    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
+    gap: 6px;
+    padding: 6px 10px;
+    color: var(--nr-text, #161616);
+    font-size: 13px;
     cursor: pointer;
-    transition: background-color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+    transition: background-color 0.15s;
     position: relative;
   }
-
-  /* First option after search container should have no extra margin */
-  .search-container + .option {
-    margin-top: 0;
-  }
-
-  .option:hover {
-    background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
+  .option:hover:not(.selected):not(.disabled) {
+    background-color: rgba(124, 58, 237, 0.08);
+    color: var(--nr-primary, #7c3aed);
+    cursor: pointer;
   }
-
   .option.selected {
-    background-color: var(--nuraly-select-option-selected-background, var(--nuraly-color-primary));
-    color: var(--nuraly-select-option-selected-color, var(--nuraly-color-text-on-color));
+    background-color: var(--nr-primary, #7c3aed);
+    color: var(--nr-text-on-color, #ffffff);
   }
-
   .option.focused {
-    background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
-    outline: 2px solid var(--nuraly-select-border-focus, var(--nuraly-color-primary));
-    outline-offset: -2px;
+    background-color: rgba(124, 58, 237, 0.08);
+    color: var(--nr-primary, #7c3aed);
   }
-
   .option.disabled {
-    opacity: var(--nuraly-select-disabled-opacity, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -417,95 +276,102 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
     flex: 1;
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-2);
+    gap: 0.5rem;
   }
-
-  .option-icon {
-    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
-    --nuraly-icon-color: currentColor;
-  }
-
+  .option-icon { color: currentColor; }
   .option-text {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
   .option-description {
-    font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm)) - 1px);
+    font-size: 12px;
     opacity: 0.7;
-    margin-top: var(--nuraly-spacing-1);
-  }
-
-  .check-icon {
-    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
-    --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-color-text-on-color));
+    margin-top: 0.25rem;
   }
+  .check-icon { color: var(--nr-text-on-color, #ffffff); }
 
+  /* No options */
   .no-options {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--select-no-options-padding, var(--nuraly-spacing-6) var(--nuraly-spacing-4));
-    color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
-    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
+    padding: 12px 10px;
+    color: var(--nr-text-secondary, #525252);
+    font-size: 13px;
     cursor: default;
     user-select: none;
   }
-
   .no-options-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--select-no-options-gap, var(--nuraly-spacing-2));
+    gap: 0.5rem;
     text-align: center;
   }
-
   .no-options-icon {
-    --nuraly-icon-width: var(--nuraly-spacing-6);
-    --nuraly-icon-color: var(--select-no-options-icon-color, var(--nuraly-color-border));
     opacity: 0.8;
-  }
-
-  .no-options-text {
-    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
-    color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
-    line-height: 1.4;
+    color: var(--nr-border, #e0e0e0);
   }
 
   /* Validation message */
   .validation-message {
     display: block;
-    margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-spacing-1));
-    font-size: var(--nuraly-select-message-font-size, var(--nuraly-font-size-xs));
-    color: var(--nuraly-select-error-message-color, var(--nuraly-color-danger));
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: var(--nr-danger, #da1e28);
   }
+  .validation-message.warning { color: var(--nr-warning, #f1c21b); }
+  .validation-message.success { color: var(--nr-success, #198038); }
 
-  .validation-message.warning {
-    color: var(--nuraly-select-warning-message-color, var(--nuraly-color-warning));
+  /* Label slot */
+  ::slotted([slot="label"]) {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+    color: var(--nr-text, #161616);
   }
 
-  .validation-message.success {
-    color: var(--nuraly-select-success-message-color, var(--nuraly-color-success));
+  /* Helper text slot */
+  ::slotted([slot="helper-text"]) {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: var(--nr-text-secondary, #525252);
   }
 
-  /* Slotted content styles */
-  ::slotted([slot='label']) {
-    display: block;
-    margin-bottom: var(--nuraly-spacing-1);
-    font-weight: 500;
-    color: var(--nuraly-select-color, var(--nuraly-color-text));
+  /* Status icons */
+  .status-icon.warning { color: var(--nr-warning, #f1c21b); }
+  .status-icon.error { color: var(--nr-danger, #da1e28); }
+  .status-icon.success { color: var(--nr-success, #198038); }
+
+  /* Clear icon */
+  .clear-icon {
+    color: var(--nr-text-secondary, #525252);
+    cursor: pointer;
+    pointer-events: auto !important;
   }
+  .clear-icon:hover { color: var(--nr-text, #161616); }
 
-  ::slotted([slot='helper-text']) {
-    display: block;
-    margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-spacing-1));
-    font-size: var(--nuraly-select-message-font-size, var(--nuraly-font-size-xs));
-    color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
+  /* Button type */
+  .select-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 4px;
+    background-color: var(--nr-surface, #ffffff);
+    color: var(--nr-text, #161616);
+    cursor: pointer;
+    font-size: inherit;
+    transition: all 0.15s;
   }
+  .select-button:hover { border-color: var(--nr-primary, #7c3aed); }
+  .select-button:disabled { opacity: 0.5; cursor: not-allowed; }
 
-  /* Accessibility improvements */
+  /* Accessibility */
   @media (prefers-reduced-motion: reduce) {
     .options,
     .wrapper,
@@ -517,18 +383,39 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
     }
   }
 
-  /* High contrast mode support */
   @media (prefers-contrast: high) {
-    .wrapper {
-      border-width: 2px;
-    }
-    
+    .wrapper { border-width: 2px; }
     .wrapper:focus,
-    .wrapper:focus-within {
-      outline: 3px solid;
-    }
+    .wrapper:focus-within { outline: 3px solid; }
   }
-`;var m,f,b,w,x,z,O,E,k;!function(t){t.Default="default",t.Inline="inline",t.Button="button",t.Slot="slot"}(m||(m={})),function(t){t.Default="default",t.Warning="warning",t.Error="error",t.Success="success"}(f||(f={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(b||(b={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(w||(w={})),function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(x||(x={})),function(t){t.Default="default",t.Solid="solid",t.Outline="outline",t.Borderless="borderless"}(z||(z={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(O||(O={})),function(t){t.None="none",t.StartsWith="starts-with",t.Contains="contains",t.Fuzzy="fuzzy"}(E||(E={}));class S extends v{}class $ extends S{constructor(){super(...arguments),this._selectedOptions=[],this._initialized=!1}getSelectedOptions(){return[...this._selectedOptions]}getSelectedOption(){return this._selectedOptions[0]}selectOption(t){try{if(this.isOptionDisabled(t))return;const e=this.host.multiple,i=this.getCurrentValue();e?this.isOptionSelected(t)||(this._selectedOptions=[...this._selectedOptions,t],this.updateHostValue(),this.dispatchChangeEvent(i)):(this.isOptionSelected(t)?this._selectedOptions=[]:this._selectedOptions=[t],this.updateHostValue(),this.dispatchChangeEvent(i)),this.requestUpdate()}catch(t){this.handleError(t,"selectOption")}}unselectOption(t){try{if(this.isOptionSelected(t)){const e=this.getCurrentValue();this._selectedOptions=this._selectedOptions.filter(e=>e.value!==t.value),this.updateHostValue(),this.dispatchChangeEvent(e),this.requestUpdate()}}catch(t){this.handleError(t,"unselectOption")}}clearSelection(){try{if(this._selectedOptions.length>0){const t=this.getCurrentValue();this._selectedOptions=[],this.updateHostValue(),this.dispatchChangeEvent(t),this.requestUpdate()}}catch(t){this.handleError(t,"clearSelection")}}isOptionSelected(t){return this._selectedOptions.some(e=>e.value===t.value)}isOptionDisabled(t){return Boolean(t.disabled)||this.host.disabled}toggleOption(t){this.isOptionSelected(t)?this.unselectOption(t):this.selectOption(t)}initializeFromValue(){try{if(this._initialized)return;const t=this.host.value;if(!t||Array.isArray(t)&&0===t.length)return;const e=Array.isArray(t)?t:[t],i=this.host.options.filter(t=>e.includes(t.value));i.length>0&&(this._selectedOptions=this.host.multiple?i:[i[0]],this.requestUpdate()),this._initialized=!0}catch(t){this.handleError(t,"initializeFromValue")}}updateHostValue(){var t;const e=this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||"",i=this.host.value;let r=!1;if(this.host.multiple){const t=Array.isArray(i)?i:[],s=Array.isArray(e)?e:[];r=t.length===s.length&&t.every((t,e)=>t===s[e])}else r=i===e;r||(this.host.value=e)}getCurrentValue(){var t;return this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||""}dispatchChangeEvent(t){const e={value:this.getCurrentValue(),selectedOptions:this.getSelectedOptions(),previousValue:t};this.dispatchEvent(new CustomEvent("nr-change",{detail:e,bubbles:!0,composed:!0}))}hostUpdated(){this.syncWithHostOptions()}syncWithHostOptions(){try{this._selectedOptions=this._selectedOptions.filter(t=>this.host.options.some(e=>e.value===t.value)),this._selectedOptions=this._selectedOptions.map(t=>this.host.options.find(e=>e.value===t.value)||t),this.updateHostValue()}catch(t){this.handleError(t,"syncWithHostOptions")}}}class C extends S{constructor(t,e,i){super(t),this.selectionController=e,this.dropdownController=i,this._focusedIndex=-1,this._hasKeyboardNavigated=!1}handleKeyDown(t){try{const e=this.isSearchInputFocused();switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdownController.isOpen?this.navigateNext():this.openDropdown();break;case"ArrowUp":t.preventDefault(),this.dropdownController.isOpen?this.navigatePrevious():this.openDropdown();break;case"Enter":this.dropdownController.isOpen?e&&this._focusedIndex>=0?(t.preventDefault(),this.selectFocused()):e||(t.preventDefault(),this.selectFocused()):(t.preventDefault(),this.openDropdown());break;case" ":e||(t.preventDefault(),this.dropdownController.isOpen?this.selectFocused():this.openDropdown());break;case"Escape":t.preventDefault(),this.closeDropdown();break;case"Tab":this.closeDropdown();break;case"Home":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(0));break;case"End":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(this.host.options.length-1));break;default:1===t.key.length&&/[a-zA-Z0-9]/.test(t.key)&&this.handleAlphanumericKey(t.key.toLowerCase())}}catch(t){this.handleError(t,"handleKeyDown")}}navigateNext(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(0);let e=this._focusedIndex+1;e>=t.length&&(e=0),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigateNext")}}navigatePrevious(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(t.length-1);let e=this._focusedIndex-1;e<0&&(e=t.length-1),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigatePrevious")}}selectFocused(){try{const t=this.getNavigableOptions()[this._focusedIndex];t&&!this.selectionController.isOptionDisabled(t)&&(this.selectionController.selectOption(t),this.host.multiple||this.closeDropdown())}catch(t){this.handleError(t,"selectFocused")}}openDropdown(){try{this.dropdownController.open(),this._hasKeyboardNavigated=!1,this._focusedIndex=-1}catch(t){this.handleError(t,"openDropdown")}}closeDropdown(){try{this.dropdownController.close(),this._focusedIndex=-1,this._hasKeyboardNavigated=!1}catch(t){this.handleError(t,"closeDropdown")}}setFocusedIndex(t){try{const e=this.getNavigableOptions();t>=0&&t<e.length&&(this._focusedIndex=t,this.dispatchFocusEvent(e[t],t),this.requestUpdate(),this.scrollToFocusedOption(t))}catch(t){this.handleError(t,"setFocusedIndex")}}scrollToFocusedOption(t){var e;try{const i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".options");if(!i)return;setTimeout(()=>{const e=i.querySelector(".option.focused");if(e)e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});else{const e=40,r=i.clientHeight,s=i.scrollTop,o=t*e,n=o+e,a=s+r;o<s?i.scrollTo({top:o,behavior:"smooth"}):n>a&&i.scrollTo({top:n-r,behavior:"smooth"})}},10)}catch(t){console.warn("Failed to scroll to focused option:",t)}}get focusedIndex(){return this._focusedIndex}get focusedOption(){return this.getNavigableOptions()[this._focusedIndex]}handleAlphanumericKey(t){try{const e=this.getNavigableOptions(),i=this._focusedIndex+1;for(let r=0;r<e.length;r++){const s=(i+r)%e.length;if(e[s].label.toLowerCase().startsWith(t)){this.setFocusedIndex(s),this.dropdownController.isOpen||this.openDropdown();break}}}catch(t){this.handleError(t,"handleAlphanumericKey")}}getNavigableOptions(){const t=this.host;if(!t.options||!Array.isArray(t.options))return[];let e=t.options;return t.searchable&&t.searchQuery&&"function"==typeof t.getFilteredOptions&&(e=t.getFilteredOptions()),e.filter(t=>!t.disabled)}dispatchFocusEvent(t,e){const i={focusedOption:t,focusedIndex:e};this.dispatchEvent(new CustomEvent("nr-select-focus",{detail:i,bubbles:!0,composed:!0}))}isSearchInputFocused(){var t;try{const e=this.host;if(!e.searchable)return!1;const i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".search-input");return!!i&&(document.activeElement===i||i.shadowRoot&&i.shadowRoot.querySelector("input")===i.shadowRoot.activeElement||i.contains(document.activeElement))}catch(t){return!1}}hostUpdated(){this.dropdownController.isOpen||-1===this._focusedIndex||(this._focusedIndex=-1)}}function A(t){if(t.parentElement)return t.parentElement;const e=t.getRootNode();return e instanceof ShadowRoot?e.host:null}function I(t,e,i={}){var r,s;const{offset:o=4,viewportMargin:n=8}=i,a=t.getBoundingClientRect(),l=e.getBoundingClientRect(),c=(null===(r=window.visualViewport)||void 0===r?void 0:r.height)||window.innerHeight,h=(null===(s=window.visualViewport)||void 0===s?void 0:s.width)||window.innerWidth,u=function(t){let e=t;for(;e;){const t=A(e);if(!t||t===document.body||t===document.documentElement)break;if(t instanceof HTMLElement){const e=getComputedStyle(t),i=e.transform,r=e.willChange,s=e.filter,o=e.perspective,n=e.contain;if(i&&"none"!==i||o&&"none"!==o||s&&"none"!==s||"transform"===r||"perspective"===r||"filter"===r||n&&n.includes("paint"))return t}e=t}return null}(e);let d={top:0,left:0};if(u){const t=u.getBoundingClientRect();d={top:t.top,left:t.left}}const p=c-a.bottom,v=a.top,y=l.height||200,g=function(t,e,i){return i>=t?"bottom":e>=t||e>i?"top":"bottom"}(y,v,p);let m;m="bottom"===g?a.bottom+o:a.top-y-o;let f=a.left;const b=a.width;return f=Math.max(n,Math.min(f,h-b-n)),m=Math.max(n,Math.min(m,c-y-n)),u&&(m-=d.top,f-=d.left),{top:m,left:f,width:a.width,placement:g}}function N(t,e,i,r={}){var s;const{viewportMargin:o=8,maxHeight:n}=r,a=(null===(s=window.visualViewport)||void 0===s?void 0:s.height)||window.innerHeight,l=e.getBoundingClientRect(),c=t.scrollHeight;let h;h="bottom"===i?a-l.bottom-o-2:l.top-o-2,n?(t.style.maxHeight=n,t.style.overflowY="auto"):c>h?(t.style.maxHeight=`${h}px`,t.style.overflowY="auto"):(t.style.maxHeight=`${c}px`,t.style.overflowY="auto")}class D extends S{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this.handleResize=()=>{this._isOpen&&this.calculatePosition()},this.handleScroll=()=>{this._isOpen&&this._triggerElement&&(!function(t){var e;const i=t.getBoundingClientRect(),r=(null===(e=window.visualViewport)||void 0===e?void 0:e.height)||window.innerHeight;return i.bottom>=0&&i.top<=r}(this._triggerElement)?this.close():this.calculatePosition())}}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}open(){try{this._isOpen||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),this.findElements(),setTimeout(()=>{this.calculatePosition()},10),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{this.host.setupEventListeners()},50),this.focusSearchInput(),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&this.host.removeEventListeners(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}focusSearchInput(){try{const t=this.host;t&&t.searchable&&setTimeout(()=>{var e;const i=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector(".search-input");i&&"function"==typeof i.focus&&i.focus()},100)}catch(t){console.warn("Failed to focus search input:",t)}}calculatePosition(){try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const t=I(this._triggerElement,this._dropdownElement,{offset:4,viewportMargin:8});this._position=t,this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}resetPosition(){try{if(this._dropdownElement){t=this._dropdownElement,["position","top","left","right","bottom","width","min-width","max-height","min-height","height","overflow-y","transform","display","opacity","visibility","z-index"].forEach(e=>t.style.removeProperty(e)),t.classList.remove("placement-top","placement-bottom");this.host.maxHeight||this._dropdownElement.style.removeProperty("max-height")}}catch(t){this.handleError(t,"resetPosition")}var t}setElements(t,e){this._dropdownElement=t,this._triggerElement=e}findElements(){try{const t=this._host;if(t.optionsElement&&t.wrapper)return this._dropdownElement=t.optionsElement,void(this._triggerElement=t.wrapper);t.shadowRoot&&(this._dropdownElement=t.shadowRoot.querySelector(".options"),this._triggerElement=t.shadowRoot.querySelector(".wrapper"))}catch(t){this.handleError(t,"findElements")}}applyPosition(){var t;try{if(!this._dropdownElement||!this._triggerElement)return;const e=this.host.maxHeight,i=null===(t=getComputedStyle(this._dropdownElement).getPropertyValue("--nuraly-select-local-dropdown-max-height"))||void 0===t?void 0:t.trim(),r="auto"===i||!e&&"auto"===i;!function(t,e,i="9999"){t.style.position="fixed",t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.removeProperty("right"),t.style.removeProperty("bottom"),t.style.minWidth=`${e.width}px`,t.style.removeProperty("width"),t.style.zIndex=i,t.style.height="auto",t.style.minHeight="auto",t.classList.remove("placement-top","placement-bottom"),t.classList.add(`placement-${e.placement}`)}(this._dropdownElement,this._position,"var(--nuraly-select-dropdown-z-index, 9999)"),e||r||(this._dropdownElement.style.maxHeight="none"),e?N(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10,maxHeight:e}):r?(this._dropdownElement.style.removeProperty("max-height"),this._dropdownElement.style.overflowY="visible"):N(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10})}catch(t){this.handleError(t,"applyPosition")}}getAvailableSpace(){var t,e;if(!this._triggerElement)return{above:0,below:0,left:0,right:0};const i=this._triggerElement.getBoundingClientRect(),r=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth;return{above:i.top,below:r-i.bottom,left:i.left,right:s-i.right}}hostConnected(){window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}hostDisconnected(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0)}}class T extends S{constructor(){super(...arguments),this._focusedIndex=-1,this._hasFocus=!1}get focusedIndex(){return this._focusedIndex}getFocusedOption(){if(this._focusedIndex>=0&&this._focusedIndex<this.host.options.length)return this.host.options[this._focusedIndex]}get hasFocus(){return this._hasFocus}setFocusedOption(t){try{t>=0&&t<this.host.options.length&&(this._focusedIndex=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus-change",{detail:{focusedIndex:t,focusedOption:this.getFocusedOption()},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"setFocusedOption")}}focus(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&(e.focus(),this._hasFocus=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"focus")}}blur(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.blur(),this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"blur")}}focusNext(){try{const t=this.getNextFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusNext")}}focusPrevious(){try{const t=this.getPreviousFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusPrevious")}}focusFirst(){try{const t=this.getNextFocusableIndex(-1);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusFirst")}}focusLast(){try{const t=this.getPreviousFocusableIndex(this.host.options.length);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusLast")}}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.requestUpdate()}handleFocus(){this._hasFocus=!0,this.requestUpdate()}handleBlur(){this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate()}getNextFocusableIndex(t){const e=this.host.options;for(let i=t+1;i<e.length;i++)if(!e[i].disabled)return i;for(let i=0;i<=t;i++)if(!e[i].disabled)return i;return-1}getPreviousFocusableIndex(t){const e=this.host.options;for(let i=t-1;i>=0;i--)if(!e[i].disabled)return i;for(let i=e.length-1;i>=t;i--)if(!e[i].disabled)return i;return-1}findOptionIndex(t){return this.host.options.findIndex(e=>e.value===t)}focusOptionByValue(t){const e=this.findOptionIndex(t);-1!==e&&this.setFocusedOption(e)}}!function(t){t.Valid="valid",t.Invalid="invalid",t.Pending="pending",t.Pristine="pristine"}(k||(k={}));class R extends y{constructor(t,e){super(t),this.selectionController=e}get validationState(){return this._validationState}validate(){try{this._validationState=k.Pending;const t=this.selectionController.getSelectedOptions().length>0;return this.host.required&&!t?(this.setValidationResult(!1,"This field is required",k.Invalid),!1):(this.setValidationResult(!0,"",k.Valid),!0)}catch(t){return this.handleError(t,"validate"),this.setValidationResult(!1,"Validation error occurred",k.Invalid),!1}}reset(){try{this._isValid=!0,this._validationMessage="",this._validationState=k.Pristine,this.requestUpdate(),this.dispatchValidationEvent()}catch(t){this.handleError(t,"reset")}}getFormData(){var t;try{const e=this._host,i=e.name||e.getAttribute("name")||"select",r=this.selectionController.getSelectedOptions();return this.host.multiple?{[i]:r.map(t=>t.value)}:{[i]:(null===(t=r[0])||void 0===t?void 0:t.value)||""}}catch(t){return this.handleError(t,"getFormData"),{}}}reportValidity(){var t;const e=this.validate();if(!e){const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.focus()}return e}setCustomValidity(t){try{t?this.setValidationResult(!1,t,k.Invalid):this.validate()}catch(t){this.handleError(t,"setCustomValidity")}}validateOnChange(){this._validationState!==k.Pristine&&this.validate()}validateOnBlur(){this._validationState===k.Pristine&&(this._validationState=k.Pending),this.validate()}setValidationResult(t,e,i){const r=this._isValid!==t||this._validationMessage!==e||this._validationState!==i;this._isValid=t,this._validationMessage=e,this._validationState=i,r&&(this.requestUpdate(),this.dispatchValidationEvent())}dispatchValidationEvent(){const t={isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}hostUpdated(){this.validateOnChange()}getValidationClasses(){return{valid:this._isValid&&this._validationState===k.Valid,invalid:!this._isValid&&this._validationState===k.Invalid,pending:this._validationState===k.Pending,pristine:this._validationState===k.Pristine}}getAriaAttributes(){const t={};return this.host.required&&(t["aria-required"]="true"),this._isValid||(t["aria-invalid"]="true",this._validationMessage&&(t["aria-describedby"]="validation-message")),t}}class L extends S{constructor(){super(...arguments),this._searchQuery="",this.handleSearchInput=t=>{this.setSearchQuery(t.detail.value||"")},this.handleSearchClear=()=>{this.clearSearch()},this.handleSearchKeyDown=t=>{if(["ArrowDown","ArrowUp","Enter","Home","End"].includes(t.key)){const e=this.host.keyboardController;return void(e&&e.handleKeyDown(t))}t.stopPropagation(),"Escape"===t.key&&(this.host.closeDropdown(),this.host.focus())}}get searchQuery(){return this._searchQuery}get hasSearch(){return""!==this._searchQuery.trim()}setSearchQuery(t){this._searchQuery=t,this.host.searchQuery=t,this.host.requestUpdate()}search(t){this.setSearchQuery(t)}clearSearch(){this.setSearchQuery("")}getFilteredOptions(t){if(!this.host.searchable||!this._searchQuery.trim())return t;const e=this._searchQuery.toLowerCase().trim();return t.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e))}renderSearchInput(){return this.host.searchable?i`
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,p=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,i,e;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(i=this.designSystemObserver)||void 0===i||i.disconnect(),null===(e=this.mediaQuery)||void 0===e||e.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,i;const e=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return e||((null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const i=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===i?i:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},u=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},v=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(u())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!u())return!0;let i=!0;for(const e of this.requiredComponents)if(!this.isComponentAvailable(e)){i=!1;const s=new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(e,s):console.error(s.message)}return i}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const i=this.requiredComponents.indexOf(t);i>-1&&this.requiredComponents.splice(i,1)}},f=t=>class extends t{dispatchCustomEvent(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,i){var e;const s=Object.assign(Object.assign({},i),{timestamp:Date.now(),componentName:(null===(e=this.tagName)||void 0===e?void 0:e.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,originalEvent:i.originalEvent},i);this.dispatchCustomEvent(t,e)}dispatchFocusEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,focused:i.focused,cursorPosition:i.cursorPosition,selectedText:i.selectedText},i);this.dispatchCustomEvent(t,e)}dispatchValidationEvent(t,i){var e;const s=Object.assign({target:i.target||this,value:i.value,isValid:null!==(e=i.isValid)&&void 0!==e&&e,error:i.error},i);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,i){const e=Object.assign({target:i.target||this,action:i.action,previousValue:i.previousValue,newValue:i.newValue},i);this.dispatchCustomEvent(t,e)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},m=new Set,g=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const b=t=>{class i extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,i=this.tagName.toLowerCase(),e=t.styles;if(e){const t=w(e);t&&function(t,i,e){var s;if(!g.has(t)){const e=new CSSStyleSheet;e.replaceSync(i),g.set(t,e)}const o=g.get(t),r=`doc:${t}`;if(m.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],m.add(r)),e){let i=e;for(;i;){const e=i.getRootNode();if(!(e instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=e.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;m.has(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o],m.add(r)),i=e.host}}}}(i,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(i=>i instanceof Element&&i.getAttribute("slot")===t):[]}}return i.useShadowDom=!1,i};function w(t){return Array.isArray(t)?t.map(t=>w(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var x,y,E,O,S,$,C,A,k;!function(t){t.Default="default",t.Inline="inline",t.Button="button",t.Slot="slot"}(x||(x={})),function(t){t.Default="default",t.Warning="warning",t.Error="error",t.Success="success"}(y||(y={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(E||(E={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(O||(O={})),function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(S||(S={})),function(t){t.Default="default",t.Solid="solid",t.Outline="outline",t.Borderless="borderless"}($||($={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(C||(C={})),function(t){t.None="none",t.StartsWith="starts-with",t.Contains="contains",t.Fuzzy="fuzzy"}(A||(A={}));
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+class D{constructor(t){this._host=t,t.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}handleError(t,i){console.error(`[${this.constructor.name}] Error in ${i}:`,t);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t.message,context:i,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(t){}}safeExecute(t,i,e){try{return t()}catch(t){return this.handleError(t,i),e}}debounce(t,i){let e;const s=(...s)=>{void 0!==e&&clearTimeout(e),e=setTimeout(()=>{e=void 0,t.apply(this,s)},i)};return s.cancel=()=>{void 0!==e&&(clearTimeout(e),e=void 0)},s}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class T extends D{constructor(){super(...arguments),this._isValid=!0,this._validationMessage="",this._validationState="pristine",this._rules=[]}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationState(){return this._validationState}addRule(t){this._rules.push(t),this.requestUpdate()}removeRule(t){this._rules=this._rules.filter(i=>!t(i)),this.requestUpdate()}clearRules(){this._rules=[],this.clearValidation()}clearValidation(){this._isValid=!0,this._validationMessage="",this._validationState="pristine",this.requestUpdate(),this.dispatchValidationEvent()}checkValidity(){return this.validate()}reportValidity(){const t=this.checkValidity();return t||this.dispatchValidationEvent(),t}dispatchValidationEvent(){this.dispatchEvent(new CustomEvent("nr-validation",{detail:{isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState},bubbles:!0,composed:!0}))}}class I extends D{}class N extends I{constructor(){super(...arguments),this._selectedOptions=[],this._initialized=!1}getSelectedOptions(){return[...this._selectedOptions]}getSelectedOption(){return this._selectedOptions[0]}selectOption(t){try{if(this.isOptionDisabled(t))return;const i=this.host.multiple,e=this.getCurrentValue();i?this.isOptionSelected(t)||(this._selectedOptions=[...this._selectedOptions,t],this.updateHostValue(),this.dispatchChangeEvent(e)):(this.isOptionSelected(t)?this._selectedOptions=[]:this._selectedOptions=[t],this.updateHostValue(),this.dispatchChangeEvent(e)),this.requestUpdate()}catch(t){this.handleError(t,"selectOption")}}unselectOption(t){try{if(this.isOptionSelected(t)){const i=this.getCurrentValue();this._selectedOptions=this._selectedOptions.filter(i=>i.value!==t.value),this.updateHostValue(),this.dispatchChangeEvent(i),this.requestUpdate()}}catch(t){this.handleError(t,"unselectOption")}}clearSelection(){try{if(this._selectedOptions.length>0){const t=this.getCurrentValue();this._selectedOptions=[],this.updateHostValue(),this.dispatchChangeEvent(t),this.requestUpdate()}}catch(t){this.handleError(t,"clearSelection")}}isOptionSelected(t){return this._selectedOptions.some(i=>i.value===t.value)}isOptionDisabled(t){return Boolean(t.disabled)||this.host.disabled}toggleOption(t){this.isOptionSelected(t)?this.unselectOption(t):this.selectOption(t)}initializeFromValue(){try{if(this._initialized)return;const t=this.host.value;if(!t||Array.isArray(t)&&0===t.length)return;const i=Array.isArray(t)?t:[t],e=this.host.options.filter(t=>i.includes(t.value));e.length>0&&(this._selectedOptions=this.host.multiple?e:[e[0]],this.requestUpdate()),this._initialized=!0}catch(t){this.handleError(t,"initializeFromValue")}}updateHostValue(){var t;const i=this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||"",e=this.host.value;let s=!1;if(this.host.multiple){const t=Array.isArray(e)?e:[],o=Array.isArray(i)?i:[];s=t.length===o.length&&t.every((t,i)=>t===o[i])}else s=e===i;s||(this.host.value=i)}getCurrentValue(){var t;return this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||""}dispatchChangeEvent(t){const i={value:this.getCurrentValue(),selectedOptions:this.getSelectedOptions(),previousValue:t};this.dispatchEvent(new CustomEvent("nr-change",{detail:i,bubbles:!0,composed:!0}))}hostUpdated(){this.syncWithHostOptions()}syncWithHostOptions(){try{this._selectedOptions=this._selectedOptions.filter(t=>this.host.options.some(i=>i.value===t.value)),this._selectedOptions=this._selectedOptions.map(t=>this.host.options.find(i=>i.value===t.value)||t),this.updateHostValue()}catch(t){this.handleError(t,"syncWithHostOptions")}}}class z extends I{constructor(t,i,e){super(t),this.selectionController=i,this.dropdownController=e,this._focusedIndex=-1,this._hasKeyboardNavigated=!1}handleKeyDown(t){try{const i=this.isSearchInputFocused();switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdownController.isOpen?this.navigateNext():this.openDropdown();break;case"ArrowUp":t.preventDefault(),this.dropdownController.isOpen?this.navigatePrevious():this.openDropdown();break;case"Enter":this.dropdownController.isOpen?i&&this._focusedIndex>=0?(t.preventDefault(),this.selectFocused()):i||(t.preventDefault(),this.selectFocused()):(t.preventDefault(),this.openDropdown());break;case" ":i||(t.preventDefault(),this.dropdownController.isOpen?this.selectFocused():this.openDropdown());break;case"Escape":t.preventDefault(),this.closeDropdown();break;case"Tab":this.closeDropdown();break;case"Home":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(0));break;case"End":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(this.host.options.length-1));break;default:1===t.key.length&&/[a-zA-Z0-9]/.test(t.key)&&this.handleAlphanumericKey(t.key.toLowerCase())}}catch(t){this.handleError(t,"handleKeyDown")}}navigateNext(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(0);let i=this._focusedIndex+1;i>=t.length&&(i=0),this.setFocusedIndex(i)}catch(t){this.handleError(t,"navigateNext")}}navigatePrevious(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(t.length-1);let i=this._focusedIndex-1;i<0&&(i=t.length-1),this.setFocusedIndex(i)}catch(t){this.handleError(t,"navigatePrevious")}}selectFocused(){try{const t=this.getNavigableOptions()[this._focusedIndex];t&&!this.selectionController.isOptionDisabled(t)&&(this.selectionController.selectOption(t),this.host.multiple||this.closeDropdown())}catch(t){this.handleError(t,"selectFocused")}}openDropdown(){try{this.dropdownController.open(),this._hasKeyboardNavigated=!1,this._focusedIndex=-1}catch(t){this.handleError(t,"openDropdown")}}closeDropdown(){try{this.dropdownController.close(),this._focusedIndex=-1,this._hasKeyboardNavigated=!1}catch(t){this.handleError(t,"closeDropdown")}}setFocusedIndex(t){try{const i=this.getNavigableOptions();t>=0&&t<i.length&&(this._focusedIndex=t,this.dispatchFocusEvent(i[t],t),this.requestUpdate(),this.scrollToFocusedOption(t))}catch(t){this.handleError(t,"setFocusedIndex")}}scrollToFocusedOption(t){var i;try{const e=this.host,s=null===(i=e.querySelector)||void 0===i?void 0:i.call(e,".options");if(!s)return;setTimeout(()=>{const i=s.querySelector(".option.focused");if(i)i.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});else{const i=40,e=s.clientHeight,o=s.scrollTop,r=t*i,n=r+i,a=o+e;r<o?s.scrollTo({top:r,behavior:"smooth"}):n>a&&s.scrollTo({top:n-e,behavior:"smooth"})}},10)}catch(t){console.warn("Failed to scroll to focused option:",t)}}get focusedIndex(){return this._focusedIndex}get focusedOption(){return this.getNavigableOptions()[this._focusedIndex]}handleAlphanumericKey(t){try{const i=this.getNavigableOptions(),e=this._focusedIndex+1;for(let s=0;s<i.length;s++){const o=(e+s)%i.length;if(i[o].label.toLowerCase().startsWith(t)){this.setFocusedIndex(o),this.dropdownController.isOpen||this.openDropdown();break}}}catch(t){this.handleError(t,"handleAlphanumericKey")}}getNavigableOptions(){const t=this.host;if(!t.options||!Array.isArray(t.options))return[];let i=t.options;return t.searchable&&t.searchQuery&&"function"==typeof t.getFilteredOptions&&(i=t.getFilteredOptions()),i.filter(t=>!t.disabled)}dispatchFocusEvent(t,i){const e={focusedOption:t,focusedIndex:i};this.dispatchEvent(new CustomEvent("nr-select-focus",{detail:e,bubbles:!0,composed:!0}))}isSearchInputFocused(){var t;try{const i=this.host;if(!i.searchable)return!1;const e=null===(t=i.querySelector)||void 0===t?void 0:t.call(i,".search-input");return!!e&&(document.activeElement===e||e.contains(document.activeElement))}catch(t){return!1}}hostUpdated(){this.dropdownController.isOpen||-1===this._focusedIndex||(this._focusedIndex=-1)}}function R(t){if(t.parentElement)return t.parentElement;const i=t.getRootNode();return i instanceof ShadowRoot?i.host:null}function P(t,i,e={}){var s,o;const{offset:r=4,viewportMargin:n=8}=e,a=t.getBoundingClientRect(),h=i.getBoundingClientRect(),c=(null===(s=window.visualViewport)||void 0===s?void 0:s.height)||window.innerHeight,l=(null===(o=window.visualViewport)||void 0===o?void 0:o.width)||window.innerWidth,d=function(t){let i=t;for(;i;){const t=R(i);if(!t||t===document.body||t===document.documentElement)break;if(t instanceof HTMLElement){const i=getComputedStyle(t),e=i.transform,s=i.willChange,o=i.filter,r=i.perspective,n=i.contain;if(e&&"none"!==e||r&&"none"!==r||o&&"none"!==o||"transform"===s||"perspective"===s||"filter"===s||n&&n.includes("paint"))return t}i=t}return null}(i);let p={top:0,left:0};if(d){const t=d.getBoundingClientRect();p={top:t.top,left:t.left}}const u=c-a.bottom,v=a.top,f=h.height||200,m=function(t,i,e){return e>=t?"bottom":i>=t||i>e?"top":"bottom"}(f,v,u);let g;g="bottom"===m?a.bottom+r:a.top-f-r;let b=a.left;const w=a.width;return b=Math.max(n,Math.min(b,l-w-n)),g=Math.max(n,Math.min(g,c-f-n)),d&&(g-=p.top,b-=p.left),{top:g,left:b,width:a.width,placement:m}}function L(t,i,e,s={}){var o;const{viewportMargin:r=8,maxHeight:n}=s,a=(null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight,h=i.getBoundingClientRect(),c=t.scrollHeight;let l;l="bottom"===e?a-h.bottom-r-2:h.top-r-2,n?(t.style.maxHeight=n,t.style.overflowY="auto"):c>l?(t.style.maxHeight=`${l}px`,t.style.overflowY="auto"):(t.style.maxHeight=`${c}px`,t.style.overflowY="auto")}class V extends I{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this.handleResize=()=>{this._isOpen&&this.calculatePosition()},this.handleScroll=()=>{this._isOpen&&this._triggerElement&&(!function(t){var i;const e=t.getBoundingClientRect(),s=(null===(i=window.visualViewport)||void 0===i?void 0:i.height)||window.innerHeight;return e.bottom>=0&&e.top<=s}(this._triggerElement)?this.close():this.calculatePosition())}}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}open(){try{this._isOpen||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),this.findElements(),setTimeout(()=>{this.calculatePosition()},10),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{this.host.setupEventListeners()},50),this.focusSearchInput(),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&this.host.removeEventListeners(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}focusSearchInput(){try{const t=this.host;t&&t.searchable&&setTimeout(()=>{var i;const e=null===(i=t.querySelector)||void 0===i?void 0:i.call(t,".search-input");e&&"function"==typeof e.focus&&e.focus()},100)}catch(t){console.warn("Failed to focus search input:",t)}}calculatePosition(){try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const t=P(this._triggerElement,this._dropdownElement,{offset:4,viewportMargin:8});this._position=t,this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}resetPosition(){try{if(this._dropdownElement){t=this._dropdownElement,["position","top","left","right","bottom","width","min-width","max-height","min-height","height","overflow-y","transform","display","opacity","visibility","z-index"].forEach(i=>t.style.removeProperty(i)),t.classList.remove("placement-top","placement-bottom");this.host.maxHeight||this._dropdownElement.style.removeProperty("max-height")}}catch(t){this.handleError(t,"resetPosition")}var t}setElements(t,i){this._dropdownElement=t,this._triggerElement=i}findElements(){try{const t=this._host;if(t.optionsElement&&t.wrapper)return this._dropdownElement=t.optionsElement,void(this._triggerElement=t.wrapper);t.querySelector&&(this._dropdownElement=t.querySelector(".options"),this._triggerElement=t.querySelector(".wrapper"))}catch(t){this.handleError(t,"findElements")}}applyPosition(){var t;try{if(!this._dropdownElement||!this._triggerElement)return;const i=this.host.maxHeight,e=null===(t=getComputedStyle(this._dropdownElement).getPropertyValue("--nuraly-select-local-dropdown-max-height"))||void 0===t?void 0:t.trim(),s="auto"===e||!i&&"auto"===e;!function(t,i,e="9999"){t.style.position="fixed",t.style.top=`${i.top}px`,t.style.left=`${i.left}px`,t.style.removeProperty("right"),t.style.removeProperty("bottom"),t.style.minWidth=`${i.width}px`,t.style.removeProperty("width"),t.style.zIndex=e,t.style.height="auto",t.style.minHeight="auto",t.classList.remove("placement-top","placement-bottom"),t.classList.add(`placement-${i.placement}`)}(this._dropdownElement,this._position,"9999"),i||s||(this._dropdownElement.style.maxHeight="none"),i?L(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10,maxHeight:i}):s?(this._dropdownElement.style.removeProperty("max-height"),this._dropdownElement.style.overflowY="visible"):L(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10})}catch(t){this.handleError(t,"applyPosition")}}getAvailableSpace(){var t,i;if(!this._triggerElement)return{above:0,below:0,left:0,right:0};const e=this._triggerElement.getBoundingClientRect(),s=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,o=(null===(i=window.visualViewport)||void 0===i?void 0:i.width)||window.innerWidth;return{above:e.top,below:s-e.bottom,left:e.left,right:o-e.right}}hostConnected(){window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}hostDisconnected(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0)}}class B extends I{constructor(){super(...arguments),this._focusedIndex=-1,this._hasFocus=!1}get focusedIndex(){return this._focusedIndex}getFocusedOption(){if(this._focusedIndex>=0&&this._focusedIndex<this.host.options.length)return this.host.options[this._focusedIndex]}get hasFocus(){return this._hasFocus}setFocusedOption(t){try{t>=0&&t<this.host.options.length&&(this._focusedIndex=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus-change",{detail:{focusedIndex:t,focusedOption:this.getFocusedOption()},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"setFocusedOption")}}focus(){var t;try{const i=this._host,e=null===(t=i.querySelector)||void 0===t?void 0:t.call(i,".wrapper");e&&(e.focus(),this._hasFocus=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"focus")}}blur(){var t;try{const i=this._host,e=null===(t=i.querySelector)||void 0===t?void 0:t.call(i,".wrapper");e&&e.blur(),this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"blur")}}focusNext(){try{const t=this.getNextFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusNext")}}focusPrevious(){try{const t=this.getPreviousFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusPrevious")}}focusFirst(){try{const t=this.getNextFocusableIndex(-1);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusFirst")}}focusLast(){try{const t=this.getPreviousFocusableIndex(this.host.options.length);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusLast")}}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.requestUpdate()}handleFocus(){this._hasFocus=!0,this.requestUpdate()}handleBlur(){this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate()}getNextFocusableIndex(t){const i=this.host.options;for(let e=t+1;e<i.length;e++)if(!i[e].disabled)return e;for(let e=0;e<=t;e++)if(!i[e].disabled)return e;return-1}getPreviousFocusableIndex(t){const i=this.host.options;for(let e=t-1;e>=0;e--)if(!i[e].disabled)return e;for(let e=i.length-1;e>=t;e--)if(!i[e].disabled)return e;return-1}findOptionIndex(t){return this.host.options.findIndex(i=>i.value===t)}focusOptionByValue(t){const i=this.findOptionIndex(t);-1!==i&&this.setFocusedOption(i)}}!function(t){t.Valid="valid",t.Invalid="invalid",t.Pending="pending",t.Pristine="pristine"}(k||(k={}));class F extends T{constructor(t,i){super(t),this.selectionController=i}get validationState(){return this._validationState}validate(){try{this._validationState=k.Pending;const t=this.selectionController.getSelectedOptions().length>0;return this.host.required&&!t?(this.setValidationResult(!1,"This field is required",k.Invalid),!1):(this.setValidationResult(!0,"",k.Valid),!0)}catch(t){return this.handleError(t,"validate"),this.setValidationResult(!1,"Validation error occurred",k.Invalid),!1}}reset(){try{this._isValid=!0,this._validationMessage="",this._validationState=k.Pristine,this.requestUpdate(),this.dispatchValidationEvent()}catch(t){this.handleError(t,"reset")}}getFormData(){var t;try{const i=this._host,e=i.name||i.getAttribute("name")||"select",s=this.selectionController.getSelectedOptions();return this.host.multiple?{[e]:s.map(t=>t.value)}:{[e]:(null===(t=s[0])||void 0===t?void 0:t.value)||""}}catch(t){return this.handleError(t,"getFormData"),{}}}reportValidity(){var t;const i=this.validate();if(!i){const i=this._host,e=null===(t=i.querySelector)||void 0===t?void 0:t.call(i,".wrapper");e&&e.focus()}return i}setCustomValidity(t){try{t?this.setValidationResult(!1,t,k.Invalid):this.validate()}catch(t){this.handleError(t,"setCustomValidity")}}validateOnChange(){this._validationState!==k.Pristine&&this.validate()}validateOnBlur(){this._validationState===k.Pristine&&(this._validationState=k.Pending),this.validate()}setValidationResult(t,i,e){const s=this._isValid!==t||this._validationMessage!==i||this._validationState!==e;this._isValid=t,this._validationMessage=i,this._validationState=e,s&&(this.requestUpdate(),this.dispatchValidationEvent())}dispatchValidationEvent(){const t={isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}hostUpdated(){this.validateOnChange()}getValidationClasses(){return{valid:this._isValid&&this._validationState===k.Valid,invalid:!this._isValid&&this._validationState===k.Invalid,pending:this._validationState===k.Pending,pristine:this._validationState===k.Pristine}}getAriaAttributes(){const t={};return this.host.required&&(t["aria-required"]="true"),this._isValid||(t["aria-invalid"]="true",this._validationMessage&&(t["aria-describedby"]="validation-message")),t}}class M extends I{constructor(){super(...arguments),this._searchQuery="",this.handleSearchInput=t=>{this.setSearchQuery(t.detail.value||"")},this.handleSearchClear=()=>{this.clearSearch()},this.handleSearchKeyDown=t=>{if(["ArrowDown","ArrowUp","Enter","Home","End"].includes(t.key)){const i=this.host.keyboardController;return void(i&&i.handleKeyDown(t))}t.stopPropagation(),"Escape"===t.key&&(this.host.closeDropdown(),this.host.focus())}}get searchQuery(){return this._searchQuery}get hasSearch(){return""!==this._searchQuery.trim()}setSearchQuery(t){this._searchQuery=t,this.host.searchQuery=t,this.host.requestUpdate()}search(t){this.setSearchQuery(t)}clearSearch(){this.setSearchQuery("")}getFilteredOptions(t){if(!this.host.searchable||!this._searchQuery.trim())return t;const i=this._searchQuery.toLowerCase().trim();return t.filter(t=>t.label.toLowerCase().includes(i)||t.value.toLowerCase().includes(i)||t.description&&t.description.toLowerCase().includes(i))}renderSearchInput(){return this.host.searchable?e`
       <div class="search-container">
         <nr-input
           type="text"
@@ -549,7 +436,7 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
           </nr-icon>
         </nr-input>
       </div>
-    `:e}renderNoResults(){return i`
+    `:i}renderNoResults(){return e`
       <div class="no-options" role="option" aria-disabled="true">
         <div class="no-options-content">
           <nr-icon 
@@ -560,16 +447,15 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
           <span class="no-options-text">No results found for "${this._searchQuery}"</span>
         </div>
       </div>
-    `}hasNoResults(t){return this.host.searchable&&""!==this._searchQuery.trim()&&0===this.getFilteredOptions(t).length}getCurrentQuery(){return this.host.searchQuery||this._searchQuery}hostUpdated(){super.hostUpdated(),this.host.searchQuery!==this._searchQuery&&(this._searchQuery=this.host.searchQuery)}hostConnected(){super.hostConnected(),this._searchQuery=""}}class P extends S{constructor(){super(...arguments),this.handleTriggerClick=t=>{this.host.disabled||(t.preventDefault(),t.stopPropagation(),this.host.toggleDropdown())},this.handleOptionClick=(t,e)=>{t.stopPropagation(),e.disabled||(this.host.multiple?this.host.toggleOption(e):(this.host.selectOption(e),this.host.closeDropdown()))},this.handleTagRemove=(t,e)=>{t.stopPropagation(),this.host.unselectOption(e)},this.handleClearAll=t=>{t.stopPropagation(),this.host.clearSelection()},this.handleKeyDown=t=>{const e=this.host.keyboardController;e&&e.handleKeyDown(t)},this.handleFocus=()=>{const t=this.host.focusController;t&&t.handleFocus()},this.handleBlur=()=>{const t=this.host.focusController;t&&t.handleBlur()},this.handleWindowClick=t=>{t.composedPath().includes(this.host)||this.host.closeDropdown()}}setupEventListeners(){window.addEventListener("click",this.handleWindowClick)}removeEventListeners(){window.removeEventListener("click",this.handleWindowClick)}hostDisconnected(){super.hostDisconnected(),this.removeEventListeners()}}
+    `}hasNoResults(t){return this.host.searchable&&""!==this._searchQuery.trim()&&0===this.getFilteredOptions(t).length}getCurrentQuery(){return this.host.searchQuery||this._searchQuery}hostUpdated(){super.hostUpdated(),this.host.searchQuery!==this._searchQuery&&(this._searchQuery=this.host.searchQuery)}hostConnected(){super.hostConnected(),this._searchQuery=""}}class _ extends I{constructor(){super(...arguments),this.handleTriggerClick=t=>{this.host.disabled||(t.preventDefault(),t.stopPropagation(),this.host.toggleDropdown())},this.handleOptionClick=(t,i)=>{t.stopPropagation(),i.disabled||(this.host.multiple?this.host.toggleOption(i):(this.host.selectOption(i),this.host.closeDropdown()))},this.handleTagRemove=(t,i)=>{t.stopPropagation(),this.host.unselectOption(i)},this.handleClearAll=t=>{t.stopPropagation(),this.host.clearSelection()},this.handleKeyDown=t=>{const i=this.host.keyboardController;i&&i.handleKeyDown(t)},this.handleFocus=()=>{const t=this.host.focusController;t&&t.handleFocus()},this.handleBlur=()=>{const t=this.host.focusController;t&&t.handleBlur()},this.handleWindowClick=t=>{t.composedPath().includes(this.host)||this.host.closeDropdown()}}setupEventListeners(){window.addEventListener("click",this.handleWindowClick)}removeEventListeners(){window.removeEventListener("click",this.handleWindowClick)}hostDisconnected(){super.hostDisconnected(),this.removeEventListeners()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var F=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(s=t[a])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let B=class extends(d(r)){constructor(){super(...arguments),this.requiredComponents=["nr-input","nr-icon"],this.options=[],this.placeholder="Select an option",this.disabled=!1,this.type=m.Default,this.multiple=!1,this.show=!1,this.status=f.Default,this.size=b.Medium,this.required=!1,this.name="",this.value="",this.noOptionsMessage="No options available",this.noOptionsIcon="info",this.searchable=!1,this.clearable=!1,this.searchPlaceholder="Search options...",this.searchQuery="",this.useCustomSelectedDisplay=!1,this.maxHeight="",this.block=!1,this.selectionController=new $(this),this.dropdownController=new D(this),this.keyboardController=new C(this,this.selectionController,this.dropdownController),this.focusController=new T(this),this.validationController=new R(this,this.selectionController),this.searchController=new L(this),this.eventController=new P(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleOptionClick=(t,e)=>{this.eventController.handleOptionClick(t,e)},this.handleTagRemove=(t,e)=>{this.eventController.handleTagRemove(t,e)},this.handleClearAll=t=>{this.eventController.handleClearAll(t)},this.handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this.handleFocus=()=>{this.eventController.handleFocus()},this.handleBlur=()=>{this.eventController.handleBlur()}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}willUpdate(t){super.willUpdate(t),(t.has("options")||t.has("value"))&&this.options.length>0&&this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&(this.selectionController._initialized=!1,this.selectionController.initializeFromValue())}firstUpdated(t){super.firstUpdated(t),this.optionsElement&&this.wrapper?this.dropdownController.setElements(this.optionsElement,this.wrapper):setTimeout(()=>{this.optionsElement&&this.wrapper&&this.dropdownController.setElements(this.optionsElement,this.wrapper)},100),this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&this.selectionController.initializeFromValue()}get selectedOptions(){return this.selectionController.getSelectedOptions()}get selectedOption(){return this.selectionController.getSelectedOption()}selectOption(t){this.selectionController.selectOption(t)}unselectOption(t){this.selectionController.unselectOption(t)}toggleOption(t){this.selectionController.toggleOption(t)}clearSelection(){this.selectionController.clearSelection()}isOptionSelected(t){return this.selectionController.isOptionSelected(t)}toggleDropdown(){this.dropdownController.toggle()}openDropdown(){this.dropdownController.open()}closeDropdown(){this.dropdownController.close()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}validate(){return this.validationController.validate()}checkValidity(){return this.validationController.checkValidity()}reportValidity(){return this.validationController.reportValidity()}setCustomValidity(t){this.validationController.setCustomValidity(t)}getValidationStatus(){return{isValid:this.validationController.checkValidity(),validationMessage:this.validationController.validationMessage||""}}get validationMessage(){return this.validationController.validationMessage||""}clearValidation(){this.validationController.setCustomValidity(""),this.status=f.Default}searchOptions(t){this.searchController.search(t)}clearSearch(){this.searchController.clearSearch()}getSearchFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}getCurrentSearchQuery(){return this.searchController.searchQuery}getSelectedOptions(){return this.selectedOptions}setupGlobalEventListeners(){this.eventController.setupEventListeners()}removeGlobalEventListeners(){this.eventController.removeEventListeners()}getFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}setupEventListeners(){this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){return i`${l(this.type,[[m.Default,()=>this.renderDefault()],[m.Inline,()=>this.renderInline()],[m.Button,()=>this.renderButton()],[m.Slot,()=>this.renderSlot()]])}`}renderDefault(){const t=this.selectedOptions,r=this.validationController.getValidationClasses();return i`
+ */var U=function(t,i,e,s){for(var o,r=arguments.length,n=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(i,e,n):o(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};let H=class extends((t=>v(p(f(b(t)))))(s)){constructor(){super(...arguments),this.requiredComponents=["nr-input","nr-icon"],this.options=[],this.placeholder="Select an option",this.disabled=!1,this.type=x.Default,this.multiple=!1,this.show=!1,this.status=y.Default,this.size=E.Medium,this.required=!1,this.name="",this.value="",this.noOptionsMessage="No options available",this.noOptionsIcon="info",this.searchable=!1,this.clearable=!1,this.searchPlaceholder="Search options...",this.searchQuery="",this.useCustomSelectedDisplay=!1,this.maxHeight="",this.block=!1,this.selectionController=new N(this),this.dropdownController=new V(this),this.keyboardController=new z(this,this.selectionController,this.dropdownController),this.focusController=new B(this),this.validationController=new F(this,this.selectionController),this.searchController=new M(this),this.eventController=new _(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleOptionClick=(t,i)=>{this.eventController.handleOptionClick(t,i)},this.handleTagRemove=(t,i)=>{this.eventController.handleTagRemove(t,i)},this.handleClearAll=t=>{this.eventController.handleClearAll(t)},this.handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this.handleFocus=()=>{this.eventController.handleFocus()},this.handleBlur=()=>{this.eventController.handleBlur()}}get optionsElement(){return this.renderRoot.querySelector(".options")}get wrapper(){return this.renderRoot.querySelector(".wrapper")}get searchInput(){return this.renderRoot.querySelector(".search-input")}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}willUpdate(t){super.willUpdate(t),(t.has("options")||t.has("value"))&&this.options.length>0&&this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&(this.selectionController._initialized=!1,this.selectionController.initializeFromValue())}firstUpdated(t){super.firstUpdated(t),this.optionsElement&&this.wrapper?this.dropdownController.setElements(this.optionsElement,this.wrapper):setTimeout(()=>{this.optionsElement&&this.wrapper&&this.dropdownController.setElements(this.optionsElement,this.wrapper)},100),this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&this.selectionController.initializeFromValue()}get selectedOptions(){return this.selectionController.getSelectedOptions()}get selectedOption(){return this.selectionController.getSelectedOption()}selectOption(t){this.selectionController.selectOption(t)}unselectOption(t){this.selectionController.unselectOption(t)}toggleOption(t){this.selectionController.toggleOption(t)}clearSelection(){this.selectionController.clearSelection()}isOptionSelected(t){return this.selectionController.isOptionSelected(t)}toggleDropdown(){this.dropdownController.toggle()}openDropdown(){this.dropdownController.open()}closeDropdown(){this.dropdownController.close()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}validate(){return this.validationController.validate()}checkValidity(){return this.validationController.checkValidity()}reportValidity(){return this.validationController.reportValidity()}setCustomValidity(t){this.validationController.setCustomValidity(t)}getValidationStatus(){return{isValid:this.validationController.checkValidity(),validationMessage:this.validationController.validationMessage||""}}get validationMessage(){return this.validationController.validationMessage||""}clearValidation(){this.validationController.setCustomValidity(""),this.status=y.Default}searchOptions(t){this.searchController.search(t)}clearSearch(){this.searchController.clearSearch()}getSearchFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}getCurrentSearchQuery(){return this.searchController.searchQuery}getSelectedOptions(){return this.selectedOptions}setupGlobalEventListeners(){this.eventController.setupEventListeners()}removeGlobalEventListeners(){this.eventController.removeEventListeners()}getFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}setupEventListeners(){this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){return e`${a(this.type,[[x.Default,()=>this.renderDefault()],[x.Inline,()=>this.renderInline()],[x.Button,()=>this.renderButton()],[x.Slot,()=>this.renderSlot()]])}`}renderDefault(){const t=this.selectedOptions,s=this.validationController.getValidationClasses();return e`
       <slot name="label"></slot>
-      <div 
-        class="${c(Object.assign({wrapper:!0},r))}"
-        data-theme="${this.currentTheme}"
+      <div
+        class="${h(Object.assign({wrapper:!0},s))}"
         tabindex="0"
         role="combobox"
         aria-expanded="${this.show}"
@@ -582,43 +468,44 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
         @blur=${this.handleBlur}
       >
         <div class="select">
-          <div class="select-trigger">
+          <div part="trigger" class="select-trigger">
             ${this.renderSelectedContent(t)}
           </div>
-          
+
           <div class="icons-container">
             ${this.renderStatusIcon()}
             ${this.renderClearButton(t)}
-            <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}"
-            style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+            style=${this.maxHeight?c({"max-height":this.maxHeight}):i}
             @click=${t=>t.stopPropagation()}
           >
-            ${this.searchable?this.renderSearchInput():e}
+            ${this.searchable?this.renderSearchInput():i}
             <slot name="before-options"></slot>
             ${this.renderSelectOptions()}
             <slot name="after-options"></slot>
           </div>
         </div>
       </div>
-      
+
       ${this.renderValidationMessage()}
       <slot name="helper-text"></slot>
-    `}renderInline(){return i`
+    `}renderInline(){return e`
       <slot name="label"></slot>
       ${this.renderDefault()}
       <slot name="helper-text"></slot>
-    `}renderButton(){const t=this.selectedOptions;return i`
+    `}renderButton(){const t=this.selectedOptions;return e`
       <button
         class="select-button"
         ?disabled=${this.disabled}
@@ -632,40 +519,41 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
       <div
         class="options"
         role="listbox"
-        style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+        style=${this.maxHeight?c({"max-height":this.maxHeight}):i}
         @click=${t=>t.stopPropagation()}
       >
-        ${this.searchable?this.renderSearchInput():e}
+        ${this.searchable?this.renderSearchInput():i}
         <slot name="before-options"></slot>
         ${this.renderSelectOptions()}
         <slot name="after-options"></slot>
       </div>
-    `}renderSlot(){return i`
-      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+    `}renderSlot(){return e`
+      <span @click=${this.handleTriggerClick}><slot name="trigger"></slot></span>
       <div
         class="options"
         role="listbox"
-        style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+        style=${this.maxHeight?c({"max-height":this.maxHeight}):i}
         @click=${t=>t.stopPropagation()}
       >
-        ${this.searchable?this.renderSearchInput():e}
+        ${this.searchable?this.renderSearchInput():i}
         <slot name="before-options"></slot>
         ${this.renderSelectOptions()}
         <slot name="after-options"></slot>
       </div>
-    `}renderSelectedContent(t){return 0===t.length?i`<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`:this.multiple?this.useCustomSelectedDisplay?i`<slot name="selected-display" .selectedOptions=${t}></slot>`:a(t,t=>i`
-        <span class="tag">
+    `}renderSelectedContent(t){return 0===t.length?e`<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`:this.multiple?this.useCustomSelectedDisplay?e`<slot name="selected-display"></slot>`:n(t,t=>e`
+        <span part="tag" class="tag">
           <span class="tag-label">${t.label}</span>
-          <nr-icon 
+          <nr-icon
             name="x"
             size="${this.size}"
             class="tag-close"
-            @click=${e=>this.handleTagRemove(e,t)}
+            @click=${i=>this.handleTagRemove(i,t)}
             aria-label="Remove ${t.label}"
           ></nr-icon>
         </span>
-      `):i`${t[0].label}`}renderStatusIcon(){switch(this.status){case f.Warning:return i`<nr-icon name="alert-triangle" size="${this.size}" class="status-icon warning"></nr-icon>`;case f.Error:return i`<nr-icon name="alert-circle" size="${this.size}" class="status-icon error"></nr-icon>`;case f.Success:return i`<nr-icon name="circle-check" size="${this.size}" class="status-icon success"></nr-icon>`;default:return e}}renderClearButton(t){return!this.clearable||0===t.length||this.disabled?e:i`
+      `):e`${t[0].label}`}renderStatusIcon(){switch(this.status){case y.Warning:return e`<nr-icon name="alert-triangle" size="${this.size}" class="status-icon warning"></nr-icon>`;case y.Error:return e`<nr-icon name="alert-circle" size="${this.size}" class="status-icon error"></nr-icon>`;case y.Success:return e`<nr-icon name="circle-check" size="${this.size}" class="status-icon success"></nr-icon>`;default:return i}}renderClearButton(t){return!this.clearable||0===t.length||this.disabled?i:e`
       <nr-icon
+        part="clear"
         name="x"
         size="${this.size}"
         class="clear-icon"
@@ -673,7 +561,7 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
         aria-label="Clear selection"
         tabindex="-1"
       ></nr-icon>
-    `}renderSelectOptions(){const t=this.getFilteredOptions();if(!this.options||0===this.options.length)return i`
+    `}renderSelectOptions(){const t=this.getFilteredOptions();if(!this.options||0===this.options.length)return e`
         <div class="no-options" role="option" aria-disabled="true">
           <div class="no-options-content">
             <nr-icon 
@@ -684,38 +572,43 @@ import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property
             <span class="no-options-text">${this.noOptionsMessage}</span>
           </div>
         </div>
-      `;if(this.searchController.hasNoResults(this.options))return this.searchController.renderNoResults();const r=this.keyboardController.focusedOption;return a(t,t=>{const s=this.isOptionSelected(t),o=r&&r.value===t.value;return i`
+      `;if(this.searchController.hasNoResults(this.options))return this.searchController.renderNoResults();const s=this.keyboardController.focusedOption;return n(t,t=>{const o=this.isOptionSelected(t),r=s&&s.value===t.value;return e`
         <div
-          class="${c({option:!0,selected:s,focused:o,disabled:Boolean(t.disabled)})}"
+          part="option"
+          class="${h({option:!0,selected:o,focused:r,disabled:Boolean(t.disabled)})}"
           role="option"
-          aria-selected="${s}"
+          aria-selected="${o}"
           aria-disabled="${Boolean(t.disabled)}"
           data-value="${t.value}"
-          @click=${e=>this.handleOptionClick(e,t)}
-          style=${h(t.style?{style:t.style}:{})}
+          @click=${i=>this.handleOptionClick(i,t)}
+          style=${c(t.style?{style:t.style}:{})}
           title="${t.title||""}"
         >
           <div class="option-content">
-            ${t.icon?i`<nr-icon name="${t.icon}" size="${this.size}" class="option-icon"></nr-icon>`:e}
+            ${t.icon?e`<nr-icon name="${t.icon}" size="${this.size}" class="option-icon"></nr-icon>`:i}
             <div class="option-text">
-              ${t.htmlContent?i`<div>${u(t.htmlContent)}</div>`:t.label}
-              ${t.description?i`<div class="option-description">${t.description}</div>`:e}
+              ${t.htmlContent?e`<div>${l(t.htmlContent)}</div>`:t.label}
+              ${t.description?e`<div class="option-description">${t.description}</div>`:i}
             </div>
           </div>
           
-          ${s?i`<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>`:e}
+          ${o?e`<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>`:i}
           
-          ${t.state&&t.message?i`
+          ${t.state&&t.message?e`
             <div class="option-message ${t.state}">
               <nr-icon name="${"error"===t.state?"alert-circle":"alert-triangle"}" size="${this.size}"></nr-icon>
               <span>${t.message}</span>
             </div>
-          `:e}
+          `:i}
         </div>
-      `})}renderSearchInput(){return this.searchController.renderSearchInput()}renderValidationMessage(){return p(this.validationController.validationMessage,{statusClass:this.status})}};B.styles=g,F([s({type:Array})],B.prototype,"options",void 0),F([s({type:String})],B.prototype,"placeholder",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"disabled",void 0),F([s({type:String,reflect:!0})],B.prototype,"type",void 0),F([s({type:Boolean,attribute:"multiple"})],B.prototype,"multiple",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"show",void 0),F([s({type:String,reflect:!0})],B.prototype,"status",void 0),F([s({type:String,reflect:!0})],B.prototype,"size",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"required",void 0),F([s({type:String})],B.prototype,"name",void 0),F([s()],B.prototype,"value",void 0),F([s({type:String,attribute:"no-options-message"})],B.prototype,"noOptionsMessage",void 0),F([s({type:String,attribute:"no-options-icon"})],B.prototype,"noOptionsIcon",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"searchable",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"clearable",void 0),F([s({type:String,attribute:"search-placeholder"})],B.prototype,"searchPlaceholder",void 0),F([s({type:String})],B.prototype,"searchQuery",void 0),F([s({type:Boolean,attribute:"use-custom-selected-display"})],B.prototype,"useCustomSelectedDisplay",void 0),F([s({type:String,attribute:"max-height"})],B.prototype,"maxHeight",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"block",void 0),F([o(".options")],B.prototype,"optionsElement",void 0),F([o(".wrapper")],B.prototype,"wrapper",void 0),F([o(".search-input")],B.prototype,"searchInput",void 0),B=F([n("nr-select")],B);
+      `})}renderSearchInput(){return this.searchController.renderSearchInput()}renderValidationMessage(){return function(t,s){if(!t)return i;const o=(null==s?void 0:s.cssClass)||"validation-message",r=(null==s?void 0:s.statusClass)||"",n=(null==s?void 0:s.id)||"validation-message";return e`
+    <div class="${o} ${r}" id="${n}" role="alert" aria-live="polite">
+      ${t}
+    </div>
+  `}(this.validationController.validationMessage,{statusClass:this.status})}};H.styles=d,H.useShadowDom=!0,U([o({type:Array})],H.prototype,"options",void 0),U([o({type:String})],H.prototype,"placeholder",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"disabled",void 0),U([o({type:String,reflect:!0})],H.prototype,"type",void 0),U([o({type:Boolean,attribute:"multiple"})],H.prototype,"multiple",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"show",void 0),U([o({type:String,reflect:!0})],H.prototype,"status",void 0),U([o({type:String,reflect:!0})],H.prototype,"size",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"required",void 0),U([o({type:String})],H.prototype,"name",void 0),U([o()],H.prototype,"value",void 0),U([o({type:String,attribute:"no-options-message"})],H.prototype,"noOptionsMessage",void 0),U([o({type:String,attribute:"no-options-icon"})],H.prototype,"noOptionsIcon",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"searchable",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"clearable",void 0),U([o({type:String,attribute:"search-placeholder"})],H.prototype,"searchPlaceholder",void 0),U([o({type:String})],H.prototype,"searchQuery",void 0),U([o({type:Boolean,attribute:"use-custom-selected-display"})],H.prototype,"useCustomSelectedDisplay",void 0),U([o({type:String,attribute:"max-height"})],H.prototype,"maxHeight",void 0),U([o({type:Boolean,reflect:!0})],H.prototype,"block",void 0),H=U([r("nr-select")],H);
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const _={CHANGE:"nr-change",FOCUS:"nr-focus",BLUR:"nr-blur",DROPDOWN_OPEN:"nr-dropdown-open",DROPDOWN_CLOSE:"nr-dropdown-close",VALIDATION:"nr-validation",ERROR:"nr-controller-error"},H={WRAPPER:"wrapper",SELECT:"select",TRIGGER:"select-trigger",OPTIONS:"options",OPTION:"option",SELECTED:"selected",FOCUSED:"focused",DISABLED:"disabled",TAG:"tag",TAG_LABEL:"tag-label",TAG_CLOSE:"tag-close",ICONS_CONTAINER:"icons-container",ARROW_ICON:"arrow-icon",CLEAR_ICON:"clear-icon",STATUS_ICON:"status-icon",CHECK_ICON:"check-icon",VALIDATION_MESSAGE:"validation-message",PLACEHOLDER:"placeholder",NO_OPTIONS:"no-options",NO_OPTIONS_CONTENT:"no-options-content",NO_OPTIONS_ICON:"no-options-icon",NO_OPTIONS_TEXT:"no-options-text",SEARCH_CONTAINER:"search-container",SEARCH_INPUT:"search-input",SEARCH_ICON:"search-icon",SEARCH_CLEAR:"search-clear"},V={COMBOBOX:"combobox",LISTBOX:"listbox",OPTION:"option",EXPANDED:"aria-expanded",HASPOPUP:"aria-haspopup",MULTISELECTABLE:"aria-multiselectable",SELECTED:"aria-selected",DISABLED:"aria-disabled",REQUIRED:"aria-required",INVALID:"aria-invalid",DESCRIBEDBY:"aria-describedby",LABELLEDBY:"aria-labelledby"},M={PLACEHOLDER:"Select an option",MAX_HEIGHT:"auto",DROPDOWN_OFFSET:4,TAG_MAX_WIDTH:"150px",TRANSITION_DURATION:200,DEBOUNCE_DELAY:300},U={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",HOME:"Home",END:"End",TAB:"Tab"},j="",G=", ";export{S as BaseSelectController,O as DropdownPlacement,j as EMPTY_STRING,B as HySelectComponent,G as MULTIPLE_OPTIONS_SEPARATOR,w as OptionSize,V as SELECT_ARIA,H as SELECT_CLASSES,M as SELECT_DEFAULTS,_ as SELECT_EVENTS,U as SELECT_KEYS,E as SearchMode,x as SelectDirection,D as SelectDropdownController,P as SelectEventController,T as SelectFocusController,C as SelectKeyboardController,L as SelectSearchController,$ as SelectSelectionController,b as SelectSize,f as SelectStatus,m as SelectType,R as SelectValidationController,z as SelectVariant};
+const j={CHANGE:"nr-change",FOCUS:"nr-focus",BLUR:"nr-blur",DROPDOWN_OPEN:"nr-dropdown-open",DROPDOWN_CLOSE:"nr-dropdown-close",VALIDATION:"nr-validation",ERROR:"nr-controller-error"},W={WRAPPER:"wrapper",SELECT:"select",TRIGGER:"select-trigger",OPTIONS:"options",OPTION:"option",SELECTED:"selected",FOCUSED:"focused",DISABLED:"disabled",TAG:"tag",TAG_LABEL:"tag-label",TAG_CLOSE:"tag-close",ICONS_CONTAINER:"icons-container",ARROW_ICON:"arrow-icon",CLEAR_ICON:"clear-icon",STATUS_ICON:"status-icon",CHECK_ICON:"check-icon",VALIDATION_MESSAGE:"validation-message",PLACEHOLDER:"placeholder",NO_OPTIONS:"no-options",NO_OPTIONS_CONTENT:"no-options-content",NO_OPTIONS_ICON:"no-options-icon",NO_OPTIONS_TEXT:"no-options-text",SEARCH_CONTAINER:"search-container",SEARCH_INPUT:"search-input",SEARCH_ICON:"search-icon",SEARCH_CLEAR:"search-clear"},G={COMBOBOX:"combobox",LISTBOX:"listbox",OPTION:"option",EXPANDED:"aria-expanded",HASPOPUP:"aria-haspopup",MULTISELECTABLE:"aria-multiselectable",SELECTED:"aria-selected",DISABLED:"aria-disabled",REQUIRED:"aria-required",INVALID:"aria-invalid",DESCRIBEDBY:"aria-describedby",LABELLEDBY:"aria-labelledby"},q={PLACEHOLDER:"Select an option",MAX_HEIGHT:"auto",DROPDOWN_OFFSET:4,TAG_MAX_WIDTH:"150px",TRANSITION_DURATION:200,DEBOUNCE_DELAY:300},K={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",HOME:"Home",END:"End",TAB:"Tab"},Y="",Q=", ";export{I as BaseSelectController,C as DropdownPlacement,Y as EMPTY_STRING,H as HySelectComponent,Q as MULTIPLE_OPTIONS_SEPARATOR,O as OptionSize,G as SELECT_ARIA,W as SELECT_CLASSES,q as SELECT_DEFAULTS,j as SELECT_EVENTS,K as SELECT_KEYS,A as SearchMode,S as SelectDirection,V as SelectDropdownController,_ as SelectEventController,B as SelectFocusController,z as SelectKeyboardController,M as SelectSearchController,N as SelectSelectionController,E as SelectSize,y as SelectStatus,x as SelectType,F as SelectValidationController,$ as SelectVariant};