@aquera/nile-elements 2.0.13 → 2.0.15

package/README.md

@@ -91,6 +91,18 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.15 (October 07, 2026)
+- Nile Badge: Added a `size` property (`sm` | `md` | `lg`, default `md`; 22 / 24 / 28px with nxtgen tokens). The `orange` variant now uses `utility-orange-50` fill, `utility-orange-300` border and `utility-error-600` text, and the `warning` border uses `utility-warning-300`, so the error, orange and warning badges no longer look alike (UIF-1375)
+
+#### Version 2.0.14 (October 01, 2026)
+- Nile Option: The hover background now falls back to `--ng-colors-bg-primary-hover` instead of `--ng-colors-bg-secondary-hover`. In dark mode `-secondary-hover` equals the listbox surface (`graydarkmode-800`), so option hover was invisible. Applies wherever `nile-option` is used, including Calendar, Content Editor, Switcher and Timestamp Builder (UIF-1373)
+- Nile Select: The filled field falls back to `--ng-colors-bg-primary`, `--ng-colors-bg-primary-hover` on hover. The listbox, footer dividers and `+N` overflow chip now use `--ng-colors-border-primary` instead of `--ng-colors-border-secondary` / `-secondary-alt` (UIF-1373)
+- Nile Virtual Select: The open, focused and filled field falls back to `--ng-colors-bg-primary`; filled hover uses `--ng-colors-bg-primary-hover` and selected options use `--ng-colors-bg-active`. The listbox, footer divider and `+N` overflow chip now use `--ng-colors-border-primary` (UIF-1373)
+- Nile Combobox: The open, focused and filled trigger falls back to `--ng-colors-bg-primary`; selected options use `--ng-colors-bg-active`. The listbox, top-actions and footer dividers, group-header rules and grid column dividers now use `--ng-colors-border-primary` (UIF-1373)
+- Nile Chip: Hovering the field now applies `--ng-colors-bg-primary-hover`; the inner auto-complete input is transparent so the hover tint shows through (UIF-1373)
+- Nile Auto Complete: The dropdown menu border now falls back to `--ng-colors-border-primary` instead of `--ng-colors-border-secondary-alt`, which matched the menu surface in dark mode. The shared `nile-menu` is unchanged (UIF-1373)
+- Nile Command Menu: Item hover and keyboard-active rows fall back to `--ng-colors-bg-primary-hover` instead of `--ng-colors-bg-secondary-hover`. The dialog panel, its dividers and the shortcut badges now use `--ng-colors-border-primary` (UIF-1373)
+
 #### Version 2.0.13 (October 01, 2026)
 - Nile Select: Chip resizing, the `+N` overflow button and chip tooltips now apply only when `showTooltip` is set. Fixed value sync in virtual-scroll mode, dropdown collapse with `noWidthSync`, and chip sizing/tooltip issues (UIF-1372)
 - Nile Virtual Select: Fixed dropdown collapse with `noWidthSync` and missing tooltips on truncated chips (UIF-1372)

package/dist/index.js

@@ -2476,11 +2476,11 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-error-600));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-300));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-50));
   }
 
   .badge--purple {
@@ -2533,7 +2533,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
     color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-300));
     background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
   }
 
@@ -2566,7 +2566,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-300));
   }
 
   .badge--purple.badge--pill-outline {
@@ -2594,7 +2594,7 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-300));
   }
 
   .badge--error.badge--pill-outline {
@@ -2615,6 +2615,27 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
     padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
   }
+
+  /* Sizes — md is the base .badge rule above, so the default is unchanged. */
+  .badge.badge--sm {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-height-22px, var(--ng-height-22px));
+  }
+
+  .badge--sm .badge__content {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-xs));
+  }
+
+  .badge.badge--lg {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .badge--lg .badge__content {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+  }
 `,bt=s`
   :host {
     display: inline-block;
@@ -2729,14 +2750,14 @@ const Ie=1,je=2,ze=3,me=4,Te=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           ></nile-icon>
         </button>
-      `}};var wt,vt;Lt.styles=bt,e([pe(".icon-button")],Lt.prototype,"button",void 0),e([he()],Lt.prototype,"hasFocus",void 0),e([de()],Lt.prototype,"name",void 0),e([de()],Lt.prototype,"library",void 0),e([de()],Lt.prototype,"src",void 0),e([de()],Lt.prototype,"href",void 0),e([de()],Lt.prototype,"target",void 0),e([de()],Lt.prototype,"download",void 0),e([de()],Lt.prototype,"label",void 0),e([de({type:Boolean,reflect:!0})],Lt.prototype,"disabled",void 0),e([de({type:String,reflect:!0})],Lt.prototype,"color",void 0),e([de({type:Boolean,reflect:!0})],Lt.prototype,"ishovered",void 0),Lt=e([ce("nile-icon-button")],Lt),function(e){e.Button="button",e.Checkbox="checkbox",e.Dialog="dialog",e.Grid="grid",e.Gridcell="gridcell",e.Link="link",e.Listbox="listbox",e.Menu="menu",e.MenuItem="menuitem",e.MenuItemCheckbox="menuitemcheckbox",e.MenuItemRadio="menuitemradio",e.Option="option",e.Progressbar="progressbar",e.Radio="radio",e.Radiogroup="radiogroup",e.Slider="slider",e.Spinbutton="spinbutton",e.Switch="switch",e.Tab="tab",e.Tablist="tablist",e.Tabpanel="tabpanel",e.Textbox="textbox",e.Toolbar="toolbar",e.Image="img",e.Combobox="combobox",e.Status="status",e.Tooltip="tooltip",e.Accordion="accordion",e.Group="group",e.Tree="tree",e.Treeitem="treeitem",e.Region="region",e.Separator="separator",e.Alert="alert",e.Navigation="navigation",e.List="list",e.ListItem="listitem",e.Note="note",e.Timer="timer",e.Presentation="presentation",e.Application="application",e.Rowgroup="rowgroup",e.Row="row",e.Columnheader="columnheader",e.Table="table",e.Cell="cell",e.Text="text",e.None="none"}(wt||(wt={})),function(e){e.Date="Date",e.Hero="Hero",e.ListItem="List Item",e.Pagination="Pagination",e.Accordion="Accordion",e.List="List",e.Badge="Badge",e.Breadcrumb="Breadcrumb",e.BreadcrumbItem="Breadcrumb Item",e.Button="Button",e.ButtonToggle="Button Toggle",e.ButtonToggleGroup="Button Toggle Group",e.Dropdown="Dropdown",e.LiteTooltip="Lite Tooltip",e.Tag="Tag",e.Toast="Toast",e.Toolbar="Toolbar",e.Tooltip="Tooltip",e.StepperItem="Stepper Item",e.Stepper="Stepper",e.ResizePanel="Resize Panel",e.SplitPanel="Split Panel",e.HelpText="Help Text",e.Loader="Loader",e.ValueMin="0",e.ValueMax="100",e.Switch="Switch",e.FormErrorMessage="Form Error Message",e.ErrorMessage="Error Message",e.ErrorNotification="Error Notification Message",e.ErrorDescription="No Error Description",e.EmptyState="Empty State Message",e.EmptyStateDescription="No Empty State Description",e.Drawer="Drawer",e.CircularProgressBar="Circular Progress Bar",e.Card="Card",e.Avatar="Avatar",e.VerticalStepperItem="Vertical Stepper Item",e.Vertical="vertical",e.Horizontal="horizontal",e.Separator="Separator",e.Checkbox="Checkbox",e.TreeItem="Tree Item",e.Select="Select",e.Listbox="Listbox",e.CodeEditor="Code Editor",e.RichTextEditor="Rich Text Editor",e.SkeletonLoader="Skeleton Loader",e.Carousel="Carousel",e.SlideShow="Slideshow",e.InlineEdit="Inline Edit",e.Link="Link",e.Dialog="Dialog",e.FileUpload="File Upload",e.FilePreview="File Preview",e.FloatingPanel="Floating Panel",e.TabGroup="Tab Group",e.Grid="Table Data",e.GridRow="Grid Row",e.GridBody="Grid Body",e.GridHead="Grid Head",e.Input="Input",e.None="None",e.SideBar="Sidebar",e.InlineSidebar="Inline Sidebar",e.Slider="Slider",e.SlideToggle="Slide Toggle"}(vt||(vt={}));let St=class extends Fe{constructor(){super(...arguments),this.variant="normal",this.rounded=!1,this.pilltype="badge-color"}connectedCallback(){super.connectedCallback(),Ge(this,{[$e.Role]:wt.Text,[Be.AriaLabel]:this.textContent?.trim()||vt.Badge})}render(){return R`
+      `}};var wt,vt;Lt.styles=bt,e([pe(".icon-button")],Lt.prototype,"button",void 0),e([he()],Lt.prototype,"hasFocus",void 0),e([de()],Lt.prototype,"name",void 0),e([de()],Lt.prototype,"library",void 0),e([de()],Lt.prototype,"src",void 0),e([de()],Lt.prototype,"href",void 0),e([de()],Lt.prototype,"target",void 0),e([de()],Lt.prototype,"download",void 0),e([de()],Lt.prototype,"label",void 0),e([de({type:Boolean,reflect:!0})],Lt.prototype,"disabled",void 0),e([de({type:String,reflect:!0})],Lt.prototype,"color",void 0),e([de({type:Boolean,reflect:!0})],Lt.prototype,"ishovered",void 0),Lt=e([ce("nile-icon-button")],Lt),function(e){e.Button="button",e.Checkbox="checkbox",e.Dialog="dialog",e.Grid="grid",e.Gridcell="gridcell",e.Link="link",e.Listbox="listbox",e.Menu="menu",e.MenuItem="menuitem",e.MenuItemCheckbox="menuitemcheckbox",e.MenuItemRadio="menuitemradio",e.Option="option",e.Progressbar="progressbar",e.Radio="radio",e.Radiogroup="radiogroup",e.Slider="slider",e.Spinbutton="spinbutton",e.Switch="switch",e.Tab="tab",e.Tablist="tablist",e.Tabpanel="tabpanel",e.Textbox="textbox",e.Toolbar="toolbar",e.Image="img",e.Combobox="combobox",e.Status="status",e.Tooltip="tooltip",e.Accordion="accordion",e.Group="group",e.Tree="tree",e.Treeitem="treeitem",e.Region="region",e.Separator="separator",e.Alert="alert",e.Navigation="navigation",e.List="list",e.ListItem="listitem",e.Note="note",e.Timer="timer",e.Presentation="presentation",e.Application="application",e.Rowgroup="rowgroup",e.Row="row",e.Columnheader="columnheader",e.Table="table",e.Cell="cell",e.Text="text",e.None="none"}(wt||(wt={})),function(e){e.Date="Date",e.Hero="Hero",e.ListItem="List Item",e.Pagination="Pagination",e.Accordion="Accordion",e.List="List",e.Badge="Badge",e.Breadcrumb="Breadcrumb",e.BreadcrumbItem="Breadcrumb Item",e.Button="Button",e.ButtonToggle="Button Toggle",e.ButtonToggleGroup="Button Toggle Group",e.Dropdown="Dropdown",e.LiteTooltip="Lite Tooltip",e.Tag="Tag",e.Toast="Toast",e.Toolbar="Toolbar",e.Tooltip="Tooltip",e.StepperItem="Stepper Item",e.Stepper="Stepper",e.ResizePanel="Resize Panel",e.SplitPanel="Split Panel",e.HelpText="Help Text",e.Loader="Loader",e.ValueMin="0",e.ValueMax="100",e.Switch="Switch",e.FormErrorMessage="Form Error Message",e.ErrorMessage="Error Message",e.ErrorNotification="Error Notification Message",e.ErrorDescription="No Error Description",e.EmptyState="Empty State Message",e.EmptyStateDescription="No Empty State Description",e.Drawer="Drawer",e.CircularProgressBar="Circular Progress Bar",e.Card="Card",e.Avatar="Avatar",e.VerticalStepperItem="Vertical Stepper Item",e.Vertical="vertical",e.Horizontal="horizontal",e.Separator="Separator",e.Checkbox="Checkbox",e.TreeItem="Tree Item",e.Select="Select",e.Listbox="Listbox",e.CodeEditor="Code Editor",e.RichTextEditor="Rich Text Editor",e.SkeletonLoader="Skeleton Loader",e.Carousel="Carousel",e.SlideShow="Slideshow",e.InlineEdit="Inline Edit",e.Link="Link",e.Dialog="Dialog",e.FileUpload="File Upload",e.FilePreview="File Preview",e.FloatingPanel="Floating Panel",e.TabGroup="Tab Group",e.Grid="Table Data",e.GridRow="Grid Row",e.GridBody="Grid Body",e.GridHead="Grid Head",e.Input="Input",e.None="None",e.SideBar="Sidebar",e.InlineSidebar="Inline Sidebar",e.Slider="Slider",e.SlideToggle="Slide Toggle"}(vt||(vt={}));let St=class extends Fe{constructor(){super(...arguments),this.variant="normal",this.rounded=!1,this.pilltype="badge-color",this.size="md"}connectedCallback(){super.connectedCallback(),Ge(this,{[$e.Role]:wt.Text,[Be.AriaLabel]:this.textContent?.trim()||vt.Badge})}render(){return R`
       <span
         part="base"
-        class=${Ae({badge:!0,"badge--primary":"primary"===this.variant,"badge--normal":"normal"===this.variant,"badge--info":"info"===this.variant,"badge--pink":"pink"===this.variant,"badge--orange":"orange"===this.variant,"badge--purple":"purple"===this.variant,"badge--indigo":"indigo"===this.variant,"badge--blue":"blue"===this.variant,"badge--blue-light":"blue-light"===this.variant,"badge--gray-blue":"gray-blue"===this.variant,"badge--success":"success"===this.variant,"badge--warning":"warning"===this.variant,"badge--error":"error"===this.variant,"badge--brand":"brand"===this.variant,"badge--gray":"gray"===this.variant,"badge--pill-outline":"pill-outline"==this.pilltype,"badge--badge-color":"badge-color"==this.pilltype,"badge--rounded":this.rounded||"pill-outline"==this.pilltype||"pill-color"==this.pilltype})}
+        class=${Ae({badge:!0,"badge--primary":"primary"===this.variant,"badge--normal":"normal"===this.variant,"badge--info":"info"===this.variant,"badge--pink":"pink"===this.variant,"badge--orange":"orange"===this.variant,"badge--purple":"purple"===this.variant,"badge--indigo":"indigo"===this.variant,"badge--blue":"blue"===this.variant,"badge--blue-light":"blue-light"===this.variant,"badge--gray-blue":"gray-blue"===this.variant,"badge--success":"success"===this.variant,"badge--warning":"warning"===this.variant,"badge--error":"error"===this.variant,"badge--brand":"brand"===this.variant,"badge--gray":"gray"===this.variant,"badge--pill-outline":"pill-outline"==this.pilltype,"badge--badge-color":"badge-color"==this.pilltype,"badge--rounded":this.rounded||"pill-outline"==this.pilltype||"pill-color"==this.pilltype,"badge--sm":"sm"===this.size,"badge--md":"md"===this.size,"badge--lg":"lg"===this.size})}
       >
         <slot part="content" class="badge__content"></slot>
       </span>
-    `}};St.styles=ft,e([de({reflect:!0})],St.prototype,"variant",void 0),e([de({type:Boolean,reflect:!0})],St.prototype,"rounded",void 0),e([de({reflect:!0})],St.prototype,"pilltype",void 0),St=e([ce("nile-badge")],St);const kt=s`
+    `}};St.styles=ft,e([de({reflect:!0})],St.prototype,"variant",void 0),e([de({type:Boolean,reflect:!0})],St.prototype,"rounded",void 0),e([de({reflect:!0})],St.prototype,"pilltype",void 0),e([de({reflect:!0})],St.prototype,"size",void 0),St=e([ce("nile-badge")],St);const kt=s`
   :host {
     -webkit-font-smoothing: var(
       --nile-webkit-font-smoothing,
@@ -5207,7 +5228,7 @@ ${o?R`
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
@@ -5275,12 +5296,12 @@ ${o?R`
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
 
   .select--filled.select--disabled .select__combobox {
@@ -5291,7 +5312,7 @@ ${o?R`
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -5394,7 +5415,7 @@ ${o?R`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));
@@ -5452,7 +5473,7 @@ ${o?R`
 
   .select__custom-footer {
     display: block;
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;
   }
@@ -5467,7 +5488,7 @@ ${o?R`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     height: 15px;
     /* Auto layout */
     display: var(--nile-display-flex, var(--ng-display-flex));
@@ -6051,7 +6072,7 @@ ${o?R`
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
@@ -6102,7 +6123,7 @@ ${o?R`
 
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .select--warning .select__combobox {
@@ -6121,12 +6142,12 @@ ${o?R`
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
 
   .select--filled.select--disabled .select__combobox {
@@ -6137,7 +6158,7 @@ ${o?R`
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -6234,7 +6255,7 @@ ${o?R`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
@@ -6282,7 +6303,7 @@ ${o?R`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     height: 15px;
     /* Auto layout */
@@ -6377,7 +6398,7 @@ ${o?R`
   }
 
   .virtualized nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
 
   .virtualized nile-option[selected]::part(base) {
@@ -7209,7 +7230,7 @@ class Ys{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
@@ -7687,6 +7708,9 @@ class Ys{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
+  nile-menu {
+    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));
+  }
 
 `;let pa=class{static calculateAvailableSpace(e){const t=e.getBoundingClientRect(),i=window.innerHeight,n=i-t.bottom;return{spaceAbove:t.top,spaceBelow:n,viewportHeight:i}}static getOptimalPlacement(e){const{spaceAbove:t,spaceBelow:i}=this.calculateAvailableSpace(e);return i<200&&t>i?"top":"bottom"}static findBoundaryElements(e){const t=[];let i=e.parentElement;for(;i&&i!==document.body;){const e=window.getComputedStyle(i),n=e.overflow,o=e.overflowY,r=e.overflowX;"auto"!==n&&"scroll"!==n&&"auto"!==o&&"scroll"!==o&&"auto"!==r&&"scroll"!==r||t.push(i),(i.hasAttribute("data-floating-boundary")||i.classList.contains("floating-boundary")||i.classList.contains("scroll-container"))&&t.push(i),i=i.parentElement}return t.length>0?t:void 0}static calculateOptimalHeight(e,t,i){const n=t-(e.y+e.height),o=e.y;return o>n?Math.max(o-20,100):n>o?Math.max(n-20,100):Math.max(Math.min(o,n)-20,100)}static extractStylesAsCSS(e){return"string"==typeof e?e:Array.isArray(e)?e.map((e=>this.extractStylesAsCSS(e))).join("\n"):e&&"object"==typeof e&&e.cssText?e.cssText:""}static generateStyleId(){return`nile-auto-complete-styles-${Math.random().toString(36).substring(2,11)}`}static isPositioningOptimal(e,t){const{spaceAbove:i,spaceBelow:n}=this.calculateAvailableSpace(t),o=e.startsWith("top"),r=e.startsWith("bottom");return!(o&&n>i)&&!(r&&i>n)}static applyCollisionData(e,t,i){if(t.flip){const{overflows:n}=t.flip;if(e.setAttribute("data-placement",i),n&&n.length>0){const t=n.map((e=>e.placement)).join(",");e.setAttribute("data-overflow",t)}else e.removeAttribute("data-overflow")}if(t.shift){const{x:i,y:n}=t.shift;void 0===i||void 0===n||0===i&&0===n?e.removeAttribute("data-shift"):e.setAttribute("data-shift",`${i},${n}`)}if(t.size){const{availableWidth:i,availableHeight:n}=t.size;void 0!==i&&e.setAttribute("data-available-width",i.toString()),void 0!==n&&e.setAttribute("data-available-height",n.toString())}}},Da=class{static createBaseMenu(e){const t=document.createElement("nile-menu");return t.id="content-menu",t.className=e.enableVirtualScroll?"virtualized__menu":"",e.enableVirtualScroll,t.setAttribute("exportparts","menu__items-wrapper:options__wrapper"),t}static addMenuItems(e,t){(t.menuItems||[]).forEach((i=>{const n=this.createMenuItem(i,t);e.appendChild(n)}))}static createMenuItem(e,t){const i=document.createElement("div"),n=t.getItemRenderFunction(e);return ae(n,i),i.firstElementChild}static createPortalMenu(e){const t=this.createBaseMenu(e);return this.addMenuItems(t,e),t}static updatePortalMenuItems(e,t){if(!e)return;e.querySelectorAll("nile-menu-item").forEach((e=>e.remove())),this.addMenuItems(e,t)}},ya=class{static setupPortalEventListeners(e,t){e&&this.setupMenuSelectListeners(e,t)}static setupMenuSelectListeners(e,t){e&&e.addEventListener("nile-select",(e=>{const i=e;t.handleSelect&&t.handleSelect(i)}))}};class Ia{constructor(e){this.portalContainer=null,this.originalMenuParent=null,this.measuredMenuHeight=null,this.clonedMenu=null,this.cleanupAutoUpdate=null,this.currentPlacement="bottom",this.currentMiddlewareData=null,this.component=e}createPortalAppendContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.zIndex="9999",e.style.pointerEvents="none",e.style.width="auto",e.style.minWidth="auto",e.className="nile-auto-complete-portal-append",e}positionPortalAppend(){this.portalContainer&&this.component.dropdownElement&&(this.measureMenuHeight(),this.computeFloatingUIPosition())}measureMenuHeight(){!this.measuredMenuHeight&&this.portalContainer&&(this.portalContainer.style.position="absolute",this.portalContainer.style.visibility="hidden",this.portalContainer.style.top="0px",this.portalContainer.style.left="0px",this.portalContainer.offsetHeight,this.measuredMenuHeight=this.portalContainer.offsetHeight,this.portalContainer.style.visibility="")}async computeFloatingUIPosition(){if(!this.portalContainer)return;const e=this.component.inputElement||this.component,t=this.portalContainer;try{const{x:i,y:n,placement:o,middlewareData:r}=await this.calculateFloatingUIPosition(e,t);this.applyFloatingUIPosition(t,e,i,n,o,r)}catch(e){console.warn("Floating UI positioning failed, falling back to simple positioning:",e),this.fallbackPositioning()}}async calculateFloatingUIPosition(e,t){const i=pa.findBoundaryElements(e),n="top"===pa.getOptimalPlacement(e)?"top-start":"bottom-start",o=this.createFloatingUIMiddleware(i);return await zn(e,t,{placement:n,strategy:"fixed",middleware:o,platform:this.createCustomPlatform()})}createFloatingUIMiddleware(e){return[pn(4),In({apply:this.handleSizeMiddleware.bind(this),padding:10,boundary:e}),yn({fallbackPlacements:["bottom-start","top-start","bottom","top","bottom-end","top-end"],fallbackStrategy:"bestFit",padding:10,boundary:e}),Dn({padding:10,crossAxis:!0,boundary:e})]}handleSizeMiddleware({availableWidth:e,availableHeight:t,elements:i,rects:n}){const o=pa.calculateOptimalHeight(n.reference,window.innerHeight,this.currentPlacement);i.floating.style.maxHeight=`${o}px`,i.floating.style.setProperty("--auto-size-available-width",`${e}px`),i.floating.style.setProperty("--auto-size-available-height",`${o}px`)}createCustomPlatform(){return dn}applyFloatingUIPosition(e,t,i,n,o,r){const s=t.getBoundingClientRect();Object.assign(e.style,{left:`${s.left}px`,top:`${n}px`,position:"fixed",pointerEvents:"auto",width:"auto",minWidth:"auto"}),this.currentPlacement=o,this.currentMiddlewareData=r,pa.applyCollisionData(e,r,o);const a=o.split("-")[0];e.className=`nile-auto-complete-portal-append menu__listbox--${a}`}fallbackPositioning(){if(!this.portalContainer)return;const e=(this.component.inputElement||this.component).getBoundingClientRect(),t=window.innerHeight;this.measuredMenuHeight;const i=t-e.bottom,n=e.top;let o,r,s;n>i?(s=Math.max(n-20,100),o=Math.max(e.top-s-4,10),r="top"):(s=Math.max(i-20,100),o=e.bottom+4,r="bottom"),this.portalContainer.style.left=`${e.left}px`,this.portalContainer.style.top=`${o}px`,this.portalContainer.style.width="auto",this.portalContainer.style.minWidth="auto",this.portalContainer.style.maxHeight=`${s}px`,this.portalContainer.style.pointerEvents="auto",this.portalContainer.className=`nile-auto-complete-portal-append menu__listbox--${r}`,this.calculateAndSetAutoSizeProperties(e,o,r)}calculateAndSetAutoSizeProperties(e,t,i){if(!this.portalContainer)return;const n=window.innerHeight,o=window.innerWidth;let r;r="top"===i?e.top-10:n-e.bottom-10;const s=Math.min(e.width,o-e.left-10);this.portalContainer.style.setProperty("--auto-size-available-height",`${Math.max(r,100)}px`),this.portalContainer.style.setProperty("--auto-size-available-width",`${Math.max(s,200)}px`)}updatePortalAppendPosition(){this.component.portal&&this.portalContainer&&this.positionPortalAppend()}handleWindowResize(){this.component.portal&&this.portalContainer&&this.positionPortalAppend()}setupAutoUpdatePositioning(){this.portalContainer&&this.component&&(this.cleanupAutoUpdatePositioning(),this.cleanupAutoUpdate=Nn(this.component,this.portalContainer,(()=>{this.computeFloatingUIPosition()}),{ancestorScroll:!0,ancestorResize:!0,elementResize:!0,layoutShift:!0,animationFrame:!0}))}cleanupAutoUpdatePositioning(){this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null)}injectStylesToDocument(){if(!this.portalContainer)return;const e=pa.generateStyleId();if(document.getElementById(e))return;const t=this.component.constructor.styles;if(!t)return;const i=document.createElement("style");i.id=e,i.textContent=pa.extractStylesAsCSS(t),document.head.appendChild(i),this.portalContainer.__injectedStyleId=e}adoptStylesToPortalAppend(){this.portalContainer&&this.injectStylesToDocument()}setupPortalAppend(){this.component.portal&&this.component.updateComplete.then((()=>{setTimeout((()=>{const e=this.component.shadowRoot?.querySelector("#content-menu")||this.component.querySelector("#content-menu");e&&this.component.isDropdownOpen&&(this.originalMenuParent=e.parentElement,this.clonedMenu=this.createPortalMenu(),this.portalContainer=this.createPortalAppendContainer(),this.portalContainer.appendChild(this.clonedMenu),document.body.appendChild(this.portalContainer),this.adoptStylesToPortalAppend(),this.clonedMenu.style.display="",this.positionPortalAppend(),this.setupPortalEventListeners(),this.setupAutoUpdatePositioning(),window.addEventListener("resize",this.handleWindowResize.bind(this)))}),10)}))}createPortalMenu(){return Da.createPortalMenu(this.component)}setupPortalEventListeners(){ya.setupPortalEventListeners(this.clonedMenu,this.component)}cleanupPortalAppend(){if(this.cleanupAutoUpdatePositioning(),this.portalContainer&&this.portalContainer.parentNode){const e=this.portalContainer.__injectedStyleId;if(e){const t=document.getElementById(e);t&&t.remove()}this.portalContainer.parentNode.removeChild(this.portalContainer)}window.removeEventListener("resize",this.handleWindowResize.bind(this)),this.portalContainer=null,this.originalMenuParent=null,this.clonedMenu=null,this.measuredMenuHeight=null,this.currentPlacement="bottom",this.currentMiddlewareData=null}get portalContainerElement(){return this.portalContainer}resetMeasuredHeight(){this.measuredMenuHeight=null}updatePortalOptions(){this.portalContainer&&this.clonedMenu&&(Da.updatePortalMenuItems(this.clonedMenu,this.component),this.forceReposition())}forceReposition(){this.portalContainer&&this.computeFloatingUIPosition()}getCurrentPlacement(){return this.currentPlacement}getCurrentMiddlewareData(){return this.currentMiddlewareData}isUsingFloatingUI(){return null!==this.cleanupAutoUpdate}isPositioningOptimal(){if(!this.portalContainer||!this.currentMiddlewareData)return!0;const e=(this.component.inputElement||this.component).getBoundingClientRect(),t=window.innerHeight-e.bottom,i=e.top,n=this.currentPlacement.startsWith("top"),o=this.currentPlacement.startsWith("bottom");return!(n&&t>i)&&!(o&&i>t)}}let ja=class extends Fe{constructor(){super(...arguments),this.disabled=!1,this.isDropdownOpen=!1,this.portal=!1,this.portalManager=new Ia(this),this.enableVirtualScroll=!1,this.openOnFocus=!1,this.value="",this.placeholder="Type here ..",this.noBorder=!1,this.noOutline=!1,this.noPadding=!1,this.loading=!1,this.filterFunction=(e,t)=>e.toLowerCase().includes(t.toLowerCase()),this.renderItemFunction=e=>e,this.allMenuItems=[],this.enableVisibilityEffect=!1,this.enableTabClose=!1,this.noDropdownClose=!1,this.label="",this.menuItems=[],this.handleWindowResize=()=>{this.portalManager.updatePortalAppendPosition()},this.handleWindowScroll=()=>{this.portalManager.updatePortalAppendPosition()}}async firstUpdated(e){await this.updateComplete,this.visibilityManager=new fn({host:this,target:this.inputElement.input,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:()=>this.isDropdownOpen,onAnchorOutOfView:()=>{this.isDropdownOpen=!1,this.dropdownElement?.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view"})},onDocumentHidden:()=>{this.isDropdownOpen=!1,this.dropdownElement?.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"document-hidden"})},emit:(e,t)=>this.emit(`nile-${e}`,t)})}connectedCallback(){super.connectedCallback(),this.renderItemFunction=e=>e,this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.handleWindowResize=this.handleWindowResize.bind(this),this.handleWindowScroll=this.handleWindowScroll.bind(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.visibilityManager?.cleanup(),this.portalManager.cleanupPortalAppend()}updated(e){super.updated(e),e.has("allMenuItems")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.setVirtualMenuWidth(),this.portal&&this.isDropdownOpen&&this.portalManager.updatePortalOptions()),e.has("isDropdownOpen")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.handleDropdownOpenChange()),e.has("value")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.portal&&this.isDropdownOpen&&this.portalManager.updatePortalOptions()),e.has("portal")&&this.handlePortalChange()}handlePortalChange(){this.isDropdownOpen&&(this.portal?this.portalManager.setupPortalAppend():this.portalManager.cleanupPortalAppend())}handleDropdownOpenChange(){this.isDropdownOpen?(this.addOpenListeners(),this.visibilityManager?.setup(),this.portal&&this.portalManager.setupPortalAppend()):(this.removeOpenListeners(),this.visibilityManager?.cleanup(),this.portal&&this.portalManager.cleanupPortalAppend())}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.portal&&(window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0))}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("mousedown",this.handleDocumentMouseDown),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}handleDocumentFocusIn(e){if(!this.isDropdownOpen)return;const t=e.composedPath(),i=t.includes(this),n=this.dropdownElement&&t.includes(this.dropdownElement),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||(this.isDropdownOpen=!1,this.dropdownElement?.hide())}handleDocumentMouseDown(e){if(!this.isDropdownOpen)return;const t=e.composedPath(),i=t.includes(this),n=this.dropdownElement&&t.includes(this.dropdownElement),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||(this.isDropdownOpen=!1,this.dropdownElement?.hide())}render(){const e=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();return R`
     ${this.label?R`
@@ -7831,7 +7855,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   .combobox--focused .combobox__trigger {
     border-color: var(--ng-colors-border-brand);
     box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--disabled .combobox__trigger {
@@ -7885,7 +7909,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
 
   .combobox--filled .combobox__trigger {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--filled.combobox--open .combobox__trigger,
@@ -8080,7 +8104,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding: 0;
     max-width: var(--auto-size-available-width);
@@ -8140,7 +8164,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   }
 
   .combobox__options nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
 
   .combobox__options nile-option[selected]::part(base) {
@@ -8165,7 +8189,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     justify-content: space-between;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
     user-select: none;
   }
@@ -8215,7 +8239,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   .combobox__footer {
     flex-shrink: 0;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -8354,7 +8378,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   }
 
   .combobox__grid-col {
-    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-primary));
   }
 
   .combobox__grid-col:last-child {
@@ -8404,7 +8428,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     overflow: hidden;
   }
   .combobox__group-sticky-overlay .combobox__group-header {
-    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
   }
 
   .combobox__group-header {
@@ -8428,7 +8452,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     letter-spacing: 0.06em;
     color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     pointer-events: none;
     user-select: none;
   }
@@ -8999,9 +9023,11 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
 
   nile-auto-complete::part(base) {
     height: auto;
+    background-color: transparent;
   }
 
   .nile-chip:hover:not(.nile-chip--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary-hover));
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
   }
@@ -19632,7 +19658,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
           ${this._renderTrigger()}
           ${e}
         </nile-popover>
-      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.13"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
+      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.15"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
   .utility-control::part(base) {
     width: var(--nile-app-shell-utility-size, 32px);
     height: var(--nile-app-shell-utility-size, 32px);
@@ -24385,7 +24411,7 @@ a {
     max-height: var(--max-height);
     overflow: hidden;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
   }
@@ -24400,7 +24426,7 @@ a {
     align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__search-icon {
@@ -24439,7 +24465,7 @@ a {
     flex-wrap: wrap;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__scopes-label {
@@ -24481,7 +24507,7 @@ a {
     align-items: center;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
   }
@@ -24511,7 +24537,7 @@ a {
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;
@@ -24703,7 +24729,7 @@ a {
   /* Active / selected (keyboard or hover) */
   :host([active]:not([disabled])) .item,
   .item:hover {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
   }
 
@@ -24762,7 +24788,7 @@ a {
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;

package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var t,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){t=_lit.css;}],execute:function execute(){_export("s",o=t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n\n  .nile-auto-complete__label {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n  :host([required]) .nile-auto-complete__label::after {\n    content: \"*\";\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-inline-start: 2px;\n  }\n  :host([disabled]) {\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([disabled]) nile-input::part(base){\n   pointer-events: none;\n   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n\n  .nile-auto-complete__label {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n  :host([required]) .nile-auto-complete__label::after {\n    content: \"*\";\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-inline-start: 2px;\n  }\n  :host([disabled]) {\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([disabled]) nile-input::part(base){\n   pointer-events: none;\n   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  nile-menu {\n    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));\n  }\n\n"]))));}};});
 //# sourceMappingURL=nile-auto-complete.css.cjs.js.map

package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-auto-complete.css.cjs.js","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AutoComplete CSS\n */\nexport const styles = css`\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n\n  .nile-auto-complete__label {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n  :host([required]) .nile-auto-complete__label::after {\n    content: \"*\";\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-inline-start: 2px;\n  }\n  :host([disabled]) {\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([disabled]) nile-input::part(base){\n   pointer-events: none;\n   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-auto-complete.css.cjs.js","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AutoComplete CSS\n */\nexport const styles = css`\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n\n  .nile-auto-complete__label {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n  :host([required]) .nile-auto-complete__label::after {\n    content: \"*\";\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-inline-start: 2px;\n  }\n  :host([disabled]) {\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([disabled]) nile-input::part(base){\n   pointer-events: none;\n   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  nile-menu {\n    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));\n  }\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-auto-complete/nile-auto-complete.css.esm.js

@@ -1,4 +1,4 @@
-import{css as t}from"lit";const o=t`
+import{css as o}from"lit";const e=o`
   :host {
     --virtual-scroll-container-width:110px;
     --virtual-scroll-container-height:200px;
@@ -50,5 +50,8 @@ import{css as t}from"lit";const o=t`
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
+  nile-menu {
+    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));
+  }
 
-`;export{o as s};
+`;export{e as s};