@ndwnu/design-system 4.0.0 → 5.0.0

package/core/{styles/nwb-styles.scss → style/styles.scss}

@@ -1,28 +1,270 @@
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=block");
 :root {
-  --_primary: 177, 23%;
-  --_primary-700: var(--_primary), 54%;
-  --_primary-600: var(--_primary), 64%;
-  --_primary-500: var(--_primary), 81%;
-  --_primary-100: var(--_primary), 90%;
-  --ndw-color-primary-700: hsl(var(--_primary-700));
-  --ndw-color-primary-600: hsl(var(--_primary-600));
-  --ndw-color-primary-500: hsl(var(--_primary-500));
+  /* Colors */
+  --_grey-700: 195, 100%, 10%;
+  --_grey-600: 196, 13%, 29%;
+  --_grey-500: 197, 7%, 40%;
+  --_grey-400: 204, 2%, 54%;
+  --_grey-300: 192, 5%, 82%;
+  --_grey-200: 204, 11%, 91%;
+  --_grey-100: 200, 16%, 96%;
+  --_white: 0, 0%, 100%;
+  --ndw-color-grey-700: hsl(var(--_grey-700));
+  --ndw-color-grey-600: hsl(var(--_grey-600));
+  --ndw-color-grey-500: hsl(var(--_grey-500));
+  --ndw-color-grey-400: hsl(var(--_grey-400));
+  --ndw-color-grey-300: hsl(var(--_grey-300));
+  --ndw-color-grey-200: hsl(var(--_grey-200));
+  --ndw-color-grey-100: hsl(var(--_grey-100));
+  --ndw-color-white: hsl(var(--_white));
+  --_primary: 19, 100%;
+  --_primary-050: var(--_primary), 95%;
+  --_primary-100: var(--_primary), 80%;
+  --_primary-200: var(--_primary), 73%;
+  --_primary-300: var(--_primary), 62%;
+  --_primary-400: var(--_primary), 50%;
+  --_primary-500: var(--_primary), 40%;
+  --_primary-600: var(--_primary), 35%;
+  --_primary-700: var(--_primary), 27%;
+  --_primary-800: var(--_primary), 15%;
+  --ndw-color-primary-050: hsl(var(--_primary-050));
   --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
   --ndw-color-primary: var(--ndw-color-primary-500);
   --ndw-color-primary-hover: var(--ndw-color-primary-600);
   --ndw-color-primary-active: var(--ndw-color-primary-700);
-  --ndw-background-primary: var(--ndw-color-primary);
-  --ndw-background-primary-hover: var(--ndw-color-primary-hover);
-  --ndw-background-primary-active: var(--ndw-color-primary-active);
-  --ndw-foreground-primary: var(--ndw-color-grey-600);
-  --ndw-foreground-primary-hover: var(--ndw-color-white);
-  --ndw-foreground-primary-active: var(--ndw-color-white);
-  --ndw-text-primary: var(--ndw-color-grey-600);
+  --_secondary-050: 209, 100%, 96%;
+  --_secondary-100: 209, 85%, 91%;
+  --_secondary-200: 209, 85%, 78%;
+  --_secondary-300: 209, 85%, 69%;
+  --_secondary-400: 208, 100%, 46%;
+  --_secondary-500: 208, 100%, 41%;
+  --_secondary-600: 209, 100%, 32%;
+  --_secondary-700: 209, 100%, 18%;
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+  --ndw-color-secondary: var(--ndw-color-secondary-500);
+  --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
+  --ndw-color-secondary-active: var(--ndw-color-secondary-700);
+  --_tertiary-400: 43, 100%, 50%;
+  --_tertiary-500: 42, 100%, 43%;
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
+  --_link: 208, 100%;
+  --_link-400: var(--_link), 41%;
+  --_link-500: var(--_link), 32%;
+  --ndw-color-link-400: hsl(var(--_link-400));
+  --ndw-color-link-500: hsl(var(--_link-500));
+  --_positive: 133, 92%;
+  --_positive-100: 117, 56%, 92%;
+  --_positive-500: var(--_positive), 33%;
+  --_positive-600: var(--_positive), 24%;
+  --_warning: 43, 93%;
+  --_warning-100: 44, 100%, 94%;
+  --_warning-500: var(--_warning), 43%;
+  --_warning-600: 42, 83%, 32%;
+  --_alternative: 292, 100%;
+  --_alternative-100: var(--_alternative), 95%;
+  --_alternative-500: 292, 95%, 33%;
+  --_critical: 0, 100%;
+  --_critical-100: var(--_critical), 98%;
+  --_critical-200: var(--_critical), 95%;
+  --_critical-300: var(--_critical), 90%;
+  --_critical-500: var(--_critical), 46%;
+  --_info-100: 210, 100%, 96%;
+  --_info-200: 210, 86%, 91%;
+  --_info-500: 208, 100%, 41%;
+  --ndw-color-positive-100: hsl(var(--_positive-100));
+  --ndw-color-positive-500: hsl(var(--_positive-500));
+  --ndw-color-positive-600: hsl(var(--_positive-600));
+  --ndw-color-warning-100: hsl(var(--_warning-100));
+  --ndw-color-warning-500: hsl(var(--_warning-500));
+  --ndw-color-warning-600: hsl(var(--_warning-600));
+  --ndw-color-alternative-100: hsl(var(--_alternative-100));
+  --ndw-color-alternative-500: hsl(var(--_alternative-500));
+  --ndw-color-critical-100: hsl(var(--_critical-100));
+  --ndw-color-critical-200: hsl(var(--_critical-200));
+  --ndw-color-critical-300: hsl(var(--_critical-300));
+  --ndw-color-critical-500: hsl(var(--_critical-500));
+  --ndw-color-info-100: hsl(var(--_info-100));
+  --ndw-color-info-200: hsl(var(--_info-200));
+  --ndw-color-info-500: hsl(var(--_info-500));
+  --ndw-color-notification: hsl(19, 100%, 35%);
+  --_data-a-500: 133, 100%, 21%;
+  --_data-a-100: 101, 61%, 81%;
+  --_data-b-500: 0, 0%, 27%;
+  --_data-b-100: 0, 0%, 87%;
+  --_data-c-500: 209, 97%, 38%;
+  --_data-c-100: 194, 95%, 84%;
+  --_data-d-500: 292, 95%, 33%;
+  --_data-d-100: 292, 100%, 87%;
+  --_data-e-500: 51, 95%, 23%;
+  --_data-e-100: 54, 89%, 79%;
+  --_data-f-500: 0, 97%, 35%;
+  --_data-f-100: 0, 100%, 94%;
+  --ndw-color-data-a-500: hsl(var(--_data-a-500));
+  --ndw-color-data-a-100: hsl(var(--_data-a-100));
+  --ndw-color-data-b-500: hsl(var(--_data-b-500));
+  --ndw-color-data-b-100: hsl(var(--_data-b-100));
+  --ndw-color-data-c-500: hsl(var(--_data-c-500));
+  --ndw-color-data-c-100: hsl(var(--_data-c-100));
+  --ndw-color-data-d-500: hsl(var(--_data-d-500));
+  --ndw-color-data-d-100: hsl(var(--_data-d-100));
+  --ndw-color-data-e-500: hsl(var(--_data-e-500));
+  --ndw-color-data-e-100: hsl(var(--_data-e-100));
+  --ndw-color-data-f-500: hsl(var(--_data-f-500));
+  --ndw-color-data-f-100: hsl(var(--_data-f-100));
+  --_alpha-black: 0, 0%, 0%;
+  --_alpha-007: 0.07;
+  --_alpha-015: 0.15;
+  --_alpha-040: 0.4;
+  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
+  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
+  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
+  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
+  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
+  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
+  --ndw-color-background: var(--ndw-color-primary);
+  --ndw-color-background-hover: var(--ndw-color-primary-hover);
+  --ndw-color-background-active: var(--ndw-color-primary-active);
+  --ndw-color-background-disabled: var(--ndw-color-grey-300);
+  --ndw-color-foreground: var(--ndw-color-white);
+  --ndw-color-foreground-hover: var(--ndw-color-white);
+  --ndw-color-foreground-active: var(--ndw-color-white);
+  --ndw-color-text: var(--ndw-color-grey-700);
+}
+
+[data-theme=ntm] {
+  /* Colors */
+  --_primary-050: 197, 35%, 92%;
+  --_primary-100: 197, 35%, 92%;
+  --_primary-200: 197, 35%, 92%;
+  --_primary-300: 197, 35%, 92%;
+  --_primary-400: 197, 35%, 92%;
+  --_primary-500: 203, 100%, 17%;
+  --_primary-600: 203, 100%, 17%;
+  --_primary-700: 203, 100%, 17%;
+  --_primary-800: 203, 100%, 17%;
+  --ndw-color-primary-050: hsl(var(--_primary-050));
+  --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
+  --_secondary: 146, 49%;
+  --_secondary-050: var(--_secondary), 96%;
+  --_secondary-100: var(--_secondary), 91%;
+  --_secondary-200: var(--_secondary), 78%;
+  --_secondary-300: var(--_secondary), 69%;
+  --_secondary-400: var(--_secondary), 57%;
+  --_secondary-500: var(--_secondary), 46%;
+  --_secondary-600: var(--_secondary), 41%;
+  --_secondary-700: var(--_secondary), 32%;
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+  --_tertiary: 36, 100%;
+  --_tertiary-400: var(--_tertiary), 57%;
+  --_tertiary-500: var(--_tertiary), 50%;
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
+  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
+  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
+  --ndw-color-background: var(--ndw-color-primary);
+  --ndw-color-background-hover: var(--ndw-color-secondary);
+  --ndw-color-background-active: var(--ndw-color-secondary-active);
+  --ndw-color-background-disabled: var(--ndw-color-grey-200);
+  --ndw-color-foreground: var(--ndw-color-white);
+  --ndw-color-foreground-hover: var(--ndw-color-white);
+  --ndw-color-foreground-active: var(--ndw-color-white);
+  --ndw-color-text: var(--ndw-color-primary);
+}
+
+[data-theme=nwb] {
+  /* Colors */
+  --_primary-050: 176, 44%, 95%;
+  --_primary-100: 176, 44%, 82%;
+  --_primary-200: 176, 44%, 73%;
+  --_primary-300: 176, 50%, 60%;
+  --_primary-400: 176, 55%, 48%;
+  --_primary-500: 176, 58%, 41%;
+  --_primary-600: 176, 60%, 34%;
+  --_primary-700: 176, 68%, 21%;
+  --_primary-800: 176, 68%, 13%;
+  --ndw-color-primary-050: hsl(var(--_primary-050));
+  --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
+  --_secondary-050: 0, 100%, 95%;
+  --_secondary-100: 0, 100%, 90%;
+  --_secondary-200: 0, 100%, 82%;
+  --_secondary-300: 0, 100%, 74%;
+  --_secondary-400: 0, 100%, 66%;
+  --_secondary-500: 0, 100%, 58%;
+  --_secondary-600: 0, 75%, 42%;
+  --_secondary-700: 0, 79%, 26%;
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+  --_tertiary-400: 309, 29%, 36%;
+  --_tertiary-500: 309, 29%, 18%;
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
   --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
   --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
 }
 
+.cdk-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  left: 0;
+}
+
+[dir=rtl] .cdk-visually-hidden {
+  left: auto;
+  right: 0;
+}
+
 .cdk-overlay-container, .cdk-global-overlay-wrapper {
   pointer-events: none;
   top: 0;
@@ -112,90 +354,6 @@
 }
 
 :root {
-  /* Colors */
-  --_grey-700: 195, 100%, 10%;
-  --_grey-600: 196, 13%, 29%;
-  --_grey-500: 197, 7%, 40%;
-  --_grey-400: 204, 2%, 54%;
-  --_grey-300: 192, 5%, 82%;
-  --_grey-200: 204, 11%, 91%;
-  --_grey-100: 200, 16%, 96%;
-  --_white: 0, 0%, 100%;
-  --ndw-color-grey-700: hsl(var(--_grey-700));
-  --ndw-color-grey-600: hsl(var(--_grey-600));
-  --ndw-color-grey-500: hsl(var(--_grey-500));
-  --ndw-color-grey-400: hsl(var(--_grey-400));
-  --ndw-color-grey-300: hsl(var(--_grey-300));
-  --ndw-color-grey-200: hsl(var(--_grey-200));
-  --ndw-color-grey-100: hsl(var(--_grey-100));
-  --ndw-color-white: hsl(var(--_white));
-  --_link: 208, 100%;
-  --_link-400: var(--_link), 41%;
-  --_link-500: var(--_link), 32%;
-  --ndw-color-link-400: hsl(var(--_link-400));
-  --ndw-color-link-500: hsl(var(--_link-500));
-  --_positive: 133, 92%;
-  --_positive-100: 117, 56%, 92%;
-  --_positive-500: var(--_positive), 33%;
-  --_positive-600: var(--_positive), 24%;
-  --_warning: 43, 93%;
-  --_warning-100: 44, 100%, 94%;
-  --_warning-500: var(--_warning), 43%;
-  --_warning-600: 42, 83%, 32%;
-  --_alternative: 292, 100%;
-  --_alternative-100: var(--_alternative), 95%;
-  --_alternative-500: 292, 95%, 33%;
-  --_critical: 0, 100%;
-  --_critical-100: var(--_critical), 98%;
-  --_critical-200: var(--_critical), 95%;
-  --_critical-300: var(--_critical), 90%;
-  --_critical-500: var(--_critical), 46%;
-  --ndw-color-positive-100: hsl(var(--_positive-100));
-  --ndw-color-positive-500: hsl(var(--_positive-500));
-  --ndw-color-positive-600: hsl(var(--_positive-600));
-  --ndw-color-warning-100: hsl(var(--_warning-100));
-  --ndw-color-warning-500: hsl(var(--_warning-500));
-  --ndw-color-warning-600: hsl(var(--_warning-600));
-  --ndw-color-alternative-100: hsl(var(--_alternative-100));
-  --ndw-color-alternative-500: hsl(var(--_alternative-500));
-  --ndw-color-critical-100: hsl(var(--_critical-100));
-  --ndw-color-critical-200: hsl(var(--_critical-200));
-  --ndw-color-critical-300: hsl(var(--_critical-300));
-  --ndw-color-critical-500: hsl(var(--_critical-500));
-  --ndw-color-notification: hsl(19, 100%, 35%);
-  --_data-a-500: 133, 100%, 21%;
-  --_data-a-100: 101, 61%, 81%;
-  --_data-b-500: 0, 0%, 27%;
-  --_data-b-100: 0, 0%, 87%;
-  --_data-c-500: 209, 97%, 38%;
-  --_data-c-100: 194, 95%, 84%;
-  --_data-d-500: 292, 95%, 33%;
-  --_data-d-100: 292, 100%, 87%;
-  --_data-e-500: 51, 95%, 23%;
-  --_data-e-100: 54, 89%, 79%;
-  --_data-f-500: 0, 97%, 35%;
-  --_data-f-100: 0, 100%, 94%;
-  --ndw-color-data-a-500: hsl(var(--_data-a-500));
-  --ndw-color-data-a-100: hsl(var(--_data-a-100));
-  --ndw-color-data-b-500: hsl(var(--_data-b-500));
-  --ndw-color-data-b-100: hsl(var(--_data-b-100));
-  --ndw-color-data-c-500: hsl(var(--_data-c-500));
-  --ndw-color-data-c-100: hsl(var(--_data-c-100));
-  --ndw-color-data-d-500: hsl(var(--_data-d-500));
-  --ndw-color-data-d-100: hsl(var(--_data-d-100));
-  --ndw-color-data-e-500: hsl(var(--_data-e-500));
-  --ndw-color-data-e-100: hsl(var(--_data-e-100));
-  --ndw-color-data-f-500: hsl(var(--_data-f-500));
-  --ndw-color-data-f-100: hsl(var(--_data-f-100));
-  /* Alpha */
-  --_alpha-black: 0, 0%, 0%;
-  --_alpha-007: 0.07;
-  --_alpha-015: 0.15;
-  --_alpha-040: 0.4;
-  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
-  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
-  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
-  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
   /* Spacing */
   --ndw-spacing-3xs: 0.125rem;
   --ndw-spacing-2xs: 0.25rem;
@@ -254,6 +412,30 @@
   --ndw-modal-width-md: 45rem;
 }
 
+[data-theme=ntm] {
+  /* Spacing */
+  --ndw-spacing-3xs: 0.125rem;
+  --ndw-spacing-2xs: 0.5rem;
+  --ndw-spacing-xs: 1rem;
+  --ndw-spacing-sm: 1.25rem;
+  --ndw-spacing-md: 1rem;
+  --ndw-spacing-lg: 2rem;
+  --ndw-spacing-xl: 2.5rem;
+  --ndw-spacing-2xl: 3rem;
+  --ndw-spacing-3xl: 3rem;
+  --ndw-spacing-4xl: 5rem;
+  --ndw-spacing-5xl: 8rem;
+  /* Typography */
+  --ndw-font-family-body: "Roboto Flex", sans-serif;
+  --ndw-font-family-heading: "Roboto Flex", sans-serif;
+  --ndw-font-size-2xs: 0.5625rem;
+  --ndw-font-size-xs: 0.6875rem;
+  --ndw-font-size-sm: 1.125rem;
+  --ndw-font-size-md: 1.125rem;
+  --ndw-font-size-lg: 1.25rem;
+  --ndw-font-size-xl: 1.5rem;
+}
+
 /* Screen sizes */
 /**
  Utilities for improving accessibility with screen readers.
@@ -369,51 +551,39 @@
 }
 .grid .column-1 {
   grid-column: span min(1, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-2 {
   grid-column: span min(2, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-3 {
   grid-column: span min(3, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-4 {
   grid-column: span min(4, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-5 {
   grid-column: span min(5, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-6 {
   grid-column: span min(6, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-7 {
   grid-column: span min(7, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-8 {
   grid-column: span min(8, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-9 {
   grid-column: span min(9, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-10 {
   grid-column: span min(10, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-11 {
   grid-column: span min(11, var(--grid-columns));
-  overflow: auto;
 }
 .grid .column-12 {
   grid-column: span min(12, var(--grid-columns));
-  overflow: auto;
 }
 @media screen and (max-width: 1024px) {
   .grid {
@@ -458,33 +628,27 @@
   }
   .grid .column-sm-1 {
     grid-column: span 1;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-sm-2 {
     grid-column: span 2;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-sm-3 {
     grid-column: span 3;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-sm-4 {
     grid-column: span 4;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-sm-5 {
     grid-column: span 5;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-sm-6 {
     grid-column: span 6;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
 }
 @media screen and (min-width: 1025px) {
@@ -494,63 +658,51 @@
   }
   .grid .column-md-1 {
     grid-column: span 1;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-2 {
     grid-column: span 2;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-3 {
     grid-column: span 3;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-4 {
     grid-column: span 4;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-5 {
     grid-column: span 5;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-6 {
     grid-column: span 6;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-7 {
     grid-column: span 7;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-8 {
     grid-column: span 8;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-9 {
     grid-column: span 9;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-10 {
     grid-column: span 10;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-11 {
     grid-column: span 11;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
   .grid .column-md-12 {
     grid-column: span 12;
-    overflow: auto;
-    display: block;
+    display: initial;
   }
 }
 
@@ -567,56 +719,55 @@ button:not(:disabled) {
 }
 
 [ndwButton] {
+  align-items: center;
+  background-color: var(--ndw-color-background);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
+  border-radius: var(--ndw-border-radius-sm);
   box-sizing: border-box;
+  color: var(--ndw-color-foreground);
+  cursor: pointer;
   display: flex;
-  align-items: center;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-regular);
   gap: var(--ndw-spacing-2xs);
   height: var(--ndw-spacing-xl);
   justify-content: center;
   padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
-  width: fit-content;
-  cursor: pointer;
-  background-color: var(--ndw-background-primary);
-  border: var(--ndw-border-size-sm) solid var(--ndw-background-primary);
-  border-radius: var(--ndw-border-radius-sm);
-  transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
-  color: var(--ndw-foreground-primary);
-  font-family: var(--ndw-font-family-body);
-  font-size: var(--ndw-font-size-sm);
-  font-weight: var(--ndw-font-weight-regular);
   text-align: start;
   text-decoration: none;
+  transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
+  width: fit-content;
 }
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
 }
 [ndwButton] ndw-loader {
-  width: var(--ndw-spacing-sm);
-  height: var(--ndw-spacing-sm);
+  height: var(--ndw-spacing-md);
+  width: var(--ndw-spacing-md);
 }
 [ndwButton]:hover {
-  background-color: var(--ndw-background-primary-hover);
-  border-color: var(--ndw-background-primary-hover);
-  color: var(--ndw-foreground-primary-hover);
+  background-color: var(--ndw-color-background-hover);
+  border-color: var(--ndw-color-background-hover);
+  color: var(--ndw-color-foreground-hover);
 }
 [ndwButton]:active {
-  background-color: var(--ndw-background-primary-active);
-  border-color: var(--ndw-background-primary-active);
-  color: var(--ndw-foreground-primary-active);
+  background-color: var(--ndw-color-background-active);
+  border-color: var(--ndw-color-background-active);
+  color: var(--ndw-color-foreground-active);
 }
 [ndwButton][secondary], [ndwButton][tertiary] {
   background-color: transparent;
-  color: var(--ndw-text-primary);
+  color: var(--ndw-color-background);
 }
 [ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
-  background-color: var(--ndw-alpha-primary-007);
-  color: var(--ndw-text-primary);
+  color: var(--ndw-color-background);
 }
 [ndwButton][secondary]:active, [ndwButton][tertiary]:active {
-  background-color: var(--ndw-alpha-primary-015);
+  color: var(--ndw-color-background);
 }
 [ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
-  color: var(--ndw-color-grey-700);
+  color: var(--ndw-color-text);
 }
 [ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
   background-color: var(--ndw-alpha-black-007);
@@ -625,10 +776,15 @@ button:not(:disabled) {
   background-color: var(--ndw-alpha-black-015);
 }
 [ndwButton][secondary] {
-  border-color: var(--ndw-background-primary);
+  border-color: var(--ndw-color-background);
+}
+[ndwButton][secondary]:hover {
+  background-color: var(--ndw-alpha-primary-007);
+  border-color: var(--ndw-color-background-hover);
 }
 [ndwButton][secondary]:active {
-  border-color: var(--ndw-background-primary-hover);
+  background-color: var(--ndw-alpha-primary-015);
+  border-color: var(--ndw-color-background-active);
 }
 [ndwButton][secondary][alternative] {
   border-color: var(--ndw-color-grey-300);
@@ -641,6 +797,17 @@ button:not(:disabled) {
 }
 [ndwButton][tertiary] {
   border-color: transparent;
+  border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
+  border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
+  padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
+}
+[ndwButton][tertiary]:hover {
+  background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
+  border-color: var(--button-ter-border-color-hover, transparent);
+}
+[ndwButton][tertiary]:active {
+  background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
+  border-color: var(--button-ter-border-color-active, transparent);
 }
 [ndwButton][extra-small] {
   height: var(--ndw-spacing-lg);
@@ -651,13 +818,60 @@ button:not(:disabled) {
   padding-inline: var(--ndw-spacing-sm);
 }
 [ndwButton][disabled] {
-  background-color: var(--ndw-color-grey-300);
-  border-color: var(--ndw-color-grey-300);
-  color: var(--ndw-color-grey-700);
+  background-color: var(--ndw-color-background-disabled);
+  border-color: var(--ndw-color-background-disabled);
+  color: var(--ndw-color-text);
   pointer-events: none;
   user-select: none;
 }
 
+[data-theme=ntm] [ndwButton][secondary]:hover, [data-theme=ntm] [ndwButton][tertiary]:hover {
+  color: var(--ndw-color-secondary);
+}
+[data-theme=ntm] [ndwButton][secondary]:active, [data-theme=ntm] [ndwButton][tertiary]:active {
+  color: var(--ndw-color-secondary-hover);
+}
+[data-theme=ntm] [ndwButton][secondary]:hover {
+  background-color: transparent;
+  border-color: var(--ndw-color-secondary);
+}
+[data-theme=ntm] [ndwButton][secondary]:active {
+  background-color: var(--ndw-alpha-primary-007);
+  border-color: var(--ndw-color-secondary-hover);
+}
+[data-theme=ntm] [ndwButton][tertiary] {
+  border-radius: 0;
+  border-width: 0 0 var(--ndw-spacing-3xs);
+  padding-inline: 0;
+}
+[data-theme=ntm] [ndwButton][tertiary]:hover {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--ndw-color-secondary);
+}
+[data-theme=ntm] [ndwButton][tertiary]:active {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--ndw-color-secondary-hover);
+}
+[data-theme=ntm] [ndwButton][disabled] {
+  border-color: var(--ndw-color-grey-400);
+  color: var(--ndw-color-grey-400);
+}
+[data-theme=ntm] [ndwButton][disabled][tertiary] {
+  background-color: transparent;
+}
+
+hr[ndwDivider] {
+  background-color: var(--ndw-color-grey-300);
+  border: none;
+  height: var(--ndw-border-size-sm);
+  margin: var(--ndw-spacing-xs) 0;
+}
+hr[noMargin] {
+  margin-block: 0;
+}
+
 @keyframes show {
   from {
     opacity: 0;
@@ -682,9 +896,9 @@ button:not(:disabled) {
   border-color: var(--ndw-color-primary);
 }
 [ndwButton][filter]:active, [ndwButton][filter]:focus, [ndwButton][filter]:focus-visible {
-  border-color: var(--ndw-color-secondary-500);
+  border-color: var(--ndw-color-info-500);
   box-shadow: var(--ndw-elevation-info);
-  outline-color: var(--ndw-color-secondary-500);
+  outline-color: var(--ndw-color-info-500);
 }
 [ndwButton][filter][disabled] {
   background-color: var(--ndw-color-grey-100);
@@ -696,39 +910,109 @@ button:not(:disabled) {
   color: var(--ndw-color-grey-500);
 }
 
-[ndwInput] {
+.input-container:has(> [ndwInput]) {
+  display: flex;
+  align-items: center;
   background-color: var(--ndw-color-white);
   border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
   border-radius: var(--ndw-border-radius-sm);
   box-sizing: border-box;
-  color: var(--ndw-color-grey-700);
-  font-family: var(--ndw-font-family-body);
-  font-size: var(--ndw-font-size-sm);
-  height: var(--ndw-spacing-2xl);
-  line-height: var(--ndw-line-height-md);
   outline: var(--ndw-border-size-sm) solid transparent;
   outline-offset: calc(var(--ndw-border-size-sm) * -1);
-  padding-inline: var(--ndw-spacing-sm);
-  position: relative;
   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);
 }
-[ndwInput]:hover {
+.input-container:has(> [ndwInput]):has([ndwInput]:hover) {
   border-color: var(--ndw-color-grey-400);
 }
-[ndwInput]:active, [ndwInput]:focus, [ndwInput]:focus-visible {
+.input-container:has(> [ndwInput]):has([ndwInput]:active), .input-container:has(> [ndwInput]):has([ndwInput]:focus), .input-container:has(> [ndwInput]):has([ndwInput]:focus-visible) {
   border-color: transparent;
   box-shadow: var(--ndw-elevation-info);
+  outline-color: var(--ndw-color-info-500);
+}
+.input-container:has(> [ndwInput])[success] {
+  background-color: var(--ndw-color-positive-100);
+  border-color: var(--ndw-color-positive-500);
+}
+.input-container:has(> [ndwInput])[success]:hover {
+  border-color: var(--ndw-color-grey-300);
+}
+.input-container:has(> [ndwInput])[success]:active, .input-container:has(> [ndwInput])[success]:focus, .input-container:has(> [ndwInput])[success]:focus-visible {
+  background-color: var(--ndw-color-white);
+  border-color: transparent;
   outline-color: var(--ndw-color-secondary-500);
 }
-[ndwInput]::placeholder {
+.input-container:has(> [ndwInput])[error] {
+  background-color: var(--ndw-color-critical-100);
+  border-color: var(--ndw-color-critical-500);
+}
+.input-container:has(> [ndwInput])[error]:hover {
+  border-color: var(--ndw-color-grey-300);
+}
+.input-container:has(> [ndwInput])[error]:active, .input-container:has(> [ndwInput])[error]:focus, .input-container:has(> [ndwInput])[error]:focus-visible {
+  background-color: var(--ndw-color-white);
+  border-color: transparent;
+  outline-color: var(--ndw-color-secondary-500);
+}
+.input-container:has(> [ndwInput])[disabled], .input-container:has(> [ndwInput])[readonly] {
+  background-color: var(--ndw-color-grey-100);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-500);
+  pointer-events: none;
+}
+.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(~ [ndwInput]) {
   color: var(--ndw-color-grey-400);
 }
-[ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
-  display: none;
+.input-container:has(> [ndwInput]) * + [ndwInput] {
+  padding-inline-start: 0;
 }
-[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  opacity: 0;
+.input-container:has(> [ndwInput]) [ndwInput]:has(+ *) {
+  padding-inline-end: 0;
+}
+.input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
+  padding-inline-end: var(--ndw-spacing-sm);
+}
+.input-container:has(> [ndwInput]) [ndwInput] {
+  border: none;
+  outline: none;
+}
+.input-container:has(> [ndwInput]) [ndwInput]:hover, .input-container:has(> [ndwInput]) [ndwInput]:active, .input-container:has(> [ndwInput]) [ndwInput]:focus, .input-container:has(> [ndwInput]) [ndwInput]:focus-visible {
+  border: none;
+  outline: none;
+}
+
+[ndwInput] {
+  display: flex;
+  align-items: center;
+  background-color: var(--ndw-color-white);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+  border-radius: var(--ndw-border-radius-sm);
+  box-sizing: border-box;
+  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;
+  width: 100%;
+  padding-inline: var(--ndw-spacing-sm);
+  color: var(--ndw-color-grey-700);
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  height: var(--ndw-spacing-2xl);
+  line-height: var(--ndw-line-height-md);
+  border-radius: var(--ndw-border-radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[ndwInput]:has([ndwInput]:hover) {
+  border-color: var(--ndw-color-grey-400);
+}
+[ndwInput]:has([ndwInput]:active), [ndwInput]:has([ndwInput]:focus), [ndwInput]:has([ndwInput]:focus-visible) {
+  border-color: transparent;
+  box-shadow: var(--ndw-elevation-info);
+  outline-color: var(--ndw-color-info-500);
 }
 [ndwInput][success] {
   background-color: var(--ndw-color-positive-100);
@@ -760,17 +1044,23 @@ button:not(:disabled) {
   color: var(--ndw-color-grey-500);
   pointer-events: none;
 }
-[ndwInput].prefix-icon {
-  padding-left: calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md));
+[ndwInput][disabled] ndw-icon, [ndwInput][readonly] ndw-icon {
+  color: var(--ndw-color-grey-300);
+}
+[ndwInput]::placeholder {
+  color: var(--ndw-color-grey-400);
+}
+[ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0;
 }
 
 select[ndwInput] {
   appearance: none;
   cursor: pointer;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: var(--ndw-spacing-xl);
 }
 select[ndwInput][ndw-placeholder],
 select[ndwInput] option[disabled] {
@@ -838,23 +1128,6 @@ textarea[ndwInput] {
   user-select: none;
 }
 
-@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);
-}
-
 [ndwButton][menu] {
   background-color: transparent;
   border-color: transparent;
@@ -865,14 +1138,37 @@ textarea[ndwInput] {
   padding-inline: 0;
   position: relative;
   width: 100%;
+  cursor: default;
 }
-[ndwButton][menu]:hover, [ndwButton][menu][active] {
-  background-color: var(--ndw-color-grey-600);
-  border-color: var(--ndw-color-grey-600);
+[ndwButton][menu]:hover, [ndwButton][menu]:active, [ndwButton][menu][active], [ndwButton][menu][selected] {
   color: var(--ndw-color-white);
+  cursor: pointer;
 }
-[ndwButton][menu]:active {
+[ndwButton][menu]:active, [ndwButton][menu][selected] {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ndw-color-white);
+}
+[ndwButton][menu]:hover, [ndwButton][menu][active] {
+  background-color: var(--ndw-color-grey-600);
+  border-color: var(--ndw-color-grey-600);
+}
+[ndwButton][menu]:not([clickable]) {
+  cursor: default;
+}
+
+@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);
 }