@roadtrip/components 2.22.1 → 2.25.0

package/dist/collection/components/col/col.css

@@ -16,13 +16,13 @@
 }
 
 :host(.col-1) {
-  flex: 0 0 8.333333%;
-  max-width: 8.333333%;
+  flex: 0 0 8.3333%;
+  max-width: 8.3333%;
 }
 
 :host(.col-2) {
-  flex: 0 0 16.666667%;
-  max-width: 16.666667%;
+  flex: 0 0 16.6667%;
+  max-width: 16.6667%;
 }
 
 :host(.col-3) {
@@ -31,13 +31,13 @@
 }
 
 :host(.col-4) {
-  flex: 0 0 33.333333%;
-  max-width: 33.333333%;
+  flex: 0 0 33.3333%;
+  max-width: 33.3333%;
 }
 
 :host(.col-5) {
-  flex: 0 0 41.666667%;
-  max-width: 41.666667%;
+  flex: 0 0 41.6667%;
+  max-width: 41.6667%;
 }
 
 :host(.col-6) {
@@ -46,13 +46,13 @@
 }
 
 :host(.col-7) {
-  flex: 0 0 58.333333%;
-  max-width: 58.333333%;
+  flex: 0 0 58.3333%;
+  max-width: 58.3333%;
 }
 
 :host(.col-8) {
-  flex: 0 0 66.666667%;
-  max-width: 66.666667%;
+  flex: 0 0 66.6667%;
+  max-width: 66.6667%;
 }
 
 :host(.col-9) {
@@ -61,13 +61,13 @@
 }
 
 :host(.col-10) {
-  flex: 0 0 83.333333%;
-  max-width: 83.333333%;
+  flex: 0 0 83.3333%;
+  max-width: 83.3333%;
 }
 
 :host(.col-11) {
-  flex: 0 0 91.666667%;
-  max-width: 91.666667%;
+  flex: 0 0 91.6667%;
+  max-width: 91.6667%;
 }
 
 :host(.col-12) {
@@ -76,11 +76,11 @@
 }
 
 :host(.offset-1) {
-  margin-left: 8.333333%;
+  margin-left: 8.3333%;
 }
 
 :host(.offset-2) {
-  margin-left: 16.666667%;
+  margin-left: 16.6667%;
 }
 
 :host(.offset-3) {
@@ -88,11 +88,11 @@
 }
 
 :host(.offset-4) {
-  margin-left: 33.333333%;
+  margin-left: 33.3333%;
 }
 
 :host(.offset-5) {
-  margin-left: 41.666667%;
+  margin-left: 41.6667%;
 }
 
 :host(.offset-6) {
@@ -100,11 +100,11 @@
 }
 
 :host(.offset-7) {
-  margin-left: 58.333333%;
+  margin-left: 58.3333%;
 }
 
 :host(.offset-8) {
-  margin-left: 66.666667%;
+  margin-left: 66.6667%;
 }
 
 :host(.offset-9) {
@@ -112,11 +112,11 @@
 }
 
 :host(.offset-10) {
-  margin-left: 83.333333%;
+  margin-left: 83.3333%;
 }
 
 :host(.offset-11) {
-  margin-left: 91.666667%;
+  margin-left: 91.6667%;
 }
 
 @media (min-width: 576px) {
@@ -134,13 +134,13 @@
   }
 
   :host(.col-sm-1) {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 8.3333%;
+    max-width: 8.3333%;
   }
 
   :host(.col-sm-2) {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
   }
 
   :host(.col-sm-3) {
@@ -149,13 +149,13 @@
   }
 
   :host(.col-sm-4) {
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
   }
 
   :host(.col-sm-5) {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 41.6667%;
+    max-width: 41.6667%;
   }
 
   :host(.col-sm-6) {
@@ -164,13 +164,13 @@
   }
 
   :host(.col-sm-7) {
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 58.3333%;
+    max-width: 58.3333%;
   }
 
   :host(.col-sm-8) {
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 66.6667%;
+    max-width: 66.6667%;
   }
 
   :host(.col-sm-9) {
@@ -179,13 +179,13 @@
   }
 
   :host(.col-sm-10) {
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 83.3333%;
+    max-width: 83.3333%;
   }
 
   :host(.col-sm-11) {
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 91.6667%;
+    max-width: 91.6667%;
   }
 
   :host(.col-sm-12) {
@@ -198,11 +198,11 @@
   }
 
   :host(.offset-sm-1) {
-    margin-left: 8.333333%;
+    margin-left: 8.3333%;
   }
 
   :host(.offset-sm-2) {
-    margin-left: 16.666667%;
+    margin-left: 16.6667%;
   }
 
   :host(.offset-sm-3) {
@@ -210,11 +210,11 @@
   }
 
   :host(.offset-sm-4) {
-    margin-left: 33.333333%;
+    margin-left: 33.3333%;
   }
 
   :host(.offset-sm-5) {
-    margin-left: 41.666667%;
+    margin-left: 41.6667%;
   }
 
   :host(.offset-sm-6) {
@@ -222,11 +222,11 @@
   }
 
   :host(.offset-sm-7) {
-    margin-left: 58.333333%;
+    margin-left: 58.3333%;
   }
 
   :host(.offset-sm-8) {
-    margin-left: 66.666667%;
+    margin-left: 66.6667%;
   }
 
   :host(.offset-sm-9) {
@@ -234,11 +234,11 @@
   }
 
   :host(.offset-sm-10) {
-    margin-left: 83.333333%;
+    margin-left: 83.3333%;
   }
 
   :host(.offset-sm-11) {
-    margin-left: 91.666667%;
+    margin-left: 91.6667%;
   }
 }
 
@@ -257,13 +257,13 @@
   }
 
   :host(.col-md-1) {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 8.3333%;
+    max-width: 8.3333%;
   }
 
   :host(.col-md-2) {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
   }
 
   :host(.col-md-3) {
@@ -272,13 +272,13 @@
   }
 
   :host(.col-md-4) {
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
   }
 
   :host(.col-md-5) {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 41.6667%;
+    max-width: 41.6667%;
   }
 
   :host(.col-md-6) {
@@ -287,13 +287,13 @@
   }
 
   :host(.col-md-7) {
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 58.3333%;
+    max-width: 58.3333%;
   }
 
   :host(.col-md-8) {
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 66.6667%;
+    max-width: 66.6667%;
   }
 
   :host(.col-md-9) {
@@ -302,13 +302,13 @@
   }
 
   :host(.col-md-10) {
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 83.3333%;
+    max-width: 83.3333%;
   }
 
   :host(.col-md-11) {
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 91.6667%;
+    max-width: 91.6667%;
   }
 
   :host(.col-md-12) {
@@ -321,11 +321,11 @@
   }
 
   :host(.offset-md-1) {
-    margin-left: 8.333333%;
+    margin-left: 8.3333%;
   }
 
   :host(.offset-md-2) {
-    margin-left: 16.666667%;
+    margin-left: 16.6667%;
   }
 
   :host(.offset-md-3) {
@@ -333,11 +333,11 @@
   }
 
   :host(.offset-md-4) {
-    margin-left: 33.333333%;
+    margin-left: 33.3333%;
   }
 
   :host(.offset-md-5) {
-    margin-left: 41.666667%;
+    margin-left: 41.6667%;
   }
 
   :host(.offset-md-6) {
@@ -345,11 +345,11 @@
   }
 
   :host(.offset-md-7) {
-    margin-left: 58.333333%;
+    margin-left: 58.3333%;
   }
 
   :host(.offset-md-8) {
-    margin-left: 66.666667%;
+    margin-left: 66.6667%;
   }
 
   :host(.offset-md-9) {
@@ -357,11 +357,11 @@
   }
 
   :host(.offset-md-10) {
-    margin-left: 83.333333%;
+    margin-left: 83.3333%;
   }
 
   :host(.offset-md-11) {
-    margin-left: 91.666667%;
+    margin-left: 91.6667%;
   }
 }
 
@@ -380,13 +380,13 @@
   }
 
   :host(.col-lg-1) {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 8.3333%;
+    max-width: 8.3333%;
   }
 
   :host(.col-lg-2) {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
   }
 
   :host(.col-lg-3) {
@@ -395,13 +395,13 @@
   }
 
   :host(.col-lg-4) {
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
   }
 
   :host(.col-lg-5) {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 41.6667%;
+    max-width: 41.6667%;
   }
 
   :host(.col-lg-6) {
@@ -410,13 +410,13 @@
   }
 
   :host(.col-lg-7) {
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 58.3333%;
+    max-width: 58.3333%;
   }
 
   :host(.col-lg-8) {
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 66.6667%;
+    max-width: 66.6667%;
   }
 
   :host(.col-lg-9) {
@@ -425,13 +425,13 @@
   }
 
   :host(.col-lg-10) {
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 83.3333%;
+    max-width: 83.3333%;
   }
 
   :host(.col-lg-11) {
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 91.6667%;
+    max-width: 91.6667%;
   }
 
   :host(.col-lg-12) {
@@ -444,11 +444,11 @@
   }
 
   :host(.offset-lg-1) {
-    margin-left: 8.333333%;
+    margin-left: 8.3333%;
   }
 
   :host(.offset-lg-2) {
-    margin-left: 16.666667%;
+    margin-left: 16.6667%;
   }
 
   :host(.offset-lg-3) {
@@ -456,11 +456,11 @@
   }
 
   :host(.offset-lg-4) {
-    margin-left: 33.333333%;
+    margin-left: 33.3333%;
   }
 
   :host(.offset-lg-5) {
-    margin-left: 41.666667%;
+    margin-left: 41.6667%;
   }
 
   :host(.offset-lg-6) {
@@ -468,11 +468,11 @@
   }
 
   :host(.offset-lg-7) {
-    margin-left: 58.333333%;
+    margin-left: 58.3333%;
   }
 
   :host(.offset-lg-8) {
-    margin-left: 66.666667%;
+    margin-left: 66.6667%;
   }
 
   :host(.offset-lg-9) {
@@ -480,11 +480,11 @@
   }
 
   :host(.offset-lg-10) {
-    margin-left: 83.333333%;
+    margin-left: 83.3333%;
   }
 
   :host(.offset-lg-11) {
-    margin-left: 91.666667%;
+    margin-left: 91.6667%;
   }
 }
 
@@ -503,13 +503,13 @@
   }
 
   :host(.col-xl-1) {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 8.3333%;
+    max-width: 8.3333%;
   }
 
   :host(.col-xl-2) {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
   }
 
   :host(.col-xl-3) {
@@ -518,13 +518,13 @@
   }
 
   :host(.col-xl-4) {
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
   }
 
   :host(.col-xl-5) {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 41.6667%;
+    max-width: 41.6667%;
   }
 
   :host(.col-xl-6) {
@@ -533,13 +533,13 @@
   }
 
   :host(.col-xl-7) {
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 58.3333%;
+    max-width: 58.3333%;
   }
 
   :host(.col-xl-8) {
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 66.6667%;
+    max-width: 66.6667%;
   }
 
   :host(.col-xl-9) {
@@ -548,13 +548,13 @@
   }
 
   :host(.col-xl-10) {
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 83.3333%;
+    max-width: 83.3333%;
   }
 
   :host(.col-xl-11) {
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 91.6667%;
+    max-width: 91.6667%;
   }
 
   :host(.col-xl-12) {
@@ -567,11 +567,11 @@
   }
 
   :host(.offset-xl-1) {
-    margin-left: 8.333333%;
+    margin-left: 8.3333%;
   }
 
   :host(.offset-xl-2) {
-    margin-left: 16.666667%;
+    margin-left: 16.6667%;
   }
 
   :host(.offset-xl-3) {
@@ -579,11 +579,11 @@
   }
 
   :host(.offset-xl-4) {
-    margin-left: 33.333333%;
+    margin-left: 33.3333%;
   }
 
   :host(.offset-xl-5) {
-    margin-left: 41.666667%;
+    margin-left: 41.6667%;
   }
 
   :host(.offset-xl-6) {
@@ -591,11 +591,11 @@
   }
 
   :host(.offset-xl-7) {
-    margin-left: 58.333333%;
+    margin-left: 58.3333%;
   }
 
   :host(.offset-xl-8) {
-    margin-left: 66.666667%;
+    margin-left: 66.6667%;
   }
 
   :host(.offset-xl-9) {
@@ -603,10 +603,10 @@
   }
 
   :host(.offset-xl-10) {
-    margin-left: 83.333333%;
+    margin-left: 83.3333%;
   }
 
   :host(.offset-xl-11) {
-    margin-left: 91.666667%;
+    margin-left: 91.6667%;
   }
 }

package/dist/collection/components/col/col.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content of the column.
  */
 export class Col {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-col"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapse/collapse.css

@@ -5,7 +5,6 @@
  * - Collapse
  * - Content
  * - Button
- *
  */
 
 /**
@@ -13,6 +12,7 @@
  * @prop --btn-padding-end: Right padding of the button
  * @prop --btn-margin-bottom: Bottom margin of the button
  * @prop --btn-font-size: Font size of the text button
+ * @prop --max-height: maximum height of the collapse content
  */
 
 /* COLLAPSE
@@ -23,6 +23,7 @@
   --btn-padding-start: 1rem;
   --btn-padding-end: 1rem;
   --btn-font-size: 1rem;
+  --max-height: 500px;
 
   display: block;
 }
@@ -41,7 +42,7 @@
  */
 
 .collapse-open {
-  max-height: 300px;
+  max-height: var(--max-height);
 }
 
 /* BUTTON

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

@@ -5,7 +5,6 @@
  * - Input
  * - Buttons
  * - Sizes
- *
  */
 
 /**

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Element, Event } from '@stencil/core';
+import { Component, h, Prop, Element, Event } from '@stencil/core';
 export class Counter {
   constructor() {
     /**
@@ -19,11 +19,10 @@ export class Counter {
     };
   }
   render() {
-    return (h(Host, null,
-      h("road-input-group", { class: this.size && `counter-${this.size}` },
-        h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease }, "-"),
-        h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
-        h("road-button", { slot: "append", size: this.size, onClick: this.increase }, "+"))));
+    return (h("road-input-group", { class: this.size && `counter-${this.size}` },
+      h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease }, "-"),
+      h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
+      h("road-button", { slot: "append", size: this.size, onClick: this.increase }, "+")));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }