npm - @roadtrip/components - Versions diffs - 3.38.2 → 3.38.3 - Mend

@roadtrip/components 3.38.2 → 3.38.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/cjs/road-toggle.cjs.entry.js +1 -1
package/dist/cjs/road-toggle.cjs.entry.js.map +1 -1
package/dist/cjs/road-toggle.entry.cjs.js.map +1 -1
package/dist/collection/components/toggle/toggle.css +1 -0
package/dist/esm/road-toggle.entry.js +1 -1
package/dist/esm/road-toggle.entry.js.map +1 -1
package/dist/roadtrip/p-17224952.entry.js +2 -0
package/dist/roadtrip/p-17224952.entry.js.map +1 -0
package/dist/roadtrip/road-toggle.entry.esm.js.map +1 -1
package/dist/roadtrip/roadtrip.esm.js +1 -1
package/hydrate/index.js +3 -3
package/hydrate/index.mjs +3 -3
package/package.json +1 -1
package/dist/roadtrip/p-e9e06591.entry.js +0 -2
package/dist/roadtrip/p-e9e06591.entry.js.map +0 -1

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

@@ -3,7 +3,7 @@
 var index = require('./index-Kxea_xqm.js');
 require('./polyfill-DOejCmiR.js');
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{content:'';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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 const toggle = class {
     constructor(hostRef) {

package/dist/cjs/road-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-toggle.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"version":3}
1	+ {"file":"road-toggle.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n content: '';\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"version":3}

package/dist/cjs/road-toggle.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"road-toggle.entry.cjs.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"road-toggle.entry.cjs.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n content: '';\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":["h","Host"],"mappings":"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"}

package/dist/collection/components/toggle/toggle.css CHANGED Viewed

@@ -138,6 +138,7 @@
 }
 .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {
+  content: '';
   transform: translateX(calc(var(--toggle-lever-width) - 2rem));
 }

package/dist/esm/road-toggle.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-DRGoRjBY.js';
 import './polyfill-6t-t9awI.js';
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{content:'';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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 const toggle = class {
     constructor(hostRef) {

package/dist/esm/road-toggle.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"road-toggle.entry.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"road-toggle.entry.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n content: '';\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,kgGAAkgG;;MCQvgG,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;AAOE;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAW,eAAe,SAAS,EAAE,EAAE;AAEvD;;AAEG;AACK,QAAA,IAAA,CAAA,IAAI,GAAW,IAAI,CAAC,QAAQ;AAEpC;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;QACK,IAAA,CAAA,KAAK,GAAW,CAAA,EAAG,IAAI,CAAC,QAAQ,QAAQ;AAEhD;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAErC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;AA0CpB,QAAA,IAAO,CAAA,OAAA,GAAG,MAAK;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC9B,SAAC;AAEO,QAAA,IAAO,CAAA,OAAA,GAAG,MAAK;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,SAAC;AAEO,QAAA,IAAM,CAAA,MAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACtB,SAAC;AAwCF;AA/DC,IAAA,cAAc,CAAC,SAAkB,EAAA;AAC/B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC;;IAiBJ,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ;AACxC,QAAA,MAAM,SAAS,GAAG,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS;AAC5G,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB;AAC3D,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE;AACrE,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;QAErD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACH,cAAA,EAAA,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,eAAA,EAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC3B,iBAAA,EAAA,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,CAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,kBAAA,EAAqB,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,kBAAA,EAAqB,gBAAgB,CAAA,CAAE,EAChD,EAAA,IAAI,CAAC,OAAO,IACb,iBAAW,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,IAAI,GAAa,KAE1F,iBAAW,IAAI,EAAC,wBAAwB,EAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,IAAI,EAAa,CAAA,CAChG,CACK,EACL,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH;;;;;;AAKb,IAAI,SAAS,GAAG,CAAC;;;;;"}

package/dist/roadtrip/p-17224952.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as o,h as r,H as t}from"./p-DRGoRjBY.js";import"./p-VfVbfSwY.js";const s='.sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{content:\'\';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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}';const a=class{constructor(r){e(this,r);this.roadchange=o(this,"roadchange",7);this.roadChange=o(this,"roadChange",7);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.toggleId=`road-toggle-${l++}`;this.name=this.toggleId;this.checked=false;this.disabled=false;this.label=`${this.toggleId}-label`;this.hasLeftLabel=false;this.isSpaced=false;this.value="on";this.onClick=()=>{this.checked=!this.checked};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadBlur.emit();this.roadblur.emit()}}checkedChanged(e){this.roadchange.emit({checked:e,value:this.value});this.roadChange.emit({checked:e,value:this.value})}render(){const e=this.toggleId+"-label";const o=r("label",{key:"da8146433e72a0e4c38d89cd50f2ef4989558500",class:"form-toggle-label",id:e,htmlFor:this.toggleId},this.label);const s=this.isSpaced&&"form-toggle-spaced";const a=this.hasLeftLabel?"form-toggle-right":"";const l=this.disabled?"disabled":"";return r(t,{key:"d936b14ef2a1a616059096240699b133be29bcd4"},r("input",{key:"7d5948cd6098c951a31442fb1e2cfc3b8589d2c1",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":e,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),r("label",{key:"4717080e6a38b326a21f0e2e5bfebab37de21663",class:`form-toggle-label ${s} ${l}`,htmlFor:this.toggleId},this.hasLeftLabel&&o,r("div",{key:"1f84a49b36dcc9b0203eba5827c045b0294030ee",class:`form-toggle-lever ${a}`},this.checked?r("road-icon",{name:"check-small-solid",class:"form-toggle-lever-check",size:"md"}):r("road-icon",{name:"navigation-close-solid",class:"form-toggle-lever-close",size:"md"})),this.hasLeftLabel?"":o))}static get watchers(){return{checked:["checkedChanged"]}}};let l=0;a.style=s;export{a as road_toggle};
2	+ //# sourceMappingURL=p-17224952.entry.js.map

package/dist/roadtrip/p-17224952.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["toggleCss","toggle","constructor","hostRef","this","toggleId","toggleIds","name","checked","disabled","label","hasLeftLabel","isSpaced","value","onClick","onFocus","roadfocus","emit","roadFocus","onBlur","roadBlur","roadblur","checkedChanged","isChecked","roadchange","roadChange","render","labelId","textLabel","h","key","class","id","htmlFor","isSpacedClass","righttoggleClass","disabledClass","Host","type","size"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n content: '';\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /**\n * The id of toggle\n */\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.toggleId;\n\n /**\n * If `true`, the toggle is checked.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * If `true`, the user cannot interact with the toggle.\n */\n @Prop() disabled = false;\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.toggleId}-label`;\n\n /**\n * If `true`, the label is at left of the toggle\n */\n @Prop() hasLeftLabel: boolean = false;\n\n /**\n * Add space between label and toggle element\n */\n @Prop() isSpaced: boolean = false;\n\n /**\n * Value the form will get\n */\n @Prop() value: string = 'on';\n\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"mappings":"iFAAA,MAAMA,EAAY,igG,MCQLC,EAAM,MALnB,WAAAC,CAAAC,G,wOAUUC,KAAAC,SAAmB,eAAeC,MAKlCF,KAAAG,KAAeH,KAAKC,SAKHD,KAAOI,QAAG,MAK3BJ,KAAQK,SAAG,MAKXL,KAAAM,MAAgB,GAAGN,KAAKC,iBAKxBD,KAAYO,aAAY,MAKxBP,KAAQQ,SAAY,MAKpBR,KAAKS,MAAW,KA0ChBT,KAAOU,QAAG,KAChBV,KAAKI,SAAWJ,KAAKI,OAAO,EAGtBJ,KAAOW,QAAG,KAChBX,KAAKY,UAAUC,OACfb,KAAKc,UAAUD,MAAM,EAGfb,KAAMe,OAAG,KACff,KAAKgB,SAASH,OACdb,KAAKiB,SAASJ,MAAM,CAyCvB,CA/DC,cAAAK,CAAeC,GACbnB,KAAKoB,WAAWP,KAAK,CACnBT,QAASe,EACTV,MAAOT,KAAKS,QAEdT,KAAKqB,WAAWR,KAAK,CACnBT,QAASe,EACTV,MAAOT,KAAKS,O,CAkBhB,MAAAa,GACE,MAAMC,EAAUvB,KAAKC,SAAW,SAChC,MAAMuB,EAAYC,EAAO,SAAAC,IAAA,2CAAAC,MAAM,oBAAoBC,GAAIL,EAASM,QAAS7B,KAAKC,UAAWD,KAAKM,OAC9F,MAAMwB,EAAgB9B,KAAKQ,UAAY,qBACvC,MAAMuB,EAAmB/B,KAAKO,aAAe,oBAAsB,GACnE,MAAMyB,EAAgBhC,KAAKK,SAAW,WAAa,GAEnD,OACEoB,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,SAAAC,IAAA,2CACEC,MAAM,oBACNO,KAAK,WACLN,GAAI5B,KAAKC,SACTE,KAAMH,KAAKG,KACXC,QAASJ,KAAKI,QACdC,SAAUL,KAAKK,SACfI,MAAOT,KAAKS,MACE,kBAAGT,KAAKI,UAAS,gBAChBJ,KAAKK,SAAW,OAAS,KACvB,kBAAAkB,EACjBb,QAASV,KAAKU,QACdC,QAASX,KAAKW,QACdI,OAAQf,KAAKe,SAEfU,EAAA,SAAAC,IAAA,2CAAOC,MAAO,qBAAqBG,KAAiBE,IAAiBH,QAAS7B,KAAKC,UAChFD,KAAKO,cAAgBiB,EACtBC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,qBAAqBI,KAC9B/B,KAAKI,QACNqB,EAAA,aAAWtB,KAAK,oBAAoBwB,MAAM,0BAA0BQ,KAAK,OAEzEV,EAAA,aAAWtB,KAAK,yBAAyBwB,MAAM,0BAA0BQ,KAAK,QAG/EnC,KAAKO,aAAe,GAAKiB,G,4DAOpC,IAAItB,EAAY,E","ignoreList":[]}

package/dist/roadtrip/road-toggle.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"road-toggle.entry.esm.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"road-toggle.entry.esm.js","sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n content: '';\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"names":[],"mappings":"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"}

package/dist/roadtrip/roadtrip.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,g as a,b as o}from"./p-DRGoRjBY.js";export{s as setNonce}from"./p-DRGoRjBY.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await a();return o(JSON.parse('[["p-bcb3a7b5",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-0f8d2e9f",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-c91ac62b",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-03830648",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-85497c31",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-6adeb69b",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-a3923f76",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-abe56e87",[[1,"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]},null,{"options":["optionsChanged"]}]]],["p-473711bf",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1]},null,{"checked":["checkedChanged"]}]]],["p-589f94ba",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-1d716e99",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-3ce8deab",[[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"]]]]],["p-9adebabd",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-c63cf208",[[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"]]]]],["p-9a8296b7",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16,"country-data"],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-a213ad16",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-6f635bb3",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-e9e06591",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-0cb16ca0",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-d7fecc35",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-fba07ee2",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-006ccb3e",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-2bed40c2",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-3bd5d32b",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-1d1d39ed",[[4,"road-carousel-item"]]],["p-9bc0fd40",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-bdcce67b",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8759e1a9",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-a5b86e38",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-7ec2df2c",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-727bbe7e",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-f3b45bcd",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-8d8d8b47",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-5b5e6e69",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-4a59564a",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-96bd72a9",[[1,"road-progress-indicator-vertical"]]],["p-47923903",[[4,"road-progress-indicator-vertical-item"]]],["p-50548c7f",[[1,"road-progress-tracker"]]],["p-badd092a",[[4,"road-progress-tracker-item"]]],["p-f8098071",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-e00f8fff",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-620e12e6",[[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]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-642aaeb9",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-f7eaf7cc",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-e63ebfd0",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-db8047f7",[[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]},null,{"value":["valueChanged"]}]]],["p-9e350801",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-7ba4bd92",[[1,"road-skeleton"]]],["p-189a516a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-dbfad609",[[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]},null,{"checked":["checkedChanged"]}]]],["p-9fde410f",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-cfa2d288",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-a0ecd888",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d8754409",[[6,"road-table"]]],["p-4d4e1282",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-759a5979",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-271b69d8",[[1,"road-text",{"color":[1]}]]],["p-356a2ca4",[[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],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-413d9ee8",[[1,"road-toolbar-title"]]],["p-f0845e60",[[1,"road-toolbar-title-page"]]],["p-654e15ca",[[1,"road-toolbar-v2"]]],["p-41cd3e74",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-34994012",[[1,"road-avatar",{"size":[513]}]]],["p-03939dc0",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-61477dc9",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]],["p-52b20e0d",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"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],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[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]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]]]'),e)}));
+import{p as e,g as a,b as o}from"./p-DRGoRjBY.js";export{s as setNonce}from"./p-DRGoRjBY.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await a();return o(JSON.parse('[["p-bcb3a7b5",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-0f8d2e9f",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-c91ac62b",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-03830648",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-85497c31",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-6adeb69b",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-a3923f76",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-abe56e87",[[1,"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]},null,{"options":["optionsChanged"]}]]],["p-473711bf",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1]},null,{"checked":["checkedChanged"]}]]],["p-589f94ba",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-1d716e99",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-3ce8deab",[[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"]]]]],["p-9adebabd",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-c63cf208",[[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"]]]]],["p-9a8296b7",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16,"country-data"],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-a213ad16",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-6f635bb3",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-17224952",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-0cb16ca0",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-d7fecc35",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-fba07ee2",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-006ccb3e",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-2bed40c2",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-3bd5d32b",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-1d1d39ed",[[4,"road-carousel-item"]]],["p-9bc0fd40",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-bdcce67b",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8759e1a9",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-a5b86e38",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-7ec2df2c",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-727bbe7e",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-f3b45bcd",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-8d8d8b47",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-5b5e6e69",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-4a59564a",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-96bd72a9",[[1,"road-progress-indicator-vertical"]]],["p-47923903",[[4,"road-progress-indicator-vertical-item"]]],["p-50548c7f",[[1,"road-progress-tracker"]]],["p-badd092a",[[4,"road-progress-tracker-item"]]],["p-f8098071",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-e00f8fff",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-620e12e6",[[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]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-642aaeb9",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-f7eaf7cc",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-e63ebfd0",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-db8047f7",[[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]},null,{"value":["valueChanged"]}]]],["p-9e350801",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-7ba4bd92",[[1,"road-skeleton"]]],["p-189a516a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-dbfad609",[[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]},null,{"checked":["checkedChanged"]}]]],["p-9fde410f",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-cfa2d288",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-a0ecd888",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d8754409",[[6,"road-table"]]],["p-4d4e1282",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-759a5979",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-271b69d8",[[1,"road-text",{"color":[1]}]]],["p-356a2ca4",[[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],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-413d9ee8",[[1,"road-toolbar-title"]]],["p-f0845e60",[[1,"road-toolbar-title-page"]]],["p-654e15ca",[[1,"road-toolbar-v2"]]],["p-41cd3e74",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-34994012",[[1,"road-avatar",{"size":[513]}]]],["p-03939dc0",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-61477dc9",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]],["p-52b20e0d",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"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],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[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]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]]]'),e)}));
 //# sourceMappingURL=roadtrip.esm.js.map

package/hydrate/index.js CHANGED Viewed

@@ -36181,7 +36181,7 @@ class Tooltip {
 }
 let tooltipIds = 0;
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{content:'';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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 class toggle {
     constructor(hostRef) {
@@ -36248,11 +36248,11 @@ class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = hAsync("label", { key: 'f7d21f96c239fb73b1d1e9ce49aee2513f585df1', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = hAsync("label", { key: 'da8146433e72a0e4c38d89cd50f2ef4989558500', 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 (hAsync(Host, { key: '8f9fc04588064ebddef22aeaad8419c3853feaee' }, hAsync("input", { key: '49d10a755e862cbfa18e61290fd2a6decba7db50', 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 }), hAsync("label", { key: 'c3075d2ea777503c3034870ae20bdf2dcd7b174b', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '0dfd0576dc1d6a87e227761c570852840da8b78c', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (hAsync(Host, { key: 'd936b14ef2a1a616059096240699b133be29bcd4' }, hAsync("input", { key: '7d5948cd6098c951a31442fb1e2cfc3b8589d2c1', 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 }), hAsync("label", { key: '4717080e6a38b326a21f0e2e5bfebab37de21663', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '1f84a49b36dcc9b0203eba5827c045b0294030ee', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/hydrate/index.mjs CHANGED Viewed

@@ -36179,7 +36179,7 @@ class Tooltip {
 }
 let tooltipIds = 0;
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{content:'';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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 class toggle {
     constructor(hostRef) {
@@ -36246,11 +36246,11 @@ class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = hAsync("label", { key: 'f7d21f96c239fb73b1d1e9ce49aee2513f585df1', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = hAsync("label", { key: 'da8146433e72a0e4c38d89cd50f2ef4989558500', 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 (hAsync(Host, { key: '8f9fc04588064ebddef22aeaad8419c3853feaee' }, hAsync("input", { key: '49d10a755e862cbfa18e61290fd2a6decba7db50', 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 }), hAsync("label", { key: 'c3075d2ea777503c3034870ae20bdf2dcd7b174b', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '0dfd0576dc1d6a87e227761c570852840da8b78c', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (hAsync(Host, { key: 'd936b14ef2a1a616059096240699b133be29bcd4' }, hAsync("input", { key: '7d5948cd6098c951a31442fb1e2cfc3b8589d2c1', 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 }), hAsync("label", { key: '4717080e6a38b326a21f0e2e5bfebab37de21663', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '1f84a49b36dcc9b0203eba5827c045b0294030ee', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.38.2",
+  "version": "3.38.3",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",

package/dist/roadtrip/p-e9e06591.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as o,h as r,H as t}from"./p-DRGoRjBY.js";import"./p-VfVbfSwY.js";const s='.sc-road-toggle-h{--toggle-lever-width:3.63rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;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-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);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-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-lever-close.sc-road-toggle{position:absolute;left:0.1rem;z-index:1;color:var(--road-on-surface-extra-weak)}.form-toggle-lever-check.sc-road-toggle{position:absolute;right:0.1rem;z-index:1;color:var(--road-success-icon)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{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{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}';const a=class{constructor(r){e(this,r);this.roadchange=o(this,"roadchange",7);this.roadChange=o(this,"roadChange",7);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.toggleId=`road-toggle-${l++}`;this.name=this.toggleId;this.checked=false;this.disabled=false;this.label=`${this.toggleId}-label`;this.hasLeftLabel=false;this.isSpaced=false;this.value="on";this.onClick=()=>{this.checked=!this.checked};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadBlur.emit();this.roadblur.emit()}}checkedChanged(e){this.roadchange.emit({checked:e,value:this.value});this.roadChange.emit({checked:e,value:this.value})}render(){const e=this.toggleId+"-label";const o=r("label",{key:"da8146433e72a0e4c38d89cd50f2ef4989558500",class:"form-toggle-label",id:e,htmlFor:this.toggleId},this.label);const s=this.isSpaced&&"form-toggle-spaced";const a=this.hasLeftLabel?"form-toggle-right":"";const l=this.disabled?"disabled":"";return r(t,{key:"d936b14ef2a1a616059096240699b133be29bcd4"},r("input",{key:"7d5948cd6098c951a31442fb1e2cfc3b8589d2c1",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":e,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),r("label",{key:"4717080e6a38b326a21f0e2e5bfebab37de21663",class:`form-toggle-label ${s} ${l}`,htmlFor:this.toggleId},this.hasLeftLabel&&o,r("div",{key:"1f84a49b36dcc9b0203eba5827c045b0294030ee",class:`form-toggle-lever ${a}`},this.checked?r("road-icon",{name:"check-small-solid",class:"form-toggle-lever-check",size:"md"}):r("road-icon",{name:"navigation-close-solid",class:"form-toggle-lever-close",size:"md"})),this.hasLeftLabel?"":o))}static get watchers(){return{checked:["checkedChanged"]}}};let l=0;a.style=s;export{a as road_toggle};
2	- //# sourceMappingURL=p-e9e06591.entry.js.map

package/dist/roadtrip/p-e9e06591.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["toggleCss","toggle","constructor","hostRef","this","toggleId","toggleIds","name","checked","disabled","label","hasLeftLabel","isSpaced","value","onClick","onFocus","roadfocus","emit","roadFocus","onBlur","roadBlur","roadblur","checkedChanged","isChecked","roadchange","roadChange","render","labelId","textLabel","h","key","class","id","htmlFor","isSpacedClass","righttoggleClass","disabledClass","Host","type","size"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n --toggle-lever-width: 3.63rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n.form-toggle-lever-close {\n position: absolute;\n left: 0.1rem;\n z-index: 1;\n color: var(--road-on-surface-extra-weak);\n}\n\n.form-toggle-lever-check {\n position: absolute;\n right: 0.1rem;\n z-index: 1;\n color: var(--road-success-icon);\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /**\n * The id of toggle\n */\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.toggleId;\n\n /**\n * If `true`, the toggle is checked.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * If `true`, the user cannot interact with the toggle.\n */\n @Prop() disabled = false;\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.toggleId}-label`;\n\n /**\n * If `true`, the label is at left of the toggle\n */\n @Prop() hasLeftLabel: boolean = false;\n\n /**\n * Add space between label and toggle element\n */\n @Prop() isSpaced: boolean = false;\n\n /**\n * Value the form will get\n */\n @Prop() value: string = 'on';\n\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`}>\n {this.checked ? (\n <road-icon name=\"check-small-solid\" class=\"form-toggle-lever-check\" size=\"md\"></road-icon>\n ) : (\n <road-icon name=\"navigation-close-solid\" class=\"form-toggle-lever-close\" size=\"md\"></road-icon>\n )}\n </div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"mappings":"iFAAA,MAAMA,EAAY,o/F,MCQLC,EAAM,MALnB,WAAAC,CAAAC,G,wOAUUC,KAAAC,SAAmB,eAAeC,MAKlCF,KAAAG,KAAeH,KAAKC,SAKHD,KAAOI,QAAG,MAK3BJ,KAAQK,SAAG,MAKXL,KAAAM,MAAgB,GAAGN,KAAKC,iBAKxBD,KAAYO,aAAY,MAKxBP,KAAQQ,SAAY,MAKpBR,KAAKS,MAAW,KA0ChBT,KAAOU,QAAG,KAChBV,KAAKI,SAAWJ,KAAKI,OAAO,EAGtBJ,KAAOW,QAAG,KAChBX,KAAKY,UAAUC,OACfb,KAAKc,UAAUD,MAAM,EAGfb,KAAMe,OAAG,KACff,KAAKgB,SAASH,OACdb,KAAKiB,SAASJ,MAAM,CAyCvB,CA/DC,cAAAK,CAAeC,GACbnB,KAAKoB,WAAWP,KAAK,CACnBT,QAASe,EACTV,MAAOT,KAAKS,QAEdT,KAAKqB,WAAWR,KAAK,CACnBT,QAASe,EACTV,MAAOT,KAAKS,O,CAkBhB,MAAAa,GACE,MAAMC,EAAUvB,KAAKC,SAAW,SAChC,MAAMuB,EAAYC,EAAO,SAAAC,IAAA,2CAAAC,MAAM,oBAAoBC,GAAIL,EAASM,QAAS7B,KAAKC,UAAWD,KAAKM,OAC9F,MAAMwB,EAAgB9B,KAAKQ,UAAY,qBACvC,MAAMuB,EAAmB/B,KAAKO,aAAe,oBAAsB,GACnE,MAAMyB,EAAgBhC,KAAKK,SAAW,WAAa,GAEnD,OACEoB,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,SAAAC,IAAA,2CACEC,MAAM,oBACNO,KAAK,WACLN,GAAI5B,KAAKC,SACTE,KAAMH,KAAKG,KACXC,QAASJ,KAAKI,QACdC,SAAUL,KAAKK,SACfI,MAAOT,KAAKS,MACE,kBAAGT,KAAKI,UAAS,gBAChBJ,KAAKK,SAAW,OAAS,KACvB,kBAAAkB,EACjBb,QAASV,KAAKU,QACdC,QAASX,KAAKW,QACdI,OAAQf,KAAKe,SAEfU,EAAA,SAAAC,IAAA,2CAAOC,MAAO,qBAAqBG,KAAiBE,IAAiBH,QAAS7B,KAAKC,UAChFD,KAAKO,cAAgBiB,EACtBC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,qBAAqBI,KAC9B/B,KAAKI,QACNqB,EAAA,aAAWtB,KAAK,oBAAoBwB,MAAM,0BAA0BQ,KAAK,OAEzEV,EAAA,aAAWtB,KAAK,yBAAyBwB,MAAM,0BAA0BQ,KAAK,QAG/EnC,KAAKO,aAAe,GAAKiB,G,4DAOpC,IAAItB,EAAY,E","ignoreList":[]}