@ndwnu/design-system 13.1.1 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "13.1.1",
+  "version": "14.0.0",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",

package/styles/FONTS.md

@@ -0,0 +1,46 @@
+# Fonts
+
+The design system self-hosts its fonts via [Fontsource](https://fontsource.org/) instead of loading them from the Google Fonts CDN. This avoids a runtime dependency on `fonts.googleapis.com` / `fonts.gstatic.com`.
+
+## Fonts in use
+
+| Family                            | Used for                               | Fontsource package                              |
+| --------------------------------- | -------------------------------------- | ----------------------------------------------- |
+| DM Sans Variable                  | Headings (`--ndw-font-family-heading`) | `@fontsource-variable/dm-sans`                  |
+| Nunito Sans Variable              | Body text (`--ndw-font-family-body`)   | `@fontsource-variable/nunito-sans`              |
+| Material Symbols Rounded Variable | Icons (`<ndw-icon>`)                   | `@fontsource-variable/material-symbols-rounded` |
+
+These three packages are declared as **peer dependencies** of `@ndwnu/design-system`. Consuming apps install them alongside the design system:
+
+```bash
+npm install @fontsource-variable/dm-sans @fontsource-variable/nunito-sans @fontsource-variable/material-symbols-rounded
+```
+
+## How they are loaded
+
+The `@font-face` declarations live in [`base/_fonts.scss`](./base/_fonts.scss), which is `@forward`ed from [`base/index.scss`](./base/index.scss). `base/index.scss` is pulled in by the global stylesheet entry [`index.scss`](./index.scss), which apps include in their `angular.json`:
+
+```jsonc
+// angular.json > projects > your-app > architect > build > options > styles
+"styles": [
+  "./node_modules/@ndwnu/design-system/styles/index.scss"
+]
+```
+
+Component-scoped SCSS files only `@use 'base/typography'` (mixins and classes). They never pull in `_fonts.scss`, which keeps `@font-face` declarations out of every component bundle and prevents ng-packagr from inlining megabytes of font CSS per component.
+
+## Subset selection
+
+Each Fontsource package exposes several CSS entrypoints with different axis combinations. We pick the smallest subset that covers actual usage:
+
+| Family                   | Entrypoint used                | Axes           | Notes                                                                                 |
+| ------------------------ | ------------------------------ | -------------- | ------------------------------------------------------------------------------------- |
+| DM Sans                  | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the Google URL the project used previously (`opsz 9..40`, `wght 400..650`).   |
+| Nunito Sans              | `opsz.css` + `opsz-italic.css` | `opsz`, `wght` | Matches the previous Google URL (`opsz 6..12`, `wght 400..650`).                      |
+| Material Symbols Rounded | `fill.css`                     | `wght`, `FILL` | We only toggle `FILL` (see below). Choosing `fill.css` over `full.css` saves ~3.7 MB. |
+
+The icon component sets `font-variation-settings: 'FILL' 1;` in [`icon.component.scss`](../lib/components/icon/icon.component.scss) to switch between outlined and filled icons. We do not vary the `opsz` or `GRAD` axes for icons, so `fill.css` (≈1.4 MB) is sufficient. If a future feature needs those axes, switch the import to `full.css` (≈5.1 MB) — the tradeoff is bundle size.
+
+## Material Symbols Rounded class
+
+Google's hosted CSS provides a `.material-symbols-rounded` class that pairs the font-family with `font-feature-settings: 'liga'` (so glyph name → ligature → icon works). Fontsource does not, so [`_fonts.scss`](./base/_fonts.scss) defines the equivalent rule locally. The `<ndw-icon>` component applies this class via its host binding.

package/styles/base/_fonts.scss

@@ -0,0 +1,13 @@
+@import '@fontsource-variable/dm-sans/opsz.css';
+@import '@fontsource-variable/dm-sans/opsz-italic.css';
+@import '@fontsource-variable/nunito-sans/opsz.css';
+@import '@fontsource-variable/nunito-sans/opsz-italic.css';
+@import '@fontsource-variable/material-symbols-rounded/fill.css';
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded Variable', sans-serif;
+  font-feature-settings: 'liga';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+}

package/styles/base/_typography.scss

@@ -1,9 +1,3 @@
-@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,FILL@20..48,400,0..1\
-&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650\
-&display=block');
-
 /* Mixins */
 @mixin ndw-heading-xl {
   font-family: var(--ndw-font-family-heading);

package/styles/base/_variables.scss

@@ -51,8 +51,8 @@
 
   /* Typography */
   // Font Family
-  --ndw-font-family-body: 'Nunito Sans', sans-serif;
-  --ndw-font-family-heading: 'DM Sans', sans-serif;
+  --ndw-font-family-body: 'Nunito Sans Variable', sans-serif;
+  --ndw-font-family-heading: 'DM Sans Variable', sans-serif;
 
   // Font Size
   --ndw-base-font-size: 16px;

package/styles/base/index.scss

@@ -1,4 +1,5 @@
 @forward 'colors';
+@forward 'fonts';
 @forward 'material';
 @forward 'typography';
 @forward 'variables';

package/styles/components/_input.scss

@@ -71,14 +71,29 @@
     background-color: var(--ndw-color-grey-100);
     border-color: var(--ndw-color-grey-300);
     color: var(--ndw-color-grey-500);
-    pointer-events: none;
+    cursor: default;
+
+    &:hover,
+    &:has([ndwInput]:hover) {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:has([ndwInput]:active),
+    &:has([ndwInput]:focus),
+    &:has([ndwInput]:focus-visible) {
+      border-color: var(--ndw-color-grey-300);
+      box-shadow: none;
+      outline-color: transparent;
+    }
 
     [ndwInput] {
       background-color: var(--ndw-color-grey-100);
+      user-select: text;
     }
 
     ndw-icon {
       color: var(--ndw-color-grey-500);
+      pointer-events: none;
     }
   }
 }

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

@@ -990,6 +990,7 @@ declare class LanguageSwitcherComponent {
 
 interface SubMenuItem {
     label: string;
+    icon?: string;
     active?: boolean;
     callback?: () => void;
     notifications?: number;
@@ -997,7 +998,6 @@ interface SubMenuItem {
     queryParams?: Params;
 }
 interface MenuItem extends SubMenuItem {
-    icon: string;
     children?: SubMenuItem[];
 }
 type Theme = 'ndw' | 'nwb';
@@ -1051,16 +1051,16 @@ 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">;
+    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 active: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
-    protected readonly buttonIcon: _angular_core.Signal<string>;
+    protected readonly buttonIcon: _angular_core.Signal<string | undefined>;
     protected readonly svgIcon: _angular_core.Signal<string | undefined>;
     protected readonly iconLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapButtonComponent, "ndw-map-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapButtonComponent, "ndw-map-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 declare const fontMapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out", "mail"];
@@ -1075,6 +1075,7 @@ interface MapDisplayOption {
     name: string;
     active?: boolean;
     imageLink?: string;
+    icon?: string;
     description?: string;
     [key: string]: unknown;
 }
@@ -1587,12 +1588,17 @@ declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     private readonly ariaDescriber;
     text: _angular_core.InputSignal<string>;
     private overlayRef;
+    private tooltipRef;
+    private isMouseOverTooltip;
     ngOnInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
     protected show(): void;
+    protected hideFromTrigger(): void;
     protected hide(): void;
     protected hideOnEscape(): void;
+    private readonly onTooltipMouseEnter;
+    private readonly onTooltipMouseLeave;
     private updateAriaDescription;
     private getFlexibleConnectedPositionStrategy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;