@ndwnu/design-system 9.1.0 → 9.2.0

package/lib/components/accordion/accordion.component.d.ts

@@ -1,11 +1,11 @@
 import { OnInit } from '@angular/core';
 import { CollapsibleComponent } from '../collapsible';
+import { ListComponent } from '../list';
 import * as i0 from "@angular/core";
-export declare class AccordionComponent implements OnInit {
+export declare class AccordionComponent extends ListComponent implements OnInit {
+    #private;
     collapseOthers: import("@angular/core").InputSignal<boolean>;
     collapsibles: import("@angular/core").Signal<readonly CollapsibleComponent[]>;
-    private readonly accordionService;
-    private readonly destroyRef;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ndw-accordion", never, { "collapseOthers": { "alias": "collapseOthers"; "required": false; "isSignal": true; }; }, {}, ["collapsibles"], ["*"], true, never>;

package/lib/components/collapsible/collapsible.component.d.ts

@@ -2,6 +2,8 @@ import * as i0 from "@angular/core";
 export declare class CollapsibleComponent {
     index: import("@angular/core").InputSignal<number>;
     title: import("@angular/core").InputSignal<string>;
+    checkable: import("@angular/core").InputSignal<boolean>;
+    subtitle: import("@angular/core").InputSignal<string | undefined>;
     value: import("@angular/core").InputSignal<number | undefined>;
     expanded: import("@angular/core").ModelSignal<boolean>;
     private readonly accordionService;
@@ -11,5 +13,5 @@ export declare class CollapsibleComponent {
     animationState: import("@angular/core").Signal<"open" | "closed">;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["custom-header-content", "*"], true, never>;
 }

package/lib/components/dropdown/dropdown.component.d.ts

@@ -11,7 +11,7 @@ export declare class DropdownComponent {
     readonly isOpenChange: import("@angular/core").OutputEmitterRef<boolean>;
     readonly popoverTrigger: import("@angular/core").Signal<PopoverTriggerDirective>;
     readonly dropdownButton: import("@angular/core").Signal<ElementRef<any>>;
-    readonly buttonIcon: import("@angular/core").Signal<"keyboard_arrow_up" | "keyboard_arrow_down">;
+    readonly buttonIcon: import("@angular/core").Signal<"keyboard_arrow_down" | "keyboard_arrow_up">;
     onTagClicked($event: Event): void;
     onKeyDown(event: KeyboardEvent): void;
     closeDropdown(): void;

package/lib/components/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.d.ts

@@ -22,5 +22,5 @@ export declare abstract class BaseAutosuggestOptionComponent<T> implements Focus
     ngOnDestroy(): void;
     protected getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseAutosuggestOptionComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BaseAutosuggestOptionComponent<any>, "ng-component", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseAutosuggestOptionComponent<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/form-field/month-input/date-validators.d.ts

@@ -0,0 +1,3 @@
+import { ValidatorFn } from '@angular/forms';
+export declare const minDateValidator: (min: Date) => ValidatorFn;
+export declare const maxDateValidator: (max: Date) => ValidatorFn;

package/lib/components/form-field/month-input/month-input-utils.d.ts

@@ -1,5 +1,6 @@
 export declare function createYearRange(minDate: Date, maxDate: Date): number[];
-export declare function createMonthOptions(monthLabels: string[]): {
+export declare function createMonthOptions(monthLabels: string[], year: number, minDate: Date, maxDate: Date): {
     label: string;
     value: number;
+    disabled: boolean;
 }[];

package/lib/components/form-field/month-input/month-input.component.d.ts

@@ -12,6 +12,7 @@ export declare class MonthInputComponent implements ControlValueAccessor, OnInit
     readonly minDate: import("@angular/core").InputSignal<Date>;
     readonly maxDate: import("@angular/core").InputSignal<Date>;
     readonly monthLabels: import("@angular/core").InputSignal<string[]>;
+    readonly addValidators: import("@angular/core").InputSignal<boolean>;
     readonly disabled: import("@angular/core").ModelSignal<boolean>;
     readonly readonly: import("@angular/core").InputSignal<boolean>;
     protected readonly selectedYear: import("@angular/core").ModelSignal<number>;
@@ -23,7 +24,9 @@ export declare class MonthInputComponent implements ControlValueAccessor, OnInit
     protected readonly months: import("@angular/core").Signal<{
         label: string;
         value: number;
+        disabled: boolean;
     }[]>;
+    protected readonly isYearValid: import("@angular/core").Signal<boolean>;
     readonly input: import("@angular/core").Signal<InputDirective | undefined>;
     protected showMonthPicker: boolean;
     private onChange;
@@ -40,5 +43,5 @@ export declare class MonthInputComponent implements ControlValueAccessor, OnInit
     protected onKeyDown(event: KeyboardEvent): void;
     private adjustMonth;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonthInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonthInputComponent, "ndw-month-input", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "showMonthPickerLabel": { "alias": "showMonthPickerLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "yearPlaceholder": { "alias": "yearPlaceholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "monthLabels": { "alias": "monthLabels"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "selectedYear": { "alias": "selectedYear"; "required": false; "isSignal": true; }; "selectedMonth": { "alias": "selectedMonth"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectedYear": "selectedYearChange"; "selectedMonth": "selectedMonthChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonthInputComponent, "ndw-month-input", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "showMonthPickerLabel": { "alias": "showMonthPickerLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "yearPlaceholder": { "alias": "yearPlaceholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "monthLabels": { "alias": "monthLabels"; "required": false; "isSignal": true; }; "addValidators": { "alias": "addValidators"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "selectedYear": { "alias": "selectedYear"; "required": false; "isSignal": true; }; "selectedMonth": { "alias": "selectedMonth"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectedYear": "selectedYearChange"; "selectedMonth": "selectedMonthChange"; }, never, never, true, never>;
 }

package/lib/components/form-field/option-group/option.component.d.ts

@@ -4,6 +4,7 @@ export declare class OptionComponent {
     label: import("@angular/core").InputSignal<string>;
     description: import("@angular/core").InputSignal<string | undefined>;
     required: import("@angular/core").InputSignal<boolean>;
+    disabled: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "ndw-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "ndw-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/index.d.ts

@@ -16,6 +16,8 @@ export * from './form-field';
 export * from './icon';
 export * from './layout';
 export * from './layout-banners';
+export * from './list';
+export * from './list-item';
 export * from './loader';
 export * from './main-navigation';
 export * from './map-button';

package/lib/components/list/index.d.ts

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

package/lib/components/list/list.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ListComponent {
+    elevated: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "ndw-list", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/list-item/index.d.ts

@@ -0,0 +1 @@
+export * from './list-item.component';

package/lib/components/list-item/list-item.component.d.ts

@@ -0,0 +1,28 @@
+import { PillColor } from '../pill';
+import * as i0 from "@angular/core";
+export declare class ListItemComponent {
+    #private;
+    active: import("@angular/core").ModelSignal<boolean>;
+    badgeValue: import("@angular/core").InputSignal<number | undefined>;
+    buttonIcon: import("@angular/core").InputSignal<string | undefined>;
+    buttonLabel: import("@angular/core").InputSignal<string | undefined>;
+    checkable: import("@angular/core").InputSignal<boolean>;
+    collapsible: import("@angular/core").InputSignal<boolean>;
+    disabled: import("@angular/core").InputSignal<boolean>;
+    indented: import("@angular/core").InputSignal<boolean>;
+    pillColor: import("@angular/core").InputSignal<PillColor>;
+    pillLabel: import("@angular/core").InputSignal<string | undefined>;
+    prefixIcon: import("@angular/core").InputSignal<string | undefined>;
+    showButton: import("@angular/core").InputSignal<boolean>;
+    subtitle: import("@angular/core").InputSignal<string | undefined>;
+    title: import("@angular/core").InputSignal<string | undefined>;
+    buttonClicked: import("@angular/core").OutputEmitterRef<void>;
+    checked: import("@angular/core").ModelSignal<boolean>;
+    expanded: import("@angular/core").ModelSignal<boolean>;
+    actionable: import("@angular/core").Signal<boolean>;
+    onButtonClick(event: Event): void;
+    onCheckboxClick(event: Event): void;
+    onListItemSelect(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListItemComponent, "ndw-list-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indented": { "alias": "indented"; "required": false; "isSignal": true; }; "pillColor": { "alias": "pillColor"; "required": false; "isSignal": true; }; "pillLabel": { "alias": "pillLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "buttonClicked": "buttonClicked"; "checked": "checkedChange"; "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}

package/lib/components/main-navigation/main-navigation-header/main-navigation-header.component.d.ts

@@ -10,7 +10,7 @@ export declare class MainNavigationHeaderComponent {
     themeImagePath: import("@angular/core").InputSignal<string>;
     environment: import("@angular/core").InputSignal<Environment | undefined>;
     isMobileMenuOpen: import("@angular/core").ModelSignal<boolean>;
-    environmentColor: import("@angular/core").Signal<"blue" | "green" | "yellow" | "gray">;
+    environmentColor: import("@angular/core").Signal<"blue" | "gray" | "green" | "yellow">;
     toggleMobileMenu(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationHeaderComponent, "ndw-main-navigation-header", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": true; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": true; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": true; "isSignal": true; }; "theme": { "alias": "theme"; "required": true; "isSignal": true; }; "themeImagePath": { "alias": "themeImagePath"; "required": true; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "isMobileMenuOpen": { "alias": "isMobileMenuOpen"; "required": true; "isSignal": true; }; }, { "isMobileMenuOpen": "isMobileMenuOpenChange"; }, never, never, true, never>;

package/lib/components/multi-select/checkbox-data.interface.d.ts

@@ -1,5 +1,8 @@
+import { Image } from '../../models';
 export interface CheckboxData {
     id: string | number;
     label: string;
     value: boolean;
+    icon?: string;
+    image?: Image;
 }

package/lib/models/image.model.d.ts

@@ -0,0 +1,4 @@
+export interface Image {
+    src: string;
+    alt: string;
+}

package/lib/models/index.d.ts

@@ -1 +1,2 @@
 export * from './aria.model';
+export * from './image.model';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "peerDependencies": {
     "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",
@@ -8,7 +8,7 @@
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ndwnu/core": "0.0.2-beta.1",
+    "@ndwnu/core": "0.0.3-beta.1",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/angular": "8.6.12",
     "rxjs": "^7.8.0"

package/styles/base/_colors.scss

@@ -187,7 +187,7 @@
   --_primary-200: 176, 44%, 73%;
   --_primary-300: 176, 50%, 60%;
   --_primary-400: 176, 55%, 48%;
-  --_primary-500: 176, 58%, 41%;
+  --_primary-500: 176, 53%, 33%;
   --_primary-600: 176, 60%, 34%;
   --_primary-700: 176, 68%, 21%;
   --_primary-800: 176, 68%, 13%;

package/styles/base/colors.stories.model.ts

@@ -1,16 +1,6 @@
-import { alphas, colors, header } from './colors.stories.utils';
+import { ColorGroup } from '@ndwnu/core';
 
-interface ColorValue {
-  value?: number;
-  subName?: string;
-}
-
-export interface ColorGroup {
-  name: string;
-  colors: ColorValue[];
-}
-
-const primary: ColorGroup = {
+export const PRIMARY: ColorGroup = {
   name: 'Primary',
   colors: [
     { value: 50 },
@@ -25,7 +15,7 @@ const primary: ColorGroup = {
   ],
 };
 
-const secondary: ColorGroup = {
+export const SECONDARY: ColorGroup = {
   name: 'Secondary',
   colors: [
     { value: 50 },
@@ -39,14 +29,15 @@ const secondary: ColorGroup = {
   ],
 };
 
-const tertiary: ColorGroup = {
+export const TERTIARY: ColorGroup = {
   name: 'Tertiary',
   colors: [{ value: 400 }, { value: 500 }],
 };
 
-const grey: ColorGroup = {
+export const GREY: ColorGroup = {
   name: 'Grey',
   colors: [
+    { value: undefined, altName: 'White' },
     { value: 100 },
     { value: 200 },
     { value: 300 },
@@ -57,87 +48,32 @@ const grey: ColorGroup = {
   ],
 };
 
-const white: ColorGroup = {
-  name: 'White',
-  colors: [{ value: undefined }],
-};
-
-const links: ColorGroup = {
+export const LINK: ColorGroup = {
   name: 'Link',
   colors: [{ value: 400 }, { value: 500 }],
 };
 
-const positive: ColorGroup = {
-  name: 'Positive',
-  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
-};
-
-const warning: ColorGroup = {
-  name: 'Warning',
-  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
-};
-
-const info: ColorGroup = {
-  name: 'Info',
-  colors: [{ value: 100 }, { value: 500 }],
-};
-
-const alternative: ColorGroup = {
-  name: 'Alternative',
-  colors: [{ value: 100 }, { value: 500 }],
+export const NOTIFICATIONS: ColorGroup = {
+  name: 'Notifications',
+  colors: [
+    { value: 100, altName: 'Positive' },
+    { value: 500, altName: 'Positive' },
+    { value: 600, altName: 'Positive' },
+    { value: 100, altName: 'Warning' },
+    { value: 500, altName: 'Warning' },
+    { value: 600, altName: 'Warning' },
+    { value: 100, altName: 'Critical' },
+    { value: 200, altName: 'Critical' },
+    { value: 300, altName: 'Critical' },
+    { value: 500, altName: 'Critical' },
+    { value: 100, altName: 'Info' },
+    { value: 500, altName: 'Info' },
+    { value: 100, altName: 'Alternative' },
+    { value: 500, altName: 'Alternative' },
+  ],
 };
 
-const critical: ColorGroup = {
-  name: 'Critical',
-  colors: [{ value: 100 }, { value: 200 }, { value: 300 }, { value: 500 }],
+export const ALPHAS: ColorGroup = {
+  name: 'Alphas',
+  alphas: ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'],
 };
-
-const alphaValues = ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'];
-
-// Todo - Update color values when switching between themes
-export const template = `
-  <div class="sb">
-    <div class="sb_content overview colors">
-      <section>
-        <h2 class="ndw-heading-md">Primary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(primary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Secondary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(secondary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Tertiary</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(tertiary)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Grey</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(white)}
-        ${colors(grey)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Links</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(links)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Notifications</h2>
-        ${header(['Color', 'Name', 'Value', 'Variable'])}
-        ${colors(positive)}
-        ${colors(info)}
-        ${colors(warning)}
-        ${colors(critical)}
-        ${colors(alternative)}
-      </section>
-      <section>
-        <h2 class="ndw-heading-md">Alpha</h2>
-        ${header(['Alpha', 'Name', 'Value', 'Variable'])}
-        ${alphas(alphaValues)}
-      </section>
-    </div>
-  </div>
-`;

package/styles/base/colors.stories.ts

@@ -1,11 +1,21 @@
+import { template } from '@ndwnu/core';
 import { type Meta, type StoryObj } from '@storybook/angular';
 
-import { template } from './colors.stories.model';
+import {
+  ALPHAS,
+  GREY,
+  LINK,
+  NOTIFICATIONS,
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+} from './colors.stories.model';
 
 const meta: Meta = {
   title: 'Core/Colors',
-  tags: ['autodocs', 'ndw', 'nwb', 'ntm'],
-  render: () => ({ template }),
+  render: () => ({
+    template: template([PRIMARY, SECONDARY, TERTIARY, GREY, LINK, NOTIFICATIONS, ALPHAS]),
+  }),
 } as Meta;
 
 export default meta;

package/styles/base/typography.stories.ts

@@ -1,16 +1,11 @@
+import { TypographyVariant } from '@ndwnu/core';
 import { type Meta, type StoryObj } from '@storybook/angular';
 
 interface StoryArgs {
-  typographyList: Typography[];
+  typographyList: TypographyVariant[];
 }
 
-interface Typography {
-  fontSize: string;
-  fontSizeInRem: string;
-  class: string;
-}
-
-const typographyList: Typography[] = [
+const typographyList: TypographyVariant[] = [
   {
     fontSize: '40px',
     fontSizeInRem: '2.5rem',
@@ -92,7 +87,7 @@ const meta: Meta<StoryArgs> = {
             </div>
             ${typographyList
               .map(
-                (typography: Typography) => `
+                (typography: TypographyVariant) => `
               <div class="content ${typography.class}">
                 <span>${typography.fontSize} / ${typography.fontSizeInRem}</span>
                 <span>150%</span>

package/styles/components/_divider.scss

@@ -1,5 +1,5 @@
 hr[ndwDivider] {
-  background-color: var(--ndw-color-grey-300);
+  background-color: var(--ndw-color-grey-200);
   border: none;
   height: var(--ndw-border-size-sm);
   margin: var(--ndw-spacing-xs) 0;

package/styles/components/_input.scss

@@ -100,10 +100,6 @@
   padding-inline-end: var(--ndw-spacing-xs);
 }
 
-.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
-  background-color: var(--ndw-color-white);
-}
-
 .input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
   background-color: var(--ndw-color-white);
   select[ndwInput] {

package/styles/base/colors.stories.utils.ts

@@ -1,58 +0,0 @@
-import { ColorGroup } from './colors.stories.model';
-
-export function header(values: string[]): string {
-  return `
-    <div class="header">
-      ${values.map((value) => `<p class="ndw-heading-sm">${value}</p>`).join('')}
-    </div>
-  `;
-}
-
-export function colors(type: ColorGroup): string {
-  const style = getComputedStyle(document.body);
-
-  return `${type.colors
-    .map((color) => {
-      const subName = color.subName ? `-${color.subName}` : '';
-      const convertedValue = color.value && color.value < 100 ? `0${color.value}` : color.value;
-      const value = color.value ? `-${convertedValue}` : '';
-      const variable = `--ndw-color-${type.name}${subName}${value}`.toLowerCase();
-
-      return `
-        <div class="content">
-          <div
-            class="block"
-            style="background-color: var(${variable})"
-          ></div>
-          <p>${type.name}${subName}${value}</p>
-          <p>${style.getPropertyValue(variable)}</p>
-          <p>${variable}</p>
-        </div>
-      `;
-    })
-    .join('')}`;
-}
-
-export function alphas(values: string[]): string {
-  const style = getComputedStyle(document.body);
-
-  return `
-    ${values
-      .map((alpha) => {
-        const variable = `--ndw-alpha-${alpha.toLowerCase()}`;
-
-        return `
-          <div class="content">
-            <div
-              class="block"
-              style="background-color: var(--ndw-alpha-${alpha.toLowerCase()})"
-            ></div>
-            <p>${alpha}</p>
-            <p>${style.getPropertyValue(variable)}</p>
-            <p>${variable}</p>
-          </div>
-        `;
-      })
-      .join('')}
-  `;
-}