@aquera/nile-elements 1.5.5 → 1.5.7

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

@@ -40,7 +40,7 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));
+    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));
     font-family: var(--nile-font-family-serif,var( --ng-font-family-body));
     font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
@@ -120,7 +120,7 @@ export const styles = css`
   }
 
   .nile-chip--disabled {
-    background: var(--nile-colors-white-base,var(--ng-colors-bg-disabled-subtle));
+    
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -128,14 +128,18 @@ export const styles = css`
   }
 
   :host([disabled]) nile-tag::part(base) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    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 {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));
+    pointer-events: none;
   }
 
-  
+  .input--standard.input--disabled {
+    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
+  }
 
   .nile-chip.nile-chip--disabled {
     background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
@@ -173,29 +177,40 @@ export const styles = css`
     box-shadow: var(--nile-box-shadow-10);
   }
 
-  .nile-chip.nile-chip--open:hover  {
-  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
-  box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
-}
+  :host([disabled]) .nile-chip:hover {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    box-shadow: none;
+  }
 
-.nile-chip__tags--focused::part(base) {
-  border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
-  gap: 2px;
 
-}
+  .nile-chip.nile-chip--open:hover  {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
+    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
+  }
 
- 
+  .nile-chip__tags--focused::part(base) {
+    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    gap: 2px;
+  }
 
-nile-auto-complete::part(base)::before {
-box-shadow: none;
-}
+  nile-auto-complete::part(base)::before {
+    box-shadow: none;
+  }
 
-:host([required]) .form-control--has-label .form-control__label::after {
+  :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
-  margin-inline-start: -2px;
-  color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
-}
+    margin-inline-start: -2px;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+  }
 
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) nile-auto-complete::part(base) {
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  }
 `;
 
 export default [styles];

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

@@ -39,14 +39,18 @@ export const styles = css`
   }
 
   .disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+  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 {
@@ -77,7 +81,7 @@ export const styles = css`
     z-index: 1;
     padding: var(--nile-spacing-5px, var(--ng-spacing-none));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-  }
+    }
   
   .code__editor__container:hover > .expand__icon__container{
     display: flex;

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` 
@@ -585,7 +586,13 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
+    if(this.readonly || this.disabled) {
+      return [
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false),
+      ]
+    }
+    return [];
   }
 
   getSingleLineExtension() {

package/src/nile-date-picker/nile-date-picker.ts

@@ -81,6 +81,8 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean, attribute: true, reflect: true }) portal = false;
 
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;
+
   @query('nile-dropdown') dropdown: NileDropdown;
 
  /**
@@ -116,6 +118,23 @@ export class NileDatePicker extends NileElement {
       }
     });
   }
+  
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
+  }
+  
 
   private jumpTo(date: Date) {
     this.open = true;
@@ -141,8 +160,8 @@ export class NileDatePicker extends NileElement {
 
   render(): TemplateResult {
     return html`
-      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
-        <slot slot="trigger" part="trigger" name="trigger"></slot>
+      <nile-dropdown ?disabled="${this.disabled}" .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
+        <slot slot="trigger" part="trigger" name="trigger"></slot>  
 
         <nile-calendar
           .hideTypes="${this.hideTypes}"
@@ -179,6 +198,7 @@ export class NileDatePicker extends NileElement {
 
     const detail = event.detail;
     const triggerInput = this.querySelector("nile-input");
+    if (this.disabled) return;
 
     if (!this.range) {
       const picked = detail.value;

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

@@ -443,6 +443,17 @@ export class NileDropdown extends NileElement {
         this.portalManager = null;
       }
     }
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -85,13 +85,18 @@ export const setUpDragHandler = (
     }
 
     let updatedFiles = [];
-    for (const file of newFiles) {
-      if(nileFileUpload.allowedTypes.includes(file.type)) {
-        updatedFiles.push(file);
-      } else {
-        nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+    if(nileFileUpload.allowedTypes.length > 0) {
+      for (const file of newFiles) {
+        if(nileFileUpload.allowedTypes.includes(file.type)) {
+          updatedFiles.push(file);
+        } else {
+          nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+        }
       }
     }
+    if(updatedFiles.length === 0) {
+      updatedFiles = newFiles;
+    }
 
     nileFileUpload.uploadedFiles = [...uploadedFiles, ...updatedFiles];
     nileFileUpload.requestUpdate();

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

@@ -146,6 +146,34 @@ nile-badge::part(content) {
  line-height: 20px;
 }
 
+:host([disabled]) .chip {
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  cursor: not-allowed;
+  opacity: var(--nile-opacity-100, var(--ng-opacity-50));
+}
+
+: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;
+}
+
 `;
 
 export default [styles];

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

@@ -18,6 +18,7 @@ export class NileFilterChip extends NileElement {
   @property({ type: String }) icon = '';
   @property({ type: String }) removeIcon = '';
   @property({ type: Boolean, reflect: true }) active = false;
+  @property({type:Boolean, reflect:true}) disabled = false;
 
 
   private static activeChips: NileFilterChip[] = [];
@@ -55,6 +56,7 @@ export class NileFilterChip extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.dispatchEvent(
       new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
     );

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

@@ -25,7 +25,7 @@ export const styles = css`
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .inline__edit--open--container {
@@ -40,23 +40,32 @@ export const styles = css`
     min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
     color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
+    width: 100%;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
+
+  :host([disabled]) .inline__edit--container,
+  :host([disabled]) .inline__edit--container:hover {
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  cursor: not-allowed;
+}
+
 `;
 
 export default [styles];

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -55,6 +55,9 @@ export class NileInlineEdit extends NileElement {
   /** Enables automatic closing when focus moves outside the component or when clicking outside */
   @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;
 
+  /** Disables the inline edit, preventing it from being opened */
+  @property({ type: Boolean, reflect: true}) disabled: boolean = false;
+
   /* #endregion */
 
   /* #region Methods */
@@ -109,6 +112,7 @@ export class NileInlineEdit extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.open = true;
   }
   public render(): TemplateResult {

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: '*';
@@ -194,18 +198,25 @@ export const styles = css`
   }
 
   .input--standard.input--disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     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 {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    background:var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   }
 
   .input--standard.input--warning {
@@ -261,7 +272,6 @@ export const styles = css`
 
   .input--filled.input--disabled {
     background-color: var(--nile-colors-dark-100);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -335,7 +345,7 @@ export const styles = css`
   .input__control::placeholder {
     color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
     user-select: none;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .input:hover:not(.input--disabled) .input__control {

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,9 +45,10 @@ export const styles = css`
 
   .link--disabled {
     color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));
-    cursor: not-allowed;
     pointer-events: none;
-    opacity: 0.6;
+  }
+  :host([disabled]) {
+    cursor: not-allowed;
   }
 
   .link.link--disabled:not(.link__button) .link__label {

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

@@ -80,6 +80,7 @@ export class NileLink extends NileElement {
 
   handleClick(e: MouseEvent) {
     if (this.disabled) {
+      e.preventDefault();
       e.stopPropagation();
       return;
     }

package/src/nile-qr-code/index.ts

@@ -0,0 +1 @@
+export { NileQrCode } from './nile-qr-code';