jvetrau-ds 0.2.3 → 0.2.5

package/styles.css

@@ -718,14 +718,15 @@
 .button--toolbar {
   /* color */
   --button-bg: transparent;
-  --button-color: var(--color-text);
-  --button-focus-color: var(--color-text);
+  --button-color: inherit;
+  --button-focus-color: currentColor;
 
   background: transparent;
 
   /* typography */
 
   /* size */
+  min-height: 0;
   padding-inline: 0;
 
   /* border */
@@ -1062,12 +1063,11 @@
   --card-padding: var(--padding-container);
   --card-gap: var(--margin-container-item);
   --card-title-gap: var(--font-h2-margin);
-  --card-content-min-height: 200px;
 
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--card-gap);
   width: var(--card-width);
   padding: var(--card-padding);
@@ -1100,10 +1100,25 @@
   /* motion */
 }
 
-.card__title {
+.card__heading {
   /* color */
   color: inherit;
 
+  /* typography */
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__heading--h2 {
+  /* color */
+
   /* typography */
   font-family: var(--font-h2-family);
   font-size: var(--font-h2);
@@ -1112,7 +1127,25 @@
   letter-spacing: var(--font-h2-letter-spacing);
 
   /* size */
-  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__heading--h3 {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3);
+  font-weight: var(--font-h3-weight);
+  line-height: var(--font-h3-line);
+  letter-spacing: var(--font-h3-letter-spacing);
+
+  /* size */
 
   /* border */
 
@@ -1148,7 +1181,6 @@
   /* typography */
 
   /* size */
-  min-height: var(--card-content-min-height);
   width: 100%;
 
   /* border */
@@ -1187,6 +1219,7 @@
   --card-group-min-column-width: var(--size-container-width-min);
 
   display: grid;
+  align-items: stretch;
   gap: var(--card-group-gap);
   width: 100%;
 
@@ -1198,6 +1231,10 @@
 }
 
 .card-group--auto {
+  /* color */
+
+  /* typography */
+
   /* size */
   grid-template-columns:
     repeat(
@@ -1207,34 +1244,106 @@
         1fr
       )
     );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-1 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      1,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-2 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      2,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-3 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      3,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .card-group--columns-4 {
+  /* color */
+
+  /* typography */
+
   /* size */
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns:
+    repeat(
+      4,
+      minmax(0, 1fr)
+    );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 @media (max-width: 720px) {
   .card-group--columns-2,
   .card-group--columns-3,
   .card-group--columns-4 {
+    /* color */
+
+    /* typography */
+
     /* size */
     grid-template-columns: 1fr;
+
+    /* border */
+
+    /* depth */
+
+    /* motion */
   }
 }
 
@@ -2208,24 +2317,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 +2476,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 */
@@ -3326,12 +3577,11 @@
   --panel-padding: var(--padding-container);
   --panel-gap: var(--margin-container-item);
   --panel-title-gap: var(--font-h2-margin);
-  --panel-content-min-height: 200px;
 
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--panel-gap);
   width: var(--panel-width);
   padding: var(--panel-padding);
@@ -3351,26 +3601,56 @@
   --panel-bg: transparent;
   --panel-color: var(--color-text);
 
+  /* typography */
+
   /* size */
-  justify-content: flex-start;
-  padding: auto 0;
+  padding: 0;
 
   /* border */
   border-radius: 0;
+
+  /* depth */
+
+  /* motion */
 }
 
 .panel__header {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
   flex-direction: column;
   gap: var(--panel-title-gap);
   width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .panel__heading {
   /* color */
   color: inherit;
 
+  /* typography */
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.panel__heading--h2 {
+  /* color */
+
   /* typography */
   font-family: var(--font-h2-family);
   font-size: var(--font-h2);
@@ -3379,7 +3659,31 @@
   letter-spacing: var(--font-h2-letter-spacing);
 
   /* size */
-  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.panel__heading--h3 {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3);
+  font-weight: var(--font-h3-weight);
+  line-height: var(--font-h3-line);
+  letter-spacing: var(--font-h3-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .panel__description {
@@ -3395,12 +3699,27 @@
 
   /* size */
   margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .panel__content {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: 100%;
-  min-height: var(--panel-content-min-height);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/progressbar/progressbar.css */
@@ -4823,6 +5142,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 */
@@ -4858,7 +5222,7 @@
   /* color */
   --modal-backdrop-bg: rgb(0 0 0 / 40%);
 
-  background: var(--modal-backdrop-bg);
+  color: inherit;
 
   /* typography */
 
@@ -4866,17 +5230,36 @@
   --modal-padding: var(--size-grid-padding-horz);
   --modal-content-width: min(640px, 100%);
   --modal-content-width-wide: min(1120px, 100%);
-  --modal-content-height-fullscreen: 100%;
+  --modal-close-offset: var(--padding-container);
 
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+
+  margin: 0;
+  padding: var(--modal-padding);
+
+  border: 0;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
-  padding: var(--modal-padding);
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal::backdrop {
+  /* color */
+  background: var(--modal-backdrop-bg);
+
+  /* typography */
+
+  /* size */
 
   /* border */
 
@@ -4885,14 +5268,17 @@
   /* motion */
 }
 
-.modal__content {
+.modal__surface {
   /* color */
 
   /* typography */
 
   /* size */
+  position: relative;
+
   width: var(--modal-content-width);
   max-height: 100%;
+
   overflow: auto;
 
   /* border */
@@ -4902,36 +5288,92 @@
   /* motion */
 }
 
-.modal--wide .modal__content {
+.modal__close {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  top: var(--modal-close-offset);
+  right: var(--modal-close-offset);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal--wide .modal__surface {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: var(--modal-content-width-wide);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .modal--fullscreen {
+  /* color */
+
+  /* typography */
+
   /* size */
-  align-items: flex-start;
+  align-items: stretch;
   justify-content: stretch;
 
   padding: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.modal--fullscreen .modal__content {
+.modal--fullscreen .modal__surface {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+  align-items: stretch;
 
   width: 100%;
-  height: var(--modal-content-height-fullscreen);
-
+  height: 100%;
   max-height: none;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.modal--fullscreen .modal__content > * {
+.modal--fullscreen .panel {
+  /* color */
+
+  /* typography */
+
   /* size */
   flex: 1;
-  width: 100%;
   min-height: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/patterns/screen-header/screen-header.css */