@roadtrip/components 2.47.0 → 2.49.0

package/dist/collection/components/counter/counter.css

@@ -29,18 +29,53 @@ road-input {
  -------------------- */
 
 road-button {
+  width: 3rem;
   font-size: 1.5rem;
   line-height: 1.4;
-  background: var(--road-grey-100);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-primary-500);
+}
+
+road-button:hover,
+road-button:focus {
+  background: var(--road-primary-100);
+}
+
+road-button road-icon{
+  display: flex;
+  fill: var(--road-primary-500);
+}
+
+.disabled {
+  margin-right: -1px;
+  margin-left: -1px;
+  pointer-events: none;
+  cursor: not-allowed;
+  background: var(--road-disabled);
   border: 1px solid var(--road-grey-500);
+  opacity: inherit;
 }
 
-road-button:hover {
-  background: var(--road-grey-200);
+.disabled:focus {
+  background: var(--road-disabled);
 }
 
+.disabled road-icon {
+  fill: var(--road-grey-500);
+}
+
+
 /* SIZES
  -------------------- */
+
+road-button.btn-md{
+  width: 2.5rem;
+}
+
+road-button.btn-sm{
+  width: 2rem;
+}
+
 .counter-md {
   height: 2.5rem;
 }
@@ -64,13 +99,3 @@ road-button:hover {
 .counter-sm road-button {
   min-width: 2rem;
 }
-
-.disabled {
-  pointer-events: none;
-  background: var(--road-grey-000);
-  cursor: not-allowed;
-}
-
-.disabled:hover {
-  background: var(--road-grey-000);
-}

package/dist/collection/components/counter/counter.js

@@ -16,6 +16,10 @@ export class Counter {
      * The value of the counter.
      */
     this.value = 1;
+    /**
+     * The size of the counter.
+     */
+    this.size = "lg";
     /**
     * Set to `true` to add the dustbin icon if the value is equal to the min.
     */
@@ -210,8 +214,8 @@ export class Counter {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'sm' | 'md'",
-          "resolved": "\"md\" | \"sm\" | undefined",
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
           "references": {}
         },
         "required": false,
@@ -221,7 +225,8 @@ export class Counter {
           "text": "The size of the counter."
         },
         "attribute": "size",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"lg\""
       },
       "dustbin": {
         "type": "boolean",

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

@@ -14,7 +14,7 @@ export default {
       control: 'text',
     },
     size: {
-      options: ['sm', 'md'],
+      options: ['sm', 'md', 'lg'],
       control: {
         type: 'select',
       },

package/dist/collection/components/icon/svg/electric-charger-service-color.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M41.74 21.74v-1.25H23.13c1.71-.84 2.87-2.4 2.87-4.19v-2.7h-2.5v2.7c0 1.27-1.49 2.35-3.25 2.35S17 17.57 17 16.3v-2.7h-2.5v2.7c0 1.79 1.16 3.35 2.87 4.19h-3.09c-4.1 0-7.44 3.34-7.44 7.44v10.9H5.25A4.26 4.26 0 0 0 1 43.08v7.84h11v11.29h2.5V50.92h1.21v-7.84c0-1.17-.48-2.23-1.24-3h.04V27.83h-2.5v11.05c-.18-.02-.36-.05-.54-.05H9.35v-10.9c0-2.73 2.22-4.94 4.94-4.94h24.76a3.985 3.985 0 0 1-2.92 2.65L26.01 27.9v34.31h2.5V29.9l8.16-1.83a6.457 6.457 0 0 0 5.08-6.34l-.01.01ZM13.21 43.09v5.34h-9.7v-5.34c0-.96.79-1.75 1.75-1.75h6.2c.96 0 1.75.79 1.75 1.75Z"/><path d="M21.5 40.78H19v21.43h2.5V40.78ZM28.25 10h-.76c-.06-2.85-.53-6.23-3.99-6.88V2H17v1.12c-3.46.65-3.93 4.03-3.99 6.88h-.76v2.5h16V10ZM17 5.73v1.52h2.5V4.5H21v2.75h2.5V5.73c1.07.48 1.41 1.78 1.48 4.27h-9.46c.07-2.5.41-3.8 1.48-4.27ZM59.01 9.26h-5.97V2.25h-2.5v7.01h-5.97c-1.79 0-3.25 1.46-3.25 3.25v5.5h2.5v-5.5c0-.41.34-.75.75-.75h14.45c.41 0 .75.34.75.75v19.72c0 .41-.34.75-.75.75H44.57c-.41 0-.75-.34-.75-.75v-4.39h-2.5v4.39c0 1.79 1.46 3.25 3.25 3.25h5.97v3.66c0 2.07-1.68 3.75-3.75 3.75h-7.87c-3.66 0-6.63 2.97-6.63 6.63 0 3.66 2.97 6.63 6.63 6.63h5.32c.59 3.12 3.33 5.49 6.62 5.49h3.35v-2h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-4.49h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-2h-3.35c-3.29 0-6.03 2.37-6.62 5.49h-5.32a4.131 4.131 0 0 1 0-8.26h7.87c3.45 0 6.25-2.8 6.25-6.25v-3.66h5.97c1.79 0 3.25-1.46 3.25-3.25V12.51c0-1.79-1.46-3.25-3.25-3.25Zm-8.15 41.4h.85v8.49h-.85c-2.34 0-4.24-1.9-4.24-4.24 0-2.34 1.9-4.24 4.24-4.24v-.01Z"/><path d="m51.27 14.87-5.02 9.14 5.84-.72-2.67 4.86 2.19 1.2 5.02-9.15-5.84.73 2.67-4.86-2.19-1.2Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M41.74 21.74v-1.25H23.13c1.71-.84 2.87-2.4 2.87-4.19v-2.7h-2.5v2.7c0 1.27-1.49 2.35-3.25 2.35S17 17.57 17 16.3v-2.7h-2.5v2.7c0 1.79 1.16 3.35 2.87 4.19h-3.09c-4.1 0-7.44 3.34-7.44 7.44v10.9H5.25A4.26 4.26 0 0 0 1 43.08v7.84h11v11.29h2.5V50.92h1.21v-7.84c0-1.17-.48-2.23-1.24-3h.04V27.83h-2.5v11.05c-.18-.02-.36-.05-.54-.05H9.35v-10.9c0-2.73 2.22-4.94 4.94-4.94h24.76a3.985 3.985 0 0 1-2.92 2.65L26.01 27.9v34.31h2.5V29.9l8.16-1.83a6.457 6.457 0 0 0 5.08-6.34l-.01.01ZM13.21 43.09v5.34h-9.7v-5.34c0-.96.79-1.75 1.75-1.75h6.2c.96 0 1.75.79 1.75 1.75Z"/><path d="M21.5 40.78H19v21.43h2.5V40.78ZM28.25 10h-.76c-.06-2.85-.53-6.23-3.99-6.88V2H17v1.12c-3.46.65-3.93 4.03-3.99 6.88h-.76v2.5h16V10ZM17 5.73v1.52h2.5V4.5H21v2.75h2.5V5.73c1.07.48 1.41 1.78 1.48 4.27h-9.46c.07-2.5.41-3.8 1.48-4.27Zm42.01 3.53h-5.97V2.25h-2.5v7.01h-5.97c-1.79 0-3.25 1.46-3.25 3.25v5.5h2.5v-5.5c0-.41.34-.75.75-.75h14.45c.41 0 .75.34.75.75v19.72c0 .41-.34.75-.75.75H44.57c-.41 0-.75-.34-.75-.75v-4.39h-2.5v4.39c0 1.79 1.46 3.25 3.25 3.25h5.97v3.66c0 2.07-1.68 3.75-3.75 3.75h-7.87c-3.66 0-6.63 2.97-6.63 6.63 0 3.66 2.97 6.63 6.63 6.63h5.32c.59 3.12 3.33 5.49 6.62 5.49h3.35v-2h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-4.49h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-2h-3.35c-3.29 0-6.03 2.37-6.62 5.49h-5.32a4.131 4.131 0 0 1 0-8.26h7.87c3.45 0 6.25-2.8 6.25-6.25v-3.66h5.97c1.79 0 3.25-1.46 3.25-3.25V12.51c0-1.79-1.46-3.25-3.25-3.25Zm-8.15 41.4h.85v8.49h-.85c-2.34 0-4.24-1.9-4.24-4.24 0-2.34 1.9-4.24 4.24-4.24v-.01Z"/><path d="m51.27 14.87-5.02 9.14 5.84-.72-2.67 4.86 2.19 1.2 5.02-9.15-5.84.73 2.67-4.86-2.19-1.2Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>

package/dist/collection/components/icon/svg/electric-charger-service-outline.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M41.74 21.74v-1.25H23.13c1.71-.84 2.87-2.4 2.87-4.19v-2.7h-2.5v2.7c0 1.27-1.49 2.35-3.25 2.35S17 17.57 17 16.3v-2.7h-2.5v2.7c0 1.79 1.16 3.35 2.87 4.19h-3.09c-4.1 0-7.44 3.34-7.44 7.44v10.9H5.25A4.26 4.26 0 0 0 1 43.08v7.84h11v11.29h2.5V50.92h1.21v-7.84c0-1.17-.48-2.23-1.24-3h.04V27.83h-2.5v11.05c-.18-.02-.36-.05-.54-.05H9.35v-10.9c0-2.73 2.22-4.94 4.94-4.94h24.76a3.985 3.985 0 0 1-2.92 2.65L26.01 27.9v34.31h2.5V29.9l8.16-1.83a6.457 6.457 0 0 0 5.08-6.34l-.01.01ZM13.21 43.09v5.34h-9.7v-5.34c0-.96.79-1.75 1.75-1.75h6.2c.96 0 1.75.79 1.75 1.75Z"/><path d="M21.5 40.78H19v21.43h2.5V40.78ZM28.25 10h-.76c-.06-2.85-.53-6.23-3.99-6.88V2H17v1.12c-3.46.65-3.93 4.03-3.99 6.88h-.76v2.5h16V10ZM17 5.73v1.52h2.5V4.5H21v2.75h2.5V5.73c1.07.48 1.41 1.78 1.48 4.27h-9.46c.07-2.5.41-3.8 1.48-4.27ZM59.01 9.26h-5.97V2.25h-2.5v7.01h-5.97c-1.79 0-3.25 1.46-3.25 3.25v5.5h2.5v-5.5c0-.41.34-.75.75-.75h14.45c.41 0 .75.34.75.75v19.72c0 .41-.34.75-.75.75H44.57c-.41 0-.75-.34-.75-.75v-4.39h-2.5v4.39c0 1.79 1.46 3.25 3.25 3.25h5.97v3.66c0 2.07-1.68 3.75-3.75 3.75h-7.87c-3.66 0-6.63 2.97-6.63 6.63 0 3.66 2.97 6.63 6.63 6.63h5.32c.59 3.12 3.33 5.49 6.62 5.49h3.35v-2h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-4.49h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-2h-3.35c-3.29 0-6.03 2.37-6.62 5.49h-5.32a4.131 4.131 0 0 1 0-8.26h7.87c3.45 0 6.25-2.8 6.25-6.25v-3.66h5.97c1.79 0 3.25-1.46 3.25-3.25V12.51c0-1.79-1.46-3.25-3.25-3.25Zm-8.15 41.4h.85v8.49h-.85c-2.34 0-4.24-1.9-4.24-4.24 0-2.34 1.9-4.24 4.24-4.24v-.01Z"/><path d="m51.27 14.87-5.02 9.14 5.84-.72-2.67 4.86 2.19 1.2 5.02-9.15-5.84.73 2.67-4.86-2.19-1.2Z"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M41.74 21.74v-1.25H23.13c1.71-.84 2.87-2.4 2.87-4.19v-2.7h-2.5v2.7c0 1.27-1.49 2.35-3.25 2.35S17 17.57 17 16.3v-2.7h-2.5v2.7c0 1.79 1.16 3.35 2.87 4.19h-3.09c-4.1 0-7.44 3.34-7.44 7.44v10.9H5.25A4.26 4.26 0 0 0 1 43.08v7.84h11v11.29h2.5V50.92h1.21v-7.84c0-1.17-.48-2.23-1.24-3h.04V27.83h-2.5v11.05c-.18-.02-.36-.05-.54-.05H9.35v-10.9c0-2.73 2.22-4.94 4.94-4.94h24.76a3.985 3.985 0 0 1-2.92 2.65L26.01 27.9v34.31h2.5V29.9l8.16-1.83a6.457 6.457 0 0 0 5.08-6.34l-.01.01ZM13.21 43.09v5.34h-9.7v-5.34c0-.96.79-1.75 1.75-1.75h6.2c.96 0 1.75.79 1.75 1.75Z"/><path d="M21.5 40.78H19v21.43h2.5V40.78ZM28.25 10h-.76c-.06-2.85-.53-6.23-3.99-6.88V2H17v1.12c-3.46.65-3.93 4.03-3.99 6.88h-.76v2.5h16V10ZM17 5.73v1.52h2.5V4.5H21v2.75h2.5V5.73c1.07.48 1.41 1.78 1.48 4.27h-9.46c.07-2.5.41-3.8 1.48-4.27Zm42.01 3.53h-5.97V2.25h-2.5v7.01h-5.97c-1.79 0-3.25 1.46-3.25 3.25v5.5h2.5v-5.5c0-.41.34-.75.75-.75h14.45c.41 0 .75.34.75.75v19.72c0 .41-.34.75-.75.75H44.57c-.41 0-.75-.34-.75-.75v-4.39h-2.5v4.39c0 1.79 1.46 3.25 3.25 3.25h5.97v3.66c0 2.07-1.68 3.75-3.75 3.75h-7.87c-3.66 0-6.63 2.97-6.63 6.63 0 3.66 2.97 6.63 6.63 6.63h5.32c.59 3.12 3.33 5.49 6.62 5.49h3.35v-2h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-4.49h4.49a1.25 1.25 0 0 0 0-2.5h-4.49v-2h-3.35c-3.29 0-6.03 2.37-6.62 5.49h-5.32a4.131 4.131 0 0 1 0-8.26h7.87c3.45 0 6.25-2.8 6.25-6.25v-3.66h5.97c1.79 0 3.25-1.46 3.25-3.25V12.51c0-1.79-1.46-3.25-3.25-3.25Zm-8.15 41.4h.85v8.49h-.85c-2.34 0-4.24-1.9-4.24-4.24 0-2.34 1.9-4.24 4.24-4.24v-.01Z"/><path d="m51.27 14.87-5.02 9.14 5.84-.72-2.67 4.86 2.19 1.2 5.02-9.15-5.84.73 2.67-4.86-2.19-1.2Z"/></svg>

package/dist/collection/components/icon/svg/navigation-add-less-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M50.061 31.135H14.706v2.5h35.355v-2.5Z"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M50.061 31.135H14.706v2.5h35.355v-2.5Z"/></svg>

package/dist/collection/components/icon/svg/navigation-add-less-solid.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M49.87 30.19H14.51v4h35.36v-4Z"/></svg>

package/dist/collection/components/icon/svg/navigation-add-more-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M33.635 14.707h-2.5v35.355h2.5V14.707Z"/><path d="M50.061 31.135H14.706v2.5h35.355v-2.5Z"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M49.87 30.94H33.44V14.51h-2.5v16.43H14.51v2.5h16.43v16.43h2.5V33.44h16.43v-2.5Z"/></svg>

package/dist/collection/components/icon/svg/navigation-add-more-solid.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M49.87 30.19H34.19V14.51h-4v15.68H14.51v4h15.68v15.68h4V34.19h15.68v-4Z"/></svg>

package/dist/collection/components/icon/svg/navigation-close-outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M20.768 18.999 19 20.767l25 25 1.767-1.768-25-25Z"/><path d="M44 19 19 44l1.768 1.768 25-25L44 19Z"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m45.38 20.38-1.76-1.76L32 30.23 20.38 18.62l-1.76 1.76L30.23 32 18.62 43.62l1.76 1.76L32 33.77l11.62 11.61 1.76-1.76L33.77 32l11.61-11.62Z"/></svg>

package/dist/collection/components/icon/svg/navigation-close-solid.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m45.91 20.91-2.82-2.82L32 29.17 20.91 18.09l-2.82 2.82L29.17 32 18.09 43.09l2.82 2.82L32 34.83l11.09 11.08 2.82-2.82L34.83 32l11.08-11.09Z"/></svg>

package/dist/collection/components/icon/svg/stocktaking-color.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M1.02 35.5v20.22l18.59 7.99 18.59-7.99V35.49l-18.59-7.97L1.02 35.5Zm23.78-3.03-14.18 6.07-5.18-2.22 14.17-6.08 5.19 2.22v.01Zm-5.19 9.92L13.8 39.9l14.17-6.07 5.81 2.49-14.17 6.07ZM3.52 38.22l14.84 6.36v15.88L3.52 54.08V38.22Zm17.34 22.24V44.58l14.84-6.36v15.86l-14.84 6.38ZM37.8 11.9H27.05v2.5H37.8v-2.5ZM33.19 18.05h-6.14v2.5h6.14v-2.5ZM37.8 24.19H27.05v2.5H37.8v-2.5Z"/><path d="M57.94 1.22H20.98c-2.07 0-3.75 1.68-3.75 3.75v20.47h2.5V4.97c0-.69.56-1.25 1.25-1.25h36.96c.69 0 1.25.56 1.25 1.25v48.49c0 .69-.56 1.25-1.25 1.25H40.46v2.5h17.48c2.07 0 3.75-1.68 3.75-3.75V4.97c0-2.07-1.68-3.75-3.75-3.75Z"/><path d="m48.66 45.75 7.01-8.77-1.95-1.57L48.45 42l-2.09-2.08-1.76 1.77 4.06 4.06ZM48.66 31.92l7.01-8.77-1.95-1.56-5.27 6.59-2.09-2.08-1.76 1.76 4.06 4.06ZM55.67 9.33l-1.95-1.56-5.27 6.59-2.09-2.09-1.76 1.77 4.06 4.06 7.01-8.77ZM33.053 50.225l-4.65 1.996.987 2.298 4.65-1.997-.987-2.297Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>

package/dist/collection/components/icon/svg/stocktaking-outline.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M1.02 35.5v20.22l18.59 7.99 18.59-7.99V35.49l-18.59-7.97L1.02 35.5Zm23.78-3.03-14.18 6.07-5.18-2.22 14.17-6.08 5.19 2.22v.01Zm-5.19 9.92L13.8 39.9l14.17-6.07 5.81 2.49-14.17 6.07ZM3.52 38.22l14.84 6.36v15.88L3.52 54.08V38.22Zm17.34 22.24V44.58l14.84-6.36v15.86l-14.84 6.38ZM37.8 11.9H27.05v2.5H37.8v-2.5ZM33.19 18.05h-6.14v2.5h6.14v-2.5ZM37.8 24.19H27.05v2.5H37.8v-2.5Z"/><path d="M57.94 1.22H20.98c-2.07 0-3.75 1.68-3.75 3.75v20.47h2.5V4.97c0-.69.56-1.25 1.25-1.25h36.96c.69 0 1.25.56 1.25 1.25v48.49c0 .69-.56 1.25-1.25 1.25H40.46v2.5h17.48c2.07 0 3.75-1.68 3.75-3.75V4.97c0-2.07-1.68-3.75-3.75-3.75Z"/><path d="m48.66 45.75 7.01-8.77-1.95-1.57L48.45 42l-2.09-2.08-1.76 1.77 4.06 4.06ZM48.66 31.92l7.01-8.77-1.95-1.56-5.27 6.59-2.09-2.08-1.76 1.76 4.06 4.06ZM55.67 9.33l-1.95-1.56-5.27 6.59-2.09-2.09-1.76 1.77 4.06 4.06 7.01-8.77ZM33.053 50.225l-4.65 1.996.987 2.298 4.65-1.997-.987-2.297Z"/></svg>

package/dist/collection/components/icon/svg/vehicle-5-doors-color.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.01 18.9 2.62-2.62v-5.92c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87Zm-22.24-2.53v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85ZM23.25 27.25v15.38c-.85 1.96-1.24 4.68-1.24 6.46v.85l.79.31c1.35.54 4.9 1.33 9.16 1.33s7.81-.8 9.16-1.33l.79-.31v-.85c0-1.79-.39-4.51-1.24-6.47V27.24c.8-.81 1.68-1.88 2.47-3.04v10.88l1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.2c.79 1.17 1.67 2.24 2.47 3.04l-.01.01Zm2.5.36c1.3-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c-1.31.41-3.67.86-6.21.86s-4.9-.45-6.21-.86v-14.4Zm-.53 16.86c1.67.49 4.19.91 6.73.91s5.07-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.25.89-7.42.89s-5.91-.47-7.42-.89c.08-1.17.31-2.57.68-3.73h.02Z"/><path d="M43.13 35.15v19.13c0 1.34-4.11 5.36-10.17 5.36h-2.02c-6.06 0-10.17-4.03-10.17-5.36V35.1l-2.5 2.51v16.67c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.65l-2.5-2.5Z"/><path d="M15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01ZM56.19 28.54l-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58ZM44.87 33.357l-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.01 18.9 2.62-2.62v-5.92c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87Zm-22.24-2.53v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85Zm2.48 10.88v15.38c-.85 1.96-1.24 4.68-1.24 6.46v.85l.79.31c1.35.54 4.9 1.33 9.16 1.33s7.81-.8 9.16-1.33l.79-.31v-.85c0-1.79-.39-4.51-1.24-6.47V27.24c.8-.81 1.68-1.88 2.47-3.04v10.88l1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.2c.79 1.17 1.67 2.24 2.47 3.04l-.01.01Zm2.5.36c1.3-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c-1.31.41-3.67.86-6.21.86s-4.9-.45-6.21-.86v-14.4Zm-.53 16.86c1.67.49 4.19.91 6.73.91s5.07-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.25.89-7.42.89s-5.91-.47-7.42-.89c.08-1.17.31-2.57.68-3.73h.02Z"/><path d="M43.13 35.15v19.13c0 1.34-4.11 5.36-10.17 5.36h-2.02c-6.06 0-10.17-4.03-10.17-5.36V35.1l-2.5 2.51v16.67c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.65l-2.5-2.5Z"/><path d="M15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01Zm40.75 13.34-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58Zm37.08-11.223-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>

package/dist/collection/components/icon/svg/vehicle-5-doors-outline.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.01 18.9 2.62-2.62v-5.92c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87Zm-22.24-2.53v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85ZM23.25 27.25v15.38c-.85 1.96-1.24 4.68-1.24 6.46v.85l.79.31c1.35.54 4.9 1.33 9.16 1.33s7.81-.8 9.16-1.33l.79-.31v-.85c0-1.79-.39-4.51-1.24-6.47V27.24c.8-.81 1.68-1.88 2.47-3.04v10.88l1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.2c.79 1.17 1.67 2.24 2.47 3.04l-.01.01Zm2.5.36c1.3-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c-1.31.41-3.67.86-6.21.86s-4.9-.45-6.21-.86v-14.4Zm-.53 16.86c1.67.49 4.19.91 6.73.91s5.07-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.25.89-7.42.89s-5.91-.47-7.42-.89c.08-1.17.31-2.57.68-3.73h.02Z"/><path d="M43.13 35.15v19.13c0 1.34-4.11 5.36-10.17 5.36h-2.02c-6.06 0-10.17-4.03-10.17-5.36V35.1l-2.5 2.51v16.67c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.65l-2.5-2.5ZM15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01ZM56.19 28.54l-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77Z"/><path d="m7.79 44.58 1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58ZM44.87 33.357l-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.01 18.9 2.62-2.62v-5.92c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87Zm-22.24-2.53v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85Zm2.48 10.88v15.38c-.85 1.96-1.24 4.68-1.24 6.46v.85l.79.31c1.35.54 4.9 1.33 9.16 1.33s7.81-.8 9.16-1.33l.79-.31v-.85c0-1.79-.39-4.51-1.24-6.47V27.24c.8-.81 1.68-1.88 2.47-3.04v10.88l1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.2c.79 1.17 1.67 2.24 2.47 3.04l-.01.01Zm2.5.36c1.3-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c-1.31.41-3.67.86-6.21.86s-4.9-.45-6.21-.86v-14.4Zm-.53 16.86c1.67.49 4.19.91 6.73.91s5.07-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.25.89-7.42.89s-5.91-.47-7.42-.89c.08-1.17.31-2.57.68-3.73h.02Z"/><path d="M43.13 35.15v19.13c0 1.34-4.11 5.36-10.17 5.36h-2.02c-6.06 0-10.17-4.03-10.17-5.36V35.1l-2.5 2.51v16.67c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.65l-2.5-2.5ZM15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01Zm40.75 13.34-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77Z"/><path d="m7.79 44.58 1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58Zm37.08-11.223-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z"/></svg>

package/dist/collection/components/icon/svg/vehicle-5-doors-solid-color.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.1 35.12 1.77-1.77.81.81v-12.6l-2.67-2.67 2.67-2.67v-5.71c0-4.69-3.81-8.5-8.5-8.5H26.82c-4.69 0-8.5 3.81-8.5 8.5v5.8l2.58 2.58-2.58 2.58v12.55l.69-.69 1.77 1.77-2.45 2.46v16.89c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.69l-2.58-2.58-.01.01Zm-19.31 7.29h-2.5v-14.4h2.5v14.4Zm8.2 6.84c-3.17 0-5.9-.47-7.41-.89.08-1.17.31-2.57.68-3.73 1.67.49 4.19.91 6.73.91s5.06-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.24.89-7.41.89Zm10.72-6.84h-2.5v-14.4h2.5v14.4Zm-3.54-16.97h-.02c-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.56.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38 2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87-.47 1.9-2.23 4.62-3.91 6.38Z"/><path d="M15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01ZM56.19 28.54l-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58ZM44.87 33.357l-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m43.1 35.12 1.77-1.77.81.81v-12.6l-2.67-2.67 2.67-2.67v-5.71c0-4.69-3.81-8.5-8.5-8.5H26.82c-4.69 0-8.5 3.81-8.5 8.5v5.8l2.58 2.58-2.58 2.58v12.55l.69-.69 1.77 1.77-2.45 2.46v16.89c0 3.43 6.15 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86V37.69l-2.58-2.58-.01.01Zm-19.31 7.29h-2.5v-14.4h2.5v14.4Zm8.2 6.84c-3.17 0-5.9-.47-7.41-.89.08-1.17.31-2.57.68-3.73 1.67.49 4.19.91 6.73.91s5.06-.41 6.73-.91c.37 1.16.6 2.56.68 3.73-1.51.42-4.24.89-7.41.89Zm10.72-6.84h-2.5v-14.4h2.5v14.4Zm-3.54-16.97h-.02c-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.56.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38 2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87-.47 1.9-2.23 4.62-3.91 6.38Z"/><path d="M15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01Zm40.75 13.34-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58Zm37.08-11.223-1.767 1.768 11.236 11.236 1.767-1.768L44.87 33.357Z" fill="var(--road-secondary-600, rgb(246, 164, 4))"/></svg>

package/dist/collection/components/input/input.js

@@ -127,7 +127,7 @@ export class Input {
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "data-cy": 'road-input' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
       h("slot", { name: "checklistPassword" })));
   }
   static get is() { return "road-input"; }

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

@@ -196,12 +196,12 @@ const Template = (args) => html`
     helper="${ifDefined(args.helper)}"
     size="${ifDefined(args.size)}"
     sizes="${ifDefined(args.sizes)}"
-    min="${ifDefined(args.min)}" 
-    max="${ifDefined(args.max)}" 
+    min="${ifDefined(args.min)}"
+    max="${ifDefined(args.max)}"
     maxlength="${ifDefined(args.maxlength)}"
     minlength="${ifDefined(args.minlength)}"
-    step="${ifDefined(args.step)}" 
-    value="${ifDefined(args.value)}" 
+    step="${ifDefined(args.step)}"
+    value="${ifDefined(args.value)}"
     pattern="${ifDefined(args.pattern)}"
     spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
@@ -268,4 +268,4 @@ export const Password = (args) => html`
   </div>
 </road-input>
 
-`;
+`;

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

@@ -0,0 +1,156 @@
+/*
+ * Profil Dropdown
+ *
+ * Index
+ * - Dropdown
+ * - Dropdown menu
+ */
+
+/**
+ * @prop --margin-top: Top margin of the menu
+ */
+
+/* PROFIL DROPDOWN
+ -------------------- */
+
+:host {
+  --margin-top: 0.5rem;
+  display: block;
+  font-size: 1rem;
+}
+
+.dropdown {
+  position: relative;
+  width: max-content;
+  font-family: var(--road-font);
+}
+
+.dropdown summary {
+  display: block;
+  cursor: pointer;
+  outline: none;
+}
+
+.dropdown summary::-webkit-details-marker { /* remove native arrow */
+  display: none;
+}
+
+.dropdown-button{
+  position: relative;
+  z-index: 1;
+  height: 3.5rem;
+  cursor: pointer;
+  border-radius: 0.25rem;
+}
+
+.dropdown-button:hover{
+  background: var(--road-grey-200);
+}
+
+/**
+ * Open state
+ */
+
+.dropdown[open] .dropdown-menu {
+  transform: scaleY(1);
+}
+
+.dropdown[open] .dropdown-menu.direction-top {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translate3d(0, -56px, 0);
+  will-change: transform;
+}
+
+/* MENU
+-------------------- */
+
+.dropdown-menu {
+  position: absolute;
+  top: 0;
+  left: 5.5rem;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 16.875rem;
+  padding: 0.5rem 0;
+  color: var(--road-grey-900);
+  background: var(--road-test);
+  border: 1px solid;
+  border-color: var(--road-grey-200);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.375rem 0.375rem rgba(41, 44, 51, 0.24);
+  transition: transform 0.2s ease-in-out;
+  transform: scaleY(0);
+  transform-origin: 0 0;
+}
+
+/* ITEM
+ -------------------- */
+
+road-item {
+  font-size: 1rem;
+}
+
+.profil-item {
+  display: flex;
+  padding-bottom: 1rem;
+  margin: 1rem;
+  cursor: auto;
+  border-bottom: 1px solid var(--road-grey-200);
+}
+
+.profil-item-info {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+}
+
+.profil-item-info-name {
+  font-weight: 700;
+}
+
+
+.profil-item road-avatar:hover{
+  box-shadow: none;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--road-grey-900);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: var(--road-grey-000);
+  border: none;
+  outline: none;
+}
+
+.dropdown-item-border {
+  border-color: var(--road-grey-200);
+  border-bottom: 1px solid;
+}
+
+.dropdown-item road-icon{
+  margin-right: 0.7rem;
+}
+
+/**
+ * Hover state
+ */
+
+road-item:hover:first-child,
+road-item.focus-visible:first-child {
+  background: none;
+}
+
+road-item:hover,
+road-item.focus-visible {
+  background: var(--road-grey-100);
+}

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

@@ -0,0 +1,59 @@
+import { h } from '@stencil/core';
+/**
+ * @slot  - Element how will open the dropdown when clicked
+ * @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>.
+
+ */
+export class Dropdown {
+  constructor() {
+    /**
+     * Set to `true` to open the dropdown menu and to `false` to close it.
+     */
+    this.isOpen = false;
+    /**
+     * Toggle the display when clicking element in slot
+     */
+    this.onClick = () => {
+      this.isOpen = !this.isOpen;
+    };
+  }
+  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" }))));
+  }
+  static get is() { return "road-profil-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["profil-dropdown.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["profil-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to open the dropdown menu and to `false` to close it."
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,68 @@
+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: 'Expand/Profil Dropdown',
+  component: 'road-profil-dropdown',
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    ' ': {
+      control: {
+        type: null,
+      },
+    },
+    list: {
+      control: {
+        type: 'text',
+      },
+    },
+    avatar: {
+      control: {
+        type: 'text',
+      },
+    },
+    avatarItem: {
+      control: {
+        type: 'text',
+      },
+    },
+    '--margin-top': {
+      table: {
+        defaultValue: { summary: '0.5rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    '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>`,
+    list: `<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: 1rem">
+        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: 1rem">
+        Log out
+      </road-label>
+    </road-item>
+  </road-list>`,
+  },
+};
+
+export const Playground = (args) => html`
+<road-profil-dropdown is-open=${ifDefined(args['is-open'])}>
+  ${unsafeHTML(args.list)}
+  ${unsafeHTML(args.avatar)}
+  ${unsafeHTML(args.avatarItem)}
+</road-profil-dropdown>
+`;

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

@@ -25,7 +25,6 @@ export class ProgressBar {
   }
   render() {
     const valueRound = Math.round(this.value / 5 / 5);
-    console.log(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))));
   }
   static get is() { return "road-progress"; }

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

@@ -44,6 +44,15 @@
   border-radius: 0 999em 999em 0;
 }
 
+/**
+ * Small
+ */
+
+:host(.btn-sm) {
+  height: 2rem;
+  font-size: 0.875rem;
+}
+
 /**
  * Active state
  */

package/dist/collection/components/segmented-button/segmented-button.js

@@ -5,6 +5,10 @@ import { Host, h } from '@stencil/core';
  */
 export class SegmentedButton {
   constructor() {
+    /**
+      * The Segmented buttons size.
+      */
+    this.size = 'md';
     /**
      * The selected tab component
      */
@@ -47,8 +51,10 @@ export class SegmentedButton {
   }
   render() {
     const { tabIndex, selected, tab } = this;
+    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
     return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
         'tab-selected': selected,
+        [`${sizeClass}`]: true,
       } }, h("button", { type: "button", tabIndex: -1, class: "button-native", part: "native" }, h("slot", null))));
   }
   static get is() { return "road-segmented-button"; }
@@ -65,6 +71,24 @@ export class SegmentedButton {
   }
   static get properties() {
     return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md'",
+          "resolved": "\"md\" | \"sm\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The Segmented buttons size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
       "selected": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
@@ -100,4 +101,24 @@ Playground.args = {
   </road-tab>`,
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  top: `<road-segmented-button-bar slot="top" selected-tab="tab-description">
+    <road-segmented-button tab="tab-description" size="sm">
+      Description
+    </road-segmented-button>
+
+    <road-segmented-button tab="tab-services" size="sm">
+      Services
+    </road-segmented-button>
+    </road-segmented-button-bar>`,
+  ' ': `<road-tab tab="tab-description">
+    Description
+  </road-tab>
+
+  <road-tab tab="tab-services">
+    Services
+  </road-tab>`,
+};
+
 

package/dist/collection/components/vertical-stepper/vertical-stepper.css

@@ -0,0 +1,25 @@
+/*
+ * Vertical Stepper
+ *
+ * Index
+ * - Item
+ * - Link
+ * - Icon
+ * - Title
+ * - Completed
+ */
+
+:host {
+  display: block;
+}
+
+/* VERTICAL STEPPER
+ -------------------- */
+
+.vertical-stepper {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  list-style: none;
+}
+