@roadtrip/components 2.21.0 → 2.24.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/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

@@ -1,12 +1,34 @@
+/*
+ * Counter
+ *
+ * Index
+ * - Input
+ * - Buttons
+ * - Sizes
+ */
+
+/**
+ * @prop --counter-margin-bottom: margin bottom of the field
+ */
+
 :host {
+  --counter-margin-bottom: 1rem;
+
   display: block;
 }
 
+/* INPUT
+ -------------------- */
+
 road-input {
   --input-text-align: center;
   --border-radius: 0;
+  --margin-bottom: var(--counter-margin-bottom);
 }
 
+/* BUTTONS
+ -------------------- */
+
 road-button {
   font-size: 1.125rem;
   background: var(--background-second);
@@ -16,3 +38,22 @@ road-button {
 road-button:hover {
   background: var(--background);
 }
+
+/* SIZES
+ -------------------- */
+
+.counter-md road-input {
+  --height: 2.5rem;
+}
+
+.counter-md road-button {
+  min-width: 2.5rem;
+}
+
+.counter-sm road-input {
+  --height: 2rem;
+}
+
+.counter-sm road-button {
+  min-width: 2rem;
+}