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/cjs/road-card.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.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 {
@@ -30,6 +30,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.
          */
@@ -45,6 +51,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,
@@ -93,7 +102,8 @@ const Card = class {
         const selectedClass = this.selected ? "selected" : "";
         const isButtonClass = isButtonMode ? "is-button" : "";
         const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
-        return (index.h(index.Host, { key: '44026953c66e6ee3421d5bbc03c92e60710feb94', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
+        const singleClass = isButtonMode && this.selectionMode === "single" ? "is-single" : "";
+        return (index.h(index.Host, { key: 'fc2636b92be59ddf232b162574c3cdd3a7042a50', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}` }, this.renderCard()));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"road-card.entry.cjs.js","mappings":"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","names":["h","Host"],"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.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,g6EAAg6E,CAAC;AACj7E,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;;;;;;QAO1B,kBAAa,GAA2B,UAAU,CAAC;;;;QAMpE,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;YAC/B,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;gBAClC,CAAC,CAAC,aAA6B,CAAC,IAAI,EAAE,CAAC;aACzC;YAED,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;KAyDH;IAtFS,WAAW;QACjB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC;KAC/C;IA6BO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,CAACA,qBAAQ,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,QACEA,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAQ,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,MAAM,WAAW,GAAG,YAAY,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC;QACvF,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,GAAG,cAAc,IAAI,aAAa,IAAI,aAAa,IAAI,aAAa,IAAI,WAAW,EAAE,IAE3F,IAAI,CAAC,UAAU,EAAE,CACb,EACP;KACH;;;;;;;","names":["h","Host"],"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/cjs/road-segmented-button-bar.cjs.entry.js CHANGED Viewed

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.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 {
@@ -59,10 +59,11 @@ const SegmentedButton = class {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (index.h(index.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 (index.h(index.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,
-            } }, index.h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, index.h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
+            } }, index.h("span", { key: '55c39f3b6508f33537a0d0e243bc61a700d5c533', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: 'fa599539a08ff52bbfe0c479e809926aecabc85a', class: "button-content" }, index.h("slot", { key: '044b41c9a2217d62aa30f4221d4a5670105e7bd5' }), this.badge &&
+            index.h("road-badge", { key: '35a10d98aa0149976dcb21c4f7cb546753ed933f', color: this.selected ? 'primary' : 'neutral', class: "button-content-badge" }, this.badge)))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,~~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,QACEA,QAACC,UAAI,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,IAEDD,mEAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACxEA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAO,~~CACF~~,CACF,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: ~~2.75rem~~;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-on-surface-weak);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-radius: 8px;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n margin-right: var(--road-spacing-02);\n overflow: hidden;\n}\n\n:host(:last-child){\n margin-right: 0;\n}\n\n/\n Small\n /\n\n:host(.btn-sm) {\n height: 2.5rem;\n}\n\n/\n medium\n /\n\n :host(.btn-md) {\n height: 2.75rem;\n}\n\n/\n Active state\n /\n\n :host(.tab-selected) {\n color: var(--road-button-primary);\n fill: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n:host(.tab-selected:hover) {\n color: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n\n/\n Hover state\n /\n\n:host(:hover) {\n color: var(--road-on-surface);\n background-color: var(--road-surface-inverse);\n}\n\n/\n Focus state\n /\n\n\n:host(.focus-visible) {\n outline: auto;\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host ::slotted(road-icon) {\n margin: -0.2rem var(--road-spacing-03) -0.2rem 0;\n float: left;\n}\n\n\n.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.cjs.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,QACEA,QAACC,UAAI,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,IAEDD,mEAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACxEA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAO,EACN,IAAI,CAAC,KAAK;YACTA,yEAAY,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAc,CAC7G,CACF,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/\n Tab button\n /\n\n\n/ BUTTON\n -------------------- /\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 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/cjs/road-segmented-buttons.cjs.entry.js CHANGED Viewed

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

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

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

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

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

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

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

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

@@ -22,7 +22,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (index.h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (index.h("svg", { key: 'eb559d1ad35ed62c6c4cb1e7280faf29e52fe2f6', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '8faa4a39732b5b882a2c76abed424d95846c3083', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

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

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

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

@@ -85,11 +85,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = index.h("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = index.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 (index.h(index.Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, index.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 }), index.h("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '3d93be9bb557c13028dabaef2e82a1e53b814c56' }, index.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 }), index.h("label", { key: '30340789f9d2d0182d478f7e840d705afcb4cf13', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.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/cjs/road-tab-bar.cjs.entry.js CHANGED Viewed

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

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

@@ -77,7 +77,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.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 (index.h(index.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,
@@ -85,7 +85,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, index.h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, index.h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
+            } }, index.h("a", Object.assign({ key: '3cfffe4aef2432b2a23eb2ff6c86c5da125f0e04' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '36f97b5e282bf7870228ca6651629b766d614512', class: "button-inner" }, index.h("slot", { key: '4f963acbe1cc57893b19c0f86af05b8e754c96c1' })))));
     }
     get el() { return index.getElement(this); }
 };

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

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

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

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

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

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

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

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

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

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

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

@@ -120,7 +120,7 @@ const Textarea = class {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: 'e9d7e0090384cb0cf42eca630a93de1558d55421', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.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) }), index.h("label", { key: 'c06ce8199193e0157c25b61d803942276685dba4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '24353e133780f40637a78f17c6989450df804426', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '608831606425c4a5f3f351ff66b2f3271f11aab8', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: 'b11f3ddbd35f2d9b093d5a1ea8a7aadc9d22e52d', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.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) }), index.h("label", { key: 'a46e0ff32396e011cb0bca6d65794e5e080ec633', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '703184751f1e79b0b925b1146a8a226f10d47be9', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '5537817fa2cf67f3b4be1e5606c2c5eec556d5b5', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

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

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

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

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

	@@ -1 +1 @@
1	- {"file":"road-toast.entry.cjs.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,GAAGA,wBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAGC,0BAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAGH,wBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACEI,QAACC,UAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,wEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,gEAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,wEAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,mEAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"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.cjs.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,GAAGA,wBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAGC,0BAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAGH,wBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACEI,QAACC,UAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,wEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,gEAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,wEAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,mEAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"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/cjs/road-toggle.cjs.entry.js CHANGED Viewed

@@ -73,11 +73,11 @@ const toggle = class {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = index.h("label", { key: '8cc1a41d36f0201ba392d57fc2424aa3026f5b9e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = index.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 (index.h(index.Host, { key: 'babe45bd3028fdb56410decc3685ab608a5f73f1' }, index.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 }), index.h("label", { key: '523e11101552847180e7d9509345349940f449b0', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'ffc04b50698e2a4cd7ac59c1d6dd18423e298e48', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (index.h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (index.h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '530c7052c4b2d783599f0e997954a368bc49be45' }, index.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 }), index.h("label", { key: '0f186f04ecd674c4c91458a1f6ef7aca63ee60cf', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'b0df7532dea735dfbd25da5307ba27d77fb7b6cc', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (index.h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (index.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/cjs/road-toolbar-title-page.cjs.entry.js CHANGED Viewed

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

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

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

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

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

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

@@ -113,12 +113,12 @@ const Tooltip = class {
         return triggers.includes(triggerType);
     }
     render() {
-        return (index.h(index.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 (index.h(index.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 }, index.h("slot", { key: '9540439d97de9867f32349f2b37dd50242522744', "aria-describedby": this.tooltipId }), index.h("div", { key: '72eee89fa5a31dd67ddae13f444a2ba40ab55d95', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, index.h("slot", { key: 'ba01929185c87ed190275aafa8326bbbbd70ebca', "aria-describedby": this.tooltipId }), index.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, index.h("slot", { key: '974f5455db23669fd1dbc9b4c15a8919ccd0b751', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, index.h("slot", { key: '8fc2ca39b71812dabd43af2a8fb3d0b2ef223a28', name: "tooltip-content" }))));
     }
     get el() { return index.getElement(this); }
 };