@roadtrip/components 2.25.0 → 2.25.1

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

@@ -1,4 +1,6 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { list } from '../../../.storybook/list';
 
 export default {
   title: 'Media/Icon',
@@ -6,23 +8,32 @@ export default {
 };
 
 export const Playground = ({ color, name, size, rotate, lazy }) => html`
-  <road-icon color="${color}" name="${name}" size="${size}" rotate="${rotate}" lazy="${lazy}"></road-icon>
+<road-icon 
+  color="${ifDefined(color)}" 
+  name="${ifDefined(name)}" 
+  size="${ifDefined(size)}" 
+  rotate="${ifDefined(rotate)}" 
+  lazy="${ifDefined(lazy)}"
+></road-icon>
 `;
 Playground.args = {
-  color: 'info',
-  name: 'alert-info',
-  size: 'lg',
-  lazy: false,
+  color: 'default',
+  name: 'alert-info-outline',
+  size: null,
+  lazy: null,
 };
 Playground.argTypes = {
   color: {
-    options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'white'],
+    options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'default', 'white'],
     control: {
       type: 'select',
     },
   },
   name: {
-    control: 'text',
+    options: list,
+    control: {
+      type: 'select',
+    },
   },
   size: {
     options: ['sm', 'md', 'lg', '3x', '4x'],
@@ -36,94 +47,109 @@ Playground.argTypes = {
       type: 'select',
     },
   },
+  icon: {
+    control: 'text',
+  },
   lazy: {
     control: 'boolean',
   },
+  'aria-label': {
+    control: 'text',
+  },
+  'aria-hidden': {
+    control: 'text',
+  },
+  src: {
+    control: 'text',
+  },
+  sanitize: {
+    control: 'boolean',
+  },
 };
 
 export const Sizes = () => html`
-  <road-icon name="alert-success" size="sm"></road-icon>
-  <road-icon name="alert-success" size="md"></road-icon>
-  <road-icon name="alert-success" size="lg"></road-icon>
-  <road-icon name="alert-success" size="3x"></road-icon>
-  <road-icon name="alert-success" size="4x"></road-icon>
+<road-icon name="alert-success" size="sm"></road-icon>
+<road-icon name="alert-success" size="md"></road-icon>
+<road-icon name="alert-success" size="lg"></road-icon>
+<road-icon name="alert-success" size="3x"></road-icon>
+<road-icon name="alert-success" size="4x"></road-icon>
 `;
 
 export const Rotate = () => html`
-  <road-icon name="navigation-chevron"></road-icon>
-  <road-icon name="navigation-chevron" rotate="90"></road-icon>
-  <road-icon name="navigation-chevron" rotate="180"></road-icon>
-  <road-icon name="navigation-chevron" rotate="270"></road-icon>
+<road-icon name="navigation-chevron"></road-icon>
+<road-icon name="navigation-chevron" rotate="90"></road-icon>
+<road-icon name="navigation-chevron" rotate="180"></road-icon>
+<road-icon name="navigation-chevron" rotate="270"></road-icon>
 `;
 
 export const Colors = () => html`
-  <road-icon name="location-pin-garage-norauto" color="primary"></road-icon>
-  <road-icon name="location-pin-garage" color="secondary"></road-icon>
-  <road-icon name="location-pin-all" color="accent"></road-icon>
+<road-icon name="location-pin-garage-norauto" color="primary"></road-icon>
+<road-icon name="location-pin-garage" color="secondary"></road-icon>
+<road-icon name="location-pin-all" color="accent"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="alert-info" color="info"></road-icon>
-  <road-icon name="alert-success" color="success"></road-icon>
-  <road-icon name="alert-warning" color="warning"></road-icon>
-  <road-icon name="alert-danger" color="danger"></road-icon>
+<road-icon name="alert-info" color="info"></road-icon>
+<road-icon name="alert-success" color="success"></road-icon>
+<road-icon name="alert-warning" color="warning"></road-icon>
+<road-icon name="alert-danger" color="danger"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="navigation-back"></road-icon>
-  <road-icon name="navigation-back" color="white" class="bg-primary"></road-icon>
+<road-icon name="navigation-back"></road-icon>
+<road-icon name="navigation-back" color="white" class="bg-primary"></road-icon>
 `;
 
 export const MultipleColors = () => html`
-  <road-icon name="vehicle-3-doors-color" size="4x"></road-icon>
-  <road-icon name="vehicle-3-doors-hatchback-color" size="4x"></road-icon>
+<road-icon name="vehicle-3-doors-color" size="4x"></road-icon>
+<road-icon name="vehicle-3-doors-hatchback-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="vehicle-5-doors-color" size="4x"></road-icon>
-  <road-icon name="vehicle-5-doors-hatchback-color" size="4x"></road-icon>
+<road-icon name="vehicle-5-doors-color" size="4x"></road-icon>
+<road-icon name="vehicle-5-doors-hatchback-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="vehicle-tires-front-color" size="4x"></road-icon>
-  <road-icon name="vehicle-tires-back-color" size="4x"></road-icon>
-  <road-icon name="vehicle-tires-all-color" size="4x"></road-icon>
+<road-icon name="vehicle-tires-front-color" size="4x"></road-icon>
+<road-icon name="vehicle-tires-back-color" size="4x"></road-icon>
+<road-icon name="vehicle-tires-all-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="car-wiper-front-color" size="4x"></road-icon>
-  <road-icon name="car-wiper-back-color" size="4x"></road-icon>
+<road-icon name="car-wiper-front-color" size="4x"></road-icon>
+<road-icon name="car-wiper-back-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="vehicle-car-light-front-color" size="4x"></road-icon>
-  <road-icon name="vehicle-car-light-back-color" size="4x"></road-icon>
-  <road-icon name="vehicle-car-light-inside-color" size="4x"></road-icon>
+<road-icon name="vehicle-car-light-front-color" size="4x"></road-icon>
+<road-icon name="vehicle-car-light-back-color" size="4x"></road-icon>
+<road-icon name="vehicle-car-light-inside-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="brake-color" size="4x"></road-icon>
-  <road-icon name="brake" color="secondary" size="4x"></road-icon>
+<road-icon name="brake-color" size="4x"></road-icon>
+<road-icon name="brake" color="secondary" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <div class="bg-primary">
-    <road-icon name="location-pin-outline-color" color="white" size="4x"></road-icon>
-    <road-icon name="vehicle-car-add-outline-color" color="white" size="4x"></road-icon>
-    <road-icon name="vehicle-car-checked-outline-color" color="white" size="4x"></road-icon>
-  </div>
+<div class="bg-primary">
+  <road-icon name="location-pin-outline-color" color="white" size="4x"></road-icon>
+  <road-icon name="vehicle-car-add-outline-color" color="white" size="4x"></road-icon>
+  <road-icon name="vehicle-car-checked-outline-color" color="white" size="4x"></road-icon>
+</div>
 
-  <br/>
+<br/>
 
-  <road-icon name="weather-sun-snow-color" size="4x"></road-icon>
-  <road-icon name="weather-sun-color" size="4x"></road-icon>
-  <road-icon name="weather-snow-color" size="4x"></road-icon>
+<road-icon name="weather-sun-snow-color" size="4x"></road-icon>
+<road-icon name="weather-sun-color" size="4x"></road-icon>
+<road-icon name="weather-snow-color" size="4x"></road-icon>
 
-  <br/>
+<br/>
 
-  <road-icon name="people-outline" color="primary" size="4x"></road-icon>
-  <road-icon name="people-vip-outline-color" size="4x"></road-icon>
-  <road-icon name="people-card-color" size="4x"></road-icon>
-  <road-icon name="people-car-fleet-color" size="4x"></road-icon>
-  <road-icon name="people-coworker-norauto-color" size="4x"></road-icon>
+<road-icon name="people-outline" color="primary" size="4x"></road-icon>
+<road-icon name="people-vip-outline-color" size="4x"></road-icon>
+<road-icon name="people-card-color" size="4x"></road-icon>
+<road-icon name="people-car-fleet-color" size="4x"></road-icon>
+<road-icon name="people-coworker-norauto-color" size="4x"></road-icon>
 `;

package/dist/collection/components/icon/svg/attachment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M50.357,8.541a6.75,6.75,0,0,0-9.546,0l-5.593,5.593-1.768-1.768,5.593-5.593a9.25,9.25,0,0,1,13.082,0l4.186,4.186a9.25,9.25,0,0,1,0,13.082L24.041,56.312a9.25,9.25,0,0,1-13.082,0L6.773,52.125a9.25,9.25,0,0,1,0-13.081L26.995,18.822a5.25,5.25,0,0,1,7.425,0l4.222,4.222a5.25,5.25,0,0,1,0,7.425L20.348,48.761l-1.768-1.768L36.874,28.7a2.75,2.75,0,0,0,0-3.889L32.652,20.59a2.75,2.75,0,0,0-3.889,0L8.541,40.812a6.75,6.75,0,0,0,0,9.546l4.186,4.186a6.75,6.75,0,0,0,9.546,0L54.544,22.273a6.75,6.75,0,0,0,0-9.546Z" transform="translate(0.937 0.936)" fill-rule="evenodd"/></svg>

package/dist/collection/components/icon/svg/check-list-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(10.32 8.483)"><path d="M39.839,56.71H3.519A3.524,3.524,0,0,1,0,53.19v-42a3.524,3.524,0,0,1,3.519-3.52H37.3v2.5H3.519A1.021,1.021,0,0,0,2.5,11.195v42a1.021,1.021,0,0,0,1.019,1.02h36.32a1.023,1.023,0,0,0,1.021-1.02v-42a1.022,1.022,0,0,0-1.021-1.02H37.3v-2.5h2.54a3.525,3.525,0,0,1,3.521,3.52v42a3.525,3.525,0,0,1-3.521,3.52" transform="translate(0 -7.675)"/><path d="M59,139.5v-3.855h3.855V139.5Zm10.7-.6v-2.527H84.932V138.9Zm-10.638-9.526v-3.855h3.855v3.855Zm10.638-.6v-2.527H84.932v2.527Zm0-10.126v-2.527H84.932v2.527Z" transform="translate(-50.253 -102.628)"/><path d="M2.624,9.152H0v-2.5H2.624V0h2.5V9.152Z" transform="translate(13.34 7.948) rotate(45)" fill="var(--accent-hover, rgb(236, 160, 0))"/></g></svg>

package/dist/collection/components/icon/svg/check-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(10.32 8.483)"><path d="M39.839,56.71H3.519A3.524,3.524,0,0,1,0,53.19v-42a3.524,3.524,0,0,1,3.519-3.52H37.3v2.5H3.519A1.021,1.021,0,0,0,2.5,11.195v42a1.021,1.021,0,0,0,1.019,1.02h36.32a1.023,1.023,0,0,0,1.021-1.02v-42a1.022,1.022,0,0,0-1.021-1.02H37.3v-2.5h2.54a3.525,3.525,0,0,1,3.521,3.52v42a3.525,3.525,0,0,1-3.521,3.52" transform="translate(0 -7.675)"/><path d="M59,139.5v-3.855h3.855V139.5Zm10.7-.6v-2.527H84.932V138.9Zm-10.638-9.526v-3.855h3.855v3.855Zm10.638-.6v-2.527H84.932v2.527Zm0-10.126v-2.527H84.932v2.527Z" transform="translate(-50.253 -102.628)"/><path d="M2.624,9.152H0v-2.5H2.624V0h2.5V9.152Z" transform="translate(13.34 7.948) rotate(45)"/></g></svg>

package/dist/collection/components/icon/svg/vehicle-car-all-authorize-outline-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M3508.261,2594.013a3.053,3.053,0,0,1-3.05-3.05v-1.32h-23.888v1.32a3.051,3.051,0,0,1-6.1,0v-14.987h-1.311a1.062,1.062,0,0,1,0-2.123h1.61l3.353-10a3.089,3.089,0,0,1,2.931-2.108h22.914a3.107,3.107,0,0,1,2.893,1.994,13.069,13.069,0,0,0,2.551,7.64l1.15,3.449v16.134A3.053,3.053,0,0,1,3508.261,2594.013Zm-30.915-4.37v1.32a.928.928,0,1,0,1.854,0v-1.32Zm29.985,0v1.32a.927.927,0,0,0,1.855,0v-1.32Zm-29.986-13.667v11.548h31.841v-11.548Zm4.466-12.112a.971.971,0,0,0-.922.665l-3.13,9.325h31.012l-3.131-9.325a.97.97,0,0,0-.921-.665Zm41.967,28.393a1.063,1.063,0,0,1-1.062-1.062v-1.644h-9.458v-2.123h9.458v-6.347h-9.458v-2.123h9.043l-.741-2.207a13.281,13.281,0,0,0,2.139-.3l.84,2.5h.708a1.062,1.062,0,1,1,0,2.123h-.409V2591.2A1.063,1.063,0,0,1,3523.778,2592.258Zm-4.346-6.452a1.486,1.486,0,1,1,1.486-1.487A1.489,1.489,0,0,1,3519.432,2585.805Zm-36.134-.051a3.9,3.9,0,1,1,2.756-1.142A3.9,3.9,0,0,1,3483.3,2585.755Zm0-5.674a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3483.3,2580.081Zm19.935,5.63a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,3503.233,2585.711Zm0-5.673a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3503.233,2580.038Zm17.59-5.484h0l-.282-.84a.2.2,0,0,0-.187-.134h-4.076a10.964,10.964,0,0,1-3.114-2.123h7.189a2.317,2.317,0,0,1,2.2,1.581l.436,1.3A11.071,11.071,0,0,1,3520.823,2574.554Z" transform="translate(-3471 -2541.056)"/><g transform="translate(36.61 9.327)"><g transform="translate(0 0)"><path d="M3405.476,2373.845a12.087,12.087,0,1,1,8.546-3.541A12.008,12.008,0,0,1,3405.476,2373.845Zm-4.943-13.17h0l-1.3,1.289,4.453,4.453,8.029-8.028-1.289-1.289-6.74,6.729-3.154-3.155Z" transform="translate(-3392.281 -2348.564)" fill="var(--success, rgb(0, 188, 13))"/></g></g><g transform="translate(8.398 36.859)"><path d="M12.137,33.25a3.9,3.9,0,1,0,3.9,3.9,3.9,3.9,0,0,0-3.9-3.9Zm0,5.674a1.775,1.775,0,1,1,1.775-1.775,1.775,1.775,0,0,1-1.775,1.775Z" transform="translate(-8.237 -33.208)" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M35.61,33.2a3.9,3.9,0,1,0,3.9,3.9,3.9,3.9,0,0,0-3.9-3.9Zm0,5.672A1.775,1.775,0,1,1,37.384,37.1a1.775,1.775,0,0,1-1.775,1.775Z" transform="translate(-11.775 -33.2)" fill="var(--accent-hover, rgb(236, 160, 0))"/></g><circle cx="1.486" cy="1.486" r="1.486" transform="translate(46.945 41.776)" fill="var(--accent-hover, rgb(236, 160, 0))"/></svg>

package/dist/collection/components/icon/svg/vehicle-car-all-authorize-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M3508.261,2594.013a3.053,3.053,0,0,1-3.05-3.05v-1.32h-23.888v1.32a3.051,3.051,0,0,1-6.1,0v-14.987h-1.311a1.062,1.062,0,0,1,0-2.123h1.61l3.353-10a3.089,3.089,0,0,1,2.931-2.108h22.914a3.107,3.107,0,0,1,2.893,1.994,13.069,13.069,0,0,0,2.551,7.64l1.15,3.449v16.134A3.053,3.053,0,0,1,3508.261,2594.013Zm-30.915-4.37v1.32a.928.928,0,1,0,1.854,0v-1.32Zm29.985,0v1.32a.927.927,0,0,0,1.855,0v-1.32Zm-29.986-13.667v11.548h31.841v-11.548Zm4.466-12.112a.971.971,0,0,0-.922.665l-3.13,9.325h31.012l-3.131-9.325a.97.97,0,0,0-.921-.665Zm41.967,28.393a1.063,1.063,0,0,1-1.062-1.062v-1.644h-9.458v-2.123h9.458v-6.347h-9.458v-2.123h9.043l-.78-2.205a13.3,13.3,0,0,0,2.146-.29l.872,2.5h.708a1.062,1.062,0,1,1,0,2.123h-.409V2591.2A1.063,1.063,0,0,1,3523.778,2592.258Zm-4.346-6.452a1.486,1.486,0,1,1,1.486-1.487A1.489,1.489,0,0,1,3519.432,2585.805Zm-36.134-.051a3.9,3.9,0,1,1,2.756-1.142A3.9,3.9,0,0,1,3483.3,2585.755Zm0-5.674a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3483.3,2580.081Zm19.935,5.63a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,3503.233,2585.711Zm0-5.673a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3503.233,2580.038Z" transform="translate(-3471 -2541.056)"/><g transform="translate(36.61 9.327)"><g transform="translate(0 0)"><path d="M3405.476,2373.845a12.087,12.087,0,1,1,8.546-3.541A12.008,12.008,0,0,1,3405.476,2373.845Zm-4.943-13.17h0l-1.3,1.289,4.453,4.453,8.029-8.028-1.289-1.289-6.74,6.729-3.154-3.155Z" transform="translate(-3392.281 -2348.564)"/></g></g></svg>

package/dist/collection/components/icon/svg/vehicle-car-all-unauthorize-outline-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M3657.261,2397.677a3.054,3.054,0,0,1-3.05-3.05v-1.32h-23.888v1.32a3.05,3.05,0,0,1-6.1,0V2379.64h-1.312a1.062,1.062,0,0,1,0-2.123h1.61l3.353-10a3.089,3.089,0,0,1,2.931-2.108h22.914a3.107,3.107,0,0,1,2.893,2,13.071,13.071,0,0,0,2.549,7.635l1.151,3.451v16.133A3.054,3.054,0,0,1,3657.261,2397.677Zm-30.915-4.37v1.32a.927.927,0,1,0,1.853,0v-1.32Zm29.985,0v1.32a.927.927,0,0,0,1.855,0v-1.32Zm-29.986-13.667v11.548h31.841V2379.64Zm4.465-12.112a.97.97,0,0,0-.922.666l-3.13,9.324h31.011l-3.131-9.324a.97.97,0,0,0-.921-.666Zm41.967,28.393a1.063,1.063,0,0,1-1.062-1.062v-1.643h-9.458v-2.123h9.458v-6.347h-9.458v-2.123h9.043l-.741-2.206a13.312,13.312,0,0,0,2.139-.3l.84,2.5h.709a1.062,1.062,0,1,1,0,2.123h-.409v10.114A1.063,1.063,0,0,1,3672.778,2395.92Zm-4.346-6.452a1.486,1.486,0,1,1,1.485-1.486A1.489,1.489,0,0,1,3668.432,2389.469Zm-36.134-.05a3.9,3.9,0,1,1,2.757-1.142A3.9,3.9,0,0,1,3632.3,2389.419Zm0-5.674a1.775,1.775,0,1,0,1.775,1.776A1.777,1.777,0,0,0,3632.3,2383.745Zm19.935,5.63a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,3652.233,2389.375Zm0-5.672a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3652.233,2383.7Zm17.59-5.484h0l-.282-.84a.2.2,0,0,0-.187-.134h-4.077a10.961,10.961,0,0,1-3.114-2.123h7.19a2.316,2.316,0,0,1,2.2,1.582l.436,1.3A11.059,11.059,0,0,1,3669.823,2378.218Z" transform="translate(-3619.87 -2344.416)"/><g transform="translate(37.849 10.739)"><path d="M3596.237,2372.432a12.087,12.087,0,1,1,8.546-3.54A12.006,12.006,0,0,1,3596.237,2372.432Zm-.9-7.549v2h1.8v-2Zm0-11.072v8.412h1.8v-8.412Z" transform="translate(-3584.151 -2348.261)" fill="var(--danger, rgb(255, 64, 59))"/></g><g transform="translate(8.528 37.163)"><path d="M12.137,33.25a3.9,3.9,0,1,0,3.9,3.9,3.9,3.9,0,0,0-3.9-3.9Zm0,5.674a1.775,1.775,0,1,1,1.775-1.775,1.775,1.775,0,0,1-1.775,1.775Z" transform="translate(-8.237 -33.208)" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M35.61,33.2a3.9,3.9,0,1,0,3.9,3.9,3.9,3.9,0,0,0-3.9-3.9Zm0,5.672A1.775,1.775,0,1,1,37.384,37.1a1.775,1.775,0,0,1-1.775,1.775Z" transform="translate(-11.775 -33.2)" fill="var(--accent-hover, rgb(236, 160, 0))"/></g><circle cx="1.486" cy="1.486" r="1.486" transform="translate(47.075 42.08)" fill="var(--accent-hover, rgb(236, 160, 0))"/></svg>

package/dist/collection/components/icon/svg/vehicle-car-all-unauthorize-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M3657.261,2397.677a3.054,3.054,0,0,1-3.05-3.05v-1.32h-23.888v1.32a3.05,3.05,0,0,1-6.1,0V2379.64h-1.312a1.062,1.062,0,0,1,0-2.123h1.61l3.353-10a3.089,3.089,0,0,1,2.931-2.108h22.914a3.107,3.107,0,0,1,2.893,2,13.071,13.071,0,0,0,2.549,7.635l1.151,3.451v16.133A3.054,3.054,0,0,1,3657.261,2397.677Zm-30.915-4.37v1.32a.927.927,0,1,0,1.853,0v-1.32Zm29.985,0v1.32a.927.927,0,0,0,1.855,0v-1.32Zm-29.986-13.667v11.548h31.841V2379.64Zm4.465-12.112a.97.97,0,0,0-.922.666l-3.13,9.324h31.011l-3.131-9.324a.97.97,0,0,0-.921-.666Zm41.967,28.393a1.063,1.063,0,0,1-1.062-1.062v-1.643h-9.458v-2.123h9.458v-6.347h-9.458v-2.123h9.043l-.781-2.2a13.329,13.329,0,0,0,2.146-.29l.873,2.494h.709a1.062,1.062,0,1,1,0,2.123h-.409v10.114A1.063,1.063,0,0,1,3672.778,2395.92Zm-4.346-6.452a1.486,1.486,0,1,1,1.485-1.486A1.489,1.489,0,0,1,3668.432,2389.469Zm-36.134-.05a3.9,3.9,0,1,1,2.757-1.142A3.9,3.9,0,0,1,3632.3,2389.419Zm0-5.674a1.775,1.775,0,1,0,1.775,1.776A1.777,1.777,0,0,0,3632.3,2383.745Zm19.935,5.63a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,3652.233,2389.375Zm0-5.672a1.775,1.775,0,1,0,1.775,1.775A1.777,1.777,0,0,0,3652.233,2383.7Z" transform="translate(-3619.87 -2344.416)"/><g transform="translate(37.849 10.739)"><path d="M3596.237,2372.432a12.087,12.087,0,1,1,8.546-3.54A12.006,12.006,0,0,1,3596.237,2372.432Zm-.9-7.549v2h1.8v-2Zm0-11.072v8.412h1.8v-8.412Z" transform="translate(-3584.151 -2348.261)"/></g></svg>

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

@@ -9,18 +9,18 @@
  */
 
 /**
- * @prop --input-text-align: align the content of the field
  * @prop --border-radius: Border radius of the field
- * @prop --margin-bottom: Bottom margin of the field
  * @prop --height: height of the field
+ * @prop --input-text-align: align the content of the field
+ * @prop --margin-bottom: Bottom margin of the field
  */
 
 
 :host {
-  --input-text-align: left;
+  --height: 3rem;
   --border-radius: 0.25rem;
+  --input-text-align: left;
   --margin-bottom: 1rem;
-  --height: 3rem;
 
   position: relative;
   display: block;

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

@@ -9,14 +9,172 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    spellcheck: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+    min: {
+      control: 'text',
+    },
+    minlength: {
+      control: 'number',
+    },
+    max: {
+      control: 'text',
+    },
+    maxlength: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    pattern: {
+      control: 'text',
+    },
+    value: {
+      control: 'number',
+    },
+    type: {
+      options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocapitalize: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocomplete: {
+      options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocorrect: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    enterkeyhint: {
+      options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+      control: {
+        type: 'select',
+      },
+    },
+    inputmode: {
+      options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
+      control: {
+        type: 'select',
+      },
+    },
+    debounce: {
+      control: 'number',
+    },
+    'input-id': {
+      control: 'text',
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
+    roadInput: {
+      action: 'roadInput',
+      control: {
+        type: null,
+      },
+    },
+    '--height': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--border-radius': {
+      table: {
+        defaultValue: { summary: '0.25rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--input-text-align': {
+      table: {
+        defaultValue: { summary: 'left' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    disabled: null,
+    readonly: null,
+    required: null,
+    autofocus: null,
+    spellcheck: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
   <road-input
-    label="${args.label}"
-    .disabled="${args.disabled}"
-    .required="${args.required}"
-    .autofocus="${args.autofocus}"
+    input-id="${ifDefined(args['input-id'])}"
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     size="${ifDefined(args.size)}"
     min="${ifDefined(args.min)}" 
@@ -25,136 +183,44 @@ export const Playground = (args) => html`
     minlength="${ifDefined(args.minlength)}"
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}" 
-    .spellcheck="${args.spellcheck}"
+    pattern="${ifDefined(args.pattern)}"
+    spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
-    type="${args.type}"
-    autocapitalize="${args.autocapitalize}"
-    autocomplete="${args.autocomplete}"
-    autocorrect="${args.autocorrect}"
+    type="${ifDefined(args.type)}"
+    autocapitalize="${ifDefined(args.autocapitalize)}"
+    autocomplete="${ifDefined(args.autocomplete)}"
+    autocorrect="${ifDefined(args.autocorrect)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
     inputmode="${ifDefined(args.inputmode)}"
-    .readonly="${args.readonly}"
-    debounce="${args.debounce}"
+    readonly="${ifDefined(args.readonly)}"
+    debounce="${ifDefined(args.debounce)}"
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
   ></road-input>
 `;
-Playground.args = {
-  label: 'Label',
-  type: 'text',
-};
-Playground.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  readonly: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  autofocus: {
-    control: 'boolean',
-  },
-  spellcheck: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  placeholder: {
-    control: 'text',
-  },
-  size: {
-    control: 'number',
-  },
-  min: {
-    control: 'number',
-  },
-  minlength: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  maxlength: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  type: {
-    options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocapitalize: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocomplete: {
-    options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocorrect: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  enterkeyhint: {
-    options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
-    control: {
-      type: 'select',
-    },
-  },
-  inputmode: {
-    options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
-    control: {
-      type: 'select',
-    },
-  },
-  debounce: {
-    control: 'number'
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-  roadInput: {
-    action: 'roadInput',
-  },
-};
 
-export const Default = () => html`
-  <road-input label="Label"></road-input>
-`;
+export const Playground = Template.bind({});
 
-export const WithValue = () => html`
-  <road-input label="Label" value="Value"></road-input>
-`;
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value: 'Value',
+};
 
-export const Date = () => html`
-  <road-input label="Date" type="date" value="2021-04-21" min="2021-01-01" max="2021-12-31"></road-input>
-`;
+export const Date = Template.bind({});
+Date.args = {
+  label: 'Date',
+  type: 'date',
+  value: '2021-04-21',
+  min: '2021-01-01',
+  max: '2021-12-31',
+};
 
-export const Disabled = () => html`
-  <road-input label="Label" disabled></road-input>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-input label="Label" error="This field is required"></road-input>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  error: 'This field is required',
+};