@aquera/nile-elements 0.1.35-beta-1.0 → 0.1.35-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.35-beta-1.0",
+  "version": "0.1.35-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,6 +37,7 @@
     "./nile-textarea": "./dist/src/nile-textarea/index.js",
     "./nile-date-picker": "./dist/src/nile-date-picker/index.js",
     "./nile-error-message": "./dist/src/nile-error-message/index.js",
+    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js",
     "./nile-form-error-message": "./dist/src/nile-form-error-message/index.js",
     "./nile-form-help-text": "./dist/src/nile-form-help-text/index.js",
     "./nile-calendar": "./dist/src/nile-calendar/index.js",
@@ -84,7 +85,6 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
-    "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js"
   },
   "scripts": {

package/src/index.ts

@@ -75,4 +75,5 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
-export { NileTable } from './nile-table';
+export { NileTable } from './nile-table';
+export { NileFilterChip } from './nile-filter-chip';

package/src/nile-filter-chip/index.ts

@@ -0,0 +1 @@
+export { NileFilterChip } from './nile-filter-chip';

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -0,0 +1,115 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* 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 {css} from 'lit';
+
+/**
+ * FilterChip CSS
+ */
+
+export const styles = css`
+
+
+  .filter-chips {
+    display: flex;
+    align-items: center;
+  }
+
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: var(--nile-filter-chip-background-default);
+    color: var(--nile-filter-chip-text-default);
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    cursor: pointer;
+    gap: 6px;
+    margin-right: 6px;
+  }
+
+  .chip:hover {
+    background-color: var(--nile-filter-chip-hover-background);
+  }
+
+  .chip:active {
+    background-color: var(--nile-filter-chip-active-background);
+    border-color: var(--nile-filter-chip-active-border-color-stroke);
+  }
+
+  .icon {
+    color: var(--nile-filter-chip-icon-color-default);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    top: 12px;
+  }
+
+  .label {
+    font-weight: 500;
+    color: var(--nile-filter-chip-label-color-default);
+  }
+
+  nile-badge::part(base) {
+    width: auto;
+    height: 14px;
+    border-radius: 100px;
+    padding: 6px;
+    gap: 10px;
+    font-size: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .chip-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .clear-all-container {
+    margin-left: 18px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+
+  .value {
+    color: var(--nile-filter-chip-values-color-default);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 140px;
+  }
+
+  .close-icon {
+    color: var(--nile-filter-chip-close-icon-color-default);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+  }
+
+  .close-icon:hover {
+    background-color: var(--nile-filter-chip-close-icon-hover-background);
+    color: var(--nile-filter-chip-close-icon-hover-color);
+  }
+`;
+
+export default [styles];
+
+ 

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -0,0 +1,92 @@
+import { fixture, expect, html, oneEvent } from '@open-wc/testing';
+import './nile-filter-chip';
+import { NileFilterChip } from './nile-filter-chip';
+
+describe('<nile-filter-chip>', () => {
+  afterEach(() => {
+    (NileFilterChip as any).activeChips = [];
+  });
+
+  it('registers and unregisters itself in activeChips', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="L" text="T"></nile-filter-chip>
+    `);
+    expect((NileFilterChip as any).activeChips).to.include(el);
+    el.remove();
+    await el.updateComplete;
+    expect((NileFilterChip as any).activeChips).to.not.include(el);
+  });
+
+  it('renders fallback label and text', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="MyLabel" text="MyText"></nile-filter-chip>
+    `);
+    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;
+    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;
+    expect(label.textContent).to.equal('MyLabel:');
+    expect(value.textContent!.trim()).to.equal('MyText');
+  });
+
+  it('renders slotted label and value over fallback', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip>
+        <span slot="label">SLOT-LBL</span>
+        <span slot="value">SLOT-VAL</span>
+      </nile-filter-chip>
+    `);
+    const slottedLabel = el.querySelector('[slot="label"]')! as HTMLElement;
+    const slottedValue = el.querySelector('[slot="value"]')! as HTMLElement;
+    expect(slottedLabel.textContent).to.equal('SLOT-LBL');
+    expect(slottedValue.textContent).to.equal('SLOT-VAL');
+  });
+
+  it('renders an icon when the `icon` property is set', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip icon="★" label="L" text="T"></nile-filter-chip>
+    `);
+    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;
+    expect(iconSpan).to.exist;
+    expect(iconSpan.textContent).to.equal('★');
+  });
+
+  it('does not render a badge when extraCount is zero', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
+    `);
+    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
+  });
+
+  it('renders a +badge when extraCount > 0', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
+    `);
+    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
+    expect(badge).to.exist;
+    expect(badge.textContent).to.contain('+5');
+  });
+
+
+
+  it('dispatches `nile-click` on chip click', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="L" text="T"></nile-filter-chip>
+    `);
+    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
+    setTimeout(() => chip.click());
+    const ev = await oneEvent(el, 'nile-click');
+    expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });
+  });
+
+  it('dispatches `nile-close` on close icon click and removes itself', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
+    `);
+    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
+    setTimeout(() => closeIcon.click());
+    const ev = await oneEvent(el, 'nile-close');
+    expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });
+    expect(document.body.contains(el)).to.be.false;
+  });
+
+ 
+});

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-filter-chip.css';
+
+/**
+ * Nile filter-chip component.
+ *
+ * @tag nile-filter-chip
+ */
+@customElement('nile-filter-chip')
+export class NileFilterChip extends NileElement {
+  @property({ type: String }) label = '';
+  @property({ type: String }) text = '';
+  @property({ type: Number }) extraCount: number = 0;
+  @property({ type: Boolean }) editable = false;
+  @property({ type: Boolean }) closable = false;
+  @property({ type: String }) icon = '';
+  @property({ type: String }) removeIcon = '';
+
+  private static activeChips: NileFilterChip[] = [];
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.registerChip();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unregisterChip();
+  }
+
+  private registerChip() {
+    NileFilterChip.activeChips.push(this);
+  }
+
+  private unregisterChip() {
+    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(
+      (chip) => chip !== this
+    );
+  }
+
+  private handleClose(event: Event) {
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } })
+    );
+    this.remove();
+  }
+
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })
+    );
+  }
+
+  private getLabelSlot(): TemplateResult {
+    return html`
+      <slot name="label">
+        <span class="label">${this.label}:</span>
+      </slot>
+    `;
+  }
+
+  private getValueSlot(): TemplateResult {
+    return html`
+      <slot name="value">
+        <span class="value">${this.text}</span>
+      </slot>
+    `;
+  }
+
+  private getExtraCountSlot(): TemplateResult {
+    return html`
+      <slot name="suffix">
+        ${this.extraCount
+          ? html`
+              <nile-badge variant="primary" pilltype="pill-color">
+                +${this.extraCount}
+              </nile-badge>
+            `
+          : html``}
+      </slot>
+    `;
+  }
+
+  private getCloseIconSlot(): TemplateResult {
+    return html`
+      ${this.closable
+        ? html`
+            <span class="close-icon" @click="${this.handleClose}">
+              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
+            </span>
+          `
+        : html``}
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="chip" @click="${this.handleClick}">
+        <slot name="icon">
+          ${this.icon ? html`<span class="icon">${this.icon}</span>` : html``}
+        </slot>
+        ${this.getLabelSlot()}
+        <slot name="content"></slot>
+        ${this.getValueSlot()}
+        ${this.getExtraCountSlot()}
+        ${this.getCloseIconSlot()}
+      </div>
+    `;
+  }
+}
+
+export default NileFilterChip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-filter-chip': NileFilterChip;
+  }
+}

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

@@ -161,7 +161,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
-  @property({ attribute: 'help-text', reflect: true }) helpText = '';
+  @property({ attribute: true, reflect: true }) helpText = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 

package/vscode-html-custom-data.json

@@ -1405,6 +1405,50 @@
         }
       ]
     },
+    {
+      "name": "nile-filter-chip",
+      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
+        },
+        {
+          "name": "text",
+          "description": "`text` {`string`} - \n\nProperty: text\n\nDefault: "
+        },
+        {
+          "name": "extraCount",
+          "description": "`extraCount` {`number`} - \n\nProperty: extraCount\n\nDefault: 0"
+        },
+        {
+          "name": "editable",
+          "description": "`editable` {`boolean`} - \n\nProperty: editable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "closable",
+          "description": "`closable` {`boolean`} - \n\nProperty: closable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "icon",
+          "description": "`icon` {`string`} - \n\nProperty: icon\n\nDefault: "
+        },
+        {
+          "name": "removeIcon",
+          "description": "`removeIcon` {`string`} - \n\nProperty: removeIcon\n\nDefault: "
+        },
+        {
+          "name": "onnile-close",
+          "description": "`nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+        },
+        {
+          "name": "onnile-click",
+          "description": "`nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+        }
+      ]
+    },
     {
       "name": "nile-footer",
       "description": "Nile icon component.\n\n",
@@ -2747,7 +2791,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  * `helpText` {`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`} - ",
       "attributes": [
         {
           "name": "size",
@@ -2803,8 +2847,8 @@
           "valueSet": "v"
         },
         {
-          "name": "help-text",
-          "description": "`help-text` {`string`} - \n\nProperty: helpText\n\nDefault: "
+          "name": "helpText",
+          "description": "`helpText` {`string`} - \n\nProperty: helpText\n\nDefault: "
         },
         {
           "name": "error-message",