@aquera/nile-elements 0.1.40-beta-1.1 → 0.1.40-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.40-beta-1.1",
+  "version": "0.1.40-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -20,6 +20,7 @@ export const styles = css`
   .nile-button-toggle {
     display: flex;
     padding: var(--nile-spacing-sm, var(--ng-spacing-sm)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding-right: var(--nile-spacing-14px, var(--ng-spacing-xl));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     cursor: pointer;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));

package/src/nile-icon/icons/svg/index.ts

@@ -298,9 +298,11 @@ export { default as ngimageuserleft } from './ng-image-user-left';
 export { default as nginfocircle } from './ng-info-circle';
 export { default as ngitalic01 } from './ng-italic-01';
 export { default as nglist } from './ng-list';
+export { default as nglogout01 } from './ng-log-out-01';
 export { default as ngmail01 } from './ng-mail-01';
 export { default as ngmail04 } from './ng-mail-04';
 export { default as ngmenu05 } from './ng-menu-05';
+export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
 export { default as ngplus } from './ng-plus';
 export { default as ngrocket02 } from './ng-rocket-02';

package/src/nile-icon/icons/svg/ng-log-out-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMTdMMjEgMTJNMjEgMTJMMTYgN00yMSAxMkg5TTkgM0g3LjhDNi4xMTk4NCAzIDUuMjc5NzYgMyA0LjYzODAzIDMuMzI2OThDNC4wNzM1NCAzLjYxNDYgMy42MTQ2IDQuMDczNTQgMy4zMjY5OCA0LjYzODAzQzMgNS4yNzk3NiAzIDYuMTE5ODQgMyA3LjhWMTYuMkMzIDE3Ljg4MDIgMyAxOC43MjAyIDMuMzI2OTggMTkuMzYyQzMuNjE0NiAxOS45MjY1IDQuMDczNTQgMjAuMzg1NCA0LjYzODAzIDIwLjY3M0M1LjI3OTc2IDIxIDYuMTE5ODQgMjEgNy44IDIxSDkiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS4zIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-message-text-square-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNyA4LjVIMTJNNyAxMkgxNU05LjY4Mzc1IDE4SDE2LjJDMTcuODgwMiAxOCAxOC43MjAyIDE4IDE5LjM2MiAxNy42NzNDMTkuOTI2NSAxNy4zODU0IDIwLjM4NTQgMTYuOTI2NSAyMC42NzMgMTYuMzYyQzIxIDE1LjcyMDIgMjEgMTQuODgwMiAyMSAxMy4yVjcuOEMyMSA2LjExOTg0IDIxIDUuMjc5NzYgMjAuNjczIDQuNjM4MDNDMjAuMzg1NCA0LjA3MzU0IDE5LjkyNjUgMy42MTQ2IDE5LjM2MiAzLjMyNjk4QzE4LjcyMDIgMyAxNy44ODAyIDMgMTYuMiAzSDcuOEM2LjExOTg0IDMgNS4yNzk3NiAzIDQuNjM4MDMgMy4zMjY5OEM0LjA3MzU0IDMuNjE0NiAzLjYxNDYgNC4wNzM1NCAzLjMyNjk4IDQuNjM4MDNDMyA1LjI3OTc2IDMgNi4xMTk4NCAzIDcuOFYyMC4zMzU1QzMgMjAuODY4NCAzIDIxLjEzNDggMy4xMDkyMyAyMS4yNzE2QzMuMjA0MjIgMjEuMzkwNiAzLjM0ODI3IDIxLjQ1OTkgMy41MDA1NCAyMS40NTk3QzMuNjc1NjMgMjEuNDU5NSAzLjg4MzY3IDIxLjI5MzEgNC4yOTk3NiAyMC45NjAyTDYuNjg1MjEgMTkuMDUxOEM3LjE3MjUyIDE4LjY2MiA3LjQxNjE3IDE4LjQ2NzEgNy42ODc0OSAxOC4zMjg1QzcuOTI4MiAxOC4yMDU1IDguMTg0NDMgMTguMTE1NiA4LjQ0OTIxIDE4LjA2MTNDOC43NDc2NyAxOCA5LjA1OTcgMTggOS42ODM3NSAxOFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS4zIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -45,7 +45,7 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-600));
     line-height: var(--nile-line-height-large,var(--ng-line-height-text-md));
     letter-spacing: normal;
-    color: var(--nile-colors-primary-900,var(--ng-colors-text-secondary-700));
+    color: var(--nile-colors-dark-1,var(--ng-colors-text-secondary-700));
     min-height:40px;
     transition: 150ms fill;
     user-select: none;

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

@@ -66,8 +66,8 @@ export const styles = css`
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-lg);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
@@ -180,13 +180,13 @@ export const styles = css`
     flex: 1;
     align-items: center;
     flex-wrap: no-wrap;
-    margin-inline-start: var(--nile-spacing-md);
+    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
   }
 
   .select__tags-count {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
 
@@ -194,11 +194,11 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular);
     line-height: var(--nile-line-height-xsmall);
     letter-spacing: 0.2px;
-    margin: var(--nile-spacing-sm);
+    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .select__tags-count-clearable {
-    margin-right: var(--nile-spacing-5xl);
+    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .select__tags::slotted(nile-tag) {
@@ -243,7 +243,7 @@ export const styles = css`
   }
 
   .select--warning .select__combobox {
-    border-color: var(--nile-colors-yellow-500);
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
   }
 
   .select--error .select__combobox {
@@ -255,14 +255,14 @@ export const styles = css`
 
 
   .select--success {
-    border-color: var(--nile-colors-green-500);
+    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));
   }
 
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
@@ -337,7 +337,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
     padding: var(--nile-spacing-none);
@@ -360,7 +360,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-sm));
+    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -371,7 +371,7 @@ export const styles = css`
   .select__listbox {
     display: block;
     position: relative;
-    font-size: var(--nile-type-scale-4);
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular);
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
@@ -381,8 +381,8 @@ export const styles = css`
     overflow: auto;
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
-    max-width: var(--nile-width-auto, var(--ng-width-auto));
-    max-height: var(--nile-height-247px, var(--ng-spacing-64));
+     max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
     box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
 
@@ -403,10 +403,10 @@ export const styles = css`
   .select__listbox::slotted(small) {
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
 
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
     color: var(--nile-colors-dark-500);
     padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));
-    padding-inline: var(--nile-spacing-xl);
+    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .select__search {
@@ -432,7 +432,7 @@ export const styles = css`
     align-items: flex-start;
     padding: var(--nile-spacing-md) var(--nile-spacing-lg)
       var(--nile-spacing-xl);
-    gap: var(--nile-spacing-lg);
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
   }
 
@@ -453,7 +453,7 @@ export const styles = css`
   }
 
   .select__loader--icon {
-    margin-top: var(--nile-spacing-xl);
+    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
     animation: spin 0.6s linear infinite;
   }
 

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

@@ -162,6 +162,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   @property({ type: Boolean, reflect: true }) multiple = false;
 
   @property({ attribute: true, reflect: true }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) help_text = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -981,7 +982,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
-    const hasHelpText = this.helpText ? true : false;
+    const hasHelpText = (this.helpText || this.help_text) ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const prefixContent = this.selectedOptions[0]
       ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1284,7 +1285,7 @@ export class NileSelect extends NileElement implements NileFormControl {
         </div>
 
         ${hasHelpText
-          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+          ? html` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
           : ``}
         ${hasErrorMessage
           ? html`

package/vscode-html-custom-data.json

@@ -2994,7 +2994,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  * `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`} - ",
+      "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  * `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  * `help_text` {`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",
@@ -3053,6 +3053,10 @@
           "name": "helpText",
           "description": "`helpText` {`string`} - \n\nProperty: helpText\n\nDefault: "
         },
+        {
+          "name": "help-text",
+          "description": "`help-text` {`string`} - \n\nProperty: help_text\n\nDefault: "
+        },
         {
           "name": "error-message",
           "description": "`error-message` {`string`} - \n\nProperty: errorMessage\n\nDefault: "