@roadtrip/components 3.29.0 → 3.31.0

package/dist/collection/components/global-navigation-v2/global-navigation-v2.stories.js

@@ -0,0 +1,446 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+export default {
+  title: 'Navigation/GlobalNavigationV2',
+  component: 'road-global-navigation-v2',
+  subcomponents: {
+    'road-navbar-v2': 'road-navbar-v2',
+    'road-navbar-item-v2': 'road-navbar-item-v2',
+    'road-toolbar-v2': 'road-toolbar-v2',
+  },
+  parameters: {
+    actions: {
+      handles: ['roadnavbaritemclick'],
+    },
+    backgrounds: {
+      default: 'grey',
+    },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    toolbar: {
+      control: 'text',
+    },
+    navbar: {
+      control: 'text',
+    },
+    'selected-tab': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '10' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    toolbar: `
+    <road-toolbar-v2 role="tabpanel">
+      <road-button slot="start" class="d-none d-xl-flex border-left-0 compact-button" color="ghost">
+        <road-icon name="navigation-back"></road-icon>
+      </road-button>
+    
+      <road-select
+  slot="primary"
+  label="Antony MARQUAIS"
+  sizes="lg"
+  class="mb-0"
+  options='[
+    { "value": "support", "label": "Support" },
+    { "value": "feedback", "label": "Feedback" },
+    { "value": "other", "label": "Other" }
+  ]'
+></road-select>
+
+
+      <road-button slot="primary" class="border-left-0 flex-none" color="ghost">
+        <road-icon name="navigation-close"></road-icon>
+      </road-button>
+            
+
+      <road-select slot="end" label="Norauto Chambéry" sizes="lg" class="d-none d-xl-flex mb-0"></road-select>
+
+     <road-input-group slot="secondary" class="d-none d-xl-flex">
+        <road-input input-id="cardNumber" sizes="lg" label="Rechercher dans le catalogue" class="mb-0"></road-input>
+        <label slot="append" for="cardNumber">
+          <road-icon name="search" aria-hidden="true" role="img"></road-icon>
+        </label>
+      </road-input-group>
+    </road-toolbar-v2>
+    `,
+    navbar: `
+    <road-navbar-v2 role="tabpanel">
+    <div class="d-flex d-xl-block flex-grow-2 compact-container">
+        <a href="#" class="align-self-auto d-none mb-0 py-12 w-full d-xl-flex compact-logo">
+          <road-icon name="pass-maintain-logo-solid-color"></road-icon> <road-label class="font-weight-bold h6 mb-0 ml-8 d-xl-compact-none">App Name</road-label>
+        </a>
+        <hr class="w-full d-none d-xl-block mb-16"/>
+
+        <div class="text-left d-none d-xl-flex align-items-center mb-12">
+          <road-avatar slot="start" class="mr-16 mr-xl-compact-none">  
+            <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+          </road-avatar>
+            <road-label class="d-xl-compact-none">
+            <p class="h8 mb-4">First and last name</p>
+            <p class="text-medium text-truncate m-0 text-gray">Poste</p>
+          </road-label>
+        </div>
+        <road-button expand color="destructive" outline="true" size="sm" class="mb-0 d-none d-xl-flex m-auto-xl-compact w-full w-xl-revert-compact" icon-only>
+         <road-icon name="log-out-outline" aria-hidden="true"></road-icon>
+          <road-label class="d-xl-compact-none ml-xl-8">Se déconnecter</road-label>
+        </road-button>
+
+    <hr class="w-full d-none d-xl-block my-16"/>
+    
+
+    <road-drawer is-open="false" position="left" drawer-width="480" drawer-title="Edit profil" class="drawer-profil" has-close-icon="true">
+        <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+          <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+        </road-avatar>
+          <road-label class="mb-24">
+          <p class="h8 mb-4">First and last name</p>
+          <p class="text-medium text-truncate m-0">Email</p>
+        </road-label>
+    
+        <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+          <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+        </div>
+      </road-drawer>
+        
+        <script>
+        document.querySelector('.edit-profil').addEventListener('click', () => {
+          document.querySelector('.drawer-profil').setAttribute('is-open', 'true');
+        });
+        </script>
+
+    
+        <road-navbar-item-v2 tab="tab-home" role="tabpanel">
+        <road-tooltip content="Home" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="navigation-home-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Home</road-label>
+        </road-tooltip>
+        </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-search" role="tabpanel">
+        <road-tooltip content="Search" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="search" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Search</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-catalog" role="tabpanel">
+        <road-tooltip content="Print" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="print-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Print</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-notification" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Notifications" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="alert-notification-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Notifications</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-scan" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Scan" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="scan" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Scan</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-catalogue" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Catalogue" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="file-catalog" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Catalogue</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+
+      <road-navbar-item-v2 tab="tab-diag" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Diagnostic" position="right" trigger="focus" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="Diagnostic" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Diagnostic</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+      </div>
+
+
+      <div class="text-gray">
+
+      <road-navbar-item-v2 tab="tab-help" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Help" position="right" trigger="focus" contentalign="center" class="d-none d-xl-flex align-items-center">
+          <road-icon name="alert-question-outline" role="img" class="mr-xl-12"></road-icon><road-label class="font-weight-bold d-xl-compact-none">Help</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-feedback" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Feedback" position="right" trigger="focus" contentalign="center" class="d-none d-xl-flex align-items-center">
+          <road-icon name="speak-advice-outline" role="img" class="mr-xl-12"></road-icon></road-icon><road-label class="font-weight-bold d-xl-compact-none">Feedback</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+
+
+      
+  </div>
+
+  <road-navbar-item-v2 tab="tab-menu" class="d-block d-xl-none tab-menu">
+        <road-icon name="navigation-menu" role="img"></road-icon>
+        <road-label>Menu</road-label>
+      </road-navbar-item-v2>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" class="d-xl-none drawer-menu">
+  <div class="p-16 pt-0">
+ <div class="text-left d-flex align-items-center">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0 text-gray">Poste</p>
+    </road-label>
+  </div>
+
+  <road-button expand color="destructive" outline="true" size="sm" class="d-flex  mb-16 mt-12">
+    <road-icon slot="start" name="log-out-outline" aria-hidden="true"></road-icon>
+    Se déconnecter
+  </road-button>
+
+  <road-item class="text-left bg-light profil" tabindex="0">
+  <road-label>
+    <span class="text-content mb-8 d-flex align-items-center">
+      <road-icon size="sm" class="mr-8" name="shop-outline" role="img"></road-icon>
+      Centre
+    </span>
+    <p class="h8 mb-4">054 Norauto Chambéry
+    <p class="text-content mb-0">Code collaborateur 18</p>
+  
+  </road-label>
+    <road-icon slot="end" name="navigation-chevron" size="lg" class="ml-16" role="img"></road-icon>
+  </road-item>
+
+  <road-input-group slot="secondary" class="d-block d-xl-none my-12">
+    <road-input input-id="cardNumber" sizes="lg" label="Rechercher dans le catalogue" class="mb-0"></road-input>
+    <label slot="append" for="cardNumber">
+      <road-icon name="search" aria-hidden="true" role="img"></road-icon>
+    </label>
+  </road-input-group>
+
+  <hr class="my-16">
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+  <road-item class="bg-white border-left-0 border-right-0 border-bottom-0 border-top" button="true">
+    <road-icon name="alert-question-outline" role="img"></road-icon>Help
+  </road-item>
+</div>
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+</road-navbar-v2>
+
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
+  },
+};
+
+const Template = (args) => html`
+<road-global-navigation-v2 selected-tab="${ifDefined(args['selected-tab'])}">
+    ${unsafeHTML(args.toolbar)}
+    ${unsafeHTML(args.navbar)}
+</road-global-navigation-v2>
+
+
+`;
+
+export const Playground = Template.bind({});
+
+export const Page = Template.bind({});
+Page.args = {
+  toolbar: `
+    <road-toolbar>
+      <road-button slot="start" class="border-left-0">
+        <road-icon name="navigation-chevron" rotate="180"></road-icon>
+      </road-button>
+      
+      <road-toolbar-title>Search</road-toolbar-title>
+
+      
+    </road-toolbar>
+    `,
+    navbar: `
+    <road-navbar-v2>
+    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+      <road-list slot="list">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+          <road-label style="font-size: 0.75rem">
+            Edit profile
+          </road-label>
+        </road-item>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+          <road-label style="font-size: 0.75rem">
+            Log out
+          </road-label>
+        </road-item>
+      </road-list>
+      <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-label slot="name">First and Last name</road-label>
+      <road-label slot="email">email</road-label>
+    </road-profil-dropdown>
+
+    <road-navbar-item-v2 tab="tab-home" role="menu">
+    <road-icon name="navigation-home-outline"></road-icon>
+    <road-label style="font-size:0.75rem;">Home</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-search" role="menu">
+    <road-icon name="search"></road-icon>
+    <road-label style="font-size:0.75rem;">Search</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-catalog" role="menu">
+    <road-icon name="print-outline"></road-icon>
+    <road-label style="font-size:0.75rem;">Print</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-notification" class="d-none d-xl-flex" role="menu">
+    <road-icon name="alert-notification-outline"></road-icon>
+    <road-label style="font-size:0.75rem;">Notifications</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-scan" class="d-none d-xl-flex" role="menu">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-catalogue" class="d-none d-xl-flex" role="menu">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label style="font-size:0.75rem;">Catalogue</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-diag" class="d-none d-xl-flex" role="menu">
+    <road-icon name="Diagnostic"></road-icon>
+    <road-label style="font-size:0.75rem;">Diagnostic</road-label>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-menu" class="d-block d-xl-none tab-menu" role="menu">
+    <road-icon name="navigation-menu"></road-icon>
+    <road-label style="font-size:0.75rem;">Menu</road-label>
+  </road-navbar-item-v2>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
+  <road-item class="mb-16 text-left bg-light profil" tabindex="0">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  
+
+  <road-item class="bg-white border-top ">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+</road-navbar-v2>
+
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
+};
+
+

package/dist/collection/components/icon/icon.css

@@ -10,7 +10,7 @@
 :host {
   box-sizing: content-box;
   display: inline-block;
-  color: var(--road-icon);
+  color: currentColor;
   transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   fill: currentColor;
   contain: strict;

package/dist/collection/components/navbar-item-v2/navbar-item-v2.css

@@ -0,0 +1,221 @@
+/*
+ * Navbar item
+ *
+ * Index
+ * - Native
+ * - Inner
+ * - Icon
+ * - Badge
+ */
+
+
+:host {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
+}
+
+@media (min-width: 1200px) {
+
+  :host {
+    flex-grow: inherit;
+    width: -moz-fit-content;
+    width: fit-content;
+    padding: var(--road-spacing-04) 0 var(--road-spacing-04) var(--road-spacing-04);
+    text-align: left;
+  }
+
+}
+
+/**
+ * Disabled
+ */
+
+:host(.tab-disabled),
+:host(.tab-disabled) road-tooltip,
+:host(.tab-disabled) road-tooltip road-icon,
+:host(.tab-disabled) ::slotted(road-icon) {
+  color: var(--road-on-surface-disabled);
+  cursor: not-allowed;
+  fill: var(--road-on-surface-disabled);
+}
+
+/**
+ * Selected state
+ */
+
+:host(.tab-selected),
+:host(.tab-selected) road-tooltip road-icon,
+:host(.tab-selected) ::slotted(road-icon) {
+  color: var(--road-on-button-tertiary);
+  fill: var(--road-on-button-tertiary);
+}
+
+:host(.tab-selected)::after {
+  position: absolute;
+  bottom: -12px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 4px;
+  color: var(--road-on-button-tertiary);
+  content: "";
+  background-color: var(--road-on-button-tertiary);
+}
+
+@media (min-width: 1200px) {
+
+  :host(.tab-selected)::after {
+    display: none;
+  }
+
+}
+
+
+/**
+ * Focus on Tab state
+ */
+
+:host(.focus-visible) ::slotted(road-icon),
+:host(.focus-visible) ::slotted(road-icon)::after,
+:host(.focus-visible) ::slotted(road-label),
+:host(.focus-visible) ::slotted(road-label)::after,
+:host(:hover) ::slotted(road-icon),
+:host(:hover) ::slotted(road-icon)::after,
+:host(:hover) ::slotted(road-label),
+:host(:hover) ::slotted(road-label)::after {
+  color: var(--road-on-button-tertiary);
+}
+
+:host(.tab-disabled.focus-visible) ::slotted(road-icon),
+:host(.tab-disabled.focus-visible) ::slotted(road-label),
+:host(.tab-disabled:hover) ::slotted(road-icon),
+:host(.tab-disabled:hover) ::slotted(road-label) {
+  color: var(--road-on-surface-disabled);
+  cursor: not-allowed;
+  fill: var(--road-on-surface-disabled);
+}
+
+
+/* NATIVE
+ -------------------- */
+
+.button-native {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: visible;
+  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-color: initial;
+  border-style: initial;
+  border-width: 0;
+  border-radius: inherit;
+  border-image: initial;
+  outline: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+:host(.tab-disabled) .button-native {
+  cursor: not-allowed;
+}
+
+/* INNER
+ -------------------- */
+
+.button-inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-flow: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+/* ICON
+ -------------------- */
+
+::slotted(road-icon) {
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: auto;
+  margin-bottom: 0.25rem;
+  margin-left: auto;
+  fill: currentColor;
+}
+
+/* TOOLTIP
+ -------------------- */
+
+@media (min-width: 1200px) {
+
+  :host ::slotted(road-tooltip) {
+    width: 100%;
+  }
+
+}
+
+/* LABEL
+ -------------------- */
+
+::slotted(road-label) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: var(--road-label-small);
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+}
+
+@media (min-width: 1200px) {
+
+  ::slotted(road-label)  {
+    display: block;
+  }
+}
+
+/* BADGE
+ -------------------- */
+
+::slotted(road-badge) {
+  position: absolute;
+  top: 4px;
+  left: calc(50% + 0.375rem);
+  z-index: 1;
+  box-sizing: border-box;
+  height: auto;
+  font-size: var(--road-font-size-10);
+  font-weight: 400;
+}