@aquera/nile-elements 1.5.4 → 1.5.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -115,7 +115,8 @@
     "./nile-inline-sidebar-group": "./dist/src/nile-inline-sidebar-group/index.js",
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
-    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js"
+    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
+    "./nile-qr-code": "./dist/src/nile-qr-code/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -112,5 +112,6 @@ export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
 export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
 export { NileliteTooltip } from './nile-lite-tooltip';
-
-export { NileSideBarPanel } from './nile-side-bar-panel';
+export { NileSideBarPanel } from './nile-side-bar-panel';
+export { NileDetail } from './nile-detail';
+export { NileQrCode } from './nile-qr-code';

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

@@ -50,6 +50,17 @@ export const styles = css`
     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     margin-inline-start: 2px;
   }
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) nile-input::part(base){
+   pointer-events: none;
+   background: 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-button/nile-button.css.ts

@@ -64,7 +64,6 @@ export const styles = css`
   }
 
   .button--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -120,18 +119,17 @@ export const styles = css`
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));
     cursor: not-allowed;
+    color: var(--nile-colors-white-base, var(--ng-colors-border-neutral));
     box-shadow: none;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-primary-500, var(--ng-colors-bg-disabled));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-disabled-subtle));
     cursor: not-allowed;
   }
 
@@ -167,7 +165,7 @@ export const styles = css`
   .button--standard.button--secondary.button--disabled {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
     border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
   }
 
@@ -175,7 +173,7 @@ export const styles = css`
   .button--standard.button--secondary.button--disabled:active {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
     border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
   }
 
@@ -209,7 +207,7 @@ export const styles = css`
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
     color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
     box-shadow: none;
@@ -255,31 +253,69 @@ export const styles = css`
 
   /* caution */
   .button--standard.button--caution {
-    background-color: var(--nile-colors-red-500);
+    background-color: var(--nile-colors-red-500,var(--ng-colors-bg-error-solid));
     border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
   }
 
   .button--standard.button--caution:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
+    background-color: var(--nile-colors-red-700,var( --ng-colors-bg-error-solid-hover));
     border-color: var(--nile-colors-red-700);
-    color: var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
+
+
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-700,var(--ng-border-style-none));
     color: var(--nile-colors-white-base);
   }
 
-  .button--standard.button--caution.button--disabled,
-  .button--standard.button--caution.button--disabled:hover,
-  .button--standard.button--caution.button--disabled:active {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-neutral-400);
+  .button--standard.button--caution:active:not(.button--disabled) {
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
+    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
+  .button--standard.button--caution {
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
+}
+
+.button--standard.button--caution::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);
+  padding: var(--ng-spacing-xxs);
+}
+
+.button--standard.button--caution::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic);
+}
+
+.button.button--disabled {
+  box-shadow: none !important;
+  border-width: var(--nile-border-width-1, var(--ng-border-width-1)) !important;
+}
+
+.button.button--disabled::after {
+  box-shadow: none !important;
+}
+
   /* destructive */
   .button--standard.button--destructive {
     position: relative;
@@ -322,8 +358,8 @@ export const styles = css`
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
+    border-color:  var(--nile-colors-dark-900, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
@@ -335,7 +371,7 @@ export const styles = css`
 
   .button--standard.button--destructive.button--disabled {
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-border-disabled-subtle));
     color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
     box-shadow: none;
@@ -348,12 +384,12 @@ export const styles = css`
     cursor: not-allowed;
   }
 
-  .button--standard.button--destructive.button--disabled:hover {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+   .button--standard.button--destructive.button--disabled:hover {
+    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));
+    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
+    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
     cursor: not-allowed;
-  }
+  }  
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
@@ -442,7 +478,7 @@ export const styles = css`
     --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;
   }
   .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
   /* Secondary Variant */
@@ -470,7 +506,7 @@ export const styles = css`
     --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;
   }
   .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
   /* Ghost Variant */
@@ -495,11 +531,23 @@ export const styles = css`
     ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base) !important;
+    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;
+  }
+  .button--standard.button--caution.button--disabled{
+    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));
+    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
+    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
+    border-width: var(--ng-border-width-1, 1px);
+    border-style: var(--ng-border-style-solid, solid);
+  }
+
+  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
+    --nile-svg-fill: var(--nile-colors-white-base,var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;
   }
   .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-400) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;
   }
+  
 
   /* destructive */
   .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
@@ -515,6 +563,14 @@ export const styles = css`
     --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
+  .button--standard.button--destructive.button--disabled{
+    background-color: var(--nile-colors-red-400,var(--ng-colors-bg-disabled));
+    color: var(--nile-colors-white-base,var(--ng-colors-fg-disabled));
+    border-color: var(--nile-colors-red-400,var(--ng-colors-border-disabled-subtle));
+    border-width: var(--ng-border-width-1, 1px);
+    border-style: var(--ng-border-style-solid, solid);
+  }
+
   /*
    * Outline buttons
    */

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

@@ -308,10 +308,11 @@ export class NileButton extends NileElement implements NileFormControl {
 
     const variantCaretColors = {
       primary: this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon))',
-      secondary:  this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
-      tertiary: this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
-      caution: 'white',
-      ghost: 'black',
+      secondary:  this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
+      tertiary: this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
+      caution: this.disabled? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))': 'var(--nile-colors-white-base)',
+
+      ghost: this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
       destructive:  this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon))',
       'secondary-grey': 'black',
       'secondary-blue': 'black',
@@ -424,7 +425,7 @@ export class NileButton extends NileElement implements NileFormControl {
               <nile-icon
                 part="caret"
                 class="button__caret"
-                color="${variantCaretColors[this.variant]}"
+                color=${variantCaretColors[this.variant]}
                 name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
                 method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               ></nile-icon>

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

@@ -580,6 +580,63 @@ export const styles = css`
   .month-dropdown, .year-dropdown {
     cursor: pointer;
   }
+
+
+
+:host([disabled]) .calendar-header__month-navigation,
+:host([disabled]) .calendar-header__trigger,
+:host([disabled]) .day_date {
+  cursor: not-allowed;
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+
+
+:host([disabled]) .base {
+  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  cursor: not-allowed;
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+:host([disabled]) .calendar-container {
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+}
+
+:host([disabled]) .day_name {
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+:host([disabled]) nile-input::part(form-control-label) {
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+:host([disabled]) nile-select::part(form-control-label) {
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+
+
+:host([disabled]) .calendar-switcher {
+  pointer-events: none;
+  opacity:var(--nile-opacity-50, var(--ng-opacity-50));
+}
+
+
+:host([disabled]) .day_date{
+  pointer-events:none;
+}
+:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {
+  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+:host([disabled]) .duration_unit{
+ background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+}
+:host([disabled]) .duration__value {
+  cursor: not-allowed;
+  background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+}
 `;
 
 export default [styles];

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

@@ -88,6 +88,7 @@ export class NileCalendar extends NileElement {
 
   @state() allowedDatesLocal: NileCalendarDateRange | any = null;
 
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;
   connectedCallback() {
     super.connectedCallback();
     this.initializeValue();
@@ -331,6 +332,7 @@ private handleEndDateInput(event: CustomEvent): void {
      <div class="from">
   <div class="from-date">
     <nile-input
+      ?disabled="${this.disabled}"
       label="From"
       class="manual-input date-input"
       placeholder="${this.dateFormat}"
@@ -341,6 +343,7 @@ private handleEndDateInput(event: CustomEvent): void {
 
   <div class="from-time">
     <nile-input
+      ?disabled="${this.disabled}"
       class="manual-input time-input"
       placeholder="HH:MM:SS"
       value="${this.formatTime(this.startDate)}"
@@ -353,6 +356,7 @@ private handleEndDateInput(event: CustomEvent): void {
     <div class="from">
         <div class="from-date">
       <nile-input
+      ?disabled="${this.disabled}"
         label="To"
         class="manual-input date-input"
         placeholder="${this.dateFormat}"
@@ -362,6 +366,7 @@ private handleEndDateInput(event: CustomEvent): void {
     </div>
       <div class="from-time">
       <nile-input
+      ?disabled="${this.disabled}"
         class="manual-input time-input"
         placeholder="HH:MM:SS"
         value="${this.formatTime(this.endDate)}"
@@ -434,6 +439,7 @@ private handleEndDateInput(event: CustomEvent): void {
         <div class="unit-input-container">
           <nile-input 
             class="manual-input duration-input" 
+            ?disabled="${this.disabled}"
             label="Duration"
             inputmode="numeric"
             type="number"
@@ -444,6 +450,7 @@ private handleEndDateInput(event: CustomEvent): void {
   
           <nile-select 
             class="manual-input time-input"  
+            ?disabled="${this.disabled}"
             label="Unit of time" 
             value="${this.selectedUnit}"
             @nile-change="${this.handleUnitChange}"
@@ -568,7 +575,7 @@ private handleEndDateInput(event: CustomEvent): void {
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color="black"
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
             role="button"
             tabindex="${this.isPrevDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.prevMonth();}}"
@@ -579,7 +586,7 @@ private handleEndDateInput(event: CustomEvent): void {
 
 ${this.showMonthDropdown || this.showYearDropdown ? html`
   ${this.showMonthDropdown ? html`
-    <nile-dropdown class="month-dropdown">
+    <nile-dropdown ?disabled="${this.disabled}" class="month-dropdown">
       <span
         slot="trigger"
         class="calendar-header__trigger month-trigger"
@@ -587,7 +594,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         part="trigger"
       >
         ${new Date(year, month).toLocaleString('default', { month: 'long' })}
-        <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="month-scroll-wrapper">
@@ -609,7 +616,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
     >
   `}
   ${this.showYearDropdown ? html`
-    <nile-dropdown class="year-dropdown">
+    <nile-dropdown ?disabled="${this.disabled}" class="year-dropdown">
       <span
         slot="trigger"
         class="calendar-header__trigger"
@@ -617,7 +624,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         part="trigger"
       >
         ${year}
-        <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="year-scroll-wrapper">
@@ -652,7 +659,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color="black"
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
             role="button"
             tabindex="${this.isNextDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.nextMonth();}}"
@@ -746,6 +753,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
    * @param year 
    */
   selectDate(day: number, month: number, year: number): void {
+    if (this.disabled) return;
     const selectedDate = new Date(year, month, day);
 
     if (this.range) {
@@ -939,6 +947,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
   }
 
   private nextMonth(): void {
+    if (this.disabled) return;
     if (this.currentMonth === 11) {
       const newYear = this.currentYear + 1;
       if(this.endYear !== undefined && newYear > this.endYear) return;
@@ -950,6 +959,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
   }
 
   private prevMonth(): void {
+    if (this.disabled) return;
     if (this.currentMonth === 0) {
       const newYear = this.currentYear - 1;
       if(this.startYear !== undefined && newYear < this.startYear) return;
@@ -969,6 +979,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
   }
 
   onTypeChange(event: CustomEvent) {
+    if (this.disabled) return;
     this.type = event.detail.value;
     this.emit('nile-type-change', { value: this.type })
   }

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

@@ -88,7 +88,6 @@ export const styles = css`
 
   /* Disabled */
   .checkbox--disabled {
-    opacity: var(--nile-opacity-30, var(--ng-opacity-100));
     cursor: not-allowed;
   }
 
@@ -152,11 +151,11 @@ export const styles = css`
 .checkbox--disabled.checkbox--checked .checkbox__control,
 .checkbox--disabled.checkbox--indeterminate .checkbox__control {
   background-color: var(
-    --nile-checkbox-color-background-checked-standard,
+    --nile-colors-dark-100,
     var(--ng-colors-bg-disabled-subtle)
   );
   border-color: var(
-    --nile-checkbox-color-border-checked-standard,
+    --nile-colors-dark-100,
     var(--ng-colors-border-disabled)
   );
 }
@@ -165,7 +164,7 @@ export const styles = css`
 .checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
   background-color: var(--nile-colors-transparent, var(--ng-colors-bg-disabled-subtle));
   border-color: var(
-    --nile-checkbox-color-border-standard,
+    --nile-colors-dark-100,
     var(--ng-colors-border-disabled)
   );
 }
@@ -202,7 +201,7 @@ export const styles = css`
   .checkbox--disabled .checkbox__checked-icon,
   .checkbox--disabled .checkbox__indeterminate-icon {
     --nile-svg-stroke: var(
-       --nile-checkbox-color-border-standard,
+      --nile-colors-white-base,
       var(--ng-colors-fg-disabled-subtle)
     );
     --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));

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,17 @@ 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));
   }
 
   :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 +176,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,11 +39,12 @@ 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));
+}
 
   .disabled .cm-editor {
     cursor: not-allowed;
@@ -77,7 +78,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;