@aquera/nile-elements 1.5.6 → 1.5.8

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

@@ -120,12 +120,12 @@ export const styles = css`
   }
 
   .radio--disabled .radio__checked-icon {
-    background-color:var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)); // for v2
+    background-color:var(--nile-colors-dark-100, var(--ng-colors-fg-disabled-subtle)); // for v2
   }
 
   .radio--disabled .radio__control {
     background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
-    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    border: 1px solid var(--nile-colors-dark-100, var(--ng-colors-border-disabled));
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */

package/src/nile-radio/nile-radio.ts

@@ -110,13 +110,27 @@ export class NileRadio extends NileElement {
   @watch('checked')
   handleCheckedChange() {
     this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    this.setAttribute('tabindex', this.checked ? '0' : '-1');
+    if (this.disabled) {
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.setAttribute('tabindex', this.checked ? '0' : '-1');
+    }
+  
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+handleDisabledChange() {
+  this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  if (this.disabled) {
+    this.setAttribute('tabindex', '-1');
+    
+    if (this.matches(':focus')) {
+      (this as HTMLElement).blur();
+    }
+  } else {
+    this.setAttribute('tabindex', this.checked ? '0' : '-1');
   }
+}
 
   render() {
     return html`

package/src/nile-radio-group/nile-radio-group.ts

@@ -143,6 +143,7 @@ export class NileRadioGroup extends NileElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) return;
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
       return;
     }
@@ -188,6 +189,7 @@ export class NileRadioGroup extends NileElement {
   }
 
   private handleLabelClick() {
+    if (this.disabled) return;
     const radios = this.getAllRadios();
     const checked = radios.find(radio => radio.checked);
     const radioToFocus = checked || radios[0];
@@ -207,6 +209,10 @@ export class NileRadioGroup extends NileElement {
         radio.islabelborder=true;
       }
     });
+    if (this.disabled) {
+      radios.forEach(r => (r.tabIndex = -1));
+      return;
+    }
     const nile_radio_check='nile-radio-button';
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === nile_radio_check);
 

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -60,7 +60,10 @@ export const styles = css`
   nile-rich-text-editor[disabled] .rte-container .editor {
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     pointer-events: none ;
+    user-select: none;
+    -webkit-user-select: none;
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
 nile-rte-preview {
@@ -79,6 +82,9 @@ nile-rte-preview {
   background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   cursor: not-allowed ;
   border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+  user-select: none;
+  -webkit-user-select: none;
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
 }
 
   nile-rte-toolbar-item nile-button::part(base) {

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -246,6 +246,10 @@ export class NileRichTextEditor extends LitElement {
         this.previewEl.classList.toggle('single-line', this.singleLineEditor);
       }
     }
+    if (changed.has('disabled') && this.editorEl) {
+      this.editorEl.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
+      this.editorEl.tabIndex = this.disabled ? -1 : 0;
+    }
   
   }
 
@@ -254,7 +258,8 @@ export class NileRichTextEditor extends LitElement {
     if (!this.editorEl) {
       const editor = document.createElement('article');
       editor.className = 'editor';
-      editor.setAttribute('contenteditable', 'true');
+      editor.setAttribute('contenteditable', this.disabled ? 'false' : 'true');
+      editor.tabIndex = this.disabled ? -1 : 0;
       this.editorEl = editor;
     }
     if (this.placeholder) {
@@ -446,12 +451,12 @@ export class NileRichTextEditor extends LitElement {
         (btn as any).disabled = this.disabled;
 
         if (iconAttr) {
-          btn.innerHTML = `<nile-icon name="${iconAttr}" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
+          btn.innerHTML = `<nile-icon name="${iconAttr}" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
           child.innerHTML = '';
         } else if (!authoredHasContent) {
           const defaultIcon = DEFAULT_ICONS[cmd];
           if (defaultIcon) {
-            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
+            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color="${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'}" ></nile-icon>`;
           } else {
             btn.textContent = label || cmd;
           }

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;
   }
@@ -145,8 +150,14 @@ export const styles = css`
     color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));
     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-color-graylightmode-500));
+    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 {
@@ -295,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(*) {
@@ -367,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 {
@@ -511,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.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

@@ -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;
@@ -159,12 +164,14 @@ export const styles = css`
     border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
     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 {

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;
   }
@@ -231,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));
@@ -252,7 +262,7 @@ export const styles = css`
     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));
-    
+    user-select:none;
     cursor: not-allowed;
     outline: none;
   }
@@ -311,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(*) {
@@ -376,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

@@ -2253,7 +2253,7 @@
     },
     {
       "name": "nile-grid",
-      "description": "Nile grid component.\n\nAttributes:\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\nProperties:\n\n  * `columnWidths` {`number[]`} - To store the column widths in the beginning and after resizing\n\n  * `slotEl` {`HTMLSlotElement`} - To get the slot element\n\n  * `resizeStart` {`HTMLElement`} - To get the first resize line to show the resize handle\n\n  * `resizeEnd` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowLeft` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowRight` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `mo` {`MutationObserver | undefined`} - To store the mutation observer\n\n  * `resizeObserver` - To store the resize observer\n\n  * `resizeObserverStickyShadows` - \n\n  * `raf` {`number`} - To store the request animation frame\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\n  * `stickyLeftIndexes` {`number[]`} - To store the sticky index's\n\n  * `stickyRightIndexes` {`number[]`} - To store the sticky index's\n\n  * `cellHeight` {`number | null`} - To calculate the rowspan height\n\n  * `headHeight` {`number | null`} - \n\n  * `widthsInitialized` {`boolean`} - To check if the widths are initialized\n\n  * `lockedWidthColumns` {`boolean[]`} - To check if the widths are initialized\n\n  * `prefixSumColumnsWidth` {`PrefixColumn[]`} - prefix columns width\n\n  * `stickyColumns` {`number[]`} - prefix columns width\n\n  * `bodyRows` {`HTMLElement[]`} - body rows\n\n  * `headRows` {`HTMLElement[]`} - head rows\n\n  * `needsStructureLayout` {`boolean`} - \n\n  * `needsWidthLayout` {`boolean`} - \n\n  * `needsSpanLayout` {`boolean`} - \n\n  * `colCount` {`number`} - \n\n  * `shadowLeftVisibleSticky` {`boolean | undefined`} - \n\n  * `shadowRightVisibleSticky` {`boolean | undefined`} - \n\n  * `stickyLeftHeadEls` {`HTMLElement[]`} - \n\n  * `stickyRightHeadEls` {`HTMLElement[]`} - \n\n  * `stickyLeftBodyEls` {`HTMLElement[]`} - \n\n  * `stickyRightBodyEls` {`HTMLElement[]`} - \n\n  * `resizeTimer` - \n\n  * `shadowRaf` {`number`} - To throttle sticky shadow updates\n\n  * `resizeBaseColumnWidths` {`number[]`} - \n\n  * `syncStickyShadowsRaf` - \n\n  * `onResize` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile grid component.\n\nAttributes:\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `overflowScrollBehaviour` {`string`} - Controls vertical overscroll behavior when the grid is scrollable.\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\nProperties:\n\n  * `columnWidths` {`number[]`} - To store the column widths in the beginning and after resizing\n\n  * `slotEl` {`HTMLSlotElement`} - To get the slot element\n\n  * `resizeStart` {`HTMLElement`} - To get the first resize line to show the resize handle\n\n  * `resizeEnd` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowLeft` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `shadowRight` {`HTMLElement`} - To get the last resize line to show the resize handle\n\n  * `enableScroll` {`boolean`} - To enable horizontal scrolling when user is resizing\n\n  * `hoverable` {`boolean`} - To enable hoverable rows\n\n  * `overflowScrollBehaviour` {`string`} - Controls vertical overscroll behavior when the grid is scrollable.\n\n  * `mo` {`MutationObserver | undefined`} - To store the mutation observer\n\n  * `resizeObserver` - To store the resize observer\n\n  * `resizeObserverStickyShadows` - \n\n  * `raf` {`number`} - To store the request animation frame\n\n  * `minColumnWidth` {`number`} - Minimum column width\n\n  * `stickyLeftIndexes` {`number[]`} - To store the sticky index's\n\n  * `stickyRightIndexes` {`number[]`} - To store the sticky index's\n\n  * `cellHeight` {`number | null`} - To calculate the rowspan height\n\n  * `headHeight` {`number | null`} - \n\n  * `widthsInitialized` {`boolean`} - To check if the widths are initialized\n\n  * `lockedWidthColumns` {`boolean[]`} - To check if the widths are initialized\n\n  * `prefixSumColumnsWidth` {`PrefixColumn[]`} - prefix columns width\n\n  * `stickyColumns` {`number[]`} - prefix columns width\n\n  * `bodyRows` {`HTMLElement[]`} - body rows\n\n  * `headRows` {`HTMLElement[]`} - head rows\n\n  * `needsStructureLayout` {`boolean`} - \n\n  * `needsWidthLayout` {`boolean`} - \n\n  * `needsSpanLayout` {`boolean`} - \n\n  * `colCount` {`number`} - \n\n  * `isGridReady` {`boolean`} - \n\n  * `shadowLeftVisibleSticky` {`boolean | undefined`} - \n\n  * `shadowRightVisibleSticky` {`boolean | undefined`} - \n\n  * `stickyLeftHeadEls` {`HTMLElement[]`} - \n\n  * `stickyRightHeadEls` {`HTMLElement[]`} - \n\n  * `stickyLeftBodyEls` {`HTMLElement[]`} - \n\n  * `stickyRightBodyEls` {`HTMLElement[]`} - \n\n  * `resizeTimer` - \n\n  * `shadowRaf` {`number`} - To throttle sticky shadow updates\n\n  * `resizeBaseColumnWidths` {`number[]`} - \n\n  * `syncStickyShadowsRaf` - \n\n  * `onResize` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "enableScroll",
@@ -2265,6 +2265,10 @@
           "description": "`hoverable` {`boolean`} - To enable hoverable rows\n\nProperty: hoverable\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "overflowScrollBehaviour",
+          "description": "`overflowScrollBehaviour` {`string`} - Controls vertical overscroll behavior when the grid is scrollable.\n\nProperty: overflowScrollBehaviour\n\nDefault: none"
+        },
         {
           "name": "minColumnWidth",
           "description": "`minColumnWidth` {`number`} - Minimum column width\n\nProperty: minColumnWidth\n\nDefault: 40"

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
     }
   },