npm - @roadtrip/components - Versions diffs - 3.24.0 → 3.25.0 - Mend

@roadtrip/components 3.24.0 → 3.25.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 (112) hide show

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

	@@ -1 +1 @@
1	- {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,qgFAAqgF;;MCa3gF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/\n Tooltip\n \n Index\n * - Tooltip\n * - Position\n /\n\n/\n @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n /\n\n/ TOOLTIP\n -------------------- /\n\n:host {\n --max-width: ~~100%;\~~n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: ~~6rem;\~~n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/ POSITION\n -------------------- /\n\n/\n Top\n /\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/\n Top Left\n /\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/\n Top Right\n /\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/\n Left\n /\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/\n Bottom\n /\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/\n Bottom Left\n /\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/\n Bottom Right\n /\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/\n Right\n /\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/\n @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n \n @part tooltip - tooltip container\n /\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /\n The id of tooltip\n /\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /\n The tooltip's content.\n /\n @Prop() content = '';\n\n /\n The position of the tooltip.\n /\n @Prop() position:\n \| 'top'\n \| 'right'\n \| 'bottom'\n \| 'top-left'\n \| 'top-right'\n \| 'bottom-left'\n \| 'bottom-right'\n \| 'left' = 'top';\n\n /\n The content align of the tooltip.\n /\n @Prop() contentAlign:\n \| 'center'\n \| 'left' = 'center';\n\n /\n Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n /\n @Prop({ mutable: true }) isOpen = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover';\n\n /\n Open the tooltip.\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') \|\| this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') \|\| this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
1	+ {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,qgFAAqgF;;MCa3gF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/\n Tooltip\n \n Index\n * - Tooltip\n * - Position\n /\n\n/\n @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n /\n\n/ TOOLTIP\n -------------------- /\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/ POSITION\n -------------------- /\n\n/\n Top\n /\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/\n Top Left\n /\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/\n Top Right\n /\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/\n Left\n /\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/\n Bottom\n /\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/\n Bottom Left\n /\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/\n Bottom Right\n /\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/\n Right\n /\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/\n @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n \n @part tooltip - tooltip container\n /\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /\n The id of tooltip\n /\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /\n The tooltip's content.\n /\n @Prop() content = '';\n\n /\n The position of the tooltip.\n /\n @Prop() position:\n \| 'top'\n \| 'right'\n \| 'bottom'\n \| 'top-left'\n \| 'top-right'\n \| 'bottom-left'\n \| 'bottom-right'\n \| 'left' = 'top';\n\n /\n The content align of the tooltip.\n /\n @Prop() contentAlign:\n \| 'center'\n \| 'left' = 'center';\n\n /\n Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n /\n @Prop({ mutable: true }) isOpen = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover';\n\n /\n Open the tooltip.\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') \|\| this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') \|\| this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}

package/dist/collection/components/accordion/accordion.css CHANGED Viewed

@@ -15,7 +15,8 @@
  * @prop --accordion-header-border: height of the border of the header
  * @prop --content-margin: margin of the accordion content
  * @prop --content-padding: padding of the accordion content
- * @prop --header-padding: padding of the accordion header
+ * @prop --header-padding: padding horizontal and vertical of the accordion header
+ * @prop --header-padding-vertical: padding of the accordion header
  * @prop --icon-color: color of the chevron icon
  * @prop --max-height: maximum height of the collapse content
  */
@@ -25,16 +26,13 @@
   --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);
   --content-padding: var(--road-spacing-04) 0 0;
   --header-padding: var(--road-spacing-04) var(--road-spacing-05);
+  --header-padding-vertical: var(--road-spacing-04);
   --icon-color: var(--road-icon);
   --max-height: none;
   display: block;
 }
-:host(.focus-visible){
-  border: 1px solid var(--road-primary);
-}
 /* ACCORDION
  -------------------- */
@@ -90,7 +88,6 @@
   display: block;
   border: 1px solid transparent;
   border-radius: 0.25rem;
-  outline: 0;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -138,7 +135,7 @@
 .accordion-light-header {
   position: relative;
-  padding: var(--road-spacing-04) 0;
+  padding: var(--header-padding-vertical) 0;
   font-size: var(--road-body-large);
 }

package/dist/collection/components/accordion/accordion.stories.js CHANGED Viewed

@@ -53,7 +53,15 @@ export default {
     },
     '--header-padding': {
       table: {
-        defaultValue: { summary: '1rem 0.5rem 1rem 1rem' },
+        defaultValue: { summary: 'var(--road-spacing-04) var(--road-spacing-05)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-padding-vertical': {
+      table: {
+        defaultValue: { summary: 'var(--road-spacing-04)' },
       },
       control: {
         type: null,
@@ -61,7 +69,7 @@ export default {
     },
     '--icon-color': {
       table: {
-        defaultValue: { summary: 'var(--road-grey-900)' },
+        defaultValue: { summary: 'var(--road-icon)' },
       },
       control: {
         type: null,

package/dist/collection/components/avatar/avatar.css CHANGED Viewed

@@ -33,10 +33,13 @@
   transition: box-shadow 0.5s;
 }
-:host(:hover),
+:host(:hover){
+  box-shadow: 0 0 0 4px var(--road-primary-80);
+}
 :host(.focus-visible),
 :host(:focus){
-  box-shadow: 0 0 0 4px var(--road-primary-80);
+  outline: auto;
 }

package/dist/collection/components/button/button.css CHANGED Viewed

@@ -100,7 +100,6 @@
   cursor: pointer;
   background: transparent;
   border: none;
-  outline: 0;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

package/dist/collection/components/chip/chip.css CHANGED Viewed

@@ -135,8 +135,10 @@
 :host(.chip-outline:focus-visible) {
   border-color: var(--road-outline-variant);
+  outline: auto;
 }
 :host(.chip-secondary.focus-visible) {
   background: var(--road-button-primary-variant);
+  outline: auto;
 }

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -28,7 +28,6 @@
   display: block;
   background-color: var(--road-surface);
   border-radius: 0.25rem;
-  outline: none;
 }
 .dropdown summary:focus,
@@ -137,7 +136,6 @@
   cursor: pointer;
   background: var(--road-surface);
   border: none;
-  outline: none;
 }
 .dropdown-item-border {
@@ -149,9 +147,12 @@
  * Hover state
  */
-.dropdown-item:hover,
-.dropdown-item.focus-visible {
+.dropdown-item:hover {
   background: var(--road-surface-inverse);
 }
+.dropdown-item.focus-visible{
+  outline: auto;
+}

package/dist/collection/components/global-navigation/global-navigation.stories.js CHANGED Viewed

@@ -166,22 +166,22 @@ export default {
     <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
   </road-item>
-  <road-item class="bg-white" button="true">
+  <road-item class="bg-white border-0" button="true">
     <road-icon name="scan"></road-icon>
     Scan
   </road-item>
-  <road-item class="bg-white" button="true">
+  <road-item class="bg-white border-0" button="true">
     <road-icon name="file-catalog"></road-icon>
     Catalogue
   </road-item>
-  <road-item class="bg-white" button="true">
+  <road-item class="bg-white border-0" button="true">
     <road-icon name="Diagnostic"></road-icon>
     Diagnostic
   </road-item>
-  <road-item class="bg-white border-top" button="true">
+  <road-item class="bg-white border-left-0 border-right-0 border-bottom-0 border-top" button="true">
     <road-icon name="log-out"></road-icon>
     Log out
   </road-item>

package/dist/collection/components/navbar/navbar.css CHANGED Viewed

@@ -25,7 +25,7 @@
   -webkit-user-select: none;
           user-select: none;
   background-color: var(--road-surface);
-  border-top: 1px solid var(--road-outline);
+  border-top: 1px solid var(--road-outline-weak);
 }
 @media (max-width: 576px) {
@@ -43,7 +43,7 @@
     width: 104px;
     height: 100%;
     border-top: 0;
-    border-right: 1px solid var(--road-outline);
+    border-right: 1px solid var(--road-outline-weak);
   }
 }

package/dist/collection/components/navbar/navbar.stories.js CHANGED Viewed

@@ -139,7 +139,7 @@ export default {
     Diagnostic
   </road-item>
-  <road-item class="bg-white border-top border-0" button="true">
+  <road-item class="bg-white border-left-0 border-right-0 border-bottom-0 border-top" button="true">
     <road-icon name="log-out" aria-hidden="true"></road-icon>
     Log out
   </road-item>

package/dist/collection/components/plate-number/plate-number.css CHANGED Viewed

@@ -87,7 +87,6 @@
   background: var(--road-surface);
   border: 1px solid var(--road-input-outline);
   border-radius: 0;
-  outline: 0;
   box-shadow: none;
   appearance: none;
 }
@@ -130,8 +129,7 @@
  */
 .plate-number-input:not([readonly]):focus {
-  border-color: var(--road-input-outline-variant);
-  outline: 0;
+  outline: auto;
 }
 /* MOTORBIKE

package/dist/collection/components/segmented-button/segmented-button.css CHANGED Viewed

@@ -82,7 +82,7 @@
 :host(.focus-visible) {
   background: var(--road-primary-90);
-  outline: 0;
+  outline: auto;
 }
 :host(.tab-selected.focus-visible){

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -76,11 +76,6 @@
   transform: scale(0.625) translateY(-0.625rem);
 }
-.form-select:not(:disabled):focus {
-  border-color: var(--road-input-outline-variant);
-  outline: 0;
-}
 /**
  * Disabled state
  */

package/dist/collection/components/tab-button/tab-button.css CHANGED Viewed

@@ -164,9 +164,14 @@
 :host ::slotted(road-label) {
   display: -webkit-box;
+  max-width: 12.5rem;
+  overflow: hidden;
   font-size: 1rem;
-  -webkit-line-clamp: 2;
+  color: var(--road-on-surface);
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
+  text-align: center;
+  text-overflow: ellipsis;
   white-space: inherit;
 }

package/dist/collection/components/textarea/textarea.css CHANGED Viewed

@@ -82,7 +82,6 @@
 .form-control:not(:disabled):focus {
   border-color: var(--road-input-outline-variant);
-  outline: 0;
 }
 /**

package/dist/collection/components/toolbar/toolbar.css CHANGED Viewed

@@ -16,7 +16,7 @@
   contain: content;
   color: var(--road-on-surface);
   background: var(--road-surface);
-  border-bottom: 1px solid var(--road-outline);
+  border-bottom: 1px solid var(--road-outline-weak);
 }
 /* CONTAINER
@@ -110,7 +110,7 @@
   align-self: auto;
   font-size: var(--road-font-size-14);
   font-weight: 400;
-  border-right: 1px solid var(--road-outline);
+  border-right: 1px solid var(--road-outline-weak);
   border-radius: 0;
 }
@@ -122,7 +122,7 @@
   font-size: var(--road-font-size-14);
   font-weight: 400;
-  border-left: 1px solid var(--road-outline);
+  border-left: 1px solid var(--road-outline-weak);
   border-radius: 0;
 }

package/dist/collection/components/tooltip/tooltip.css CHANGED Viewed

@@ -16,7 +16,7 @@
  -------------------- */
 :host {
-  --max-width: 100%;
+  --max-width: 85vw;
   --z-index: 1;
   --width: max-content;
@@ -46,7 +46,7 @@
   left: 50%;
   z-index: 1;
   width: var(--width);
-  min-width: 6rem;
+  min-width: 100%;
   max-width: var(--max-width);
   padding: 0.5rem;
   font-family: var(--road-font);

package/dist/collection/components/tooltip/tooltip.stories.js CHANGED Viewed

@@ -46,7 +46,7 @@ Playground.argTypes = {
     control: 'text',
   },
   trigger: {
-    options: ['hover', 'click'],
+    options: ['hover', 'click', 'focus'],
     control: {
       type: 'select',
     },
@@ -83,7 +83,7 @@ Playground.argTypes = {
   },
   '--max-width': {
     table: {
-      defaultValue: { summary: '16rem' },
+      defaultValue: { summary: 'auto' },
     },
     control: {
       type: null,

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

@@ -2,7 +2,7 @@ import { r as registerInstance, h } from './index-52302079.js';
 import { n as navigationChevron } from './index-7a0158a4.js';
 import './polyfill-dc7c89b2.js';
-const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--road-spacing-04) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
+const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--header-padding-vertical:var(--road-spacing-04);--icon-color:var(--road-icon);--max-height:none;display:block}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--header-padding-vertical) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
 const Accordion = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"road-accordion.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,~~opFAAopF~~;;~~MCiB5pF~~,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACE,eAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjG,eAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClH,WAAK,KAAK,EAAE,oBAAoB,IAC9B,YAAM,IAAI,EAAC,WAAW,GAAE,EACxB,YAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,iBAAiB,GAAc,CACpE,CACE,EACV,WAAK,KAAK,EAAE,qBAAqB,IAC/B,eAAO,CACH,CACE,EACV;GACH;;;;;;","names":[],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/\n Accordion\n \n For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Accordion\n * - Button\n * - Content\n /\n\n/\n @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n /\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n}\n\n~~:host(.focus-visible){\n border: 1px solid var(--road-primary);\n}\n\n~~/ ACCORDION\n -------------------- /\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/\n Open state\n /\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/ BUTTON\n -------------------- /\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n ~~outline: 0;\n~~ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { / Remove chrome native arrow /\n display: none;\n}\n\n/\n Focus on Tab\n /\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/\n Active state\n /\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/\n .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n /\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n padding: var(--~~road~~-~~spacing~~-04) 0;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/\n Custom arrow\n /\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/ CONTENT\n -------------------- /\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/\n @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n /\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /\n Set to `true` to open the accordion and to `false` to close it.\n /\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /\n Set to `true` to remove border the accordion and to `false` to add border it.\n /\n @Prop() isLight : boolean = false;\n\n /\n Set to `true` to add a border in the header and the content only for the light accordion.\n /\n @Prop() isLightSeparator : boolean = false;\n\n /\n Set to `true` to add the small version only for the light accordion.\n /\n @Prop() isSmall : boolean = false;\n\n /\n Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"version":3}
1	+ {"file":"road-accordion.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,woFAAwoF;;MCiBhpF,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACE,eAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjG,eAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClH,WAAK,KAAK,EAAE,oBAAoB,IAC9B,YAAM,IAAI,EAAC,WAAW,GAAE,EACxB,YAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,iBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,iBAAiB,GAAc,CACpE,CACE,EACV,WAAK,KAAK,EAAE,qBAAqB,IAC/B,eAAO,CACH,CACE,EACV;GACH;;;;;;","names":[],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/\n Accordion\n \n For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Accordion\n * - Button\n * - Content\n /\n\n/\n @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding horizontal and vertical of the accordion header\n * @prop --header-padding-vertical: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n /\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --header-padding-vertical: var(--road-spacing-04);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n}\n\n/ ACCORDION\n -------------------- /\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/\n Open state\n /\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/ BUTTON\n -------------------- /\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { / Remove chrome native arrow /\n display: none;\n}\n\n/\n Focus on Tab\n /\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/\n Active state\n /\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/\n .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n /\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n padding: var(--header-padding-vertical) 0;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/\n Custom arrow\n /\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/ CONTENT\n -------------------- /\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/\n @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n /\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /\n Set to `true` to open the accordion and to `false` to close it.\n /\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /\n Set to `true` to remove border the accordion and to `false` to add border it.\n /\n @Prop() isLight : boolean = false;\n\n /\n Set to `true` to add a border in the header and the content only for the light accordion.\n /\n @Prop() isLightSeparator : boolean = false;\n\n /\n Set to `true` to add the small version only for the light accordion.\n /\n @Prop() isSmall : boolean = false;\n\n /\n Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-52302079.js';
-const avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover),:host(.focus-visible),:host(:focus){box-shadow:0 0 0 4px var(--road-primary-80)}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";
+const avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover){box-shadow:0 0 0 4px var(--road-primary-80)}:host(.focus-visible),:host(:focus){outline:auto}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";
 const Avatar = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"road-avatar.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~84BAA84B~~;;~~MCUn5B~~,MAAM;;;gBAKqC,IAAI;;EAE1D,MAAM;IAEJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGvE,QAEE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErB,eAAO,CACF,EAEP;GACH;;;;;;","names":[],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/\n Avatar\n \n Index\n * - Avatar\n * - Image\n * - Badge\n /\n\n/\n @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n /\n\n/ AVATAR\n -------------------- /\n\n:host {\n --avatar-background: var(--road-primary);\n --avatar-width: 3rem;\n --avatar-color: var(--road-grey-100-new);\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--avatar-width);\n height: var(--avatar-width);\n font-weight: 700;\n color: var(--avatar-color);\n background: var(--avatar-background);\n border-radius: var(--avatar-width);\n transition: box-shadow 0.5s;\n}\n\n:host(:hover)~~,\n:host(.focus-visible),\n:host(:focus)~~{\n box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n\n\n:host ::slotted(road-icon) {\n fill: var(--road-icon-inverse);\n}\n\n\n/ SIZE\n -------------------- /\n\n:host(.avatar-sm) {\n width: 2.625rem;\n height: 2.625rem;\n font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n width: 3.5rem;\n height: 3.5rem;\n font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n width: 4rem;\n height: 4rem;\n font-size: 2.375rem;\n}\n\n\n/ IMAGE\n -------------------- /\n\n::slotted(road-img),\n::slotted(img) {\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n border-radius: var(--avatar-width);\n}\n\n/ BADGE\n -------------------- /\n\n::slotted(road-badge) {\n position: absolute;\n top: 0;\n right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/\n @slot - Image of the avatar.\n /\n@Component({\n tag: 'road-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class Avatar {\n\n /\n The Avatar size.\n */\n @Prop({ reflect: true }) size?: 'sm' \| 'md' \| 'lg' = 'md';\n\n render() {\n\n const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n return (\n\n <Host\n class={`${sizeClass}`}\n >\n <slot/>\n </Host>\n \n );\n }\n\n}\n"],"version":3}
1	+ {"file":"road-avatar.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,25BAA25B;;MCUh6B,MAAM;;;gBAKqC,IAAI;;EAE1D,MAAM;IAEJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGvE,QAEE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErB,eAAO,CACF,EAEP;GACH;;;;;;","names":[],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/\n Avatar\n \n Index\n * - Avatar\n * - Image\n * - Badge\n /\n\n/\n @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n /\n\n/ AVATAR\n -------------------- /\n\n:host {\n --avatar-background: var(--road-primary);\n --avatar-width: 3rem;\n --avatar-color: var(--road-grey-100-new);\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--avatar-width);\n height: var(--avatar-width);\n font-weight: 700;\n color: var(--avatar-color);\n background: var(--avatar-background);\n border-radius: var(--avatar-width);\n transition: box-shadow 0.5s;\n}\n\n:host(:hover){\n box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n:host(.focus-visible),\n:host(:focus){\n outline: auto;\n}\n\n\n\n:host ::slotted(road-icon) {\n fill: var(--road-icon-inverse);\n}\n\n\n/ SIZE\n -------------------- /\n\n:host(.avatar-sm) {\n width: 2.625rem;\n height: 2.625rem;\n font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n width: 3.5rem;\n height: 3.5rem;\n font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n width: 4rem;\n height: 4rem;\n font-size: 2.375rem;\n}\n\n\n/ IMAGE\n -------------------- /\n\n::slotted(road-img),\n::slotted(img) {\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n border-radius: var(--avatar-width);\n}\n\n/ BADGE\n -------------------- /\n\n::slotted(road-badge) {\n position: absolute;\n top: 0;\n right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/\n @slot - Image of the avatar.\n /\n@Component({\n tag: 'road-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class Avatar {\n\n /\n The Avatar size.\n */\n @Prop({ reflect: true }) size?: 'sm' \| 'md' \| 'lg' = 'md';\n\n render() {\n\n const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n return (\n\n <Host\n class={`${sizeClass}`}\n >\n <slot/>\n </Host>\n \n );\n }\n\n}\n"],"version":3}

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

@@ -20,7 +20,7 @@ const Badge = class {
 };
 Badge.style = badgeCss;
-const buttonCss = ":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;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){text-decoration:underline;outline:auto}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;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;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant);outline:0}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host([aria-disabled].btn-outline-primary){background:none}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-tertiary-outline)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
+const buttonCss = ":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;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){text-decoration:underline;outline:auto}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;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;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant);outline:0}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host([aria-disabled].btn-outline-primary){background:none}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-tertiary-outline)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
 const Button = class {
   constructor(hostRef) {
@@ -17955,7 +17955,7 @@ const Row = class {
 };
 Row.style = rowCss;
-const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
+const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline-weak)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline-weak);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline-weak);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
 const Toolbar = class {
   constructor(hostRef) {