@ndwnu/design-system 5.0.0 → 6.0.0

package/core/style/styles.css

@@ -292,10 +292,10 @@
   position: absolute;
   pointer-events: auto;
   box-sizing: border-box;
-  z-index: 1000;
   display: flex;
   max-width: 100%;
   max-height: 100%;
+  z-index: 1000;
 }
 
 .cdk-overlay-backdrop {
@@ -304,21 +304,22 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
   pointer-events: auto;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   opacity: 0;
+  z-index: 1000;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-backdrop-showing {
   opacity: 1;
 }
 
-.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-  opacity: 0.6;
+@media (forced-colors: active) {
+  .cdk-overlay-backdrop-showing {
+    opacity: 0.6;
+  }
 }
-
 .cdk-overlay-dark-backdrop {
   background: rgba(0, 0, 0, 0.32);
 }
@@ -329,7 +330,7 @@
   opacity: 1;
 }
 
-.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing, .cdk-high-contrast-active .cdk-overlay-transparent-backdrop {
   opacity: 0;
   visibility: visible;
 }
@@ -340,11 +341,11 @@
 
 .cdk-overlay-connected-position-bounding-box {
   position: absolute;
-  z-index: 1000;
   display: flex;
   flex-direction: column;
   min-width: 1px;
   min-height: 1px;
+  z-index: 1000;
 }
 
 .cdk-global-scrollblock {
@@ -910,6 +911,10 @@ hr[noMargin] {
   color: var(--ndw-color-grey-500);
 }
 
+.input-container:has(> select[ndwInput]) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
+
 .input-container:has(> [ndwInput]) {
   display: flex;
   align-items: center;
@@ -920,7 +925,6 @@ hr[noMargin] {
   outline: var(--ndw-border-size-sm) solid transparent;
   outline-offset: calc(var(--ndw-border-size-sm) * -1);
   transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
-  padding-inline: var(--ndw-spacing-xs);
   gap: var(--ndw-spacing-xs);
 }
 .input-container:has(> [ndwInput]):has([ndwInput]:hover) {
@@ -964,6 +968,12 @@ hr[noMargin] {
 .input-container:has(> [ndwInput])[disabled] ndw-icon, .input-container:has(> [ndwInput])[readonly] ndw-icon {
   color: var(--ndw-color-grey-300);
 }
+.input-container:has(> [ndwInput]):has(> ndw-input-icon) {
+  padding-inline: var(--ndw-spacing-xs);
+}
+.input-container:has(> [ndwInput]):has(> ndw-picker-button) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
 .input-container:has(> [ndwInput]) > *:has(~ [ndwInput]) {
   color: var(--ndw-color-grey-400);
 }
@@ -973,9 +983,12 @@ hr[noMargin] {
 .input-container:has(> [ndwInput]) [ndwInput]:has(+ *) {
   padding-inline-end: 0;
 }
-.input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
+.input-container:has(> [ndwInput]) [ndwInput]:is(textarea) {
   padding-inline-end: var(--ndw-spacing-sm);
 }
+.input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
+  padding-inline-end: 0;
+}
 .input-container:has(> [ndwInput]) [ndwInput] {
   border: none;
   outline: none;
@@ -984,6 +997,9 @@ hr[noMargin] {
   border: none;
   outline: none;
 }
+.input-container:has(> [ndwInput]):has(textarea) {
+  padding-inline: 0;
+}
 
 [ndwInput] {
   display: flex;
@@ -1073,6 +1089,9 @@ select[ndwInput] option:not([disabled]) {
 textarea[ndwInput] {
   min-height: 4rem;
   padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  padding-inline: var(--ndw-spacing-sm);
+  line-height: normal;
+  white-space: pre-wrap;
   resize: vertical;
 }
 
@@ -1172,3 +1191,190 @@ textarea[ndwInput] {
   display: grid;
   padding: var(--ndw-spacing-sm);
 }
+
+.ndw-summary-card {
+  display: block;
+}
+.ndw-summary-card__wrapper {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  height: 100%;
+  align-items: start;
+  box-sizing: border-box;
+}
+.ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
+  grid-template-columns: max-content 1fr;
+}
+.ndw-summary-card__wrapper:has(a:focus:not(:active)) {
+  outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
+}
+.ndw-summary-card__content {
+  display: grid;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--ndw-spacing-2xs);
+  align-items: center;
+  border: 1px solid var(--ndw-color-grey-100);
+  border-radius: var(--ndw-border-radius-xs);
+  padding: var(--ndw-spacing-2xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-tag img {
+  display: block;
+  height: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: var(--ndw-spacing-3xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ndw-summary-card .ndw-summary-card-header {
+  display: flex;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-header__wrapper {
+  display: grid;
+  gap: var(--ndw-spacing-2xs);
+  justify-items: left;
+}
+.ndw-summary-card .ndw-summary-card-header__title {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-size: var(--ndw-base-font-size);
+  font-weight: var(--ndw-font-weight-bold);
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a {
+  color: inherit;
+  text-decoration: none;
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a:hover {
+  text-decoration: underline;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:focus {
+  outline: 0;
+}
+.ndw-summary-card .ndw-summary-card-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-500);
+}
+.ndw-summary-card .ndw-summary-card-avatar {
+  display: grid;
+  place-content: center;
+  position: relative;
+  width: 30px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
+  color: var(--ndw-color-grey-700);
+  background-color: var(--ndw-color-grey-300);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
+  color: var(--ndw-color-primary-700);
+  background-color: var(--ndw-color-primary-050);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
+  color: var(--ndw-color-info-500);
+  background-color: var(--ndw-color-info-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
+  color: var(--ndw-color-positive-500);
+  background-color: var(--ndw-color-positive-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
+  color: var(--ndw-color-critical-500);
+  background-color: var(--ndw-color-critical-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
+  color: var(--ndw-color-warning-500);
+  background-color: var(--ndw-color-warning-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
+  color: var(--ndw-color-alternative-500);
+  background-color: var(--ndw-color-alternative-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.ndw-summary-card .ndw-summary-card-avatar ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+}
+.ndw-summary-card .ndw-summary-card-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.ndw-summary-card .ndw-summary-card-actions--auto {
+  container-type: inline-size;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions {
+  gap: var(--ndw-spacing-2xs);
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--popover {
+  display: grid;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
+  display: flex;
+}
+.ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+  display: block;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+    display: none;
+  }
+}
+.ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+  display: none;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+    display: block;
+  }
+}

package/core/style/styles.scss

@@ -292,10 +292,10 @@
   position: absolute;
   pointer-events: auto;
   box-sizing: border-box;
-  z-index: 1000;
   display: flex;
   max-width: 100%;
   max-height: 100%;
+  z-index: 1000;
 }
 
 .cdk-overlay-backdrop {
@@ -304,21 +304,22 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
   pointer-events: auto;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   opacity: 0;
+  z-index: 1000;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-backdrop-showing {
   opacity: 1;
 }
 
-.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-  opacity: 0.6;
+@media (forced-colors: active) {
+  .cdk-overlay-backdrop-showing {
+    opacity: 0.6;
+  }
 }
-
 .cdk-overlay-dark-backdrop {
   background: rgba(0, 0, 0, 0.32);
 }
@@ -329,7 +330,7 @@
   opacity: 1;
 }
 
-.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing, .cdk-high-contrast-active .cdk-overlay-transparent-backdrop {
   opacity: 0;
   visibility: visible;
 }
@@ -340,11 +341,11 @@
 
 .cdk-overlay-connected-position-bounding-box {
   position: absolute;
-  z-index: 1000;
   display: flex;
   flex-direction: column;
   min-width: 1px;
   min-height: 1px;
+  z-index: 1000;
 }
 
 .cdk-global-scrollblock {
@@ -910,6 +911,10 @@ hr[noMargin] {
   color: var(--ndw-color-grey-500);
 }
 
+.input-container:has(> select[ndwInput]) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
+
 .input-container:has(> [ndwInput]) {
   display: flex;
   align-items: center;
@@ -920,7 +925,6 @@ hr[noMargin] {
   outline: var(--ndw-border-size-sm) solid transparent;
   outline-offset: calc(var(--ndw-border-size-sm) * -1);
   transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
-  padding-inline: var(--ndw-spacing-xs);
   gap: var(--ndw-spacing-xs);
 }
 .input-container:has(> [ndwInput]):has([ndwInput]:hover) {
@@ -964,6 +968,12 @@ hr[noMargin] {
 .input-container:has(> [ndwInput])[disabled] ndw-icon, .input-container:has(> [ndwInput])[readonly] ndw-icon {
   color: var(--ndw-color-grey-300);
 }
+.input-container:has(> [ndwInput]):has(> ndw-input-icon) {
+  padding-inline: var(--ndw-spacing-xs);
+}
+.input-container:has(> [ndwInput]):has(> ndw-picker-button) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
 .input-container:has(> [ndwInput]) > *:has(~ [ndwInput]) {
   color: var(--ndw-color-grey-400);
 }
@@ -973,9 +983,12 @@ hr[noMargin] {
 .input-container:has(> [ndwInput]) [ndwInput]:has(+ *) {
   padding-inline-end: 0;
 }
-.input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
+.input-container:has(> [ndwInput]) [ndwInput]:is(textarea) {
   padding-inline-end: var(--ndw-spacing-sm);
 }
+.input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
+  padding-inline-end: 0;
+}
 .input-container:has(> [ndwInput]) [ndwInput] {
   border: none;
   outline: none;
@@ -984,6 +997,9 @@ hr[noMargin] {
   border: none;
   outline: none;
 }
+.input-container:has(> [ndwInput]):has(textarea) {
+  padding-inline: 0;
+}
 
 [ndwInput] {
   display: flex;
@@ -1073,6 +1089,9 @@ select[ndwInput] option:not([disabled]) {
 textarea[ndwInput] {
   min-height: 4rem;
   padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  padding-inline: var(--ndw-spacing-sm);
+  line-height: normal;
+  white-space: pre-wrap;
   resize: vertical;
 }
 
@@ -1172,3 +1191,190 @@ textarea[ndwInput] {
   display: grid;
   padding: var(--ndw-spacing-sm);
 }
+
+.ndw-summary-card {
+  display: block;
+}
+.ndw-summary-card__wrapper {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  height: 100%;
+  align-items: start;
+  box-sizing: border-box;
+}
+.ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
+  grid-template-columns: max-content 1fr;
+}
+.ndw-summary-card__wrapper:has(a:focus:not(:active)) {
+  outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
+}
+.ndw-summary-card__content {
+  display: grid;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--ndw-spacing-2xs);
+  align-items: center;
+  border: 1px solid var(--ndw-color-grey-100);
+  border-radius: var(--ndw-border-radius-xs);
+  padding: var(--ndw-spacing-2xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-tag img {
+  display: block;
+  height: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: var(--ndw-spacing-3xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ndw-summary-card .ndw-summary-card-header {
+  display: flex;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-header__wrapper {
+  display: grid;
+  gap: var(--ndw-spacing-2xs);
+  justify-items: left;
+}
+.ndw-summary-card .ndw-summary-card-header__title {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-size: var(--ndw-base-font-size);
+  font-weight: var(--ndw-font-weight-bold);
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a {
+  color: inherit;
+  text-decoration: none;
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a:hover {
+  text-decoration: underline;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:focus {
+  outline: 0;
+}
+.ndw-summary-card .ndw-summary-card-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-500);
+}
+.ndw-summary-card .ndw-summary-card-avatar {
+  display: grid;
+  place-content: center;
+  position: relative;
+  width: 30px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
+  color: var(--ndw-color-grey-700);
+  background-color: var(--ndw-color-grey-300);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
+  color: var(--ndw-color-primary-700);
+  background-color: var(--ndw-color-primary-050);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
+  color: var(--ndw-color-info-500);
+  background-color: var(--ndw-color-info-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
+  color: var(--ndw-color-positive-500);
+  background-color: var(--ndw-color-positive-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
+  color: var(--ndw-color-critical-500);
+  background-color: var(--ndw-color-critical-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
+  color: var(--ndw-color-warning-500);
+  background-color: var(--ndw-color-warning-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
+  color: var(--ndw-color-alternative-500);
+  background-color: var(--ndw-color-alternative-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.ndw-summary-card .ndw-summary-card-avatar ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+}
+.ndw-summary-card .ndw-summary-card-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.ndw-summary-card .ndw-summary-card-actions--auto {
+  container-type: inline-size;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions {
+  gap: var(--ndw-spacing-2xs);
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--popover {
+  display: grid;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
+  display: flex;
+}
+.ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+  display: block;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+    display: none;
+  }
+}
+.ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+  display: none;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+    display: block;
+  }
+}