@roadtrip/components 3.23.1 → 3.25.0

package/dist/assets/index.d.ts

@@ -0,0 +1,7 @@
+export declare const ecomobilisteBaselineFr: string
+export declare const ecomobilisteFr: string
+export declare const ecomobilisteEs: string
+export declare const ecomobilisteIt: string
+export declare const ecomobilisteInverseBaselineFr: string
+export declare const ecomobilisteInverseEs: string
+export declare const ecomobilisteInverseIt: string

package/dist/assets/index.js

@@ -0,0 +1 @@
+export const ecomobilisteBaselineFr = 'data:image/svg+xml;utf8,<svg viewBox="0 0 216 56"><path d="M8.211 8.828h199v39h-199z"/><defs><pattern id="a" width="1" height="1" patternContentUnits="objectBoundingBox"><use xlink:href="#b" transform="matrix(.00033 0 0 .0017 0 -.002)"/></pattern></defs></svg>'

package/dist/cjs/index-12592729.js

@@ -2643,6 +2643,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './road-area-code.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'road-asset.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './road-asset.cjs.entry.js')); }).then(processMod, consoleError);
         case 'road-autocomplete.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/index.cjs.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const utils = require('./utils-90ef554a.js');
 const utils$1 = require('./utils-8db00648.js');
+const utils$2 = require('./utils-5483e9fa.js');
 require('./index-12592729.js');
 
 
 
 exports.addIcons = utils.addIcons;
 exports.addIllustrations = utils$1.addIllustrations;
+exports.addAssets = utils$2.addAssets;
 
 //# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"file":"index.cjs.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.cjs.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\"],\"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\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[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\"],[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\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"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]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[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\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[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\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[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\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[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],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[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]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\"],\"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\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[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\"],[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\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"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]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[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\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[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\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[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\"]}]]],[\"road-asset.cjs\",[[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\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[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],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[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]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
 const index$1 = require('./index-fb57f684.js');
 require('./polyfill-b1fff766.js');
 
-const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--road-spacing-04) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
+const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--header-padding-vertical:var(--road-spacing-04);--icon-color:var(--road-icon);--max-height:none;display:block}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--header-padding-vertical) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
 
 const Accordion = class {
   constructor(hostRef) {

package/dist/cjs/road-accordion.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,opFAAopF;;MCiB5pF,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACEA,qBAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjGA,qBAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClHA,iBAAK,KAAK,EAAE,oBAAoB,IAC9BA,kBAAM,IAAI,EAAC,WAAW,GAAE,EACxBA,kBAAM,IAAI,EAAC,QAAQ,GAAE,EACrBA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEC,yBAAiB,GAAc,CACpE,CACE,EACVD,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,qBAAO,CACH,CACE,EACV;GACH;;;;;;","names":["h","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n  --accordion-header-border: 1px;\n  --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n  --content-padding: var(--road-spacing-04) 0 0;\n  --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n  --icon-color: var(--road-icon);\n  --max-height: none;\n\n  display: block;\n}\n\n:host(.focus-visible){\n  border: 1px solid var(--road-primary);\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n  --max-height: none;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-small);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n  background: none;\n  border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n  max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n  transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n  padding: var(--content-padding);\n  margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n  margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n  display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n  box-sizing: border-box;\n  display: block;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n  background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n  display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n  border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n  background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--header-padding);\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  cursor: pointer;\n  user-select: none;\n}\n\n.accordion-light-header {\n  position: relative;\n  padding: var(--road-spacing-04) 0;\n  font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n  font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n  position: absolute;\n  bottom: 1px;\n  width: 98.3%;\n  height: 1px;\n  content: \"\";\n  background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n  margin-left: auto;\n  color: var(--icon-color);\n  transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n  display: flex;\n  align-items: center;\n}\n\n:host(.accordion-icon-left){\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n  padding: 0 0.5rem;\n  margin: 0 1rem;\n  overflow: hidden;\n  font-size: var(--road-body-medium);\n  border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n  border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n  tag: 'road-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class Accordion {\n\n  /**\n   * Set to `true` to open the accordion and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Set to `true` to remove border the accordion and to `false` to add border it.\n   */\n   @Prop() isLight : boolean = false;\n\n   /**\n   * Set to `true` to add a border in the header and the content only for the light accordion.\n   */\n    @Prop() isLightSeparator : boolean = false;\n\n   /**\n   * Set to `true` to add the small version only for the light accordion.\n   */\n    @Prop() isSmall : boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n    const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n    const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n    const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n    const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n    return (\n      <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n        <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={accordionLightHeader}>\n            <slot name=\"icon-left\"/>\n            <slot name=\"header\"/>\n            <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n          </div>\n        </summary>\n        <div class={accordionLightContent}>\n          <slot/>\n        </div>\n      </details>\n    );\n  }\n}"],"version":3}
+{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,woFAAwoF;;MCiBhpF,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACEA,qBAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjGA,qBAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClHA,iBAAK,KAAK,EAAE,oBAAoB,IAC9BA,kBAAM,IAAI,EAAC,WAAW,GAAE,EACxBA,kBAAM,IAAI,EAAC,QAAQ,GAAE,EACrBA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEC,yBAAiB,GAAc,CACpE,CACE,EACVD,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,qBAAO,CACH,CACE,EACV;GACH;;;;;;","names":["h","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding horizontal and vertical of the accordion header\n * @prop --header-padding-vertical: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n  --accordion-header-border: 1px;\n  --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n  --content-padding: var(--road-spacing-04) 0 0;\n  --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n  --header-padding-vertical: var(--road-spacing-04);\n  --icon-color: var(--road-icon);\n  --max-height: none;\n\n  display: block;\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n  --max-height: none;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-small);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n  background: none;\n  border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n  max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n  transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n  padding: var(--content-padding);\n  margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n  margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n  display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n  box-sizing: border-box;\n  display: block;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n  background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n  display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n  border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n  background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--header-padding);\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  cursor: pointer;\n  user-select: none;\n}\n\n.accordion-light-header {\n  position: relative;\n  padding: var(--header-padding-vertical) 0;\n  font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n  font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n  position: absolute;\n  bottom: 1px;\n  width: 98.3%;\n  height: 1px;\n  content: \"\";\n  background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n  margin-left: auto;\n  color: var(--icon-color);\n  transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n  display: flex;\n  align-items: center;\n}\n\n:host(.accordion-icon-left){\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n  padding: 0 0.5rem;\n  margin: 0 1rem;\n  overflow: hidden;\n  font-size: var(--road-body-medium);\n  border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n  border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n  tag: 'road-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class Accordion {\n\n  /**\n   * Set to `true` to open the accordion and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Set to `true` to remove border the accordion and to `false` to add border it.\n   */\n   @Prop() isLight : boolean = false;\n\n   /**\n   * Set to `true` to add a border in the header and the content only for the light accordion.\n   */\n    @Prop() isLightSeparator : boolean = false;\n\n   /**\n   * Set to `true` to add the small version only for the light accordion.\n   */\n    @Prop() isSmall : boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n    const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n    const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n    const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n    const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n    return (\n      <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n        <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={accordionLightHeader}>\n            <slot name=\"icon-left\"/>\n            <slot name=\"header\"/>\n            <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n          </div>\n        </summary>\n        <div class={accordionLightContent}>\n          <slot/>\n        </div>\n      </details>\n    );\n  }\n}"],"version":3}

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

@@ -0,0 +1,167 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-12592729.js');
+const utils = require('./utils-5483e9fa.js');
+
+const validateContent = (svgContent) => {
+  const div = document.createElement('div');
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  // must only have 1 root element
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+    const svgClass = svgElm.getAttribute('class') || '';
+    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
+    // root element must be an svg
+    // lets double check we've got valid elements
+    // do not allow scripts
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return '';
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === 'script') {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const val = elm.attributes[i].value;
+      if (utils.isStr(val) && val.toLowerCase().indexOf('on') === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const roadassetContent = new Map();
+const requests = new Map();
+const getAssetSvgContent = (url, sanitize) => {
+  // see if we already have a request for this url
+  let req = requests.get(url);
+  if (!req) {
+    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+      // we don't already have a request
+      // @ts-ignore
+      req = fetch(url).then((rsp) => {
+        if (rsp.ok) {
+          return rsp.text().then((svgContent) => {
+            if (svgContent && sanitize !== false) {
+              svgContent = validateContent(svgContent);
+            }
+            roadassetContent.set(url, svgContent || '');
+          });
+        }
+        roadassetContent.set(url, '');
+      });
+      // cache for the same requests
+      requests.set(url, req);
+    }
+    else {
+      // set to empty for ssr scenarios and resolve promise
+      roadassetContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+
+const assetCss = ":host{box-sizing:content-box;contain:strict;display:table}.icon-inner{width:-moz-fit-content;width:fit-content}:host svg{display:block;width:100%;height:100%}";
+
+const Asset = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.assetSvgContent = undefined;
+    this.isVisible = false;
+    this.ariaLabel = undefined;
+    this.ariaHidden = undefined;
+    this.name = undefined;
+    this.src = undefined;
+    this.asset = undefined;
+    this.lazy = false;
+    this.sanitize = true;
+  }
+  componentWillLoad() {
+    this.waitUntilVisible(this.el, '50px', () => {
+      this.isVisible = true;
+      this.loadAsset();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, cb) {
+    if (this.lazy && window.IntersectionObserver) {
+      const io = this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          cb();
+        }
+      }, { rootMargin });
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
+    }
+  }
+  loadAsset() {
+    if (this.isVisible) {
+      const url = utils.getUrl(this);
+      if (url) {
+        if (roadassetContent.has(url)) {
+          // sync if it's already loaded
+          this.assetSvgContent = roadassetContent.get(url);
+        }
+        else {
+          // async if it hasn't been loaded
+          getAssetSvgContent(url, this.sanitize).then(() => (this.assetSvgContent = roadassetContent.get(url)));
+        }
+      }
+    }
+    if (!this.ariaLabel && this.ariaHidden !== 'true') {
+      const label = utils.getName(this.name, this.asset);
+      // user did not provide a label
+      // come up with the label based on the icon name
+      if (label) {
+        this.ariaLabel = label.replace(/-/g, ' ');
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { "aria-hidden": "true", role: "img" }, ((this.assetSvgContent !== '')
+      ? index.h("div", { class: "icon-inner", innerHTML: this.assetSvgContent })
+      : index.h("div", { class: "icon-inner" }))));
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["loadAsset"],
+    "src": ["loadAsset"],
+    "asset": ["loadAsset"]
+  }; }
+};
+Asset.style = assetCss;
+
+exports.road_asset = Asset;
+
+//# sourceMappingURL=road-asset.cjs.entry.js.map

package/dist/cjs/road-asset.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-asset.entry.cjs.js","mappings":";;;;;;;AAEO,MAAM,eAAe,GAAG,CAAC,UAAkB;EAChD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC1C,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC;;EAG3B,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;IACnD,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;MACtD,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KACpC;GACF;;EAGD,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC;EACrC,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,GAAG,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;;;;IAKhE,IAAI,OAAO,CAAC,MAAa,CAAC,EAAE;MAC1B,OAAO,GAAG,CAAC,SAAS,CAAC;KACtB;GACF;EACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEK,MAAM,OAAO,GAAG,CAAC,GAAgB;EACtC,IAAI,GAAG,CAAC,QAAQ,KAAK,CAAC,EAAE;IACtB,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE;MAC3C,OAAO,KAAK,CAAC;KACd;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MAC9C,MAAM,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MACpC,IAAIA,WAAK,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QACvD,OAAO,KAAK,CAAC;OACd;KACF;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MAC9C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAQ,CAAC,EAAE;QACtC,OAAO,KAAK,CAAC;OACd;KACF;GACF;EACD,OAAO,IAAI,CAAC;AACd,CAAC;;AC/CM,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAAkB,CAAC;AAC1D,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAwB,CAAC;AAE1C,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,QAAiB;;EAE/D,IAAI,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;EAE5B,IAAI,CAAC,GAAG,EAAE;IACR,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;;;MAGnE,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG;QACxB,IAAI,GAAG,CAAC,EAAE,EAAE;UACV,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU;YAChC,IAAI,UAAU,IAAI,QAAQ,KAAK,KAAK,EAAE;cACpC,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;aAC1C;YACD,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;WAC7C,CAAC,CAAC;SACJ;QACD,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;OAC/B,CAAC,CAAC;;MAGH,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACxB;SAAM;;MAEL,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAC9B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1B;GACF;EAED,OAAO,GAAG,CAAC;AACb,CAAC;;ACnCD,MAAM,QAAQ,GAAG,gKAAgK;;MCUpK,KAAK;;;;qBAOa,KAAK;;;;;;gBAmCV,KAAK;oBAOV,IAAI;;EAEvB,iBAAiB;IAEf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAEO,gBAAgB,CAAC,EAAwB,EAAE,UAAkB,EAAE,EAAc;IACnF,IAAI,IAAI,CAAC,IAAI,IAAK,MAAc,CAAC,oBAAoB,EAAE;MACrD,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,IAAK,MAAc,CAAC,oBAAoB,CAAC,CAAC,IAAiC;QAC9F,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;UAC1B,EAAE,CAAC,UAAU,EAAE,CAAC;UAChB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;UACpB,EAAE,EAAE,CAAC;SACN;OACF,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;MAEnB,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;KAEhB;SAAM;;;MAGL,EAAE,EAAE,CAAC;KACN;GACF;EAKD,SAAS;IACP,IAAuB,IAAI,CAAC,SAAS,EAAE;MACrC,MAAM,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAC;MACzB,IAAI,GAAG,EAAE;QACP,IAAI,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;UAE7B,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;SAClD;aAAM;;UAEL,kBAAkB,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SACvG;OACF;KACF;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;MACjD,MAAM,KAAK,GAAGC,aAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;;MAG7C,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;OAC3C;KACF;GACF;EAED,MAAM;IAEJ,QACEC,QAACC,UAAI,mBAAa,MAAM,EAAC,IAAI,EAAC,KAAK,KAE/B,CAAC,IAAI,CAAC,eAAe,KAAK,EAAE;QACxBD,iBAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,GAAQ;QAC/DA,iBAAK,KAAK,EAAC,YAAY,GAAO,EAE/B,EACP;GACH;;;;;;;;;;;;;","names":["isStr","getUrl","getName","h","Host"],"sources":["src/components/asset/validate.ts","src/components/asset/request.ts","src/components/asset/asset.css?tag=road-asset&encapsulation=shadow","src/components/asset/asset.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadassetContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getAssetSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadassetContent.set(url, svgContent || '');\n          });\n        }\n        roadassetContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadassetContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Asset\n *\n * Index\n */\n\n:host {\n  box-sizing: content-box;\n  contain: strict;\n  display: table;\n}\n\n.icon-inner{\n  width: fit-content;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getAssetSvgContent, roadassetContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-asset',\n  assetsDirs: ['svg'],\n  styleUrl: 'asset.css',\n  shadow: true,\n})\nexport class Asset {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadAssetElement;\n\n  @State() private assetSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() asset?: any;\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadAsset();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadAssetElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('asset')\n  loadAsset() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadassetContent.has(url)) {\n          // sync if it's already loaded\n          this.assetSvgContent = roadassetContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getAssetSvgContent(url, this.sanitize).then(() => (this.assetSvgContent = roadassetContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.asset);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n\n    return (\n      <Host aria-hidden=\"true\" role=\"img\">\n        {(\n          (this.assetSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.assetSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover),:host(.focus-visible),:host(:focus){box-shadow:0 0 0 4px var(--road-primary-80)}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";
+const avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover){box-shadow:0 0 0 4px var(--road-primary-80)}:host(.focus-visible),:host(:focus){outline:auto}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";
 
 const Avatar = class {
   constructor(hostRef) {

package/dist/cjs/road-avatar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,84BAA84B;;MCUn5B,MAAM;;;gBAKqC,IAAI;;EAE1D,MAAM;IAEJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGvE,QAEEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErBD,qBAAO,CACF,EAEP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * Avatar\n *\n * Index\n * - Avatar\n * - Image\n * - Badge\n */\n\n/**\n * @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n */\n\n/* AVATAR\n -------------------- */\n\n:host {\n  --avatar-background: var(--road-primary);\n  --avatar-width: 3rem;\n  --avatar-color: var(--road-grey-100-new);\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--avatar-width);\n  height: var(--avatar-width);\n  font-weight: 700;\n  color: var(--avatar-color);\n  background: var(--avatar-background);\n  border-radius: var(--avatar-width);\n  transition: box-shadow 0.5s;\n}\n\n:host(:hover),\n:host(.focus-visible),\n:host(:focus){\n  box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n\n\n:host ::slotted(road-icon) {\n  fill: var(--road-icon-inverse);\n}\n\n\n/* SIZE\n -------------------- */\n\n:host(.avatar-sm) {\n  width: 2.625rem;\n  height: 2.625rem;\n  font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n  width: 4rem;\n  height: 4rem;\n  font-size: 2.375rem;\n}\n\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n  border-radius: var(--avatar-width);\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * @slot  - Image of the avatar.\n */\n@Component({\n  tag: 'road-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class Avatar {\n\n  /**\n    * The Avatar size.\n    */\n   @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n  render() {\n\n    const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n    return (\n\n      <Host\n        class={`${sizeClass}`}\n      >\n        <slot/>\n      </Host>\n      \n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,25BAA25B;;MCUh6B,MAAM;;;gBAKqC,IAAI;;EAE1D,MAAM;IAEJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGvE,QAEEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErBD,qBAAO,CACF,EAEP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * Avatar\n *\n * Index\n * - Avatar\n * - Image\n * - Badge\n */\n\n/**\n * @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n */\n\n/* AVATAR\n -------------------- */\n\n:host {\n  --avatar-background: var(--road-primary);\n  --avatar-width: 3rem;\n  --avatar-color: var(--road-grey-100-new);\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--avatar-width);\n  height: var(--avatar-width);\n  font-weight: 700;\n  color: var(--avatar-color);\n  background: var(--avatar-background);\n  border-radius: var(--avatar-width);\n  transition: box-shadow 0.5s;\n}\n\n:host(:hover){\n  box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n:host(.focus-visible),\n:host(:focus){\n  outline: auto;\n}\n\n\n\n:host ::slotted(road-icon) {\n  fill: var(--road-icon-inverse);\n}\n\n\n/* SIZE\n -------------------- */\n\n:host(.avatar-sm) {\n  width: 2.625rem;\n  height: 2.625rem;\n  font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n  width: 4rem;\n  height: 4rem;\n  font-size: 2.375rem;\n}\n\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n  border-radius: var(--avatar-width);\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * @slot  - Image of the avatar.\n */\n@Component({\n  tag: 'road-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class Avatar {\n\n  /**\n    * The Avatar size.\n    */\n   @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n  render() {\n\n    const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n    return (\n\n      <Host\n        class={`${sizeClass}`}\n      >\n        <slot/>\n      </Host>\n      \n    );\n  }\n\n}\n"],"version":3}

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

@@ -24,7 +24,7 @@ const Badge = class {
 };
 Badge.style = badgeCss;
 
-const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant)}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host([aria-disabled].btn-outline-primary){background:none}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
+const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){text-decoration:underline;outline:auto}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant);outline:0}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host([aria-disabled].btn-outline-primary){background:none}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-tertiary-outline)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
 
 const Button = class {
   constructor(hostRef) {
@@ -103,7 +103,7 @@ const Col = class {
 };
 Col.style = colCss;
 
-const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}.test.sc-road-counter{display:none}road-button.sc-road-counter{width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
+const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
 
 const Counter = class {
   constructor(hostRef) {
@@ -202,7 +202,17 @@ const Counter = class {
     this.onValueChange(this.value);
   }
   componentDidLoad() {
-    // Cacher le label pour accessibilité
+    const buttons = this.el.querySelectorAll('road-button');
+    // Ajouter les événements pour chaque road-button
+    buttons.forEach((btn) => {
+      btn.addEventListener('touchstart', () => {
+        btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover
+      });
+      btn.addEventListener('touchend', () => {
+        btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend
+      });
+    });
+    // Accessibilité : Cacher le label
     const label = this.el.querySelector('.form-label');
     const input = this.el.querySelector('.form-control.sc-road-input');
     if (label) {
@@ -263,6 +273,8 @@ const Drawer = class {
     this.backText = undefined;
     this.drawerTitle = undefined;
     this.ariaLabel = undefined;
+    this.ariaLabelBack = undefined;
+    this.ariaLabelClose = undefined;
     this.hasCloseIcon = true;
   }
   /**
@@ -283,9 +295,22 @@ const Drawer = class {
   async back() {
     this.onBack.emit();
   }
+  // @Watch('isOpen')
+  // handleOpen(openValue: boolean) {
+  //   if(openValue === true) {
+  //     this.onOpen.emit();
+  //   } else {
+  //     this.el.addEventListener('transitionend', () => {
+  //       this.onClose.emit();
+  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
+  //     }, { once: true});
+  //   }
+  // }
   handleOpen(openValue) {
     if (openValue === true) {
       this.onOpen.emit();
+      // Focus the first button element after the drawer is opened
+      setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered
     }
     else {
       this.el.addEventListener('transitionend', () => {
@@ -294,6 +319,16 @@ const Drawer = class {
       }, { once: true });
     }
   }
+  /**
+   * Find and focus the first button element in the drawer
+   */
+  focusFirstButton() {
+    var _a;
+    const buttonElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+    if (buttonElement) {
+      buttonElement.focus(); // Focus the first button element
+    }
+  }
   /**
    * Close the dialog when press Escape key
    */
@@ -318,9 +353,11 @@ const Drawer = class {
     const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
     const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
     const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
+    const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';
+    const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';
     const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-    const backIconElement = this.hasBackIcon ? index.h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, index.h("road-icon", { icon: index$1.navigationChevron, rotate: "180" }), this.backText) : '';
-    const closeIconElement = this.hasCloseIcon ? index.h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" })) : '';
+    const backIconElement = this.hasBackIcon ? index.h("button", { type: "button", class: "drawer-action", "aria-label": `${ariaLabelBack}`, onClick: this.onClickBack }, index.h("road-icon", { icon: index$1.navigationChevron, rotate: "180" }), this.backText) : '';
+    const closeIconElement = this.hasCloseIcon ? index.h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": `${ariaLabelClose}` }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" })) : '';
     const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
     return (index.h(index.Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, index.h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, index.h("div", { class: "drawer-content" }, index.h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? index.h("h2", { class: "drawer-title" }, this.drawerTitle) : index.h("div", { class: "drawer-title" }, index.h("slot", { name: "title" })), closeIconElement), index.h("div", { class: "drawer-body" }, index.h("slot", null)), this.hasFooterContent() && (index.h("footer", { class: "drawer-footer" }, index.h("slot", { name: "footer" })))))));
   }
@@ -17696,7 +17733,7 @@ var lodash = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 }.call(_commonjsHelpers.commonjsGlobal));
 });
 
-const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.sc-road-input-h:has([disabled]) .form-label.sc-road-input{color:var(--road-on-surface-disabled)}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
+const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input,.form-control.sc-road-input:focus-visible{border-color:var(--road-input-outline-variant)}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.sc-road-input-h:has([disabled]) .form-label.sc-road-input{color:var(--road-on-surface-disabled)}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
 
 const Input = class {
   constructor(hostRef) {
@@ -17922,7 +17959,7 @@ const Row = class {
 };
 Row.style = rowCss;
 
-const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
+const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline-weak)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline-weak);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline-weak);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
 
 const Toolbar = class {
   constructor(hostRef) {