@aquera/nile-elements 0.1.57-beta-1.7 → 0.1.57-beta-1.9

package/src/nile-pagination/nile-pagination.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-pagination.css';
@@ -21,33 +22,51 @@ export class NilePagination extends NileElement {
     return [styles];
   }
 
-  
-  @property({attribute: 'totalitems',reflect: true, converter: { fromAttribute: (v: string) => {const n = Number(v);
-        return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0; }}})totalItems: number = 0;
-
-  @property({ attribute: 'currentpage',reflect: true,converter: { fromAttribute: (v: string) => { const n = Number(v);
-        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;}}}) currentPage : number = 1;
-
+  @property({attribute: 'totalitems',reflect: true,converter: {
+      fromAttribute: (v: string) => {
+        const n = Number(v);
+        return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;
+      },
+    },
+  })totalItems: number = 0;
 
-  @property({attribute: 'pagesize',reflect: true, converter: { fromAttribute: (v: string) => {
+  @property({attribute: 'currentpage', reflect: true, converter: {
+      fromAttribute: (v: string) => {
         const n = Number(v);
-        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;}}}) pageSize: number = 50;
+        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;
+      },
+    },
+  })currentPage: number = 1;
 
+  @property({attribute: 'pagesize',reflect: true,converter: {
+      fromAttribute: (v: string) => {
+        const n = Number(v);
+        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;
+      },
+    },
+  })pageSize: number = 50;
 
-  @property({ attribute: 'pagesizeoptions', reflect: false,converter: { fromAttribute: (v: string) => { try { const arr = JSON.parse(v);
+  @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {
+        try {
+          const arr = JSON.parse(v);
           if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {
             return arr as number[];
           }
-        } catch {}return [10, 25, 50, 100];}}}) pageSizeOptions: number[] = [10, 25, 50, 100];
+        } catch {}
+        return [10, 25, 50, 100];
+  }}})
+ pageSizeOptions: number[] = [10, 25, 50, 100];
 
-  @property({ type: String }) variant: 'fluid' | 'compact' = 'fluid';
+  @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) showTitle = true;
 
   @state() private _pageSizeOpen = false;
+  @state() private _pageOpen = false;
   @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;
 
   firstUpdated() {
+    if (this._pageSizeDropdown) { 
     this._pageSizeDropdown.addEventListener('nile-show', () => {
       this._pageSizeOpen = true;
     });
@@ -55,31 +74,49 @@ export class NilePagination extends NileElement {
       this._pageSizeOpen = false;
     });
   }
- 
+  }
+
   private get totalPages(): number {
     return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));
   }
 
-  private goToPage(page: number) {
+  private goToPage(newPage: number) {
+    
     if (this.disabled) return;
-    this.currentPage = page;  
-    this.emit('nile-change', { page: this.currentPage, pageSize: this.pageSize });
+    const previousPage = this.currentPage;
+    this.currentPage = newPage;
+    this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });
   }
 
-  private onPageSizeSelect(size: number) {
-    if (this.disabled || this.pageSize === size) return;
-    this.pageSize = size;
-    this.currentPage = 1;
-    this.emit('nile-change', { page: 1, pageSize: size });
-  }
+ private onPageSizeSelect(newSize: number) {
+  if (this.disabled || this.pageSize === newSize) return;
+
+  const previousPage = this.currentPage;
+  this.pageSize = newSize;
+  this.currentPage = 1;
+  this.emit('nile-change', {
+    page: 1,
+    previousPage,
+    pageSize: newSize
+  });
+}
+
+private renderCompactRangeText(): TemplateResult {
+  const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);
+  const trimmed = full.replace(/^Showing\s*/, ''); 
+  return html`<div class="range-text">${trimmed}</div>`;
+}
+
 
   private renderRangeText(): TemplateResult {
     if (this.totalItems === 0) {
       return html`<div class="range-text">Showing 0 of 0</div>`;
     }
-    return html`<div class="range-text">
-      ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}
-    </div>`;
+    return html`
+      <div part="range-text" class="range-text">
+        ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}
+      </div>
+    `;
   }
 
   private renderPageSizeSelect(): TemplateResult | null {
@@ -87,13 +124,65 @@ export class NilePagination extends NileElement {
     return html`
       <div class="page-size-select">
         <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
-          <nile-button slot="trigger" variant="tertiary" class="down ${this._pageSizeOpen ? 'open' : ''}"
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="down ${this._pageSizeOpen ? 'open' : ''}"
             ?disabled=${this.disabled}
           >
             ${this.pageSize}
-            <nile-icon name="chevrondown" size="14" color="var(--nile-colors-dark-500)" class="chevron"></nile-icon>
+            <nile-icon
+              name="chevrondown"
+              size="14"
+              color="var(--nile-colors-dark-500)"
+              class="chevron"
+            ></nile-icon>
           </nile-button>
-          <nile-menu class="page-size-menu">
+          <nile-menu>
+            <div class="down-scroll-wrapper">
+              ${this.pageSizeOptions.map(
+                size => html`
+                  <nile-menu-item
+                    ?disabled=${this.disabled}
+                    @click=${() => this.onPageSizeSelect(size)}
+                  >
+                    ${size}
+                  </nile-menu-item>
+                `
+              )}
+            </div>
+          </nile-menu>
+        </nile-dropdown>
+        <span part="pagesize-label" class="page-size-label">Items per page</span>
+      </div>
+    `;
+  }
+
+
+  private renderCompactPageSize(): TemplateResult {
+    return html`
+      <nile-dropdown
+        class="compact-dropdown"
+        ?disabled=${this.disabled}
+        @nile-show=${() => (this._pageSizeOpen = true)}
+        @nile-after-hide=${() => (this._pageSizeOpen = false)}
+      >
+        <nile-button
+          slot="trigger"
+          variant="tertiary"
+          class="down ${this._pageSizeOpen ? 'open' : ''}"
+          ?disabled=${this.disabled}
+        >
+          ${this.pageSize}
+          <nile-icon
+            name="chevrondown"
+            size="14"
+            color="var(--nile-colors-dark-500)"
+            class="chevron"
+          ></nile-icon>
+        </nile-button>
+        <nile-menu>
+          <div class="compact-scroll-wrapper">
             ${this.pageSizeOptions.map(
               size => html`
                 <nile-menu-item
@@ -101,14 +190,15 @@ export class NilePagination extends NileElement {
                   @click=${() => this.onPageSizeSelect(size)}
                 >
                   ${size}
-                </nile-menu-item>`
+                </nile-menu-item>
+              `
             )}
-          </nile-menu>
-        </nile-dropdown>
-        <span class="page-size-label">Items per page</span>
-      </div>
+          </div>
+        </nile-menu>
+      </nile-dropdown>
     `;
   }
+  
 
   private renderPrevButton(): TemplateResult {
     return html`
@@ -164,7 +254,8 @@ export class NilePagination extends NileElement {
                       @click=${() => this.goToPage(page)}
                     >
                       ${page}
-                    </nile-menu-item>`
+                    </nile-menu-item>
+                  `
                 )}
               </div>
             </nile-menu>
@@ -172,7 +263,6 @@ export class NilePagination extends NileElement {
         </li>
       `;
     }
-
     return html`
       <li>
         <nile-button
@@ -187,10 +277,56 @@ export class NilePagination extends NileElement {
   }
 
   private renderPageList(): TemplateResult {
+    if (this.variant === 'compact') {
+      return html`
+        <nav aria-label="Pagination">
+          <ul class="pagination compact-pagination">
+            ${this.renderPrevButton()}
+            <li>
+              <nile-dropdown
+                class="compact-dropdown1"
+                ?disabled=${this.disabled}
+                @nile-show=${() => (this._pageOpen = true)}
+                @nile-after-hide=${() => (this._pageOpen = false)}
+              >
+                <nile-button
+                  slot="trigger"
+                  variant="tertiary"
+                  class="current-page-btn ${this._pageOpen ? 'open' : ''}"
+                  ?disabled=${this.disabled}
+                >
+                  ${this.currentPage}
+                  <nile-icon
+                    name="chevrondown"
+                    size="14"
+                    class="chevron"
+                  ></nile-icon>
+                </nile-button>
+                <nile-menu>
+                  <div class="compact-scroll-wrapper1">
+                    ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(
+                      p => html`
+                        <nile-menu-item
+                          ?disabled=${this.disabled}
+                          @click=${() => this.goToPage(p)}
+                        >
+                          ${p}
+                        </nile-menu-item>
+                      `
+                    )}
+                  </div>
+                </nile-menu>
+              </nile-dropdown>
+            </li>
+            ${this.renderNextButton()}
+          </ul>
+        </nav>
+      `;
+    }
     const items = getPaginationItems(this.totalPages, this.currentPage);
     return html`
       <nav aria-label="Pagination">
-        <ul class="pagination">
+        <ul part="page-list" class="pagination">
           ${this.renderPrevButton()}
           ${items.map((item, idx) => this.renderPageItem(item, idx, items))}
           ${this.renderNextButton()}
@@ -199,17 +335,23 @@ export class NilePagination extends NileElement {
     `;
   }
 
-  public render(): TemplateResult {
-    return html`
-      <div class="pagination-wrapper ${this.variant}">
-        <div class="pager-container">
-          ${this.showTitle ? this.renderRangeText() : null}
-          ${this.renderPageSizeSelect()}
-        </div>
-        ${this.renderPageList()}
+ public render(): TemplateResult {
+  return html`
+    <div part="wrapper" class="pagination-wrapper ${this.variant}">
+      <div part="pager-container" class="pager-container">
+        ${this.variant === 'fluid' && this.showTitle
+            ? this.renderRangeText()
+          : this.variant === 'compact'
+            ? this.renderCompactRangeText()
+            : null}
+        ${this.variant === 'fluid'
+          ? this.renderPageSizeSelect()
+          : this.renderCompactPageSize()}
       </div>
-    `;
-  }
+      ${this.renderPageList()}
+    </div>
+  `;
+}
 }
 
 declare global {

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

@@ -258,12 +258,48 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.emit('nile-destroy');
   }
 
+  private observer: MutationObserver | null = null;
+
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
-      this.setCheckBoxInOption(this.multiple);
+      this.waitForChildrenRender().then(() => {
+        this.setCheckBoxInOption(this.multiple);
+      });
     }
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.waitForChildrenRender().then(() => {
+      this.setCheckBoxInOption(this.multiple);
+    });
+  }
+
+  private waitForChildrenRender(): Promise<void> {
+    return new Promise((resolve) => {
+      if (this.areChildrenReady()) {
+        resolve();
+        return;
+      }
+  
+      this.observer?.disconnect();
+      this.observer = new MutationObserver(() => {
+        if (this.areChildrenReady()) {
+          this.observer?.disconnect();
+          resolve();
+        }
+      });
+
+      this.observer.observe(this.renderRoot as HTMLElement, {
+        childList: true
+      });
+    });
+  }
+
+  private areChildrenReady(): boolean {
+    const options = this.getAllOptions();
+    return options.length > 0;
+  }
+
   setCheckBoxInOption(checked: boolean): void {
     const options = this.getAllOptions();
     options.forEach((option: NileOption) => {

package/vscode-html-custom-data.json

@@ -545,7 +545,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 | undefined`} - \n\n  * `endYear` {`number | undefined`} - \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  * `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  * `startYear` {`number | undefined`} - \n\n  * `endYear` {`number | undefined`} - \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\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  * `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  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -621,16 +621,6 @@
           "name": "showManualInputs",
           "description": "`showManualInputs` {`boolean`} - \n\nProperty: showManualInputs\n\nDefault: false",
           "valueSet": "v"
-        },
-        {
-          "name": "startYear",
-          "description": "`startYear` {`number | undefined`} - \n\nProperty: startYear",
-          "values": []
-        },
-        {
-          "name": "endYear",
-          "description": "`endYear` {`number | undefined`} - \n\nProperty: endYear",
-          "values": []
         }
       ]
     },
@@ -828,7 +818,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -941,6 +931,11 @@
           "description": "`aboveCursor` {`boolean`} - \n\nProperty: aboveCursor\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "tabCompletion",
+          "description": "`tabCompletion` {`boolean`} - \n\nProperty: tabCompletion\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "
@@ -1489,7 +1484,7 @@
     },
     {
       "name": "nile-format-date",
-      "description": "Nile format-date component.\n\nAttributes:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"short\" | \"narrow\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `time-zone-name` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `time-zone` {`string`} - The time zone to express the time in.\n\n  * `hour-format` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `date-separator` {`\"-\" | \"/\"`} - The separator for the date format.\n\nProperties:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"short\" | \"narrow\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `timeZoneName` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `timeZone` {`string`} - The time zone to express the time in.\n\n  * `hourFormat` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `dateSeparator` {`\"-\" | \"/\"`} - The separator for the date format.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile format-date component.\n\nAttributes:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `time-zone-name` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `time-zone` {`string`} - The time zone to express the time in.\n\n  * `hour-format` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `date-separator` {`\"-\" | \"/\"`} - The separator for the date format.\n\nProperties:\n\n  * `date` {`string | Date`} - The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).\n\n  * `weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\n  * `era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\n  * `year` {`\"numeric\" | \"2-digit\"`} - The format for displaying the year.\n\n  * `month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\n  * `day` {`\"numeric\" | \"2-digit\"`} - The format for displaying the day.\n\n  * `hour` {`\"numeric\" | \"2-digit\"`} - The format for displaying the hour.\n\n  * `minute` {`\"numeric\" | \"2-digit\"`} - The format for displaying the minute.\n\n  * `second` {`\"numeric\" | \"2-digit\"`} - The format for displaying the second.\n\n  * `timeZoneName` {`\"short\" | \"long\"`} - The format for displaying the time.\n\n  * `timeZone` {`string`} - The time zone to express the time in.\n\n  * `hourFormat` {`\"auto\" | \"12\" | \"24\"`} - The format for displaying the hour.\n\n  * `dateSeparator` {`\"-\" | \"/\"`} - The separator for the date format.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "date",
@@ -1498,13 +1493,13 @@
         },
         {
           "name": "weekday",
-          "description": "`weekday` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the weekday.\n\nProperty: weekday",
+          "description": "`weekday` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the weekday.\n\nProperty: weekday",
           "values": [
             {
-              "name": "short"
+              "name": "narrow"
             },
             {
-              "name": "narrow"
+              "name": "short"
             },
             {
               "name": "long"
@@ -1513,13 +1508,13 @@
         },
         {
           "name": "era",
-          "description": "`era` {`\"short\" | \"narrow\" | \"long\"`} - The format for displaying the era.\n\nProperty: era",
+          "description": "`era` {`\"narrow\" | \"short\" | \"long\"`} - The format for displaying the era.\n\nProperty: era",
           "values": [
             {
-              "name": "short"
+              "name": "narrow"
             },
             {
-              "name": "narrow"
+              "name": "short"
             },
             {
               "name": "long"
@@ -1540,13 +1535,13 @@
         },
         {
           "name": "month",
-          "description": "`month` {`\"short\" | \"narrow\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\nProperty: month",
+          "description": "`month` {`\"narrow\" | \"short\" | \"long\" | \"numeric\" | \"2-digit\"`} - The format for displaying the month.\n\nProperty: month",
           "values": [
             {
-              "name": "short"
+              "name": "narrow"
             },
             {
-              "name": "narrow"
+              "name": "short"
             },
             {
               "name": "long"
@@ -2356,7 +2351,7 @@
     },
     {
       "name": "nile-pagination",
-      "description": "Attributes:\n\n  * `totalitems` {`number`} - \n\n  * `currentpage` {`number`} - \n\n  * `pagesize` {`number`} - \n\n  * `pagesizeoptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `_pageSizeOpen` {`boolean`} - \n\n  * `_pageSizeDropdown` {`HTMLElement`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `totalitems` {`number`} - \n\n  * `currentpage` {`number`} - \n\n  * `pagesize` {`number`} - \n\n  * `pagesizeoptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `_pageSizeOpen` {`boolean`} - \n\n  * `_pageOpen` {`boolean`} - \n\n  * `_pageSizeDropdown` {`HTMLElement`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "totalitems",
@@ -2843,7 +2838,7 @@
     },
     {
       "name": "nile-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\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`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \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  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\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`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `observer` {`MutationObserver | null`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \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  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",

package/demo/filenames.txt

@@ -1 +0,0 @@
-api,accessreview,action,address,agent,aggregation,alert,allapplication,allsearch,applications-2,apply-filter,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cases,certification,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,copy,cor-analysis,correlation,create,createuser,dashboard,data-type-array,data-type-boolean,data-type-json,data-type-null,data-type-number,data-type-string,data-type-unknown,database,databaseview,default-cursor,default,delegate,delete,deligateduser,directory,disabled,dowhileloop,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,download,drag,edit-write,else,email,enable,entities,entitlement,error,escalate,exactmatch,execute,expand-2,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-colorpalatte,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-child-workflow,header-flows,header-tasks,helpsupport,help,helpandsupport,history,identitygraph,identityledger,ifelse,image,immutable,info-icon,info,inprogress,js,kill,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,mute,nomatch,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pencil,peopletask,persistent-variable,persistentdata,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,reminder,resize,resource,revocation-cycle,role,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,send,sendemail,sendescalation,sendreminder,settings,share,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trigger,undo-02,undo,unmute,updown,update,upgrade,upload,user-group,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove,userremovegroup,userupdate,users,validationexpression,variable-new,variable-global,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,whileloop,workflow-application,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,automation-details,back,bar-and-line-chart,bar-chart-square-02,bar-chart,bargraph,book-closed,border_all,box,bubble-chart,cell-loader,check-circle,check-done-01,check-done-02,chevron-left-double,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,comment,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,document-new,dotpoints-02,dots-grid,downgrade,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,helpers,ifelsenew,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,left-union,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,move-application,my-integration,new-calendar,nightingale-chart,nlp,operators,orchestration-solid,paperclip,phone,pie,play_pause,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh,resource_analysis,resource_graph,restart_alt,right-join,right-union,rocket-02,sankey,savings,scatter-plot,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,sort_ascending,sort_descending,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,transaction_monitor,trend-up-02,union,users-plus,users-up,virtualservergroup,warning-01

package/demo/filenames.txt

@@ -1 +0,0 @@
-api,accessreview,action,actionworkflow,address,agent,agents,aggregation,allapplication,allsearch,application,applications,apply-filter,approve,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,basic,bell,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cancel,cases,caution,certification,chevron-down,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componentblock,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,continuous,copy,cor-analysis,correlation,create,createuser,custom,dashboard,data-type-array,data-type-boolean,data-type-expression,data-type-json,data-type-null,data-type-number,data-type-persistent-variable,data-type-string,data-type-unknown,data-type-variable,database,databaseview,default-1,default-cursor,default,delegate,delete,deleteuser,deligateduser,directory,disabled,dowhileloop,document,done,dontmap,doublearrowleft,doublearrowright,downarrow,download,drag,draglist,droparrow,dropdown,edit-write,edit-pencil,else,email,enable,enabled,entities,entitlement,error,escalate,event,every,exactmatch,execute,expand-2,expand-1,expand,eye,eyeclosed,filter,firewallagent,firewall,flow-h,flow,flowmap-cancel,flowmap-drag,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-aquera,flowmap-block,flowmap-colorpalatte,flowmap-ellipsis,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-hand,flowmap-redo,flowmap-section,flowmap-text,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,form,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-actions,header-child-workflow,header-flows,header-functions,header-tasks,header-variable,helpsupport,help-1,help,helpandsupport,history,identitygraph,identityledger,if,ifelse,image,immutable,info-icon,info-icon1,info,info2,inprogress,itemplaceholder,js,kill,leftarrow,leftpointarrow,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,manageduser,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,multiple-user,mute,next-down,next,nomatch,not,notscheduled,note,notification,notificationadd,notificationadded,null,number,numberinput,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pen,pencil,peopletask,persistent-variable,persistentdata,personaldetails,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,prev-up,prev,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo,refresh,reminder,resize,resource,returnvalue,revocationcycle,revokation-cycle,rightarrow,role,rolemanager,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,selectuser,send,sendemail,sendescalation,sendprompt,sendreminder,setting,settings,shape,share,smalltick,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text,textarea-expander,themes,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trash,trigger,undo-1,undo,unmute,uparrow,updown,update,updateuser,upgrade,upload,user-group,user-analysis-icon,user-inactive,user-selection,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove-1,userremove-2,userremove,userremovegroup,userupdate,users,validationexpression,variable-new-1,variable-new,variable-global,variable-local-1,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,while,whileloop,workflow-application,workflow-orchestration,workflow-section,workflow-text,workflow,writeexpression,anomaly,array-loop,back,bargraph,bell-icon,cell-loader,components-icon,downgrade,file,funnel,globe,helpers,integer,no-anomaly,operators,orchestration-solid,ou-analysis-icon,phone,placeholder-wf,plus-icon,search-steps-icon,storybook,swap,switch,trash-no-fill,virtualservergroup,workflow-solid