jvetrau-ds 0.2.8 → 0.2.10

package/styles.css

@@ -2758,7 +2758,7 @@
   --flip-list-open-content-gap:
     var(--font-h2-margin);
   --flip-list-trigger-column-gap:
-    var(--margin-item);
+    var(--margin-icon);
   --flip-list-scroll-margin-block-start:
     0px;
 
@@ -2831,74 +2831,92 @@
   /* motion */
 }
 
-.flip-list__trigger {
+.flip-list__status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --flip-list-status-gap:
+    var(--margin-tag);
+
+  display: block;
+  align-self: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  margin:
+    0
+    0
+    var(--flip-list-status-gap)
+    0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__heading {
   /* color */
-  background: transparent;
-  color: var(--flip-list-trigger-color);
 
   /* typography */
-  font: inherit;
-  text-align: left;
 
   /* size */
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--flip-list-trigger-column-gap);
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  padding: 0;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.flip-list__trigger:focus-visible {
+.flip-list__trigger {
   /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
 
   /* typography */
+  font: inherit;
+  text-align: left;
 
   /* size */
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
 
   /* border */
-  outline:
-    var(--size-border-width-focus)
-    solid
-    currentColor;
-  outline-offset:
-    var(--size-border-offset-focus);
+  border: 0;
 
   /* depth */
 
   /* motion */
+  cursor: pointer;
 }
 
-.flip-list__status {
+.flip-list__trigger:focus-visible {
   /* color */
 
   /* typography */
 
   /* size */
-  --flip-list-status-gap:
-    var(--margin-tag);
-
-  display: block;
-  align-self: flex-start;
-  min-width: 0;
-  max-width: 100%;
-  margin:
-    0
-    0
-    var(--flip-list-status-gap)
-    0;
 
   /* border */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
 
   /* depth */
 
@@ -2927,7 +2945,6 @@
   text-underline-offset: from-font;
 
   /* size */
-  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
@@ -2955,6 +2972,21 @@
   /* motion */
 }
 
+.flip-list__status-icon {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 0 0 auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__meta {
   /* color */
   color: var(--flip-list-meta-color);
@@ -2976,6 +3008,7 @@
   flex: 0 0 auto;
   min-width: 0;
   max-width: 100%;
+  margin-left: auto;
 
   /* border */
 
@@ -4264,7 +4297,7 @@
 
   position: relative;
   display: inline-block;
-  width: 100%;
+  box-sizing: border-box;
 
   /* border */
   --select-border-width: var(--size-border-width-base);
@@ -4285,6 +4318,21 @@
   --select-transition-duration: 0.2s;
 }
 
+.select--width-short {
+  /* size */
+  width: fit-content;
+}
+
+.select--width-default {
+  /* size */
+  width: 400px;
+}
+
+.select--width-max {
+  /* size */
+  width: 100%;
+}
+
 .select__field {
   /* color */
   background: var(--select-bg);
@@ -4295,6 +4343,7 @@
   letter-spacing: inherit;
 
   /* size */
+  box-sizing: border-box;
   width: 100%;
   height: var(--select-height);
   padding-left: var(--select-padding-x);
@@ -4700,6 +4749,7 @@
   --textarea-padding-x: var(--padding-control-horz);
   --textarea-padding-y: var(--padding-control-horz);
 
+  box-sizing: border-box;
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
@@ -4729,6 +4779,30 @@
     background-color var(--textarea-transition-duration) ease;
 }
 
+.textarea--width-short {
+  /* size */
+  width: auto;
+}
+
+.textarea--width-default {
+  /* size */
+  width: 400px;
+}
+
+.textarea--width-max {
+  /* size */
+  width: 100%;
+}
+
+.textarea--auto-grow {
+  /* size */
+  height: var(--textarea-auto-height);
+
+  /* motion */
+  overflow-y: hidden;
+  resize: none;
+}
+
 .textarea::placeholder {
   color: var(--textarea-placeholder);
 }