@nldd/design-system 0.8.37

package/dist/components/layout/sheet/sheet.js

@@ -0,0 +1,166 @@
+/**
+ * Nederlandse Digitale Dienst Sheet Component (Lit + TypeScript)
+ *
+ * An overlay component that slides in from the side or bottom of the screen.
+ * Based on the native <dialog> element for built-in accessibility,
+ * focus management, and Escape key support.
+ *
+ * On small (sm) viewports the sheet always renders as a bottom sheet,
+ * regardless of the configured placement.
+ *
+ * @element nldd-sheet
+ *
+ * @attr {string}  placement        - Sheet position: 'left' | 'right' | 'bottom' (default: 'right')
+ * @attr {boolean} modeless         - Non-modal (no backdrop or focus lock); the sheet is modal by default
+ * @attr {string}  accessible-label - Accessible name for the dialog, forwarded as aria-label (default: 'Dialoogvenster')
+ * @attr {string}  width            - Custom width for side sheets (left/right) as a CSS length
+ *                                    (e.g. '480px', '32rem'). Applied from the md breakpoint up;
+ *                                    ignored on sm (bottom sheet) and for `placement="bottom"`.
+ *                                    Clamped to `100vw - 2 * inset` so the sheet always fits.
+ *
+ * @slot - Sheet content
+ *
+ * @fires open  - Fired when the sheet is opened
+ * @fires close - Fired when the sheet is fully closed
+ *
+ * @method show() - Opens the sheet
+ * @method hide() - Closes the sheet with a closing animation
+ */
+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;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { sheetStyles } from './sheet.styles.js';
+import { sheetTemplate } from './sheet.template.js';
+import { isPointerMode } from '../../../utilities/input-modality.js';
+let NLDDSheet = class NLDDSheet extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'right';
+        this.modeless = false;
+        /** Accessible name for the dialog — forwarded as aria-label to the dialog element. */
+        this.accessibleLabel = 'Venster';
+        /**
+         * Custom width for side sheets (left/right) from the md breakpoint up.
+         * CSS length (e.g. '480px', '32rem'). Ignored on sm viewports (bottom-sheet
+         * fallback) and for `placement="bottom"`. Clamped to `100vw - 2 * inset`.
+         */
+        this.width = '';
+        this._hasWarnedLabel = false;
+        this._closing = false;
+        this._handleDismiss = () => {
+            this.hide();
+        };
+    }
+    updated(changed) {
+        if (changed.has('width')) {
+            if (this.width) {
+                this.style.setProperty('--_custom-width', this.width);
+            }
+            else {
+                this.style.removeProperty('--_custom-width');
+            }
+        }
+    }
+    get _dialog() {
+        return this.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for dismiss events bubbling up from nldd-top-title-bar
+        this.addEventListener('dismiss', this._handleDismiss);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('dismiss', this._handleDismiss);
+    }
+    show() {
+        const dialog = this._dialog;
+        if (!dialog)
+            return;
+        // Warn once per instance when the consumer has not provided a meaningful accessible label
+        if (import.meta.env?.DEV && this.accessibleLabel === 'Dialoogvenster' && !this._hasWarnedLabel) {
+            this._hasWarnedLabel = true;
+            console.warn('<nldd-sheet>: No accessible-label provided. Screen readers will announce this dialog as "Dialoogvenster". Set accessible-label to a descriptive name matching the dialog title.');
+        }
+        if (this.modeless) {
+            dialog.show();
+        }
+        else {
+            dialog.showModal();
+        }
+        this._manageFocus();
+        this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));
+    }
+    _manageFocus() {
+        // 1. autofocus element present — let the browser handle it natively
+        if (this.querySelector('[autofocus]'))
+            return;
+        // 2. Focus the dialog — show focus ring only when opened via keyboard
+        const dialog = this._dialog;
+        if (!dialog)
+            return;
+        dialog.classList.toggle('is-pointer-focus', isPointerMode());
+        dialog.focus();
+    }
+    hide() {
+        const dialog = this._dialog;
+        if (!dialog || !dialog.open || this._closing)
+            return;
+        this._closing = true;
+        dialog.classList.add('is-closing');
+        dialog.addEventListener('animationend', () => {
+            dialog.classList.remove('is-closing');
+            this._closing = false;
+            dialog.close();
+            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+        }, { once: true });
+        // Fallback for prefers-reduced-motion (no animation fires)
+        // Use requestAnimationFrame to let CSS skip the animation first
+        requestAnimationFrame(() => {
+            if (this._closing && getComputedStyle(dialog).animationName === 'none') {
+                dialog.classList.remove('is-closing');
+                this._closing = false;
+                dialog.close();
+                this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+            }
+        });
+    }
+    _handleDialogClick(e) {
+        if (this.modeless)
+            return;
+        if (e.target === this._dialog) {
+            this.hide();
+        }
+    }
+    _handleCancel(e) {
+        // Intercept Escape key default close — run hide animation instead
+        e.preventDefault();
+        this.hide();
+    }
+    render() {
+        return sheetTemplate(this);
+    }
+};
+NLDDSheet.styles = sheetStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSheet.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDSheet.prototype, "modeless", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDSheet.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSheet.prototype, "width", void 0);
+NLDDSheet = __decorate([
+    customElement('nldd-sheet')
+], NLDDSheet);
+export { NLDDSheet };
+//# sourceMappingURL=sheet.js.map

package/dist/components/layout/sheet/sheet.js.map

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

package/dist/components/layout/sheet/sheet.styles.d.ts

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

package/dist/components/layout/sheet/sheet.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,yBAkNvB,CAAC"}

package/dist/components/layout/sheet/sheet.styles.js

@@ -0,0 +1,217 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+export const sheetStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		--_custom-width: initial;
+	}
+
+
+	/* # Keyframes — right */
+
+	@keyframes sheet-slide-in-right {
+		from { transform: translateX(100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes sheet-slide-out-right {
+		from { transform: translateX(0); }
+		to { transform: translateX(100%); }
+	}
+
+
+	/* # Keyframes — left */
+
+	@keyframes sheet-slide-in-left {
+		from { transform: translateX(-100%); }
+		to { transform: translateX(0); }
+	}
+
+	@keyframes sheet-slide-out-left {
+		from { transform: translateX(0); }
+		to { transform: translateX(-100%); }
+	}
+
+
+	/* # Keyframes — bottom */
+
+	@keyframes sheet-slide-in-bottom {
+		from { transform: translateY(100%); }
+		to { transform: translateY(0); }
+	}
+
+	@keyframes sheet-slide-out-bottom {
+		from { transform: translateY(0); }
+		to { transform: translateY(100%); }
+	}
+
+
+	/* # Block */
+
+	.sheet {
+		display: flex;
+		flex-direction: column;
+		border: none;
+		padding: 0;
+		margin: 0;
+		background: var(--semantics-surfaces-background-color);
+		box-shadow: var(--semantics-overlays-box-shadow);
+		overflow: hidden;
+		position: fixed;
+		outline: none;
+	}
+
+	.sheet:focus-visible:not(.is-pointer-focus) {
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+	}
+
+	.sheet:not([open]) {
+		display: none;
+	}
+
+	.sheet::backdrop {
+		background: var(--semantics-overlays-backdrop-color);
+	}
+
+	:host([modeless]) .sheet::backdrop {
+		background: transparent;
+	}
+
+
+	/* # Placement: right (default) */
+
+	:host([placement='right']) .sheet,
+	:host(:not([placement])) .sheet {
+		inset: var(--semantics-overlays-inset) var(--semantics-overlays-inset) var(--semantics-overlays-inset) auto;
+		width: min(var(--_custom-width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (min-width: ${lgMin}) {
+			width: min(var(--_custom-width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		}
+
+		&[open] {
+			animation: sheet-slide-in-right var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+
+		&.is-closing {
+			animation: sheet-slide-out-right var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+	}
+
+
+	/* # Placement: left */
+
+	:host([placement='left']) .sheet {
+		inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
+		width: min(var(--_custom-width, var(--semantics-sheets-side-md-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		height: calc(100dvh - var(--semantics-overlays-inset) * 2);
+		border-radius: var(--semantics-overlays-corner-radius);
+
+		@media (min-width: ${lgMin}) {
+			width: min(var(--_custom-width, var(--semantics-sheets-side-lg-width)), calc(100vw - var(--semantics-overlays-inset) * 2));
+		}
+
+		&[open] {
+			animation: sheet-slide-in-left var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+
+		&.is-closing {
+			animation: sheet-slide-out-left var(--semantics-sheets-side-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+	}
+
+
+	/* # Placement: bottom */
+
+	:host([placement='bottom']) .sheet {
+		inset: auto 0 0 0;
+		max-width: var(--semantics-page-sections-body-max-width);
+		max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+		height: auto;
+		margin-inline: auto;
+		border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+
+		@media (max-width: ${smMax}) {
+			width: 100%;
+			max-width: 100%;
+		}
+
+		@media (min-width: ${mdMin}) {
+			width: calc(100% - var(--semantics-sheets-bottom-md-inline-inset));
+		}
+
+		@media (min-width: ${lgMin}) {
+			width: calc(100% - var(--semantics-sheets-bottom-lg-inline-inset));
+		}
+
+		&[open] {
+			animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+
+		&.is-closing {
+			animation: sheet-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+		}
+	}
+
+
+	/* # Responsive: sm viewport — all placements become bottom sheet */
+
+	@media (max-width: ${smMax}) {
+		:host([placement='right']) .sheet,
+		:host(:not([placement])) .sheet,
+		:host([placement='left']) .sheet {
+			inset: auto 0 0 0;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
+			border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
+
+			&[open] {
+				animation: sheet-slide-in-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+
+			&.is-closing {
+				animation: sheet-slide-out-bottom var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default) both;
+			}
+		}
+	}
+
+
+	/* # Reduced motion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.sheet[open],
+		.sheet.is-closing {
+			animation: none;
+		}
+	}
+
+
+	/* # Sheet body */
+
+	.sheet__body {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+		width: 100%;
+	}
+
+	::slotted(*) {
+		flex: 1;
+		min-height: 0;
+	}
+`;
+//# sourceMappingURL=sheet.styles.js.map

package/dist/components/layout/sheet/sheet.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6FP,KAAK;;;;;;;;;;;;;;;;;;;;;;uBAsBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBL,KAAK;;;;;uBAKL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;sBAgBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C1B,CAAC"}

package/dist/components/layout/sheet/sheet.template.d.ts

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

package/dist/components/layout/sheet/sheet.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCAajD"}

package/dist/components/layout/sheet/sheet.template.js

@@ -0,0 +1,17 @@
+/* eslint-disable lit-a11y/click-events-have-key-events -- native dialog handles keyboard via @cancel */
+import { html, nothing } from 'lit';
+export function sheetTemplate(component) {
+    return html `
+		<dialog class="sheet"
+			aria-label=${component.accessibleLabel}
+			aria-modal=${component.modeless ? nothing : 'true'}
+			@click=${component._handleDialogClick}
+			@cancel=${component._handleCancel}
+		>
+			<div class="sheet__body">
+				<slot></slot>
+			</div>
+		</dialog>
+	`;
+}
+//# sourceMappingURL=sheet.template.js.map

package/dist/components/layout/sheet/sheet.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.template.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.template.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,aAAa,CAAC,SAAoB;IACjD,OAAO,IAAI,CAAA;;gBAEI,SAAS,CAAC,eAAe;gBACzB,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;YACzC,SAAS,CAAC,kBAAkB;aAC3B,SAAS,CAAC,aAAa;;;;;;EAMlC,CAAC;AACH,CAAC"}

package/dist/components/layout/spacer/spacer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Nederlandse Digitale Dienst Spacer Component (Lit + TypeScript)
+ *
+ * @element nldd-spacer
+ *
+ * @attr {string} size - Spacer size: 'flexible' | 'md' | fixed values (2–96)
+ * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both'
+ */
+import { LitElement } from 'lit';
+type SpacerSize = 'flexible' | 'md' | '2' | '4' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '28' | '32' | '40' | '44' | '48' | '56' | '64' | '80' | '96';
+type Direction = 'horizontal' | 'vertical' | 'both';
+export declare class NLDDSpacer extends LitElement {
+    static styles: import("lit").CSSResult;
+    size: SpacerSize;
+    direction: Direction;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-spacer': NLDDSpacer;
+    }
+}
+export {};
+//# sourceMappingURL=spacer.d.ts.map

package/dist/components/layout/spacer/spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,UAAU,GACZ,UAAU,GACV,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AACR,KAAK,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpD,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,IAAI,EAAE,UAAU,CAAQ;IAGxB,SAAS,EAAE,SAAS,CAAU;CAC9B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/components/layout/spacer/spacer.js

@@ -0,0 +1,36 @@
+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;
+};
+/**
+ * Nederlandse Digitale Dienst Spacer Component (Lit + TypeScript)
+ *
+ * @element nldd-spacer
+ *
+ * @attr {string} size - Spacer size: 'flexible' | 'md' | fixed values (2–96)
+ * @attr {string} direction - Direction: 'horizontal' | 'vertical' | 'both'
+ */
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { spacerStyles } from './spacer.styles.js';
+let NLDDSpacer = class NLDDSpacer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = '16';
+        this.direction = 'both';
+    }
+};
+NLDDSpacer.styles = spacerStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSpacer.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDSpacer.prototype, "direction", void 0);
+NLDDSpacer = __decorate([
+    customElement('nldd-spacer')
+], NLDDSpacer);
+export { NLDDSpacer };
+//# sourceMappingURL=spacer.js.map

package/dist/components/layout/spacer/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AA0B3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAAe,IAAI,CAAC;QAGxB,cAAS,GAAc,MAAM,CAAC;IAC/B,CAAC;;AAPgB,iBAAM,GAAG,YAAY,AAAf,CAAgB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACZ;AAPlB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAQtB"}

package/dist/components/layout/spacer/spacer.styles.d.ts

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

package/dist/components/layout/spacer/spacer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAwJxB,CAAC"}

package/dist/components/layout/spacer/spacer.styles.js

@@ -0,0 +1,156 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+export const spacerStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: block;
+		flex-shrink: 0;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Flexible and responsive */
+
+	:host([size='flexible']) {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	:host([size='md']) {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+
+		@media (min-width: ${unsafeCSS(breakpoints.smMax)}) {
+			width: var(--primitives-space-24);
+			height: var(--primitives-space-24);
+		}
+	}
+
+
+	/* # Fixed sizes */
+
+	:host([size='2']) {
+		width: var(--primitives-space-2);
+		height: var(--primitives-space-2);
+	}
+
+	:host([size='4']) {
+		width: var(--primitives-space-4);
+		height: var(--primitives-space-4);
+	}
+
+	:host([size='6']) {
+		width: var(--primitives-space-6);
+		height: var(--primitives-space-6);
+	}
+
+	:host([size='16']),
+	:host(:not([size])) {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	:host([size='8']) {
+		width: var(--primitives-space-8);
+		height: var(--primitives-space-8);
+	}
+
+	:host([size='10']) {
+		width: var(--primitives-space-10);
+		height: var(--primitives-space-10);
+	}
+
+	:host([size='12']) {
+		width: var(--primitives-space-12);
+		height: var(--primitives-space-12);
+	}
+
+	:host([size='16']) {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+	}
+
+	:host([size='20']) {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+	}
+
+	:host([size='24']) {
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+	}
+
+	:host([size='28']) {
+		width: var(--primitives-space-28);
+		height: var(--primitives-space-28);
+	}
+
+	:host([size='32']) {
+		width: var(--primitives-space-32);
+		height: var(--primitives-space-32);
+	}
+
+	:host([size='40']) {
+		width: var(--primitives-space-40);
+		height: var(--primitives-space-40);
+	}
+
+	:host([size='44']) {
+		width: var(--primitives-space-44);
+		height: var(--primitives-space-44);
+	}
+
+	:host([size='48']) {
+		width: var(--primitives-space-48);
+		height: var(--primitives-space-48);
+	}
+
+	:host([size='56']) {
+		width: var(--primitives-space-56);
+		height: var(--primitives-space-56);
+	}
+
+	:host([size='64']) {
+		width: var(--primitives-space-64);
+		height: var(--primitives-space-64);
+	}
+
+	:host([size='80']) {
+		width: var(--primitives-space-80);
+		height: var(--primitives-space-80);
+	}
+
+	:host([size='96']) {
+		width: var(--primitives-space-96);
+		height: var(--primitives-space-96);
+	}
+
+
+	/* # Direction modifiers */
+
+	:host([direction='horizontal']) {
+		height: auto;
+	}
+
+	:host([direction='vertical']) {
+		width: auto;
+	}
+
+	:host([size='flexible'][direction='horizontal']) {
+		height: auto;
+		min-height: auto;
+	}
+
+	:host([size='flexible'][direction='vertical']) {
+		width: auto;
+		min-width: auto;
+	}
+`;
+//# sourceMappingURL=spacer.styles.js.map

package/dist/components/layout/spacer/spacer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BR,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HlD,CAAC"}

package/dist/components/layout/spacer/spacer.template.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=spacer.template.d.ts.map

package/dist/components/layout/spacer/spacer.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/spacer/spacer.template.ts"],"names":[],"mappings":""}