@roadtrip/components 3.48.0 → 3.50.0

package/dist/roadtrip/roadtrip.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-c58abbfb",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-c0f2eca7",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-7dae0270",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
+import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-7df3bb5e",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-c0f2eca7",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-4bbe3312",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
 //# sourceMappingURL=roadtrip.esm.js.map

package/dist/types/components/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { FocusTrap } from 'focus-trap';
+import { EventEmitter } from "../../stencil-public-runtime";
+import { FocusTrap } from "focus-trap";
 /**
  * @slot  - Content of the drawer.
  * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
@@ -107,7 +107,9 @@ export declare class Drawer {
     /**
      * Find and focus the first element in the drawer
      */
-    private focusFirstElement;
+    /**
+     * Find and focus the first element in the drawer
+     */
     /**
      * Close the dialog when clicking on the cross or layer
      */
@@ -120,9 +122,7 @@ export declare class Drawer {
      * Close the dialog when press Escape key
      */
     onEscape(event: KeyboardEvent): void;
-    /**
-     * Call close function when clicking an element with data-dismiss="modal" attribute
-     */
     componentDidLoad(): void;
+    private getOrCreateFocusTrap;
     render(): any;
 }

package/hydrate/index.js

@@ -3940,7 +3940,7 @@ class ButtonBar {
     }; }
 }
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline)}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 var RoadCardStyle0 = cardCss;
 
 /**
@@ -13021,7 +13021,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-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)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .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;max-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;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-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.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;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;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;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}: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}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .road-drawer-wrapper .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.3s ease-out, visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .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;max-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;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-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.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;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;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;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}: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}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
 var RoadDrawerStyle0 = drawerCss;
 
 /**
@@ -13050,7 +13050,7 @@ class Drawer {
         /**
          * position of the drawer. e.g. left, right, bottom
          */
-        this.position = 'left';
+        this.position = "left";
         /**
          * Width of the drawer
          */
@@ -13079,6 +13079,19 @@ class Drawer {
             const slot = event.target;
             this.hasFooterContent = slot.assignedElements().length > 0;
         };
+        /**
+         * Find and focus the first element in the drawer
+         */
+        /**
+         * Find and focus the first element in the drawer
+         */
+        // private focusFirstElement() {
+        //   const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0] as HTMLElement;
+        //
+        //   if (firstElement) {
+        //     firstElement.focus();
+        //   }
+        // }
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -13128,92 +13141,70 @@ class Drawer {
             }
         }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
     }
-    // @Watch('isOpen')
-    // handleOpen(openValue: boolean) {
-    //   if(openValue === true) {
-    //     this.onOpen.emit();
-    //   } else {
-    //     this.el.addEventListener('transitionend', () => {
-    //       this.onClose.emit();
-    //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
-    //     }, { once: true});
-    //   }
-    // }
     handleOpen(openValue) {
+        var _a;
         if (openValue === true) {
             this.onOpen.emit();
-            // Focus the first button element after the drawer is opened then focus trap
-            setTimeout(() => {
-                var _a, _b, _c;
-                this.focusFirstElement();
-                if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
-                    (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
-                }
-                else {
-                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
+            this.el.addEventListener("transitionend", () => {
+                if (this.enabledFocusTrap) {
+                    this.getOrCreateFocusTrap().activate();
                 }
-            }, 50); // Add a slight delay to ensure the element is rendered
+            }, { once: true });
         }
         else {
-            this.el.addEventListener('transitionend', () => {
-                var _a;
-                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            this.el.addEventListener("transitionend", () => {
                 this.onClose.emit();
-                this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
+                this.el.shadowRoot &&
+                    (this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
             }, { once: true });
         }
     }
-    /**
-     * Find and focus the first element in the drawer
-     */
-    focusFirstElement() {
-        var _a;
-        const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
-        if (firstElement) {
-            firstElement.focus();
-        }
-    }
     /**
      * Close the dialog when press Escape key
      */
     onEscape(event) {
-        if (event.key === 'Escape' || event.key === "Esc") {
+        if (event.key === "Escape" || event.key === "Esc") {
             this.close();
         }
     }
-    /**
-     * Call close function when clicking an element with data-dismiss="modal" attribute
-     */
     componentDidLoad() {
-        var _a;
-        this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
-            item.addEventListener('click', () => this.close());
-        });
-        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
-        this.focusTrap = createFocusTrap(drawerContent, {
-            onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
-            onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
-            tabbableOptions: {
-                getShadowRoot: true,
-            },
+        this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
+            item.addEventListener("click", () => this.close());
         });
         if (this.isOpen) {
             this.handleOpen(true);
         }
     }
+    getOrCreateFocusTrap() {
+        var _a;
+        if (!this.focusTrap) {
+            const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
+            this.focusTrap = createFocusTrap(drawerContent, {
+                onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
+                onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
+                tabbableOptions: {
+                    getShadowRoot: true,
+                },
+            });
+        }
+        return this.focusTrap;
+    }
     render() {
         var _a, _b, _c;
-        const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
-        const removePaddingClass = this.removePadding ? 'remove-padding' : '';
-        const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
-        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
-        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
-        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
+        const removePaddingClass = this.removePadding ? "remove-padding" : "";
+        const inverseHeaderClass = this.hasInverseHeader
+            ? "drawer-header-inverse"
+            : "";
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : "drawer";
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : "Back";
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : "Close";
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? "drawer-delimiter" : "";
         const backIconElement = this.hasBackIcon ? (hAsync("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, hAsync("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
-        return (hAsync(Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, hAsync("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, hAsync("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), hAsync("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
+        return (hAsync(Host, { key: '183f5f34021216b6bc02239d2bbb41ec760aeb10', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: '45fcf71e912175cf2f927c59ae336c6502ba5fd2', class: "road-drawer-wrapper" }, hAsync("div", { key: '0e1b5278667c12739b65fd90949ee7ffae2f55f8', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: '77c0d8d88d3598412e215edacbf6b60a0105c065', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'abe0864e65011cf7cea8fd4fcc1d80cc1c1b85bc', class: "drawer-content" }, hAsync("header", { key: '4d50f250b74b72d0d67677eb55e2930e67112145', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '5986fd06ad1123c4a271e70b28cabdbecd39f64a', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '00021b41466eaf23e8bb63437c47bb674b4591b4' })), hAsync("footer", { key: '9f8e288d2e51f36ebadd767c833238aa35935afc', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: '96c456c682407d5dd90b31d25344df030747a09b', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -3936,7 +3936,7 @@ class ButtonBar {
     }; }
 }
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline)}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 var RoadCardStyle0 = cardCss;
 
 /**
@@ -13017,7 +13017,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-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)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .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;max-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;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-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.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;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;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;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}: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}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .road-drawer-wrapper .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.3s ease-out, visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .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;max-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;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-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.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;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;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;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}: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}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
 var RoadDrawerStyle0 = drawerCss;
 
 /**
@@ -13046,7 +13046,7 @@ class Drawer {
         /**
          * position of the drawer. e.g. left, right, bottom
          */
-        this.position = 'left';
+        this.position = "left";
         /**
          * Width of the drawer
          */
@@ -13075,6 +13075,19 @@ class Drawer {
             const slot = event.target;
             this.hasFooterContent = slot.assignedElements().length > 0;
         };
+        /**
+         * Find and focus the first element in the drawer
+         */
+        /**
+         * Find and focus the first element in the drawer
+         */
+        // private focusFirstElement() {
+        //   const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0] as HTMLElement;
+        //
+        //   if (firstElement) {
+        //     firstElement.focus();
+        //   }
+        // }
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -13124,92 +13137,70 @@ class Drawer {
             }
         }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
     }
-    // @Watch('isOpen')
-    // handleOpen(openValue: boolean) {
-    //   if(openValue === true) {
-    //     this.onOpen.emit();
-    //   } else {
-    //     this.el.addEventListener('transitionend', () => {
-    //       this.onClose.emit();
-    //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
-    //     }, { once: true});
-    //   }
-    // }
     handleOpen(openValue) {
+        var _a;
         if (openValue === true) {
             this.onOpen.emit();
-            // Focus the first button element after the drawer is opened then focus trap
-            setTimeout(() => {
-                var _a, _b, _c;
-                this.focusFirstElement();
-                if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
-                    (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
-                }
-                else {
-                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
+            this.el.addEventListener("transitionend", () => {
+                if (this.enabledFocusTrap) {
+                    this.getOrCreateFocusTrap().activate();
                 }
-            }, 50); // Add a slight delay to ensure the element is rendered
+            }, { once: true });
         }
         else {
-            this.el.addEventListener('transitionend', () => {
-                var _a;
-                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            this.el.addEventListener("transitionend", () => {
                 this.onClose.emit();
-                this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
+                this.el.shadowRoot &&
+                    (this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
             }, { once: true });
         }
     }
-    /**
-     * Find and focus the first element in the drawer
-     */
-    focusFirstElement() {
-        var _a;
-        const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
-        if (firstElement) {
-            firstElement.focus();
-        }
-    }
     /**
      * Close the dialog when press Escape key
      */
     onEscape(event) {
-        if (event.key === 'Escape' || event.key === "Esc") {
+        if (event.key === "Escape" || event.key === "Esc") {
             this.close();
         }
     }
-    /**
-     * Call close function when clicking an element with data-dismiss="modal" attribute
-     */
     componentDidLoad() {
-        var _a;
-        this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
-            item.addEventListener('click', () => this.close());
-        });
-        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
-        this.focusTrap = createFocusTrap(drawerContent, {
-            onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
-            onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
-            tabbableOptions: {
-                getShadowRoot: true,
-            },
+        this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
+            item.addEventListener("click", () => this.close());
         });
         if (this.isOpen) {
             this.handleOpen(true);
         }
     }
+    getOrCreateFocusTrap() {
+        var _a;
+        if (!this.focusTrap) {
+            const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
+            this.focusTrap = createFocusTrap(drawerContent, {
+                onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
+                onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
+                tabbableOptions: {
+                    getShadowRoot: true,
+                },
+            });
+        }
+        return this.focusTrap;
+    }
     render() {
         var _a, _b, _c;
-        const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
-        const removePaddingClass = this.removePadding ? 'remove-padding' : '';
-        const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
-        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
-        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
-        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
+        const removePaddingClass = this.removePadding ? "remove-padding" : "";
+        const inverseHeaderClass = this.hasInverseHeader
+            ? "drawer-header-inverse"
+            : "";
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : "drawer";
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : "Back";
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : "Close";
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? "drawer-delimiter" : "";
         const backIconElement = this.hasBackIcon ? (hAsync("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, hAsync("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
-        return (hAsync(Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, hAsync("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, hAsync("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), hAsync("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
+        return (hAsync(Host, { key: '183f5f34021216b6bc02239d2bbb41ec760aeb10', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: '45fcf71e912175cf2f927c59ae336c6502ba5fd2', class: "road-drawer-wrapper" }, hAsync("div", { key: '0e1b5278667c12739b65fd90949ee7ffae2f55f8', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: '77c0d8d88d3598412e215edacbf6b60a0105c065', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'abe0864e65011cf7cea8fd4fcc1d80cc1c1b85bc', class: "drawer-content" }, hAsync("header", { key: '4d50f250b74b72d0d67677eb55e2930e67112145', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '5986fd06ad1123c4a271e70b28cabdbecd39f64a', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '00021b41466eaf23e8bb63437c47bb674b4591b4' })), hAsync("footer", { key: '9f8e288d2e51f36ebadd767c833238aa35935afc', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: '96c456c682407d5dd90b31d25344df030747a09b', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.48.0",
+  "version": "3.50.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",

package/dist/roadtrip/p-7dae0270.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,H as i,a as s}from"./p-d7aae05d.js";const r=":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline)}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";const a=r;const n=class{constructor(o){t(this,o);this.roadcardclick=e(this,"roadcardclick",7);this.roadCardClick=e(this,"roadCardClick",7);this.elevation="none";this.button=false;this.selected=false;this.disabled=false;this.type="button";this.onClick=t=>{var e,o;const i=this.button&&this.href===undefined;if(i&&this.disabled){t.preventDefault();t.stopPropagation();return}this.selected=!this.selected;if(this.value!==undefined){this.roadcardclick.emit({value:this.value,label:(e=this.el.querySelector("road-label"))===null||e===void 0?void 0:e.textContent});this.roadCardClick.emit({value:this.value,label:(o=this.el.querySelector("road-label"))===null||o===void 0?void 0:o.textContent})}}}isClickable(){return this.href!==undefined||this.button}renderCard(){const t=this.isClickable();if(!t){return[o("slot",null)]}const{href:e}=this;const i=t?e===undefined?"button":"a":"div";const s=this.button&&e===undefined;const r=i==="button"?{type:this.type,disabled:s&&this.disabled,"aria-disabled":s&&this.disabled?"true":undefined}:{download:this.download,href:this.href,rel:this.rel,target:this.target};return o(i,Object.assign({},r,{class:"card-native",part:"native",onClick:this.onClick}),o("slot",null))}render(){const{elevation:t}=this;const e=this.button&&this.href===undefined;const s=this.elevation?`card-elevation-${t}`:``;const r=this.selected?"selected":"";const a=e?"is-button":"";const n=e&&this.disabled?"is-disabled":"";return o(i,{key:"44026953c66e6ee3421d5bbc03c92e60710feb94",class:`${s} ${r} ${a} ${n}`},this.renderCard())}get el(){return s(this)}};n.style=a;export{n as road_card};
-//# sourceMappingURL=p-7dae0270.entry.js.map

package/dist/roadtrip/p-7dae0270.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","RoadCardStyle0","Card","constructor","hostRef","this","elevation","button","selected","disabled","type","onClick","e","isButtonMode","href","undefined","preventDefault","stopPropagation","value","roadcardclick","emit","label","_a","el","querySelector","textContent","roadCardClick","_b","isClickable","renderCard","clickable","h","TagType","attrs","download","rel","target","Object","assign","class","part","render","elevationClass","selectedClass","isButtonClass","disabledClass","Host","key"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n  padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n  border: 1px solid var(--road-outline);\n}\n\n:host(.is-button:hover) {\n  border: 1px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n  border: 1px solid var(--road-outline);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  border: 1px solid var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n  background: none;\n}\n\n:host(.is-button.selected) {\n  border: 2px solid var(--road-primary);\n  outline: none;\n}\n\n:host(.is-button.selected:hover) {\n  border: 2px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n  border: 2px solid var(--road-outline-variant);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  outline: none;\n  background: var(--road-surface-disabled);\n  border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Host,\n} from \"@stencil/core\";\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: \"road-card\",\n  styleUrl: \"card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el!: HTMLRoadCardElement;\n\n  /**\n   * The elevation.\n   */\n  @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n   * Toggled automatically when the card is clicked (when clickable).\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * If `true`, the card is disabled and cannot be clicked.\n   * Only applies when in button mode (button=true and no href).\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return this.href !== undefined || this.button;\n  }\n\n  private onClick = (e: Event) => {\n    // If disabled in button mode, prevent all interactions\n    const isButtonMode = this.button && this.href === undefined;\n    if (isButtonMode && this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    // Toggle selected state on click for clickable cards\n    this.selected = !this.selected;\n\n    if (this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n      return [<slot />];\n    }\n    const { href } = this;\n    const TagType = clickable\n      ? href === undefined\n        ? \"button\"\n        : \"a\"\n      : (\"div\" as any);\n    const isButtonMode = this.button && href === undefined;\n    const attrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: isButtonMode && this.disabled,\n            \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n          }\n        : {\n            download: this.download,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n          };\n\n    return (\n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot />\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const isButtonMode = this.button && this.href === undefined;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n    const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n    return (\n      <Host\n        class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n      >\n        {this.renderCard()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAU,spEAChB,MAAAC,EAAeD,E,MCoBFE,EAAI,MALjB,WAAAC,CAAAC,G,oGAWUC,KAAAC,UAA4C,OAK5CD,KAAAE,OAAkB,MAWDF,KAAAG,SAAoB,MAMpBH,KAAAI,SAAoB,MAKrCJ,KAAAK,KAAsC,SA8CtCL,KAAAM,QAAWC,I,QAEjB,MAAMC,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,GAAIF,GAAgBR,KAAKI,SAAU,CACjCG,EAAEI,iBACFJ,EAAEK,kBACF,M,CAIFZ,KAAKG,UAAYH,KAAKG,SAEtB,GAAIH,KAAKa,QAAUH,UAAW,CAC5BV,KAAKc,cAAcC,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOC,EAAAjB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAF,SAAA,SAAAA,EAAEG,cAE9CpB,KAAKqB,cAAcN,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOM,EAAAtB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAG,SAAA,SAAAA,EAAEF,a,GAvB1C,WAAAG,GACN,OAAOvB,KAAKS,OAASC,WAAaV,KAAKE,M,CA2BjC,UAAAsB,GACN,MAAMC,EAAYzB,KAAKuB,cAEvB,IAAKE,EAAW,CACd,MAAO,CAACC,EAAA,a,CAEV,MAAMjB,KAAEA,GAAST,KACjB,MAAM2B,EAAUF,EACZhB,IAASC,UACP,SACA,IACD,MACL,MAAMF,EAAeR,KAAKE,QAAUO,IAASC,UAC7C,MAAMkB,EACJD,IAAY,SACR,CACEtB,KAAML,KAAKK,KACXD,SAAUI,GAAgBR,KAAKI,SAC/B,gBAAiBI,GAAgBR,KAAKI,SAAW,OAASM,WAE5D,CACEmB,SAAU7B,KAAK6B,SACfpB,KAAMT,KAAKS,KACXqB,IAAK9B,KAAK8B,IACVC,OAAQ/B,KAAK+B,QAGrB,OACEL,EAACC,EAAOK,OAAAC,OAAA,GACFL,EAAK,CACTM,MAAM,cACNC,KAAK,SACL7B,QAASN,KAAKM,UAEdoB,EAAA,a,CAKN,MAAAU,GACE,MAAMnC,UAAEA,GAAcD,KACtB,MAAMQ,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,MAAM2B,EAAiBrC,KAAKC,UAAY,kBAAkBA,IAAc,GACxE,MAAMqC,EAAgBtC,KAAKG,SAAW,WAAa,GACnD,MAAMoC,EAAgB/B,EAAe,YAAc,GACnD,MAAMgC,EAAgBhC,GAAgBR,KAAKI,SAAW,cAAgB,GACtE,OACEsB,EAACe,EAAI,CAAAC,IAAA,2CACHR,MAAO,GAAGG,KAAkBC,KAAiBC,KAAiBC,KAE7DxC,KAAKwB,a","ignoreList":[]}