@ndwnu/design-system 14.2.1 → 14.3.0

package/styles/components/_label.scss

@@ -1,23 +1,23 @@
-[ndwLabel] {
-  align-content: center;
-  align-items: center;
-  display: grid;
-  font-family: var(--ndw-font-family-body);
-  font-size: var(--ndw-font-size-sm);
-  font-weight: var(--ndw-font-weight-bold);
-  gap: var(--ndw-spacing-3xs);
-  grid-template-columns: repeat(3, auto);
-  justify-content: start;
-  line-height: 100%;
-  margin-bottom: var(--ndw-spacing-2xs);
-
-  ndw-icon {
-    color: var(--ndw-color-grey-400);
-    font-size: var(--ndw-icon-size-md);
-    margin-top: calc(var(--ndw-spacing-3xs) * -1);
-  }
-
-  .required {
-    color: var(--ndw-color-grey-400);
-  }
-}
+[ndwLabel] {
+  align-content: center;
+  align-items: center;
+  display: grid;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-bold);
+  gap: var(--ndw-spacing-3xs);
+  grid-template-columns: repeat(3, auto);
+  justify-content: start;
+  line-height: 100%;
+  margin-bottom: var(--ndw-spacing-2xs);
+
+  ndw-icon {
+    color: var(--ndw-color-grey-400);
+    font-size: var(--ndw-icon-size-md);
+    margin-top: calc(var(--ndw-spacing-3xs) * -1);
+  }
+
+  .required {
+    color: var(--ndw-color-grey-400);
+  }
+}

package/styles/components/_link.scss

@@ -1,36 +1,36 @@
-[ndwLink] {
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--ndw-spacing-2xs);
-  padding: 0;
-  border: 0;
-
-  font-size: inherit;
-  font-family: var(--ndw-font-family-body);
-  text-decoration: underline var(--ndw-border-size-sm) transparent;
-  text-underline-offset: var(--ndw-border-size-md);
-
-  color: var(--ndw-color-link-400);
-  background-color: transparent;
-  transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
-
-  > * {
-    align-self: center;
-  }
-
-  ndw-icon {
-    font-size: 1.25em;
-    overflow: hidden;
-  }
-
-  &:hover {
-    color: var(--ndw-color-link-500);
-    text-decoration-color: var(--ndw-color-link-500);
-  }
-
-  &[disabled] {
-    color: var(--ndw-color-grey-400);
-    pointer-events: none;
-    user-select: none;
-  }
-}
+[ndwLink] {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--ndw-spacing-2xs);
+  padding: 0;
+  border: 0;
+
+  font-size: inherit;
+  font-family: var(--ndw-font-family-body);
+  text-decoration: underline var(--ndw-border-size-sm) transparent;
+  text-underline-offset: var(--ndw-border-size-md);
+
+  color: var(--ndw-color-link-400);
+  background-color: transparent;
+  transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
+
+  > * {
+    align-self: center;
+  }
+
+  ndw-icon {
+    font-size: 1.25em;
+    overflow: hidden;
+  }
+
+  &:hover {
+    color: var(--ndw-color-link-500);
+    text-decoration-color: var(--ndw-color-link-500);
+  }
+
+  &[disabled] {
+    color: var(--ndw-color-grey-400);
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/styles/components/_list-item.scss

@@ -1,7 +1,7 @@
-@use '../base/typography' as *;
-
-[ndw-list-item] {
-  cursor: pointer;
-
-  @include ndw-paragraph-md;
-}
+@use '../base/typography' as *;
+
+[ndw-list-item] {
+  cursor: pointer;
+
+  @include ndw-paragraph-md;
+}

package/styles/components/_map.scss

@@ -1,114 +1,144 @@
-@use '../base/typography' as *;
-
-.map-control {
-  position: relative;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-
-  height: 40px;
-  min-width: 40px;
-  line-height: 100%;
-
-  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
-  border-radius: var(--ndw-border-radius-sm);
-  box-shadow: var(--ndw-elevation-content);
-
-  @include ndw-paragraph-bold-md;
-  color: var(--ndw-color-grey-500);
-  background-color: var(--ndw-color-white);
-  transition: var(--ndw-animation-speed-default);
-  will-change: background-color, color;
-
-  &:hover {
-    background-color: var(--ndw-color-grey-100);
-  }
-
-  &.active {
-    color: var(--ndw-color-primary-500);
-
-    ndw-icon {
-      font-variation-settings: 'FILL' 1;
-    }
-
-    .map-control__chevron {
-      rotate: 180deg;
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    pointer-events: none;
-    color: var(--ndw-color-grey-300);
-  }
-
-  .map-control__chevron {
-    pointer-events: none;
-    padding: 0.25rem;
-    color: var(--ndw-color-primary);
-
-    transition-property: rotate;
-    transition-duration: var(--ndw-animation-speed-fast);
-    transition-timing-function: ease-out;
-    transition-delay: 0s;
-  }
-
-  .content-wrapper:not(:empty) {
-    @include ndw-paragraph-bold-md;
-    line-height: 1rem;
-    padding-inline: var(--ndw-spacing-xs);
-  }
-
-  > button {
-    @include ndw-paragraph-bold-md;
-
-    border: none;
-    background: none;
-    padding: var(--ndw-spacing-xs);
-
-    color: var(--ndw-color-grey-600);
-    font-size: var(--ndw-font-size-sm);
-    font-weight: var(--ndw-font-weight-bold);
-
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0;
-    }
-  }
-}
-
-.map-control-dropdown {
-  display: grid;
-  grid-template-rows: max-content 1fr;
-  padding: var(--ndw-spacing-2xs);
-  width: 240px;
-
-  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
-  border-radius: var(--ndw-border-radius-sm);
-  box-shadow: var(--ndw-elevation-dropdown);
-
-  background-color: var(--ndw-color-white);
-
-  &:not(.fixed) {
-    max-height: 380px;
-  }
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--ndw-spacing-xs);
-    padding: var(--ndw-spacing-xs) 0 var(--ndw-spacing-xs) var(--ndw-spacing-2xs);
-
-    h3 {
-      color: var(--ndw-color-grey-600);
-      margin-block: 0;
-    }
-  }
-
-  &__content {
-    flex: 1;
-    overflow-y: auto;
-  }
-}
+@use '../base/typography' as *;
+
+.map-control {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+
+  height: 40px;
+  min-width: 40px;
+  line-height: 100%;
+
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border-radius: var(--ndw-border-radius-sm);
+  box-shadow: var(--ndw-elevation-content);
+
+  @include ndw-paragraph-bold-md;
+  color: var(--ndw-color-grey-500);
+  background-color: var(--ndw-color-white);
+  transition: var(--ndw-animation-speed-default);
+  will-change: background-color, color;
+
+  &:hover {
+    background-color: var(--ndw-color-grey-100);
+  }
+
+  &.active {
+    color: var(--ndw-color-primary-500);
+
+    ndw-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    .map-control__chevron {
+      rotate: 180deg;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    color: var(--ndw-color-grey-300);
+  }
+
+  .map-control__chevron {
+    pointer-events: none;
+    padding: 0.25rem;
+    color: var(--ndw-color-primary);
+
+    transition-property: rotate;
+    transition-duration: var(--ndw-animation-speed-fast);
+    transition-timing-function: ease-out;
+    transition-delay: 0s;
+  }
+
+  .content-wrapper:not(:empty) {
+    @include ndw-paragraph-bold-md;
+    line-height: 1rem;
+    padding-inline: var(--ndw-spacing-xs);
+  }
+
+  > button {
+    @include ndw-paragraph-bold-md;
+
+    border: none;
+    background: none;
+    padding: var(--ndw-spacing-xs);
+
+    color: var(--ndw-color-grey-600);
+    font-size: var(--ndw-font-size-sm);
+    font-weight: var(--ndw-font-weight-bold);
+
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  &--compact {
+    height: 32px;
+    min-width: 32px;
+
+    > svg,
+    > ndw-icon {
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
+
+    > button {
+      padding: 0;
+    }
+
+    ndw-map-display-option img,
+    ndw-map-display-option ndw-icon {
+      width: 24px;
+      height: 24px;
+      padding: var(--ndw-spacing-3xs);
+    }
+  }
+}
+
+.map-control-dropdown {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  padding: var(--ndw-spacing-2xs);
+  width: 240px;
+
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border-radius: var(--ndw-border-radius-sm);
+  box-shadow: var(--ndw-elevation-dropdown);
+
+  background-color: var(--ndw-color-white);
+
+  &:not(.fixed) {
+    // Never exceed the available viewport height (minus the overlay's 8px
+    // viewport margin on each side), so on small screens the popover stays
+    // fully visible and its content scrolls instead of overflowing off-screen.
+    max-height: min(380px, calc(100vh - 16px));
+    max-height: min(380px, calc(100dvh - 16px));
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ndw-spacing-xs);
+    padding: var(--ndw-spacing-xs) 0 var(--ndw-spacing-xs) var(--ndw-spacing-2xs);
+
+    h3 {
+      color: var(--ndw-color-grey-600);
+      margin-block: 0;
+    }
+  }
+
+  &__content {
+    // `min-height: 0` lets this 1fr grid row shrink below its content height so
+    // the scrollbar engages; without it the row keeps its intrinsic height and
+    // the dropdown grows past its max-height, clipping the last items.
+    min-height: 0;
+    overflow-y: auto;
+  }
+}

package/styles/components/_menu-button.scss

@@ -1,37 +1,37 @@
-[ndwButton] {
-  &[menu] {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--ndw-color-grey-700);
-    gap: var(--ndw-spacing-xs);
-    height: 2.625rem;
-    margin-inline: var(--ndw-spacing-xs);
-    padding-inline: 0;
-    position: relative;
-    width: calc(100% - var(--ndw-spacing-xs) * 2);
-    border-radius: var(--ndw-border-radius-md);
-    cursor: default;
-    transition: var(--ndw-animation-speed-fast);
-
-    &:hover {
-      background-color: var(--ndw-color-grey-100);
-      border-color: var(--ndw-color-grey-100);
-      cursor: pointer;
-    }
-
-    &:active,
-    &[active],
-    &[selected] {
-      background-color: var(--ndw-color-info-100);
-      border-color: var(--ndw-color-info-100);
-      &:hover {
-        background-color: var(--ndw-color-info-200);
-        border-color: var(--ndw-color-info-200);
-      }
-    }
-
-    &:not([clickable]) {
-      cursor: default;
-    }
-  }
-}
+[ndwButton] {
+  &[menu] {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--ndw-color-grey-700);
+    gap: var(--ndw-spacing-xs);
+    height: 2.625rem;
+    margin-inline: var(--ndw-spacing-xs);
+    padding-inline: 0;
+    position: relative;
+    width: calc(100% - var(--ndw-spacing-xs) * 2);
+    border-radius: var(--ndw-border-radius-md);
+    cursor: default;
+    transition: var(--ndw-animation-speed-fast);
+
+    &:hover {
+      background-color: var(--ndw-color-grey-100);
+      border-color: var(--ndw-color-grey-100);
+      cursor: pointer;
+    }
+
+    &:active,
+    &[active],
+    &[selected] {
+      background-color: var(--ndw-color-info-100);
+      border-color: var(--ndw-color-info-100);
+      &:hover {
+        background-color: var(--ndw-color-info-200);
+        border-color: var(--ndw-color-info-200);
+      }
+    }
+
+    &:not([clickable]) {
+      cursor: default;
+    }
+  }
+}

package/styles/components/_popover.scss

@@ -1,19 +1,19 @@
-@keyframes show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.cdk-overlay-pane {
-  &.ndw-popover-panel {
-    animation: show var(--ndw-animation-speed-fast) ease-out;
-    background-color: var(--ndw-color-white);
-    border-radius: var(--ndw-border-radius-md);
-    box-shadow: var(--ndw-elevation-popover);
-    display: grid;
-    padding: var(--ndw-spacing-sm);
-  }
-}
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.cdk-overlay-pane {
+  &.ndw-popover-panel {
+    animation: show var(--ndw-animation-speed-fast) ease-out;
+    background-color: var(--ndw-color-white);
+    border-radius: var(--ndw-border-radius-md);
+    box-shadow: var(--ndw-elevation-popover);
+    display: grid;
+    padding: var(--ndw-spacing-sm);
+  }
+}