@ndwnu/design-system 14.2.2 → 14.3.0

package/styles/utils/_screenreader.scss

@@ -1,13 +1,13 @@
-.sr-only {
-  position: absolute;
-
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  border-width: 0;
-  white-space: nowrap;
-
-  clip: rect(0, 0, 0, 0);
-}
+.sr-only {
+  position: absolute;
+
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+
+  clip: rect(0, 0, 0, 0);
+}

package/styles/utils/classes.stories.ts

@@ -1,157 +1,157 @@
-import { Meta, StoryObj } from '@storybook/angular';
-
-/**
- * The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
- * This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
- * Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
- *
- * Below is a representation of the util classes in our design system. <br>
- * Are you missing a util class? Then please contact us so we can improve this.
- */
-
-const meta: Meta = {
-  title: 'Core/Util classes',
-  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  render: () => ({
-    template: `
-      <style>
-        .demo-box {
-          background: var(--ndw-color-primary-050);
-          border: 1px solid var(--ndw-color-primary-500);
-          padding: 0.5rem;
-          text-align: center;
-        }
-
-        .demo-container {
-          background: var(--ndw-color-grey-100);
-          border: 1px dashed var(--ndw-color-grey-500);
-        }
-      </style>
-
-      <div class="d-flex flex-column gap-4 p-3">
-
-        <!-- Display & Flex -->
-        <section>
-          <h3>Display & Flex</h3>
-          <div class="demo-container d-flex gap-2 p-2">
-            <div class="demo-box">d-flex</div>
-            <div class="demo-box">gap-2</div>
-            <div class="demo-box">flex-row</div>
-          </div>
-        </section>
-
-        <!-- Flex direction -->
-        <section>
-          <h3>Flex direction</h3>
-          <div class="demo-container d-flex flex-column gap-1 p-2">
-            <div class="demo-box">d-flex</div>
-            <div class="demo-box">flex-column</div>
-            <div class="demo-box">gap-1</div>
-          </div>
-        </section>
-
-        <!-- Justify content -->
-        <section>
-          <h3>Justify content</h3>
-          <div class="demo-container d-flex justify-content-between p-2">
-            <div class="demo-box">justify-content-between</div>
-            <div class="demo-box">justify-content-between</div>
-          </div>
-          <div class="demo-container d-flex justify-content-start p-2">
-            <div class="demo-box">justify-content-start</div>
-          </div>
-          <div class="demo-container d-flex justify-content-end p-2">
-            <div class="demo-box">justify-content-end</div>
-          </div>
-        </section>
-
-        <!-- Align items -->
-        <section>
-          <h3>Align items</h3>
-          <div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
-            <div class="demo-box">align-items-center</div>
-          </div>
-          <div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
-            <div class="demo-box">align-items-start</div>
-          </div>
-          <div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
-            <div class="demo-box">align-items-end</div>
-          </div>
-        </section>
-
-        <!-- Spacing utilities -->
-        <section>
-          <h3>Spacing (margin, padding, gap)</h3>
-
-          <div class="demo-container p-3">
-            <div class="demo-box mb-2">mb-2</div>
-            <div class="demo-box mt-2">mt-2</div>
-          </div>
-          <div class="demo-container p-3">
-            <div class="p-2">
-              <div class="demo-box">p-2</div>
-            </div>
-            <div class="pt-2">
-              <div class="demo-box">pt-2</div>
-            </div>
-            <div class="pb-2">
-              <div class="demo-box">pb-2</div>
-            </div>
-          </div>
-
-          <div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
-            <div class="demo-box">m-auto</div>
-          </div>
-
-          <div class="demo-container d-flex gap-3 p-2 mt-2">
-            <div class="demo-box">gap-3</div>
-            <div class="demo-box">gap-3</div>
-            <div class="demo-box">gap-3</div>
-          </div>
-        </section>
-
-        <!-- Width / height -->
-        <section>
-          <h3>Width & Height</h3>
-          <div class="demo-container p-2" style="height: 100px;">
-            <div class="demo-box w-100 h-100">
-              w-100 / h-100
-            </div>
-          </div>
-          <div class="demo-container p-2" style="height: 100px;width: 200px;">
-            <div class="demo-box w-auto h-auto">
-              w-auto h-auto
-            </div>
-          </div>
-        </section>
-
-        <!-- Text utilities -->
-        <section>
-          <h3>Text alignment</h3>
-          <div class="demo-container p-2">
-            <div class="text-start">
-              <span class="demo-box">text-start</span>
-            </div>
-            <div class="text-center">
-              <span class="demo-box">text-center</span>
-            </div>
-            <div class="text-end">
-              <span class="demo-box">text-end</span>
-            </div>
-          </div>
-        </section>
-
-      </div>
-    `,
-  }),
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
+import { Meta, StoryObj } from '@storybook/angular';
+
+/**
+ * The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
+ * This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
+ * Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
+ *
+ * Below is a representation of the util classes in our design system. <br>
+ * Are you missing a util class? Then please contact us so we can improve this.
+ */
+
+const meta: Meta = {
+  title: 'Core/Util classes',
+  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  render: () => ({
+    template: `
+      <style>
+        .demo-box {
+          background: var(--ndw-color-primary-050);
+          border: 1px solid var(--ndw-color-primary-500);
+          padding: 0.5rem;
+          text-align: center;
+        }
+
+        .demo-container {
+          background: var(--ndw-color-grey-100);
+          border: 1px dashed var(--ndw-color-grey-500);
+        }
+      </style>
+
+      <div class="d-flex flex-column gap-4 p-3">
+
+        <!-- Display & Flex -->
+        <section>
+          <h3>Display & Flex</h3>
+          <div class="demo-container d-flex gap-2 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">gap-2</div>
+            <div class="demo-box">flex-row</div>
+          </div>
+        </section>
+
+        <!-- Flex direction -->
+        <section>
+          <h3>Flex direction</h3>
+          <div class="demo-container d-flex flex-column gap-1 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">flex-column</div>
+            <div class="demo-box">gap-1</div>
+          </div>
+        </section>
+
+        <!-- Justify content -->
+        <section>
+          <h3>Justify content</h3>
+          <div class="demo-container d-flex justify-content-between p-2">
+            <div class="demo-box">justify-content-between</div>
+            <div class="demo-box">justify-content-between</div>
+          </div>
+          <div class="demo-container d-flex justify-content-start p-2">
+            <div class="demo-box">justify-content-start</div>
+          </div>
+          <div class="demo-container d-flex justify-content-end p-2">
+            <div class="demo-box">justify-content-end</div>
+          </div>
+        </section>
+
+        <!-- Align items -->
+        <section>
+          <h3>Align items</h3>
+          <div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
+            <div class="demo-box">align-items-center</div>
+          </div>
+          <div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
+            <div class="demo-box">align-items-start</div>
+          </div>
+          <div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
+            <div class="demo-box">align-items-end</div>
+          </div>
+        </section>
+
+        <!-- Spacing utilities -->
+        <section>
+          <h3>Spacing (margin, padding, gap)</h3>
+
+          <div class="demo-container p-3">
+            <div class="demo-box mb-2">mb-2</div>
+            <div class="demo-box mt-2">mt-2</div>
+          </div>
+          <div class="demo-container p-3">
+            <div class="p-2">
+              <div class="demo-box">p-2</div>
+            </div>
+            <div class="pt-2">
+              <div class="demo-box">pt-2</div>
+            </div>
+            <div class="pb-2">
+              <div class="demo-box">pb-2</div>
+            </div>
+          </div>
+
+          <div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
+            <div class="demo-box">m-auto</div>
+          </div>
+
+          <div class="demo-container d-flex gap-3 p-2 mt-2">
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+          </div>
+        </section>
+
+        <!-- Width / height -->
+        <section>
+          <h3>Width & Height</h3>
+          <div class="demo-container p-2" style="height: 100px;">
+            <div class="demo-box w-100 h-100">
+              w-100 / h-100
+            </div>
+          </div>
+          <div class="demo-container p-2" style="height: 100px;width: 200px;">
+            <div class="demo-box w-auto h-auto">
+              w-auto h-auto
+            </div>
+          </div>
+        </section>
+
+        <!-- Text utilities -->
+        <section>
+          <h3>Text alignment</h3>
+          <div class="demo-container p-2">
+            <div class="text-start">
+              <span class="demo-box">text-start</span>
+            </div>
+            <div class="text-center">
+              <span class="demo-box">text-center</span>
+            </div>
+            <div class="text-end">
+              <span class="demo-box">text-end</span>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};

package/styles/utils/index.scss

@@ -1 +1 @@
-@forward 'screenreader';
+@forward 'screenreader';

package/types/ndwnu-design-system.d.ts

@@ -8,6 +8,7 @@ import * as _angular_material_datepicker from '@angular/material/datepicker';
 import { DateFilterFn, MatCalendar } from '@angular/material/datepicker';
 import Shepherd, { StepOptions, TourOptions as TourOptions$1, StepOptionsButton } from 'shepherd.js';
 import { Params } from '@angular/router';
+import { ConnectedPosition } from '@angular/cdk/overlay';
 import * as _ndwnu_design_system from '@ndwnu/design-system';
 import { Point } from '@angular/cdk/drag-drop';
 import { ComponentType, TemplatePortal } from '@angular/cdk/portal';
@@ -58,8 +59,10 @@ declare class AutosuggestAddOptionComponent extends CoreAutosuggestAddOptionComp
 declare class CheckboxComponent extends CoreCheckboxComponent implements ControlValueAccessor {
     switch: _angular_core.InputSignal<boolean>;
     success: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    inputId: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ndw-checkbox", never, { "switch": { "alias": "switch"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ndw-checkbox", never, { "switch": { "alias": "switch"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class CheckboxGroupComponent extends CoreCheckboxGroupComponent {
@@ -426,6 +429,8 @@ declare class RadioButtonComponent implements ControlValueAccessor, CheckableCom
     success: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     value: _angular_core.ModelSignal<unknown>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    inputId: _angular_core.InputSignal<string | undefined>;
     name: _angular_core.WritableSignal<string | undefined>;
     uuid: `${string}-${string}-${string}-${string}-${string}`;
     onInputChange(event: Event): void;
@@ -434,7 +439,7 @@ declare class RadioButtonComponent implements ControlValueAccessor, CheckableCom
     registerOnTouched(): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "ndw-radio-button", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "value": "valueChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "ndw-radio-button", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "value": "valueChange"; }, never, ["*"], true, never>;
 }
 
 declare class RadioGroupComponent implements AfterContentInit, ControlValueAccessor {
@@ -507,6 +512,8 @@ declare class ListItemComponent implements CheckableComponent {
     checkable: _angular_core.InputSignal<boolean>;
     checkType: _angular_core.InputSignal<CheckType>;
     collapsible: _angular_core.InputSignal<boolean>;
+    controlId: _angular_core.InputSignal<string | undefined>;
+    ariaControls: _angular_core.InputSignal<string | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
     indented: _angular_core.InputSignal<boolean>;
     pillColor: _angular_core.InputSignal<PillColor>;
@@ -521,12 +528,13 @@ declare class ListItemComponent implements CheckableComponent {
     radioButton: _angular_core.Signal<RadioButtonComponent | undefined>;
     name: _angular_core.WritableSignal<string | undefined>;
     actionable: _angular_core.Signal<boolean>;
+    checkAriaLabel: _angular_core.Signal<string | undefined>;
+    readonly checkInputId: string;
     constructor();
     onButtonClick(event: Event): void;
-    onCheckClick(event: Event): void;
-    onListItemSelect(): void;
+    onExpandClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ndw-list-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "displayLargeNumbers": { "alias": "displayLargeNumbers"; "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; }; "checkType": { "alias": "checkType"; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ndw-list-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "displayLargeNumbers": { "alias": "displayLargeNumbers"; "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; }; "checkType": { "alias": "checkType"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "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>;
 }
 
 declare class ListComponent implements AfterContentInit {
@@ -589,8 +597,9 @@ declare class AvatarComponent {
     status: _angular_core.InputSignal<AvatarStatus>;
     initials: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<AvatarColor | undefined>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ndw-avatar", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ndw-avatar", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class BadgeComponent extends CoreBadgeComponent {
@@ -759,8 +768,9 @@ declare class EditBarMessageComponent {
 
 declare class FavoriteComponent {
     checked: _angular_core.ModelSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FavoriteComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FavoriteComponent, "ndw-favorite", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FavoriteComponent, "ndw-favorite", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
 }
 
 interface RequiredElement {
@@ -963,8 +973,9 @@ declare class HoverableListItemComponent {
 }
 
 declare class IconComponent extends CoreIconComponent {
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "ndw-icon", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "ndw-icon", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class KeyValueListComponent extends CoreKeyValueListComponent {
@@ -1051,7 +1062,7 @@ declare class LoaderComponent {
 
 declare class MapButtonComponent {
     #private;
-    readonly icon: _angular_core.InputSignal<"search" | "polygon" | "direction" | "gps" | "high-res" | "layers" | "zoom-in" | "zoom-out" | "mail" | "add-traffic-sign" | "add-zone" | "download" | "hectometer" | "low-res" | "zoom-to-content" | undefined>;
+    readonly icon: _angular_core.InputSignal<"direction" | "gps" | "high-res" | "layers" | "polygon" | "search" | "zoom-in" | "zoom-out" | "mail" | "add-traffic-sign" | "add-zone" | "download" | "hectometer" | "low-res" | "zoom-to-content" | undefined>;
     readonly active: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -1102,7 +1113,7 @@ declare class MapDisplayComponent implements OnInit {
     layersTitle: _angular_core.InputSignal<string>;
     enableClearLayers: _angular_core.InputSignal<boolean>;
     compact: _angular_core.InputSignal<boolean>;
-    layerOptionType: _angular_core.InputSignal<"checkbox" | "radio">;
+    layerOptionType: _angular_core.InputSignal<"radio" | "checkbox">;
     backgroundOptions: _angular_core.InputSignalWithTransform<MapBackgroundOption[], MapBackgroundOption[]>;
     layerOptions: _angular_core.InputSignalWithTransform<MapDisplayOption[], MapDisplayOption[]>;
     readonly backgroundChange: _angular_core.OutputEmitterRef<MapBackgroundOption>;
@@ -1111,6 +1122,7 @@ declare class MapDisplayComponent implements OnInit {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly htmlIsRendered: _angular_core.WritableSignal<boolean>;
     readonly showPopover: _angular_core.Signal<boolean>;
+    protected readonly overlayPositions: ConnectedPosition[];
     readonly linkedBackgroundOptions: _angular_core.WritableSignal<MapBackgroundOption[]>;
     readonly activeBackgroundOption: _angular_core.Signal<MapBackgroundOption | undefined>;
     readonly linkedLayerOptions: _angular_core.WritableSignal<MapDisplayOption[]>;
@@ -1304,19 +1316,16 @@ declare class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent
 
 declare class SplitterComponent implements AfterViewInit, OnDestroy {
     readonly disabled: _angular_core.InputSignal<boolean>;
-    /**
-     * If true, the splitter is horizontal (splits top and bottom panels).
-     * Otherwise, it is vertical (splits left and right panels).
-     */
+    /** When true, splits top/bottom panels; otherwise left/right. */
     readonly horizontal: _angular_core.InputSignal<boolean>;
-    /**
-     * Optional size of the first panel (in pixels) when the component is initialized.
-     */
+    /** Optional first-panel size (px) at initialization. */
     readonly initialPanelSize: _angular_core.InputSignal<number | null>;
-    /**
-     * Minimum size of both panels (in pixels).
-     */
+    /** Minimum size of both panels (px). */
     readonly minimumPanelSize: _angular_core.InputSignal<number>;
+    /** Accessible label for the resize separator. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Step (px) used when resizing with the arrow keys. */
+    readonly keyboardStep: _angular_core.InputSignal<number>;
     protected readonly firstPanelSize: _angular_core.WritableSignal<number>;
     protected readonly secondPanelSize: _angular_core.Signal<number>;
     protected readonly isDragging: _angular_core.WritableSignal<boolean>;
@@ -1324,35 +1333,18 @@ declare class SplitterComponent implements AfterViewInit, OnDestroy {
     private readonly splitter;
     private readonly cdkDrag;
     private storedFirstPanelSize;
-    /**
-     * Flag to indicate if the mouse click event should be
-     * ignored because the user is dragging the splitter.
-     */
+    /** When true, the next click is ignored because the user was dragging. */
     private ignoreMouseClick;
-    /**
-     * Reactive object to store the dimensions of the drag elements.
-     * Updated by a resize observer on the container.
-     */
+    /** Drag element dimensions, updated by a resize observer on the container. */
     private readonly dragElementDimensions;
     private readonly resizeObserver;
-    /**
-     * Available size for the panels, without considering the `minimumPanelSize` input.
-     */
+    /** Available panel size, ignoring `minimumPanelSize`. */
     private readonly availableSize;
-    /**
-     * Position of the drag handle when the component is initialized.
-     * The drag position is always relative to this starting position.
-     */
+    /** Drag handle position at initialization (relative origin). */
     private readonly dragStartPosition;
-    /**
-     * Minimum panel size that is safe to use, considering the
-     * available container size and the `minimumPanelSize` input.
-     */
+    /** Minimum panel size that is safe given the container and `minimumPanelSize`. */
     protected readonly safeMinPanelSize: _angular_core.Signal<number>;
-    /**
-     * Maximum panel size that is safe to use, considering the
-     * available container size and the `minimumPanelSize
-     */
+    /** Maximum panel size that is safe given the container and `minimumPanelSize`. */
     protected readonly safeMaxPanelSize: _angular_core.Signal<number>;
     constructor();
     ngAfterViewInit(): void;
@@ -1365,13 +1357,15 @@ declare class SplitterComponent implements AfterViewInit, OnDestroy {
     protected onDragEnded(): void;
     protected onDragMoved(): void;
     protected onSplitterMouseDown(): void;
+    /** Keyboard resizing for the separator (WCAG 2.1.1). */
+    protected onKeydown(event: KeyboardEvent): void;
     protected onSplitterMouseUp(): void;
     protected setDragPosition(position: number): void;
     protected storeFirstPanelSize(): void;
     private setFirstPanelSize;
     private clampPanelSize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "initialPanelSize": { "alias": "initialPanelSize"; "required": false; "isSignal": true; }; "minimumPanelSize": { "alias": "minimumPanelSize"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "initialPanelSize": { "alias": "initialPanelSize"; "required": false; "isSignal": true; }; "minimumPanelSize": { "alias": "minimumPanelSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
 }
 
 type SummaryActionsView = 'visible' | 'popover' | 'auto';
@@ -1483,6 +1477,7 @@ declare class TabGroupComponent implements OnDestroy {
     hasPadding: _angular_core.InputSignal<boolean>;
     activeTabId: _angular_core.ModelSignal<string | number | undefined>;
     inlinePadding: _angular_core.InputSignal<number>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
     private readonly _scrollLeft;
     private readonly _scrollWidth;
     private readonly _clientWidth;
@@ -1501,7 +1496,7 @@ declare class TabGroupComponent implements OnDestroy {
     private getFirstEnabledIndex;
     private getLastEnabledIndex;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "hasPadding": { "alias": "hasPadding"; "required": false; "isSignal": true; }; "activeTabId": { "alias": "activeTabId"; "required": false; "isSignal": true; }; "inlinePadding": { "alias": "inlinePadding"; "required": false; "isSignal": true; }; }, { "activeTabId": "activeTabIdChange"; }, ["_tabs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "hasPadding": { "alias": "hasPadding"; "required": false; "isSignal": true; }; "activeTabId": { "alias": "activeTabId"; "required": false; "isSignal": true; }; "inlinePadding": { "alias": "inlinePadding"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeTabId": "activeTabIdChange"; }, ["_tabs"], never, true, never>;
 }
 
 declare const ndwAgGridTheme: Partial<ThemeDefaultParams>;