@roadtrip/components 3.46.0 → 3.47.1

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

@@ -130,7 +130,7 @@ const Col = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: 'a2621927906372b10b73caae4ddb4eca67ca3077' }));
+        return (h("slot", { key: '4cca7757a5a8749eef49d826de2e3b3bd03aa6d0' }));
     }
 };
 Col.style = RoadColStyle0;
@@ -184,9 +184,10 @@ const Counter = class {
             }
         };
         this.increase = () => {
-            this.inputElement.querySelector('input').stepUp();
-            let valueInput = parseInt(this.inputElement.querySelector('input').value);
-            if (!valueInput) {
+            const input = this.inputElement.querySelector('input');
+            input.stepUp();
+            let valueInput = parseInt(input.value);
+            if (isNaN(valueInput)) {
                 valueInput = this.min;
             }
             this.onValueChange(valueInput);
@@ -197,9 +198,10 @@ const Counter = class {
                 this.roadDustbinClick.emit();
                 return;
             }
-            this.inputElement.querySelector('input').stepDown();
-            let valueInput = parseInt(this.inputElement.querySelector('input').value);
-            if (!valueInput) {
+            const input = this.inputElement.querySelector('input');
+            input.stepDown();
+            let valueInput = parseInt(input.value);
+            if (isNaN(valueInput)) {
                 valueInput = this.min;
             }
             this.onValueChange(valueInput);
@@ -244,8 +246,8 @@ const Counter = class {
     }
     setIconsClasses(valueInput) {
         valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
-        this.leftIconClasses = valueInput <= this.min && !this.dustbin ? "disabled" : "";
-        this.rightIconClasses = this.max && valueInput >= this.max ? "disabled" : "";
+        this.leftIconClasses = this.readonly || valueInput <= this.min && !this.dustbin ? "disabled" : "";
+        this.rightIconClasses = this.readonly || this.max && valueInput >= this.max ? "disabled" : "";
     }
     componentWillLoad() {
         this.onValueChange(this.value);
@@ -296,11 +298,12 @@ const Counter = class {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (h("road-input-group", { key: '820b0cc9986dcb4e4c234f6c7046c14b3a3df095', class: this.size && `counter-${this.size}` }, h("road-button", { key: 'fab3f2d7e20855197f186f0e281d064befb95bbd', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { key: '03c83781abc87777441b607b9722bf8d4ea30e03', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: 'dd8911ac1c4b2c08ad876629962cd6b8b9531a61', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: '79bb668b3831df7ce76d1d3691f2c9ef6a3e56a8', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { key: '035e4cacd9c843fd6b08a15ea40953bee8fcaa17', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (h("road-input-group", { key: '841d49424a25f1f9a14c928b24ea9edd629651a0', class: this.size && `counter-${this.size}` }, h("road-button", { key: '902ba9dce53b2b2b050e35a885b92fb16a42c47a', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly, "data-cy": "road-decrease" }, h("road-icon", { key: 'ee45dbae5079038698d0eb8509d55138988ffe8b', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: '14e20d6aacc8562a6a3673cd381a539cfd3334ff', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: 'fb82377f50ab44d6a6f32669af93e8af30908c67', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly, "data-cy": "road-increase" }, h("road-icon", { key: 'ea4d77b9167b9b703037d82c51e2f82fc48e5f69', name: "navigation-add-more", size: this.size, role: "button" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChange"]
+        "value": ["onValueChange"],
+        "readonly": ["onValueChange"]
     }; }
 };
 let counterIds = 0;
@@ -1931,6 +1934,10 @@ const Drawer = class {
          * Footer Content state
          */
         this.hasFooterContent = false;
+        this.onFooterSlotChange = (event) => {
+            const slot = event.target;
+            this.hasFooterContent = slot.assignedElements().length > 0;
+        };
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -1970,13 +1977,15 @@ const Drawer = class {
      * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example
      */
     handleFocusTrapProp(value) {
-        var _a, _b;
-        if (value) {
-            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.unpause();
-        }
-        else {
-            (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.pause();
-        }
+        setTimeout(() => {
+            var _a, _b;
+            if (value) {
+                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.unpause();
+            }
+            else {
+                (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.pause();
+            }
+        }, 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) {
@@ -1994,9 +2003,14 @@ const Drawer = class {
             this.onOpen.emit();
             // Focus the first button element after the drawer is opened then focus trap
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 this.focusFirstElement();
-                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.activate();
+                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();
+                }
             }, 50); // Add a slight delay to ensure the element is rendered
         }
         else {
@@ -2042,9 +2056,12 @@ const Drawer = class {
                 getShadowRoot: true,
             },
         });
+        if (this.isOpen) {
+            this.handleOpen(true);
+        }
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
         const removePaddingClass = this.removePadding ? 'remove-padding' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
@@ -2055,9 +2072,7 @@ const Drawer = class {
         const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
         const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
-        const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
-        const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
-        return (h(Host, { key: '7af3b4a88f0a363c855326f7d16dd3ad61e33f77', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '8e53b924d59c397e1e00ab08fa4db306d5922add', class: "road-drawer-wrapper" }, h("div", { key: '860bc071a169c65f2e0b3887126c6107b77e37d1', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'c3fbf6f148733f1f52fcae529b1080c1dbd28840', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '0edcecc7ab673fe11a1378860396c6c6c5ee7612', class: "drawer-content" }, h("header", { key: '39b86a4cb7bfbe7ec148ca2a54b8ca2f238a8a03', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '323e24993c0c3a136e38bf4878f1b0813cfa7c25', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'd99631b6d2635dbc5e73f30c2ff1617ee198fd23' })), h("footer", { key: 'c900c6d0f86425c86e8c877e9312f294228c98e2', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '5a582bb9cb0035f35f7040d664305735f8ae933f', name: "footer" })))))));
+        return (h(Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, h("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, h("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), h("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2075,7 +2090,7 @@ const Grid = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: 'c40d139aa872024144528faafb114db1d2d8af13' }));
+        return (h("slot", { key: '481ff02c6cce323a2546465805705e98c6ad0e98' }));
     }
 };
 Grid.style = RoadGridStyle0;
@@ -19660,11 +19675,11 @@ const Input = class {
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
         const isValidClass = this.success == true ? 'is-valid' : '';
-        return (h(Host, { key: 'bd525f68b22069ef4874cef77a96a1f724b0129c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '9bae71920e835479725c6e37f0af8bc1ab93b7f5', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '6637aff56cf6623099279d43dbd780fa1004da2f', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+        return (h(Host, { key: 'be099a0ea8338c8c4ed1ad3e73b0036156410d9e', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '6bdc1d4f3648314134cd7790804430ca4292c5cd', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '38884ef3e266eece5f45a3746ab366fd5aa2810c', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
             ? // Si error est un tableau, on itère et génère un <p> pour chaque élément
                 this.error.map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))
             : // Si error est une chaîne, on la divise avec split et génère un <p> pour chaque élément
-                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: '4add98d493556fddf6502dfc16516a5aa4df9a4b', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'd519756096faac3491e26829408089e7ba94cca8', name: "checklistPassword" })));
+                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: 'eda924baf7920edab4432565e020d8f21a5f70f1', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: '52dbaeb8362e4949c48297ba32ae331143044f78', name: "checklistPassword" })));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -19708,7 +19723,7 @@ const InputGroup = class {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: '4b32d589e5f7d1c5d54595dd73953617a7a20791', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '7a1352d313a76ed8541ca98673b58c95c8859d34', class: "input-group-prepend" }, h("slot", { key: '115bd6ed661d2dc1cf17d3790c6eb028073c8eb1', name: "prepend" })), h("slot", { key: 'e4c0a81db845d7a5e49ab3732a194e644398247b' }), h("div", { key: 'ef16b078dacb7bd23b7faa26c45f816f7ce3d6b1', class: "input-group-append" }, h("slot", { key: '3dda584378d39aeb1b6f179e5f3a5466c1d338d4', name: "append" }))));
+        return (h("div", { key: '4bf7967be1d576ea1d2c2d0871da504e88d414fa', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: 'd61b7eaa8e5f95e9aba082adcef54e0cd96c6941', class: "input-group-prepend" }, h("slot", { key: '49a6f9fb20adfbc558819db64b3d4150bf4b125d', name: "prepend" })), h("slot", { key: 'e48b70e4ed7f7b52212ebb48a31a5421ac79dd0e' }), h("div", { key: '8c6ab40b303c23ab7e4a68b8bdc952e39482c930', class: "input-group-append" }, h("slot", { key: '76909512fc0ece8ee25a69716cefae2dda8ad308', name: "append" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19771,13 +19786,13 @@ const Item = class {
                 target,
             };
         const showDetail = detail !== undefined && detail;
-        return (h(Host, { key: '62e8ef9193a70f92b46e435d577e53a8f9a1611a', "aria-disabled": disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'ccd1ac1ac2751e8085ae02bb5b6b04e4778321b5', "aria-disabled": disabled ? 'true' : null, class: {
                 [`item-lines-${lines}`]: lines !== undefined,
-            } }, h(TagType, Object.assign({ key: 'e632935ddf13d5ac58008c81056624a8c0908311' }, attrs, { class: {
+            } }, h(TagType, Object.assign({ key: 'beec26f56f8ec5bd1f4b20d4fb8127d27c05f6a9' }, attrs, { class: {
                 'item-native': true,
                 'item-active': this.active,
                 [`layout-${layout}`]: layout !== undefined,
-            }, part: "native", disabled: disabled }), h("slot", { key: 'c51366e9955782f7e380557254aae4667ab2fe37', name: "start" }), h("div", { key: 'c1d40f35a45340ac616512131598989692cc903b', class: "item-inner" }, h("div", { key: '129ed3383339bb49e14f88379f3dc98875727179', class: "input-wrapper" }, h("slot", { key: '45112348bd0b31189aa597924eb0751ff24394b0' }), h("div", { key: '17962d33cebdf99f65a6dffe6e86ceed849d708f', class: "input-wrapper-info" }, h("road-label", { key: '767953cd36a88ea0a3fba4aa250440a75533cc03', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '86f97fab976f4726eb8862be80dcd5296b5b7215', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: '9dfeaa47eea39eaaed91df7e277bc6d0809eed3b', name: "end" }), showDetail && h("road-icon", { key: '553c6f5e5b5d58d47b3aad7854deb35e6b7116a7', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+            }, part: "native", disabled: disabled }), h("slot", { key: '0d1f89c92d86782deb1e88c8cea28536c233a595', name: "start" }), h("div", { key: 'a6f5e7032bb24f46a387abf47ec96d9b1c8dafba', class: "item-inner" }, h("div", { key: '0157361f18a9cc95ea60a49e7677b0fb7f8f67cb', class: "input-wrapper" }, h("slot", { key: '5aceb63fb6478d65fc9f495643c6698b62e68000' }), h("div", { key: 'b8ad344270a7f30692fe96dfc6ad2048a835cf3a', class: "input-wrapper-info" }, h("road-label", { key: '49b1e772e543af7cda1ca054586500c7ddced2c3', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '3b7dd8f10a01a91c90de9d08835af3ed55a4eecd', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: '6294b507ed5e61a75dd989400da387e0c0917368', name: "end" }), showDetail && h("road-icon", { key: '52655a6718fb66600b70c9b375f118b66092911b', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
     }
     get el() { return getElement(this); }
 };
@@ -19791,7 +19806,7 @@ const Label = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '407fbaed0a1d77ab406963598b44eecdd55fa531' }));
+        return (h("slot", { key: '7676729c25af1f6fdd2d421926efb47074382fb8' }));
     }
 };
 Label.style = RoadLabelStyle0;
@@ -19805,9 +19820,9 @@ const List = class {
     }
     render() {
         const { lines } = this;
-        return (h(Host, { key: 'b43b3c57de0d170edd667e68ebde84c88e40e3bd', class: {
+        return (h(Host, { key: '7d0cd12eaa7420a9576b3adf922f686888177d11', class: {
                 [`list-lines-${lines}`]: lines !== undefined,
-            } }, h("slot", { key: '5a71c328d62f78e83bd00d35fd3b2107d3050cec' })));
+            } }, h("slot", { key: '5efe956c54bfd4713250c6e2c0afaa7a078cb691' })));
     }
 };
 List.style = RoadListStyle0;
@@ -19820,7 +19835,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'b9735c29e64bf4dbd798811326b36efab2fe84b0' }, h("slot", { key: '33cd185fdb68387287d1099576d03340d45dc579' })));
+        return (h(Host, { key: '69fff326414139d63af822fff7704e092100924e' }, h("slot", { key: '31bacdec0c2661d6bf417dc79693f8f6e7b5276c' })));
     }
 };
 Row.style = RoadRowStyle0;
@@ -19834,7 +19849,7 @@ const Toolbar = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: 'b241b745def7b165ef5e6df90a4c976df79967a7', class: colorClass }, h("div", { key: 'b7429305780cefbc62057b3de5585505d197b4e3', class: "toolbar-container" }, h("slot", { key: 'e1095e0ccbe77021455b2b2dc50cde77f2570889', name: "start" }), h("slot", { key: '4664948325cb7a5bd0994078828457aba28ee6f7', name: "primary" }), h("div", { key: 'ab74e4d57f7abc23f85812c98de539c0b734a186', class: "toolbar-content" }, h("slot", { key: 'e79434348e852c3904ffa47856d8c091628fb59d' })), h("slot", { key: '6e7ae8afa24083b5a3b0ebb1aadcbf26c3f7b8d0', name: "secondary" }), h("slot", { key: 'e1fb505a58d79c0e3ebb6c7dbfe28ea572c4036f', name: "end" }))));
+        return (h(Host, { key: '1d4f69b6833dfd4450b9f5cdca4e00ecbba6e4c1', class: colorClass }, h("div", { key: '44bc8ae86ca2dafca7e4b5b5c55691445068f45b', class: "toolbar-container" }, h("slot", { key: 'f861b62f08a1df22de0cfa57456043fb78edf3d0', name: "start" }), h("slot", { key: 'd1f4105ff8c237d6a577d16c7db1934f9e6ee166', name: "primary" }), h("div", { key: 'a5a7885ed09b0d40ee52fde0d1ff501735677021', class: "toolbar-content" }, h("slot", { key: '25e6d4493835360bcce26f04308a84e000b01a09' })), h("slot", { key: 'f324982ed3d62bfb26c000ce47d0343a4feae90a', name: "secondary" }), h("slot", { key: 'dd1bb2b044a4614d76747472c814a43ba73e41a9', name: "end" }))));
     }
 };
 Toolbar.style = RoadToolbarStyle0;