jvetrau-ds 0.2.2 → 0.2.4

package/styles.css

@@ -2208,24 +2208,122 @@
   /* motion */
 }
 
+.dropdown__menu::before {
+  /* color */
+  content: '';
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .dropdown--bottom-start .dropdown__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
   top: calc(100% + var(--dropdown-offset));
   left: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown--bottom-end .dropdown__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
   top: calc(100% + var(--dropdown-offset));
   right: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown--top-start .dropdown__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
   bottom: calc(100% + var(--dropdown-offset));
   left: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown--top-end .dropdown__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
   right: 0;
   bottom: calc(100% + var(--dropdown-offset));
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.dropdown--bottom-start .dropdown__menu::before,
+.dropdown--bottom-end .dropdown__menu::before {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  top: calc(-1 * var(--dropdown-offset));
+  right: 0;
+  left: 0;
+  height: var(--dropdown-offset);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.dropdown--top-start .dropdown__menu::before,
+.dropdown--top-end .dropdown__menu::before {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  right: 0;
+  bottom: calc(-1 * var(--dropdown-offset));
+  left: 0;
+  height: var(--dropdown-offset);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown__item {
@@ -2269,23 +2367,67 @@
 }
 
 .dropdown__item:hover {
+  /* color */
   background: var(--dropdown-item-bg-hover);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown__item--selected {
+  /* color */
   background: var(--dropdown-item-bg-selected);
   color: var(--dropdown-item-color-selected);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .dropdown__item--disabled,
 .dropdown__item:disabled {
+  /* color */
   color: var(--dropdown-item-color-disabled);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }
 
 .dropdown__item--disabled:hover,
 .dropdown__item:disabled:hover {
+  /* color */
   background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/field/field.css */
@@ -2572,7 +2714,6 @@
   /* typography */
 
   /* size */
-  gap: var(--flip-list-open-content-gap);
 
   /* border */
 
@@ -2592,8 +2733,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%;
@@ -2654,27 +2796,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;
@@ -2843,6 +2964,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 */
 
@@ -4217,34 +4355,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 */
@@ -4253,14 +4400,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 */
 
@@ -4273,24 +4429,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 */
@@ -4814,6 +4965,51 @@
   /* motion */
 }
 
+.header__avatar-trigger {
+  /* color */
+  background: transparent;
+  color: inherit;
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* depth */
+
+  /* motion */
+  cursor: pointer;
+}
+
+.header__avatar-trigger:focus-visible {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/patterns/masthead/masthead.css */
 .masthead {
   /* color */