@ndwnu/design-system 0.0.1-beta.1

package/components/tab/tab.component.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class TabComponent {
+    index: import("@angular/core").InputSignal<number>;
+    active: import("@angular/core").ModelSignal<boolean>;
+    protected get activeAttribute(): boolean | null;
+    protected readonly role = "tab";
+    protected get tabIndex(): number;
+    onClick(): void;
+    onTabKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "ndw-tab", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, ["*"], true, never>;
+}

package/components/tab-group/index.d.ts

@@ -0,0 +1 @@
+export * from './tab-group.component';

package/components/tab-group/tab-group.component.d.ts

@@ -0,0 +1,11 @@
+import { AfterContentInit } from '@angular/core';
+import { TabComponent } from '../tab/tab.component';
+import * as i0 from "@angular/core";
+export declare class TabGroupComponent implements AfterContentInit {
+    tabs: import("@angular/core").Signal<readonly TabComponent[]>;
+    activeTab: import("@angular/core").ModelSignal<number>;
+    protected readonly role = "tablist";
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["tabs"], ["*"], true, never>;
+}

package/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tooltip.component';
+export * from './tooltip.directive';

package/components/tooltip/tooltip.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class TooltipComponent {
+    text: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "ndw-tooltip", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/tooltip/tooltip.directive.d.ts

@@ -0,0 +1,13 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TooltipDirective implements OnInit {
+    text: import("@angular/core").InputSignal<string>;
+    private readonly elementRef;
+    private readonly overlay;
+    private overlayRef;
+    ngOnInit(): void;
+    protected show(): void;
+    protected hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/core/styles/ndw-styles.scss

@@ -0,0 +1,564 @@
+:root {
+  --_primary: 19, 100%;
+  --_primary-700: var(--_primary), 27%;
+  --_primary-600: var(--_primary), 35%;
+  --_primary-500: var(--_primary), 41%;
+  --_primary-100: var(--_primary), 95%;
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-100: hsl(var(--_primary-100));
+  --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-white);
+  --ndw-foreground-primary-hover: var(--ndw-color-white);
+  --ndw-foreground-primary-active: var(--ndw-color-white);
+  --ndw-text-primary: var(--ndw-color-primary);
+}
+
+:root {
+  /* Colors */
+  --_grey: 0, 0%;
+  --_grey-600: 210, 9%, 17%;
+  --_grey-500: var(--_grey), 27%;
+  --_grey-400: var(--_grey), 40%;
+  --_grey-300: var(--_grey), 57%;
+  --_grey-200: var(--_grey), 81%;
+  --_grey-100: var(--_grey), 96%;
+  --_white: var(--_grey), 100%;
+  --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));
+  --_info: 210, 100%;
+  --_info-500: var(--_info), 43%;
+  --_info-200: var(--_info), 91%;
+  --_info-100: var(--_info), 95%;
+  --_positive: 133, 92%;
+  --_positive-500: var(--_positive), 33%;
+  --_positive-100: 117, 56%, 92%;
+  --_negative: 0, 100%;
+  --_negative-700: var(--_negative), 46%;
+  --_negative-500: var(--_negative), 59%;
+  --_negative-100: var(--_negative), 98%;
+  --ndw-color-info-500: hsl(var(--_info-500));
+  --ndw-color-info-200: hsl(var(--_info-200));
+  --ndw-color-info-100: hsl(var(--_info-100));
+  --ndw-color-positive-500: hsl(var(--_positive-500));
+  --ndw-color-positive-100: hsl(var(--_positive-100));
+  --ndw-color-negative-700: hsl(var(--_negative-700));
+  --ndw-color-negative-500: hsl(var(--_negative-500));
+  --ndw-color-negative-100: hsl(var(--_negative-100));
+  --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, 79%, 83%;
+  --_data-e-500: 51, 95%, 23%;
+  --_data-e-100: 54, 70%, 72%;
+  --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));
+  /* Alpha */
+  --ndw-alpha-40: 0.40;
+  --ndw-alpha-15: 0.15;
+  --ndw-alpha-7: 0.07;
+  /* Spacing */
+  --ndw-spacing-3xs: 0.125rem;
+  --ndw-spacing-2xs: 0.25rem;
+  --ndw-spacing-xs: 0.5rem;
+  --ndw-spacing-sm: 0.75rem;
+  --ndw-spacing-md: 1rem;
+  --ndw-spacing-lg: 1.5rem;
+  --ndw-spacing-xl: 2rem;
+  --ndw-spacing-2xl: 2.5rem;
+  --ndw-spacing-3xl: 3rem;
+  --ndw-spacing-4xl: 5rem;
+  --ndw-spacing-5xl: 8rem;
+  /* Border */
+  --ndw-border-size-sm: 1px;
+  --ndw-border-size-md: 2px;
+  --ndw-border-size-lg: 3px;
+  /* Radius */
+  --ndw-border-radius-xs: 0.125rem;
+  --ndw-border-radius-sm: 0.25rem;
+  --ndw-border-radius-md: 0.5rem;
+  --ndw-border-radius-lg: 1.5rem;
+  /* Elevation */
+  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_info-500), 0.25);
+  --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
+  --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
+  /* Animation */
+  --ndw-animation-speed-fast: 200ms;
+  --ndw-animation-speed-default: 300ms;
+  --ndw-animation-speed-slow: 500ms;
+  /* Icon Size */
+  --ndw-icon-size-md: 1rem;
+  --ndw-icon-size-lg: 1.5rem;
+  /* Typography */
+  --ndw-font-family: "Object Sans", sans-serif;
+  --ndw-base-font-size: 16px;
+  --ndw-font-size-xs: 0.6875rem;
+  --ndw-font-size-sm: 0.8125rem;
+  --ndw-font-size-md: 1.125rem;
+  --ndw-font-size-lg: 1.25rem;
+  --ndw-font-size-xl: 1.5rem;
+  --ndw-font-weight-regular: 500;
+  --ndw-font-weight-bold: 600;
+  --ndw-line-height-md: 1.5em;
+  /* Transform */
+  --ndw-rotate-half: rotate(180deg);
+}
+
+@font-face {
+  font-family: "Object Sans";
+  font-weight: 500;
+  font-style: normal;
+  src: url("../../assets/fonts/ObjectSans-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Object Sans";
+  font-weight: 600;
+  font-style: normal;
+  src: url("../../assets/fonts/ObjectSans-Bold.woff2") format("woff2");
+}
+/* Mixins */
+/* Classes */
+.ndw-heading-xl {
+  font-family: var(--ndw-font-family);
+  font-size: 2.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-heading-lg {
+  font-family: var(--ndw-font-family);
+  font-size: 2rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-heading-md {
+  font-family: var(--ndw-font-family);
+  font-size: 1.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-heading-sm {
+  font-family: var(--ndw-font-family);
+  font-size: 1.25rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-paragraph-bold-xl {
+  font-family: var(--ndw-font-family);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-paragraph-xl {
+  font-family: var(--ndw-font-family);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+.ndw-paragraph-bold-lg {
+  font-family: var(--ndw-font-family);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-paragraph-lg {
+  font-family: var(--ndw-font-family);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+.ndw-paragraph-bold-md {
+  font-family: var(--ndw-font-family);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-paragraph-md {
+  font-family: var(--ndw-font-family);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+.ndw-paragraph-bold-sm {
+  font-family: var(--ndw-font-family);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+.ndw-paragraph-sm {
+  font-family: var(--ndw-font-family);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+[ndwButton] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ndw-spacing-2xs);
+  height: var(--ndw-spacing-xl);
+  padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
+  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: "Object Sans", sans-serif;
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-regular);
+  text-align: start;
+}
+[ndwButton]:hover {
+  background-color: var(--ndw-background-primary-hover);
+  border-color: var(--ndw-background-primary-hover);
+  color: var(--ndw-foreground-primary-hover);
+}
+[ndwButton]:active {
+  background-color: var(--ndw-background-primary-active);
+  border-color: var(--ndw-background-primary-active);
+  color: var(--ndw-foreground-primary-active);
+}
+[ndwButton][outline] {
+  background-color: transparent;
+  border-color: var(--ndw-background-primary);
+  color: var(--ndw-text-primary);
+}
+[ndwButton][outline]:hover {
+  background-color: var(--ndw-background-primary);
+  border-color: var(--ndw-background-primary);
+  color: var(--ndw-foreground-primary);
+}
+[ndwButton][outline]:active {
+  background-color: var(--ndw-background-primary-hover);
+  border-color: var(--ndw-background-primary-hover);
+  color: var(--ndw-foreground-primary-hover);
+}
+[ndwButton][secondary] {
+  background-color: transparent;
+  border-color: var(--ndw-color-grey-200);
+  color: var(--ndw-color-grey-600);
+}
+[ndwButton][secondary]:hover {
+  background-color: var(--ndw-color-grey-300);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-white);
+}
+[ndwButton][secondary]:active {
+  background-color: var(--ndw-color-grey-400);
+  border-color: var(--ndw-color-grey-400);
+  color: var(--ndw-color-white);
+}
+[ndwButton][large] {
+  height: var(--ndw-spacing-2xl);
+  padding-inline: var(--ndw-spacing-sm);
+}
+[ndwButton][disabled] {
+  background-color: var(--ndw-color-grey-200);
+  border-color: var(--ndw-color-grey-200);
+  color: var(--ndw-color-grey-600);
+  pointer-events: none;
+  user-select: none;
+}
+
+input[type=checkbox][ndwInput] {
+  display: none;
+}
+input[type=checkbox][ndwInput] ~ label {
+  font-family: var(--ndw-font-family);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+  align-items: center;
+  color: var(--ndw-color-grey-600);
+  cursor: pointer;
+  display: flex;
+  margin-top: var(--ndw-spacing-2xs);
+  width: fit-content;
+}
+input[type=checkbox][ndwInput] ~ label::before {
+  background-color: var(--ndw-color-white);
+  box-sizing: border-box;
+  content: "";
+  width: 1.25rem;
+  height: 1.25rem;
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  margin: calc(var(--ndw-spacing-2xs) * -1) var(--ndw-spacing-xs) 0 auto;
+  padding: var(--ndw-spacing-3xs);
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+}
+input[type=checkbox][ndwInput]:checked ~ label::before {
+  background-color: var(--ndw-color-primary-500);
+  border-color: var(--ndw-color-primary-500);
+}
+input[type=checkbox][ndwInput]:not(:checked) ~ label:hover::before {
+  background-color: var(--ndw-color-white);
+  border-color: var(--ndw-color-primary-500);
+}
+input[type=checkbox][ndwInput]:not(:checked) ~ label:active::before, input[type=checkbox][ndwInput]:not(:checked) ~ label:focus::before, input[type=checkbox][ndwInput]:not(:checked) ~ label:focus-visible::before {
+  border-color: var(--ndw-color-info-500);
+}
+input[type=checkbox][ndwInput][error] ~ label::before {
+  border-color: var(--ndw-color-negative-500);
+}
+input[type=checkbox][ndwInput][error]:not(:checked) ~ label::before {
+  background-color: var(--ndw-color-negative-100);
+}
+input[type=checkbox][ndwInput][disabled] ~ label {
+  color: var(--ndw-color-grey-400);
+  pointer-events: none;
+  user-select: none;
+}
+input[type=checkbox][ndwInput][disabled] ~ label::before {
+  background-color: var(--ndw-color-grey-100);
+  border-color: var(--ndw-color-grey-200);
+}
+input[type=checkbox][ndwInput][disabled]:checked ~ label::before {
+  background-color: var(--ndw-color-grey-200);
+}
+input[type=checkbox][ndwInput] ~ label::before {
+  border-radius: var(--ndw-border-radius-sm);
+}
+input[type=checkbox][ndwInput]:checked ~ label::before {
+  content: url('data:image/svg+xml, %3Csvg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.707 8.7325L1.414 5.4395L0 6.8535L4.707 11.5605L14.414 1.8535L13 0.439499L4.707 8.7325Z" fill="white"/%3E%3C/svg%3E');
+}
+
+[ndwInput] {
+  background-color: var(--ndw-color-white);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border-radius: var(--ndw-border-radius-sm);
+  color: var(--ndw-color-grey-600);
+  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: 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;
+}
+[ndwInput]:hover {
+  border-color: var(--ndw-color-grey-300);
+}
+[ndwInput]:active, [ndwInput]:focus, [ndwInput]:focus-visible {
+  border-color: transparent;
+  box-shadow: var(--ndw-elevation-info);
+  outline-color: var(--ndw-color-info-500);
+}
+[ndwInput]::placeholder {
+  color: var(--ndw-color-grey-300);
+}
+[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=time]::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0;
+}
+[ndwInput][error] {
+  background-color: var(--ndw-color-negative-100);
+  border-color: var(--ndw-color-negative-500);
+}
+[ndwInput][error]:hover {
+  border-color: var(--ndw-color-grey-300);
+}
+[ndwInput][error]:active, [ndwInput][error]:focus, [ndwInput][error]:focus-visible {
+  background-color: var(--ndw-color-white);
+  border-color: transparent;
+  outline-color: var(--ndw-color-info-500);
+}
+[ndwInput][disabled] {
+  background-color: var(--ndw-color-grey-100);
+  border-color: var(--ndw-color-grey-200);
+  color: var(--ndw-color-grey-400);
+  pointer-events: none;
+}
+[ndwInput].prefix-icon {
+  padding-left: calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md));
+}
+
+select[ndwInput] {
+  appearance: none;
+  cursor: pointer;
+  padding-top: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: var(--ndw-spacing-xl);
+}
+select[ndwInput]:not([ndw-changed]) {
+  color: var(--ndw-color-grey-300);
+}
+
+textarea[ndwInput] {
+  min-height: 6.5rem;
+  padding-top: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  resize: vertical;
+}
+
+[ndwLabel] {
+  align-content: center;
+  align-items: center;
+  display: grid;
+  font-family: var(--ndw-font-family);
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-regular);
+  gap: var(--ndw-spacing-3xs);
+  grid-template-columns: repeat(3, auto);
+  height: 1.5rem;
+  justify-content: start;
+  line-height: 100%;
+}
+[ndwLabel] ndw-icon {
+  color: var(--ndw-color-grey-300);
+  margin-top: calc(var(--ndw-spacing-3xs) * -1);
+}
+[ndwLabel] .required {
+  color: var(--ndw-color-grey-300);
+}
+
+a[ndwLink] {
+  align-items: baseline;
+  color: var(--ndw-color-info-500);
+  display: inline-flex;
+  font-size: inherit;
+  gap: var(--ndw-spacing-2xs);
+  text-decoration: underline var(--ndw-border-size-sm) transparent;
+  text-underline-offset: var(--ndw-border-size-md);
+  transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
+}
+a[ndwLink] > * {
+  align-self: center;
+}
+a[ndwLink]:hover {
+  text-decoration-color: var(--ndw-color-info-500);
+}
+a[ndwLink][disabled] {
+  color: var(--ndw-color-grey-300);
+  pointer-events: none;
+  user-select: none;
+}
+
+[ndwButton][menu] {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  color: var(--ndw-color-grey-300);
+  gap: var(--ndw-spacing-xs);
+  height: 2.75rem;
+  padding-inline: 0;
+  position: relative;
+  width: 100%;
+}
+[ndwButton][menu]:hover {
+  background-color: var(--ndw-color-grey-500);
+  border-color: var(--ndw-color-grey-500);
+  color: var(--ndw-color-white);
+}
+[ndwButton][menu]:active {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--ndw-color-white);
+}
+
+input[type=radio][ndwInput] {
+  display: none;
+}
+input[type=radio][ndwInput] ~ label {
+  font-family: var(--ndw-font-family);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+  align-items: center;
+  color: var(--ndw-color-grey-600);
+  cursor: pointer;
+  display: flex;
+  margin-top: var(--ndw-spacing-2xs);
+  width: fit-content;
+}
+input[type=radio][ndwInput] ~ label::before {
+  background-color: var(--ndw-color-white);
+  box-sizing: border-box;
+  content: "";
+  width: 1.25rem;
+  height: 1.25rem;
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  margin: calc(var(--ndw-spacing-2xs) * -1) var(--ndw-spacing-xs) 0 auto;
+  padding: var(--ndw-spacing-3xs);
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+}
+input[type=radio][ndwInput]:checked ~ label::before {
+  background-color: var(--ndw-color-primary-500);
+  border-color: var(--ndw-color-primary-500);
+}
+input[type=radio][ndwInput]:not(:checked) ~ label:hover::before {
+  background-color: var(--ndw-color-white);
+  border-color: var(--ndw-color-primary-500);
+}
+input[type=radio][ndwInput]:not(:checked) ~ label:active::before, input[type=radio][ndwInput]:not(:checked) ~ label:focus::before, input[type=radio][ndwInput]:not(:checked) ~ label:focus-visible::before {
+  border-color: var(--ndw-color-info-500);
+}
+input[type=radio][ndwInput][error] ~ label::before {
+  border-color: var(--ndw-color-negative-500);
+}
+input[type=radio][ndwInput][error]:not(:checked) ~ label::before {
+  background-color: var(--ndw-color-negative-100);
+}
+input[type=radio][ndwInput][disabled] ~ label {
+  color: var(--ndw-color-grey-400);
+  pointer-events: none;
+  user-select: none;
+}
+input[type=radio][ndwInput][disabled] ~ label::before {
+  background-color: var(--ndw-color-grey-100);
+  border-color: var(--ndw-color-grey-200);
+}
+input[type=radio][ndwInput][disabled]:checked ~ label::before {
+  background-color: var(--ndw-color-grey-200);
+}
+input[type=radio][ndwInput] ~ label::before {
+  border-radius: 50%;
+}
+input[type=radio][ndwInput]:checked ~ label::before {
+  content: url('data:image/svg+xml, %3Csvg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle r="6" cx="10" cy="10" fill="white"/%3E%3C/svg%3E');
+}
+
+.cdk-overlay-pane.tooltip-bottom ndw-tooltip::before {
+  bottom: auto;
+  top: calc(var(--ndw-spacing-2xs) * -1);
+}