@roadtrip/components 3.16.0 → 3.17.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.
- package/dist/cjs/index-fb57f684.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/road-tab-bar.cjs.entry.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.stories.js +4 -4
- package/dist/collection/components/icon/svg/vehicle-towbar-box-color.svg +1 -0
- package/dist/collection/components/icon/svg/vehicle-towbar-box-outline.svg +1 -0
- package/dist/collection/components/icon/svg/vehicle-towbar-box-solid.svg +1 -0
- package/dist/collection/components/icon/svg/world-solid.svg +1 -1
- package/dist/collection/components/item/item.css +4 -2
- package/dist/collection/components/tab-bar/tab-bar.css +1 -1
- package/dist/esm/index-891decf5.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +1 -1
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-tab-bar.entry.js +1 -1
- package/dist/esm/road-tab-bar.entry.js.map +1 -1
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.d.ts +3 -0
- package/dist/icons/index.js +4 -1
- package/dist/roadtrip/{p-afe28f05.entry.js → p-2e25c08d.entry.js} +2 -2
- package/dist/roadtrip/{p-afe28f05.entry.js.map → p-2e25c08d.entry.js.map} +1 -1
- package/dist/roadtrip/p-73fe2357.js.map +1 -1
- package/dist/roadtrip/p-e214386f.entry.js +2 -0
- package/dist/roadtrip/p-e214386f.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/svg/vehicle-towbar-box-color.svg +1 -0
- package/dist/roadtrip/svg/vehicle-towbar-box-outline.svg +1 -0
- package/dist/roadtrip/svg/vehicle-towbar-box-solid.svg +1 -0
- package/dist/roadtrip/svg/world-solid.svg +1 -1
- package/hydrate/index.js +2 -2
- package/icons/icons.svg +1 -1
- package/icons/index.d.ts +3 -0
- package/icons/index.js +4 -1
- package/package.json +1 -1
- package/dist/roadtrip/p-b65f0a62.entry.js +0 -2
- package/dist/roadtrip/p-b65f0a62.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
require('./polyfill-b1fff766.js');
|
|
7
7
|
|
|
8
|
-
const tabBarCss = ":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-
|
|
8
|
+
const tabBarCss = ":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";
|
|
9
9
|
|
|
10
10
|
const TabBar = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG
|
|
1
|
+
{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,+0BAA+0B;;MCYp1B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n --tab-bar-background: var(--road-surface);\n --tab-color: var(--road-on-surface-weak);\n --tab-color-selected: var(--road-on-surface);\n --tab-underline-selected: var(--road-primary);\n --tab-background: var(--road-surface);\n --tab-background-hover: var(--road-surface-inverse);\n --tab-background-focused: var(--road-grey-70);\n\n display: flex;\n width: 100%;\n margin: 0;\n overflow: scroll;\n overflow-x: inherit;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n list-style: none;\n background: var(--tab-bar-background);\n border-bottom: 1px solid var(--road-outline-weak);\n fill: currentColor;\n scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n flex-grow: 1;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n tag: 'road-tab-bar',\n styleUrl: 'tab-bar.css',\n shadow: true,\n})\nexport class TabBar {\n\n @Element() el!: HTMLRoadTabBarElement;\n\n /**\n * The color to use the color Secondary from your application's color palette.\n */\n @Prop() secondary: boolean = false;\n\n /**\n * Set to `true` to expand buttons width to take the full size of the bar.\n */\n @Prop() expand: boolean = false;\n\n /**\n * Set to `true` to center buttons in the bar.\n */\n @Prop() center: boolean = false;\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadtabbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadTabBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /** @internal */\n @Event() roadtabbarchanged!: EventEmitter;\n /** @internal */\n @Event() roadTabBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n const { expand, center, secondary } = this;\n return (\n <Host\n role=\"tablist\"\n class={{\n 'tab-expand': expand,\n 'tab-center': center,\n 'tab-secondary': secondary,\n }}\n >\n <slot/>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -53,25 +53,25 @@ export default {
|
|
|
53
53
|
'is-light': null,
|
|
54
54
|
'is-medium': null,
|
|
55
55
|
list: `<road-list slot="list">
|
|
56
|
-
<road-item button
|
|
56
|
+
<road-item button class="border-0">
|
|
57
57
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
58
58
|
<road-label>
|
|
59
59
|
Label
|
|
60
60
|
</road-label>
|
|
61
61
|
</road-item>
|
|
62
|
-
<road-item button
|
|
62
|
+
<road-item button class="border-0">
|
|
63
63
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
64
64
|
<road-label>
|
|
65
65
|
Label
|
|
66
66
|
</road-label>
|
|
67
67
|
</road-item>
|
|
68
|
-
<road-item button
|
|
68
|
+
<road-item button class="border-0">
|
|
69
69
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
70
70
|
<road-label>
|
|
71
71
|
Label
|
|
72
72
|
</road-label>
|
|
73
73
|
</road-item>
|
|
74
|
-
<road-item button
|
|
74
|
+
<road-item button class="border-0">
|
|
75
75
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
76
76
|
<road-label>
|
|
77
77
|
Label
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M55.731 50.622a5.145 5.145 0 0 1-9.322.008H29.106a5.145 5.145 0 0 1-9.381-.139l-2.287-.342a3.579 3.579 0 0 1-1.888-.9l-4.168-.007c-.05.005-.101.008-.154.008h-1.25v-.008H4.775c-.773 0-1.2-.562-1.353-.8a3.488 3.488 0 0 1-.4-.958c-.178-.65-.272-1.478-.272-2.34 0-1.626.238-3.34.804-4.699.546-1.311 1.598-2.695 3.383-2.695h3.859c.831 0 1.316.605 1.52.924.242.377.413.84.537 1.299.255.937.397 2.16.397 3.46v1.718c0 .558-.04 1.103-.116 1.594l1.25.002a3.647 3.647 0 0 1 .004-.351v-.001l.312-5.529v-.003a5.935 5.935 0 0 1 2.606-4.577l.912-.613 2.106-3.121v-.001a8.265 8.265 0 0 1 6.717-3.644l9.863-.156c2.35-.035 4.649.716 6.523 2.14l4.55 3.45c1.078.82 2.388 1.325 3.784 1.517 2.236.308 4.5.858 6.8 1.627h.002a5.934 5.934 0 0 1 4.037 5.617v4.876c0 .941-.645 1.765-1.572 1.974l-.007.002-2.877.668h-2.413ZM37.18 31.251l1.196 4.153 7.032.126-3.49-2.648a8.025 8.025 0 0 0-4.738-1.631Zm13.091 6.866-22.876-.409h-.002a2.8 2.8 0 0 1-2.626-3.655l.766-2.407a5.751 5.751 0 0 0-3.134 2.3l-2.38 3.53-1.317.884a3.435 3.435 0 0 0-1.505 2.649v.001l-.312 5.53c-.032.56.369 1.053.923 1.137l1.522.227a5.147 5.147 0 0 1 10.251.226h16.354a5.145 5.145 0 0 1 10.269-.008h1.654l2.243-.52v-4.5c0-1.465-.943-2.78-2.334-3.247-2.17-.726-4.283-1.236-6.346-1.52-.386-.053-.77-.126-1.15-.218Zm-22.032-6.729 6.35-.1 1.172 4.07-8.324-.15h-.004a.3.3 0 0 1-.285-.394l.001-.003a2804 2804 0 0 1 .886-2.782l.204-.64Zm-3.793 14.413a2.677 2.677 0 0 0-1.134.255 2.645 2.645 0 1 0 1.134-.255Zm26.623 0a2.645 2.645 0 1 0 0 5.289 2.645 2.645 0 0 0 0-5.29Zm-40.318-.642h-5.5c.001.648.07 1.203.162 1.583h5.179c.091-.383.159-.939.159-1.583Zm-.31-4.531c.14.513.247 1.216.29 2.031H5.488c.097-.465.222-.889.373-1.252.416-.997.832-1.157 1.076-1.157h3.382c.037.096.08.22.122.378Zm-.248-.633.013.018-.014-.018Z" /><path d="M57.72 40.59v2.5h4.88a5.907 5.907 0 0 0-.56-2.5h-4.32ZM14.7 40.867l-.057 1.008h4.623v-2.5H14.98c-.155.478-.25.978-.28 1.488v.004Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M55.731 50.622a5.145 5.145 0 0 1-9.322.008H29.106a5.145 5.145 0 0 1-9.381-.139l-2.287-.342a3.579 3.579 0 0 1-1.888-.9l-4.168-.007c-.05.005-.101.008-.154.008h-1.25v-.008H4.775c-.773 0-1.2-.562-1.353-.8a3.488 3.488 0 0 1-.4-.958c-.178-.65-.272-1.478-.272-2.34 0-1.626.238-3.34.804-4.699.546-1.311 1.598-2.695 3.383-2.695h3.859c.831 0 1.316.605 1.52.924.242.377.413.84.537 1.299.255.937.397 2.16.397 3.46v1.718c0 .558-.04 1.103-.116 1.594l1.25.002a3.647 3.647 0 0 1 .004-.351v-.001l.312-5.529v-.003a5.935 5.935 0 0 1 2.606-4.577l.912-.613 2.106-3.121v-.001a8.265 8.265 0 0 1 6.717-3.644l9.863-.156c2.35-.035 4.649.716 6.523 2.14l4.55 3.45c1.078.82 2.388 1.325 3.784 1.517 2.236.308 4.5.858 6.8 1.627h.002a5.934 5.934 0 0 1 4.037 5.617v4.876c0 .941-.645 1.765-1.572 1.974l-.007.002-2.877.668h-2.413ZM37.18 31.251l1.196 4.153 7.032.126-3.49-2.648a8.025 8.025 0 0 0-4.738-1.631Zm13.091 6.866-22.876-.409h-.002a2.8 2.8 0 0 1-2.626-3.655l.766-2.407a5.751 5.751 0 0 0-3.134 2.3l-2.38 3.53-1.317.884a3.435 3.435 0 0 0-1.505 2.649v.001l-.312 5.53c-.032.56.369 1.053.923 1.137l1.522.227a5.147 5.147 0 0 1 10.251.226h16.354a5.145 5.145 0 0 1 10.269-.008h1.654l2.243-.52v-4.5c0-1.465-.943-2.78-2.334-3.247-2.17-.726-4.283-1.236-6.346-1.52-.386-.053-.77-.126-1.15-.218Zm-22.032-6.729 6.35-.1 1.172 4.07-8.324-.15h-.004a.3.3 0 0 1-.285-.394l.001-.003a2804 2804 0 0 1 .886-2.782l.204-.64Zm-3.793 14.413a2.677 2.677 0 0 0-1.134.255 2.645 2.645 0 1 0 1.134-.255Zm26.623 0a2.645 2.645 0 1 0 0 5.289 2.645 2.645 0 0 0 0-5.29Zm-40.318-.642h-5.5c.001.648.07 1.203.162 1.583h5.179c.091-.383.159-.939.159-1.583Zm-.31-4.531c.14.513.247 1.216.29 2.031H5.488c.097-.465.222-.889.373-1.252.416-.997.832-1.157 1.076-1.157h3.382c.037.096.08.22.122.378Zm-.248-.633.013.018-.014-.018Z" /><path d="M57.72 40.59v2.5h4.88a5.907 5.907 0 0 0-.56-2.5h-4.32ZM14.7 40.867l-.057 1.008h4.623v-2.5H14.98c-.155.478-.25.978-.28 1.488v.004Z" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="m19.724 50.491-2.287-.342a3.578 3.578 0 0 1-1.894-.907H11.38c-.05.005-.101.008-.154.008h-1.25v-.008H4.775c-.773 0-1.2-.562-1.353-.8a3.488 3.488 0 0 1-.4-.958c-.178-.65-.272-1.478-.272-2.34 0-1.626.238-3.34.804-4.699.546-1.311 1.598-2.695 3.383-2.695h3.859c.831 0 1.316.605 1.52.924.242.377.413.84.537 1.299.255.937.397 2.16.397 3.46v1.718c0 .558-.04 1.103-.116 1.594l1.25-.001a3.618 3.618 0 0 1 .004-.348v-.001l.312-5.529-.057 1.01h4.623v-2.5H14.98a5.934 5.934 0 0 1 2.326-3.09l.912-.613 2.106-3.121a8.266 8.266 0 0 1 6.717-3.645l9.863-.156c2.35-.035 4.649.716 6.523 2.14l4.55 3.45c1.078.82 2.388 1.325 3.784 1.518 2.236.307 4.5.857 6.8 1.626h.002a5.93 5.93 0 0 1 3.477 3.105h-4.32v2.5h4.88v4.888c0 .941-.645 1.765-1.572 1.974l-.007.002-2.877.668h-2.413a5.145 5.145 0 0 1-9.326-.001l-17.295-.003a5.145 5.145 0 0 1-9.386-.127Zm3.212.126c.428.298.948.473 1.51.473a2.642 2.642 0 0 0 2.645-2.645 2.645 2.645 0 1 0-4.155 2.172Zm30.777-2.171a2.642 2.642 0 0 1-2.645 2.644 2.642 2.642 0 0 1-2.645-2.645 2.644 2.644 0 1 1 5.29 0ZM41.916 32.882l3.491 2.648-7.032-.126-1.196-4.153a8.027 8.027 0 0 1 4.737 1.63Zm-13.678-1.494 6.35-.1 1.172 4.07-8.324-.15h-.004a.3.3 0 0 1-.285-.394v-.003l.887-2.782.204-.64ZM5.412 46.742h5.179c.091-.383.159-.939.159-1.583h-5.5c.001.648.07 1.203.162 1.583Zm5.029-6.114c.139.513.246 1.216.289 2.031H5.488c.097-.465.222-.889.373-1.252.416-.997.832-1.157 1.076-1.157h3.382c.037.096.08.22.122.378Zm-.25-.633.014.018a.14.14 0 0 1-.014-.018Z" /></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M23.488 39.943h17.524c.355-2.437.548-5.033.548-7.693 0-2.66-.193-5.256-.548-7.694H23.49a53.653 53.653 0 0 0-.548 7.694c0 2.66.193 5.255.547 7.693Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.404 50.096A25.278 25.278 0 0 0 32.25 57.5 25.278 25.278 0 0 0 57.5 32.25 25.278 25.278 0 0 0 32.25 7 25.278 25.278 0 0 0 7 32.25a25.278 25.278 0 0 0 7.404 17.846Zm15.58-40.483c-2.68 1.83-4.871 6.508-6.064 12.443h16.66c-1.193-5.935-3.385-10.613-6.067-12.443a22.58 22.58 0 0 1 4.237.839c1.972 2.793 3.499 6.833 4.398 11.604h9.431c.41.81.77 1.646 1.079 2.5H43.553c.331 2.432.507 5.016.507 7.692 0 2.677-.176 5.262-.507 7.695h10.105c-.309.855-.669 1.69-1.079 2.5h-9.43c-.9 4.771-2.426 8.813-4.397 11.605a22.555 22.555 0 0 1-4.237.839c2.681-1.83 4.873-6.508 6.066-12.444H23.92c1.192 5.936 3.383 10.615 6.063 12.448a22.56 22.56 0 0 1-4.236-.839c-1.971-2.794-3.497-6.837-4.396-11.609H11.92a22.55 22.55 0 0 1-1.079-2.5h10.105a57.273 57.273 0 0 1-.506-7.691c0-2.677.176-5.262.507-7.696H10.842c.31-.854.67-1.689 1.079-2.5h9.431c.9-4.77 2.425-8.812 4.396-11.604 1.382-.414 2.8-.695 4.236-.839Z"/></svg>
|
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
overflow: hidden;
|
|
33
33
|
font-size: var(--road-font-size-14);
|
|
34
34
|
text-decoration: none;
|
|
35
|
+
border: 1px solid var(--road-outline-weak);
|
|
36
|
+
border-radius: var(--border-radius);
|
|
35
37
|
outline: none;
|
|
36
38
|
}
|
|
37
39
|
|
|
@@ -55,6 +57,7 @@
|
|
|
55
57
|
display: flex;
|
|
56
58
|
align-items: inherit;
|
|
57
59
|
justify-content: inherit;
|
|
60
|
+
width: 100%;
|
|
58
61
|
padding: var(--road-spacing-05);
|
|
59
62
|
margin: 0;
|
|
60
63
|
overflow: inherit;
|
|
@@ -63,8 +66,7 @@
|
|
|
63
66
|
color: var(--road-on-surface);
|
|
64
67
|
text-align: left;
|
|
65
68
|
background-color: var(--background-color);
|
|
66
|
-
border:
|
|
67
|
-
border-radius: var(--border-radius);
|
|
69
|
+
border: 2px solid var(--road-surface);
|
|
68
70
|
outline: none;
|
|
69
71
|
transition: background 0.15s ease-in-out;
|
|
70
72
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|