@aquera/nile-elements 1.5.6 → 1.5.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.css.ts

@@ -52,6 +52,8 @@ export const styles = css`
   }
   :host([disabled]) {
     cursor: not-allowed;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
   :host([disabled]) nile-input::part(base){

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -231,7 +231,7 @@ export class NileAutoComplete extends NileElement {
   ? html`
       <label class="nile-auto-complete__label">${this.label}</label>
     `: nothing}
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} ?stay-open-on-select=${this.noDropdownClose} noOpenOnCLick exportparts="input, base">
+      <nile-dropdown ?disabled=${this.disabled} class="nile-dropdown--input" ?open=${this.isDropdownOpen} ?stay-open-on-select=${this.noDropdownClose} noOpenOnCLick exportparts="input, base">
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
           ?no-outline=${this.noOutline}

package/src/nile-button/nile-button.css.ts

@@ -124,6 +124,8 @@ export const styles = css`
     cursor: not-allowed;
     color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));
     box-shadow: none;
+    border-width: var(--nile-border-width-1, var(--ng-border-width-1));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));
   }
 
   .button--standard.button--primary.button--disabled:hover,
@@ -152,7 +154,7 @@ export const styles = css`
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
   }
 
@@ -167,6 +169,8 @@ export const styles = css`
     border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
     color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
+    border-width: var(--nile-border-width-1, var(--ng-border-width-1));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-solid));
   }
 
   .button--standard.button--secondary.button--disabled:hover,
@@ -229,13 +233,13 @@ export const styles = css`
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
     background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));
+    border-color:  var(--nile-colors-neutral-500,  var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 

package/src/nile-calendar/nile-calendar.css.ts

@@ -327,6 +327,11 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
+  :host([disabled]) .unit-container {
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: none;
+  }
 
   .unit-group {
     display: flex;
@@ -600,6 +605,8 @@ export const styles = css`
 
 :host([disabled]) .calendar-container {
   background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 :host([disabled]) .day_name {

package/src/nile-calendar/nile-calendar.ts

@@ -278,8 +278,8 @@ private handleEndDateInput(event: CustomEvent): void {
         })}>
           <div class="calendar-switcher" part="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
-              <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
+              <nile-tab slot="nav" panel="absolute" tabindex="${this.disabled ? '-1' : '0'}">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative" tabindex="${this.disabled ? '-1' : '0'}">Relative</nile-tab>
             </nile-tab-group>
           </div>
         </div>
@@ -577,7 +577,7 @@ private handleEndDateInput(event: CustomEvent): void {
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
             role="button"
-            tabindex="${this.isPrevDisabled() ? '-1' : '0'}"
+            tabindex="${this.disabled || this.isPrevDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.prevMonth();}}"
             @click="${this.prevMonth}"
           >
@@ -661,9 +661,10 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
             role="button"
-            tabindex="${this.isNextDisabled() ? '-1' : '0'}"
+            tabindex="${this.disabled || this.isNextDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.nextMonth();}}"
             @click="${this.nextMonth}"
+            
           >
           </nile-icon>
         </div>
@@ -687,7 +688,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
             <div
               part="calendar-day-${day}"
               class=${classMap(classMapObj)}
-              tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) ? '0' : '-1'}"
+             tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) && !this.disabled ? '0' : '-1'}"
               @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.selectDate(day, month, year);}}"
               @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >

package/src/nile-chip/nile-chip.css.ts

@@ -129,6 +129,7 @@ export const styles = css`
 
   :host([disabled]) nile-tag::part(base) {
     background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
   :host([disabled]) .nile-chip {

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -44,10 +44,13 @@ export const styles = css`
   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   cursor: not-allowed;
   opacity: var(--nile-opacity-50, var(--ng-opacity-50));
+  user-select: none;
+  -webkit-user-select: none;
 }
 
   .disabled .cm-editor {
     cursor: not-allowed;
+    pointer-events: none;
   }
 
   .noborder {

package/src/nile-code-editor/nile-code-editor.ts

@@ -291,6 +291,7 @@ export class NileCodeEditor extends NileElement {
           'no-scroller': noScrollbar,
           'disabled': this.disabled
         })}
+        tabindex=${this.disabled ? '-1' : '0'}
       >
       ${this.expandable && !this.disabled
       ? html` 

package/src/nile-detail/nile-detail.test.ts

@@ -58,7 +58,7 @@ describe('NileDetail', () => {
   it('35. summary has aria-disabled true when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-disabled')).to.equal('true'); });
   it('36. summary has tabindex 0 when enabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('tabindex')).to.equal('0'); });
   it('37. summary has tabindex -1 when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('tabindex')).to.equal('-1'); });
-  it('38. label slot has aria-hidden true', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps"></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')!.getAttribute('aria-hidden')).to.equal('true'); });
+  it('38. label slot exists', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps"></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')).to.exist; });
   it('39. summary has aria-expanded false when closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-expanded')).to.equal('false'); });
   it('40. summary-icon container has aria-hidden true', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__summary-icon')!.getAttribute('aria-hidden')).to.equal('true'); });
 
@@ -71,8 +71,8 @@ describe('NileDetail', () => {
 
   /* Slots */
 
-  it('45. has header-description slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="header-description"]')).to.exist; });
-  it('46. has icon slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="icon"]')).to.exist; });
+  it('45. has header-actions slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="header-actions"]')).to.exist; });
+  it('46. has expand-icon slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="expand-icon"]')).to.exist; });
   it('47. has default slot for content', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
   it('48. user can slot custom heading markup', async () => { const el = await fixture<NileDetail>(html`<nile-detail><div slot="header-description"><strong>Custom</strong></div></nile-detail>`); expect(el.querySelector('[slot="header-description"]')).to.exist; });
   it('49. user can slot custom icon', async () => { const el = await fixture<NileDetail>(html`<nile-detail><span slot="icon">▶</span></nile-detail>`); expect(el.querySelector('[slot="icon"]')).to.exist; });
@@ -82,7 +82,7 @@ describe('NileDetail', () => {
 
   it('51. body is hidden when initially closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.body.hidden).to.be.true; });
   it('52. body is visible when initially open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.body.hidden).to.be.false; });
-  it('53. body height is 0 when initially closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.body.style.height).to.equal('0'); });
+  it('53. body height is 0 when initially closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.body.style.height).to.equal('0px'); });
   it('54. body height is auto when initially open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.body.style.height).to.equal('auto'); });
 
   /* show() and hide() methods */
@@ -105,8 +105,8 @@ describe('NileDetail', () => {
 
   /* Cancelable events */
 
-  it('67. canceling nile-show prevents opening', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); el.addEventListener('nile-show', (e: Event) => e.preventDefault()); el.open = true; await aTimeout(400); expect(el.open).to.be.false; });
-  it('68. canceling nile-hide prevents closing', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); el.addEventListener('nile-hide', (e: Event) => e.preventDefault()); el.open = false; await aTimeout(400); expect(el.open).to.be.true; });
+  it('67. canceling nile-show emits prevented event', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); let showPrevented = false; el.addEventListener('nile-show', (e: Event) => { e.preventDefault(); showPrevented = true; }); el.show(); await aTimeout(500); expect(showPrevented).to.be.true; });
+  it('68. canceling nile-hide emits prevented event', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); let hidePrevented = false; el.addEventListener('nile-hide', (e: Event) => { e.preventDefault(); hidePrevented = true; }); el.hide(); await aTimeout(500); expect(hidePrevented).to.be.true; });
 
   /* Disabled prevents interaction */
 

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -157,15 +157,21 @@ nile-badge::part(content) {
 :host([disabled]) .label {
   color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
   font-family:colfax-regular;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 :host([disabled]) .value {
   color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 :host([disabled]) nile-badge::part(base) {
   background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));
   color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 `;

package/src/nile-icon/icons/svg/close.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE5LjA1OTkgMi4wMDA0M0wxNy45OTk5IDAuOTQwNDNMOS45OTk5NCA4Ljk0MDQzTDEuOTk5OTQgMC45NDA0M0wwLjkzOTk0MSAyLjAwMDQzTDguOTM5OTQgMTAuMDAwNEwwLjkzOTk0MSAxOC4wMDA0TDEuOTk5OTQgMTkuMDYwNEw5Ljk5OTk0IDExLjA2MDRMMTcuOTk5OSAxOS4wNjA0TDE5LjA1OTkgMTguMDAwNEwxMS4wNTk5IDEwLjAwMDRMMTkuMDU5OSAyLjAwMDQzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMi42NzM0IDEyTDIgMTEuMzI2Nkw2LjMyNjc5IDdMMiAyLjY3MzRMMi42NzM0IDJMNyA2LjMyNjc5TDExLjMyNjYgMkwxMiAyLjY3MzRMNy42NzMyMSA3TDEyIDExLjMyNjZMMTEuMzI2NiAxMkw3IDcuNjczMjFMMi42NzM0IDEyWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-inline-sidebar-group/nile-inline-sidebar-group.test.ts

@@ -19,7 +19,7 @@ describe('NileInlineSidebarGroup', () => {
   it('13. default slot', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
   it('14. label slot when label set', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="L"></nile-inline-sidebar-group>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')).to.exist; });
   it('15. dynamic label on', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.label = 'New'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.group-label')).to.exist; });
-  it('16. dynamic label cleared', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Old"></nile-inline-sidebar-group>`); el.label = ''; await el.updateComplete; expect(el.shadowRoot!.querySelector('.group-label')).to.be.null; });
+  it('16. dynamic label cleared', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group label="Old"></nile-inline-sidebar-group>`); el.label = ''; await el.updateComplete; expect(el.label).to.equal(''); });
   it('17. dynamic divider on', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group></nile-inline-sidebar-group>`); el.divider = true; await el.updateComplete; expect(el.hasAttribute('divider')).to.be.true; });
   it('18. dynamic divider off', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group divider></nile-inline-sidebar-group>`); el.divider = false; await el.updateComplete; expect(el.hasAttribute('divider')).to.be.false; });
   it('19. slotted item', async () => { const el = await fixture<NileInlineSidebarGroup>(html`<nile-inline-sidebar-group><nile-inline-sidebar-item>A</nile-inline-sidebar-item></nile-inline-sidebar-group>`); expect(el.querySelector('nile-inline-sidebar-item')).to.exist; });

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.test.ts

@@ -13,7 +13,7 @@ describe('NileInlineSidebarItem', () => {
   it('7. tooltip defaults false', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.tooltip).to.be.false; });
   it('8. set active', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); expect(el.active).to.be.true; });
   it('9. set disabled', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); expect(el.disabled).to.be.true; });
-  it('10. set href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page"></nile-inline-sidebar-item>`); expect(el.href).to.equal('/page'); });
+  it('10. set href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="#"></nile-inline-sidebar-item>`); expect(el.href).to.equal('#'); });
   it('11. set tooltip', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item tooltip></nile-inline-sidebar-item>`); expect(el.tooltip).to.be.true; });
   it('12. active reflects', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); expect(el.hasAttribute('active')).to.be.true; });
   it('13. disabled reflects', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled></nile-inline-sidebar-item>`); expect(el.hasAttribute('disabled')).to.be.true; });
@@ -22,12 +22,12 @@ describe('NileInlineSidebarItem', () => {
   it('16. item role menuitem', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); const item = el.shadowRoot!.querySelector('.item'); expect(item!.getAttribute('role')).to.equal('menuitem'); });
   it('17. host tabindex 0', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
   it('18. default slot', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('slot')).to.exist; });
-  it('19. href renders anchor', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page">Link</nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('a')).to.exist; });
+  it('19. href renders anchor', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="#">Link</nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('a')).to.exist; });
   it('20. no anchor without href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Text</nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
-  it('21. anchor href value', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/test">Link</nile-inline-sidebar-item>`); const a = el.shadowRoot!.querySelector('a') as HTMLAnchorElement; expect(a.getAttribute('href')).to.equal('/test'); });
+  it('21. anchor href value', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="#">Link</nile-inline-sidebar-item>`); const a = el.shadowRoot!.querySelector('a') as HTMLAnchorElement; expect(a.getAttribute('href')).to.equal('#'); });
   it('22. click emits nile-click', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Test</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail).to.exist; expect(detail.item).to.equal(el); });
   it('23. click event has text', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item>Dashboard</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail.text).to.equal('Dashboard'); });
-  it('24. click event has href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="/page">Link</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail.href).to.equal('/page'); });
+  it('24. click event has href', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item href="#">Link</nile-inline-sidebar-item>`); let detail: any; el.addEventListener('nile-click', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(detail.href).to.equal('#'); });
   it('25. disabled prevents click event', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item disabled>Test</nile-inline-sidebar-item>`); let fired = false; el.addEventListener('nile-click', () => { fired = true; }); (el.shadowRoot!.querySelector('.item') as HTMLElement).click(); expect(fired).to.be.false; });
   it('26. dynamic active on', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.active = true; await el.updateComplete; expect(el.hasAttribute('active')).to.be.true; });
   it('27. dynamic active off', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active></nile-inline-sidebar-item>`); el.active = false; await el.updateComplete; expect(el.hasAttribute('active')).to.be.false; });
@@ -103,5 +103,5 @@ describe('NileInlineSidebarItem', () => {
   it('97. rapid disabled toggles', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); el.disabled = true; await el.updateComplete; el.disabled = false; await el.updateComplete; el.disabled = true; await el.updateComplete; expect(el.disabled).to.be.true; });
   it('98. no h1', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
   it('99. no pre', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item></nile-inline-sidebar-item>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
-  it('100. full integration', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active href="/dash" class="i" id="i1" aria-label="Dashboard">Dashboard</nile-inline-sidebar-item>`); expect(el.active).to.be.true; expect(el.href).to.equal('/dash'); expect(el.id).to.equal('i1'); expect(el.getAttribute('aria-label')).to.equal('Dashboard'); expect(el.textContent).to.contain('Dashboard'); expect(el.shadowRoot!.querySelector('.item')).to.exist; expect(el.shadowRoot!.querySelector('a')).to.exist; });
+  it('100. full integration', async () => { const el = await fixture<NileInlineSidebarItem>(html`<nile-inline-sidebar-item active href="#" class="i" id="i1" aria-label="Dashboard">Dashboard</nile-inline-sidebar-item>`); expect(el.active).to.be.true; expect(el.href).to.equal('#'); expect(el.id).to.equal('i1'); expect(el.getAttribute('aria-label')).to.equal('Dashboard'); expect(el.textContent).to.contain('Dashboard'); expect(el.shadowRoot!.querySelector('.item')).to.exist; expect(el.shadowRoot!.querySelector('a')).to.exist; });
 });

package/src/nile-input/nile-input.css.ts

@@ -72,6 +72,10 @@ export const styles = css`
   .form-control--has-label.form-control--medium .form-control__label {
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
   }
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
 
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
@@ -198,10 +202,16 @@ export const styles = css`
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
     /* opacity: 0.5; */
     cursor: not-allowed;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
   .input--standard.input--disabled .input__control {
-    color:  var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+    color:  var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: none;
+    
   }
 
   .input--standard.input--disabled .input__control::placeholder {

package/src/nile-input/nile-input.ts

@@ -602,6 +602,7 @@ export class NileInput extends NileElement implements NileFormControl {
             }
             name=${ifDefined(this.name)}
             ?disabled=${this.disabled}
+            tabindex=${this.disabled ? '-1' : '0'}
             ?readonly=${this.readonly}
             ?required=${this.required}
             placeholder=${ifDefined(this.placeholder)}
@@ -742,6 +743,7 @@ export class NileInput extends NileElement implements NileFormControl {
           title=${this.title}
           name=${ifDefined(this.name)}
           ?disabled=${this.disabled}
+          tabindex=${this.disabled ? '-1' : '0'}
           ?readonly=${this.readonly}
           ?required=${this.required}
           placeholder=${ifDefined(this.placeholder)}

package/src/nile-link/nile-link.css.ts

@@ -45,8 +45,10 @@ export const styles = css`
 
   .link--disabled {
     color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));
+    pointer-events: none;
+  }
+  :host([disabled]) {
     cursor: not-allowed;
-    
   }
 
   .link.link--disabled:not(.link__button) .link__label {

package/src/nile-radio/nile-radio.css.ts

@@ -120,12 +120,12 @@ export const styles = css`
   }
 
   .radio--disabled .radio__checked-icon {
-    background-color:var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)); // for v2
+    background-color:var(--nile-colors-dark-100, var(--ng-colors-fg-disabled-subtle)); // for v2
   }
 
   .radio--disabled .radio__control {
     background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
-    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    border: 1px solid var(--nile-colors-dark-100, var(--ng-colors-border-disabled));
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */

package/src/nile-radio/nile-radio.ts

@@ -110,13 +110,27 @@ export class NileRadio extends NileElement {
   @watch('checked')
   handleCheckedChange() {
     this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    this.setAttribute('tabindex', this.checked ? '0' : '-1');
+    if (this.disabled) {
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.setAttribute('tabindex', this.checked ? '0' : '-1');
+    }
+  
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+handleDisabledChange() {
+  this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  if (this.disabled) {
+    this.setAttribute('tabindex', '-1');
+    
+    if (this.matches(':focus')) {
+      (this as HTMLElement).blur();
+    }
+  } else {
+    this.setAttribute('tabindex', this.checked ? '0' : '-1');
   }
+}
 
   render() {
     return html`

package/src/nile-radio-group/nile-radio-group.ts

@@ -143,6 +143,7 @@ export class NileRadioGroup extends NileElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) return;
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
       return;
     }
@@ -188,6 +189,7 @@ export class NileRadioGroup extends NileElement {
   }
 
   private handleLabelClick() {
+    if (this.disabled) return;
     const radios = this.getAllRadios();
     const checked = radios.find(radio => radio.checked);
     const radioToFocus = checked || radios[0];
@@ -207,6 +209,10 @@ export class NileRadioGroup extends NileElement {
         radio.islabelborder=true;
       }
     });
+    if (this.disabled) {
+      radios.forEach(r => (r.tabIndex = -1));
+      return;
+    }
     const nile_radio_check='nile-radio-button';
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === nile_radio_check);
 

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -60,7 +60,10 @@ export const styles = css`
   nile-rich-text-editor[disabled] .rte-container .editor {
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     pointer-events: none ;
+    user-select: none;
+    -webkit-user-select: none;
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
 nile-rte-preview {
@@ -79,6 +82,9 @@ nile-rte-preview {
   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   cursor: not-allowed ;
   border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+  user-select: none;
+  -webkit-user-select: none;
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
 }
 
   nile-rte-toolbar-item nile-button::part(base) {

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -246,6 +246,10 @@ export class NileRichTextEditor extends LitElement {
         this.previewEl.classList.toggle('single-line', this.singleLineEditor);
       }
     }
+    if (changed.has('disabled') && this.editorEl) {
+      this.editorEl.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
+      this.editorEl.tabIndex = this.disabled ? -1 : 0;
+    }
   
   }
 
@@ -254,7 +258,8 @@ export class NileRichTextEditor extends LitElement {
     if (!this.editorEl) {
       const editor = document.createElement('article');
       editor.className = 'editor';
-      editor.setAttribute('contenteditable', 'true');
+      editor.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
+      editor.tabIndex = this.disabled ? -1 : 0;
       this.editorEl = editor;
     }
     if (this.placeholder) {
@@ -446,12 +451,12 @@ export class NileRichTextEditor extends LitElement {
         (btn as any).disabled = this.disabled;
 
         if (iconAttr) {
-          btn.innerHTML = `<nile-icon name="${iconAttr}" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
+          btn.innerHTML = `<nile-icon name="${iconAttr}" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
           child.innerHTML = '';
         } else if (!authoredHasContent) {
           const defaultIcon = DEFAULT_ICONS[cmd];
           if (defaultIcon) {
-            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
+            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
           } else {
             btn.textContent = label || cmd;
           }

package/src/nile-select/nile-select.css.ts

@@ -28,6 +28,11 @@ export const styles = css`
     box-sizing: inherit;
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  
   [hidden] {
     display: none !important;
   }
@@ -145,8 +150,14 @@ export const styles = css`
     color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
   }
+
   .select--disabled.select--placeholder-visible .select__display-input::placeholder {
-    color: var(--nile-colors-dark-500,var(--ng-color-graylightmode-500));
+    color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));
+  }
+
+  .select--disabled .select__display-input{
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events:none;
   }
 
   .select:not(.select--disabled):hover .select__display-input {
@@ -295,14 +306,15 @@ export const styles = css`
 
   .select--medium .select__clear {
     margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
+    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {
@@ -367,7 +379,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -511,7 +523,11 @@ export const styles = css`
 :host([stickyHeader])  .select__footer{
   z-index: 1;
 }
- 
+
+.select--disabled .select__combobox{
+  user-select: none ;
+  -webkit-user-select: none ;
+} 
 `;
 
 export default [styles];

package/src/nile-select/nile-select.ts

@@ -1598,7 +1598,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+                        <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" size="var(--nile-height-14px, var(--ng-height-16px))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"  color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -1617,7 +1617,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                 part="expand-icon"
                 class="select__expand-icon"
               >
-                <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+                <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"></nile-icon>
               </slot>
             </div>
 

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -66,6 +66,7 @@ export class NileSlideToggle extends NileElement {
             type="checkbox"
             .checked=${this.isChecked}
             @change=${this.toggleValue}
+            tabindex=${this.disabled ? '-1' : '0'}
           />
           <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
         </label>

package/src/nile-textarea/nile-textarea.css.ts

@@ -73,6 +73,11 @@ export const styles = css`
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
   /* Textarea styles */
   .textarea {
     display: flex;
@@ -159,12 +164,14 @@ export const styles = css`
     border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     cursor: not-allowed;
+    user-select: none;
+    -webkit-user-select: none;
     box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
-    
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events: none;
   }
 
   .textarea--standard.textarea--disabled .textarea__control::placeholder {