@nldd/design-system 0.8.43 → 0.8.44

package/dist/css/rich-text.css

@@ -2,34 +2,55 @@
 
 nldd-rich-text {
 	--_spacing: var(--components-rich-text-spacing-snug);
-
-	display: block;
+	--_wide-max-width: var(--components-rich-text-wide-max-width);
+	--_wide-bleed-width: calc(
+		(var(--_wide-max-width) - var(--components-rich-text-main-max-width)) / 2
+	);
+	--_main-shortfall: max(
+		0px,
+		calc(100% - var(--components-rich-text-main-max-width))
+	);
+
+	display: grid;
+	grid-template-columns:
+		[full-start]   0
+		[wide-start]   0
+		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
+		[main-end]     min(calc(var(--_wide-bleed-width) * 2), var(--_main-shortfall))
+		[wide-end]     1fr
+		[full-end];
+	row-gap: var(--_spacing);
 	color: var(--semantics-content-color);
 	font: var(--primitives-font-body-md-regular-snug);
 	-webkit-text-size-adjust: 100%;
 	text-size-adjust: 100%;
 }
 
-nldd-rich-text[spacing="flat"] {
-	--_spacing: var(--components-rich-text-spacing-flat);
-}
-
-nldd-rich-text[spacing="tight"] {
-	--_spacing: var(--components-rich-text-spacing-tight);
-}
+nldd-rich-text[centered] {
+	--_wide-max-width: var(--components-rich-text-centered-wide-max-width);
 
-nldd-rich-text[spacing="snug"] {
-	--_spacing: var(--components-rich-text-spacing-snug);
+	grid-template-columns:
+		[full-start]   1fr
+		[wide-start]   min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
+		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
+		[main-end]     min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
+		[wide-end]     1fr
+		[full-end];
 }
 
-nldd-rich-text[spacing="loose"] {
-	--_spacing: var(--components-rich-text-spacing-loose);
-}
+nldd-rich-text[spacing="flat"]  { --_spacing: var(--components-rich-text-spacing-flat); }
+nldd-rich-text[spacing="tight"] { --_spacing: var(--components-rich-text-spacing-tight); }
+nldd-rich-text[spacing="snug"]  { --_spacing: var(--components-rich-text-spacing-snug); }
+nldd-rich-text[spacing="loose"] { --_spacing: var(--components-rich-text-spacing-loose); }
 
 nldd-rich-text[hidden] {
 	display: none;
 }
 
+nldd-rich-text > * {
+	grid-column: main;
+}
+
 nldd-rich-text > :first-child {
 	margin-top: 0;
 }
@@ -49,21 +70,18 @@ nldd-rich-text *:focus:not(:focus-visible) {
 }
 
 
-/* # Paragraph */
+/* # Headings */
 
-nldd-rich-text p {
-	max-width: var(--primitives-area-720);
-	margin: var(--_spacing) 0;
+nldd-rich-text :is(h1, h2, h3, h4, h5, h6) {
+	margin-top: var(--_spacing);
+	margin-bottom: 0;
+	text-wrap: pretty;
 }
 
 
 /* # Heading 1 */
 
 nldd-rich-text h1 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-1-sm);
 	}
@@ -93,10 +111,6 @@ nldd-rich-text h1 {
 /* # Heading 2 */
 
 nldd-rich-text h2 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-2-sm);
 	}
@@ -126,10 +140,6 @@ nldd-rich-text h2 {
 /* # Heading 3 */
 
 nldd-rich-text h3 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-3-sm);
 	}
@@ -159,10 +169,6 @@ nldd-rich-text h3 {
 /* # Heading 4 */
 
 nldd-rich-text h4 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-4-sm);
 	}
@@ -192,10 +198,6 @@ nldd-rich-text h4 {
 /* # Heading 5 */
 
 nldd-rich-text h5 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-5-sm);
 	}
@@ -225,10 +227,6 @@ nldd-rich-text h5 {
 /* # Heading 6 */
 
 nldd-rich-text h6 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-6-sm);
 	}
@@ -255,6 +253,13 @@ nldd-rich-text h6 {
 }
 
 
+/* # Paragraph */
+
+nldd-rich-text p {
+	margin: 0;
+}
+
+
 /* # Lists */
 
 nldd-rich-text ul {
@@ -269,9 +274,8 @@ nldd-rich-text ol {
 	list-style-type: decimal;
 }
 
-nldd-rich-text > ul,
-nldd-rich-text > ol {
-	margin: var(--_spacing) 0;
+nldd-rich-text > :is(ul, ol) {
+	margin-block: calc(var(--_spacing) / -2);
 }
 
 nldd-rich-text ol > li > ol {
@@ -282,7 +286,6 @@ nldd-rich-text ol > li > ol {
 /* # List Item */
 
 nldd-rich-text li {
-	max-width: var(--primitives-area-720);
 	margin: calc(var(--_spacing) / 2) 0;
 	padding: 0;
 }
@@ -367,16 +370,21 @@ nldd-rich-text figcaption {
 
 /* # Blockquote */
 
+nldd-rich-text > blockquote {
+	grid-column: main-start / wide-end;
+}
+
 nldd-rich-text blockquote {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--semantics-blockquotes-md-spacing) / 2);
-	max-width: var(--semantics-blockquotes-max-width);
-	margin-block: var(--semantics-blockquotes-md-spacing);
+	margin-block: max(
+		0px,
+		calc(var(--semantics-blockquotes-md-spacing) - var(--_spacing))
+	);
 	margin-inline: 0;
+	padding-block-start: var(--semantics-blockquotes-md-spacing);
 	padding-inline: var(--semantics-blockquotes-md-spacing);
-	padding-top: var(--semantics-blockquotes-md-spacing);
-	padding-bottom: 0;
 	border-top: var(--semantics-blockquotes-border);
 	border-left: var(--semantics-blockquotes-border);
 	border-top-left-radius: var(--semantics-blockquotes-corner-radius);
@@ -384,19 +392,23 @@ nldd-rich-text blockquote {
 
 	@media (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
-		margin-block: var(--semantics-blockquotes-sm-spacing);
+		margin-block: max(
+			0px,
+			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
+		);
+		padding-block-start: var(--semantics-blockquotes-sm-spacing);
 		padding-inline: var(--semantics-blockquotes-sm-spacing);
-		padding-top: var(--semantics-blockquotes-sm-spacing);
-		padding-bottom: 0;
 		font: var(--semantics-blockquotes-sm-quote-font);
 	}
 
 	@container layout-container (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
-		margin-block: var(--semantics-blockquotes-sm-spacing);
+		margin-block: max(
+			0px,
+			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
+		);
+		padding-block-start: var(--semantics-blockquotes-sm-spacing);
 		padding-inline: var(--semantics-blockquotes-sm-spacing);
-		padding-top: var(--semantics-blockquotes-sm-spacing);
-		padding-bottom: 0;
 		font: var(--semantics-blockquotes-sm-quote-font);
 	}
 }
@@ -432,18 +444,33 @@ nldd-rich-text img {
 
 /* # Horizontal Rule */
 
+nldd-rich-text > hr {
+	grid-column: full;
+}
+
 nldd-rich-text hr {
-	margin: var(--_spacing) 0;
+	margin: 0;
 	border: none;
 	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
 }
 
 
-/* # Table */
+/* # Table
+   Spans the full container width by default so wide data tables aren't
+   cramped to the main text width. Same min-block-spacing floor as
+   blockquote so it always reads as a distinct chunk even in flat mode. */
+
+nldd-rich-text > table {
+	grid-column: main-start / full-end;
+}
 
 nldd-rich-text table {
 	display: block;
 	width: 100%;
+	margin-block: max(
+		0px,
+		calc(var(--components-rich-text-spacing-snug) - var(--_spacing))
+	);
 	border-collapse: collapse;
 	font: var(--primitives-font-body-md-regular-tight);
 	overflow-x: auto;

package/dist/css/settings.css

@@ -816,11 +816,19 @@
 	--semantics-controls-md-min-size: var(--primitives-space-44);
 	--semantics-controls-lg-min-size: var(--primitives-space-56);
 
+	--semantics-buttons-xs-icon-size: var(--primitives-space-16);
+	--semantics-buttons-sm-icon-size: var(--primitives-space-18);
+	--semantics-buttons-md-icon-size: var(--primitives-space-20);
+
+	--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
+	--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
+	--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
+
 	--semantics-controls-md-inline-padding: var(--primitives-space-12);
 	--semantics-controls-sm-inline-padding: var(--primitives-space-10);
 	--semantics-controls-xs-inline-padding: var(--primitives-space-6);
 
-	--semantics-controls-md-block-padding: var(--primitives-space-12);
+	--semantics-controls-md-block-padding: var(--primitives-space-10);
 	--semantics-controls-sm-block-padding: var(--primitives-space-6);
 	--semantics-controls-xs-block-padding: var(--primitives-space-4);
 
@@ -829,14 +837,6 @@
 	--semantics-controls-md-corner-radius: var(--primitives-corner-radius-md);
 	--semantics-controls-lg-corner-radius: var(--primitives-corner-radius-md);
 
-	--semantics-buttons-xs-icon-size: var(--primitives-space-16);
-	--semantics-buttons-sm-icon-size: var(--primitives-space-18);
-	--semantics-buttons-md-icon-size: var(--primitives-space-20);
-
-	--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
-	--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
-	--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
-
 	--semantics-controls-is-highlighted-indicator-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-controls-is-highlighted-contrast-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-0));
 	--semantics-controls-is-highlighted-is-hovered-indicator-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
@@ -858,9 +858,9 @@
 	--semantics-buttons-sm-divider-length: var(--primitives-space-20);
 	--semantics-buttons-md-divider-length: var(--primitives-space-28);
 
-	--semantics-buttons-md-gap: var(--primitives-space-6);
-	--semantics-buttons-sm-gap: var(--primitives-space-4);
-	--semantics-buttons-xs-gap: var(--primitives-space-3);
+	--semantics-buttons-md-gap: var(--primitives-space-4);
+	--semantics-buttons-sm-gap: var(--primitives-space-3);
+	--semantics-buttons-xs-gap: var(--primitives-space-2);
 
 	--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
 	--semantics-buttons-neutral-tinted-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
@@ -872,15 +872,15 @@
 	--semantics-buttons-neutral-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
 	--semantics-buttons-neutral-tinted-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
 	--semantics-buttons-neutral-tinted-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
-	--semantics-buttons-neutral-tinted-is-open-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-is-active-background-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
-	--semantics-buttons-neutral-tinted-is-open-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-900));
+	--semantics-buttons-neutral-tinted-is-expanded-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--semantics-buttons-neutral-tinted-is-expanded-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-900));
 	--semantics-buttons-neutral-tinted-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--semantics-buttons-neutral-tinted-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 	--semantics-buttons-neutral-tinted-is-selected-secondary-content-color: var(--semantics-controls-is-highlighted-contrast-color);
@@ -902,12 +902,12 @@
 	--semantics-buttons-accent-filled-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
 	--semantics-buttons-accent-filled-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--semantics-buttons-accent-filled-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
-	--semantics-buttons-accent-filled-is-open-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-is-hovered-background-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
-	--semantics-buttons-accent-filled-is-open-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-is-active-background-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
-	--semantics-buttons-accent-filled-is-open-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--semantics-buttons-accent-filled-is-expanded-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
+	--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-is-active-background-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
+	--semantics-buttons-accent-filled-is-expanded-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
 
 	--semantics-buttons-accent-transparent-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-buttons-accent-transparent-is-hovered-content-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
@@ -1020,8 +1020,8 @@
 	--components-badge-accent-content-color: var(--primitives-color-accent-0);
 	--components-badge-neutral-background-color: var(--primitives-color-neutral-800);
 	--components-badge-neutral-content-color: var(--primitives-color-neutral-0);
-	--components-badge-warning-background-color: var(--primitives-color-warning-300);
-	--components-badge-warning-content-color: var(--primitives-color-warning-1000);
+	--components-badge-warning-background-color: light-dark(var(--primitives-color-warning-300), var(--primitives-color-warning-700));
+	--components-badge-warning-content-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));
 	--components-badge-success-background-color: var(--primitives-color-success-550);
 	--components-badge-success-content-color: var(--primitives-color-success-0);
 
@@ -1147,8 +1147,8 @@
 	--components-menu-box-shadow: var(--primitives-box-shadows-level-5);
 	--components-menu-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
-	--components-menu-item-is-open-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
-	--components-menu-item-is-open-content-color: var(--primitives-color-neutral-1000);
+	--components-menu-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-menu-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
 
 	/* ## Menu bar */
 
@@ -1156,8 +1156,8 @@
 	--components-menu-bar-item-inline-padding: var(--primitives-space-8);
 	--components-menu-bar-item-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-750));
 	--components-menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
-	--components-menu-bar-item-is-open-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
-	--components-menu-bar-item-is-open-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
+	--components-menu-bar-item-is-expanded-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
+	--components-menu-bar-item-is-expanded-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
 	--components-menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
 
@@ -1186,6 +1186,9 @@
 	/* ## Rich text */
 
 	--components-rich-text-grid-size: calc(var(--primitives-font-size-100) * var(--primitives-line-height-snug));
+	--components-rich-text-main-max-width: var(--primitives-area-720);
+	--components-rich-text-wide-max-width: var(--primitives-area-800);
+	--components-rich-text-centered-wide-max-width: var(--primitives-area-960);
 	--components-rich-text-spacing-flat: var(--primitives-space-0);
 	--components-rich-text-spacing-tight: calc(var(--components-rich-text-grid-size) / 4);
 	--components-rich-text-spacing-snug: calc(var(--components-rich-text-grid-size) / 2);

package/dist/utilities/os.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Detects the user's operating system from the browser's navigator API.
+ * Used to pick OS-specific keyboard shortcut labels and similar
+ * platform-aware UI variants.
+ *
+ * ChromeOS is reported as `'linux'` (its platform string matches
+ * `cros`/`linux`). Falls back to `'other'` when the platform can't be
+ * classified (Android, unknown UA strings, non-browser environments).
+ */
+export type OS = 'mac' | 'windows' | 'linux' | 'other';
+export declare function detectOS(): OS;
+/**
+ * @internal — test/dev only.
+ *
+ * Force a specific OS for the duration of testing or Storybook stories.
+ * Pass `null` to clear the override and fall back to real detection.
+ * Mutates module-level singleton state and affects every component on
+ * the page that calls `detectOS()` — not a supported public API
+ * (hence the `_` prefix, matching `_resetOSDetectionCache`).
+ */
+export declare function _setOSOverride(os: OS | null): void;
+/** Reset the detection cache. For tests that mock `navigator` between cases. */
+export declare function _resetOSDetectionCache(): void;
+export declare function isMac(): boolean;
+export declare function isWindows(): boolean;
+export declare function isLinux(): boolean;
+//# sourceMappingURL=os.d.ts.map

package/dist/utilities/os.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"os.d.ts","sourceRoot":"","sources":["../../src/utilities/os.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,EAAE,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAqBvD,wBAAgB,QAAQ,IAAI,EAAE,CAW7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAElD;AAED,gFAAgF;AAChF,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C;AAED,wBAAgB,KAAK,IAAI,OAAO,CAAiC;AACjE,wBAAgB,SAAS,IAAI,OAAO,CAAqC;AACzE,wBAAgB,OAAO,IAAI,OAAO,CAAmC"}

package/dist/utilities/os.js

@@ -0,0 +1,60 @@
+/**
+ * Detects the user's operating system from the browser's navigator API.
+ * Used to pick OS-specific keyboard shortcut labels and similar
+ * platform-aware UI variants.
+ *
+ * ChromeOS is reported as `'linux'` (its platform string matches
+ * `cros`/`linux`). Falls back to `'other'` when the platform can't be
+ * classified (Android, unknown UA strings, non-browser environments).
+ */
+let cached = null;
+let override = null;
+function classify(platform) {
+    const p = platform.toLowerCase();
+    // UACH (navigator.userAgentData.platform) reports 'iOS'; navigator.platform
+    // reports 'iPhone'/'iPad'/'iPod'. Match both so iOS resolves to 'mac'.
+    if (/mac|iphone|ipad|ipod|ios/.test(p))
+        return 'mac';
+    if (/win/.test(p))
+        return 'windows';
+    // Android's platform string contains "Linux" — bail before the linux check.
+    if (/android/.test(p))
+        return 'other';
+    if (/linux|cros/.test(p))
+        return 'linux';
+    return 'other';
+}
+export function detectOS() {
+    if (override !== null)
+        return override;
+    if (cached !== null)
+        return cached;
+    if (typeof navigator === 'undefined') {
+        cached = 'other';
+        return cached;
+    }
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    cached = classify(platform);
+    return cached;
+}
+/**
+ * @internal — test/dev only.
+ *
+ * Force a specific OS for the duration of testing or Storybook stories.
+ * Pass `null` to clear the override and fall back to real detection.
+ * Mutates module-level singleton state and affects every component on
+ * the page that calls `detectOS()` — not a supported public API
+ * (hence the `_` prefix, matching `_resetOSDetectionCache`).
+ */
+export function _setOSOverride(os) {
+    override = os;
+}
+/** Reset the detection cache. For tests that mock `navigator` between cases. */
+export function _resetOSDetectionCache() {
+    cached = null;
+}
+export function isMac() { return detectOS() === 'mac'; }
+export function isWindows() { return detectOS() === 'windows'; }
+export function isLinux() { return detectOS() === 'linux'; }
+//# sourceMappingURL=os.js.map

package/dist/utilities/os.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"os.js","sourceRoot":"","sources":["../../src/utilities/os.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,IAAI,MAAM,GAAc,IAAI,CAAC;AAC7B,IAAI,QAAQ,GAAc,IAAI,CAAC;AAM/B,SAAS,QAAQ,CAAC,QAAgB;IACjC,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACjC,4EAA4E;IAC5E,uEAAuE;IACvE,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IACrD,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IACpC,4EAA4E;IAC5E,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC;IACtC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC;IACzC,OAAO,OAAO,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO,QAAQ,CAAC;IACvC,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IACnC,IAAI,OAAO,SAAS,KAAK,WAAW,EAAE,CAAC;QACtC,MAAM,GAAG,OAAO,CAAC;QACjB,OAAO,MAAM,CAAC;IACf,CAAC;IACD,MAAM,GAAG,GAAG,SAAgC,CAAC;IAC7C,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE,QAAQ,IAAI,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;IACnE,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,OAAO,MAAM,CAAC;AACf,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAAa;IAC3C,QAAQ,GAAG,EAAE,CAAC;AACf,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,sBAAsB;IACrC,MAAM,GAAG,IAAI,CAAC;AACf,CAAC;AAED,MAAM,UAAU,KAAK,KAAc,OAAO,QAAQ,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC;AACjE,MAAM,UAAU,SAAS,KAAc,OAAO,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC;AACzE,MAAM,UAAU,OAAO,KAAc,OAAO,QAAQ,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.43",
+  "version": "0.8.44",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -31,10 +31,6 @@
       "types": "./dist/components/actions/toolbar/toolbar.d.ts",
       "default": "./dist/components/actions/toolbar/toolbar.js"
     },
-    "./link": {
-      "types": "./dist/components/actions/link/link.d.ts",
-      "default": "./dist/components/actions/link/link.js"
-    },
     "./icon": {
       "types": "./dist/components/content/icon/icon.d.ts",
       "default": "./dist/components/content/icon/icon.js"
@@ -299,6 +295,10 @@
       "types": "./dist/components/navigation/menu-bar-item/menu-bar-item.d.ts",
       "default": "./dist/components/navigation/menu-bar-item/menu-bar-item.js"
     },
+    "./link": {
+      "types": "./dist/components/navigation/link/link.d.ts",
+      "default": "./dist/components/navigation/link/link.js"
+    },
     "./skip-link": {
       "types": "./dist/components/navigation/skip-link/skip-link.d.ts",
       "default": "./dist/components/navigation/skip-link/skip-link.js"

package/dist/components/actions/link/link.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/link/link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,IAAI,CAAC,EAAE,IAAI,CAAC;IAGZ,IAAI,SAAM;IAGV,SAAS,SAAM;IAGf,OAAO,SAAM;IAGb,eAAe,SAAM;IAGrB,QAAQ,UAAS;IAEjB,OAAO,CAAC,YAAY;IAOpB,gBAAgB;IAChB,YAAY,IAAI,MAAM;IASb,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/actions/link/link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/actions/link/link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,8BAA8B,CAAC;AAK/B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIN,SAAI,GAAuB,SAAS,CAAC;QAGrC,WAAM,GAAuB,SAAS,CAAC;QAGvC,QAAG,GAAuB,SAAS,CAAC;QAMpC,SAAI,GAAG,EAAE,CAAC;QAGV,cAAS,GAAG,EAAE,CAAC;QAGf,YAAO,GAAG,EAAE,CAAC;QAGb,oBAAe,GAAG,EAAE,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;IAwBlB,CAAC;IAtBQ,YAAY,CAAC,CAAa;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACrB,CAAC;IACF,CAAC;IAED,gBAAgB;IAChB,YAAY;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACtB,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACxB,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE;YAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;SACzC,CAAC,CAAC;IACJ,CAAC;;AAlDe,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACL;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACrC;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCACrC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACrC;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AA5BL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoDpB"}

package/dist/components/actions/link/link.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/link/link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAoJtB,CAAC"}

package/dist/components/actions/link/link.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJ5B,CAAC"}

package/dist/components/actions/link/link.template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/link/link.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,UAAU,eAAe;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,wCA0BhE"}

package/dist/components/actions/link/link.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../../src/components/actions/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOpC,MAAM,UAAU,QAAQ,CAAiB,OAAwB;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,8BAA8B;IAC9B,6DAA6D;IAC7D,qEAAqE;IACrE,uEAAuE;IACvE,OAAO,IAAI,CAAA;;UAEF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC;UAChD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;cAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;YAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;SACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC;mBACxC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACnC,IAAI,CAAC,eAAe,IAAI,OAAO;YACnC,OAAO,CAAC,WAAW;;KAE1B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;qDAC2B,IAAI,CAAC,SAAS;IAC/D,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC;+BACb,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;KACrE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;mDAC2B,IAAI,CAAC,OAAO;IAC3D,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B;;EAExC,CAAC;AACH,CAAC"}