@aquera/nile-elements 1.5.6 → 1.5.8

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.8",
   "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,12 @@ 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));
     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));
   }
 
@@ -519,9 +522,6 @@ export const styles = css`
     ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
-  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
-  }
 
   /* Caution Variant */
   .button--standard.button--caution ::slotted(nile-icon:not([color])) {
@@ -588,13 +588,15 @@ export const styles = css`
 
   .button--outline.button--secondary:hover:not(.button--disabled),
   .button--outline.button--secondary.button--checked:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-white-base);
+    border-color:var(--nile-colors-neutral-700);
+    background-color:var(--nile-colors-dark-200);
   }
 
   .button--outline.button--secondary:active:not(.button--disabled) {
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+    background-color:var(--nile-colors-white-base);
   }
 
   /* Primary */
@@ -605,12 +607,13 @@ export const styles = css`
 
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-blue-100);
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
     border-color: var(--nile-colors-primary-700);
-    color: var(--nile-colors-white-base);
+    box-shadow:var(--nile-box-shadow-6);
+    background-color:var(--nile-colors-white-base);
   }
 
   /* Success */

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-grid/nile-grid.css.ts

@@ -23,7 +23,6 @@ export const styles = css`
     width: 100%;
     min-width: var(--min-width);
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));
-    overscroll-behavior: none;
   }
 
   ::slotted(nile-grid-head),

package/src/nile-grid/nile-grid.layout.ts

@@ -77,6 +77,11 @@ export const layout = (
     addVariablesValue(nileGrid);
     applyColumnsTemplate(nileGrid, nileGrid.columnWidths);
     nileGrid.needsWidthLayout = false;
+
+    if (!nileGrid.isGridReady) {
+      nileGrid.isGridReady = true;
+      nileGrid.emit('nile-grid-ready');
+    }
   }
 };
 

package/src/nile-grid/nile-grid.ts

@@ -54,6 +54,9 @@ export class NileGrid extends NileElement {
   /** To enable hoverable rows */
   @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;
 
+  /** Controls vertical overscroll behavior when the grid is scrollable. */
+  @property({ type: String, attribute: true, reflect: true }) overflowScrollBehaviour: string = "none";
+
   /** To store the mutation observer */
   private mo?: MutationObserver;
 
@@ -105,6 +108,8 @@ export class NileGrid extends NileElement {
 
   @state() public colCount = 0;
   
+  public isGridReady = false;
+
   public shadowLeftVisibleSticky?: boolean;
 
   public shadowRightVisibleSticky?: boolean;
@@ -141,6 +146,13 @@ export class NileGrid extends NileElement {
     });
   };
 
+  private updateOverscrollBehavior() {
+    const isVerticallyScrollable = this.scrollHeight > this.clientHeight;
+    this.style.overscrollBehavior = isVerticallyScrollable
+      ? this.overflowScrollBehaviour
+      : '';
+  }
+
 
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
@@ -207,11 +219,20 @@ export class NileGrid extends NileElement {
       this._attachObserverAndLayout.bind(this)
     );
     this.addEventListener('scroll', this.syncStickyShadowsRaf);
-    this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
+    this.resizeObserverStickyShadows = new ResizeObserver(() => {
+      syncStickyShadows(this);
+      this.updateOverscrollBehavior();
+    });
     this.resizeObserverStickyShadows.observe(this);
     this.syncStickyShadowsRaf();
   }
 
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("overflowScrollBehaviour")) {
+      this.updateOverscrollBehavior();
+    }
+  }
+
   private _attachObserverAndLayout() {
     this.mo?.disconnect();
     this.mo = new MutationObserver(() => {

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-icon/icons/svg/index.ts

@@ -308,9 +308,11 @@ export { default as ngbatterycharging } from './ng-battery-charging';
 export { default as ngbell01 } from './ng-bell-01';
 export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
+export { default as ngboolean } from './ng-boolean';
 export { default as ngbriefcase01 } from './ng-briefcase-01';
 export { default as ngbuilding01 } from './ng-building-01';
 export { default as ngbuilding05 } from './ng-building-05';
+export { default as ngbuilding07 } from './ng-building-07';
 export { default as ngbuttonloadingblueanimated } from './ng-button-loading-blue-animated';
 export { default as ngbuttonloadingblue } from './ng-button-loading-blue';
 export { default as ngcalendarplus02 } from './ng-calendar-plus-02';
@@ -328,8 +330,10 @@ export { default as ngchevronright } from './ng-chevron-right';
 export { default as ngchevronselectorvertical } from './ng-chevron-selector-vertical';
 export { default as ngchevronupdouble } from './ng-chevron-up-double';
 export { default as ngchevronup } from './ng-chevron-up';
+export { default as ngclockrefresh } from './ng-clock-refresh';
 export { default as ngcolumns02 } from './ng-columns-02';
 export { default as ngcopy03 } from './ng-copy-03';
+export { default as ngdataflow02 } from './ng-dataflow-02';
 export { default as ngdataflow04 } from './ng-dataflow-04';
 export { default as ngdotsgrid } from './ng-dots-grid';
 export { default as ngdotsvertical } from './ng-dots-vertical';
@@ -345,6 +349,7 @@ export { default as ngfile06 } from './ng-file-06';
 export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';
+export { default as ngfoldercode } from './ng-folder-code';
 export { default as nggrid01 } from './ng-grid-01';
 export { default as nghash } from './ng-hash';
 export { default as nghelpcircle } from './ng-help-circle';
@@ -356,6 +361,7 @@ export { default as ngitalic01 } from './ng-italic-01';
 export { default as ngkey01 } from './ng-key-01';
 export { default as nglayersthree01 } from './ng-layers-three-01';
 export { default as nglayersthree02 } from './ng-layers-three-02';
+export { default as nglightbulb05 } from './ng-lightbulb-05';
 export { default as nglist } from './ng-list';
 export { default as nglock03 } from './ng-lock-03';
 export { default as nglogout01 } from './ng-log-out-01';
@@ -367,6 +373,7 @@ export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
 export { default as ngminus } from './ng-minus';
 export { default as ngmonitor } from './ng-monitor';
+export { default as ngnumber } from './ng-number';
 export { default as ngpiechart03 } from './ng-pie-chart-03';
 export { default as ngplus } from './ng-plus';
 export { default as ngpower01 } from './ng-power-01';
@@ -383,6 +390,7 @@ export { default as ngshare06 } from './ng-share-06';
 export { default as ngshieldtick } from './ng-shield-tick';
 export { default as ngshoppingbag01 } from './ng-shopping-bag-01';
 export { default as ngstars02 } from './ng-stars-02';
+export { default as ngstring } from './ng-string';
 export { default as ngswitchhorizontal01 } from './ng-switch-horizontal-01';
 export { default as ngtag } from './ng-tag';
 export { default as ngtrash01 } from './ng-trash-01';

package/src/nile-icon/icons/svg/ng-boolean.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuOCAzQzEyLjggMi41NTgxNyAxMi40NDE4IDIuMiAxMiAyLjJDMTEuNTU4MiAyLjIgMTEuMiAyLjU1ODE3IDExLjIgM0gxMkgxMi44Wk0xMS4yIDIxQzExLjIgMjEuNDQxOCAxMS41NTgyIDIxLjggMTIgMjEuOEMxMi40NDE4IDIxLjggMTIuOCAyMS40NDE4IDEyLjggMjFIMTJIMTEuMlpNMiA3LjJDMS41NTgxNyA3LjIgMS4yIDcuNTU4MTcgMS4yIDhDMS4yIDguNDQxODMgMS41NTgxNyA4LjggMiA4LjhWOFY3LjJaTTkgOC44QzkuNDQxODMgOC44IDkuOCA4LjQ0MTgzIDkuOCA4QzkuOCA3LjU1ODE3IDkuNDQxODMgNy4yIDkgNy4yVjhWOC44Wk00LjcgMTZDNC43IDE2LjQ0MTggNS4wNTgxNyAxNi44IDUuNSAxNi44QzUuOTQxODMgMTYuOCA2LjMgMTYuNDQxOCA2LjMgMTZINS41SDQuN1pNMTYgOFY3LjJDMTUuNTU4MiA3LjIgMTUuMiA3LjU1ODE3IDE1LjIgOEgxNlpNMTUuMiAxNkMxNS4yIDE2LjQ0MTggMTUuNTU4MiAxNi44IDE2IDE2LjhDMTYuNDQxOCAxNi44IDE2LjggMTYuNDQxOCAxNi44IDE2SDE2SDE1LjJaTTIyIDguOEMyMi40NDE4IDguOCAyMi44IDguNDQxODMgMjIuOCA4QzIyLjggNy41NTgxNyAyMi40NDE4IDcuMiAyMiA3LjJWOFY4LjhaTTE2IDExLjJDMTUuNTU4MiAxMS4yIDE1LjIgMTEuNTU4MiAxNS4yIDEyQzE1LjIgMTIuNDQxOCAxNS41NTgyIDEyLjggMTYgMTIuOFYxMlYxMS4yWk0yMiAxMi44QzIyLjQ0MTggMTIuOCAyMi44IDEyLjQ0MTggMjIuOCAxMkMyMi44IDExLjU1ODIgMjIuNDQxOCAxMS4yIDIyIDExLjJWMTJWMTIuOFpNMTIgM0gxMS4yVjIxSDEySDEyLjhWM0gxMlpNMiA4VjguOEg1LjVWOFY3LjJIMlY4Wk01LjUgOFY4LjhIOVY4VjcuMkg1LjVWOFpNNS41IDhINC43VjE2SDUuNUg2LjNWOEg1LjVaTTE2IDhIMTUuMlYxNkgxNkgxNi44VjhIMTZaTTE2IDhWOC44SDIyVjhWNy4ySDE2VjhaTTE2IDEyVjEyLjhIMjJWMTJWMTEuMkgxNlYxMloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-building-07.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy41IDExSDQuNkM0LjAzOTk1IDExIDMuNzU5OTIgMTEgMy41NDYwMSAxMS4xMDlDMy4zNTc4NSAxMS4yMDQ5IDMuMjA0ODcgMTEuMzU3OCAzLjEwODk5IDExLjU0NkMzIDExLjc1OTkgMyAxMi4wMzk5IDMgMTIuNlYyMU0xNi41IDExSDE5LjRDMTkuOTYwMSAxMSAyMC4yNDAxIDExIDIwLjQ1NCAxMS4xMDlDMjAuNjQyMiAxMS4yMDQ5IDIwLjc5NTEgMTEuMzU3OCAyMC44OTEgMTEuNTQ2QzIxIDExLjc1OTkgMjEgMTIuMDM5OSAyMSAxMi42VjIxTTE2LjUgMjFWNi4yQzE2LjUgNS4wNzk5IDE2LjUgNC41MTk4NCAxNi4yODIgNC4wOTIwMkMxNi4wOTAzIDMuNzE1NjkgMTUuNzg0MyAzLjQwOTczIDE1LjQwOCAzLjIxNzk5QzE0Ljk4MDIgMyAxNC40MjAxIDMgMTMuMyAzSDEwLjdDOS41Nzk4OSAzIDkuMDE5ODQgMyA4LjU5MjAyIDMuMjE3OTlDOC4yMTU2OSAzLjQwOTczIDcuOTA5NzMgMy43MTU2OSA3LjcxNzk5IDQuMDkyMDJDNy41IDQuNTE5ODQgNy41IDUuMDc5OSA3LjUgNi4yVjIxTTIyIDIxSDJNMTEgN0gxM00xMSAxMUgxM00xMSAxNUgxMyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-clock-refresh.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuNDUzMiAxMi44OTI4QzIwLjE3NTQgMTUuNTAyNyAxOC42OTY3IDE3Ljk0ODQgMTYuMjQ5NyAxOS4zNjEyQzEyLjE4NDIgMjEuNzA4NCA2Ljk4NTY2IDIwLjMxNTUgNC42Mzg0NSAxNi4yNUw0LjM4ODQ1IDE1LjgxN00zLjU0NjE3IDExLjEwNzFDMy44MjM5NyA4LjQ5NzIzIDUuMzAyNzYgNi4wNTE1MSA3Ljc0OTc0IDQuNjM4NzRDMTEuODE1MiAyLjI5MTUzIDE3LjAxMzggMy42ODQ0NyAxOS4zNjEgNy43NDk5NUwxOS42MTEgOC4xODI5N00zLjQ5MzE2IDE4LjA2NTlMNC4yMjUyMiAxNS4zMzM5TDYuOTU3MjcgMTYuMDY1OU0xNy4wNDIyIDcuOTMzOThMMTkuNzc0MyA4LjY2NjAzTDIwLjUwNjMgNS45MzM5OE0xMS45OTk3IDcuNDk5OTVWMTJMMTQuNDk5NyAxMy41IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-dataflow-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgNFYxNS4yQzEyIDE2Ljg4MDIgMTIgMTcuNzIwMiAxMi4zMjcgMTguMzYyQzEyLjYxNDYgMTguOTI2NSAxMy4wNzM1IDE5LjM4NTQgMTMuNjM4IDE5LjY3M0MxNC4yNzk4IDIwIDE1LjExOTggMjAgMTYuOCAyMEgxN00xNyAyMEMxNyAyMS4xMDQ2IDE3Ljg5NTQgMjIgMTkgMjJDMjAuMTA0NiAyMiAyMSAyMS4xMDQ2IDIxIDIwQzIxIDE4Ljg5NTQgMjAuMTA0NiAxOCAxOSAxOEMxNy44OTU0IDE4IDE3IDE4Ljg5NTQgMTcgMjBaTTcgNEwxNyA0TTcgNEM3IDUuMTA0NTcgNi4xMDQ1NyA2IDUgNkMzLjg5NTQzIDYgMyA1LjEwNDU3IDMgNEMzIDIuODk1NDMgMy44OTU0MyAyIDUgMkM2LjEwNDU3IDIgNyAyLjg5NTQzIDcgNFpNMTcgNEMxNyA1LjEwNDU3IDE3Ljg5NTQgNiAxOSA2QzIwLjEwNDYgNiAyMSA1LjEwNDU3IDIxIDRDMjEgMi44OTU0MyAyMC4xMDQ2IDIgMTkgMkMxNy44OTU0IDIgMTcgMi44OTU0MyAxNyA0Wk0xMiAxMkgxN00xNyAxMkMxNyAxMy4xMDQ2IDE3Ljg5NTQgMTQgMTkgMTRDMjAuMTA0NiAxNCAyMSAxMy4xMDQ2IDIxIDEyQzIxIDEwLjg5NTQgMjAuMTA0NiAxMCAxOSAxMEMxNy44OTU0IDEwIDE3IDEwLjg5NTQgMTcgMTJaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-folder-code.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgN0wxMS44ODQ1IDQuNzY4OTJDMTEuNTYzNCA0LjEyNjggMTEuNDAyOSAzLjgwNTczIDExLjE2MzQgMy41NzExNkMxMC45NTE2IDMuMzYzNzMgMTAuNjk2MyAzLjIwNTk3IDEwLjQxNjEgMy4xMDkzMUMxMC4wOTkyIDMgOS43NDAyMSAzIDkuMDIyMjkgM0g1LjJDNC4wNzk5IDMgMy41MTk4NCAzIDMuMDkyMDIgMy4yMTc5OUMyLjcxNTY5IDMuNDA5NzMgMi40MDk3MyAzLjcxNTY5IDIuMjE3OTkgNC4wOTIwMkMyIDQuNTE5ODQgMiA1LjA3OTkgMiA2LjJWN00yIDdIMTcuMkMxOC44ODAyIDcgMTkuNzIwMiA3IDIwLjM2MiA3LjMyNjk4QzIwLjkyNjUgNy42MTQ2IDIxLjM4NTQgOC4wNzM1NCAyMS42NzMgOC42MzgwM0MyMiA5LjI3OTc2IDIyIDEwLjExOTggMjIgMTEuOFYxNi4yQzIyIDE3Ljg4MDIgMjIgMTguNzIwMiAyMS42NzMgMTkuMzYyQzIxLjM4NTQgMTkuOTI2NSAyMC45MjY1IDIwLjM4NTQgMjAuMzYyIDIwLjY3M0MxOS43MjAyIDIxIDE4Ljg4MDIgMjEgMTcuMiAyMUg2LjhDNS4xMTk4NCAyMSA0LjI3OTc2IDIxIDMuNjM4MDMgMjAuNjczQzMuMDczNTQgMjAuMzg1NCAyLjYxNDYgMTkuOTI2NSAyLjMyNjk4IDE5LjM2MkMyIDE4LjcyMDIgMiAxNy44ODAyIDIgMTYuMlY3Wk0xNCAxNi41TDE2LjUgMTRMMTQgMTEuNU0xMCAxMS41TDcuNSAxNEwxMCAxNi41IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-lightbulb-05.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMlYzTTMgMTJIMk01LjUgNS41TDQuODk5OSA0Ljg5OTlNMTguNSA1LjVMMTkuMTAwMiA0Ljg5OTlNMjIgMTJIMjFNMTAgMTMuNUgxNE0xMiAxMy41VjE4LjVNMTUuNSAxNi44NzRDMTcuMDE0MSAxNS43ODQ4IDE4IDE0LjAwNzUgMTggMTJDMTggOC42ODYyOSAxNS4zMTM3IDYgMTIgNkM4LjY4NjI5IDYgNiA4LjY4NjI5IDYgMTJDNiAxNC4wMDc1IDYuOTg1OTMgMTUuNzg0OCA4LjUgMTYuODc0VjE4LjhDOC41IDE5LjkyMDEgOC41IDIwLjQ4MDIgOC43MTc5OSAyMC45MDhDOC45MDk3MyAyMS4yODQzIDkuMjE1NjkgMjEuNTkwMyA5LjU5MjAyIDIxLjc4MkMxMC4wMTk4IDIyIDEwLjU3OTkgMjIgMTEuNyAyMkgxMi4zQzEzLjQyMDEgMjIgMTMuOTgwMiAyMiAxNC40MDggMjEuNzgyQzE0Ljc4NDMgMjEuNTkwMyAxNS4wOTAzIDIxLjI4NDMgMTUuMjgyIDIwLjkwOEMxNS41IDIwLjQ4MDIgMTUuNSAxOS45MjAxIDE1LjUgMTguOFYxNi44NzRaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-number.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS40OTk5OSAzTDYuNDk5OTkgMjFNMTcuNSAzTDE0LjUgMjFNMjAuNSA4SDMuNU0xOS41IDE2SDIuNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-string.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy44OTU0MSAxOC44NTU0QzAuMTE2NjM5IDE0Ljk4NSAyLjE4ODcxIDUuNzE0MDggOC4zMjczIDRNMTUuOTI0MiAxOC44NTU0QzEyLjE0NTQgMTQuOTg1IDE0LjIxNzUgNS43MTQwOCAyMC4zNTYgNE02LjQ5MzIzIDIwQzQuNTcyMzcgMjAgMy4wMTUyIDE4LjM5NjMgMy4wMTUyIDE2LjQxOEMzLjAxNTIgMTQuNDM5NyA0LjU3MjM3IDEyLjgzNiA2LjQ5MzIzIDEyLjgzNkM4LjQxNDA5IDEyLjgzNiA5Ljk3MTI2IDE0LjQzOTcgOS45NzEyNiAxNi40MThDOS45NzEyNiAxOC4zOTYzIDguNDE0MDkgMjAgNi40OTMyMyAyMFpNMTguNTIyIDIwQzE2LjYwMTEgMjAgMTUuMDQzOSAxOC4zOTYzIDE1LjA0MzkgMTYuNDE4QzE1LjA0MzkgMTQuNDM5NyAxNi42MDExIDEyLjgzNiAxOC41MjIgMTIuODM2QzIwLjQ0MjggMTIuODM2IDIyIDE0LjQzOTcgMjIgMTYuNDE4QzIyIDE4LjM5NjMgMjAuNDQyOCAyMCAxOC41MjIgMjBaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+";

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-loader/nile-loader.css.ts

@@ -41,7 +41,7 @@ export default css`
   .loader__label {
     font-size: var(--loader-label-font-size);
     line-height: var(--loader-label-line-height); 
-    font-family:var(--nile-font-family-sans-serif,--ng-font-family-body);
+    font-family:var(--nile-font-family-sans-serif, var(--ng-font-family-body));
     font-style: normal;
     font-weight: var(--nile-font-weight-medium,var(--ng-font-weight-medium));
   }