@aquera/nile-elements 1.5.5 → 1.5.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "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

@@ -113,4 +113,5 @@ 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 { NileDetail } from './nile-detail';
+export { NileDetail } from './nile-detail';
+export { NileQrCode } from './nile-qr-code';

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

@@ -50,6 +50,19 @@ 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;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :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-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

@@ -64,7 +64,6 @@ export const styles = css`
   }
 
   .button--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -120,18 +119,19 @@ 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;
+    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,
   .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;
   }
 
@@ -154,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,15 +167,17 @@ 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;
+    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,
   .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 +211,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;
@@ -231,13 +233,13 @@ export const styles = css`
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
     background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));
+    border-color:  var(--nile-colors-neutral-500,  var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
@@ -255,31 +257,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 +362,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 +375,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 +388,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 +482,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 +510,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 +535,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 +567,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

@@ -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;
@@ -580,6 +585,65 @@ 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));
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+: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();
@@ -277,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>
@@ -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,9 +575,9 @@ 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'}"
+            tabindex="${this.disabled || this.isPrevDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.prevMonth();}}"
             @click="${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,11 +659,12 @@ ${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'}"
+            tabindex="${this.disabled || this.isNextDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.nextMonth();}}"
             @click="${this.nextMonth}"
+            
           >
           </nile-icon>
         </div>
@@ -680,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)}}"
             >
@@ -746,6 +754,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 +948,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 +960,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 +980,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));