@roadtrip/components 2.51.0 → 3.0.0

package/dist/collection/components/input-group/input-group.css

@@ -47,7 +47,7 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--road-grey-500);
+  border-color: var(--road-input-outline);
   border-right-color: transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -55,7 +55,7 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  border-color: var(--road-grey-500);
+  border-color: var(--road-input-outline);
   border-left-width: 0;
 }
 
@@ -66,17 +66,17 @@
 @media (hover: hover) {
 
   .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
     border-right-color: transparent;
   }
 
   .input-group:not(.is-disabled):hover ::slotted([slot="append"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
     border-left-color: transparent;
   }
 
   :host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -85,17 +85,17 @@
  */
 
 .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-right-color: transparent;
 }
 
 :host(.phone-number-group) .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-right-color: transparent;
 }
 
 .input-group:focus-within ::slotted([slot="append"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-left-color: transparent;
 }
 
@@ -116,7 +116,7 @@
   z-index: 2;
   min-width: 3rem;
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
 }
 
 .input-group-prepend {
@@ -142,12 +142,12 @@
   align-items: center;
   padding: 0 0.5rem;
   margin-bottom: 0;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: center;
   white-space: nowrap;
   cursor: text;
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: 0.25rem;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -173,7 +173,7 @@
 }
 
 :host(.phone-number-group) .input-group-prepend ::slotted([slot="prepend"]) {
-  border-right: 1px solid var(--road-grey-500);
+  border-right: 1px solid var(--road-input-outline);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -183,7 +183,7 @@
 }
 
 .input-group-append ::slotted(road-button) {
-  background-color: var(--road-grey-000);
+  background-color: var(--road-surface);
 }
 
 /* SIZES
@@ -203,11 +203,11 @@
 
 .input-group.is-invalid ::slotted([slot="append"]),
 .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 :host(.phone-number-group) .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 /* DISABLED
@@ -216,7 +216,7 @@
 .input-group.is-disabled ::slotted([slot="append"]),
 .input-group.is-disabled ::slotted([slot="prepend"]) {
   cursor: not-allowed;
-  background: var(--road-grey-200);
+  background: #e4e5e9;
 }
 
 .is-disabled ::slotted(road-button) {

package/dist/collection/components/item/item.css

@@ -22,7 +22,7 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
-  --detail-color: var(--road-grey-900);
+  --detail-color: var(--road-icon);
   --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
@@ -54,9 +54,9 @@
   overflow: inherit;
   font-family: inherit;
   font-size: inherit;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background-color: var(--background-color);
-  border-color: var(--road-grey-300);
+  border-color: var(--road-grey-70);
   border-style: solid;
   border-width: var(--border-width, 0);
   border-radius: var(--border-radius);
@@ -70,7 +70,7 @@
  */
 
 .item-active {
-  background-color: var(--road-grey-100);
+  background-color: var(--road-grey-90);
 }
 
 /**
@@ -79,7 +79,7 @@
 
 button.item-native:not(:disabled):not(.item-active):hover,
 button.item-native:not(:disabled):not(.item-active):focus {
-  background-color: var(--road-grey-100);
+  background-color: var(--road-grey-90);
 }
 
 /**
@@ -116,7 +116,7 @@ a {
   overflow: inherit;
   text-align: inherit;
   text-decoration: none;
-  border-color: var(--road-grey-300);
+  border-color: var(--road-grey-70);
   border-style: solid;
   border-width: var(--inner-border-width, 0);
   outline: 0;

package/dist/collection/components/label/label.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   display: block;
   overflow: hidden;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   color: currentColor;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/collection/components/list/list.css

@@ -32,7 +32,7 @@
  */
 
 :host(.list-lines-full) {
-  border: 1px solid var(--road-grey-300);
+  border: 1px solid var(--road-outline);
   border-bottom: 0;
 }
 

package/dist/collection/components/modal/modal.css

@@ -89,9 +89,9 @@
   width: 100%;
   height: 100vh;
   pointer-events: auto;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   background-clip: padding-box;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-hight);
 }
 
 @media (min-width: 768px) {
@@ -109,12 +109,12 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-900);
+  color: var(--road-on-header-surface);
+  background: var(--road-header-surface);
 }
 
 .modal-header road-icon {
-  color: var(--road-primary-contrast);
+  color: var(--road-header-icon);
 }
 
 @media (min-width: 768px) {
@@ -129,12 +129,12 @@
  */
 
 .modal-header-inverse {
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background: none;
 }
 
 .modal-header-inverse road-icon {
-  color: var(--road-grey-900);
+  color: var(--road-icon);
 }
 
 /* ACTIONS
@@ -180,7 +180,7 @@
   height: 3.5rem;
   padding-left: 3.5rem;
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   font-weight: 400;
 }
 

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

@@ -24,8 +24,8 @@
   text-align: center;
   -webkit-user-select: none;
           user-select: none;
-  background-color: var(--road-grey-000);
-  border-top: 1px solid var(--road-grey-300);
+  background-color: var(--road-surface);
+  border-top: 1px solid var(--road-outline);
 }
 
 @media (max-width: 576px) {
@@ -43,7 +43,7 @@
     width: 104px;
     height: 100%;
     border-top: 0;
-    border-right: 1px solid var(--road-grey-300);
+    border-right: 1px solid var(--road-outline);
   }
 }
 

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

@@ -52,6 +52,8 @@ export default {
       </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 tab="tab-home">

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

@@ -40,7 +40,7 @@
 
 :host(.tab-selected),
 :host(.tab-selected) ::slotted(road-icon) {
-  color: var(--road-primary-500);
+  color: var(--road-primary);
 }
 
 :host(.tab-selected)::after {
@@ -50,9 +50,9 @@
   display: block;
   width: 100%;
   height: 4px;
-  color: var(--road-primary-500);
+  color: var(--road-primary);
   content: "";
-  background-color: var(--road-primary-500);
+  background-color: var(--road-primary);
 }
 
 @media (min-width: 1200px) {
@@ -79,7 +79,7 @@
 :host(:hover) ::slotted(road-icon)::after,
 :host(:hover) ::slotted(road-label),
 :host(:hover) ::slotted(road-label)::after {
-  color: var(--road-primary-500);
+  color: var(--road-primary);
 }
 
 
@@ -156,7 +156,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  font-size: 0.875rem;
+  font-size: var(--road-button-small);
   font-weight: 700;
   text-align: center;
   white-space: nowrap;
@@ -179,6 +179,6 @@
   z-index: 1;
   box-sizing: border-box;
   height: auto;
-  font-size: 0.625rem;
+  font-size: var(--road-font-size-10);
   font-weight: 400;
 }

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

@@ -21,7 +21,7 @@
 .plate-number-end {
   width: 1.75rem;
   height: calc(3rem - 0.25rem);
-  background: var(--road-info-text);
+  background: var(--road-info-50);
 }
 
 .input-group-prepend {
@@ -41,7 +41,7 @@
   padding: 0;
   margin-right: 0;
   margin-left: 1px;
-  color: var(--road-info-contrast);
+  color: var(--road-icon-inverse);
   border-radius: 0.125rem 0 0 0.125rem;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .plate-number-location {
-  font-size: 0.875rem;
+  font-size: var(--road-button-medium);
   font-weight: 700;
 }
 
@@ -62,13 +62,13 @@
 }
 
 .plate-number-be .plate-number-input {
-  color: var(--road-danger-text);
+  color: var(--road-on-danger-surface);
 }
 
 .plate-number-be .plate-number-input,
 .plate-number-be .input-group-append,
 .plate-number-be .input-group-prepend {
-  border-color: var(--road-danger-text);
+  border-color: var(--road-danger-outline);
 }
 
 /* INPUT
@@ -80,12 +80,12 @@
   height: 3rem;
   margin: 0;
   font-family: var(--road-font, sans-serif);
-  font-size: 1.75rem;
+  font-size: var(--road-heading-04);
   font-weight: 700;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: center;
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: 0;
   outline: 0;
   box-shadow: none;
@@ -95,7 +95,7 @@
 }
 
 .plate-number-input::placeholder {
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-extra-weak);
   opacity: 1;
 }
 
@@ -105,9 +105,9 @@
 
 .plate-number-input:disabled,
 .plate-number-input[readonly] {
-  color: var(--road-grey-900);
+  color: var(--road-on-surface-disabled);
   cursor: not-allowed;
-  background: var(--road-disabled);
+  background: var(--road-surface-disabled);
   opacity: 1;
 }
 
@@ -115,7 +115,8 @@
 .plate-number-input[readonly] ~ .input-group-prepend,
 .plate-number-input:disabled ~ .input-group-append,
 .plate-number-input[readonly] ~ .input-group-append {
-  background: var(--road-disabled);
+  cursor: not-allowed;
+  background: var(--road-surface-disabled);
 }
 
 /**
@@ -125,7 +126,7 @@
 @media (hover: hover) {
 
   .plate-number-input:not(:disabled):not([readonly]):hover {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -134,7 +135,7 @@
  */
 
 .plate-number-input:not([readonly]):focus {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   outline: 0;
 }
 

package/dist/collection/components/profil-dropdown/profil-dropdown.css

@@ -16,7 +16,7 @@
 :host {
   --margin-top: 0.5rem;
   display: block;
-  font-size: 1rem;
+  font-size: var(--road-font-size-16);
 }
 
 .dropdown {
@@ -75,12 +75,12 @@
   width: 100%;
   min-width: 16.875rem;
   padding: 0.5rem 0;
-  color: var(--road-grey-900);
-  background: var(--road-grey-000);
+  color: var(--road-on-surface);
+  background: var(--road-surface);
   border: 1px solid;
-  border-color: var(--road-grey-200);
+  border-color: var(--road-outline-weak);
   border-radius: 0.25rem;
-  box-shadow: 0 0.375rem 0.375rem rgba(41, 44, 51, 0.24);
+  box-shadow: var(--road-elevation-low);
   transition: transform 0.2s ease-in-out;
   transform: scaleY(0);
   transform-origin: 0 0;
@@ -90,7 +90,7 @@
  -------------------- */
 
 road-item {
-  font-size: 1rem;
+  font-size: var(--road-button-medium);
 }
 
 .profil-item {
@@ -98,7 +98,7 @@ road-item {
   padding-bottom: 1rem;
   margin: 1rem;
   cursor: auto;
-  border-bottom: 1px solid var(--road-grey-200);
+  border-bottom: 1px solid var(--road-outline);
 }
 
 .profil-item-info {
@@ -122,19 +122,19 @@ road-item {
   align-items: center;
   min-height: 40px;
   padding: 0 1rem;
-  font-size: 1rem;
+  font-size: var(--road-button-medium);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border: none;
   outline: none;
 }
 
 .dropdown-item-border {
-  border-color: var(--road-grey-200);
+  border-color: var(--road-outline);
   border-bottom: 1px solid;
 }
 
@@ -153,5 +153,5 @@ road-item.focus-visible:first-child {
 
 road-item:hover,
 road-item.focus-visible {
-  background: var(--road-grey-100);
+  background: var(--road-surface-inverse);
 }

package/dist/collection/components/profil-dropdown/profil-dropdown.js

@@ -4,6 +4,9 @@ import { h } from '@stencil/core';
  * @slot list - List of item values (you can add border with lines=`full` but not on the last item)
  * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.
  * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.
+ * @slot name - Content First and Last Name.
+ * @slot email - Content email.
+
 
  */
 export class Dropdown {
@@ -20,7 +23,7 @@ export class Dropdown {
     };
   }
   render() {
-    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex` }, h("div", null, h("road-avatar", null, h("slot", { name: "avatar" }))))), h("div", { class: `dropdown-menu` }, h("div", { class: "profil-item" }, h("road-avatar", { size: "sm" }, h("slot", { name: "avatarItem" })), h("div", { class: "profil-item-info" }, h("span", { class: "profil-item-info-name" }, "First and Last name"), h("road-label", null, "Email"))), h("slot", { name: "list" }))));
+    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex` }, h("div", null, h("road-avatar", null, h("slot", { name: "avatar" }))))), h("div", { class: `dropdown-menu` }, h("div", { class: "profil-item" }, h("road-avatar", { size: "sm" }, h("slot", { name: "avatarItem" })), h("div", { class: "profil-item-info" }, h("span", { class: "profil-item-info-name" }, h("slot", { name: "name" })), h("road-label", null, h("slot", { name: "email" })))), h("slot", { name: "list" }))));
   }
   static get is() { return "road-profil-dropdown"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/profil-dropdown/profil-dropdown.stories.js

@@ -29,6 +29,16 @@ export default {
         type: 'text',
       },
     },
+    name: {
+      control: {
+        type: 'text',
+      },
+    },
+    email: {
+      control: {
+        type: 'text',
+      },
+    },
     '--margin-top': {
       table: {
         defaultValue: { summary: '0.5rem' },
@@ -42,6 +52,8 @@ export default {
     'is-open': true,
     avatar: `<road-img slot="avatar" 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" title="Person name"></road-img>`,
     avatarItem: `<road-img slot="avatarItem" 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" title="Person name"></road-img>`,
+    name: `<road-label slot="name">First and Last name</road-label>`,
+    email: `<road-label slot="email">Email</road-label>`,
     list: `<road-list slot="list">
     <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="edit-profil">
       <road-icon slot="start" name="edit-outline" size="md"></road-icon>
@@ -67,5 +79,7 @@ export const Playground = (args) => html`
   ${unsafeHTML(args.list)}
   ${unsafeHTML(args.avatar)}
   ${unsafeHTML(args.avatarItem)} 
+  ${unsafeHTML(args.name)} 
+  ${unsafeHTML(args.email)} 
 </road-profil-dropdown>
 `;

package/dist/collection/components/progress/progress.css

@@ -20,8 +20,8 @@
   display: flex;
   height: 0.25rem;
   overflow: hidden;
-  font-size: 0.75rem;
-  background-color: var(--road-grey-200);
+  font-size: var(--road-label-small);
+  background-color: var(--road-on-surface-disabled);
   border-radius: var(--border-radius);
 }
 
@@ -31,13 +31,20 @@
   margin-top: 0.5rem;
 }
 
+.progress-element-info-full-width {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1rem;
+  margin-top: 0.5rem;
+}
+
 .progress-element-label {
-  font-size: 0.875rem;
+  font-size: var(--road-label-medium);
   text-align: left;
 }
 
 .progress-element-step {
-  font-size: 0.875rem;
+  font-size: var(--road-label-medium);
   text-align: right;
 }
 
@@ -58,25 +65,25 @@
  -------------------- */
 
 .progress.progress-primary .progress-bar {
-  background: var(--road-primary-500);
+  background: var(--road-primary);
 }
 
 .progress.progress-secondary .progress-bar {
-  background: var(--road-secondary-600);
+  background: var(--road-secondary);
 }
 
 .progress.progress-info .progress-bar {
-  background: var(--road-info-default);
+  background: var(--road-info-surface-inverse);
 }
 
 .progress.progress-success .progress-bar {
-  background: var(--road-success-default);
+  background: var(--road-success-surface-inverse);
 }
 
-progress.progress-warning .progress-bar {
-  background: var(--road-warning-default);
+.progress.progress-warning .progress-bar {
+  background: var(--road-warning-surface-inverse);
 }
 
 .progress.progress-danger .progress-bar {
-  background: var(--road-danger-default);
+  background: var(--road-danger-surface-inverse);
 }

package/dist/collection/components/progress/progress.js

@@ -18,6 +18,10 @@ export class ProgressBar {
      * Show step
      */
     this.showstep = false;
+    /**
+     * Add padding if the progress is full width
+     */
+    this.fullwidth = false;
     /**
      * The color to use from your application's color palette.
      */
@@ -25,7 +29,8 @@ export class ProgressBar {
   }
   render() {
     const valueRound = Math.round(this.value / 5 / 5);
-    return (h(Host, { class: "progress-element" }, h("div", { class: `progress progress-${this.color}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" })), h("div", { class: "progress-element-info" }, h("span", { class: "progress-element-label" }, this.label), this.showstep && h("span", { class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
+    const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';
+    return (h(Host, { class: "progress-element" }, h("div", { class: `progress progress-${this.color}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" })), h("div", { class: `${fullwidth}` }, h("span", { class: "progress-element-label" }, this.label), this.showstep && h("span", { class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
   }
   static get is() { return "road-progress"; }
   static get encapsulation() { return "shadow"; }
@@ -113,6 +118,24 @@ export class ProgressBar {
         "reflect": false,
         "defaultValue": "false"
       },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add padding if the progress is full width"
+        },
+        "attribute": "fullwidth",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "color": {
         "type": "string",
         "mutable": false,