@roadtrip/components 2.27.1 → 2.28.0

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],"disabled":[4],"placeholder":[1],"readonly":[4],"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"]}]]],["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]}]]],["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],"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],"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]}]]],["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],"debounce":[2]}]]],["road-input-group.cjs",[[1,"road-input-group"]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -50,6 +50,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,12 +38,12 @@
 .accordion {
   max-height: 4.25rem;
   overflow: hidden;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
   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;
 }
@@ -87,7 +87,7 @@
  */
 
 .accordion-trigger.focus-visible {
-  border-color: var(--info);
+  border-color: var(--road-info-default);
 }
 
 /**
@@ -95,7 +95,7 @@
  */
 
 .accordion-trigger:active {
-  background: var(--background-second);
+  background: var(--road-grey-100);
 }
 
 /**
@@ -131,5 +131,5 @@
   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);
 }

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

@@ -49,7 +49,7 @@ export default {
     },
     '--icon-color': {
       table: {
-        defaultValue: { summary: 'var(--icon)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,

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,

package/dist/collection/components/badge/badge.css

@@ -3,7 +3,7 @@
  *
  * Index
  * - Badge
- * - Feedback
+ * - Status
  */
 
 
@@ -17,13 +17,11 @@
   justify-content: center;
   min-width: 1rem;
   min-height: 1rem;
-  padding: 0;
-  font-family: var(--font, sans-serif);
+  padding: 0 0.3125rem;
+  font-family: var(--road-font, sans-serif);
   font-size: 0.625rem;
   font-weight: 700;
-  color: var(--secondary-contrast);
   white-space: nowrap;
-  background-color: var(--secondary);
   border-radius: 1rem;
 }
 
@@ -32,11 +30,12 @@
  */
 
 :host(.badge-bubble) {
-  min-width: 0.5rem;
-  min-height: 0.5rem;
+  min-width: 0.25rem;
+  min-height: 0.25rem;
+  padding: 0;
 }
 
-/* FEEDBACK
+/* STATUS
  -------------------- */
 
 /**
@@ -44,8 +43,8 @@
  */
 
 :host(.badge-primary) {
-  color: var(--primary-contrast);
-  background-color: var(--primary);
+  color: var(--road-primary-contrast);
+  background-color: var(--road-primary-500);
 }
 
 /**
@@ -53,8 +52,8 @@
  */
 
 :host(.badge-secondary) {
-  color: var(--secondary-contrast);
-  background-color: var(--secondary);
+  color: var(--road-primary-contrast);
+  background-color: var(--road-primary-500);
 }
 
 /**
@@ -62,8 +61,8 @@
  */
 
 :host(.badge-accent) {
-  color: var(--accent-contrast);
-  background-color: var(--accent);
+  color: var(--road-secondary-contrast);
+  background-color: var(--road-secondary-500);
 }
 
 /**
@@ -71,8 +70,8 @@
  */
 
 :host(.badge-info) {
-  color: var(--info-contrast);
-  background-color: var(--info);
+  color: var(--road-info-contrast);
+  background-color: var(--road-info-default);
 }
 
 /**
@@ -80,8 +79,8 @@
  */
 
 :host(.badge-success) {
-  color: var(--success-contrast);
-  background-color: var(--success);
+  color: var(--road-success-contrast);
+  background-color: var(--road-success-default);
 }
 
 /**
@@ -89,8 +88,8 @@
  */
 
 :host(.badge-warning) {
-  color: var(--warning-contrast);
-  background-color: var(--warning);
+  color: var(--road-warning-contrast);
+  background-color: var(--road-warning-default);
 }
 
 /**
@@ -98,6 +97,6 @@
  */
 
 :host(.badge-danger) {
-  color: var(--danger-contrast);
-  background-color: var(--danger-text);
+  color: var(--road-danger-contrast);
+  background-color: var(--road-danger-default);
 }

package/dist/collection/components/badge/badge.js

@@ -4,6 +4,10 @@ import { Component, Host, h, Prop } from '@stencil/core';
  */
 export class Badge {
   constructor() {
+    /**
+     * Color of the badge
+     */
+    this.color = 'secondary';
     /**
      * if `true` the badge will be displayed has a little bubble
      */
@@ -44,7 +48,8 @@ export class Badge {
         "text": "Color of the badge"
       },
       "attribute": "color",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'secondary'"
     },
     "bubble": {
       "type": "boolean",

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

@@ -20,6 +20,7 @@ export default {
     },
   },
   args: {
+    color: 'accent',
     bubble: null,
     ' ': `1`,
   },
@@ -28,7 +29,7 @@ export default {
 const Template = (args) => html`
 <a class="text-content d-inline-flex">
   <road-icon name="alert-notification-outline"></road-icon>
-  <sup>
+  <sup style="margin-left: -1.125rem;margin-top: 0.25rem;">
     <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
   </sup>
 </a>
@@ -38,13 +39,18 @@ export const Playground = Template.bind({});
 
 export const Notification = Template.bind({});
 Notification.args = {
-  color: 'accent',
   ' ': `10`,
 };
 
-export const Bubble = Template.bind({});
-Bubble.args = {
-  color: 'accent',
+export const Status = (args) => html`
+<a class="text-content d-inline-flex">
+  <road-icon name="people-outline"></road-icon>
+  <sup style="margin-left: -0.25rem;margin-top: 0.375rem;">
+    <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
+  </sup>
+</a>
+`;
+Status.args = {
   bubble: true,
   ' ': ``,
 };