@nldd/design-system 0.8.57 → 0.8.59

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

@@ -0,0 +1,103 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * NLDD Design System Byline Component (Lit + TypeScript)
+ *
+ * Een redactionele regel die auteurs of redacteuren toont: optionele
+ * avatar(s), een naamregel en ondersteunende tekst (bijvoorbeeld functie
+ * of datum). Alle onderdelen zijn optioneel.
+ *
+ * De naamregel en ondersteunende tekst kunnen als attribuut of als slot
+ * worden aangeleverd. Gebruik de slots voor rijkere inhoud, zoals een
+ * `<time datetime="…">` voor machine-leesbare datums of een link naar het
+ * auteursprofiel. Geslotte inhoud vervangt het bijbehorende attribuut
+ * (het attribuut is de fallback van de slot).
+ *
+ * Bij meerdere redacteuren overlappen de avatars elkaar subtiel; elke
+ * avatar krijgt een ring in de surface-kleur (zelfde mechaniek als badge)
+ * 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.
+ *
+ * @element nldd-byline
+ *
+ * @attr {string} text            - Naamregel (bijv. "Jan Jansen en Piet Pietersen"); fallback wanneer de text-slot leeg is
+ * @attr {string} supporting-text - Ondersteunende tekst onder de naamregel (bijv. rol of datum); fallback wanneer de supporting-text-slot leeg is
+ *
+ * @slot avatars         - Eén of meer img-elementen; gestyled als ronde, overlappende avatars
+ * @slot text            - Naamregel als rijke inhoud (bijv. een link naar het auteursprofiel)
+ * @slot supporting-text - Ondersteunende tekst als rijke inhoud (bijv. een time-element)
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { bylineStyles } from './byline.styles.js';
+import { bylineTemplate } from './byline.template.js';
+let NLDDByline = class NLDDByline extends LitElement {
+    constructor() {
+        super(...arguments);
+        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
+         *  only render when their slot is empty. Bound per slot in the template via
+         *  @slotchange, so Lit owns the listener lifecycle (it survives a
+         *  move-and-reinsert) — no manual connect/disconnect bookkeeping. slotchange
+         *  also fires for the initial assignment, so the first render is covered. */
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            const count = slot.assignedElements().length;
+            if (slot.name === 'avatars') {
+                this._avatarCount = count;
+                this._hasSlottedAvatars = count > 0;
+            }
+            else if (slot.name === 'text')
+                this._hasSlottedText = count > 0;
+            else if (slot.name === 'supporting-text')
+                this._hasSlottedSupportingText = count > 0;
+        };
+    }
+    render() {
+        return bylineTemplate(this);
+    }
+};
+NLDDByline.styles = bylineStyles;
+__decorate([
+    property({ type: String })
+], NLDDByline.prototype, "text", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], NLDDByline.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], NLDDByline.prototype, "_hasSlottedAvatars", void 0);
+__decorate([
+    state()
+], NLDDByline.prototype, "_avatarCount", void 0);
+__decorate([
+    state()
+], NLDDByline.prototype, "_hasSlottedText", void 0);
+__decorate([
+    state()
+], NLDDByline.prototype, "_hasSlottedSupportingText", void 0);
+NLDDByline = __decorate([
+    customElement('nldd-byline')
+], NLDDByline);
+export { NLDDByline };
+//# sourceMappingURL=byline.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+export declare const bylineStyles: import("lit").CSSResult;
+//# sourceMappingURL=byline.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,111 @@
+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 `
+
+
+	/* # Host */
+
+	:host {
+		--_gap: 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));
+		--_avatar-corner-radius: var(--primitives-corner-radius-full);
+		--_text-color: var(--semantics-content-color);
+		--_text-font: var(--primitives-font-body-md-medium-tight);
+		--_supporting-text-color: var(--semantics-content-secondary-color);
+		--_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);
+	}
+
+	.byline[data-multiple-avatars] {
+		@container (max-width: ${smMax}) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
+
+
+	/* # Avatars */
+
+	.byline__avatars {
+		display: flex;
+		padding-inline-start: var(--_avatar-overlap-size);
+	}
+
+	.byline__avatars[hidden] {
+		display: none;
+	}
+
+	.byline__avatars ::slotted(img) {
+		${slottedReset}
+		display: block !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;
+		height: var(--_avatar-size) !important;
+		object-fit: cover !important;
+	}
+
+	@media (forced-colors: active) {
+		.byline__avatars ::slotted(img) {
+			border: var(--_avatar-border-width) solid Canvas !important;
+		}
+	}
+
+
+	/* # Text area */
+
+	.byline__text-area {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+	}
+
+	.byline__text-area[hidden] {
+		display: none;
+	}
+
+	.byline__text {
+		margin: 0;
+		color: var(--_text-color);
+		font: var(--_text-font);
+		text-wrap: pretty;
+	}
+
+	.byline__text[hidden] {
+		display: none;
+	}
+
+	.byline__supporting-text {
+		margin: 0;
+		color: var(--_supporting-text-color);
+		font: var(--_supporting-text-font);
+		text-wrap: pretty;
+	}
+
+	.byline__supporting-text[hidden] {
+		display: none;
+	}
+`;
+//# sourceMappingURL=byline.styles.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+import type { NLDDByline } from './byline.js';
+export declare function bylineTemplate(component: NLDDByline): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=byline.template.d.ts.map

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

@@ -0,0 +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,wCAwBnD"}

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

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+export function bylineTemplate(component) {
+    const hasText = Boolean(component.text) || component._hasSlottedText;
+    const hasSupportingText = Boolean(component.supportingText) || component._hasSlottedSupportingText;
+    return html `
+		<div class="byline"
+			?data-multiple-avatars=${component._avatarCount >= 2}
+		>
+			<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>
+	`;
+}
+//# sourceMappingURL=byline.template.js.map

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

@@ -0,0 +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;;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/code-viewer/code-viewer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-viewer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,yBAoM5B,CAAC"}
+{"version":3,"file":"code-viewer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,yBAwM5B,CAAC"}

package/dist/components/content/code-viewer/code-viewer.styles.js

@@ -27,6 +27,10 @@ export const codeViewerStyles = css `
 		   (z-index: var(--_actions-z-index)) stays scoped to the code-viewer
 		   and can't paint over other layers on the page. */
 		isolation: isolate;
+		/* iOS Safari inflates text in wide scrollable blocks (text autosizing);
+		   lock the size so code renders at the authored font-size on mobile. */
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
 	}
 
 	:host([hidden]) {

package/dist/components/content/code-viewer/code-viewer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-viewer.styles.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoB/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC"}
+{"version":3,"file":"code-viewer.styles.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;IAoB/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC"}

package/dist/components/content/code-viewer/code-viewer.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-viewer.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CA8D5E"}
+{"version":3,"file":"code-viewer.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAiE5E"}

package/dist/components/content/code-viewer/code-viewer.template.js

@@ -58,7 +58,10 @@ export function codeViewerTemplate(component) {
 					></nldd-icon-button>
 				</nldd-tooltip>
 			</div>
-			<div class="code-viewer__live-region" role="status" aria-live="polite">${liveRegionText}</div>
+			<div class="code-viewer__live-region"
+				role="status"
+				aria-live="polite"
+			>${liveRegionText}</div>
 		</div>
 	`}`;
 }

package/dist/components/content/code-viewer/code-viewer.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-viewer.template.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,sEAAsE;IACtE,sEAAsE;IACtE,sEAAsE;IACtE,qEAAqE;IACrE,yBAAyB;IACzB,EAAE;IACF,oEAAoE;IACpE,iEAAiE;IACjE,kEAAkE;IAClE,6DAA6D;IAC7D,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC;IAC3C,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,CAAC;IACvC,MAAM,WAAW,GAAG,SAAS,KAAK,SAAS;QAC1C,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;QAC1D,CAAC,CAAC,SAAS,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;YAC1D,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC;IACvD,yEAAyE;IACzE,kEAAkE;IAClE,yEAAyE;IACzE,yEAAyE;IACzE,gEAAgE;IAChE,MAAM,WAAW,GAAG,WAAW,CAAC;IAChC,sEAAsE;IACtE,wEAAwE;IACxE,gEAAgE;IAChE,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS;QAC7C,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;QAC1D,CAAC,CAAC,SAAS,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;YAC1D,CAAC,CAAC,EAAE,CAAC;IACP,OAAO,IAAI,CAAA;;aAEC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;SAC3C,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;eACtC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,qCAAqC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;sBAChF,SAAS,CAAC,aAAa,WAC3C,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,gBAAgB;QAC/C,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS;QACvH,CAAC,CAAC,EACJ,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;YAI/B,WAAW;;aAEV,SAAS,KAAK,MAAM;6BACJ,SAAS,CAAC,cAAc;;;aAGxC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;yBACnC,WAAW;;;eAGrB,SAAS,CAAC,YAAY;;;;4EAIuC,cAAc;;EAExF,EAAE,CAAC;AACL,CAAC"}
+{"version":3,"file":"code-viewer.template.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,sEAAsE;IACtE,sEAAsE;IACtE,sEAAsE;IACtE,qEAAqE;IACrE,yBAAyB;IACzB,EAAE;IACF,oEAAoE;IACpE,iEAAiE;IACjE,kEAAkE;IAClE,6DAA6D;IAC7D,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC;IAC3C,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,CAAC;IACvC,MAAM,WAAW,GAAG,SAAS,KAAK,SAAS;QAC1C,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;QAC1D,CAAC,CAAC,SAAS,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;YAC1D,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC,CAAC;IACvD,yEAAyE;IACzE,kEAAkE;IAClE,yEAAyE;IACzE,yEAAyE;IACzE,gEAAgE;IAChE,MAAM,WAAW,GAAG,WAAW,CAAC;IAChC,sEAAsE;IACtE,wEAAwE;IACxE,gEAAgE;IAChE,MAAM,cAAc,GAAG,SAAS,KAAK,SAAS;QAC7C,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;QAC1D,CAAC,CAAC,SAAS,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,0CAA0C,CAAC;YAC1D,CAAC,CAAC,EAAE,CAAC;IACP,OAAO,IAAI,CAAA;;aAEC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;SAC3C,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;eACtC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,qCAAqC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;sBAChF,SAAS,CAAC,aAAa,WAC3C,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,gBAAgB;QAC/C,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS;QACvH,CAAC,CAAC,EACJ,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;YAI/B,WAAW;;aAEV,SAAS,KAAK,MAAM;6BACJ,SAAS,CAAC,cAAc;;;aAGxC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;yBACnC,WAAW;;;eAGrB,SAAS,CAAC,YAAY;;;;;;;MAO/B,cAAc;;EAElB,EAAE,CAAC;AACL,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCAsGjD"}
+{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCAwGjD"}

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

@@ -75,7 +75,9 @@ export function imageTemplate(component) {
     const errorStatusMessage = component._imageErrored && !component.decorative
         ? (component.alt ? `${errorBase}: ${component.alt}` : errorBase)
         : '';
-    const liveRegion = html `<span class="image__status" aria-live="polite">${errorStatusMessage}</span>`;
+    const liveRegion = html `<span class="image__status"
+		aria-live="polite"
+	>${errorStatusMessage}</span>`;
     const media = html `
 		<div class=${mediaClasses}
 			style=${styleMap(mediaStyles)}

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

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

package/dist/components/content/image/lqip-encoder-element.js

@@ -210,7 +210,7 @@ NLDDLqipEncoder.styles = css `
 
 		.encoder__error {
 			color: var(--semantics-content-color);
-			background-color: var(--components-banner-critical-background-color);
+			background-color: var(--semantics-categories-critical-tinted-background-color);
 			padding: var(--primitives-space-8) var(--primitives-space-12);
 			border-radius: var(--primitives-corner-radius-sm);
 		}

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"}