npm - @roadtrip/components - Versions diffs - 3.51.3 → 3.53.0 - Mend

@roadtrip/components 3.51.3 → 3.53.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 (174) hide show

package/dist/esm/road-card.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.js';
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected.is-single:hover){border:2px solid var(--road-primary);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-single:focus){border:2px solid var(--road-primary);outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 const RoadCardStyle0 = cardCss;
 const Card = class {
@@ -26,6 +26,12 @@ const Card = class {
          * Only applies when in button mode (button=true and no href).
          */
         this.disabled = false;
+        /**
+         * Defines the selection mode.
+         * - `"single"`: only one card can be selected at a time (focus outline disabled).
+         * - `"multiple"`: multiple cards can be selected simultaneously.
+         */
+        this.selectionMode = "multiple";
         /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
@@ -41,6 +47,9 @@ const Card = class {
             }
             // Toggle selected state on click for clickable cards
             this.selected = !this.selected;
+            if (this.selectionMode === "single") {
+                e.currentTarget.blur();
+            }
             if (this.value !== undefined) {
                 this.roadcardclick.emit({
                     value: this.value,
@@ -89,7 +98,8 @@ const Card = class {
         const selectedClass = this.selected ? "selected" : "";
         const isButtonClass = isButtonMode ? "is-button" : "";
         const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
-        return (h(Host, { key: '44026953c66e6ee3421d5bbc03c92e60710feb94', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
+        const singleClass = isButtonMode && this.selectionMode === "single" ? "is-single" : "";
+        return (h(Host, { key: 'fc2636b92be59ddf232b162574c3cdd3a7042a50', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}` }, this.renderCard()));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-card.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+pEAA+pE,CAAC;AAChrE,uBAAe,OAAO;;MCoBT,IAAI;IALjB;;;;;;;QAWU,cAAS,GAAmC,MAAM,CAAC;;;;QAKnD,WAAM,GAAY,KAAK,CAAC;;;;;QAWP,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK3C,SAAI,GAAkC,QAAQ,CAAC;QA8C/C,YAAO,GAAG,CAAC,CAAQ;;;YAEzB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;YAC5D,IAAI,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;aACR;;YAGD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAE/B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;aACJ;SACF,CAAC;KAwDH;IAlFS,WAAW;QACjB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC;KAC/C;IA0BO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,CAAC,eAAQ,CAAC,CAAC;SACnB;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,MAAM,OAAO,GAAG,SAAS;cACrB,IAAI,KAAK,SAAS;kBAChB,QAAQ;kBACR,GAAG;cACJ,KAAa,CAAC;QACnB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,KAAK,SAAS,CAAC;QACvD,MAAM,KAAK,GACT,OAAO,KAAK,QAAQ;cAChB;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,YAAY,IAAI,IAAI,CAAC,QAAQ;gBACvC,eAAe,EAAE,YAAY,IAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS;aACpE;cACD;gBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC;QAER,QACE,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErB,eAAQ,CACA,EACV;KACH;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,kBAAkB,SAAS,EAAE,GAAG,EAAE,CAAC;QAC3E,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,YAAY,IAAI,IAAI,CAAC,QAAQ,GAAG,aAAa,GAAG,EAAE,CAAC;QACzE,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,GAAG,cAAc,IAAI,aAAa,IAAI,aAAa,IAAI,aAAa,EAAE,IAE5E,IAAI,CAAC,UAAU,EAAE,CACb,EACP;KACH;;;;;;;","names":[],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n Card\n \n Index\n * - Card\n * - Native\n * - Icon\n /\n\n/ CARD\n -------------------- /\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n margin-bottom: var(--margin-bottom, 1rem);\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n box-shadow: var(--road-elevation-average);\n}\n\n/\n* Card as a button (interactivity in Figma)\n/\n\n:host(.is-button) {\n border: 1px solid var(--road-outline);\n padding: 0;\n}\n\n:host(.is-button:hover) {\n border: 1px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n border: 1px solid var(--road-outline);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n border: 1px solid var(--road-surface-disabled);\n background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n background: none;\n}\n\n:host(.is-button.selected) {\n border: 2px solid var(--road-primary);\n outline: none;\n}\n\n:host(.is-button.selected:hover) {\n border: 2px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n border: 2px solid var(--road-outline-variant);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n outline: none;\n background: var(--road-surface-disabled);\n border: 2px solid var(--road-surface-disabled);\n}\n\n/ NATIVE\n -------------------- /\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: var(--road-spacing-06);\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /\n The elevation.\n /\n @Prop() elevation?: \"none\" \| \"lowest\" \| \"average\" = \"none\";\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: \"submit\" \| \"reset\" \| \"button\" = \"button\";\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined \|\| this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"road-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n Card\n \n Index\n * - Card\n * - Native\n * - Icon\n /\n\n/ CARD\n -------------------- /\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n margin-bottom: var(--margin-bottom, 1rem);\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n box-shadow: var(--road-elevation-average);\n}\n\n/\n* Card as a button (interactivity in Figma)\n/\n\n:host(.is-button) {\n border: 1px solid var(--road-outline);\n padding: 0;\n}\n\n:host(.is-button:hover) {\n border: 1px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n border: 1px solid var(--road-outline);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n border: 1px solid var(--road-surface-disabled);\n background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n background: none;\n}\n\n:host(.is-button.selected) {\n border: 2px solid var(--road-primary);\n outline: none;\n}\n\n:host(.is-button.selected:hover) {\n border: 2px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected.is-single:hover) {\n border: 2px solid var(--road-primary);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n border: 2px solid var(--road-outline-variant);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-single:focus) {\n border: 2px solid var(--road-primary);\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n outline: none;\n background: var(--road-surface-disabled);\n border: 2px solid var(--road-surface-disabled);\n}\n\n/ NATIVE\n -------------------- /\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: var(--road-spacing-06);\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /\n The elevation.\n /\n @Prop() elevation?: \"none\" \| \"lowest\" \| \"average\" = \"none\";\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Defines the selection mode.\n * - `\"single\"`: only one card can be selected at a time (focus outline disabled).\n * - `\"multiple\"`: multiple cards can be selected simultaneously.\n /\n @Prop({ reflect: true }) selectionMode?: \"single\" \| \"multiple\" = \"multiple\";\n\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: \"submit\" \| \"reset\" \| \"button\" = \"button\";\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined \|\| this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n if (this.selectionMode === \"single\") {\n (e.currentTarget as HTMLElement).blur();\n }\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n const singleClass = isButtonMode && this.selectionMode === \"single\" ? \"is-single\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -24,7 +24,7 @@ const ButtonBar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, h("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
+        return (h(Host, { key: '76466abd7a912ac1a0df83853216c3f20ac3086a', role: "tablist" }, h("slot", { key: '04290019d2aea356a7fd24739b68c371455e3b70' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.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.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}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width: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:3rem;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(.btn-lg){height:3rem}: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}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:flex;align-items:center}.button-content-badge{margin-left:var(--road-spacing-03)}";
 const RoadSegmentedButtonStyle0 = segmentedButtonCss;
 const SegmentedButton = class {
@@ -55,10 +55,11 @@ const SegmentedButton = class {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: '20194d71e8ca1c839c4a6287511fcb9ad1318e67', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'c32084087edad1374074d06d73fe718361396247', 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,
-            } }, h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
+            } }, h("span", { key: '55c39f3b6508f33537a0d0e243bc61a700d5c533', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: 'fa599539a08ff52bbfe0c479e809926aecabc85a', class: "button-content" }, h("slot", { key: '044b41c9a2217d62aa30f4221d4a5670105e7bd5' }), this.badge &&
+            h("road-badge", { key: '35a10d98aa0149976dcb21c4f7cb546753ed933f', color: this.selected ? 'primary' : 'neutral', class: "button-content-badge" }, this.badge)))));
     }
     get el() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"road-segmented-button.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,~~45DAA45D~~,CAAC;~~AACx7D~~,kCAAe,kBAAkB;;MCWpB,eAAe;IAL5B;;;;;;;QAYW,SAAI,~~GAAiB~~,IAAI,CAAC;;;;~~QAKV~~,aAAQ,GAAG,KAAK,CAAC;~~QAmDlC~~,YAAO,GAAG,CAAC,EAAiB;YAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;gBACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;aACpB;SACF,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS;YAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;SACpB,CAAC;~~KA6BH~~;~~IAvEC~~,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,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;YACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;SAC5C;KACF;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;YAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;KACF;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE;YACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SACzC;QAED,OAAO,CAAC,CAAC;KACV;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;QAGpE,QACE,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;aACvB,IAED,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACxE,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAO,~~CACF~~,CACF,CACF,EACP;KACH;;;;;;;","names":[],"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.button-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=\"button-content\">\n <slot/>\n </span>\n </span>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-segmented-button.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,6gEAA6gE,CAAC;AACziE,kCAAe,kBAAkB;;MCWpB,eAAe;IAL5B;;;;;;;QAYW,SAAI,GAAyB,IAAI,CAAC;;;;QAKlB,aAAQ,GAAG,KAAK,CAAC;QAwDlC,YAAO,GAAG,CAAC,EAAiB;YAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;gBACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;aACpB;SACF,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS;YAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;SACpB,CAAC;KA+BH;IAzEC,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,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;YACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;SAC5C;KACF;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;YAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;KACF;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE;YACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SACzC;QAED,OAAO,CAAC,CAAC;KACV;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;QAGpE,QACE,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;aACvB,IAED,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACxE,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAO,EACN,IAAI,CAAC,KAAK;YACT,mEAAY,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAc,CAC7G,CACF,CACF,EACP;KACH;;;;;;;","names":[],"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: 3rem;\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 medium\n/\n\n:host(.btn-lg) {\n height: 3rem;\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.button-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n.button-content-badge{\n margin-left: var(--road-spacing-03);\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' \| 'lg' = '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 A badge can be added to the segmented button by providing a string value to this property.\n /\n @Prop() badge?: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=\"button-content\">\n <slot/>\n {this.badge &&\n <road-badge color={this.selected ? 'primary' : 'neutral'} class=\"button-content-badge\">{this.badge}</road-badge>}\n </span>\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -91,7 +91,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), h("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
+        return (h(Host, { key: '74762d3d2e76c9926a2344182debdd17dbf3c011', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'f4d5f461a7fe74ebc76c181b185932759ceb0f34', name: "top" }), h("slot", { key: '6b99ef4524d2aa3f55b95b33b7028097abb03712' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1964,7 +1964,7 @@ const SelectFilter = class {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '5d0540d59c53f2506b97fdaa40a1fae6381098f5', "is-active": isActive }, h("slot", { key: 'e7b5e449426fe5364b5a12a5aa408a98a033869e' }), this.isOpen && (h("div", { key: '01f532bba66042887e23c5892609e4dd174d8330', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (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 (h(Host, { key: '7fdfb3dadc614f4e851891dceb20e19f33074443', "is-active": isActive }, h("slot", { key: 'e2be686790e0ad87e002c8f393cee0ac0864d532' }), this.isOpen && (h("div", { key: '155ccb2711eaa3f8e92f25a3d3b7b9dfa34d4021', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (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 getElement(this); }
     static get watchers() { return {

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

@@ -103,7 +103,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 (h(Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '9a438873eedc20213b7e6c8bae2c648c9c1e0ad1', 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 }, h("option", { key: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
+        return (h(Host, { key: '5bb29d6c8e7ed03e244ec3fdd239589bab5cabe0', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '2493089b1bb3c57c3af43ebbb5daff18ae4744e0', 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 }, h("option", { key: 'e2bf03909eac53047f830ce9a655a643690f918e', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '8a8ad20b057bec306e122587b24f5ffbcb79a3de', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '1d5648a6e2fb46921900ff639b17ac5cc536350e', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '88a14e5d848bda00fea2088013037f37559387f0', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -8,7 +8,7 @@ const Skeleton = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("span", { key: 'ec2419ddcf62a6b2aeedd68ec0c1eb8e430f8185' }, "\u00A0"));
+        return (h("span", { key: 'eecb6ba03a976649272ec4df632022afa71b4a1e' }, "\u00A0"));
     }
 };
 Skeleton.style = RoadSkeletonStyle0;

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

@@ -18,7 +18,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 (h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: 'eb559d1ad35ed62c6c4cb1e7280faf29e52fe2f6', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '8faa4a39732b5b882a2c76abed424d95846c3083', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

package/dist/esm/road-status-chip.entry.js CHANGED Viewed

@@ -24,7 +24,7 @@ const StatusChip = class {
         };
     }
     render() {
-        return (h(Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, h("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
+        return (h(Host, { key: 'f261ddcd3afd748b815d63d973724d0898b48cd7', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '1a6fdaf843be1db93ee850456d662c98c6ab182b', class: "chip-description" }, h("road-icon", { key: '169dc92bb2d1ef16083019799ba80573731464f4', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '4e24bd7b4a140a532970959e5c2140a54910feb6' }))));
     }
 };
 StatusChip.style = RoadStatusChipStyle0;

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

@@ -81,11 +81,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'c232e4f3505aa5d27a54077cf9883fef864efc4d', 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 (h(Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, h("input", { key: '2dace2130557a4c73b79dcd494cc33a7541e6737', 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 }), h("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '3d93be9bb557c13028dabaef2e82a1e53b814c56' }, h("input", { key: '9682f18c59fa23c8bdaeb30c27ea0aea4c37b2e2', 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 }), h("label", { key: '30340789f9d2d0182d478f7e840d705afcb4cf13', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '7dd93e85e3a444f92dbfb524e5ba401e1f5ecb7d', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

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

@@ -40,11 +40,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
+        return (h(Host, { key: '598640b2a0d7bfc657df37e30deff1a0aee2698c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
+            } }, h("slot", { key: '2f8c35375effb72f15d0b37d80ff3dd3a2779b22' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -73,7 +73,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (h(Host, { key: '15684e85cbefb6d8646231adfc2bd423a59edb84', 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 (h(Host, { key: 'd0232d92d13b395713e9537e4e985b9b1aef4be8', 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,
@@ -81,7 +81,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
-            } }, h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
+            } }, h("a", Object.assign({ key: '3cfffe4aef2432b2a23eb2ff6c86c5da125f0e04' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '36f97b5e282bf7870228ca6651629b766d614512', class: "button-inner" }, h("slot", { key: '4f963acbe1cc57893b19c0f86af05b8e754c96c1' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -23,9 +23,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '1f2746fc33e9b879bc8558f18685bdf2f243fdf1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'e5f32c9c796b1a798eca2d24a7a660d808d060f8', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: '38d4df4049aa57b8160855d33990f1b2db21d259' })));
+            } }, h("slot", { key: '018740decce73c280c77ba78216623ac0f842e9d' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -8,7 +8,7 @@ const Table = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
+        return (h("slot", { key: '81dd5f1f536cbc1362baa3027bb76b8fa5a6022b' }));
     }
 };
 Table.style = RoadTableStyle0;

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

@@ -104,7 +104,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '09627e578a4f116e875445939739ffb334429c05', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'ffe9f5b8d3ac85e47a16650254e94376a59376de', name: "top" }), h("div", { key: '1443f709510efff63fdb972db851916406321ac5', class: "tabs-inner" }, h("slot", { key: 'ce206df02b9e5e4933bf1dde5447313cb2ecd900' }))));
+        return (h(Host, { key: '0e0850a766229851fb10751a2c598517ea6ab666', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: '449935aea69a4bb19f26ffefa9427af73dea2400', name: "top" }), h("div", { key: 'cca0b8a935a1e8df7fc9ce46fab95371910e7676', class: "tabs-inner" }, h("slot", { key: '649c2c4cec7a0cd43dfc668eab513ce80207ac9a' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -18,7 +18,7 @@ const Tag = class {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, h("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
+        return (h(Host, { key: 'c17a38527980d6d453ba3846f9a3b2d57f31c071', class: `${contrastClass}` }, h("slot", { key: '77293988ddc60d4defb5e1600db3340c95335cb3' })));
     }
 };
 Tag.style = RoadTagStyle0;

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

@@ -13,7 +13,7 @@ const Text = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: '0601af1046143f243308bb9923105842fe2c25ea', class: `${colorClass}` }, h("slot", { key: '7aa5402a3d3bbface4a39414a5415bce1b0ac878' })));
+        return (h(Host, { key: '727ee50da083fe2504862c80ed7aa5e5392e0226', class: `${colorClass}` }, h("slot", { key: '6e5322eed782d23164f11060a5be01a140182d5d' })));
     }
 };
 Text.style = RoadTextStyle0;

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

@@ -116,7 +116,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 (h(Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '502647f5de50628c8a631f239624d655276ce600', 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, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), h("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'b11f3ddbd35f2d9b093d5a1ea8a7aadc9d22e52d', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '9bd42480182ef1a6804c84bcec4cbcdfaf2208ba', 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, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), h("label", { key: 'a46e0ff32396e011cb0bca6d65794e5e080ec633', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '703184751f1e79b0b925b1146a8a226f10d47be9', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '5537817fa2cf67f3b4be1e5606c2c5eec556d5b5', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/esm/road-time-range-picker.entry.js CHANGED Viewed

@@ -85,7 +85,7 @@ const RoadTimeRangePicker = class {
         return { start: this.start, end: this.end };
     }
     render() {
-        return (h(Host, { key: 'f7a337665eb1016b95f56541fdf7b6cdcdc780c8', class: `time-range-picker input-${this.sizes}` }, this.label && (h("p", { key: '772b61e54d0ca9502478ad77c187a5cc335428d4', class: "label m-0" }, this.label, this.required && h("span", { key: 'efabe848fff7e3ce895912147f88f6761a771ab0', class: "required-indicator" }, " *"))), h("div", { key: '40b1b5929465e8535e228208c7296fa4deb3854f', class: "time-range-picker-content d-flex align-items-center my-4" }, h("slot", { key: 'b49add1d8f8b7ae6555313e2d5bc0f53a885d3aa', name: "start" }), h("span", { key: '2cdd55b31ddbe0d5746512ad1541caf98c5a63e2', class: "separator mx-12" }, this.separator), h("slot", { key: '28b5151feb9c22781cb7c0a9f0896a5cd9138d92', name: "end" })), h("div", { key: '478b58bb644b82daa44f0ca9660a3f5c16b0515e', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (h("p", { key: index, class: "invalid-feedback m-0" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && h("p", { key: '6fe2ec16f7f8094c8a023bba654252cc6f366cbc', class: "helper mt-1" }, this.helper)));
+        return (h(Host, { key: '4c05c2fcbbe5c0f7df1c3e9750873faad0fa7b5c', class: `time-range-picker input-${this.sizes}` }, this.label && (h("p", { key: '2c963e240ae199d1eee6ba76d85013eac8ccfdb8', class: "label m-0" }, this.label, this.required && h("span", { key: 'd8232329248063a4b3dc7b4ba746cb31d4e9f56e', class: "required-indicator" }, " *"))), h("div", { key: 'a848889d0465791fb95ce1c8264212d681e60ae9', class: "time-range-picker-content d-flex align-items-center my-4" }, h("slot", { key: 'a4ded18bd9a179c34616e5a176c4c96189a99de8', name: "start" }), h("span", { key: 'abd5e370b9ae64e5ce7f236017c0bf02a15ef8de', class: "separator mx-12" }, this.separator), h("slot", { key: 'a8445f25548d8580c6275860d330e189f64d1d4c', name: "end" })), h("div", { key: '26723daafbce66f009a0b3d2708a0fa47531947d', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (h("p", { key: index, class: "invalid-feedback m-0" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && h("p", { key: '751b03bef9d11b330916ca30d431185034d65294', class: "helper mt-1" }, this.helper)));
     }
     get hostEl() { return getElement(this); }
 };

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

@@ -84,7 +84,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (h(Host, { key: '3a4496171b17207f7a0511b651561e8044dc5254', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '5f3849481ca612dd87581ffe82de019c19023c33', class: `toast toast-${this.color}` }, h("road-icon", { key: 'cd71e4aedb6571159d879ae2a04b003be7d35e7c', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '4ab5b0b0ce22a200bde67b6d53ff895b3319ca70', class: "toast-label" }, this.label), h("button", { key: '9c29206da5cc529f72af8423d551956574a1dfe9', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '1c288981ec46bd178f457103a1cf50151ed2b112', icon: navigationClose, size: "md" })), h("slot", { key: '0d1a04e456a142b1b6f3d6ecc851d775a4139a9f', name: "progress" }))));
+        return (h(Host, { key: '5c3caac868d79f97699af08fb0b96c1ff35ad9cc', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: 'b20177ba76a147f157605497de541dd53070a7b1', class: `toast toast-${this.color}` }, h("road-icon", { key: 'f75466515c805ee5460577e9694b374b1a30ac62', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'a2e984002c90fbcc7f0eb8f912835c46f1f5effd', class: "toast-label" }, this.label), h("button", { key: '37b9009541e949ee9ffe2350abd189a2d5bcf014', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '5c0cd9dbae939e8c52cb2150861b3c0f68d5518b', icon: navigationClose, size: "md" })), h("slot", { key: '48469490e404f7db80d5c77aa3e08c02d769dd4f', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]

package/dist/esm/road-toast.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-toast.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,urEAAurE,CAAC;AACzsE,wBAAe,QAAQ;;MCkBV,KAAK;IALlB;;;;;;QAU2B,WAAM,GAAY,KAAK,CAAC;;;;QAKzC,UAAK,GAAmB,MAAM,CAAC;;;;;QAW/B,YAAO,GAAW,IAAI,CAAC;;;;QA0CvB,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8CH;;;;IAlFC,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,KAAK,EAAE,CAAC;aACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;KACF;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;IAYD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC;QACT,QAAO,IAAI,CAAC,KAAK;YACjB,KAAK,MAAM;gBACT,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,kBAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrC,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzE,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvC,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChF,kEAAW,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACT,6DAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/\n Toast\n \n \n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n /\n\n\n/ CONTAINER\n -------------------- /\n\n:host {\n position: fixed;\n right: 0;\n bottom: 1rem;\n left: 0;\n z-index: 1;\n display: flex;\n justify-content: center;\n width: 328px;\n margin: 0 auto;\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n :host {\n right: 1.5rem;\n bottom: 3rem;\n left: auto;\n width: auto;\n transform: translateX(100%);\n }\n}\n\n/\n Open state\n /\n\n:host(.toast-open) {\n visibility: visible;\n opacity: 1;\n transform: none;\n}\n\n/ TOAST\n -------------------- /\n\n.toast {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 0 0 100%;\n flex-flow: wrap;\n align-items: flex-start;\n width: 328px;\n padding: 0.75rem 2rem 0.6rem 1rem;\n font-family: var(--road-font);\n font-size: var(--road-body-medium);\n line-height: 1.4;\n color: var(--road-on-info-surface-inverse);\n text-align: left;\n background: var(--road-info-surface-inverse);\n border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n .toast {\n padding: 1rem;\n margin-right: auto;\n margin-left: auto;\n }\n}\n\n/ FEEDBACK COLOR\n -------------------- /\n\n/\n Danger\n /\n\n.toast-danger {\n color: var(--road-on-danger-surface-inverse);\n pointer-events: all;\n background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n color: var(--road-danger-icon-inverse);\n}\n\n/\n Warning\n /\n\n.toast-warning {\n color: var(--road-on-warning-surface-inverse);\n background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n color: var(--road-warning-icon-inverse);\n}\n\n/\n Success\n /\n\n.toast-success {\n color: var(--road-on-success-surface-inverse);\n background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n color: var(--road-success-icon-inverse);\n}\n\n/\n Info\n /\n\n.toast-info {\n color: var(--road-on-info-surface-inverse);\n background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n color: var(--road-info-icon-inverse);\n}\n\n/ FEEDBACK ICON\n -------------------- /\n\n.toast-icon {\n top: auto;\n left: 0.5rem;\n margin-top: -5px;\n margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n .toast-icon {\n position: relative;\n top: auto;\n left: auto;\n margin-right: 0.5rem;\n }\n}\n\n/ CLOSE BUTTON\n -------------------- /\n\n.toast-close {\n position: absolute;\n right: 0.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: none;\n border: 0;\n border-radius: 4px;\n fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n fill: var(--road-warning-icon-inverse);\n}\n\n\n/\n Focus state\n /\n\n.toast-close:focus {\n border-color: var(--road-info-surface-inverse);\n outline: none;\n}\n\n/ TOAST LABEL\n -------------------- /\n\n.toast-label{\n width: 240px;\n margin: 0;\n}\n\n/ TOAST PORGRESS BAR\n -------------------- /\n\n:host ::slotted(road-progress) {\n position: absolute;\n bottom: -8px;\n left: 0;\n flex-basis: 100%;\n width: 100%;\n margin-top: 0.5rem;\n}\n\n/ ANIMATION\n -------------------- /\n\n\n@keyframes load {\n\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/\n \n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n /\n\n@Component({\n tag: 'road-toast',\n styleUrl: 'toast.css',\n shadow: true,\n})\nexport class Toast {\n\n /\n Set `open` propertie to `true` to open the toast\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Set the color of the toast. e.g. info, success, warning, danger\n /\n @Prop() color: FeedbackColors = 'info';\n\n /\n Text display in the toast\n /\n @Prop() label?: string;\n\n /\n How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n * until `close()` is called.\n /\n @Prop() timeout: number = 5000;\n\n /\n Indicate when closing the toast\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Watch the isOpen property to start the timeout before closing\n /\n @Watch('isOpen')\n isOpenChanged() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n /\n Open the toast\n /\n @Method()\n async open() {\n this.isOpen = true;\n if(this.timeout > 0) {\n setTimeout(() => {\n this.close();\n }, this.timeout);\n }\n }\n\n /\n Close the toast\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.onClose.emit();\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 componentDidLoad() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n render() {\n const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n let icon;\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 if (this.color =='danger') {\n this.timeout = 0\n }\n\n return (\n <Host class={`${toastIsOpenClass}`} role=\"alert\">\n <div class={`toast toast-${this.color}`}>\n <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n <p class=\"toast-label\">{this.label}</p>\n <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n <road-icon icon={navigationClose} size=\"md\"></road-icon>\n </button>\n <slot name=\"progress\"/>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-toast.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,urEAAurE,CAAC;AACzsE,wBAAe,QAAQ;;MCkBV,KAAK;IALlB;;;;;;QAU2B,WAAM,GAAY,KAAK,CAAC;;;;QAKzC,UAAK,GAAmB,MAAM,CAAC;;;;;QAW/B,YAAO,GAAW,IAAI,CAAC;;;;QA0CvB,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8CH;;;;IAlFC,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,KAAK,EAAE,CAAC;aACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;KACF;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;IAYD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC;QACT,QAAO,IAAI,CAAC,KAAK;YACjB,KAAK,MAAM;gBACT,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAG,mBAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,kBAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAG,gBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrC,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzE,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvC,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChF,kEAAW,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACT,6DAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/\n Toast\n \n \n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n /\n\n\n/ CONTAINER\n -------------------- /\n\n:host {\n position: fixed;\n right: 0;\n bottom: 1rem;\n left: 0;\n z-index: 1;\n display: flex;\n justify-content: center;\n width: 328px;\n margin: 0 auto;\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n :host {\n right: 1.5rem;\n bottom: 3rem;\n left: auto;\n width: auto;\n transform: translateX(100%);\n }\n}\n\n/\n Open state\n /\n\n:host(.toast-open) {\n visibility: visible;\n opacity: 1;\n transform: none;\n}\n\n/ TOAST\n -------------------- /\n\n.toast {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 0 0 100%;\n flex-flow: wrap;\n align-items: flex-start;\n width: 328px;\n padding: 0.75rem 2rem 0.6rem 1rem;\n font-family: var(--road-font);\n font-size: var(--road-body-medium);\n line-height: 1.4;\n color: var(--road-on-info-surface-inverse);\n text-align: left;\n background: var(--road-info-surface-inverse);\n border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n .toast {\n padding: 1rem;\n margin-right: auto;\n margin-left: auto;\n }\n}\n\n/ FEEDBACK COLOR\n -------------------- /\n\n/\n Danger\n /\n\n.toast-danger {\n color: var(--road-on-danger-surface-inverse);\n pointer-events: all;\n background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n color: var(--road-danger-icon-inverse);\n}\n\n/\n Warning\n /\n\n.toast-warning {\n color: var(--road-on-warning-surface-inverse);\n background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n color: var(--road-warning-icon-inverse);\n}\n\n/\n Success\n /\n\n.toast-success {\n color: var(--road-on-success-surface-inverse);\n background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n color: var(--road-success-icon-inverse);\n}\n\n/\n Info\n /\n\n.toast-info {\n color: var(--road-on-info-surface-inverse);\n background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n color: var(--road-info-icon-inverse);\n}\n\n/ FEEDBACK ICON\n -------------------- /\n\n.toast-icon {\n top: auto;\n left: 0.5rem;\n margin-top: -5px;\n margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n .toast-icon {\n position: relative;\n top: auto;\n left: auto;\n margin-right: 0.5rem;\n }\n}\n\n/ CLOSE BUTTON\n -------------------- /\n\n.toast-close {\n position: absolute;\n right: 0.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: none;\n border: 0;\n border-radius: 4px;\n fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n fill: var(--road-warning-icon-inverse);\n}\n\n\n/\n Focus state\n /\n\n.toast-close:focus {\n border-color: var(--road-info-surface-inverse);\n outline: none;\n}\n\n/ TOAST LABEL\n -------------------- /\n\n.toast-label{\n width: 240px;\n margin: 0;\n}\n\n/ TOAST PORGRESS BAR\n -------------------- /\n\n:host ::slotted(road-progress) {\n position: absolute;\n bottom: -8px;\n left: 0;\n flex-basis: 100%;\n width: 100%;\n margin-top: 0.5rem;\n}\n\n/ ANIMATION\n -------------------- /\n\n\n@keyframes load {\n\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/\n \n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n /\n\n@Component({\n tag: 'road-toast',\n styleUrl: 'toast.css',\n shadow: true,\n})\nexport class Toast {\n\n /\n Set `open` propertie to `true` to open the toast\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Set the color of the toast. e.g. info, success, warning, danger\n /\n @Prop() color: FeedbackColors = 'info';\n\n /\n Text display in the toast\n /\n @Prop() label?: string;\n\n /\n How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n * until `close()` is called.\n /\n @Prop() timeout: number = 5000;\n\n /\n Indicate when closing the toast\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Watch the isOpen property to start the timeout before closing\n /\n @Watch('isOpen')\n isOpenChanged() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n /\n Open the toast\n /\n @Method()\n async open() {\n this.isOpen = true;\n if(this.timeout > 0) {\n setTimeout(() => {\n this.close();\n }, this.timeout);\n }\n }\n\n /\n Close the toast\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.onClose.emit();\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 componentDidLoad() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n render() {\n const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n let icon;\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 if (this.color =='danger') {\n this.timeout = 0\n }\n\n return (\n <Host class={`${toastIsOpenClass}`} role=\"alert\">\n <div class={`toast toast-${this.color}`}>\n <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n <p class=\"toast-label\">{this.label}</p>\n <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n <road-icon icon={navigationClose} size=\"md\"></road-icon>\n </button>\n <slot name=\"progress\"/>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -69,11 +69,11 @@ const toggle = class {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: '8cc1a41d36f0201ba392d57fc2424aa3026f5b9e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: '688af16c9f4a539dd13c5bb98c0f2a731b492c06', 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 (h(Host, { key: 'babe45bd3028fdb56410decc3685ab608a5f73f1' }, h("input", { key: 'eb99e00634ede458e45553c629a693a9faa4583e', 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 }), h("label", { key: '523e11101552847180e7d9509345349940f449b0', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: 'ffc04b50698e2a4cd7ac59c1d6dd18423e298e48', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '530c7052c4b2d783599f0e997954a368bc49be45' }, h("input", { key: '669fb27728139752f1e63319b86e804e7cf91da5', 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 }), h("label", { key: '0f186f04ecd674c4c91458a1f6ef7aca63ee60cf', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: 'b0df7532dea735dfbd25da5307ba27d77fb7b6cc', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

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

@@ -8,7 +8,7 @@ const ToolbarAppName = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '865af785629a79a7448df7721885cbe25eead4f1', class: "toolbar-title-page" }, h("slot", { key: 'a0778c790e42b8b54db2c5407d874d5e7924ab86' })));
+        return (h("div", { key: '6523ca97a8377f6af5fd0800aa5543cbc316f13f', class: "toolbar-title-page" }, h("slot", { key: 'c5d3422ec09f1d54d24fb28cb2be7a84dd700703' })));
     }
 };
 ToolbarAppName.style = RoadToolbarTitlePageStyle0;

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

@@ -8,7 +8,7 @@ const ToolbarTitle = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '67ddb57f9717084f519746e8f19fe61f1ccf9641', class: "toolbar-title" }, h("slot", { key: '6bd026b79603afd9e96a09b4d52da882681fef50' })));
+        return (h("div", { key: '9ed296ef2918332630e1b5a7b7026b2edeb91b21', class: "toolbar-title" }, h("slot", { key: 'a39fdb646a9bcb5aea4641575161229610d75878' })));
     }
 };
 ToolbarTitle.style = RoadToolbarTitleStyle0;

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

@@ -8,7 +8,7 @@ const ToolbarV2 = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '09a228e4eafc2393b30c140b7287c6c881b8d7db', class: "toolbar" }, h("div", { key: '562c83b301107143e3531f374ee4aab6c2d6a8a1', class: "toolbar-container" }, h("div", { key: '9b6ddce805a701bab76529aac5c36e28161ec7e4', class: "toolbar-container-content-left" }, h("slot", { key: '521da1cfda1737f3fb71b8a15380a890eded2b72', name: "start" }), h("slot", { key: '4b777b4cbdabe61de6503d6f455c9952851aa1b8', name: "primary" })), h("div", { key: '513270582ea6cab3852f71ebf5bbbcfa4a085bbe', class: "toolbar-content" }, h("slot", { key: '41ae313ad235be1b2376199ea769fa48dec4cf20' })), h("div", { key: 'd051c5ca9c5a97bb9598c25794dcfc79a446b983', class: "toolbar-container-content-right" }, h("slot", { key: 'a9344e556ba87fb7041eb430ad401474bdf37385', name: "secondary" }), h("slot", { key: '128c4b1aa6e53b84cb7112540f6cdbad02f942f1', name: "end" })))));
+        return (h(Host, { key: '36c585d9dec920f5b72e37733e74c4134ee67185', class: "toolbar" }, h("div", { key: '947c33c46e0bbc26b75d5bab2ed2c89ab228e808', class: "toolbar-container" }, h("div", { key: '83d61111f17d1022ba7b54089e203277955e0a68', class: "toolbar-container-content-left" }, h("slot", { key: '7ac57443795d0347afb7e5ce1070d42ac7f91017', name: "start" }), h("slot", { key: 'a6089fd013186ea231d8d88d5af878239acf92f8', name: "primary" })), h("div", { key: '441aaee506f1cf8a99921cf0a932303a9bdf18aa', class: "toolbar-content" }, h("slot", { key: 'b72650e9913e3f0d08fbe2d2f8eed7219e132837' })), h("div", { key: '48a7f37607c0ebd5a88620cd2ebac74bc12708ed', class: "toolbar-container-content-right" }, h("slot", { key: '137e2d29e96b188194c0e9f82b6081a35119c371', name: "secondary" }), h("slot", { key: '777d8774c10c9e4a784b193139ff10085166a103', name: "end" })))));
     }
 };
 ToolbarV2.style = RoadToolbarV2Style0;

package/dist/esm/road-tooltip.entry.js CHANGED Viewed

@@ -109,12 +109,12 @@ const Tooltip = class {
         return triggers.includes(triggerType);
     }
     render() {
-        return (h(Host, { key: '1c4d0674f907e8e3006c88119ecd9d4c327597a7', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (h(Host, { key: 'dbe023bc59f5d6637f901291cdd2c1a5d9b27450', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
             ,
-            "data-tooltip-position": this.position }, h("slot", { key: '9540439d97de9867f32349f2b37dd50242522744', "aria-describedby": this.tooltipId }), h("div", { key: '72eee89fa5a31dd67ddae13f444a2ba40ab55d95', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, h("slot", { key: 'ba01929185c87ed190275aafa8326bbbbd70ebca', "aria-describedby": this.tooltipId }), h("div", { key: 'df67e1ec087033b72259fae58fc5447ed0d20a01', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 "tooltip-open": this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, h("slot", { key: '974f5455db23669fd1dbc9b4c15a8919ccd0b751', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, h("slot", { key: '8fc2ca39b71812dabd43af2a8fb3d0b2ef223a28', name: "tooltip-content" }))));
     }
     get el() { return getElement(this); }
 };