@roadtrip/components 3.11.0 → 3.11.2

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-export { a as addIcons } from './utils-7f4988b4.js';
-export { a as addIllustrations } from './utils-ff713b72.js';
-import './index-4b484f35.js';
+export { a as addIcons } from './utils-8c28c2e1.js';
+export { a as addIllustrations } from './utils-79ac6aaf.js';
+import './index-52302079.js';
 
 //# sourceMappingURL=index.js.map

package/dist/esm/loader.js

@@ -1,35 +1,9 @@
-import { C as CSS, p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-4b484f35.js';
-export { s as setNonce } from './index-4b484f35.js';
-import './app-a8a6f02a.js';
-
-/*
- Stencil Client Patch Esm v3.4.2 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    // NOTE!! This fn cannot use async/await!
-    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-    // @ts-ignore
-    if (!(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return import(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-fa54d62f.js').then(() => {
-            if ((plt.$cssShim$ = win.__cssshim)) {
-                // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-                return plt.$cssShim$.i();
-            }
-            else {
-                // for better minification
-                return 0;
-            }
-        });
-    }
-    return promiseResolve();
-};
+import { b as bootstrapLazy } from './index-52302079.js';
+export { s as setNonce } from './index-52302079.js';
 
 const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[33,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]]],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[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]}],[1,\"road-label\"],[1,\"road-input-group\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]}]]],[\"road-duration\",[[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\",[[2,\"road-phone-number-input\",{\"countryData\":[16],\"language\":[1],\"areaLabel\":[1,\"area-label\"],\"areaValue\":[1025,\"area-value\"],\"inputLabel\":[1,\"input-label\"],\"inputValue\":[1,\"input-value\"],\"numberType\":[1,\"number-type\"],\"required\":[4],\"selectedCountry\":[32],\"phoneNumber\":[32],\"inputError\":[32],\"countryOptions\":[32]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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]}]]],[\"road-checkbox\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal\",[[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\",[[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\"]}]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]]]]],[\"road-illustration\",[[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]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]]]]],[\"road-navbar-item\",[[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\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[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\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]}]]],[\"road-segmented-button\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]}]]],[\"road-select-filter\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]}]]],[\"road-tab\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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]}]]],[\"road-toggle\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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-area-code\",[[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\":[1032],\"areaValue\":[2,\"area-value\"],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]}]]],[\"road-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
-  });
+  if (typeof window === 'undefined') return undefined;
+  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[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\"],\"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\"],[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]}],[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-label\"],[1,\"road-input-group\"],[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\",[[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\",[[2,\"road-phone-number-input\",{\"countryData\":[16],\"language\":[1],\"areaLabel\":[1,\"area-label\"],\"areaValue\":[1025,\"area-value\"],\"inputLabel\":[1,\"input-label\"],\"inputValue\":[1,\"input-value\"],\"numberType\":[1,\"number-type\"],\"required\":[4],\"selectedCountry\":[32],\"phoneNumber\":[32],\"inputError\":[32],\"countryOptions\":[32]},null,{\"language\":[\"languageChanged\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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\",[[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\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal\",[[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\",[[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\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[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-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[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\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[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\",[[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\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[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\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[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\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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-area-code\",[[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-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/esm/loader.js.map

@@ -1 +1 @@
-{"file":"loader.js","mappings":";;;;AAAA;AACA;AACA;AAGA,MAAM,QAAQ,GAAG,MAAM;AACvB;AACA;AACA;AACA,IAAI,IAAwB,EAAE,GAAG,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,EAAE;AACzF;AACA,QAAQ,OAAO,oDAAoD,wBAAe,CAAC,CAAC,IAAI,CAAC,MAAM;AAC/F,YAAY,KAAK,GAAG,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS,GAAG;AACjD;AACA,gBAAgB,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;AACzC,aAAa;AACb,iBAAiB;AACjB;AACA,gBAAgB,OAAO,CAAC,CAAC;AACzB,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,OAAO,cAAc,EAAE,CAAC;AAC5B,CAAC;;ACnBW,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC9D,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,GAAG,CAAC,CAAC;AACL;;;;","names":[],"sources":["./node_modules/@stencil/core/internal/client/patch-esm.js","@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Esm v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD } from '@stencil/core/internal/app-data';\nimport { CSS, plt, win, promiseResolve } from '@stencil/core';\nconst patchEsm = () => {\n    // NOTE!! This fn cannot use async/await!\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    // @ts-ignore\n    if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {\n        // @ts-ignore\n        return import(/* webpackChunkName: \"polyfills-css-shim\" */ './css-shim.js').then(() => {\n            if ((plt.$cssShim$ = win.__cssshim)) {\n                // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n                return plt.$cssShim$.i();\n            }\n            else {\n                // for better minification\n                return 0;\n            }\n        });\n    }\n    return promiseResolve();\n};\nexport { patchEsm };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchEsm } from '@stencil/core/internal/client/patch-esm';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n  if (typeof window === 'undefined') return Promise.resolve();\n  return patchEsm().then(() => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n  });\n};\n"],"version":3}
+{"file":"loader.js","mappings":";;;AAGY,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS,CAAC;AAEtD,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D;;;;","names":[],"sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"version":3}

package/dist/esm/polyfill-dc7c89b2.js

@@ -0,0 +1,7 @@
+// @ts-ignore
+if (window.applyFocusVisiblePolyfill == null) {
+  // @ts-ignore
+  import('./focus-visible-32bc70bb.js').then(function (n) { return n.f; });
+}
+
+//# sourceMappingURL=polyfill-dc7c89b2.js.map

package/dist/esm/polyfill-dc7c89b2.js.map

@@ -0,0 +1 @@
+{"file":"polyfill-dc7c89b2.js","mappings":"AAAA;AACA,IAAI,MAAM,CAAC,yBAAyB,IAAI,IAAI,EAAE;;EAE5C,OAAO,6BAAe,oCAAC,CAAC;","names":[],"sources":["src/utils/polyfill.ts"],"sourcesContent":["// @ts-ignore\nif (window.applyFocusVisiblePolyfill == null) {\n  // @ts-ignore\n  import('focus-visible');\n}"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-4b484f35.js';
-import { n as navigationChevron } from './index-8f45025b.js';
-import './polyfill-ab80527b.js';
+import { r as registerInstance, h } from './index-52302079.js';
+import { n as navigationChevron } from './index-891decf5.js';
+import './polyfill-dc7c89b2.js';
 
 const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 1rem 0.75rem;--content-padding:0.75rem 0 0;--header-padding:0.75rem 1rem;--icon-color:var(--road-icon);--max-height:none;display:block;margin-bottom:1rem}.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{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{padding:0.75rem 0;margin:0 1rem 0.75rem}.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-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;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)}";
 

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

@@ -1 +1 @@
-{"file":"road-accordion.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,q7EAAq7E;;MCiB77E,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,QACE,eAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjG,eAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClH,WAAK,KAAK,EAAE,oBAAoB,IAC9B,YAAM,IAAI,EAAC,WAAW,GAAE,EACxB,YAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,iBAAiB,GAAc,CACpE,CACE,EACV,WAAK,KAAK,EAAE,qBAAqB,IAC/B,eAAO,CACH,CACE,EACV;GACH;;;;;;","names":[],"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 1rem 0.75rem;\n  --content-padding: 0.75rem 0 0;\n  --header-padding: 0.75rem 1rem;\n  --icon-color: var(--road-icon);\n  --max-height: none;\n\n  display: block;\n  margin-bottom: 1rem;\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  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  padding: 0.75rem 0;\n  margin: 0 1rem 0.75rem;\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-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  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.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,q7EAAq7E;;MCiB77E,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,QACE,eAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjG,eAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClH,WAAK,KAAK,EAAE,oBAAoB,IAC9B,YAAM,IAAI,EAAC,WAAW,GAAE,EACxB,YAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,iBAAiB,GAAc,CACpE,CACE,EACV,WAAK,KAAK,EAAE,qBAAqB,IAC/B,eAAO,CACH,CACE,EACV;GACH;;;;;;","names":[],"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 1rem 0.75rem;\n  --content-padding: 0.75rem 0 0;\n  --header-padding: 0.75rem 1rem;\n  --icon-color: var(--road-icon);\n  --max-height: none;\n\n  display: block;\n  margin-bottom: 1rem;\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  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  padding: 0.75rem 0;\n  margin: 0 1rem 0.75rem;\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-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  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/esm/road-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
 
 const alertCss = ":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{padding:0.375rem 0 0;font-weight:700}.alert-link{display:block;margin:0;color:var(--road-on-surface);text-decoration:underline}.alert-description{padding:0.375rem 0;margin:0}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}";
 

package/dist/esm/road-alert.entry.js.map

@@ -1 +1 @@
-{"file":"road-alert.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mpEAAmpE;;MCcvpE,KAAK;;;iBAKgB,MAAM;;;;;;EAuBrC,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEzE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,eACG,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,SAAG,KAAK,EAAC,mBAAmB,IAC1B,eAAO,EACN,IAAI,CAAC,IAAI,IAAI,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACnF,CACA,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  padding: 0.375rem 0 0;\n  font-weight: 700;\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  padding: 0.375rem 0;\n  margin: 0;\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n   render() {\n     const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n\n     return (\n       <Host class={colorClass} role=\"alert\">\n         <div class=\"alert-icon\">\n           <slot name=\"icon\"/>\n         </div>\n         <div>\n           {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n           <p class=\"alert-description\">\n             <slot/>\n             {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n           </p>\n         </div>\n       </Host>\n     );\n   }\n}"],"version":3}
+{"file":"road-alert.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mpEAAmpE;;MCcvpE,KAAK;;;iBAKgB,MAAM;;;;;;EAuBrC,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEzE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,eACG,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,SAAG,KAAK,EAAC,mBAAmB,IAC1B,eAAO,EACN,IAAI,CAAC,IAAI,IAAI,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACnF,CACA,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  padding: 0.375rem 0 0;\n  font-weight: 700;\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  padding: 0.375rem 0;\n  margin: 0;\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n   render() {\n     const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n\n     return (\n       <Host class={colorClass} role=\"alert\">\n         <div class=\"alert-icon\">\n           <slot name=\"icon\"/>\n         </div>\n         <div>\n           {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n           <p class=\"alert-description\">\n             <slot/>\n             {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n           </p>\n         </div>\n       </Host>\n     );\n   }\n}"],"version":3}

package/dist/esm/road-area-code.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-52302079.js';
 
 const areaCodeCss = ".sc-road-area-code-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5rem;height:3.5rem}.form-select-area.sc-road-area-code{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.form-select-area.sc-road-area-code:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-area-code::-ms-expand{display:none}.form-select-area.sc-road-area-code::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-area-code:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-area-code:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-area-code:disabled,.form-select-area[readonly].sc-road-area-code{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-area-code{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-area-code:required~.form-select-area-label.sc-road-area-code::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-area-code{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-area-code-h .form-select-area-label.sc-road-area-code{top:1rem}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"date\"].sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"time\"].sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:placeholder-shown~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-area-code{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code~.invalid-feedback.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid~.invalid-feedback.sc-road-area-code{display:block}.form-select-area.sc-road-area-code option.sc-road-area-code:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-area-code::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
 
@@ -15,12 +15,8 @@ const RoadAreaCode = class {
       const select = ev.target;
       if (select) {
         this.value = select.value || '';
-        const matchedOption = this.options.find(option => option.value === this.value);
-        if (matchedOption) {
-          this.selectedValue = matchedOption.value;
-        }
+        this.selectedValue = this.getMatchedOptionValue();
       }
-      return this.selectedValue;
     };
     this.onBlur = () => {
       this.roadblur.emit();
@@ -41,8 +37,7 @@ const RoadAreaCode = class {
     this.sizes = 'lg';
     this.label = 'Country';
     this.error = undefined;
-    this.value = undefined;
-    this.areaValue = undefined;
+    this.value = '';
     this.triggerRender = 0;
   }
   valueChanged() {
@@ -52,19 +47,20 @@ const RoadAreaCode = class {
     this.roadChange.emit({
       value: this.value,
     });
-    this.selectedValue = this.value;
+    this.selectedValue = this.getMatchedOptionValue();
   }
   componentWillLoad() {
     if (!this.value && this.options.length > 0) {
       this.selectedValue = this.options[0].value;
     }
     else {
-      const matchedOption = this.options.find(option => option.value === this.value);
-      if (matchedOption) {
-        this.selectedValue = matchedOption.value;
-      }
+      this.selectedValue = this.getMatchedOptionValue();
     }
   }
+  getMatchedOptionValue() {
+    var _a, _b;
+    return (_b = (_a = this.options.find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+  }
   render() {
     const labelId = this.selectId + '-label';
     const valueId = this.selectId + '-value';

package/dist/esm/road-area-code.entry.js.map

@@ -1 +1 @@
-{"file":"road-area-code.entry.js","mappings":"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","names":[],"sources":["./src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","./src/components/area-code/area-code.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  box-shadow: none;\n  appearance: none;\n  width: 5rem;\n  height: 3.5rem;\n}\n\n/* SELECT\n  -------------------- */\n\n.form-select-area {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n  * Placeholder\n  */\n\n.form-select-area::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n  * Hover state\n  */\n\n@media (hover: hover) {\n\n  .form-select-area:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n  * Focus state\n  */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n  * Disabled state\n  */\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n  -------------------- */\n\n.form-select-area-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* Value\n  -------------------- */\n\n.form-select-area-value {\n  position: absolute;\n  top: 1.4rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n\n/* SIZES\n  -------------------- */\n\n:host(.select-xl) .form-select-area {\n  height: 3.5rem;\n  padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n  -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n\n.form-select-area option:checked::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: attr(data-content);\n}\n\n.form-select-area::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n  /**\n   * The id of select\n   */\n\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n  @State() selectedValue: string | number = '';\n\n/**\n   * List of options of the area code\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n  @Prop() required: boolean = false;\n\n  /**\n * The size of the areacode\n */\n  @Prop() size: number = 0;\n\n  /**\n * The size of the areacode\n */\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n * The label of the areacode\n */\n  @Prop() label: string = 'Country';\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * the value of the area Value.\n   */\n  @Prop() areaValue?: number;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n* Emitted when the select has focus.\n*/\n\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n* Emitted when the select loses focus.\n*/\n\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n    this.selectedValue = this.value;\n  }\n\n  /**\n   * Trigger number.\n   */\n  @Prop({ mutable: true }) triggerRender: number = 0;\n\n  componentWillLoad() {\n    if (!this.value && this.options.length > 0) {\n      this.selectedValue = this.options[0].value;\n    } else {\n      const matchedOption = this.options.find(option => option.value === this.value);\n      if (matchedOption) {\n        this.selectedValue = matchedOption.value;\n      }\n    }\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n      const matchedOption = this.options.find(option => option.value === this.value);\n      if (matchedOption) {\n        this.selectedValue = matchedOption.value;\n      }\n    }\n    return this.selectedValue;\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const valueId = this.selectId + '-value';\n\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n          class={`form-select-area has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\n          id={this.selectId}\n          aria-disabled={this.disabled ? 'true' : null}\n          autoFocus={this.autofocus}\n          disabled={this.disabled}\n          name={this.name}\n          required={this.required}\n          size={this.size}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</option>\n          ))}\n        </select>\n        <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"],"version":3}
+{"file":"road-area-code.entry.js","mappings":"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","names":[],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  box-shadow: none;\n  appearance: none;\n  width: 5rem;\n  height: 3.5rem;\n}\n\n/* SELECT\n  -------------------- */\n\n.form-select-area {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n  * Placeholder\n  */\n\n.form-select-area::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n  * Hover state\n  */\n\n@media (hover: hover) {\n\n  .form-select-area:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n  * Focus state\n  */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n  * Disabled state\n  */\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n  -------------------- */\n\n.form-select-area-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* Value\n  -------------------- */\n\n.form-select-area-value {\n  position: absolute;\n  top: 1.4rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n\n/* SIZES\n  -------------------- */\n\n:host(.select-xl) .form-select-area {\n  height: 3.5rem;\n  padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n  -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n\n.form-select-area option:checked::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: attr(data-content);\n}\n\n.form-select-area::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n  /**\n   * The id of select\n   */\n\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n  @State() selectedValue: string = '';\n\n/**\n   * List of options of the area code\n   */\n  @Prop() options: Array<{\n    value: string;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n  @Prop() required: boolean = false;\n\n  /**\n * The size of the areacode\n */\n  @Prop() size: number = 0;\n\n  /**\n * The size of the areacode\n */\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n * The label of the areacode\n */\n  @Prop() label: string = 'Country';\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n* Emitted when the select has focus.\n*/\n\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n* Emitted when the select loses focus.\n*/\n\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n    this.selectedValue = this.getMatchedOptionValue();\n  }\n\n  /**\n   * Trigger number.\n   */\n  @Prop({ mutable: true }) triggerRender: number = 0;\n\n  componentWillLoad() {\n    if (!this.value && this.options.length > 0) {\n      this.selectedValue = this.options[0].value;\n    } else {\n      this.selectedValue = this.getMatchedOptionValue();\n    }\n  }\n\n  getMatchedOptionValue() {\n    return this.options.find(option => option.value === this.value)?.value ?? '';\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n      this.selectedValue = this.getMatchedOptionValue();\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const valueId = this.selectId + '-value';\n\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n          class={`form-select-area has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\n          id={this.selectId}\n          aria-disabled={this.disabled ? 'true' : null}\n          autoFocus={this.autofocus}\n          disabled={this.disabled}\n          name={this.name}\n          required={this.required}\n          size={this.size}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</option>\n          ))}\n        </select>\n        <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"],"version":3}

package/dist/esm/road-autocomplete.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, H as Host, f as getElement } from './index-4b484f35.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
 
 const autocompleteCss = ".sc-road-autocomplete-h{position:relative;display:block}.sc-road-autocomplete-s>road-input-group,.sc-road-autocomplete-s>road-input{position:relative;z-index:2}.sc-road-autocomplete-s>road-button{position:absolute;right:0;height:100%;background-color:var(--road-surface)}.autocomplete-list.sc-road-autocomplete{position:absolute;top:3rem;z-index:1;width:100%;max-height:16rem;padding:0.5rem 0;margin:0;overflow-y:scroll;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);color:var(--road-on-surface);list-style-type:none;background:var(--road-surface);border-radius:0 0 0.25rem 0.25rem;box-shadow:var(--road-elevation-low)}.autocomplete-item.sc-road-autocomplete{padding:0.75rem 1rem;cursor:pointer}.autocomplete-item.sc-road-autocomplete:hover,.autocomplete-item.focus.sc-road-autocomplete{color:var(--road-on-primary);background:var(--road-primary)}";
 

package/dist/esm/road-autocomplete.entry.js.map

@@ -1 +1 @@
-{"file":"road-autocomplete.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,82BAA82B;;MCWz3B,YAAY;;;;;IAwCf,YAAO,GAAG,CAAC,KAAsB,EAAE,KAAa;MACrD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,GAAG,KAAK,CAAC;MAC5E,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;KACJ,CAAC;mBA/C0B,KAAK;mBAQ5B,EAAE;;EAIP,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,cAAc,CAAC,KAAiB;IAC9B,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;GACF;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,EACN,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;MACtC,UAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtC,UAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAClG,MAAM,CAAC,KAAK,CACV,CACN,CAAC,CACC,CACF,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/autocomplete/autocomplete.css?tag=road-autocomplete&encapsulation=scoped","./src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["/*\n * Autocomplete\n *\n * Index\n * - List\n * - Item\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n\n/* INPUT\n -------------------- */\n\n::slotted(road-input-group),\n::slotted(road-input) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted(road-button){\n  position: absolute;\n  right: 0;\n  height: 100%;\n  background-color: var(--road-surface);\n}\n\n/* LIST\n -------------------- */\n\n.autocomplete-list {\n  position: absolute;\n  top: 3rem;\n  z-index: 1;\n  width: 100%;\n  max-height: 16rem;\n  padding: 0.5rem 0;\n  margin: 0;\n  overflow-y: scroll;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface);\n  list-style-type: none;\n  background: var(--road-surface);\n  border-radius: 0 0 0.25rem 0.25rem;\n  box-shadow: var(--road-elevation-low);\n}\n\n/* ITEM\n -------------------- */\n\n.autocomplete-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n\n/**\n * Hover state\n */\n\n.autocomplete-item:hover,\n.autocomplete-item.focus {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n","import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-autocomplete',\n  styleUrl: 'autocomplete.css',\n  scoped: true,\n})\nexport class Autocomplete {\n\n  @Element() el!: HTMLRoadAutocompleteElement;\n\n  @State() visible: boolean = false;\n\n  /**\n   * List of autocomplete options\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.visible = true;\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.visible && !this.el.contains(event.target as Node)) {\n      this.visible = false;\n    }\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = value;\n    this.visible = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n        {this.visible && this.options.length > 0 &&\n          <ul class=\"autocomplete-list\">\n            {this.options && this.options.map(option => (\n              <li class=\"autocomplete-item\" role=\"menuitem\" onClick={() => this.onClick(option.value, option.label)}>\n                {option.label}\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-autocomplete.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,82BAA82B;;MCWz3B,YAAY;;;;;IAwCf,YAAO,GAAG,CAAC,KAAsB,EAAE,KAAa;MACrD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,GAAG,KAAK,CAAC;MAC5E,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;KACJ,CAAC;mBA/C0B,KAAK;mBAQ5B,EAAE;;EAIP,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,cAAc,CAAC,KAAiB;IAC9B,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;GACF;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAO,EACN,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;MACtC,UAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtC,UAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAClG,MAAM,CAAC,KAAK,CACV,CACN,CAAC,CACC,CACF,EACP;GACH;;;;;;;","names":[],"sources":["src/components/autocomplete/autocomplete.css?tag=road-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["/*\n * Autocomplete\n *\n * Index\n * - List\n * - Item\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n\n/* INPUT\n -------------------- */\n\n::slotted(road-input-group),\n::slotted(road-input) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted(road-button){\n  position: absolute;\n  right: 0;\n  height: 100%;\n  background-color: var(--road-surface);\n}\n\n/* LIST\n -------------------- */\n\n.autocomplete-list {\n  position: absolute;\n  top: 3rem;\n  z-index: 1;\n  width: 100%;\n  max-height: 16rem;\n  padding: 0.5rem 0;\n  margin: 0;\n  overflow-y: scroll;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface);\n  list-style-type: none;\n  background: var(--road-surface);\n  border-radius: 0 0 0.25rem 0.25rem;\n  box-shadow: var(--road-elevation-low);\n}\n\n/* ITEM\n -------------------- */\n\n.autocomplete-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n\n/**\n * Hover state\n */\n\n.autocomplete-item:hover,\n.autocomplete-item.focus {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n","import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-autocomplete',\n  styleUrl: 'autocomplete.css',\n  scoped: true,\n})\nexport class Autocomplete {\n\n  @Element() el!: HTMLRoadAutocompleteElement;\n\n  @State() visible: boolean = false;\n\n  /**\n   * List of autocomplete options\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.visible = true;\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.visible && !this.el.contains(event.target as Node)) {\n      this.visible = false;\n    }\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = value;\n    this.visible = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n        {this.visible && this.options.length > 0 &&\n          <ul class=\"autocomplete-list\">\n            {this.options && this.options.map(option => (\n              <li class=\"autocomplete-item\" role=\"menuitem\" onClick={() => this.onClick(option.value, option.label)}>\n                {option.label}\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4b484f35.js';
+import { r as registerInstance, h, H as Host } from './index-52302079.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}";
 

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

@@ -1 +1 @@
-{"file":"road-avatar.entry.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,QAEE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErB,eAAO,CACF,EAEP;GACH;;;;;;","names":[],"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.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,QAEE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErB,eAAO,CACF,EAEP;GACH;;;;;;","names":[],"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}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, e as createEvent, f as getElement } from './index-4b484f35.js';
-import './polyfill-ab80527b.js';
-import { n as navigationChevron, a as navigationClose } from './index-8f45025b.js';
-import { i as isStr, g as getUrl, b as getName } from './utils-7f4988b4.js';
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-52302079.js';
+import './polyfill-dc7c89b2.js';
+import { n as navigationChevron, a as navigationClose } from './index-891decf5.js';
+import { i as isStr, g as getUrl, b as getName } from './utils-8c28c2e1.js';
 
 const badgeCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;min-height:1rem;padding:0 0.3125rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-10);font-weight:700;white-space:nowrap;border-radius:1rem}:host(.badge-bubble){min-width:0.25rem;min-height:0.25rem;padding:0}:host(.badge-primary){color:var(--road-on-primary);background-color:var(--road-primary)}:host(.badge-secondary){color:var(--road-on-secondary);background-color:var(--road-secondary)}:host(.badge-accent){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-info){color:var(--road-on-info-surface-inverse);background-color:var(--road-info-surface-inverse)}:host(.badge-success){color:var(--road-on-success-surface-inverse);background-color:var(--road-success-surface-inverse)}:host(.badge-warning){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-danger){color:var(--road-on-danger-surface-inverse);background-color:var(--road-danger-surface-inverse)}";
 
@@ -207,9 +207,7 @@ const Counter = class {
 let counterIds = 0;
 Counter.style = counterCss;
 
-const drawerDarkCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}:host{--background:var(--road-grey-999);--color:var(--road-grey-000);--header-icon:var(--road-grey-000)}";
-
-const drawerLightCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
 
 const Drawer = class {
   constructor(hostRef) {
@@ -294,17 +292,14 @@ const Drawer = class {
     const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
     const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
     const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-    return (h(Host, { class: `drawer ${drawerIsOpenClass} drawer-${this.position}`, tabindex: "-1", role: "dialog" }, h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { class: "drawer-content" }, h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { class: "drawer-body" }, h("slot", null))))));
+    return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "-1", role: "dialog" }, h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { class: "drawer-content" }, h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { class: "drawer-body" }, h("slot", null))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "isOpen": ["handleOpen"]
   }; }
 };
-Drawer.style = {
-  dark: drawerDarkCss,
-  light: drawerLightCss
-};
+Drawer.style = drawerCss;
 
 const gridCss = ":host{box-sizing:border-box;display:block;width:100%;padding-right:8px;padding-left:8px;margin-right:auto;margin-left:auto}@media (min-width: 768px){:host{padding-right:24px;padding-left:24px}}";