@roadtrip/components 3.32.4 → 3.33.0

package/dist/collection/components/segmented-button-bar/segmented-button-bar.js

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '7fffe10ee5aa2a3ee09086f24e637c5e07992487', role: "tablist" }, h("slot", { key: '10e9ca402be8299b44ef9cb41921cf846e280fe9' })));
+        return (h(Host, { key: 'cbe94587012819876109399d72bb1715ac334a9f', role: "tablist" }, h("slot", { key: 'a1ba2feec5c649ea44f6b534a10a18fc738fede5' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-buttons/segmented-buttons.js

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'ee63f3001e735cc0345f081742b98cc7dda58379', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'ead65e59a9ce47b7ed0034b5e807f41a3f3aae58', name: "top" }), h("slot", { key: '87177efc28c625a4d3e5c893a17ab2ed3be252ef' })));
+        return (h(Host, { key: '8e28299a9d4821c74d9e62b25b6b8ad72fac01da', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '2e154363be587d35480818a016f9bc8973709724', name: "top" }), h("slot", { key: '77044401892a3a9245eb9029178d82df516c7252' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js

@@ -20,9 +20,11 @@ export default {
   },
   argTypes: {
     top: {
+      description: "Content is placed at the top of the screen.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     roadtabsdidchange: {

package/dist/collection/components/select/select.js

@@ -92,7 +92,7 @@ export class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'da3422623531e89342177a5d20bb510a59958f89', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'bb6d5b2c7aa0f6d47138e5484a63327ff79ddc13', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: 'ac8dce2f36174aef8c8032df94cb8f7697af23d3', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '8168c891572f16aef34e042890655f3729b03c9d', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'ccd6055b8edc033654d1c40c1a7b3add511655c6', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: '81206f7f9840b7700814260f6a7b8cf78fd7e536', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '8118f6d0f6c2d59be3d0c873398c195a8525c0cc', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '4e87320134e62248e7c9e805761226f5403472a9', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '32191859474bee5f86d21ad9f81d01bc088d07cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '47ecadf397bc303ca9347fc2c426dd4a3f608057', class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select/select.stories.js

@@ -11,49 +11,62 @@ export default {
   },
   argTypes: {
     disabled: {
+      description: "If `true`, the user cannot interact with the select.",
       control: 'boolean',
     },
     required: {
+      description: "If `true`, the user must fill in a value before submitting a form.",
       control: 'boolean',
     },
     autofocus: {
+      description: "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
       control: 'boolean',
     },
     error: {
+      description: "Error message for the field",
       control: 'text',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     size: {
+      description: "The sizes of the input.",
       control: 'number',
     },
     sizes: {
+      description: "If the control is presented as a scrolling list box (e.g. when multiple is specified),\nthis attribute represents the number of rows in the list that should be visible at one time.",
       options: ['md', 'lg', 'xl'],
       control: {
         type: 'select',
       },
     },
     'select-id': {
+      description: "The id of select",
       control: 'text',
     },
     value: {
+      description: "the value of the select.",
       control: 'text',
     },
     roadblur: {
+      description: "Emitted when the select loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the select has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,

package/dist/collection/components/select-filter/select-filter.js

@@ -107,8 +107,8 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '754363e1da719022e5d4e2a9bed9e45a307605fb', "is-active": isActive }, h("slot", { key: '6ed491805215e92124fb0de84b8c4edea15a1bab' }), this.isOpen &&
-            h("ul", { key: 'e78ba5806ffed4ceb585b93dac5aa5eb0a1992c7', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
+        return (h(Host, { key: '4443cee3d13ade9d17d364aa112f7d13ac9a27d1', "is-active": isActive }, h("slot", { key: 'ed15841a9e665154f9988f76e8ac56c1788fd750' }), this.isOpen &&
+            h("ul", { key: '4ab28fd0fb00759e86e30fe14ded0de207dfde7c', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -12,15 +12,19 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Input element for the widget, it should be a road-input element.",
       control: 'text',
     },
     'only-select': {
+      description: "If `false`, the user can submit custom value",
       control: 'boolean',
     },
     'is-active': {
+      description: "If `true`, add class Active",
       control: 'boolean',
     },
     parameters: {
+      description: "Options to pass to the fuse.js instance.\nSee https://fusejs.io/api/options.html for valid options",
       control: 'object',
     },
     roadselected: {
@@ -30,6 +34,7 @@ export default {
       },
     },
     '--margin-top': {
+      description: "margin top of the select-filter (should equal the height of the field)",
       table: {
         defaultValue: { summary: '3rem' },
       },

package/dist/collection/components/skeleton/skeleton.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Skeleton {
     render() {
-        return (h("span", { key: 'aa9286d647036cc908db034b7abae677ac5db4c5' }, "\u00A0"));
+        return (h("span", { key: '76fc5d6e478e6486b0f4f3e5e3afd7e1a8c0049f' }, "\u00A0"));
     }
     static get is() { return "road-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skeleton/skeleton.stories.js

@@ -5,6 +5,7 @@ export default {
   component: 'road-skeleton',
   argTypes: {
     '--background-light': {
+      description: "base light grey color",
       table: {
         defaultValue: { summary: 'var(--road-disabled)' },
       },
@@ -13,6 +14,7 @@ export default {
       },
     },
     '--background-dark': {
+      description: "second grey color to see the animation",
       table: {
         defaultValue: { summary: 'rgb(137, 143, 160, 0.4)' },
       },

package/dist/collection/components/spinner/spinner.js

@@ -13,7 +13,7 @@ export class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: '79f895b55bf34f5b4591f0104f067b1bc29b5840', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '333985c957dd76b7694d5717eb64f037018c1613', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: '66ff9c668eec8fc73a2f93015094934b9fb0b181', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '5b2c9b4c104607084c0d2249c5b7dc31429ad39a', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.stories.js

@@ -7,12 +7,14 @@ export default {
   component: 'road-spinner',
   argTypes: {
     size: {
+      description: "The button size.",
       options: ['small', 'medium', 'large', 'xl'],
       control: {
         type: 'select',
       },
     },
     color: {
+      description: "The color spinner.",
       options: ['default', 'light', 'dark'],
       control: {
         type: 'select',

package/dist/collection/components/switch/switch.js

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: '9b8763418ebd696deeaf0f96f0ef3df50233b979', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'f8a8b7641286294d251bc6d10b45fc97607cba49', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: '1eb289fc4d05d8ca3b2d51044167681119c01443' }, h("input", { key: '2d91cd17ab57ca1ba4bc0b9d3270d4416c3999ec', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'ef6bce098cdd21249d38b68e0b811f8e6126c402', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '694baf8b86086363e5f5429af152a6f488e660cc', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '9c43f0996fdcd4962776919b92b94eb7fbb9ad57' }, h("input", { key: '756db832dbd73ec0c59ed9ec2ae76b1851a8f22d', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '927bdd4ef11db9a6039ffd028994caa4667519fe', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0f3011ab70a432f99319331bb0e2009fa11e50ce', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tab/tab.js

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '6187e82afbc19467bacecff9dab022208d82d83e', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '24b66a77921452273dbf57f3f44ac3cffbaecf8f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'c3899fd5fd831d2904c77263f5b6ef795d594e9b' })));
+            } }, h("slot", { key: '63f0d57bf74b8d562fecfbc881f8199d68080e89' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: '476e362d19cd6d3eac7379cb28a0579f8d165128', role: "tablist", class: {
+        return (h(Host, { key: '7c2795d50362e570f6a3371fde1e987bfc6389fd', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '089d0ced1753e49bbf40a2bed3b6de3ce70cde7a' })));
+            } }, h("slot", { key: '94d18f97a0e96a8e8cef400b4b08feef32210782' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-button/tab-button.js

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '531265b9c411317f80d42792817d2000195695a8', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '1bf7c7301f66cecd4bfbf5cb332fb443dbd17a73', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -79,7 +79,7 @@ export class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: '864576c07dfdafdce416c2ad28173e7875d403b1' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '95cf566321f3c956b8682c1ae0a20674966d1b8f', class: "button-inner" }, h("slot", { key: 'a1e2bb5eafc6d9f0b9c166166925d42e52382825' })))));
+            } }, h("a", Object.assign({ key: 'c15a1634befc28787a96baa630bcb65bfac9dcc7' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '8f1f273aea98fd8680b5787223f8fe730055d9c3', class: "button-inner" }, h("slot", { key: '24f7dceead533f266dcdd4cb80f792b2ae85db2c' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Table {
     render() {
-        return (h("slot", { key: 'b76d60e60c39e889690419d020151ac7a0b68f08' }));
+        return (h("slot", { key: '1255550161fc3591df1269296d7dbd2bd2dc86b6' }));
     }
     static get is() { return "road-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/table.stories.js

@@ -6,6 +6,7 @@ export default {
   component: 'road-table',
   argTypes: {
     ' ': {
+      description: "Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).",
       control: 'text',
     },
   },

package/dist/collection/components/tabs/tabs.js

@@ -99,7 +99,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '9af7cc85b48f7334fcffd1f73441ea70c98d5dd6', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'd2177dc6d9294c0746b28681c1a8ddf4b52e670a', name: "top" }), h("div", { key: '5a6133642fb46719a0babdda0df26f98e7b51c73', class: "tabs-inner" }, h("slot", { key: 'db5c5137cb9bd1fdb0f587d60fe67fdb3bf40a22' }))));
+        return (h(Host, { key: 'bc3d78f5653f637d9b0c23a732cfb715a0490e09', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'be1082d53eb88ff1e0aa1222dbea8a5bcc65c77a', name: "top" }), h("div", { key: '4e29d83d3f1473b27b720a049c7201f632fbe11b', class: "tabs-inner" }, h("slot", { key: 'd9ed82d2d6cb976d65c9349e286190033f859ebd' }))));
     }
     static get is() { return "road-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.stories.js

@@ -19,9 +19,11 @@ export default {
   },
   argTypes: {
     top: {
+      description: "Content is placed at the top of the screen.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     roadtabsdidchange: {

package/dist/collection/components/tag/tag.js

@@ -16,7 +16,7 @@ export class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: 'fada54428b148c0572768c9f7f347b7666528f4e', class: `${contrastClass}` }, h("slot", { key: 'e5c53f9a417c064ac4c257a6e5a74bc593c7d5e8' })));
+        return (h(Host, { key: '474f7b6662f78c0258d4573377bca6c8cda09bbb', class: `${contrastClass}` }, h("slot", { key: 'f58667d0bd8ffc1839df5b0c1572447d8445d4ae' })));
     }
     static get is() { return "road-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.stories.js

@@ -12,15 +12,18 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Content of the tag.",
       control: 'text',
     },
     color: {
+      description: "The color to use from your application's color palette.",
       options: ['grey', 'yellow', 'red', 'violet', 'blue', 'green'],
       control: {
         type: 'select',
       },
     },
     contrast: {
+      description: "Set to `true` for a contrast tag, for example on a gryy surface",
       control: 'boolean',
     },
   },

package/dist/collection/components/text/text.js

@@ -11,7 +11,7 @@ export class Text {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: '41de3c220883dbe616d365f940168c46ca079813', class: `${colorClass}` }, h("slot", { key: '4840d935993f294633106ebf2e40ad6ab037b2e3' })));
+        return (h(Host, { key: 'bb23b71b76a33ff446f23c24ba4f53f41bf2445f', class: `${colorClass}` }, h("slot", { key: 'd1a14d98cae107a96314bbaea01687183cf60447' })));
     }
     static get is() { return "road-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.stories.js

@@ -16,12 +16,14 @@ Playground.args = {
 };
 Playground.argTypes = {
   color: {
+    description: "Color of the text.",
     options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'default', 'default-second', 'disabled', 'white'],
     control: {
       type: 'radio',
     },
   },
   ' ': {
+    description: "Content of the text.",
     control: 'text',
   },
 };

package/dist/collection/components/textarea/textarea.js

@@ -82,7 +82,7 @@ export class Textarea {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '6fa4a7131094822da9e3251a06a4f16b54b96968', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'a0db598ce5aed5ded46b2f706e82097fbc90d3c7', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: '63b3e8c95d5569a1ad9b6c7181559af217840ef2', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '4a49ff30de8d7aedecd3e5cc774ddb577201a7e5', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '86f47b9aa260fde69a8e4d17ce80d64b37d373ae', class: "helper" }, this.helper)));
+        return (h(Host, { key: '8f1bce355f73fef1b81fb71025b23aa9734106a2', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'eefe6f4bcb3723e01c5b5a7b30b52eddd947de54', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: '8a2dd19323c6bb8b889b35328081d75d143a36e9', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '514875f36258918863ec6320c870fe4454d3ece2', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '586ba5819e534bc379788b45b6160e8880cff3a0', class: "helper" }, this.helper)));
     }
     static get is() { return "road-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/textarea/textarea.stories.js

@@ -11,109 +11,135 @@ export default {
   },
   argTypes: {
     disabled: {
+      description: "If `true`, the user cannot interact with the textarea.",
       control: 'boolean',
     },
     readonly: {
+      description: "If `true`, the user cannot modify the value.",
       control: 'boolean',
     },
     required: {
+      description: "If `true`, the user must fill in a value before submitting a form.",
       control: 'boolean',
     },
     autofocus: {
+      description: "This Boolean attribute lets you specify that a form control should have focus when the page loads.",
       control: 'boolean',
     },
     spellcheck: {
+      description: "If `true`, the element will have its spelling and grammar checked.",
       control: 'boolean',
     },
     resize: {
+      description: "If `false`, to disabled resize.",
       control: 'boolean',
     },
     error: {
+      description: "Error message for the field",
       control: 'text',
     },
     helper: {
+      description: "Helper message for the field",
       control: 'text',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     placeholder: {
+      description: "Instructional text that shows before the textarea has a value.",
       control: 'text',
     },
     minlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
       control: 'number',
     },
     maxlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
       control: 'number',
     },
     value: {
+      description: "The value of the textarea.",
       control: 'text',
     },
     sizes: {
+      description: "The sizes of the input.",
       options: ['lg', 'xl'],
       control: {
         type: 'select',
       },
     },
     autocapitalize: {
+      description: "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
       options: ['on', 'off'],
       control: {
         type: 'select',
       },
     },
     enterkeyhint: {
+      description: "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
       options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
       control: {
         type: 'select',
       },
     },
     inputmode: {
+      description: "A hint to the browser for which keyboard to display.\nThis attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.",
       options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
       control: {
         type: 'select',
       },
     },
     rows: {
+      description: "The number of rows of the control.",
       control: {
         type: 'number',
         min: 0,
       },
     },
     cols: {
+      description: "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
       control: {
         type: 'number',
         min: 0,
       },
     },
     'textarea-id' : {
+      description: "The id of textarea",
       control: 'text',
     },
     wrap: {
+      description: "Indicates how the control wraps text.",
       options: ['hard', 'off', 'soft'],
       control: {
         type: 'select',
       },
     },
     roadblur: {
+      description: "Emitted when the textarea loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the textarea has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,
       },
     },
     roadinput: {
+      description: "Emitted when a keyboard input occurred.",
       action: 'roadinput',
       control: {
         type: null,

package/dist/collection/components/toast/toast.js

@@ -86,7 +86,7 @@ export class Toast {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (h(Host, { key: 'df8ad5704239c2193697203241e0676657fa5522', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: 'b9de22f810cc6cb58e0b28a066be791acf319208', class: `toast toast-${this.color}` }, h("road-icon", { key: '9d332bcc62cef6b038bd0718e0fe29e0bb5e1c5e', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '103180fe8d9f9e89b677c0267e779c899c013b74', class: "toast-label" }, this.label), h("button", { key: '152b63bc4ff795a0e1144e528c8fa8a177bbb9f7', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '612cdf2ec677ef1fe22a0e1054728baae7d740c8', icon: navigationClose, size: "md" })), h("slot", { key: 'e2916bfb8cf8e0ea828ff5cafc3fa400401b6ea3', name: "progress" }))));
+        return (h(Host, { key: '1e5de437f471e4a0a4c4a328b41c39e2f84aeb87', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '1086cd53128b3312632be7e791fdb83c2b44a931', class: `toast toast-${this.color}` }, h("road-icon", { key: '053ac170976e5266f80b584943ef9fe6c440d290', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'edcbf5c89984660d5c8eb82a329d22ea941e6fdc', class: "toast-label" }, this.label), h("button", { key: '7ca0f0ee6c0166be548ff66423772dd8f74b0ecb', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'd11b87da89cf1057349214b04468e387484db3da', icon: navigationClose, size: "md" })), h("slot", { key: 'd4db3d4c547ea47bd1aab1a462b8975d8b4368d6', name: "progress" }))));
     }
     static get is() { return "road-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.stories.js

@@ -16,27 +16,33 @@ export default {
   },
   argTypes: {
     'is-open': {
+      description: "Set `open` propertie to `true` to open the toast",
       control: 'boolean',
     },
     color: {
+      description: "Set the color of the toast. e.g. info, success, warning, danger",
       options: ['info', 'success', 'warning', 'danger'],
       control: {
         type: 'radio',
       },
     },
     label: {
+      description: "Text display in the toast",
       control: 'text',
     },
     timeout: {
+      description: "How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\nuntil `close()` is called.",
       control: 'number',
       min: 0,
     },
     close: {
+      description: "Indicate when closing the toast",
       control: {
         type: null,
       },
     },
     progress: {
+      description: "the progress bar in the toast.\ncolor=\"info\" for Info\ncolor=\"success\" for success\ncolor=\"warning\" for warning\ncolor=\"danger\" for danger",
       control: 'text',
     },
   },

package/dist/collection/components/toggle/toggle.js

@@ -66,11 +66,11 @@ export class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: 'dc3a609b0330a55fc4f0a7a49afa449c11eeda50', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: 'd8f6f793ae322fc4f3c78d627858836a8ace0b1e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (h(Host, { key: 'f76fe2fde0137de06d721bfc4c39d0afb05efda7' }, h("input", { key: '6e36fab052b76e126530d985fe6466cdee577149', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '1f0da686faa51b024b4ef0fe3ff83f9216d3bbeb', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: 'b98b4de91885991c9000ae2e789aa717d2f08a4c', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '5b975533cbd7705fb47773942d43ca00f9c67777' }, h("input", { key: '2f02aaaf3815db82b246eccc65b95ff80028fef3', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '922fd52175937ca1749eac085776411c2f6b2517', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '0b7e003b92aaa2bb7f02ac19bba110d959349d84', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-toggle"; }
     static get encapsulation() { return "scoped"; }