jvetrau-ds 0.2.1 → 0.2.3

package/styles.css

@@ -568,25 +568,69 @@
 }
 
 .button:hover {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-hover);
 }
 
 .button:focus-visible {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
   outline:
     var(--button-focus-width)
     solid
     var(--button-focus-color);
   outline-offset: var(--button-focus-offset);
+
+  /* depth */
+
+  /* motion */
 }
 
 .button:active {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-active);
 }
 
 .button:disabled,
 .button--disabled {
+  /* color */
   background: var(--button-bg-disabled);
   color: var(--button-color-disabled);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-disabled);
   cursor: not-allowed;
 }
@@ -594,25 +638,66 @@
 /* Rank */
 
 .button--primary {
+  /* color */
   --button-bg: var(--color-primary-2);
   --button-color: var(--color-text-primary-2);
   --button-focus-color: var(--color-primary-2);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--link {
+  /* color */
   --button-bg: transparent;
   --button-color: var(--color-link);
   --button-focus-color: var(--color-link);
+
+  /* typography */
+
+  /* size */
+  height: auto;
+  min-height: 0;
+  padding: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--link:disabled,
 .button--link.button--disabled {
+  /* color */
   background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* Density */
 
 .button--compact {
+  /* color */
+
+  /* typography */
+
+  /* size */
   /*
    * Compact presentation is intentionally left
    * token-driven but visually unfinished.
@@ -620,27 +705,66 @@
    * Add compact control dimensions when the
    * corresponding semantic tokens are available.
    */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* Mode */
 
 .button--toolbar {
+  /* color */
   --button-bg: transparent;
   --button-color: var(--color-text);
   --button-focus-color: var(--color-text);
 
   background: transparent;
+
+  /* typography */
+
+  /* size */
   padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--toolbar:disabled,
 .button--toolbar.button--disabled {
+  /* color */
   background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* State */
 
 .button--loading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   /*
    * Loading behavior is already defined by the
    * component contract:
@@ -654,11 +778,33 @@
 /* Content */
 
 .button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
   padding-inline: var(--button-padding-icon-only);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--toolbar.button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
   padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/calendar-month/calendar-month.css */
@@ -1095,7 +1241,7 @@
 /* src/components/checkbox/checkbox.css */
 .checkbox {
   /* color */
-  --checkbox-label-color: var(--color-text);
+  --checkbox-label-color: inherit;
 
   color: var(--checkbox-label-color);
 
@@ -1129,6 +1275,7 @@
 
 .checkbox__input {
   /* color */
+  accent-color: var(--color-primary-2);
 
   /* typography */
 
@@ -1166,11 +1313,33 @@
 }
 
 .checkbox--disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--checkbox-opacity-disabled);
   cursor: not-allowed;
 }
 
 .checkbox__input:disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }
 
@@ -2230,6 +2399,23 @@
   /* motion */
 }
 
+.field__action {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .field--disabled {
   opacity: var(--field-opacity-disabled);
 }
@@ -2386,7 +2572,6 @@
   /* typography */
 
   /* size */
-  gap: var(--flip-list-open-content-gap);
 
   /* border */
 
@@ -2406,8 +2591,9 @@
 
   /* size */
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -2468,27 +2654,6 @@
   /* motion */
 }
 
-.flip-list__main {
-  /* color */
-
-  /* typography */
-
-  /* size */
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--flip-list-trigger-column-gap);
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-
-  /* border */
-
-  /* depth */
-
-  /* motion */
-}
-
 .flip-list__title {
   /* color */
   color: inherit;
@@ -2657,6 +2822,23 @@
   /* motion */
 }
 
+.flip-list__item--open
+  .flip-list__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top:
+    var(--flip-list-open-content-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__content[hidden] {
   /* color */
 
@@ -3396,7 +3578,7 @@
 /* src/components/radio/radio.css */
 .radio {
   /* color */
-  --radio-label-color: var(--color-text);
+  --radio-label-color: auto;
 
   color: var(--radio-label-color);
 
@@ -3436,6 +3618,7 @@
 
 .radio__input {
   /* color */
+  accent-color: var(--color-primary-2);
 
   /* typography */
 
@@ -3467,11 +3650,33 @@
 }
 
 .radio--disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--radio-opacity-disabled);
   cursor: not-allowed;
 }
 
 .radio__input:disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }
 
@@ -4008,34 +4213,43 @@
   --tag-font-family: var(--font-note-family);
   --tag-font-weight: var(--font-note-weight);
   --tag-font-size: var(--font-note-size);
-  --tag-line-height: var(--font-note-line-height);
-  --tag-letter-spacing: var(--font-note-letter-spacing);
+  --tag-line-height:
+    var(--font-note-line-height);
+  --tag-letter-spacing:
+    var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
-  letter-spacing: var(--tag-letter-spacing);
+  letter-spacing:
+    var(--tag-letter-spacing);
 
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--padding-tag-horz);
-  --tag-padding-y: var(--padding-tag-vert);
+  --tag-padding-x:
+    var(--padding-tag-horz);
+  --tag-padding-y:
+    var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
   gap: var(--tag-gap);
   min-height: var(--tag-height);
-  padding: var(--tag-padding-y) var(--tag-padding-x);
+  padding:
+    var(--tag-padding-y)
+    var(--tag-padding-x);
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--radius-control);
+  --tag-border-radius:
+    var(--radius-control);
   --tag-border-color: transparent;
 
   border: none;
-  border-radius: var(--radius-control);
+  border-radius:
+    var(--tag-border-radius);
   outline: none;
 
   /* depth */
@@ -4044,14 +4258,23 @@
   --tag-transition-duration: 0.2s;
 
   transition:
-    border-color var(--tag-transition-duration) ease,
-    background-color var(--tag-transition-duration) ease,
-    color var(--tag-transition-duration) ease,
-    opacity var(--tag-transition-duration) ease;
+    border-color
+      var(--tag-transition-duration)
+      ease,
+    background-color
+      var(--tag-transition-duration)
+      ease,
+    color
+      var(--tag-transition-duration)
+      ease,
+    opacity
+      var(--tag-transition-duration)
+      ease;
 }
 
-.tag__content {
+.tag--context-error {
   /* color */
+  --tag-bg: var(--color-bad);
 
   /* typography */
 
@@ -4064,24 +4287,19 @@
   /* motion */
 }
 
-.tag:hover {
-}
+.tag--context-warning {
+  /* color */
+  --tag-bg: var(--color-med);
 
-.tag:focus {
-}
+  /* typography */
 
-.tag:focus-visible {
-}
+  /* size */
 
-.tag:active {
-}
+  /* border */
 
-.tag--context-error {
-  --tag-bg: var(--color-bad);
-}
+  /* depth */
 
-.tag--context-warning {
-  --tag-bg: var(--color-med);
+  /* motion */
 }
 
 /* src/components/textarea/textarea.css */