@aquera/nile-elements 1.5.5 → 1.5.7

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

@@ -28,6 +28,11 @@ export const styles = css`
     box-sizing: inherit;
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  
   [hidden] {
     display: none !important;
   }
@@ -126,7 +131,7 @@ export const styles = css`
   .select__display-input {
     position: relative;
     width: 100%;
-    font: var(--nile-font-family-inherit, var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     border: none;
     background: none;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
@@ -136,6 +141,7 @@ export const styles = css`
     margin: var(--nile-spacing-none, var(--ng-spacing-none));
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
   }
 
 
@@ -145,6 +151,15 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
   }
 
+  .select--disabled.select--placeholder-visible .select__display-input::placeholder {
+    color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));
+  }
+
+  .select--disabled .select__display-input{
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events:none;
+  }
+
   .select:not(.select--disabled):hover .select__display-input {
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
@@ -229,10 +244,9 @@ export const styles = css`
   }
 
   .select--standard.select--disabled .select__combobox {
-    background-color: var(--nile-colors-neutral-100, 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) );
     color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
-    opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
     outline: none;
   }
@@ -283,7 +297,7 @@ export const styles = css`
 
   .select--medium .select__combobox {
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
 
     padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     height: var(--nile-height-40px, var(--ng-height-40px));
@@ -292,14 +306,15 @@ export const styles = css`
 
   .select--medium .select__clear {
     margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
+    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {
@@ -364,7 +379,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -508,7 +523,11 @@ export const styles = css`
 :host([stickyHeader])  .select__footer{
   z-index: 1;
 }
- 
+
+.select--disabled .select__combobox{
+  user-select: none ;
+  -webkit-user-select: none ;
+} 
 `;
 
 export default [styles];

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

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

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

@@ -146,6 +146,10 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
+  }
+  .nile-slide--disabled {
+   cursor: not-allowed;
   }
+
 `;

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

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

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

@@ -22,7 +22,7 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-sm));
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
     color: var(--nile-textarea-label-color, 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));
@@ -73,6 +73,11 @@ export const styles = css`
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
   /* Textarea styles */
   .textarea {
     display: flex;
@@ -157,18 +162,20 @@ export const styles = css`
 
   .textarea--standard.textarea--disabled {
     border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
-    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));
-    opacity: 0.5;
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     cursor: not-allowed;
+    user-select: none;
+    -webkit-user-select: none;
     box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events: none;
   }
 
   .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
   }
 
   /* Textarea control styles */
@@ -188,6 +195,11 @@ export const styles = css`
     -webkit-appearance: none;
   }
 
+  .textarea--standard.textarea--disabled .textarea__control {
+    cursor: not-allowed;
+    resize: none;
+  }
+
   .textarea__control::-webkit-search-decoration,
   .textarea__control::-webkit-search-cancel-button,
   .textarea__control::-webkit-search-results-button,
@@ -205,7 +217,7 @@ export const styles = css`
   }
 
   .textarea--medium .textarea__control {
-    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   /* Resize types */

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

@@ -49,6 +49,11 @@ export const styles = css`
     box-sizing: inherit;
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
   [hidden] {
     display: none !important;
   }
@@ -67,7 +72,7 @@ export const styles = css`
     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));
+    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-medium));
     line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
@@ -157,6 +162,8 @@ export const styles = css`
     margin: var(--nile-spacing-none, var(--ng-spacing-none));
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .select__display-input::placeholder {
@@ -229,6 +236,11 @@ export const styles = css`
     cursor: not-allowed !important;
   }
 
+  .select--disabled .select__display-input{
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events:none;
+  }
+
   /* Standard selects */
   .select--standard .select__combobox {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
@@ -247,10 +259,10 @@ export const styles = css`
   }
 
   .select--standard.select--disabled .select__combobox {
-    background-color: var(--nile-colors-neutral-100, 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-primary));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
-    opacity: var(--nile-opacity-50, var(--ng-opacity-100));
+    user-select:none;
     cursor: not-allowed;
     outline: none;
   }
@@ -309,7 +321,7 @@ export const styles = css`
   }
 
   .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
+    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
@@ -374,7 +386,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {

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

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

package/vscode-html-custom-data.json

@@ -578,7 +578,7 @@
     },
     {
       "name": "nile-calendar",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hide-duration-fields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\nProperties:\n\n  * `valueAttribute` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hideDurationFields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `startDate` {`Date | null`} - \n\n  * `endDate` {`Date | null`} - \n\n  * `isSelectingStart` {`boolean`} - \n\n  * `hideInput` {`Boolean`} - \n\n  * `value` {`Date | null`} - \n\n  * `currentMonth` {`number`} - \n\n  * `currentYear` {`number`} - \n\n  * `allowedDatesLocal` - \n\n  * `monthNames` {`string[]`} - \n\n  * `yearOptions` {`number[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hide-duration-fields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `valueAttribute` {`string | null`} - \n\n  * `allowedDates` {`string`} - \n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `selectedUnit` {`TimeUnits`} - \n\n  * `selectedValue` {`number`} - \n\n  * `hideDurationFields` {`String[]`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `startDate` {`Date | null`} - \n\n  * `endDate` {`Date | null`} - \n\n  * `isSelectingStart` {`boolean`} - \n\n  * `hideInput` {`Boolean`} - \n\n  * `value` {`Date | null`} - \n\n  * `currentMonth` {`number`} - \n\n  * `currentYear` {`number`} - \n\n  * `allowedDatesLocal` - \n\n  * `disabled` {`boolean`} - \n\n  * `monthNames` {`string[]`} - \n\n  * `yearOptions` {`number[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -676,6 +676,11 @@
         {
           "name": "dateFormat",
           "description": "`dateFormat` {`string`} - \n\nProperty: dateFormat\n\nDefault: MM/DD/YYYY"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
@@ -1187,7 +1192,7 @@
     },
     {
       "name": "nile-date-picker",
-      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `startYear` {`number`} - \n\n  * `endYear` {`number`} - \n\n  * `showYearDropdown` {`boolean`} - \n\n  * `showMonthDropdown` {`boolean`} - \n\n  * `portal` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "range",
@@ -1283,6 +1288,11 @@
           "name": "portal",
           "description": "`portal` {`boolean`} - \n\nProperty: portal\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
@@ -1842,7 +1852,7 @@
     },
     {
       "name": "nile-filter-chip",
-      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -1879,6 +1889,11 @@
           "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-close",
           "description": "`nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - "
@@ -2436,7 +2451,7 @@
     },
     {
       "name": "nile-inline-edit",
-      "description": "Nile inline-edit component.\n\nAttributes:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `max-placeholder-length` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\n  * `auto-close` {`boolean`} - Enables automatic closing when focus moves outside the component or when clicking outside\n\nProperties:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `maxPlaceholderLength` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\n  * `autoClose` {`boolean`} - Enables automatic closing when focus moves outside the component or when clicking outside\n\n  * `handleDocumentFocusInWrapper` - \n\n  * `handleDocumentMouseDownWrapper` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline-edit component.\n\nAttributes:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `max-placeholder-length` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\n  * `auto-close` {`boolean`} - Enables automatic closing when focus moves outside the component or when clicking outside\n\n  * `disabled` {`boolean`} - Disables the inline edit, preventing it from being opened\n\nProperties:\n\n  * `label` {`string`} - Gives the label to the Inline Edit\n\n  * `placeholder` {`string`} - Gives the Placeholder to the Inline Edit\n\n  * `open` {`boolean`} - Open prop for displaying default slot in Inline Edit\n\n  * `value` {`string`} - Gives the Value to the Inline Edit\n\n  * `maxPlaceholderLength` {`number`} - Maximum length for the placeholder value. Values longer than this will be truncated\n\n  * `autoClose` {`boolean`} - Enables automatic closing when focus moves outside the component or when clicking outside\n\n  * `disabled` {`boolean`} - Disables the inline edit, preventing it from being opened\n\n  * `handleDocumentFocusInWrapper` - \n\n  * `handleDocumentMouseDownWrapper` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -2463,6 +2478,11 @@
           "name": "auto-close",
           "description": "`auto-close` {`boolean`} - Enables automatic closing when focus moves outside the component or when clicking outside\n\nProperty: autoClose\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - Disables the inline edit, preventing it from being opened\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
@@ -3713,6 +3733,78 @@
         }
       ]
     },
+    {
+      "name": "nile-qr-code",
+      "description": "Nile QR Code component.\n\nEvents:\n\n  * `nile-qr-image-error` {} - Emitted when the center image fails to load.\n\nAttributes:\n\n  * `value` {`string`} - The QR code's value — the text or URL to encode.\n\n  * `size` {`number`} - The size of the QR code, in pixels.\n\n  * `fill` {`string`} - The fill color. This can be any valid CSS color, but not a CSS custom property.\n\n  * `background` {`string`} - The background color. This can be any valid CSS color or `'transparent'`.\nIt cannot be a CSS custom property.\n\n  * `radius` {`number`} - The edge radius of each module. Must be between 0 and 0.5.\nUse this to create a rounded effect.\n\n  * `error-correction` {`ErrorCorrectionLevel`} - The level of error correction to use.\n- `'L'` — Low (~7%)\n- `'M'` — Medium (~15%)\n- `'Q'` — Quartile (~25%)\n- `'H'` — High (~30%)\n\nWhen using an image overlay, `'H'` is recommended so the QR remains scannable.\n\n  * `label` {`string`} - The label for assistive devices to announce.\nIf unspecified, the `value` will be used instead.\n\n  * `image` {`string`} - URL of an image to overlay in the center of the QR code (e.g. a logo).\nThe image is drawn on top of the QR modules, so use `error-correction=\"H\"`\nto ensure the code remains scannable.\n\n  * `image-size` {`number`} - Size of the center image as a fraction of the overall QR code size\n(0.1 – 0.4). Defaults to 0.25 (25% of the QR code).\n\n  * `image-padding` {`number`} - Padding around the center image in pixels. Creates a clear area\nbetween the image and the surrounding QR modules.\n\n  * `image-radius` {`number`} - Optional border radius for the center image in pixels.\nSet to a high value for a circular mask.\n\n  * `fill-gradient` {`string`} - Apply a linear gradient to the QR modules instead of a flat color.\nFormat: `\"direction, color1, color2[, ...]\"` where direction is an\nangle in degrees (e.g. `\"135, #6366f1, #ec4899\"`).\nWhen set, this overrides the `fill` property for module rendering.\n\nProperties:\n\n  * `value` {`string`} - The QR code's value — the text or URL to encode.\n\n  * `size` {`number`} - The size of the QR code, in pixels.\n\n  * `fill` {`string`} - The fill color. This can be any valid CSS color, but not a CSS custom property.\n\n  * `background` {`string`} - The background color. This can be any valid CSS color or `'transparent'`.\nIt cannot be a CSS custom property.\n\n  * `radius` {`number`} - The edge radius of each module. Must be between 0 and 0.5.\nUse this to create a rounded effect.\n\n  * `errorCorrection` {`ErrorCorrectionLevel`} - The level of error correction to use.\n- `'L'` — Low (~7%)\n- `'M'` — Medium (~15%)\n- `'Q'` — Quartile (~25%)\n- `'H'` — High (~30%)\n\nWhen using an image overlay, `'H'` is recommended so the QR remains scannable.\n\n  * `label` {`string`} - The label for assistive devices to announce.\nIf unspecified, the `value` will be used instead.\n\n  * `image` {`string`} - URL of an image to overlay in the center of the QR code (e.g. a logo).\nThe image is drawn on top of the QR modules, so use `error-correction=\"H\"`\nto ensure the code remains scannable.\n\n  * `imageSize` {`number`} - Size of the center image as a fraction of the overall QR code size\n(0.1 – 0.4). Defaults to 0.25 (25% of the QR code).\n\n  * `imagePadding` {`number`} - Padding around the center image in pixels. Creates a clear area\nbetween the image and the surrounding QR modules.\n\n  * `imageRadius` {`number`} - Optional border radius for the center image in pixels.\nSet to a high value for a circular mask.\n\n  * `fillGradient` {`string`} - Apply a linear gradient to the QR modules instead of a flat color.\nFormat: `\"direction, color1, color2[, ...]\"` where direction is an\nangle in degrees (e.g. `\"135, #6366f1, #ec4899\"`).\nWhen set, this overrides the `fill` property for module rendering.\n\n  * `_loadedImage` {`HTMLImageElement | null`} - \n\n  * `_imageLoadPromise` {`Promise<void> | null`} - \n\n  * `canvas` {`HTMLCanvasElement`} - \n\n  * `override` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "`value` {`string`} - The QR code's value — the text or URL to encode.\n\nProperty: value\n\nDefault: "
+        },
+        {
+          "name": "size",
+          "description": "`size` {`number`} - The size of the QR code, in pixels.\n\nProperty: size\n\nDefault: 128"
+        },
+        {
+          "name": "fill",
+          "description": "`fill` {`string`} - The fill color. This can be any valid CSS color, but not a CSS custom property.\n\nProperty: fill\n\nDefault: black"
+        },
+        {
+          "name": "background",
+          "description": "`background` {`string`} - The background color. This can be any valid CSS color or `'transparent'`.\nIt cannot be a CSS custom property.\n\nProperty: background\n\nDefault: white"
+        },
+        {
+          "name": "radius",
+          "description": "`radius` {`number`} - The edge radius of each module. Must be between 0 and 0.5.\nUse this to create a rounded effect.\n\nProperty: radius\n\nDefault: 0"
+        },
+        {
+          "name": "error-correction",
+          "description": "`error-correction` {`ErrorCorrectionLevel`} - The level of error correction to use.\n- `'L'` — Low (~7%)\n- `'M'` — Medium (~15%)\n- `'Q'` — Quartile (~25%)\n- `'H'` — High (~30%)\n\nWhen using an image overlay, `'H'` is recommended so the QR remains scannable.\n\nProperty: errorCorrection\n\nDefault: H",
+          "values": [
+            {
+              "name": "L"
+            },
+            {
+              "name": "M"
+            },
+            {
+              "name": "Q"
+            },
+            {
+              "name": "H"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "`label` {`string`} - The label for assistive devices to announce.\nIf unspecified, the `value` will be used instead.\n\nProperty: label\n\nDefault: "
+        },
+        {
+          "name": "image",
+          "description": "`image` {`string`} - URL of an image to overlay in the center of the QR code (e.g. a logo).\nThe image is drawn on top of the QR modules, so use `error-correction=\"H\"`\nto ensure the code remains scannable.\n\nProperty: image\n\nDefault: "
+        },
+        {
+          "name": "image-size",
+          "description": "`image-size` {`number`} - Size of the center image as a fraction of the overall QR code size\n(0.1 – 0.4). Defaults to 0.25 (25% of the QR code).\n\nProperty: imageSize\n\nDefault: 0.25"
+        },
+        {
+          "name": "image-padding",
+          "description": "`image-padding` {`number`} - Padding around the center image in pixels. Creates a clear area\nbetween the image and the surrounding QR modules.\n\nProperty: imagePadding\n\nDefault: 4"
+        },
+        {
+          "name": "image-radius",
+          "description": "`image-radius` {`number`} - Optional border radius for the center image in pixels.\nSet to a high value for a circular mask.\n\nProperty: imageRadius\n\nDefault: 4"
+        },
+        {
+          "name": "fill-gradient",
+          "description": "`fill-gradient` {`string`} - Apply a linear gradient to the QR modules instead of a flat color.\nFormat: `\"direction, color1, color2[, ...]\"` where direction is an\nangle in degrees (e.g. `\"135, #6366f1, #ec4899\"`).\nWhen set, this overrides the `fill` property for module rendering.\n\nProperty: fillGradient\n\nDefault: "
+        },
+        {
+          "name": "onnile-qr-image-error",
+          "description": "`nile-qr-image-error` {} - Emitted when the center image fails to load."
+        }
+      ]
+    },
     {
       "name": "nile-radio-group",
       "description": "Events:\n\n  * `change` {} - Emitted when the radio group's selected value changes.\n\n  * `input` {} - Emitted when the radio group receives user input.\n\n  * `invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n\n  * `label` {} - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\nattribute.\n\nAttributes:\n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\n  * `allowUncheckGroup` {`boolean`} - Allow the radio to be unchecked.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `customValidityMessage` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `hasButtonGroup` {`boolean`} - \n\n  * `defaultValue` {`string`} - \n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\n  * `allowUncheckGroup` {`boolean`} - Allow the radio to be unchecked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -3835,7 +3927,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
+      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `containerEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",
@@ -3846,6 +3938,11 @@
           "description": "`noStyles` {`boolean`} - \n\nProperty: noStyles\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "singlelineeditor",
           "description": "`singlelineeditor` {`boolean`} - \n\nProperty: singleLineEditor\n\nDefault: false",
@@ -3997,7 +4094,7 @@
     },
     {
       "name": "nile-rte-select",
-      "description": "Events:\n\n  * `change` {`CustomEvent<string>`} - \n\nAttributes:\n\n  * `type` {`string`} - \n\n  * `options` {`string`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `type` {`string`} - \n\n  * `options` {`string`} - \n\n  * `optionsObj` {`(GenericOption | HeadingOption)[] | undefined`} - \n\n  * `label` {`string`} - \n\n  * `selectedValue` {`string`} - \n\n  * `parsedOptions` {`NormalizedOption[]`} - ",
+      "description": "Events:\n\n  * `change` {`CustomEvent<string>`} - \n\nAttributes:\n\n  * `type` {`string`} - \n\n  * `options` {`string`} - \n\n  * `label` {`string`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `type` {`string`} - \n\n  * `options` {`string`} - \n\n  * `optionsObj` {`(GenericOption | HeadingOption)[] | undefined`} - \n\n  * `label` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `selectedValue` {`string`} - \n\n  * `parsedOptions` {`NormalizedOption[]`} - ",
       "attributes": [
         {
           "name": "type",
@@ -4011,6 +4108,11 @@
           "name": "label",
           "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
         },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<string>`} - "

package/web-test-runner.config.mjs

@@ -22,11 +22,14 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   },
 
   /** Amount of browsers to run concurrently */
-  concurrentBrowsers: 2,
+  concurrentBrowsers: 1,
 
   /** Amount of test files per browser to test concurrently */
-  concurrency: 10,
+  concurrency: 1,
 
+  testsStartTimeout: 60000,
+  testsFinishTimeout: 300000,
+  
   /** Browsers to run tests on */
   browsers: [
     puppeteerLauncher({
@@ -40,7 +43,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test framework configuration */
   testFramework: {
     config: {
-      timeout: 5000 // Increase the default timeout to 5 seconds
+      timeout: 15000 // Increase the default timeout to 5 seconds
     }
   },
 
@@ -50,7 +53,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   coverageConfig: {
     include: ['dist/src/**/*.js'],
     exclude: ['dist/src/**/*.test.js'],
-    reporter: ['html', 'text-summary', 'lcov', 'json'],
+    reporters: ['html', 'text-summary', 'lcov', 'json', 'cobertura'],
     thresholds: {
       statements: 100,
       branches: 100,