@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-sidebar.mjs

@@ -0,0 +1,1784 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, afterNextRender, booleanAttribute, computed, effect, inject, input, isDevMode, output, signal, untracked, viewChild } from "@angular/core";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import { RaqmSheetComponent, RaqmSheetContentDirective, RaqmSheetDescriptionDirective, RaqmSheetTitleDirective } from "@raqm/ui/sheet";
+import { RaqmButton } from "@raqm/ui/button";
+import { RAQM_DIALOG, RAQM_DIALOG_POLICY } from "@raqm/ui/dialog";
+import * as i1 from "@raqm/ui/input";
+import { RaqmInput } from "@raqm/ui/input";
+import { RaqmSkeleton } from "@raqm/ui/skeleton";
+import * as i2 from "@raqm/ui/tooltip";
+import { RaqmTooltip, RaqmTooltipComponent } from "@raqm/ui/tooltip";
+const RAQM_SIDEBAR = new InjectionToken("RaqmSidebar");
+function useSidebar() {
+	return inject(RAQM_SIDEBAR);
+}
+var RaqmSidebarMobileComponent = class RaqmSidebarMobileComponent extends RaqmSheetComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMobileComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMobileComponent,
+		isStandalone: true,
+		selector: "raqm-sidebar-mobile",
+		providers: [{
+			provide: RAQM_DIALOG,
+			useExisting: RaqmSidebarMobileComponent
+		}, {
+			provide: RAQM_DIALOG_POLICY,
+			useFactory: () => ({
+				role: "dialog",
+				contentClass: "raqm-sheet-content",
+				touchOpening: signal(false),
+				dismissOnBackdrop: true,
+				side: signal("left"),
+				paneClass: "raqm-sheet-overlay-pane",
+				backdropClass: "raqm-sheet-overlay-backdrop",
+				exitAnimationMs: 200,
+				allowWithoutTrigger: true
+			})
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-sheet-content{position:absolute;display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);padding:0;border:0 solid var(--raqm-border);border-radius:0;max-inline-size:none;max-block-size:100%;background-clip:padding-box;box-shadow:var(--raqm-shadow-lg);pointer-events:auto;--raqm-sheet-enter-x: 0px;--raqm-sheet-enter-y: 0px}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=right]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=left]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-inline:0;inline-size:100%;block-size:auto}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--entering{animation:raqm-sheet-in var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--closing{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y));transition:opacity var(--raqm-duration-slow) var(--raqm-ease-in-out),transform var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@media(min-width:40rem){.raqm-sheet-content[data-raqm-side=right],.raqm-sheet-content[data-raqm-side=left]{max-inline-size:calc(var(--raqm-spacing) * 96)}}@keyframes raqm-sheet-in{0%{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-sheet-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-sheet-content{border-color:CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: RaqmButton,
+			selector: "button[raqm-button], a[raqm-button]",
+			inputs: [
+				"raqm-button",
+				"extra-small",
+				"small",
+				"large",
+				"icon",
+				"icon-extra-small",
+				"icon-small",
+				"icon-large",
+				"disabled",
+				"tabindex"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMobileComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-sidebar-mobile",
+			imports: [NgTemplateOutlet, RaqmButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: RAQM_DIALOG,
+				useExisting: RaqmSidebarMobileComponent
+			}, {
+				provide: RAQM_DIALOG_POLICY,
+				useFactory: () => ({
+					role: "dialog",
+					contentClass: "raqm-sheet-content",
+					touchOpening: signal(false),
+					dismissOnBackdrop: true,
+					side: signal("left"),
+					paneClass: "raqm-sheet-overlay-pane",
+					backdropClass: "raqm-sheet-overlay-backdrop",
+					exitAnimationMs: 200,
+					allowWithoutTrigger: true
+				})
+			}],
+			template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-sheet-content{position:absolute;display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 4);padding:0;border:0 solid var(--raqm-border);border-radius:0;max-inline-size:none;max-block-size:100%;background-clip:padding-box;box-shadow:var(--raqm-shadow-lg);pointer-events:auto;--raqm-sheet-enter-x: 0px;--raqm-sheet-enter-y: 0px}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=right]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[dir=rtl][data-raqm-side=left]{--raqm-sheet-enter-x: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top],.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-inline:0;inline-size:100%;block-size:auto}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * -10)}.raqm-dialog-content.raqm-sheet-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;--raqm-sheet-enter-y: calc(var(--raqm-spacing) * 10)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--entering{animation:raqm-sheet-in var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content.raqm-dialog-content--closing{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y));transition:opacity var(--raqm-duration-slow) var(--raqm-ease-in-out),transform var(--raqm-duration-slow) var(--raqm-ease-in-out)}.raqm-dialog-content.raqm-sheet-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@media(min-width:40rem){.raqm-sheet-content[data-raqm-side=right],.raqm-sheet-content[data-raqm-side=left]{max-inline-size:calc(var(--raqm-spacing) * 96)}}@keyframes raqm-sheet-in{0%{opacity:0;transform:translate(var(--raqm-sheet-enter-x),var(--raqm-sheet-enter-y))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-sheet-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-sheet-content{border-color:CanvasText}}\n"]
+		}]
+	}]
+});
+var RaqmSidebarComponent = class RaqmSidebarComponent {
+	context = useSidebar();
+	side = input("left", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	variant = input("sidebar", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	collapsible = input("offcanvas", ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
+	dir = input(void 0, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	description = input(void 0, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (isDevMode() && this.context.mobile() && this.collapsible() !== "none" && !this.label()) console.error("[raqm-sidebar] The mobile sheet has no accessible name. Provide `label`.");
+		});
+	}
+	onMobileKeydown(event) {
+		if (!event.defaultPrevented && !event.repeat && event.key.toLowerCase() === "b" && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.context.toggleSidebar();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarComponent,
+		isStandalone: true,
+		selector: "raqm-sidebar",
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-raqm-slot": "sidebar" },
+			properties: {
+				"attr.data-raqm-state": "context.state()",
+				"attr.data-raqm-collapsible": "context.mobile() || context.open() ? \"\" : collapsible()",
+				"attr.data-raqm-variant": "variant()",
+				"attr.data-raqm-side": "side()",
+				"attr.data-raqm-mobile": "context.mobile() && collapsible() !== \"none\" ? \"true\" : null",
+				"attr.data-raqm-static": "collapsible() === \"none\" ? \"true\" : null"
+			},
+			classAttribute: "raqm-sidebar"
+		},
+		ngImport: i0,
+		template: "<ng-template #body><ng-content /></ng-template>\r\n@if (context.mobile() && collapsible() !== 'none') {\r\n  <raqm-sidebar-mobile\r\n    [open]=\"context.openMobile()\"\r\n    (openChange)=\"context.setOpenMobile($event)\"\r\n    [dir]=\"dir()\"\r\n    [label]=\"label()\"\r\n    panelClass=\"raqm-sidebar-mobile-pane\"\r\n    [side]=\"side()\"\r\n    [showCloseButton]=\"false\"\r\n  >\r\n    <ng-template raqm-sheet-content>\r\n      <div\r\n        class=\"raqm-sidebar-mobile-body\"\r\n        data-raqm-slot=\"sidebar\"\r\n        data-raqm-mobile=\"true\"\r\n        [attr.dir]=\"dir()\"\r\n        (keydown)=\"onMobileKeydown($event)\"\r\n      >\r\n        @if (label() || description()) {\r\n          <div class=\"raqm-sidebar-sr-only\">\r\n            @if (label()) {\r\n              <h2 raqm-sheet-title>{{ label() }}</h2>\r\n            }\r\n            @if (description()) {\r\n              <p raqm-sheet-description>{{ description() }}</p>\r\n            }\r\n          </div>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"body\" />\r\n      </div>\r\n    </ng-template>\r\n  </raqm-sidebar-mobile>\r\n} @else {\r\n  <div class=\"raqm-sidebar-gap\" data-raqm-slot=\"sidebar-gap\"></div>\r\n  <div\r\n    class=\"raqm-sidebar-container\"\r\n    data-raqm-slot=\"sidebar-container\"\r\n    [attr.data-raqm-side]=\"side()\"\r\n    [attr.dir]=\"dir()\"\r\n  >\r\n    <div\r\n      class=\"raqm-sidebar-inner\"\r\n      data-raqm-slot=\"sidebar-inner\"\r\n      [attr.inert]=\"!context.open() && collapsible() === 'offcanvas' ? '' : null\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"body\" />\r\n    </div>\r\n    <ng-content select=\"[raqm-sidebar-rail]\" />\r\n  </div>\r\n}\r\n",
+		styles: [""],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: RaqmSidebarMobileComponent,
+				selector: "raqm-sidebar-mobile"
+			},
+			{
+				kind: "directive",
+				type: RaqmSheetContentDirective,
+				selector: "ng-template[raqm-sheet-content]",
+				exportAs: ["raqmSheetContent"]
+			},
+			{
+				kind: "directive",
+				type: RaqmSheetTitleDirective,
+				selector: "[raqm-sheet-title]"
+			},
+			{
+				kind: "directive",
+				type: RaqmSheetDescriptionDirective,
+				selector: "[raqm-sheet-description]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				NgTemplateOutlet,
+				RaqmSidebarMobileComponent,
+				RaqmSheetContentDirective,
+				RaqmSheetTitleDirective,
+				RaqmSheetDescriptionDirective
+			],
+			selector: "raqm-sidebar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-sidebar",
+				"data-raqm-slot": "sidebar",
+				"[attr.data-raqm-state]": "context.state()",
+				"[attr.data-raqm-collapsible]": "context.mobile() || context.open() ? \"\" : collapsible()",
+				"[attr.data-raqm-variant]": "variant()",
+				"[attr.data-raqm-side]": "side()",
+				"[attr.data-raqm-mobile]": "context.mobile() && collapsible() !== \"none\" ? \"true\" : null",
+				"[attr.data-raqm-static]": "collapsible() === \"none\" ? \"true\" : null"
+			},
+			template: "<ng-template #body><ng-content /></ng-template>\r\n@if (context.mobile() && collapsible() !== 'none') {\r\n  <raqm-sidebar-mobile\r\n    [open]=\"context.openMobile()\"\r\n    (openChange)=\"context.setOpenMobile($event)\"\r\n    [dir]=\"dir()\"\r\n    [label]=\"label()\"\r\n    panelClass=\"raqm-sidebar-mobile-pane\"\r\n    [side]=\"side()\"\r\n    [showCloseButton]=\"false\"\r\n  >\r\n    <ng-template raqm-sheet-content>\r\n      <div\r\n        class=\"raqm-sidebar-mobile-body\"\r\n        data-raqm-slot=\"sidebar\"\r\n        data-raqm-mobile=\"true\"\r\n        [attr.dir]=\"dir()\"\r\n        (keydown)=\"onMobileKeydown($event)\"\r\n      >\r\n        @if (label() || description()) {\r\n          <div class=\"raqm-sidebar-sr-only\">\r\n            @if (label()) {\r\n              <h2 raqm-sheet-title>{{ label() }}</h2>\r\n            }\r\n            @if (description()) {\r\n              <p raqm-sheet-description>{{ description() }}</p>\r\n            }\r\n          </div>\r\n        }\r\n        <ng-container [ngTemplateOutlet]=\"body\" />\r\n      </div>\r\n    </ng-template>\r\n  </raqm-sidebar-mobile>\r\n} @else {\r\n  <div class=\"raqm-sidebar-gap\" data-raqm-slot=\"sidebar-gap\"></div>\r\n  <div\r\n    class=\"raqm-sidebar-container\"\r\n    data-raqm-slot=\"sidebar-container\"\r\n    [attr.data-raqm-side]=\"side()\"\r\n    [attr.dir]=\"dir()\"\r\n  >\r\n    <div\r\n      class=\"raqm-sidebar-inner\"\r\n      data-raqm-slot=\"sidebar-inner\"\r\n      [attr.inert]=\"!context.open() && collapsible() === 'offcanvas' ? '' : null\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"body\" />\r\n    </div>\r\n    <ng-content select=\"[raqm-sidebar-rail]\" />\r\n  </div>\r\n}\r\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmSidebarHeaderDirective = class RaqmSidebarHeaderDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarHeaderDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-header]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-header",
+				"data-raqm-sidebar": "header"
+			},
+			classAttribute: "raqm-sidebar-header"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-header]",
+			host: {
+				class: "raqm-sidebar-header",
+				"data-raqm-slot": "sidebar-header",
+				"data-raqm-sidebar": "header"
+			}
+		}]
+	}]
+});
+var RaqmSidebarFooterDirective = class RaqmSidebarFooterDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarFooterDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-footer]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-footer",
+				"data-raqm-sidebar": "footer"
+			},
+			classAttribute: "raqm-sidebar-footer"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-footer]",
+			host: {
+				class: "raqm-sidebar-footer",
+				"data-raqm-slot": "sidebar-footer",
+				"data-raqm-sidebar": "footer"
+			}
+		}]
+	}]
+});
+var RaqmSidebarContentDirective = class RaqmSidebarContentDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarContentDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-content]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-content",
+				"data-raqm-sidebar": "content"
+			},
+			classAttribute: "raqm-sidebar-content"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-content]",
+			host: {
+				class: "raqm-sidebar-content",
+				"data-raqm-slot": "sidebar-content",
+				"data-raqm-sidebar": "content"
+			}
+		}]
+	}]
+});
+var RaqmSidebarGroupDirective = class RaqmSidebarGroupDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarGroupDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-group]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-group",
+				"data-raqm-sidebar": "group"
+			},
+			classAttribute: "raqm-sidebar-group"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-group]",
+			host: {
+				class: "raqm-sidebar-group",
+				"data-raqm-slot": "sidebar-group",
+				"data-raqm-sidebar": "group"
+			}
+		}]
+	}]
+});
+var RaqmSidebarGroupLabelDirective = class RaqmSidebarGroupLabelDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarGroupLabelDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarGroupLabelDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-group-label]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-group-label",
+				"data-raqm-sidebar": "group-label"
+			},
+			classAttribute: "raqm-sidebar-group-label"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarGroupLabelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-group-label]",
+			host: {
+				class: "raqm-sidebar-group-label",
+				"data-raqm-slot": "sidebar-group-label",
+				"data-raqm-sidebar": "group-label"
+			}
+		}]
+	}]
+});
+var RaqmSidebarGroupContentDirective = class RaqmSidebarGroupContentDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarGroupContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarGroupContentDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-group-content]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-group-content",
+				"data-raqm-sidebar": "group-content"
+			},
+			classAttribute: "raqm-sidebar-group-content"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarGroupContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-group-content]",
+			host: {
+				class: "raqm-sidebar-group-content",
+				"data-raqm-slot": "sidebar-group-content",
+				"data-raqm-sidebar": "group-content"
+			}
+		}]
+	}]
+});
+var RaqmSidebarGroupActionDirective = class RaqmSidebarGroupActionDirective {
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarGroupActionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarGroupActionDirective,
+		isStandalone: true,
+		selector: "button[raqm-sidebar-group-action]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-group-action",
+				"data-raqm-sidebar": "group-action"
+			},
+			classAttribute: "raqm-sidebar-group-action"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarGroupActionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-sidebar-group-action]",
+			host: {
+				class: "raqm-sidebar-group-action",
+				"data-raqm-slot": "sidebar-group-action",
+				"data-raqm-sidebar": "group-action"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmSidebarMenuDirective = class RaqmSidebarMenuDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuDirective,
+		isStandalone: true,
+		selector: "ul[raqm-sidebar-menu]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu",
+				"data-raqm-sidebar": "menu"
+			},
+			classAttribute: "raqm-sidebar-menu"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ul[raqm-sidebar-menu]",
+			host: {
+				class: "raqm-sidebar-menu",
+				"data-raqm-slot": "sidebar-menu",
+				"data-raqm-sidebar": "menu"
+			}
+		}]
+	}]
+});
+var RaqmSidebarMenuItemDirective = class RaqmSidebarMenuItemDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuItemDirective,
+		isStandalone: true,
+		selector: "li[raqm-sidebar-menu-item]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-item",
+				"data-raqm-sidebar": "menu-item"
+			},
+			classAttribute: "raqm-sidebar-menu-item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "li[raqm-sidebar-menu-item]",
+			host: {
+				class: "raqm-sidebar-menu-item",
+				"data-raqm-slot": "sidebar-menu-item",
+				"data-raqm-sidebar": "menu-item"
+			}
+		}]
+	}]
+});
+var RaqmSidebarMenuSubDirective = class RaqmSidebarMenuSubDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuSubDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuSubDirective,
+		isStandalone: true,
+		selector: "ul[raqm-sidebar-menu-sub]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-sub",
+				"data-raqm-sidebar": "menu-sub"
+			},
+			classAttribute: "raqm-sidebar-menu-sub"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuSubDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ul[raqm-sidebar-menu-sub]",
+			host: {
+				class: "raqm-sidebar-menu-sub",
+				"data-raqm-slot": "sidebar-menu-sub",
+				"data-raqm-sidebar": "menu-sub"
+			}
+		}]
+	}]
+});
+var RaqmSidebarMenuSubItemDirective = class RaqmSidebarMenuSubItemDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuSubItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuSubItemDirective,
+		isStandalone: true,
+		selector: "li[raqm-sidebar-menu-sub-item]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-sub-item",
+				"data-raqm-sidebar": "menu-sub-item"
+			},
+			classAttribute: "raqm-sidebar-menu-sub-item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuSubItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "li[raqm-sidebar-menu-sub-item]",
+			host: {
+				class: "raqm-sidebar-menu-sub-item",
+				"data-raqm-slot": "sidebar-menu-sub-item",
+				"data-raqm-sidebar": "menu-sub-item"
+			}
+		}]
+	}]
+});
+var RaqmSidebarMenuBadgeDirective = class RaqmSidebarMenuBadgeDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuBadgeDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuBadgeDirective,
+		isStandalone: true,
+		selector: "[raqm-sidebar-menu-badge]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-badge",
+				"data-raqm-sidebar": "menu-badge"
+			},
+			classAttribute: "raqm-sidebar-menu-badge"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuBadgeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-sidebar-menu-badge]",
+			host: {
+				class: "raqm-sidebar-menu-badge",
+				"data-raqm-slot": "sidebar-menu-badge",
+				"data-raqm-sidebar": "menu-badge"
+			}
+		}]
+	}]
+});
+var RaqmSidebarInsetDirective = class RaqmSidebarInsetDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarInsetDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarInsetDirective,
+		isStandalone: true,
+		selector: "main[raqm-sidebar-inset]",
+		host: {
+			attributes: { "data-raqm-slot": "sidebar-inset" },
+			classAttribute: "raqm-sidebar-inset"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarInsetDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "main[raqm-sidebar-inset]",
+			host: {
+				class: "raqm-sidebar-inset",
+				"data-raqm-slot": "sidebar-inset"
+			}
+		}]
+	}]
+});
+var RaqmSidebarInputDirective = class RaqmSidebarInputDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarInputDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarInputDirective,
+		isStandalone: true,
+		selector: "input[raqm-sidebar-input]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-input",
+				"data-raqm-sidebar": "input"
+			},
+			classAttribute: "raqm-sidebar-input"
+		},
+		hostDirectives: [{ directive: i1.RaqmInput }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarInputDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[raqm-sidebar-input]",
+			hostDirectives: [RaqmInput],
+			host: {
+				class: "raqm-sidebar-input",
+				"data-raqm-slot": "sidebar-input",
+				"data-raqm-sidebar": "input"
+			}
+		}]
+	}]
+});
+var RaqmSidebarSeparatorDirective = class RaqmSidebarSeparatorDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarSeparatorDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarSeparatorDirective,
+		isStandalone: true,
+		selector: "raqm-separator[raqm-sidebar-separator]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-separator",
+				"data-raqm-sidebar": "separator"
+			},
+			classAttribute: "raqm-sidebar-separator"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarSeparatorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "raqm-separator[raqm-sidebar-separator]",
+			host: {
+				class: "raqm-sidebar-separator",
+				"data-raqm-slot": "sidebar-separator",
+				"data-raqm-sidebar": "separator"
+			}
+		}]
+	}]
+});
+var RaqmSidebarMenuActionDirective = class RaqmSidebarMenuActionDirective {
+	showOnHover = input(false, {
+		...ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuActionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuActionDirective,
+		isStandalone: true,
+		selector: "button[raqm-sidebar-menu-action]",
+		inputs: { showOnHover: {
+			classPropertyName: "showOnHover",
+			publicName: "showOnHover",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-action",
+				"data-raqm-sidebar": "menu-action"
+			},
+			properties: { "attr.data-raqm-show-on-hover": "showOnHover() ? \"true\" : null" },
+			classAttribute: "raqm-sidebar-menu-action"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuActionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-sidebar-menu-action]",
+			host: {
+				class: "raqm-sidebar-menu-action",
+				"data-raqm-slot": "sidebar-menu-action",
+				"data-raqm-sidebar": "menu-action",
+				"[attr.data-raqm-show-on-hover]": "showOnHover() ? \"true\" : null"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { showOnHover: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "showOnHover",
+			required: false
+		}]
+	}] }
+});
+var RaqmSidebarMenuButtonComponent = class RaqmSidebarMenuButtonComponent {
+	appearance = input("", {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "raqm-sidebar-menu-button"
+	});
+	small = input(false, {
+		...ngDevMode ? { debugName: "small" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	large = input(false, {
+		...ngDevMode ? { debugName: "large" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	activeVariant = computed(() => this.appearance() || "default", ...ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []);
+	activeSize = computed(() => {
+		if (this.small() && this.large()) throw new Error("RaqmSidebarMenuButton: use only one size attribute per button.");
+		return this.small() ? "sm" : this.large() ? "lg" : null;
+	}, ...ngDevMode ? [{ debugName: "activeSize" }] : /* istanbul ignore next */ []);
+	tooltip = input(void 0, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	context = useSidebar();
+	host = inject(ElementRef).nativeElement;
+	tip = viewChild(RaqmTooltipComponent, ...ngDevMode ? [{ debugName: "tip" }] : /* istanbul ignore next */ []);
+	tooltipText = computed(() => {
+		const tip = this.tooltip();
+		return typeof tip === "string" ? tip : tip?.text ?? "";
+	}, ...ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []);
+	tooltipSide = computed(() => {
+		const tip = this.tooltip();
+		return typeof tip === "object" ? tip.side ?? "right" : "right";
+	}, ...ngDevMode ? [{ debugName: "tooltipSide" }] : /* istanbul ignore next */ []);
+	tooltipAlign = computed(() => {
+		const tip = this.tooltip();
+		return typeof tip === "object" ? tip.align ?? "center" : "center";
+	}, ...ngDevMode ? [{ debugName: "tooltipAlign" }] : /* istanbul ignore next */ []);
+	tooltipOffset = computed(() => {
+		const tip = this.tooltip();
+		return typeof tip === "object" ? tip.sideOffset ?? 4 : 4;
+	}, ...ngDevMode ? [{ debugName: "tooltipOffset" }] : /* istanbul ignore next */ []);
+	showTooltip = computed(() => {
+		const tip = this.tooltip();
+		return !!this.tooltipText() && this.context.state() === "collapsed" && !this.context.mobile() && !(typeof tip === "object" && tip.hidden);
+	}, ...ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []);
+	ref = {
+		element: this.host,
+		get disabled() {
+			return this.element.disabled || this.element.getAttribute("aria-disabled") === "true";
+		}
+	};
+	constructor() {
+		if (this.host.tagName === "BUTTON" && !this.host.hasAttribute("type")) this.host.setAttribute("type", "button");
+		effect((onCleanup) => {
+			const tip = this.tip();
+			untracked(() => tip?.registerTrigger(this.ref));
+			onCleanup(() => untracked(() => tip?.unregisterTrigger(this.ref)));
+		});
+		effect((onCleanup) => {
+			const tip = this.tip();
+			const id = tip?.open() ? tip.tooltipId() : null;
+			if (!id) return;
+			const tokens = new Set((this.host.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+			tokens.add(id);
+			this.host.setAttribute("aria-describedby", [...tokens].join(" "));
+			onCleanup(() => {
+				const remaining = (this.host.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((token) => token && token !== id);
+				if (remaining.length) this.host.setAttribute("aria-describedby", remaining.join(" "));
+				else this.host.removeAttribute("aria-describedby");
+			});
+		});
+	}
+	pointer(event, entering) {
+		if (event.pointerType !== "mouse") return;
+		if (entering) this.tip()?.requestOpen(this.ref, "mouse");
+		else this.tip()?.requestClose(this.ref, "mouse");
+	}
+	focus(entering) {
+		if (entering) this.tip()?.requestOpen(this.ref, "focus");
+		else this.tip()?.requestClose(this.ref, "focus");
+	}
+	dismiss() {
+		this.tip()?.requestClose(this.ref, "press");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuButtonComponent,
+		isStandalone: true,
+		selector: "button[raqm-sidebar-menu-button], a[raqm-sidebar-menu-button]",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "raqm-sidebar-menu-button",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			small: {
+				classPropertyName: "small",
+				publicName: "small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			large: {
+				classPropertyName: "large",
+				publicName: "large",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-button",
+				"data-raqm-sidebar": "menu-button"
+			},
+			listeners: {
+				"pointerenter": "pointer($event, true)",
+				"pointerleave": "pointer($event, false)",
+				"focus": "focus(true)",
+				"blur": "focus(false)",
+				"pointerdown": "dismiss()",
+				"click": "dismiss()",
+				"keydown.escape": "dismiss()"
+			},
+			properties: {
+				"attr.data-raqm-size": "activeSize()",
+				"attr.data-raqm-variant": "activeVariant()",
+				"attr.data-raqm-active": "active() ? \"true\" : null"
+			},
+			classAttribute: "raqm-sidebar-menu-button"
+		},
+		viewQueries: [{
+			propertyName: "tip",
+			first: true,
+			predicate: RaqmTooltipComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content /><raqm-tooltip [disabled]=\"!showTooltip()\" [side]=\"tooltipSide()\" [align]=\"tooltipAlign()\" [sideOffset]=\"tooltipOffset()\"><ng-template raqm-tooltip-content>{{ tooltipText() }}</ng-template></raqm-tooltip>",
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: i2.RaqmTooltipComponent,
+			selector: "raqm-tooltip",
+			inputs: [
+				"disabled",
+				"side",
+				"align",
+				"sideOffset",
+				"alignOffset",
+				"dir"
+			],
+			exportAs: ["raqmTooltip"]
+		}, {
+			kind: "directive",
+			type: i2.RaqmTooltipContentDirective,
+			selector: "ng-template[raqm-tooltip-content]",
+			exportAs: ["raqmTooltipContent"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-sidebar-menu-button], a[raqm-sidebar-menu-button]",
+			imports: [RaqmTooltip],
+			template: "<ng-content /><raqm-tooltip [disabled]=\"!showTooltip()\" [side]=\"tooltipSide()\" [align]=\"tooltipAlign()\" [sideOffset]=\"tooltipOffset()\"><ng-template raqm-tooltip-content>{{ tooltipText() }}</ng-template></raqm-tooltip>",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-sidebar-menu-button",
+				"data-raqm-slot": "sidebar-menu-button",
+				"data-raqm-sidebar": "menu-button",
+				"[attr.data-raqm-size]": "activeSize()",
+				"[attr.data-raqm-variant]": "activeVariant()",
+				"[attr.data-raqm-active]": "active() ? \"true\" : null",
+				"(pointerenter)": "pointer($event, true)",
+				"(pointerleave)": "pointer($event, false)",
+				"(focus)": "focus(true)",
+				"(blur)": "focus(false)",
+				"(pointerdown)": "dismiss()",
+				"(click)": "dismiss()",
+				"(keydown.escape)": "dismiss()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "raqm-sidebar-menu-button",
+				required: false
+			}]
+		}],
+		small: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "small",
+				required: false
+			}]
+		}],
+		large: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "large",
+				required: false
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		tip: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => RaqmTooltipComponent), { isSignal: true }]
+		}]
+	}
+});
+var RaqmSidebarMenuSubButtonDirective = class RaqmSidebarMenuSubButtonDirective {
+	small = input(false, {
+		...ngDevMode ? { debugName: "small" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (host.tagName === "BUTTON" && !host.hasAttribute("type")) host.setAttribute("type", "button");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuSubButtonDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuSubButtonDirective,
+		isStandalone: true,
+		selector: "a[raqm-sidebar-menu-sub-button], button[raqm-sidebar-menu-sub-button]",
+		inputs: {
+			small: {
+				classPropertyName: "small",
+				publicName: "small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-sub-button",
+				"data-raqm-sidebar": "menu-sub-button"
+			},
+			properties: {
+				"attr.data-raqm-size": "small() ? \"sm\" : null",
+				"attr.data-raqm-active": "active() ? \"true\" : null"
+			},
+			classAttribute: "raqm-sidebar-menu-sub-button"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuSubButtonDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[raqm-sidebar-menu-sub-button], button[raqm-sidebar-menu-sub-button]",
+			host: {
+				class: "raqm-sidebar-menu-sub-button",
+				"data-raqm-slot": "sidebar-menu-sub-button",
+				"data-raqm-sidebar": "menu-sub-button",
+				"[attr.data-raqm-size]": "small() ? \"sm\" : null",
+				"[attr.data-raqm-active]": "active() ? \"true\" : null"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		small: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "small",
+				required: false
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmSidebarTriggerComponent = class RaqmSidebarTriggerComponent {
+	context = useSidebar();
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+		afterNextRender(() => {
+			if (isDevMode() && !host.hasAttribute("aria-label")) console.error("[raqm-sidebar] The trigger has no accessible name. Provide `aria-label`.");
+		});
+	}
+	toggle(event) {
+		if (!event.defaultPrevented) this.context.toggleSidebar();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarTriggerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarTriggerComponent,
+		isStandalone: true,
+		selector: "button[raqm-sidebar-trigger]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-trigger",
+				"data-raqm-sidebar": "trigger",
+				"data-raqm-variant": "ghost",
+				"data-raqm-size": "icon-sm"
+			},
+			listeners: { "click": "toggle($event)" },
+			classAttribute: "raqm-sidebar-trigger raqm-button"
+		},
+		ngImport: i0,
+		template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M9 3v18\"/></svg>",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarTriggerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-sidebar-trigger]",
+			template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M9 3v18\"/></svg>",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-sidebar-trigger raqm-button",
+				"data-raqm-slot": "sidebar-trigger",
+				"data-raqm-sidebar": "trigger",
+				"data-raqm-variant": "ghost",
+				"data-raqm-size": "icon-sm",
+				"(click)": "toggle($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmSidebarRailDirective = class RaqmSidebarRailDirective {
+	context = useSidebar();
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (!host.hasAttribute("type")) host.setAttribute("type", "button");
+		afterNextRender(() => {
+			if (isDevMode() && !host.hasAttribute("aria-label")) console.error("[raqm-sidebar] The rail has no accessible name. Provide `aria-label`.");
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarRailDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarRailDirective,
+		isStandalone: true,
+		selector: "button[raqm-sidebar-rail]",
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-raqm-slot": "sidebar-rail",
+				"data-raqm-sidebar": "rail"
+			},
+			listeners: { "click": "context.toggleSidebar()" },
+			classAttribute: "raqm-sidebar-rail"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarRailDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-sidebar-rail]",
+			host: {
+				class: "raqm-sidebar-rail",
+				tabindex: "-1",
+				"data-raqm-slot": "sidebar-rail",
+				"data-raqm-sidebar": "rail",
+				"(click)": "context.toggleSidebar()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmSidebarMenuSkeletonComponent = class RaqmSidebarMenuSkeletonComponent {
+	showIcon = input(false, {
+		...ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarMenuSkeletonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSidebarMenuSkeletonComponent,
+		isStandalone: true,
+		selector: "raqm-sidebar-menu-skeleton",
+		inputs: { showIcon: {
+			classPropertyName: "showIcon",
+			publicName: "showIcon",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-raqm-slot": "sidebar-menu-skeleton",
+				"data-raqm-sidebar": "menu-skeleton",
+				"aria-hidden": "true"
+			},
+			classAttribute: "raqm-sidebar-menu-skeleton"
+		},
+		ngImport: i0,
+		template: "@if (showIcon()) { <raqm-skeleton class=\"raqm-sidebar-menu-skeleton-icon\" data-raqm-sidebar=\"menu-skeleton-icon\" /> }<raqm-skeleton class=\"raqm-sidebar-menu-skeleton-text\" data-raqm-sidebar=\"menu-skeleton-text\" />",
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: RaqmSkeleton,
+			selector: "raqm-skeleton"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarMenuSkeletonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-sidebar-menu-skeleton",
+			imports: [RaqmSkeleton],
+			template: "@if (showIcon()) { <raqm-skeleton class=\"raqm-sidebar-menu-skeleton-icon\" data-raqm-sidebar=\"menu-skeleton-icon\" /> }<raqm-skeleton class=\"raqm-sidebar-menu-skeleton-text\" data-raqm-sidebar=\"menu-skeleton-text\" />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-sidebar-menu-skeleton",
+				"data-raqm-slot": "sidebar-menu-skeleton",
+				"data-raqm-sidebar": "menu-skeleton",
+				"aria-hidden": "true"
+			}
+		}]
+	}],
+	propDecorators: { showIcon: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "showIcon",
+			required: false
+		}]
+	}] }
+});
+var RaqmSidebarProviderComponent = class RaqmSidebarProviderComponent {
+	defaultOpen = input(true, {
+		...ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	openInput = input(void 0, {
+		...ngDevMode ? { debugName: "openInput" } : /* istanbul ignore next */ {},
+		alias: "open"
+	});
+	openMobileInput = input(void 0, {
+		...ngDevMode ? { debugName: "openMobileInput" } : /* istanbul ignore next */ {},
+		alias: "openMobile"
+	});
+	openChange = output();
+	openMobileChange = output();
+	desktop = signal(void 0, ...ngDevMode ? [{ debugName: "desktop" }] : /* istanbul ignore next */ []);
+	mobileOpen = signal(false, ...ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []);
+	mobileState = signal(false, ...ngDevMode ? [{ debugName: "mobileState" }] : /* istanbul ignore next */ []);
+	open = computed(() => this.openInput() ?? this.desktop() ?? this.defaultOpen(), ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	openMobile = computed(() => this.openMobileInput() ?? this.mobileOpen(), ...ngDevMode ? [{ debugName: "openMobile" }] : /* istanbul ignore next */ []);
+	mobile = this.mobileState.asReadonly();
+	state = computed(() => this.open() ? "expanded" : "collapsed", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	document = inject(DOCUMENT);
+	host = inject(ElementRef);
+	destroy = inject(DestroyRef);
+	constructor() {
+		afterNextRender(() => {
+			const media = this.document.defaultView?.matchMedia("(max-width: 767px)");
+			if (!media) return;
+			const update = () => this.mobileState.set(media.matches);
+			update();
+			media.addEventListener("change", update);
+			this.destroy.onDestroy(() => media.removeEventListener("change", update));
+		});
+	}
+	setOpen(value) {
+		const next = typeof value === "function" ? value(this.open()) : value;
+		if (this.openInput() === void 0) this.desktop.set(next);
+		this.openChange.emit(next);
+		if (this.document.defaultView) try {
+			this.document.cookie = `sidebar_state=${next}; path=/; max-age=604800; SameSite=Lax`;
+		} catch {}
+	}
+	setOpenMobile(value) {
+		const next = typeof value === "function" ? value(this.openMobile()) : value;
+		if (this.openMobileInput() === void 0) this.mobileOpen.set(next);
+		this.openMobileChange.emit(next);
+	}
+	toggleSidebar() {
+		if (this.mobile()) this.setOpenMobile((open) => !open);
+		else this.setOpen((open) => !open);
+	}
+	onKeydown(event) {
+		const target = event.target;
+		if (event.defaultPrevented || event.repeat || event.key.toLowerCase() !== "b" || !(event.metaKey || event.ctrlKey)) return;
+		if (target?.closest("raqm-sidebar-provider") !== this.host.nativeElement) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.toggleSidebar();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSidebarProviderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmSidebarProviderComponent,
+		isStandalone: true,
+		selector: "raqm-sidebar-provider",
+		inputs: {
+			defaultOpen: {
+				classPropertyName: "defaultOpen",
+				publicName: "defaultOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openInput: {
+				classPropertyName: "openInput",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openMobileInput: {
+				classPropertyName: "openMobileInput",
+				publicName: "openMobile",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			openChange: "openChange",
+			openMobileChange: "openMobileChange"
+		},
+		host: {
+			attributes: { "data-raqm-slot": "sidebar-wrapper" },
+			listeners: { "keydown": "onKeydown($event)" },
+			classAttribute: "raqm-sidebar-provider"
+		},
+		providers: [{
+			provide: RAQM_SIDEBAR,
+			useExisting: RaqmSidebarProviderComponent
+		}],
+		exportAs: ["raqmSidebarProvider"],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSidebarProviderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-sidebar-provider",
+			exportAs: "raqmSidebarProvider",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: RAQM_SIDEBAR,
+				useExisting: RaqmSidebarProviderComponent
+			}],
+			host: {
+				class: "raqm-sidebar-provider",
+				"data-raqm-slot": "sidebar-wrapper",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		defaultOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultOpen",
+				required: false
+			}]
+		}],
+		openInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		openMobileInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openMobile",
+				required: false
+			}]
+		}],
+		openChange: [{
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		openMobileChange: [{
+			type: i0.Output,
+			args: ["openMobileChange"]
+		}]
+	}
+});
+const RaqmSidebar = [
+	RaqmSidebarProviderComponent,
+	RaqmSidebarComponent,
+	RaqmSidebarTriggerComponent,
+	RaqmSidebarRailDirective,
+	RaqmSidebarInsetDirective,
+	RaqmSidebarInputDirective,
+	RaqmSidebarHeaderDirective,
+	RaqmSidebarFooterDirective,
+	RaqmSidebarSeparatorDirective,
+	RaqmSidebarContentDirective,
+	RaqmSidebarGroupDirective,
+	RaqmSidebarGroupLabelDirective,
+	RaqmSidebarGroupActionDirective,
+	RaqmSidebarGroupContentDirective,
+	RaqmSidebarMenuDirective,
+	RaqmSidebarMenuItemDirective,
+	RaqmSidebarMenuButtonComponent,
+	RaqmSidebarMenuActionDirective,
+	RaqmSidebarMenuBadgeDirective,
+	RaqmSidebarMenuSkeletonComponent,
+	RaqmSidebarMenuSubDirective,
+	RaqmSidebarMenuSubItemDirective,
+	RaqmSidebarMenuSubButtonDirective
+];
+export { RAQM_SIDEBAR, RaqmSidebar, RaqmSidebarComponent, RaqmSidebarContentDirective, RaqmSidebarFooterDirective, RaqmSidebarGroupActionDirective, RaqmSidebarGroupContentDirective, RaqmSidebarGroupDirective, RaqmSidebarGroupLabelDirective, RaqmSidebarHeaderDirective, RaqmSidebarInputDirective, RaqmSidebarInsetDirective, RaqmSidebarMenuActionDirective, RaqmSidebarMenuBadgeDirective, RaqmSidebarMenuButtonComponent, RaqmSidebarMenuDirective, RaqmSidebarMenuItemDirective, RaqmSidebarMenuSkeletonComponent, RaqmSidebarMenuSubButtonDirective, RaqmSidebarMenuSubDirective, RaqmSidebarMenuSubItemDirective, RaqmSidebarProviderComponent, RaqmSidebarRailDirective, RaqmSidebarSeparatorDirective, RaqmSidebarTriggerComponent, useSidebar };
+
+//# sourceMappingURL=raqm-ui-sidebar.mjs.map