npm - @roadtrip/components - Versions diffs - 3.37.0 → 3.38.0 - Mend

@roadtrip/components 3.37.0 → 3.38.0

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

Files changed (165) hide show

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

@@ -18225,7 +18225,7 @@ const Toolbar = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (index.h(index.Host, { key: '14cb47d9161a172ce67f0db3cb545475e82912e3', class: colorClass }, index.h("div", { key: '0286c05dd7b9c4de37c3003e9e2d122113cb5e32', class: "toolbar-container" }, index.h("slot", { key: '430608b30d431f3515890ea7ed9086f45abfe663', name: "start" }), index.h("slot", { key: '6fe654f580eeb5395311ca52ae849f12dc4ca358', name: "primary" }), index.h("div", { key: '4075c8019dd3c8a2b7d1d1227ebf573a4e80307b', class: "toolbar-content" }, index.h("slot", { key: 'f1cf78705d21db90d756806a37d5abb5cb15b61e' })), index.h("slot", { key: '25ccf0e71d1d1412d39728c25cc47fa1f0500225', name: "secondary" }), index.h("slot", { key: 'bfcf553abc8b455bedad666d9fd218e47c5c0801', name: "end" }))));
+        return (index.h(index.Host, { key: 'dce34768cc5775e3819bd44b9a53a0164f0e1a2c', class: colorClass }, index.h("div", { key: '5c8ecc9b623feacce32288e71325b87b16abd687', class: "toolbar-container" }, index.h("slot", { key: '5975b6a723dc4f48ae2150c5e8a344759f548885', name: "start" }), index.h("slot", { key: '2ac9ee0ce36cf9b6d685a9ecf6a77036b0b57c75', name: "primary" }), index.h("div", { key: 'af93cd350b853d5769f795906442273a91137b1c', class: "toolbar-content" }, index.h("slot", { key: '4eaeff6528ac5082683478b4197f00b9c6c25331' })), index.h("slot", { key: '640e0d82dfb515af2c5db5dd24788467c264031e', name: "secondary" }), index.h("slot", { key: 'e8485cc43749e335f9d480528a2da0b4016ba0b4', name: "end" }))));
     }
 };
 Toolbar.style = toolbarCss;

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

@@ -17,6 +17,10 @@ const Dialog = class {
          * Show / hide the close icon
          */
         this.hasCloseIcon = true;
+        /**
+         * Set the color of information dialog. e.g. info, success, warning, danger
+         */
+        this.color = 'info';
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -83,11 +87,11 @@ const Dialog = class {
                     break;
             }
         }
-        return (index.h(index.Host, { key: '585f4f16ab43fe79d33c999683203e6d10e3ffa5', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, index.h("div", { key: 'b7e2a84719b84a5feb0cac721dd20b5007175f26', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), index.h("div", { key: '1da28c734c66f5661764b7984c8883b4b2f24473', class: "dialog-modal", role: "document", tabindex: "0" }, index.h("div", { key: '0fbdc11f8fa43fc52571a423b12486a22745b2bc', class: "dialog-content" }, index.h("header", { key: '6c00560182da0c434ecfe2897cebd91f715a937e', class: "dialog-header" }, this.hasCloseIcon
+        return (index.h(index.Host, { key: '290c0636b8ef1edfd35e4273b16e9ac05bb088c7', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, index.h("div", { key: 'e150afc757aaa616abba21261f5fc4e7a7035cdc', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), index.h("div", { key: '30dcf17bb1765dd295f9b5b38a18441b922ea6f2', class: "dialog-modal", role: "document", tabindex: "0" }, index.h("div", { key: 'a0ffb5263da02b6677f5ca4410601bed109fa524', class: "dialog-content" }, index.h("header", { key: 'f37da11d3b3b70fb4c7ee83bec7a289607ef4217', class: "dialog-header" }, this.hasCloseIcon
             ? index.h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" }))
-            : ''), index.h("div", { key: '1ae3985cdec1c5fb457744801871fc84df6d015f', class: "dialog-body" }, this.color !== undefined
+            : ''), index.h("div", { key: '9194a50bc0595a94170864de94f1ff1716693ee5', class: "dialog-body" }, this.color !== undefined
             ? index.h("road-icon", { class: "dialog-icon", part: "dialog-icon", color: this.color, icon: icon, "aria-hidden": "true" })
-            : '', index.h("h2", { key: 'c24ea765e3e64ae26ccc3eb0908b0efc63da5884', class: "dialog-title" }, this.label), index.h("p", { key: '754a7efb432ab20511326ceea3d0b9fe91860ea2', class: "dialog-description", id: "dialogDesc" }, this.description)), index.h("footer", { key: '240048df6011880999f5981269b35b8bdb64c555', class: "dialog-footer" }, index.h("slot", { key: '3a1edc953449d6c3df50e766a3fa06d7326e9062' }))))));
+            : '', index.h("h2", { key: 'cceab62ea959bd00196b3a1953c7f99495aa1d8a', class: "dialog-title" }, this.label), index.h("p", { key: '147c9dec3808c463a363cd30fb2ab5b26818c8d8', class: "dialog-description", id: "dialogDesc" }, this.description)), index.h("footer", { key: '8fc28a19c581eef87c45aae031902e27aeb9dc59', class: "dialog-footer" }, index.h("slot", { key: '5245e5168dcc7011f534d2c2901207ad0f08a617' }))))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"road-dialog.entry.cjs.js","mappings":"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","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n Dialog\n \n Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n /\n\n/\n @prop --z-index: The z-index of the Dialog.\n /\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/ OVERLAY\n -------------------- /\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/ DIALOG\n -------------------- /\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/\n Open state\n /\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/ CONTENT\n -------------------- /\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/ HEADER\n -------------------- /\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/ CLOSE\n -------------------- /\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/ BODY\n -------------------- /\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/ TITLE\n -------------------- /\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/ DESCRIPTION\n -------------------- /\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/ FOOTER\n -------------------- /\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/\n Footer buttons\n /\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors;\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /\n Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-dialog.entry.cjs.js","mappings":"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","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n Dialog\n \n Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n /\n\n/\n @prop --z-index: The z-index of the Dialog.\n /\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/ OVERLAY\n -------------------- /\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/ DIALOG\n -------------------- /\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/\n Open state\n /\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/ CONTENT\n -------------------- /\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/ HEADER\n -------------------- /\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/ CLOSE\n -------------------- /\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/ BODY\n -------------------- /\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/ TITLE\n -------------------- /\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/ DESCRIPTION\n -------------------- /\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/ FOOTER\n -------------------- /\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/\n Footer buttons\n /\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors = 'info';\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /\n Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"road-dialog.entry.cjs.js","sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n Dialog\n \n Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n /\n\n/\n @prop --z-index: The z-index of the Dialog.\n /\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/ OVERLAY\n -------------------- /\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/ DIALOG\n -------------------- /\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/\n Open state\n /\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/ CONTENT\n -------------------- /\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/ HEADER\n -------------------- /\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/ CLOSE\n -------------------- /\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/ BODY\n -------------------- /\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/ TITLE\n -------------------- /\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/ DESCRIPTION\n -------------------- /\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/ FOOTER\n -------------------- /\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/\n Footer buttons\n /\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors;\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /\n Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"mappings":"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"}
1	+ {"version":3,"file":"road-dialog.entry.cjs.js","sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n Dialog\n \n Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n /\n\n/\n @prop --z-index: The z-index of the Dialog.\n /\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/ OVERLAY\n -------------------- /\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/ DIALOG\n -------------------- /\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/\n Open state\n /\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/ CONTENT\n -------------------- /\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/ HEADER\n -------------------- /\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/ CLOSE\n -------------------- /\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/ BODY\n -------------------- /\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/ TITLE\n -------------------- /\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/ DESCRIPTION\n -------------------- /\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/ FOOTER\n -------------------- /\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/\n Footer buttons\n /\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors = 'info';\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /\n Close the dialog when clicking on the cross or layer\n /\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /\n Close the dialog when press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /\n Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,y+DAAy+D;;MCe9+D,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAYE;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,IAAI;AAEpC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAoB,MAAM;AAyCvC;;AAEG;AACK,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAW,KAAI;YAChC,EAAE,CAAC,eAAe,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;YAEnB,IAAI,CAAC,KAAK,EAAE;AACd,SAAC;AA0EF;AArGC;;AAEG;AAEH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;AAGpB;;AAEG;AAEH,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QACnB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAK;AAC7C,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;;AAanB;;AAEG;AAEH,IAAA,QAAQ,CAAC,KAAoB,EAAA;QAC3B,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;YACvF,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AAChE,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AACpD,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,EAAE;AACzD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,GAAG,kBAAkB,GAAG,EAAE;AAEjE,QAAA,IAAI,IAAI;AAER,QAAA,IAAG,IAAI,CAAC,IAAI,EAAE;AACZ,YAAA,IAAI,GAAG,IAAI,CAAC,IAAI;;aACX;AACL,YAAA,QAAO,IAAI,CAAC,KAAK;AACjB,gBAAA,KAAK,MAAM;oBACT,IAAI,GAAGA,wBAAgB;oBACvB;AACF,gBAAA,KAAK,SAAS;oBACZ,IAAI,GAAGC,2BAAmB;oBAC1B;AACF,gBAAA,KAAK,SAAS;oBACZ,IAAI,GAAGC,2BAAmB;oBAC1B;AACF,gBAAA,KAAK,QAAQ;oBACX,IAAI,GAAGC,0BAAkB;oBACzB;AACF,gBAAA;oBACE,IAAI,GAAGH,wBAAgB;oBACvB;;;AAIJ,QAAA,QACEI,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,CAAU,OAAA,EAAA,gBAAgB,CAAI,CAAA,EAAA,aAAa,CAAE,CAAA,EAAE,IAAI,EAAC,aAAa,EAAY,YAAA,EAAA,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,YAAA,EAAY,aAAa,EAAA,EACrID,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAC,IAAI,EAAO,CAAA,EAChHA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAA,EACpDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,eAAe,EAC1B,EAAA,IAAI,CAAC;AACJ,cAAEA,OAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO,EAAA,EAACA,OAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAEE,uBAAe,EAAc,aAAA,EAAA,MAAM,GAAa;cACtJ,EAAE,CACC,EACTF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,KAAK;AACd,cAAEA,uBAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAc,aAAA,EAAA,MAAM,EAAa;AAClH,cAAE,EAAE,EACNA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAM,EAC1CA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAC,EAAE,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CAChE,EACNA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACA,CACL,CACF,CACD;;;;;;;;"}

package/dist/cjs/road-segmented-button-bar.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var index = require('./index-Kxea_xqm.js');
 require('./polyfill-DOejCmiR.js');
-const segmentedButtonBarCss = ":host{display:flex;max-width:500px}";
+const segmentedButtonBarCss = ":host{background-color:var(--road-surface);outline:1px solid var(--road-outline-weak);border-radius:12px;padding:var(--road-spacing-02);display:flex}";
 const ButtonBar = class {
     constructor(hostRef) {
@@ -25,7 +25,7 @@ const ButtonBar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (index.h(index.Host, { key: 'd2cdf10978a8286781e00253187fb0e8cba77af6', role: "tablist" }, index.h("slot", { key: '730fe1bb12456e03e63b3899ca5f870e2ad9d085' })));
+        return (index.h(index.Host, { key: '20a78b478a8d346e40af1065cfc57e273498d389', role: "tablist" }, index.h("slot", { key: 'aadc0d0830d3110041dc4e0fa7f93f0a42fdefc5' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/road-segmented-button-bar.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-segmented-button-bar.entry.cjs.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,~~qCAAqC~~;;~~MCYtD~~,SAAS,GAAA,MAAA;;;;;;IAUpB,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAClC,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;;;IASN,iBAAiB,GAAA;QACf,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAEdD,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/\n Segmented button bar\n \n /\n\n:host {\n ~~display~~: ~~flex~~;\n ~~max~~-~~width~~: ~~500px~~;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/*\n @slot - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n /\n\n@Component({\n tag: 'road-segmented-button-bar',\n styleUrl: 'segmented-button-bar.css',\n shadow: true,\n})\nexport class ButtonBar {\n\n @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadsegmentedbuttonbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadSegmentedButtonBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /* @internal /\n @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n return (\n <Host\n role=\"tablist\"\n >\n <slot/>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-segmented-button-bar.entry.cjs.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,uJAAuJ;;MCYxK,SAAS,GAAA,MAAA;;;;;;IAUpB,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAClC,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;;;IASN,iBAAiB,GAAA;QACf,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAEdD,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/\n Segmented button bar\n \n /\n\n:host {\n background-color: var(--road-surface);\n outline: 1px solid var(--road-outline-weak);\n border-radius: 12px;\n padding: var(--road-spacing-02);\n display: flex;\n} \n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/*\n @slot - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n /\n\n@Component({\n tag: 'road-segmented-button-bar',\n styleUrl: 'segmented-button-bar.css',\n shadow: true,\n})\nexport class ButtonBar {\n\n @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadsegmentedbuttonbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadSegmentedButtonBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /* @internal /\n @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n return (\n <Host\n role=\"tablist\"\n >\n <slot/>\n </Host>\n );\n }\n}"],"version":3}

package/dist/cjs/road-segmented-button-bar.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"road-segmented-button-bar.entry.cjs.js","sources":["src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/\n Segmented button bar\n \n /\n\n:host {\n ~~display~~: ~~flex~~;\n ~~max~~-~~width~~: ~~500px~~;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/*\n @slot - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n /\n\n@Component({\n tag: 'road-segmented-button-bar',\n styleUrl: 'segmented-button-bar.css',\n shadow: true,\n})\nexport class ButtonBar {\n\n @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadsegmentedbuttonbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadSegmentedButtonBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /* @internal /\n @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n return (\n <Host\n role=\"tablist\"\n >\n <slot/>\n </Host>\n );\n }\n}"],"names":["h","Host"],"mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,~~qCAAqC~~;;~~MCYtD~~,SAAS,GAAA,MAAA;;;;;;IAUpB,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAClC,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;;;IASN,iBAAiB,GAAA;QACf,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAEdD,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF;;;;;;;;;;;"}
1	+ {"version":3,"file":"road-segmented-button-bar.entry.cjs.js","sources":["src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/\n Segmented button bar\n \n /\n\n:host {\n background-color: var(--road-surface);\n outline: 1px solid var(--road-outline-weak);\n border-radius: 12px;\n padding: var(--road-spacing-02);\n display: flex;\n} \n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/*\n @slot - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n /\n\n@Component({\n tag: 'road-segmented-button-bar',\n styleUrl: 'segmented-button-bar.css',\n shadow: true,\n})\nexport class ButtonBar {\n\n @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n /\n The selected tab component\n /\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadsegmentedbuttonbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadSegmentedButtonBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /* @internal /\n @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n return (\n <Host\n role=\"tablist\"\n >\n <slot/>\n </Host>\n );\n }\n}"],"names":["h","Host"],"mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,uJAAuJ;;MCYxK,SAAS,GAAA,MAAA;;;;;;IAUpB,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAClC,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,WAAW;AACtB,aAAA,CAAC;;;IASN,iBAAiB,GAAA;QACf,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAEdD,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF;;;;;;;;;;;"}

package/dist/cjs/road-segmented-button.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-Kxea_xqm.js');
-const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:first-child){border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}:host(:last-child){border:1px solid var(--road-primary);border-radius:0 999em 999em 0}:host(.btn-sm){height:2rem;font-size:var(--road-button-small)}:host(.tab-selected){color:var(--road-primary-contrast);background-color:var(--road-primary)}:host(.tab-selected:hover){background-color:var(--road-button-primary-variant)}:host(:hover){background:var(--road-primary-90)}:host(.focus-visible){background:var(--road-primary-90);outline:auto}:host(.tab-selected.focus-visible){background-color:var(--road-button-primary-variant)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}";
+const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.75rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-weak);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-radius:8px;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-right:var(--road-spacing-02);overflow:hidden}:host(:last-child){margin-right:0}:host(.btn-sm){height:2.5rem}:host(.btn-md){height:2.75rem}:host(.tab-selected){color:var(--road-button-primary);fill:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(.tab-selected:hover){color:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(:hover){color:var(--road-on-surface);background-color:var(--road-surface-inverse)}:host(.focus-visible){outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host ::slotted(road-icon){margin:-0.2rem var(--road-spacing-03) -0.2rem 0;float:left}.text-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}";
 const SegmentedButton = class {
     constructor(hostRef) {
@@ -59,7 +59,7 @@ const SegmentedButton = class {
         return (index.h(index.Host, { key: '863bee27ee0f19d6db0382687b0e8e79bd013a98', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, index.h("span", { key: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("slot", { key: 'f40045cb7fc6663a0df01a26ffd54d050541673b' }))));
+            } }, index.h("span", { key: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '1b6229789e55401099e9865654ff60c9b501a21d', class: "text-content" }, index.h("slot", { key: '51dbd9a97826432909783d75691d500fec26e180' })))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"road-segmented-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,~~g+DAAg+D~~;;~~MCY9+D~~,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AASE;;AAEI;AACK,QAAA,IAAI,CAAA,IAAA,GAAiB,IAAI;AAElC;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAmDjC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAiB,KAAI;AACtC,YAAA,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;;AAEtB,SAAC;AAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAS,KAAI;AAC9B,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;AACpB,SAAC;~~AA2BF~~;~~AArEC~~,IAAA,kBAAkB,CAAC,EAAe,EAAA;AAChC,QAAA,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB;AAC/C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B;AAEnD,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;AACnH,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG;;;AAItC,IAAA,SAAS,CAAC,EAAyB,EAAA;AACzC,QAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;YAEF,EAAE,CAAC,cAAc,EAAE;;;AAIvB,IAAA,IAAY,QAAQ,GAAA;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;QAEpD,IAAI,WAAW,EAAE;YACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;;AAGzC,QAAA,OAAO,CAAC;;IAaV,MAAM,GAAA;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI;AAExC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE;QAGnE,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EACH,eAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,CAAA,WAAA,EAAc,GAAG,CAAA,CAAE,GAAG,IAAI,EAClD,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,CAAC,CAAG,EAAA,SAAS,CAAE,CAAA,GAAG,IAAI;~~AACvB~~,~~aAAA,~~EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAA,~~EACtEA~~,~~OAAO~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,~~CACJ~~,CACF;;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 2.~~5rem~~;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-~~primary~~);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-~~top: 1px solid var(--road-primary);\n border-bottom: 1px solid var(--road-primary);\n border-left: 1px solid var(--road-primary);\n border-~~radius: 0;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n~~}\n\n\n:host(:first~~-~~child){\n border~~: ~~1px solid~~ var(--road-~~primary~~);\n ~~border-right~~: 0;\n ~~border-radius: 999em 0 0 999em;\n~~}\n\n:host(:last-child){\n ~~border: 1px solid var(--road~~-~~primary);\n border-radius~~: 0 ~~999em 999em 0~~;\n}\n\n/\n Small\n /\n\n:host(.btn-sm) {\n height: ~~2rem~~;\n ~~font-size~~: ~~var~~(~~--road~~-~~button-small~~);\n}\n\n/\n Active state\n /\n\n:host(.tab-selected) {\n color: var(--road-primary-~~contrast~~);\n background-color: var(--road-~~primary~~);\n}\n\n:host(.tab-selected:hover) {\n background-color: var(--road-button-~~primary~~-variant);\n}\n\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--road-~~primary~~-90);\n}\n\n/\n Focus state\n /\n\n\n:host(.focus-visible) {\n ~~background: var(--road-primary-90);\n~~ outline: auto;\n}\n\n~~:host(.tab-selected.focus-visible){~~\n ~~background-color: var(--road-button-primary-variant);\n}\n\n\n~~/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n ~~max-height: 2.5rem;\n~~ padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <slot/>\n </span>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-segmented-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 2.75rem;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-on-surface-weak);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-radius: 8px;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n margin-right: var(--road-spacing-02);\n overflow: hidden;\n}\n\n:host(:last-child){\n margin-right: 0;\n}\n\n/\n Small\n /\n\n:host(.btn-sm) {\n height: 2.5rem;\n}\n\n/\n medium\n /\n\n :host(.btn-md) {\n height: 2.75rem;\n}\n\n/\n Active state\n /\n\n :host(.tab-selected) {\n color: var(--road-button-primary);\n fill: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n:host(.tab-selected:hover) {\n color: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n\n/\n Hover state\n /\n\n:host(:hover) {\n color: var(--road-on-surface);\n background-color: var(--road-surface-inverse);\n}\n\n/\n Focus state\n /\n\n\n:host(.focus-visible) {\n outline: auto;\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host ::slotted(road-icon) {\n margin: -0.2rem var(--road-spacing-03) -0.2rem 0;\n float: left;\n}\n\n\n.text-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <span class=\"text-content\">\n <slot/>\n </span>\n </span>\n </Host>\n );\n }\n}"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"road-segmented-button.entry.cjs.js","sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 2.~~5rem~~;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-~~primary~~);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-~~top: 1px solid var(--road-primary);\n border-bottom: 1px solid var(--road-primary);\n border-left: 1px solid var(--road-primary);\n border-~~radius: 0;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n~~}\n\n\n:host(:first~~-~~child){\n border~~: ~~1px solid~~ var(--road-~~primary~~);\n ~~border-right~~: 0;\n ~~border-radius: 999em 0 0 999em;\n~~}\n\n:host(:last-child){\n ~~border: 1px solid var(--road~~-~~primary);\n border-radius~~: 0 ~~999em 999em 0~~;\n}\n\n/\n Small\n /\n\n:host(.btn-sm) {\n height: ~~2rem~~;\n ~~font-size~~: ~~var~~(~~--road~~-~~button-small~~);\n}\n\n/\n Active state\n /\n\n:host(.tab-selected) {\n color: var(--road-primary-~~contrast~~);\n background-color: var(--road-~~primary~~);\n}\n\n:host(.tab-selected:hover) {\n background-color: var(--road-button-~~primary~~-variant);\n}\n\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--road-~~primary~~-90);\n}\n\n/\n Focus state\n /\n\n\n:host(.focus-visible) {\n ~~background: var(--road-primary-90);\n~~ outline: auto;\n}\n\n~~:host(.tab-selected.focus-visible){~~\n ~~background-color: var(--road-button-primary-variant);\n}\n\n\n~~/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n ~~max-height: 2.5rem;\n~~ padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <slot/>\n </span>\n </Host>\n );\n }\n}"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,~~g+DAAg+D~~;;~~MCY9+D~~,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AASE;;AAEI;AACK,QAAA,IAAI,CAAA,IAAA,GAAiB,IAAI;AAElC;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAmDjC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAiB,KAAI;AACtC,YAAA,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;;AAEtB,SAAC;AAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAS,KAAI;AAC9B,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;AACpB,SAAC;~~AA2BF~~;~~AArEC~~,IAAA,kBAAkB,CAAC,EAAe,EAAA;AAChC,QAAA,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB;AAC/C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B;AAEnD,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;AACnH,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG;;;AAItC,IAAA,SAAS,CAAC,EAAyB,EAAA;AACzC,QAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;YAEF,EAAE,CAAC,cAAc,EAAE;;;AAIvB,IAAA,IAAY,QAAQ,GAAA;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;QAEpD,IAAI,WAAW,EAAE;YACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;;AAGzC,QAAA,OAAO,CAAC;;IAaV,MAAM,GAAA;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI;AAExC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE;QAGnE,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EACH,eAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,CAAA,WAAA,EAAc,GAAG,CAAA,CAAE,GAAG,IAAI,EAClD,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,CAAC,CAAG,EAAA,SAAS,CAAE,CAAA,GAAG,IAAI;~~AACvB~~,~~aAAA,~~EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAA,~~EACtEA~~,~~OAAO~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,~~CACJ~~,CACF;;;;;;;;"}
1	+ {"version":3,"file":"road-segmented-button.entry.cjs.js","sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 2.75rem;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-on-surface-weak);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-radius: 8px;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n margin-right: var(--road-spacing-02);\n overflow: hidden;\n}\n\n:host(:last-child){\n margin-right: 0;\n}\n\n/\n Small\n /\n\n:host(.btn-sm) {\n height: 2.5rem;\n}\n\n/\n medium\n /\n\n :host(.btn-md) {\n height: 2.75rem;\n}\n\n/\n Active state\n /\n\n :host(.tab-selected) {\n color: var(--road-button-primary);\n fill: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n:host(.tab-selected:hover) {\n color: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n\n/\n Hover state\n /\n\n:host(:hover) {\n color: var(--road-on-surface);\n background-color: var(--road-surface-inverse);\n}\n\n/\n Focus state\n /\n\n\n:host(.focus-visible) {\n outline: auto;\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host ::slotted(road-icon) {\n margin: -0.2rem var(--road-spacing-03) -0.2rem 0;\n float: left;\n}\n\n\n.text-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n \n * @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /\n The Segmented buttons size.\n /\n @Prop() size?: 'sm' \| 'md' = 'md';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <span class=\"text-content\">\n <slot/>\n </span>\n </span>\n </Host>\n );\n }\n}"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/road-segmented-buttons.cjs.entry.js CHANGED Viewed

@@ -92,7 +92,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: 'b25e26abe6f955509d22ed93135480833fe6dd98', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: 'f6e0e61909a9da627c37f8ddb2c0f19bdf8c9d96', name: "top" }), index.h("slot", { key: '6695aff9ab709576af682f92ddd6a496670ad69a' })));
+        return (index.h(index.Host, { key: '760ffd7c98659dc00187c97e3d01ce92409584a5', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: 'dfd7acfd76741333868ff7dce2f88c27f2413808', name: "top" }), index.h("slot", { key: 'e7ed6139b95280e972025c5028e0694da0f26265' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-select-filter.cjs.entry.js CHANGED Viewed

@@ -1953,7 +1953,7 @@ const SelectFilter = class {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (index.h(index.Host, { key: '2ab661fc7b1f8a11b392444f09da31ca75a73110', "is-active": isActive }, index.h("slot", { key: '4baa482b16bbe868c85510396f6c5d644afc2015' }), this.isOpen && (index.h("div", { key: '52bc08a2c217def565d28945d3227cdf9acb2611', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (index.h(index.Host, { key: 'eb209aa9c9421eca958fe21a8598edc774d61406', "is-active": isActive }, index.h("slot", { key: '4c7bc828b789101338eafd5091cde5fe749db9a9' }), this.isOpen && (index.h("div", { key: '4f7f5ade504721515a8f5f5ffd6ec93178336b4d', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -104,7 +104,7 @@ const Select = class {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: 'fbf13d56f261b79cc03c7d0ece573c0e755fcc02', class: this.sizes && `select-${this.sizes}` }, index.h("select", { key: '3ebc5baf241e60215757a1e0d86c961b765b2149', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("option", { key: '69723be0e85acb06f1d8b57b8d95e69abc7a6e01', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: 'e115fadd832bc42b471627f473750f1ad37abe7e', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '95cc607268bb4d6e932e9bfcbdedf13c42a684ec', class: "invalid-feedback" }, this.error)));
+        return (index.h(index.Host, { key: '531ff3e04c4447214779844ba29b2208ded29d12', class: this.sizes && `select-${this.sizes}` }, index.h("select", { key: 'e5336849c3992793152ffcc2b3670f96c0c1129b', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("option", { key: 'f9f2f7857d3ce3cdb0205b5589388ad0417d6802', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: '4c2d444e030ef6168b4871ae5381550295b91e5f', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '40808526b05350e9d59dedd814ca620368fa6098', class: "invalid-feedback" }, this.error)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -9,7 +9,7 @@ const Skeleton = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("span", { key: '0719ee8283608e763f577d018aef4f6cb163558b' }, "\u00A0"));
+        return (index.h("span", { key: 'd0f6fa2c6d1346b4dbdf15e3a2d8f5776961a625' }, "\u00A0"));
     }
 };
 Skeleton.style = skeletonCss;

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

@@ -19,7 +19,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (index.h("svg", { key: 'e96458f9fed6421eff778decf17d2d4e3b2aa098', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '39f3d8ba7d2e65b32103a5d82928ce80f0dc73e0', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (index.h("svg", { key: 'a13fe873d986f18ad6e24d03c8ed2cc08d111bfb', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '2be205cfa0e2fb9898578db0205ecabc865cddf2', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = spinnerCss;

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

@@ -82,11 +82,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = index.h("label", { key: '11041a87abb31a5847e93384ded7e4c36345af56', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = index.h("label", { key: '430104d38d5703aa56ce1976a977a126468ec741', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (index.h(index.Host, { key: 'a64f78074573cd09e1667adde25625d98861c134' }, index.h("input", { key: 'de33cfaab0753581aa1dde0cfa241589529dab2d', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: 'f1dd1d5e580f5e696e08cc754b4a15c14610a236', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '09a2ef4681d07e35734e5b8f3b1671a99daf59d2', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '2bfcb70289e7a90964e1211569ab02e1097cd12b' }, index.h("input", { key: '7c9e3273d965e895479da1fb4349bb35fa5efc3b', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: 'af4acb92308e858b7188c71bdd2cb1e5bb368e31', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '0dcc70814eb2ae967bf5235bb6aac1ba7205d7b4', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/dist/cjs/road-tab-bar.cjs.entry.js CHANGED Viewed

@@ -41,11 +41,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (index.h(index.Host, { key: '746f908171e249e24f94b16b5dc86dc82e0afcf1', role: "tablist", class: {
+        return (index.h(index.Host, { key: '683e4f5c99d335ec1c744830237bd3cd23db8c75', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, index.h("slot", { key: 'ae9a9a8f7d7fe8d108a54fda92db9b5618b8ab68' })));
+            } }, index.h("slot", { key: '0757eeb70b98263e316b408bc420fee186de03b0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/road-tab-button.cjs.entry.js CHANGED Viewed

@@ -74,7 +74,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '67c07b501186d06a92c2f17ca9de8e0ff52f9f6c', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (index.h(index.Host, { key: '6fdae83a0fe22652c51b92874265e2c32787063d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -82,7 +82,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, index.h("a", Object.assign({ key: '18a73655db637ae681c2c2ead0f0f3ffc3f5bab8' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '58fada49e75fb729951f8cec81d659445fcd1663', class: "button-inner" }, index.h("slot", { key: '9ede5d2abe3dc94bcad317b98c71be832a409b6b' })))));
+            } }, index.h("a", Object.assign({ key: 'dc85019d7861a227495a165790d2e5b025f1f979' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '59d9387c00bb48a34f425d9af782e3568f566263', class: "button-inner" }, index.h("slot", { key: '54290ac6eee4506846c8756f5141b493e6ebcc13' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -24,9 +24,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (index.h(index.Host, { key: 'a80ee1589766800da756d8a9f78534025a264938', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: '10d79bb43319e005cf57d629ea4f678e3f3a5ae2', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: '9f528bd81cf3fafd4b36bd4eda1b3f579840ce87' })));
+            } }, index.h("slot", { key: 'd11c7858cddf2b5da0db945ee9f69f52d02d7c16' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const Table = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: 'c837f70c2f8507a0b1b68c78ee73b38220ab16cb' }));
+        return (index.h("slot", { key: 'e8b08c7f5bbb8fd61ae6d73278b61c8838bbabf4' }));
     }
 };
 Table.style = tableCss;

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

@@ -105,7 +105,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '9dcb1019a30f3b5c26680c200c82e37ddbc7c40e', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '4042e2bc099bb06962b53a68c8cfa4f672a4e79e', name: "top" }), index.h("div", { key: '013c9c6772d12138d4295ef4af31e89519a15ab5', class: "tabs-inner" }, index.h("slot", { key: '2d13a2df6d1d96a0c494f5ee5b32b90dc46c9ed5' }))));
+        return (index.h(index.Host, { key: '5ac640c40ecdf802d7d56a662d5aa107ced242ef', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '8f50a94ef5602b121eaf7406c6d83ed93c50a7aa', name: "top" }), index.h("div", { key: 'fb87539786bf6f7d1e3d7a9766b191bca35ce312', class: "tabs-inner" }, index.h("slot", { key: '32f22aabd7e38881d289fbd0af69669d62d918cc' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -19,7 +19,7 @@ const Tag = class {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (index.h(index.Host, { key: 'dfc6fa6389d85aae088a356aa8e71fc6d1c874e2', class: `${contrastClass}` }, index.h("slot", { key: '7fa2acadbb57e88de5086decdf6ae71455c3e92b' })));
+        return (index.h(index.Host, { key: '81f24465ee40fd72b3095258f67f9d46b0f663e2', class: `${contrastClass}` }, index.h("slot", { key: 'baf9168e522f8f4cf682f03c40304d5052a030f2' })));
     }
 };
 Tag.style = tagCss;

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

@@ -14,7 +14,7 @@ const Text = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (index.h(index.Host, { key: '6c096b7e313e279e5f6854917264e7bc745d6102', class: `${colorClass}` }, index.h("slot", { key: '508084988ed3ef1e3796bef202a56eb28d9a92e0' })));
+        return (index.h(index.Host, { key: '8c3872a70719feac2cbf76f50b7491b838fb393b', class: `${colorClass}` }, index.h("slot", { key: 'b746e561a4c05d829492a023120a7d1ade1c146f' })));
     }
 };
 Text.style = textCss;

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

@@ -96,7 +96,7 @@ const Textarea = class {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: '6b79d4c91d9db40c13b46457e8a74f457ce51253', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '8d1ff720327c7fcfd9a685f7ef4c8df4883834b7', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { key: '5eb4e0859d247b3601d4f3d34a33f23d05a4427a', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'e2bb049bb53e466f9f80b9092cfd79af7a94adb0', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '1cbbe5f763eec7673f7b4d2210603aa898201afe', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: 'f67a9451b99f450ee2828ea5eb5dc3728795c1dd', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '27f3c926911126812156ccc87172c3e71f634b7c', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { key: '081afb27b83557ce88db5c78d6e90c138f69c0d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '3509594cc1523c401e12a796216ed3c97813f419', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'ede03d506c01bf3eae5a633a534eeed696df819d', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -85,7 +85,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (index.h(index.Host, { key: '4866b4f002148da86e39d415bb41c92dde8de0a9', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: '1032a5bb291249435a611bd4819f33ad85bed57e', class: `toast toast-${this.color}` }, index.h("road-icon", { key: 'f049bac2477c60c7079593b327deb6d50792d1cb', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: '5b227214089c85660c0d331d43ea036688db6b00', class: "toast-label" }, this.label), index.h("button", { key: '42e67fe6e4c191a68ffdc316b5b4af5381744311', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: 'aaeba8c86fd8422f9c204fbd426a0b4f3dc4b128', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: '9c70fe00748c2dc9d954a751f44da248eccf9829', name: "progress" }))));
+        return (index.h(index.Host, { key: '6f7087bd4eb183f58cde02e0a890e6ab18b6c5b8', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: 'a2494ef9b74ad9fac5d8b81c810bdcfe52936fef', class: `toast toast-${this.color}` }, index.h("road-icon", { key: '4be95019df5ab21b94508a62afd80f0d89d42150', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: 'ca9901aed33cf158c16eadf8587b90ae235dd933', class: "toast-label" }, this.label), index.h("button", { key: 'abdb172097d82844c78e608264995aa8568fdf23', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: 'a6c17efe9a3255210498348ced0ab1e7b5dd8b8c', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: 'ee1c9f42ddb4efaf69466d51edd10c256b35bd22', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]

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

@@ -78,11 +78,11 @@ const toggle = class {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = index.h("label", { key: '7e60142bec884ea3061c207e406f0c546211b480', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = index.h("label", { key: '04e2ecdd74318b173c60411293ec8300c0e7d80c', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (index.h(index.Host, { key: 'bcc061f438575d35e8739881b5032a7b3c742088' }, index.h("input", { key: '73f9982c4dcd61926b16cc1c49776ebd1d50399d', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: '8af6daaa163cd02675734044cb172951f8c86654', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'a8e6e9e585e2f7d62756db5ffc8e105984336740', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '5afde6ab7825eb0473b34f8ae2656c9fec8002d7' }, index.h("input", { key: '7350937218c795dc74192e9b6cdd191ff6bf232c', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: '87a03339e8520b2c248f4d762d394411bd233423', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: '3d5c0e81cda827653f545c0fd3b057f83dd793d0', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/dist/cjs/road-toolbar-title-page.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const ToolbarAppName = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'bd0e95961b752f7f24bbfc1139f6ebac6c975f47', class: "toolbar-title-page" }, index.h("slot", { key: 'cb5526c2e85fae652dcefab4ed5a4fccc102e63e' })));
+        return (index.h("div", { key: '1c1ecd0a39d2929bca5c324fe67bdc18a18b5390', class: "toolbar-title-page" }, index.h("slot", { key: '0b52cf3cf5b7a6d5f41ec4c8f839731cb48315c9' })));
     }
 };
 ToolbarAppName.style = toolbarTitlePageCss;

package/dist/cjs/road-toolbar-title.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const ToolbarTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'd76f68c65907e1551df90665d6908effa1d23685', class: "toolbar-title" }, index.h("slot", { key: 'eb19d844b7e2723b9be7f17e963200d72605359d' })));
+        return (index.h("div", { key: 'ed443e8a60fd8624ef3381200b15ba4ff31b8aa5', class: "toolbar-title" }, index.h("slot", { key: '1a6148e5e56141545821c5f7a70208db50238bbc' })));
     }
 };
 ToolbarTitle.style = toolbarTitleCss;

package/dist/cjs/road-toolbar-v2.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const ToolbarV2 = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '03ed3e0c69e0d737c9e06fb34865bd9220bb2fb9', class: "toolbar" }, index.h("div", { key: 'dc18099969c401df4f3979add5244f503ddf0ca8', class: "toolbar-container" }, index.h("div", { key: 'eaf8665b9cf17418be695e35ecdb1616bddf8f01', class: "toolbar-container-content-left" }, index.h("slot", { key: '4de8e937d64c2f2f79b707924dc7b52fbe046629', name: "start" }), index.h("slot", { key: '5d0dcc7ad6dd88905c1b2f41a7bb9930db946889', name: "primary" })), index.h("div", { key: 'bc4a67b64b44c4c24e7be20f8e51a79d1ed0d51f', class: "toolbar-content" }, index.h("slot", { key: '42b3947702ac91b384ee862bc1b4c57ed3057397' })), index.h("div", { key: 'fa7a28c253a53f2fa51d2c5be1f2f824d4df79a7', class: "toolbar-container-content-right" }, index.h("slot", { key: '6899849e576aac962459e9fbc4e8a69838bc85ab', name: "secondary" }), index.h("slot", { key: 'f5e68177e1f28a269ff932af476051f92fb97468', name: "end" })))));
+        return (index.h(index.Host, { key: '382572569bcd4298cf5b3e0ce1996eff06d21146', class: "toolbar" }, index.h("div", { key: '3041348fa0bb67af14e7cf56e25e17f70aaac86c', class: "toolbar-container" }, index.h("div", { key: '6a0f67070976e7688b2a22a895ab3fa74d99458d', class: "toolbar-container-content-left" }, index.h("slot", { key: 'ef46f756ec5cb53f90c03079f18bfbc2380b92b0', name: "start" }), index.h("slot", { key: '6adfe95451a4f311dcc74d8f6a68f7037c24578f', name: "primary" })), index.h("div", { key: '00c321d7d6093073ec20d7eb50ad017fbe361127', class: "toolbar-content" }, index.h("slot", { key: '01894b4175c84a9fbd97802a8a2d5721e2e124b1' })), index.h("div", { key: '8e6e1298bbbfa5c6707af70512e2c3f696d70da5', class: "toolbar-container-content-right" }, index.h("slot", { key: 'b1ea849fdb52aca7bc056b6015dcb062f1226d6e', name: "secondary" }), index.h("slot", { key: '07d8efd5011fec01d58a399761d05a7eb2d9e59d', name: "end" })))));
     }
 };
 ToolbarV2.style = toolbarV2Css;