@aquera/nile-elements 2.0.14 → 2.0.16

package/README.md

@@ -91,6 +91,12 @@ 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.16 (October 12, 2026)
+- Nile Tooltip, Nile Lite Tooltip: Text now falls back to `--ng-colors-text-white` instead of `--ng-colors-text-primary-on-brand`. With `@aquera/nile` 1.3.5 the dark-mode tooltip fill (`--ng-colors-bg-primary-solid`) becomes `graydarkmode-950`, and `text-primary-on-brand` is dark in dark mode, which would have left tooltip text at 1.14:1; it is now 19.32:1. Light mode is unchanged (both tokens are white). Pair with `@aquera/nile` 1.3.5 (UIF-1380)
+
+#### 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)

package/demo/nxtgen-classes.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /**
  * Do not edit directly
@@ -4378,7 +4378,7 @@
 /* colors-bg-primary-alt: var(--ng-color-base-white) */
 .ng-bg-primary-alt { background-color: var(--ng-colors-bg-primary-alt); }
 
-/* colors-bg-primary-hover: var(--ng-color-graylightmode-50) */
+/* colors-bg-primary-hover: var(--ng-color-graylightmode-100) */
 .ng-bg-primary-hover { background-color: var(--ng-colors-bg-primary-hover); }
 
 /* colors-bg-primary-solid: var(--ng-color-graylightmode-950) */
@@ -4390,7 +4390,7 @@
 /* colors-bg-secondary-alt: var(--ng-color-graylightmode-50) */
 .ng-bg-secondary-alt { background-color: var(--ng-colors-bg-secondary-alt); }
 
-/* colors-bg-secondary-hover: var(--ng-color-graylightmode-100) */
+/* colors-bg-secondary-hover: var(--ng-color-graylightmode-200) */
 .ng-bg-secondary-hover { background-color: var(--ng-colors-bg-secondary-hover); }
 
 /* colors-bg-secondary-subtle: var(--ng-color-graylightmode-25) */
@@ -4411,7 +4411,7 @@
 /* colors-bg-active: var(--ng-color-graylightmode-50) */
 .ng-bg-active { background-color: var(--ng-colors-bg-active); }
 
-/* colors-bg-disabled: var(--ng-color-graylightmode-100) */
+/* colors-bg-disabled: var(--ng-color-graylightmode-50) */
 .ng-bg-disabled { background-color: var(--ng-colors-bg-disabled); }
 
 /* colors-bg-disabled-subtle: var(--ng-color-graylightmode-50) */

package/demo/nxtgen-dark.css

@@ -709,18 +709,18 @@
   --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
   --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
   --ng-colors-bg-primary-alt: var(--ng-color-base-white);
-  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-100);
   --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
   --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
   --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-200);
   --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
   --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
   --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
   --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
   --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
   --ng-colors-bg-active: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-disabled: var(--ng-color-graylightmode-50);
   --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
   --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
   --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);
@@ -1097,22 +1097,22 @@
     --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
     --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
     --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
-    --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
+    --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-950);
     --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
     --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
-    --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
+    --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-950);
     --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
     --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
     --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
     --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
     --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
-    --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-active: var(--ng-color-graydarkmode-950);
     --ng-colors-bg-disabled: var(--ng-color-graydarkmode-700);
     --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
     --ng-colors-bg-overlay: var(--ng-color-base-black);
-    --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
+    --ng-colors-bg-brand-primary: var(--ng-color-graydarkmode-700);
     --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
-    --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-900);
+    --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-950);
     --ng-colors-bg-brand-solid: var(--ng-color-bluedark-500);
     --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-400);
     --ng-colors-bg-brand-section: var(--ng-color-bluedark-900);
@@ -1508,18 +1508,18 @@
   --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
   --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
   --ng-colors-bg-primary-alt: var(--ng-color-base-white);
-  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-100);
   --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
   --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
   --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-200);
   --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
   --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
   --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
   --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
   --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
   --ng-colors-bg-active: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-disabled: var(--ng-color-graylightmode-50);
   --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
   --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
   --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);
@@ -1896,22 +1896,22 @@
   --ng-colors-effects-shadow-skeumorphic-inner-border: var(--ng-colors-border-primary);
   --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-800);
   --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
-  --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
+  --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-950);
   --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
   --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
-  --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-950);
   --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-800);
   --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
   --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-950);
   --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
   --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
-  --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-active: var(--ng-color-graydarkmode-950);
   --ng-colors-bg-disabled: var(--ng-color-graydarkmode-700);
   --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
   --ng-colors-bg-overlay: var(--ng-color-base-black);
-  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
+  --ng-colors-bg-brand-primary: var(--ng-color-graydarkmode-700);
   --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
-  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-900);
+  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-950);
   --ng-colors-bg-brand-solid: var(--ng-color-bluedark-500);
   --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-400);
   --ng-colors-bg-brand-section: var(--ng-color-bluedark-900);

package/demo/nxtgen-properties.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /**
  * Do not edit directly

package/demo/nxtgen-utilities.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /**
  * Do not edit directly
@@ -9626,7 +9626,7 @@
 /* colors-bg-primary-alt: var(--ng-color-base-white) */
 .ng-bg-primary-alt { background-color: var(--ng-colors-bg-primary-alt); }
 
-/* colors-bg-primary-hover: var(--ng-color-graylightmode-50) */
+/* colors-bg-primary-hover: var(--ng-color-graylightmode-100) */
 .ng-bg-primary-hover { background-color: var(--ng-colors-bg-primary-hover); }
 
 /* colors-bg-primary-solid: var(--ng-color-graylightmode-950) */
@@ -9638,7 +9638,7 @@
 /* colors-bg-secondary-alt: var(--ng-color-graylightmode-50) */
 .ng-bg-secondary-alt { background-color: var(--ng-colors-bg-secondary-alt); }
 
-/* colors-bg-secondary-hover: var(--ng-color-graylightmode-100) */
+/* colors-bg-secondary-hover: var(--ng-color-graylightmode-200) */
 .ng-bg-secondary-hover { background-color: var(--ng-colors-bg-secondary-hover); }
 
 /* colors-bg-secondary-subtle: var(--ng-color-graylightmode-25) */
@@ -9659,7 +9659,7 @@
 /* colors-bg-active: var(--ng-color-graylightmode-50) */
 .ng-bg-active { background-color: var(--ng-colors-bg-active); }
 
-/* colors-bg-disabled: var(--ng-color-graylightmode-100) */
+/* colors-bg-disabled: var(--ng-color-graylightmode-50) */
 .ng-bg-disabled { background-color: var(--ng-colors-bg-disabled); }
 
 /* colors-bg-disabled-subtle: var(--ng-color-graylightmode-50) */

package/demo/nxtgen.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /* _Primitives - Style */
 
@@ -708,18 +708,18 @@
   --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
   --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
   --ng-colors-bg-primary-alt: var(--ng-color-base-white);
-  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-100);
   --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
   --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
   --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-200);
   --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
   --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
   --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
   --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
   --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
   --ng-colors-bg-active: var(--ng-color-graylightmode-50);
-  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-disabled: var(--ng-color-graylightmode-50);
   --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
   --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
   --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);

package/demo/utilities.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /**
  * Do not edit directly

package/demo/variables.css

@@ -1,5 +1,5 @@
-/* @nile-version 1.3.4 */
-:root { --nile-version: "1.3.4"; }
+/* @nile-version 1.3.5 */
+:root { --nile-version: "1.3.5"; }
 
 /**
  * Do not edit directly

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,
@@ -3949,7 +3970,7 @@ ${o?R`
     font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));
     line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
     padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     pointer-events: none;
     word-break: break-word;
     font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));
@@ -4642,7 +4663,7 @@ ${o?R`
   .tippy-box {
     position: relative;
     background-color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
-    color: var(--nile-colors-dark-200, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-colors-dark-200, var(--ng-colors-text-white));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-xs));
@@ -19637,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.14"';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.5"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.16"';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);