@nldd/design-system 0.8.58 → 0.8.60

package/dist/components/actions/menu/menu.template.js

@@ -1,4 +1,5 @@
 import { html, nothing } from 'lit';
+import { sanitizeUrl } from '../../../utilities/sanitize-url.js';
 const menuRoleMap = {
     menu: 'menu',
     listbox: 'listbox',
@@ -33,7 +34,7 @@ export function menuTemplate(isEmpty, variant) {
 					@click=${this._handleBack}
 					@mouseenter=${this._handleBackMouseenter}
 				>
-					<nldd-icon-cell class="menu__back-icon"
+					<nldd-icon-cell
 						size="20"
 						icon="chevron-left"
 					></nldd-icon-cell>
@@ -73,54 +74,102 @@ export function menuItemTemplate(variant = 'menu') {
     const hasCheckState = this.type !== 'button' && variant === 'menu';
     const role = itemRoleMap[this.type][variant];
     const hasSubmenu = this._hasSubmenu;
-    return html `
-		<button class="menu__item"
-			type="button"
-			role=${role}
-			?disabled=${this.disabled}
-			aria-checked=${hasCheckState ? String(this.selected) : nothing}
-			aria-selected=${variant === 'listbox' ? String(this.selected) : nothing}
-			aria-haspopup=${hasSubmenu ? 'menu' : nothing}
-			aria-expanded=${hasSubmenu ? String(this._submenuOpen) : nothing}
-			aria-controls=${hasSubmenu && this._submenuEl?.id ? this._submenuEl.id : nothing}
-			.popoverTargetElement=${this._submenuEl}
-			@click=${this._handleClick}
-		>
-			${hasCheckState ? html `
-				<nldd-icon-cell class="menu__item-check"
-					size="24"
-					horizontal-alignment="center"
-					icon=${this.selected ? 'check-mark' : nothing}
-				></nldd-icon-cell>
-				<nldd-spacer-cell size="4"></nldd-spacer-cell>
-			` : nothing}
-			${this.icon ? html `
-				<nldd-icon-cell class="menu__item-icon"
-					size="20"
-					icon=${this.icon}
-				></nldd-icon-cell>
-				<nldd-spacer-cell size="8"></nldd-spacer-cell>
-			` : nothing}
-			<nldd-text-cell class="menu__item-text"
-				text=${this.text} query=${this.query} query-mark-mode=${this.queryMarkMode}
+    // A plain button item with an href renders as a real link. Submenu openers,
+    // checkbox/radio items, and disabled items keep the button — they need its
+    // richer behaviour (popover invoker, check state, inert disabling).
+    // Sanitize the href so a caller-supplied javascript:/data:/vbscript:/blob:
+    // URL can't become an XSS vector; a blocked URL yields '' and falls back to
+    // the button branch. Mirrors the nav-bar sheet (top-navigation-bar.ts).
+    const safeHref = sanitizeUrl(this.href) ?? '';
+    const asLink = !!safeHref && this.type === 'button' && !hasSubmenu && !this.disabled;
+    const content = html `
+		${hasCheckState ? html `
+			<nldd-icon-cell
+				size="24"
+				horizontal-alignment="center"
+				icon=${this.selected ? 'check-mark' : nothing}
+			></nldd-icon-cell>
+			<nldd-spacer-cell size="4"></nldd-spacer-cell>
+		` : nothing}
+		${this.icon ? html `
+			<nldd-icon-cell
+				size="20"
+				icon=${this.icon}
+			></nldd-icon-cell>
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+		` : nothing}
+		<nldd-text-cell
+			text=${this.text}
+			query=${this.query}
+			query-mark-mode=${this.queryMarkMode}
+		></nldd-text-cell>
+		${this.details ? html `
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+			<nldd-text-cell
+				width="fit-content"
+				horizontal-alignment="right"
+				color="secondary"
+				text=${this.details}
 			></nldd-text-cell>
-			${this.details ? html `
-				<nldd-spacer-cell size="8"></nldd-spacer-cell>
-				<nldd-text-cell class="menu__item-details"
-					width="fit-content"
-					horizontal-alignment="right"
-					color="secondary"
-					text=${this.details}
-				></nldd-text-cell>
-			` : nothing}
-			${hasSubmenu ? html `
-				<nldd-spacer-cell size="6"></nldd-spacer-cell>
-				<nldd-icon-cell class="menu__item-submenu-indicator"
-					size="20"
-					icon="chevron-right"
-				></nldd-icon-cell>
-			` : nothing}
-		</button>
+		` : nothing}
+		<!--
+			Accessibility (intentional decision): the shortcut is deliberately NOT
+			aria-hidden. It is announced as part of the item's accessible name —
+			e.g. "Ongedaan maken Ctrl Z" — so screen-reader users learn the
+			accelerator, the way native OS menus surface it. aria-keyshortcuts was
+			considered and rejected: the menu item itself does not handle the key
+			(the application's global shortcut does), so the plain announcement is
+			the deliberate choice rather than a missing aria-hidden.
+		-->
+		${(this.shortcut || this.shortcutMac || this.shortcutWindows || this.shortcutLinux) ? html `
+			<nldd-spacer-cell size="8"></nldd-spacer-cell>
+			<nldd-text-cell
+				width="fit-content"
+				size="md"
+				color="secondary"
+				horizontal-alignment="right"
+			>
+				<nldd-keyboard-shortcut
+					size="inherit"
+					variant="simple"
+					color="inherit"
+					keys=${this.shortcut || nothing}
+					mac-keys=${this.shortcutMac || nothing}
+					windows-keys=${this.shortcutWindows || nothing}
+					linux-keys=${this.shortcutLinux || nothing}
+				></nldd-keyboard-shortcut>
+			</nldd-text-cell>
+		` : nothing}
+		${hasSubmenu ? html `
+			<nldd-spacer-cell size="6"></nldd-spacer-cell>
+			<nldd-icon-cell
+				size="20"
+				icon="chevron-right"
+			></nldd-icon-cell>
+		` : nothing}
+	`;
+    return html `
+		${asLink ? html `
+			<a class="menu__item"
+				href=${safeHref}
+				role=${role}
+				aria-current=${this.selected ? 'page' : nothing}
+				@click=${this._handleClick}
+			>${content}</a>
+		` : html `
+			<button class="menu__item"
+				type="button"
+				role=${role}
+				?disabled=${this.disabled}
+				aria-checked=${hasCheckState ? String(this.selected) : nothing}
+				aria-selected=${variant === 'listbox' ? String(this.selected) : nothing}
+				aria-haspopup=${hasSubmenu ? 'menu' : nothing}
+				aria-expanded=${hasSubmenu ? String(this._submenuOpen) : nothing}
+				aria-controls=${hasSubmenu && this._submenuEl?.id ? this._submenuEl.id : nothing}
+				.popoverTargetElement=${this._submenuEl}
+				@click=${this._handleClick}
+			>${content}</button>
+		`}
 		<!--
 			Project the slotted nldd-menu (the submenu, if any) into the flat
 			tree. Without this slot, a light-DOM child nldd-menu sits outside
@@ -145,11 +194,11 @@ export function menuGroupTemplate(component) {
     // label reference still reads the hidden node's text content, which is
     // the standard pattern for this kind of labelling.
     return html `
-		<div class="menu-group__title"
+		<div class="menu__group-title"
 			id=${component._titleId}
 			aria-hidden="true"
 		>${component.text}</div>
-		<div class="menu-group__items"
+		<div class="menu__group-items"
 			role="group"
 			aria-labelledby=${component._titleId}
 		>

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

@@ -1 +1 @@
-{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../../src/components/actions/menu/menu.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../../src/components/actions/menu/menu.template.ts"],"names":[],"mappings":"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"}

package/dist/components/components.js

@@ -1,4 +1,4 @@
-import { N, a, b, c, d, e, f, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, aB, aC, aD, aE, aF, aG, aH, aI, aJ } from "./index-C2jQOZa6.js";
+import { N, a, b, c, d, e, f, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, aB, aC, aD, aE, aF, aG, aH, aI, aJ } from "./index-CtsEx0-K.js";
 export {
   N as NLDDActivityIndicator,
   a as NLDDAppView,

package/dist/components/content/byline/byline.d.ts

@@ -16,6 +16,10 @@
  * zodat ze visueel gescheiden blijven. Op een gekleurde ondergrond kan de
  * ringkleur meegegeven worden via `--context-parent-background-color`.
  *
+ * Op smalle breedtes (een sm-container, ≤ 640px) met meerdere avatars komt
+ * de avatarrij boven de namen te staan, zodat de tekst de volle breedte
+ * houdt; met één avatar blijft de byline op één regel.
+ *
  * Avatars worden geslot als `<img slot="avatars">`. Zet `alt=""` wanneer
  * de namen al in de tekst staan (decoratief); geef anders een
  * beschrijvende alt-tekst op.
@@ -35,6 +39,10 @@ export declare class NLDDByline extends LitElement {
     text: string;
     supportingText: string;
     _hasSlottedAvatars: boolean;
+    /** Number of slotted avatars. Drives the responsive layout: with two or
+     *  more avatars, a small-container byline stacks the avatars above the
+     *  names (see the `data-multiple-avatars` hook in the template/styles). */
+    _avatarCount: number;
     _hasSlottedText: boolean;
     _hasSlottedSupportingText: boolean;
     /** Tracks slot content so the text / supporting-text attribute fallbacks

package/dist/components/content/byline/byline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"byline.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,kBAAkB,UAAS;IAG3B,eAAe,UAAS;IAGxB,yBAAyB,UAAS;IAElC;;;;iFAI6E;IAC7E,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAM9B;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"byline.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,kBAAkB,UAAS;IAE3B;;+EAE2E;IAE3E,YAAY,SAAK;IAGjB,eAAe,UAAS;IAGxB,yBAAyB,UAAS;IAElC;;;;iFAI6E;IAC7E,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAS9B;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/components/content/byline/byline.js

@@ -22,6 +22,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * zodat ze visueel gescheiden blijven. Op een gekleurde ondergrond kan de
  * ringkleur meegegeven worden via `--context-parent-background-color`.
  *
+ * Op smalle breedtes (een sm-container, ≤ 640px) met meerdere avatars komt
+ * de avatarrij boven de namen te staan, zodat de tekst de volle breedte
+ * houdt; met één avatar blijft de byline op één regel.
+ *
  * Avatars worden geslot als `<img slot="avatars">`. Zet `alt=""` wanneer
  * de namen al in de tekst staan (decoratief); geef anders een
  * beschrijvende alt-tekst op.
@@ -45,6 +49,10 @@ let NLDDByline = class NLDDByline extends LitElement {
         this.text = '';
         this.supportingText = '';
         this._hasSlottedAvatars = false;
+        /** Number of slotted avatars. Drives the responsive layout: with two or
+         *  more avatars, a small-container byline stacks the avatars above the
+         *  names (see the `data-multiple-avatars` hook in the template/styles). */
+        this._avatarCount = 0;
         this._hasSlottedText = false;
         this._hasSlottedSupportingText = false;
         /** Tracks slot content so the text / supporting-text attribute fallbacks
@@ -54,13 +62,15 @@ let NLDDByline = class NLDDByline extends LitElement {
          *  also fires for the initial assignment, so the first render is covered. */
         this._onSlotChange = (e) => {
             const slot = e.target;
-            const has = slot.assignedElements().length > 0;
-            if (slot.name === 'avatars')
-                this._hasSlottedAvatars = has;
+            const count = slot.assignedElements().length;
+            if (slot.name === 'avatars') {
+                this._avatarCount = count;
+                this._hasSlottedAvatars = count > 0;
+            }
             else if (slot.name === 'text')
-                this._hasSlottedText = has;
+                this._hasSlottedText = count > 0;
             else if (slot.name === 'supporting-text')
-                this._hasSlottedSupportingText = has;
+                this._hasSlottedSupportingText = count > 0;
         };
     }
     render() {
@@ -77,6 +87,9 @@ __decorate([
 __decorate([
     state()
 ], NLDDByline.prototype, "_hasSlottedAvatars", void 0);
+__decorate([
+    state()
+], NLDDByline.prototype, "_avatarCount", void 0);
 __decorate([
     state()
 ], NLDDByline.prototype, "_hasSlottedText", void 0);

package/dist/components/content/byline/byline.js.map

@@ -1 +1 @@
-{"version":3,"file":"byline.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAAG,EAAE,CAAC;QAGV,mBAAc,GAAG,EAAE,CAAC;QAGpB,uBAAkB,GAAG,KAAK,CAAC;QAG3B,oBAAe,GAAG,KAAK,CAAC;QAGxB,8BAAyB,GAAG,KAAK,CAAC;QAElC;;;;qFAI6E;QAC7E,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;gBAAE,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC;iBACtD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;gBAAE,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;iBACrD,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB;gBAAE,IAAI,CAAC,yBAAyB,GAAG,GAAG,CAAC;QAChF,CAAC,CAAC;IAKH,CAAC;IAHS,MAAM;QACd,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;;AAhCe,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACrC;AAGpB;IADC,KAAK,EAAE;sDACmB;AAG3B;IADC,KAAK,EAAE;mDACgB;AAGxB;IADC,KAAK,EAAE;6DAC0B;AAhBtB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkCtB"}
+{"version":3,"file":"byline.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAAG,EAAE,CAAC;QAGV,mBAAc,GAAG,EAAE,CAAC;QAGpB,uBAAkB,GAAG,KAAK,CAAC;QAE3B;;mFAE2E;QAE3E,iBAAY,GAAG,CAAC,CAAC;QAGjB,oBAAe,GAAG,KAAK,CAAC;QAGxB,8BAAyB,GAAG,KAAK,CAAC;QAElC;;;;qFAI6E;QAC7E,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC;YAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,kBAAkB,GAAG,KAAK,GAAG,CAAC,CAAC;YACrC,CAAC;iBACI,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;gBAAE,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,CAAC,CAAC;iBAC3D,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB;gBAAE,IAAI,CAAC,yBAAyB,GAAG,KAAK,GAAG,CAAC,CAAC;QACtF,CAAC,CAAC;IAKH,CAAC;IAHS,MAAM;QACd,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;;AAzCe,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACrC;AAGpB;IADC,KAAK,EAAE;sDACmB;AAM3B;IADC,KAAK,EAAE;gDACS;AAGjB;IADC,KAAK,EAAE;mDACgB;AAGxB;IADC,KAAK,EAAE;6DAC0B;AAtBtB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2CtB"}

package/dist/components/content/byline/byline.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"byline.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBA0FxB,CAAC"}
+{"version":3,"file":"byline.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBAyGxB,CAAC"}

package/dist/components/content/byline/byline.styles.js

@@ -1,5 +1,7 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
 import { slottedReset, inheritedTextReset } from '../../../assets/styles/slotted-reset.js';
+const smMax = unsafeCSS(breakpoints.smMax);
 export const bylineStyles = css `
 
 
@@ -7,7 +9,7 @@ export const bylineStyles = css `
 
 	:host {
 		--_gap: var(--primitives-space-8);
-		--_avatar-overlap: var(--primitives-space-8);
+		--_avatar-overlap-size: var(--primitives-space-8);
 		--_avatar-size: var(--primitives-space-40);
 		--_avatar-border-width: var(--primitives-border-width-regular);
 		--_avatar-border-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
@@ -18,13 +20,28 @@ export const bylineStyles = css `
 		--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
 
 		${inheritedTextReset}
+		container-type: inline-size;
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Byline */
+
+	.byline {
 		display: flex;
 		align-items: center;
 		gap: var(--_gap);
 	}
 
-	:host([hidden]) {
-		display: none;
+	.byline[data-multiple-avatars] {
+		@container (max-width: ${smMax}) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
 	}
 
 
@@ -32,7 +49,7 @@ export const bylineStyles = css `
 
 	.byline__avatars {
 		display: flex;
-		padding-inline-start: var(--_avatar-overlap);
+		padding-inline-start: var(--_avatar-overlap-size);
 	}
 
 	.byline__avatars[hidden] {
@@ -42,7 +59,7 @@ export const bylineStyles = css `
 	.byline__avatars ::slotted(img) {
 		${slottedReset}
 		display: block !important;
-		margin-inline-start: calc(-1 * var(--_avatar-overlap)) !important;
+		margin-inline-start: calc(-1 * var(--_avatar-overlap-size)) !important;
 		border-radius: var(--_avatar-corner-radius) !important;
 		box-shadow: 0 0 0 var(--_avatar-border-width) var(--_avatar-border-color) !important;
 		width: var(--_avatar-size) !important;

package/dist/components/content/byline/byline.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"byline.styles.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;IAiB3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;IAuBlB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDf,CAAC"}
+{"version":3,"file":"byline.styles.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;IAiB3B,kBAAkB;;;;;;;;;;;;;;;;;;;2BAmBK,KAAK;;;;;;;;;;;;;;;;;;;IAmB5B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDf,CAAC"}

package/dist/components/content/byline/byline.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"byline.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,wCAoBnD"}
+{"version":3,"file":"byline.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,wCAwBnD"}

package/dist/components/content/byline/byline.template.js

@@ -3,20 +3,24 @@ export function bylineTemplate(component) {
     const hasText = Boolean(component.text) || component._hasSlottedText;
     const hasSupportingText = Boolean(component.supportingText) || component._hasSlottedSupportingText;
     return html `
-		<div class="byline__avatars"
-			?hidden=${!component._hasSlottedAvatars}
+		<div class="byline"
+			?data-multiple-avatars=${component._avatarCount >= 2}
 		>
-			<slot name="avatars" @slotchange=${component._onSlotChange}></slot>
-		</div>
-		<div class="byline__text-area"
-			?hidden=${!hasText && !hasSupportingText}
-		>
-			<p class="byline__text"
-				?hidden=${!hasText}
-			><slot name="text" @slotchange=${component._onSlotChange}>${component.text}</slot></p>
-			<p class="byline__supporting-text"
-				?hidden=${!hasSupportingText}
-			><slot name="supporting-text" @slotchange=${component._onSlotChange}>${component.supportingText}</slot></p>
+			<div class="byline__avatars"
+				?hidden=${!component._hasSlottedAvatars}
+			>
+				<slot name="avatars" @slotchange=${component._onSlotChange}></slot>
+			</div>
+			<div class="byline__text-area"
+				?hidden=${!hasText && !hasSupportingText}
+			>
+				<p class="byline__text"
+					?hidden=${!hasText}
+				><slot name="text" @slotchange=${component._onSlotChange}>${component.text}</slot></p>
+				<p class="byline__supporting-text"
+					?hidden=${!hasSupportingText}
+				><slot name="supporting-text" @slotchange=${component._onSlotChange}>${component.supportingText}</slot></p>
+			</div>
 		</div>
 	`;
 }

package/dist/components/content/byline/byline.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"byline.template.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,eAAe,CAAC;IACrE,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,SAAS,CAAC,yBAAyB,CAAC;IACnG,OAAO,IAAI,CAAA;;aAEC,CAAC,SAAS,CAAC,kBAAkB;;sCAEJ,SAAS,CAAC,aAAa;;;aAGhD,CAAC,OAAO,IAAI,CAAC,iBAAiB;;;cAG7B,CAAC,OAAO;oCACc,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI;;cAE/D,CAAC,iBAAiB;+CACe,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,cAAc;;EAEhG,CAAC;AACH,CAAC"}
+{"version":3,"file":"byline.template.js","sourceRoot":"","sources":["../../../../src/components/content/byline/byline.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,eAAe,CAAC;IACrE,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,SAAS,CAAC,yBAAyB,CAAC;IACnG,OAAO,IAAI,CAAA;;4BAEgB,SAAS,CAAC,YAAY,IAAI,CAAC;;;cAGzC,CAAC,SAAS,CAAC,kBAAkB;;uCAEJ,SAAS,CAAC,aAAa;;;cAGhD,CAAC,OAAO,IAAI,CAAC,iBAAiB;;;eAG7B,CAAC,OAAO;qCACc,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI;;eAE/D,CAAC,iBAAiB;gDACe,SAAS,CAAC,aAAa,IAAI,SAAS,CAAC,cAAc;;;EAGjG,CAAC;AACH,CAAC"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -20,14 +20,24 @@
  * @attr {string} mac-keys - Optionele override voor macOS (incl. iPhone/iPad/iPod).
  * @attr {string} windows-keys - Optionele override voor Windows.
  * @attr {string} linux-keys - Optionele override voor Linux/ChromeOS.
- * @attr {string} size - Grootte: 'sm' | 'md' (default: 'md')
+ * @attr {string} size - Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de
+ *   font-size over van de container; bij de box-variant schalen de keycaps dan mee in em.
+ * @attr {string} variant - 'box' (default) toont elke toets als keycap met vulling en
+ *   highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens —
+ *   lichter, voor inline gebruik zoals in een menu-item.
  * @attr {boolean} always-visible - Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn.
+ * @attr {string} color - 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit'
+ *   laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met
+ *   een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur
+ *   of een gemarkeerde rij.
  *
  * @slot - Optionele custom <kbd>-elementen. Wordt genegeerd als keys is opgegeven.
  */
 import { LitElement } from 'lit';
 import { type OS } from '../../../utilities/os.js';
-type Size = 'sm' | 'md';
+type Size = 'sm' | 'md' | 'inherit';
+type Color = 'neutral' | 'inherit';
+type Variant = 'box' | 'simple';
 export declare class NLDDKeyboardShortcut extends LitElement {
     static styles: import("lit").CSSResult;
     keys: string;
@@ -35,6 +45,19 @@ export declare class NLDDKeyboardShortcut extends LitElement {
     windowsKeys: string;
     linuxKeys: string;
     size: Size;
+    /**
+     * 'box' (default) renders each key as a keycap with a fill and highlight
+     * border. 'simple' renders the keys as plain text with separators — lighter,
+     * for inline use such as inside a menu item.
+     */
+    variant: Variant;
+    /**
+     * 'neutral' (default) uses the component's own palette. 'inherit' makes the
+     * keys and separators adopt the surrounding text color (currentColor), with a
+     * translucent contrast fill and highlight border — useful on filled panels or
+     * highlighted rows.
+     */
+    color: Color;
     alwaysVisible: boolean;
     /**
      * @internal — development only.
@@ -46,6 +69,8 @@ export declare class NLDDKeyboardShortcut extends LitElement {
      * production markup — production should rely on real OS detection.
      */
     debugOS: OS | '';
+    /** @internal Resolved OS — the debug override when set, else detection. */
+    get _resolvedOS(): OS;
     get _resolvedKeys(): string;
     get _parsedKeys(): string[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAE7D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExB,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,IAAI,SAAM;IAGV,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,SAAS,SAAM;IAGf,IAAI,EAAE,IAAI,CAAQ;IAGlB,aAAa,UAAS;IAEtB;;;;;;;;OAQG;IAEH,OAAO,EAAE,EAAE,GAAG,EAAE,CAAM;IAEtB,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,WAAW,IAAI,MAAM,EAAE,CAU1B;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD"}
+{"version":3,"file":"keyboard-shortcut.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAE7D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AACpC,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AACnC,KAAK,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhC,qBACa,oBAAqB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAA0B;IAGhD,IAAI,SAAM;IAGV,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,SAAS,SAAM;IAGf,IAAI,EAAE,IAAI,CAAQ;IAElB;;;;OAIG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;;;;OAKG;IAEH,KAAK,EAAE,KAAK,CAAa;IAGzB,aAAa,UAAS;IAEtB;;;;;;;;OAQG;IAEH,OAAO,EAAE,EAAE,GAAG,EAAE,CAAM;IAEtB,2EAA2E;IAC3E,IAAI,WAAW,IAAI,EAAE,CAEpB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,WAAW,IAAI,MAAM,EAAE,CAU1B;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js

@@ -20,8 +20,16 @@
  * @attr {string} mac-keys - Optionele override voor macOS (incl. iPhone/iPad/iPod).
  * @attr {string} windows-keys - Optionele override voor Windows.
  * @attr {string} linux-keys - Optionele override voor Linux/ChromeOS.
- * @attr {string} size - Grootte: 'sm' | 'md' (default: 'md')
+ * @attr {string} size - Grootte: 'sm' | 'md' | 'inherit' (default: 'md'). 'inherit' neemt de
+ *   font-size over van de container; bij de box-variant schalen de keycaps dan mee in em.
+ * @attr {string} variant - 'box' (default) toont elke toets als keycap met vulling en
+ *   highlight-rand; 'simple' toont de toetsen als platte tekst met scheidingstekens —
+ *   lichter, voor inline gebruik zoals in een menu-item.
  * @attr {boolean} always-visible - Toon ook op touch-only devices waar shortcuts niet aanroepbaar zijn.
+ * @attr {string} color - 'neutral' (default) gebruikt de eigen component-kleuren. 'inherit'
+ *   laat de toetsen en scheidingstekens de omringende tekstkleur (currentColor) volgen, met
+ *   een doorschijnende contrast-vulling en highlight-rand — handig op een gevulde vlakkleur
+ *   of een gemarkeerde rij.
  *
  * @slot - Optionele custom <kbd>-elementen. Wordt genegeerd als keys is opgegeven.
  */
@@ -44,6 +52,19 @@ let NLDDKeyboardShortcut = class NLDDKeyboardShortcut extends LitElement {
         this.windowsKeys = '';
         this.linuxKeys = '';
         this.size = 'md';
+        /**
+         * 'box' (default) renders each key as a keycap with a fill and highlight
+         * border. 'simple' renders the keys as plain text with separators — lighter,
+         * for inline use such as inside a menu item.
+         */
+        this.variant = 'box';
+        /**
+         * 'neutral' (default) uses the component's own palette. 'inherit' makes the
+         * keys and separators adopt the surrounding text color (currentColor), with a
+         * translucent contrast fill and highlight border — useful on filled panels or
+         * highlighted rows.
+         */
+        this.color = 'neutral';
         this.alwaysVisible = false;
         /**
          * @internal — development only.
@@ -56,8 +77,12 @@ let NLDDKeyboardShortcut = class NLDDKeyboardShortcut extends LitElement {
          */
         this.debugOS = '';
     }
+    /** @internal Resolved OS — the debug override when set, else detection. */
+    get _resolvedOS() {
+        return this.debugOS || detectOS();
+    }
     get _resolvedKeys() {
-        const os = this.debugOS || detectOS();
+        const os = this._resolvedOS;
         if (os === 'mac' && this.macKeys)
             return this.macKeys;
         if (os === 'windows' && this.windowsKeys)
@@ -98,6 +123,12 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NLDDKeyboardShortcut.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDKeyboardShortcut.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDKeyboardShortcut.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'always-visible' })
 ], NLDDKeyboardShortcut.prototype, "alwaysVisible", void 0);

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAW,MAAM,0BAA0B,CAAC;AAKtD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIN,SAAI,GAAG,EAAE,CAAC;QAGV,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,cAAS,GAAG,EAAE,CAAC;QAGf,SAAI,GAAS,IAAI,CAAC;QAGlB,kBAAa,GAAG,KAAK,CAAC;QAEtB;;;;;;;;WAQG;QAEH,YAAO,GAAY,EAAE,CAAC;IAyBvB,CAAC;IAvBA,IAAI,aAAa;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,QAAQ,EAAE,CAAC;QACtC,IAAI,EAAE,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC;QACtD,IAAI,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QAClE,IAAI,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAC5D,OAAO,IAAI,CAAC,IAAI,CAAC;IAClB,CAAC;IAED,IAAI,WAAW;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QACrB,8EAA8E;QAC9E,MAAM,MAAM,GAAG,QAAQ,CAAC;QACxB,OAAO,IAAI;aACT,OAAO,CAAC,SAAS,EAAE,IAAI,MAAM,GAAG,CAAC;aACjC,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;aACxD,MAAM,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;;AAtDe,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;qDACrC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;yDACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;uDACrC;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;2DAClD;AAYtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;qDAC5B;AA/BV,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAwDhC"}
+{"version":3,"file":"keyboard-shortcut.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAW,MAAM,0BAA0B,CAAC;AAOtD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIN,SAAI,GAAG,EAAE,CAAC;QAGV,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,cAAS,GAAG,EAAE,CAAC;QAGf,SAAI,GAAS,IAAI,CAAC;QAElB;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;;;;WAKG;QAEH,UAAK,GAAU,SAAS,CAAC;QAGzB,kBAAa,GAAG,KAAK,CAAC;QAEtB;;;;;;;;WAQG;QAEH,YAAO,GAAY,EAAE,CAAC;IA8BvB,CAAC;IA5BA,2EAA2E;IAC3E,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,OAAO,IAAI,QAAQ,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,aAAa;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5B,IAAI,EAAE,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC;QACtD,IAAI,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QAClE,IAAI,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAC5D,OAAO,IAAI,CAAC,IAAI,CAAC;IAClB,CAAC;IAED,IAAI,WAAW;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QACrB,8EAA8E;QAC9E,MAAM,MAAM,GAAG,QAAQ,CAAC;QACxB,OAAO,IAAI;aACT,OAAO,CAAC,SAAS,EAAE,IAAI,MAAM,GAAG,CAAC;aACjC,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;aACxD,MAAM,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;;AA5Ee,2BAAM,GAAG,sBAAsB,AAAzB,CAA0B;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;qDACrC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;yDACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;uDACrC;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACxB;AAQlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACjB;AASzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACjB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;2DAClD;AAYtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;qDAC5B;AAhDV,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CA8EhC"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,yBAuElC,CAAC"}
+{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,yBAkIlC,CAAC"}