@roadtrip/components 2.27.0 → 2.29.0

package/dist/cjs/road-textarea.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9b63596c.js');
 
-const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);color:var(--text)}.form-control.sc-road-textarea{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.625rem 1rem 0;margin:0;font-size:0.875rem;color:var(--text);background:var(--white);border:1px solid var(--border-form);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::-webkit-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::-moz-placeholder{color:var(--text-second)}.form-control.sc-road-textarea:-ms-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::-ms-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::placeholder{color:var(--text-second)}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{-webkit-transform:scale(0.7) translateY(-0.75rem);transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-moz-placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{-webkit-transform:scale(0.7) translateY(-0.75rem);transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:focus{border-color:var(--secondary);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--text-disabled);cursor:not-allowed;background:var(--background-second)}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;line-height:1.5}.form-label.sc-road-textarea{position:absolute;top:0.875rem;left:1rem;display:block;font-size:0.875rem;line-height:1.5;color:var(--text-second);pointer-events:none;-webkit-transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;-webkit-transform-origin:0 0;transform-origin:0 0}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--danger-text)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--danger)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}";
+const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-grey-900)}.form-control.sc-road-textarea{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:1rem;color:var(--road-grey-900);background:var(--road-grey-000);border:1px solid var(--road-grey-400);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::-webkit-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-textarea::-moz-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-textarea:-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-textarea::-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-textarea::placeholder{color:var(--road-grey-500);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-primary-700)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-moz-placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-primary-700);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-grey-400);cursor:not-allowed;background:var(--road-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:1rem;line-height:1.5;color:var(--road-grey-500);pointer-events:none;-webkit-transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;-webkit-transform-origin:0 0;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{-webkit-transform:scale(0.75) translateY(-0.625rem);transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:-moz-placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{-webkit-transform:scale(0.75) translateY(-0.625rem);transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--road-danger-text)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-default)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:0.875rem;color:var(--road-grey-500)}";
 
 let Textarea = class {
   constructor(hostRef) {
@@ -37,6 +37,10 @@ let Textarea = class {
      * The name of the control, which is submitted with the form data.
      */
     this.name = this.textareaId;
+    /**
+     * The sizes of the input.
+     */
+    this.sizes = 'lg';
     /**
      * If `true`, the user cannot modify the value.
      */
@@ -89,7 +93,7 @@ let Textarea = class {
     const labelId = this.textareaId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null }, index.h("textarea", { class: `form-control textarea-control ${hasValueClass} ${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 }), index.h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { class: "invalid-feedback" }, this.error)));
+    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { class: `form-control textarea-control ${hasValueClass} ${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 }), index.h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { class: "helper" }, this.helper)));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

package/dist/cjs/road-toast.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9b63596c.js');
-const index$1 = require('./index-0181f02a.js');
+const index$1 = require('./index-38dff3de.js');
 
-const toastCss = ":host{position:fixed;left:0;z-index:1;display:block;width:100%;visibility:hidden;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}:host(.toast-top){top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}:host(.toast-bottom){bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.toast-open){visibility:visible;opacity:1;-webkit-transform:none;transform:none}.toast{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;-ms-flex-align:center;align-items:center;max-width:100%;padding:1.5rem 2rem 1.5rem 3rem;margin-right:0.5rem;margin-left:0.5rem;font-family:var(--font, sans-serif);font-size:0.875rem;line-height:1.4;text-align:left}:host(.toast-top) .toast{border-radius:0 0 0.25rem 0.25rem}:host(.toast-bottom) .toast{border-radius:0.25rem 0.25rem 0 0}@media (min-width: 576px){.toast{-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;-ms-flex-pack:center;justify-content:center;max-width:83.3333%;padding:1rem 2rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--danger-contrast);background:var(--danger)}.toast-danger road-icon{color:var(--danger-contrast)}.toast-warning{color:var(--warning-contrast);background:var(--warning)}.toast-warning road-icon{color:var(--white)}.toast-success{color:var(--success-contrast);background:var(--success)}.toast-success road-icon{color:var(--success-contrast)}.toast-info{color:var(--info-contrast);background:var(--info)}.toast-info road-icon{color:var(--info-contrast)}.toast-icon{position:absolute;top:1rem;left:0.5rem}@media (min-width: 576px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;top:4px;right:4px;display:inline-block;padding:0;color:inherit;cursor:pointer;background:none;border:1px solid transparent;border-radius:4px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.toast-close:focus{border-color:var(--info);outline:none}";
+const toastCss = ":host{position:fixed;left:0;z-index:1;display:block;width:100%;visibility:hidden;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}:host(.toast-top){top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}:host(.toast-bottom){bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.toast-open){visibility:visible;opacity:1;-webkit-transform:none;transform:none}.toast{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;-ms-flex-align:center;align-items:center;max-width:100%;padding:1.5rem 2rem 1.5rem 3rem;margin-right:0.5rem;margin-left:0.5rem;font-family:var(--road-font, sans-serif);font-size:0.875rem;line-height:1.4;text-align:left}:host(.toast-top) .toast{border-radius:0 0 0.25rem 0.25rem}:host(.toast-bottom) .toast{border-radius:0.25rem 0.25rem 0 0}@media (min-width: 576px){.toast{-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;-ms-flex-pack:center;justify-content:center;max-width:83.3333%;padding:1rem 2rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-danger-contrast);background:var(--road-danger-default)}.toast-danger road-icon{color:var(--road-danger-contrast)}.toast-warning{color:var(--road-warning-contrast);background:var(--road-warning-default)}.toast-warning road-icon{color:var(--road-grey-000)}.toast-success{color:var(--road-success-contrast);background:var(--road-success-default)}.toast-success road-icon{color:var(--road-success-contrast)}.toast-info{color:var(--road-info-contrast);background:var(--road-info-default)}.toast-info road-icon{color:var(--road-info-contrast)}.toast-icon{position:absolute;top:1rem;left:0.5rem}@media (min-width: 576px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;top:4px;right:4px;display:inline-block;padding:0;color:inherit;cursor:pointer;background:none;border:1px solid transparent;border-radius:4px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.toast-close:focus{border-color:var(--road-info-default);outline:none}";
 
 let Toast = class {
   constructor(hostRef) {

package/dist/cjs/road-toggle.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9b63596c.js');
+require('./polyfill-c7a0fa22.js');
+
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:1rem;color:var(--road-grey-900)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-grey-400);border:0.125rem solid transparent;border-radius:1.125rem;-webkit-transition:background 0.2s ease-in-out;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-grey-000);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-grey-000);border-radius:50%;-webkit-box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{-ms-flex-pack:start;justify-content:flex-start}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{-webkit-transform:translateX(calc(var(--toggle-lever-width) - 2rem));transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{-webkit-box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-primary-500)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-primary-contrast)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-info-default)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-info-contrast)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-default)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-success-contrast)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-warning-default)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-warning-contrast)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-danger-default)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-danger-contrast)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+
+let toggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.roadchange = index.createEvent(this, "roadchange", 7);
+    this.roadChange = index.createEvent(this, "roadChange", 7);
+    this.roadfocus = index.createEvent(this, "roadfocus", 7);
+    this.roadFocus = index.createEvent(this, "roadFocus", 7);
+    this.roadblur = index.createEvent(this, "roadblur", 7);
+    this.roadBlur = index.createEvent(this, "roadBlur", 7);
+    /**
+     * The id of toggle
+     */
+    this.toggleId = `road-toggle-${toggleIds++}`;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.toggleId;
+    /**
+     * If `true`, the toggle is checked.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    this.disabled = false;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.toggleId}-label`;
+    /**
+     * Set the color of alert. e.g. info, success, warning, danger
+     */
+    this.color = 'secondary';
+    /**
+     * If `true`, the label is at left of the toggle
+     */
+    this.hasLeftLabel = false;
+    /**
+     * Add space between label and toggle element
+     */
+    this.isSpaced = false;
+    /**
+     * Value the form will get
+     */
+    this.value = 'on';
+    /**
+     * Text display for "`on`" state in the toggle lever
+     */
+    this.on = "yes";
+    /**
+     * Text display for "`off`" state in the toggle lever
+     */
+    this.off = "no";
+    this.onClick = () => {
+      this.checked = !this.checked;
+    };
+    this.onFocus = () => {
+      this.roadfocus.emit();
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+      this.roadblur.emit();
+    };
+  }
+  checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+    this.roadChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.toggleId + '-label';
+    const textLabel = index.h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';
+    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
+    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
+    return (index.h(index.Host, null, index.h("input", { 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 }), index.h("label", { class: `form-toggle-label ${isSpacedClass} ${colorClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+  }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
+let toggleIds = 0;
+toggle.style = toggleCss;
+
+exports.road_toggle = toggle;

package/dist/cjs/road-tooltip.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9b63596c.js');
 
-const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:max-content;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);max-width:var(--max-width);padding:0.5rem;font-family:var(--font);font-size:0.75rem;color:var(--text);text-align:center;pointer-events:none;background:var(--white);border:1px solid var(--border);border-radius:0.25rem;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);opacity:0;-webkit-transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;-webkit-transform:translateX(-50%) translateY(-70%);transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-left:-0.5rem;-webkit-transform:translateX(-94%) translateY(-55%);transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{-webkit-transform:translateX(-100%) translateY(-55%);transform:translateX(-100%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.375rem;-webkit-transform:translateX(-50%) translateY(-40%);transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;-webkit-transform:translateX(-14%) translateY(-55%);transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{-webkit-transform:translateX(0) translateY(-55%);transform:translateX(0) translateY(-55%)}";
+const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:max-content;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:0.75rem;color:var(--road-grey-900);text-align:center;pointer-events:none;background:var(--road-grey-000);border:1px solid var(--road-grey-300);border-radius:0.25rem;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);opacity:0;-webkit-transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;-webkit-transform:translateX(-50%) translateY(-70%);transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-left:-0.5rem;-webkit-transform:translateX(-94%) translateY(-55%);transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{-webkit-transform:translateX(-100%) translateY(-55%);transform:translateX(-100%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.375rem;-webkit-transform:translateX(-50%) translateY(-40%);transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;-webkit-transform:translateX(-14%) translateY(-55%);transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{-webkit-transform:translateX(0) translateY(-55%);transform:translateX(0) translateY(-55%)}";
 
 let Tooltip = class {
   constructor(hostRef) {

package/dist/cjs/roadtrip.cjs.js

@@ -83,5 +83,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["road-badge_11.cjs",[[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-duration.cjs",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter.cjs",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number.cjs",[[2,"road-plate-number",{"country":[1],"placeholder":[1],"value":[1032],"motorbike":[4]}]]],["road-accordion.cjs",[[1,"road-accordion",{"isOpen":[1028,"is-open"]}]]],["road-carousel.cjs",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-chip.cjs",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse.cjs",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog.cjs",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-modal.cjs",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-rating.cjs",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast.cjs",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"position":[1],"open":[64],"close":[64]}]]],["road-alert.cjs",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete.cjs",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar.cjs",[[1,"road-avatar"]]],["road-carousel-item.cjs",[[4,"road-carousel-item"]]],["road-checkbox.cjs",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1]}]]],["road-dropdown.cjs",[[1,"road-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-flap.cjs",[[1,"road-flap",{"color":[1]}]]],["road-img.cjs",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar.cjs",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item.cjs",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress.cjs",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio.cjs",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group.cjs",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025]}]]],["road-range.cjs",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"]}]]],["road-select.cjs",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter.cjs",[[6,"road-select-filter",{"options":[16],"parameters":[8],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton.cjs",[[1,"road-skeleton"]]],["road-spinner.cjs",[[1,"road-spinner"]]],["road-switch.cjs",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab.cjs",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar.cjs",[[1,"road-tab-bar",{"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button.cjs",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table.cjs",[[6,"road-table"]]],["road-tabs.cjs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text.cjs",[[1,"road-text",{"color":[1]}]]],["road-textarea.cjs",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1]}]]],["road-toolbar-title.cjs",[[1,"road-toolbar-title"]]],["road-tooltip.cjs",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card.cjs",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input.cjs",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[1],"value":[1032],"label":[1],"error":[1],"debounce":[2]}]]],["road-input-group.cjs",[[1,"road-input-group"]]]], options);
+  return index.bootstrapLazy([["road-badge_11.cjs",[[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-duration.cjs",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter.cjs",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number.cjs",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-accordion.cjs",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"]}]]],["road-banner.cjs",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel.cjs",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-checkbox.cjs",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip.cjs",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse.cjs",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog.cjs",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-modal.cjs",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-rating.cjs",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast.cjs",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"position":[1],"open":[64],"close":[64]}]]],["road-alert.cjs",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete.cjs",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar.cjs",[[1,"road-avatar"]]],["road-carousel-item.cjs",[[4,"road-carousel-item"]]],["road-dropdown.cjs",[[1,"road-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-flap.cjs",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-img.cjs",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar.cjs",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item.cjs",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress.cjs",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio.cjs",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group.cjs",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]}]]],["road-range.cjs",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"]}]]],["road-select.cjs",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter.cjs",[[6,"road-select-filter",{"options":[16],"parameters":[8],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton.cjs",[[1,"road-skeleton"]]],["road-spinner.cjs",[[1,"road-spinner"]]],["road-switch.cjs",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab.cjs",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar.cjs",[[1,"road-tab-bar",{"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button.cjs",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table.cjs",[[6,"road-table"]]],["road-tabs.cjs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text.cjs",[[1,"road-text",{"color":[1]}]]],["road-textarea.cjs",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle.cjs",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-toolbar-title.cjs",[[1,"road-toolbar-title"]]],["road-tooltip.cjs",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card.cjs",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input.cjs",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]}]]],["road-input-group.cjs",[[1,"road-input-group"]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "./components/autocomplete/autocomplete.js",
     "./components/avatar/avatar.js",
     "./components/badge/badge.js",
+    "./components/banner/banner.js",
     "./components/button/button.js",
     "./components/card/card.js",
     "./components/carousel/carousel.js",
@@ -50,6 +51,7 @@
     "./components/text/text.js",
     "./components/textarea/textarea.js",
     "./components/toast/toast.js",
+    "./components/toggle/toggle.js",
     "./components/toolbar/toolbar.js",
     "./components/toolbar-title/toolbar-title.js",
     "./components/tooltip/tooltip.js"

package/dist/collection/components/accordion/accordion.css

@@ -25,7 +25,7 @@
   --content-margin: 0 1rem 1rem;
   --content-padding: 1rem 0.5rem 0;
   --header-padding: 1rem 0.5rem 1rem 1rem;
-  --icon-color: var(--icon);
+  --icon-color: var(--road-grey-900);
   --max-height: 800px;
 
   display: block;
@@ -38,16 +38,20 @@
 .accordion {
   max-height: 4.25rem;
   overflow: hidden;
-  font-family: var(--font, sans-serif);
-  font-size: 0.875rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
   line-height: 1.5;
-  color: var(--text);
-  background: var(--white);
-  border: 1px solid var(--border);
+  color: var(--road-grey-900);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-300);
   border-radius: 0.25rem;
   transition: max-height 0.3s ease-in-out;
 }
 
+.accordion.accordion-light {
+  border: 0;
+}
+
 /**
  * Open state
  */
@@ -65,6 +69,15 @@
   margin: var(--content-margin);
 }
 
+.accordion-light[open] .accordion-light-content {
+  padding: 0 0.5rem 1rem;
+  margin: 0 1rem 1rem;
+}
+
+.accordion-light[open] .accordion-light-header::after {
+  display: none;
+}
+
 /* BUTTON
  -------------------- */
 
@@ -87,7 +100,7 @@
  */
 
 .accordion-trigger.focus-visible {
-  border-color: var(--info);
+  border-color: var(--road-info-default);
 }
 
 /**
@@ -95,7 +108,7 @@
  */
 
 .accordion-trigger:active {
-  background: var(--background-second);
+  background: var(--road-grey-100);
 }
 
 /**
@@ -114,6 +127,20 @@
           user-select: none;
 }
 
+.accordion-light-header {
+  position: relative;
+  font-weight: 700;
+}
+
+.accordion-light-header::after {
+  position: absolute;
+  bottom: 1px;
+  width: 98.3%;
+  height: 1px;
+  content: "";
+  background: var(--road-grey-400);
+}
+
 /**
  * Custom arrow
  */
@@ -131,5 +158,10 @@
   padding: 0 0.5rem;
   margin: 0 1rem;
   overflow: hidden;
-  border-top: var(--accordion-header-border) solid var(--border);
+  border-top: var(--accordion-header-border) solid var(--road-grey-300);
+}
+
+.accordion-light-content {
+  border-top: 0;
+  border-bottom: 1px solid var(--road-grey-400);
 }

package/dist/collection/components/accordion/accordion.js

@@ -11,6 +11,10 @@ export class Accordion {
      * Set to `true` to open the accordion and to `false` to close it.
      */
     this.isOpen = false;
+    /**
+     * Set to `true` to remove border the accordion and to `false` to add border it.
+     */
+    this.isLight = false;
     /**
      * Toggle the display when clicking header
      */
@@ -19,12 +23,15 @@ export class Accordion {
     };
   }
   render() {
-    return (h("details", { class: "accordion", open: this.isOpen },
+    const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';
+    const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';
+    const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';
+    return (h("details", { class: accordionLight, open: this.isOpen },
       h("summary", { class: "accordion-trigger", "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick },
-        h("div", { class: "accordion-header" },
+        h("div", { class: accordionLightHeader },
           h("slot", { name: "header" }),
           h("road-icon", { class: "accordion-arrow", icon: navigationChevron }))),
-      h("div", { class: "accordion-content" },
+      h("div", { class: accordionLightContent },
         h("slot", null))));
   }
   static get is() { return "road-accordion"; }
@@ -53,6 +60,24 @@ export class Accordion {
       "attribute": "is-open",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "isLight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` to remove border the accordion and to `false` to add border it."
+      },
+      "attribute": "is-light",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
 }

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

@@ -9,6 +9,9 @@ export default {
     'is-open': {
       control: 'boolean',
     },
+    'is-light': {
+      control: 'boolean',
+    },
     header: {
       control: 'text',
     },
@@ -49,7 +52,7 @@ export default {
     },
     '--icon-color': {
       table: {
-        defaultValue: { summary: 'var(--icon)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,
@@ -66,13 +69,14 @@ export default {
   },
   args: {
     'is-open': null,
+    'is-light': null,
     header: `Accordion`,
     ' ': `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`,
   },
 };
 
 const Template = (args) => html`
-<road-accordion is-open="${ifDefined(args['is-open'])}">
+<road-accordion is-open="${ifDefined(args['is-open'])}" is-light="${ifDefined(args['is-light'])}">
   <div slot="header">
     ${unsafeHTML(args.header)}
   </div>

package/dist/collection/components/alert/alert.css

@@ -16,10 +16,11 @@
   position: relative;
   display: flex;
   align-items: flex-start;
-  padding: 0.5rem;
-  font-family: var(--font, sans-serif);
-  font-size: 0.875rem;
-  line-height: 1.5;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
+  line-height: 1.25;
+  color: var(--road-grey-900);
   border: 1px solid transparent;
   border-radius: 0.25rem;
 }
@@ -38,7 +39,7 @@
  -------------------- */
 
 .alert-description {
-  padding-top: 0.375rem;
+  padding: 0.375rem 0;
   margin: 0;
 }
 
@@ -50,13 +51,12 @@
  */
 
 :host(.alert-info) {
-  color: var(--info);
-  background: var(--info-background);
-  border-color: var(--info);
+  background: var(--road-info-background);
+  border-color: var(--road-info-default);
 }
 
 :host(.alert-info) ::slotted(road-icon) {
-  color: var(--info);
+  color: var(--road-info-default);
 }
 
 /**
@@ -64,13 +64,12 @@
  */
 
 :host(.alert-success) {
-  color: var(--success-text);
-  background: var(--success-background);
-  border-color: var(--success);
+  background: var(--road-success-background);
+  border-color: var(--road-success-default);
 }
 
 :host(.alert-success) ::slotted(road-icon) {
-  color: var(--success-text);
+  color: var(--road-success-default);
 }
 
 /**
@@ -78,13 +77,12 @@
  */
 
 :host(.alert-warning) {
-  color: var(--warning-text);
-  background: var(--warning-background);
-  border-color: var(--warning);
+  background: var(--road-warning-background);
+  border-color: var(--road-warning-default);
 }
 
 :host(.alert-warning) ::slotted(road-icon) {
-  color: var(--warning);
+  color: var(--road-warning-default);
 }
 
 /**
@@ -92,11 +90,10 @@
  */
 
 :host(.alert-danger) {
-  color: var(--danger-text);
-  background: var(--danger-background);
-  border-color: var(--danger);
+  background: var(--road-danger-background);
+  border-color: var(--road-danger-default);
 }
 
 :host(.alert-danger) ::slotted(road-icon) {
-  color: var(--danger-text);
+  color: var(--road-danger-default);
 }

package/dist/collection/components/autocomplete/autocomplete.css

@@ -32,11 +32,11 @@
   padding: 0.5rem 0;
   margin: 0;
   overflow-y: scroll;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   list-style-type: none;
-  background: var(--white);
+  background: var(--road-grey-000);
   border-radius: 0 0 0.25rem 0.25rem;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
 }
@@ -55,6 +55,6 @@
 
 .autocomplete-item:hover,
 .autocomplete-item.focus {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }

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

@@ -37,6 +37,7 @@ export const Playground = (args) => html`
 Playground.args = {
   ' ': `<road-input 
     class="mb-0" 
+    sizes="xl" 
     input-id="country" 
     label="Country" 
     debounce="500"></road-input>`,
@@ -61,6 +62,7 @@ export const Example = (args) => {
     <road-autocomplete @roadselected=${event => args.roadselected(event.detail)}>
       <road-input 
         class="mb-0" 
+        sizes="xl" 
         input-id="country" 
         label="Country" 
         debounce="500" 

package/dist/collection/components/avatar/avatar.css

@@ -16,7 +16,7 @@
  -------------------- */
 
 :host {
-  --avatar-background: var(--background-second);
+  --avatar-background: var(--road-grey-100);
   --avatar-width: 3rem;
 
   position: relative;

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

@@ -10,7 +10,7 @@ export default {
     },
     '--avatar-background': {
       table: {
-        defaultValue: { summary: 'var(--background-second)' },
+        defaultValue: { summary: 'var(--road-grey-100)' },
       },
       control: {
         type: null,