@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-utility.mjs

@@ -0,0 +1,2134 @@
+import * as i1 from "@angular/cdk/a11y";
+import { CdkTrapFocus, _IdGenerator } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, afterNextRender, booleanAttribute, computed, contentChild, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, starIsRtl } from "@star-ng/ui/core";
+import { StarSpinner } from "@star-ng/ui/spinner";
+var StarInplaceDisplay = class StarInplaceDisplay {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInplaceDisplay,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarInplaceDisplay,
+		isStandalone: true,
+		selector: "ng-template[starInplaceDisplay]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInplaceDisplay,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starInplaceDisplay]" }]
+	}]
+});
+var StarInplaceContent = class StarInplaceContent {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInplaceContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarInplaceContent,
+		isStandalone: true,
+		selector: "ng-template[starInplaceContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInplaceContent,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starInplaceContent]" }]
+	}]
+});
+var StarInplace = class StarInplace {
+	text = inject(STAR_UI_TEXT);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	active = model(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closable = input(false, {
+		...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	display = contentChild(StarInplaceDisplay, ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	content = contentChild(StarInplaceContent, ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	activate() {
+		if (this.disabled() || this.active()) return;
+		this.active.set(true);
+		this.focusAfterRender("input, select, textarea, [tabindex]:not([tabindex=\"-1\"]), button");
+	}
+	deactivate() {
+		if (!this.active()) return;
+		this.active.set(false);
+		this.focusAfterRender(".star-inplace__display");
+	}
+	onEscape(event) {
+		if (!this.active()) return;
+		event.stopPropagation();
+		this.deactivate();
+	}
+	focusAfterRender(selector) {
+		afterNextRender(() => this.host.nativeElement.querySelector(selector)?.focus(), { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInplace,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarInplace,
+		isStandalone: true,
+		selector: "star-inplace",
+		inputs: {
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closable: {
+				classPropertyName: "closable",
+				publicName: "closable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { active: "activeChange" },
+		host: {
+			listeners: { "keydown.escape": "onEscape($event)" },
+			classAttribute: "star-inplace"
+		},
+		queries: [{
+			propertyName: "display",
+			first: true,
+			predicate: StarInplaceDisplay,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "content",
+			first: true,
+			predicate: StarInplaceContent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (active()) {
+      <span class="star-inplace__content">
+        @if (content(); as edit) {
+          <ng-container *ngTemplateOutlet="edit.template" />
+        }
+        @if (closable()) {
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.close"
+            (click)="deactivate()"
+          >
+            <i class="ph-bold ph-check" aria-hidden="true"></i>
+          </button>
+        }
+      </span>
+    } @else {
+      <button
+        type="button"
+        class="star-inplace__display"
+        [disabled]="disabled()"
+        (click)="activate()"
+      >
+        <!-- The label is part of the name, so the visible value is too (WCAG 2.5.3). -->
+        @if (ariaLabel(); as label) {
+          <span class="star-sr-only">{{ label }}: </span>
+        }
+        @if (display(); as view) {
+          <ng-container *ngTemplateOutlet="view.template" />
+        }
+        <i class="ph-bold ph-pencil-simple star-inplace__icon" aria-hidden="true"></i>
+      </button>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInplace,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-inplace",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-inplace",
+				"(keydown.escape)": "onEscape($event)"
+			},
+			template: `
+    @if (active()) {
+      <span class="star-inplace__content">
+        @if (content(); as edit) {
+          <ng-container *ngTemplateOutlet="edit.template" />
+        }
+        @if (closable()) {
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.close"
+            (click)="deactivate()"
+          >
+            <i class="ph-bold ph-check" aria-hidden="true"></i>
+          </button>
+        }
+      </span>
+    } @else {
+      <button
+        type="button"
+        class="star-inplace__display"
+        [disabled]="disabled()"
+        (click)="activate()"
+      >
+        <!-- The label is part of the name, so the visible value is too (WCAG 2.5.3). -->
+        @if (ariaLabel(); as label) {
+          <span class="star-sr-only">{{ label }}: </span>
+        }
+        @if (display(); as view) {
+          <ng-container *ngTemplateOutlet="view.template" />
+        }
+        <i class="ph-bold ph-pencil-simple star-inplace__icon" aria-hidden="true"></i>
+      </button>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		closable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closable",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		display: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarInplaceDisplay), { isSignal: true }]
+		}],
+		content: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarInplaceContent), { isSignal: true }]
+		}]
+	}
+});
+var StarScrollPanel = class StarScrollPanel {
+	height = input(null, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	maxHeight = input(null, ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarScrollPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarScrollPanel,
+		isStandalone: true,
+		selector: "star-scroll-panel",
+		inputs: {
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxHeight: {
+				classPropertyName: "maxHeight",
+				publicName: "maxHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "region",
+				"tabindex": "0"
+			},
+			properties: {
+				"style.height": "height()",
+				"style.max-height": "maxHeight()",
+				"attr.aria-label": "ariaLabel()"
+			},
+			classAttribute: "star-scroll-panel"
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarScrollPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-scroll-panel",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-scroll-panel",
+				role: "region",
+				tabindex: "0",
+				"[style.height]": "height()",
+				"[style.max-height]": "maxHeight()",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var StarFocusTrap = class StarFocusTrap {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarFocusTrap,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarFocusTrap,
+		isStandalone: true,
+		selector: "[starFocusTrap]",
+		hostDirectives: [{
+			directive: i1.CdkTrapFocus,
+			inputs: [
+				"cdkTrapFocus",
+				"starFocusTrap",
+				"cdkTrapFocusAutoCapture",
+				"autoCapture"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarFocusTrap,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[starFocusTrap]",
+			hostDirectives: [{
+				directive: CdkTrapFocus,
+				inputs: ["cdkTrapFocus: starFocusTrap", "cdkTrapFocusAutoCapture: autoCapture"]
+			}]
+		}]
+	}]
+});
+var StarFloatLabel = class StarFloatLabel {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		afterNextRender(() => {
+			const control = host.querySelector("input, textarea");
+			if (control && !control.getAttribute("placeholder")) control.setAttribute("placeholder", " ");
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarFloatLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarFloatLabel,
+		isStandalone: true,
+		selector: "star-float-label",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { classAttribute: "star-float" },
+		ngImport: i0,
+		template: `
+    <!-- The control is projected into the label, so the label wraps it at run time. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label class="star-float__wrap">
+      <ng-content />
+      <span class="star-float__label">{{ label() }}</span>
+    </label>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarFloatLabel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-float-label",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-float" },
+			template: `
+    <!-- The control is projected into the label, so the label wraps it at run time. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label class="star-float__wrap">
+      <ng-content />
+      <span class="star-float__label">{{ label() }}</span>
+    </label>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+var StarRipple = class StarRipple {
+	host = inject(ElementRef).nativeElement;
+	show(event) {
+		if (this.host.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const box = this.host.getBoundingClientRect();
+		const size = Math.max(box.width, box.height) * 2;
+		const ink = this.host.ownerDocument.createElement("span");
+		ink.className = "star-ripple__ink";
+		ink.setAttribute("aria-hidden", "true");
+		ink.style.width = ink.style.height = `${size}px`;
+		ink.style.left = `${event.clientX - box.left - size / 2}px`;
+		ink.style.top = `${event.clientY - box.top - size / 2}px`;
+		ink.addEventListener("animationend", () => ink.remove());
+		this.host.append(ink);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarRipple,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarRipple,
+		isStandalone: true,
+		selector: "[starRipple]",
+		host: {
+			listeners: { "pointerdown": "show($event)" },
+			classAttribute: "star-ripple"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarRipple,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[starRipple]",
+			host: {
+				class: "star-ripple",
+				"(pointerdown)": "show($event)"
+			}
+		}]
+	}]
+});
+var StarAnimateOnScroll = class StarAnimateOnScroll {
+	threshold = input(.15, ...ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []);
+	shown = signal(false, ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		const destroy = inject(DestroyRef);
+		afterNextRender(() => {
+			if (typeof IntersectionObserver === "undefined") {
+				this.shown.set(true);
+				return;
+			}
+			const observer = new IntersectionObserver((entries) => {
+				if (entries.some((entry) => entry.isIntersecting)) {
+					this.shown.set(true);
+					observer.disconnect();
+				}
+			}, { threshold: this.threshold() });
+			observer.observe(host);
+			destroy.onDestroy(() => observer.disconnect());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAnimateOnScroll,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarAnimateOnScroll,
+		isStandalone: true,
+		selector: "[starAnimateOnScroll]",
+		inputs: { threshold: {
+			classPropertyName: "threshold",
+			publicName: "threshold",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "class.star-reveal--in": "shown()" },
+			classAttribute: "star-reveal"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarAnimateOnScroll,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[starAnimateOnScroll]",
+			host: {
+				class: "star-reveal",
+				"[class.star-reveal--in]": "shown()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { threshold: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "threshold",
+			required: false
+		}]
+	}] }
+});
+var StarImageCompare = class StarImageCompare {
+	text = inject(STAR_UI_TEXT);
+	rangeId = inject(_IdGenerator).getId("star-compare-");
+	leftSrc = input.required(...ngDevMode ? [{ debugName: "leftSrc" }] : /* istanbul ignore next */ []);
+	rightSrc = input.required(...ngDevMode ? [{ debugName: "rightSrc" }] : /* istanbul ignore next */ []);
+	leftAlt = input("", ...ngDevMode ? [{ debugName: "leftAlt" }] : /* istanbul ignore next */ []);
+	rightAlt = input("", ...ngDevMode ? [{ debugName: "rightAlt" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	value = model(50, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarImageCompare,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarImageCompare,
+		isStandalone: true,
+		selector: "star-image-compare",
+		inputs: {
+			leftSrc: {
+				classPropertyName: "leftSrc",
+				publicName: "leftSrc",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			rightSrc: {
+				classPropertyName: "rightSrc",
+				publicName: "rightSrc",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			leftAlt: {
+				classPropertyName: "leftAlt",
+				publicName: "leftAlt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rightAlt: {
+				classPropertyName: "rightAlt",
+				publicName: "rightAlt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: { "style.--star-compare.%": "value()" },
+			classAttribute: "star-compare"
+		},
+		ngImport: i0,
+		template: `
+    <img class="star-compare__image" [src]="rightSrc()" [alt]="rightAlt()" />
+    <img
+      class="star-compare__image star-compare__image--left"
+      [src]="leftSrc()"
+      [alt]="leftAlt()"
+    />
+    <span class="star-compare__divider" aria-hidden="true">
+      <i class="ph-bold ph-arrows-horizontal"></i>
+    </span>
+    <input
+      type="range"
+      class="star-compare__range"
+      min="0"
+      max="100"
+      step="1"
+      [id]="rangeId"
+      [value]="value()"
+      [attr.aria-label]="ariaLabel() ?? text.compareImages"
+      [attr.aria-valuetext]="value() + '%'"
+      (input)="value.set($any($event.target).valueAsNumber)"
+    />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarImageCompare,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-image-compare",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-compare",
+				"[style.--star-compare.%]": "value()"
+			},
+			template: `
+    <img class="star-compare__image" [src]="rightSrc()" [alt]="rightAlt()" />
+    <img
+      class="star-compare__image star-compare__image--left"
+      [src]="leftSrc()"
+      [alt]="leftAlt()"
+    />
+    <span class="star-compare__divider" aria-hidden="true">
+      <i class="ph-bold ph-arrows-horizontal"></i>
+    </span>
+    <input
+      type="range"
+      class="star-compare__range"
+      min="0"
+      max="100"
+      step="1"
+      [id]="rangeId"
+      [value]="value()"
+      [attr.aria-label]="ariaLabel() ?? text.compareImages"
+      [attr.aria-valuetext]="value() + '%'"
+      (input)="value.set($any($event.target).valueAsNumber)"
+    />
+  `
+		}]
+	}],
+	propDecorators: {
+		leftSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leftSrc",
+				required: true
+			}]
+		}],
+		rightSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightSrc",
+				required: true
+			}]
+		}],
+		leftAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leftAlt",
+				required: false
+			}]
+		}],
+		rightAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightAlt",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+var StarTerminal = class StarTerminal {
+	text = inject(STAR_UI_TEXT);
+	injector = inject(Injector);
+	inputId = inject(_IdGenerator).getId("star-terminal-");
+	prompt = input("$", ...ngDevMode ? [{ debugName: "prompt" }] : /* istanbul ignore next */ []);
+	welcome = input(null, ...ngDevMode ? [{ debugName: "welcome" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	handler = input(null, ...ngDevMode ? [{ debugName: "handler" }] : /* istanbul ignore next */ []);
+	commandRun = output();
+	entries = signal([], ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	log = viewChild.required("log", ...ngDevMode ? [{ debugName: "log" }] : /* istanbul ignore next */ []);
+	recall = -1;
+	focus() {
+		if (this.input().nativeElement.ownerDocument.getSelection()?.toString()) return;
+		this.input().nativeElement.focus();
+	}
+	clear() {
+		this.entries.set([]);
+	}
+	async run(command) {
+		const text = command.trim();
+		if (!text || this.busy()) return;
+		this.recall = -1;
+		this.commandRun.emit(text);
+		const handler = this.handler();
+		const index = this.entries().length;
+		this.entries.update((entries) => [...entries, {
+			command: text,
+			response: handler ? null : ""
+		}]);
+		if (handler) {
+			this.busy.set(true);
+			let response;
+			let error = false;
+			try {
+				response = await handler(text);
+			} catch (cause) {
+				error = true;
+				response = cause instanceof Error ? cause.message : String(cause);
+			}
+			this.entries.update((entries) => entries.map((entry, i) => i === index ? {
+				...entry,
+				response,
+				error
+			} : entry));
+			this.busy.set(false);
+		}
+		afterNextRender(() => {
+			const log = this.log().nativeElement;
+			log.scrollTop = log.scrollHeight;
+			this.input().nativeElement.focus();
+		}, { injector: this.injector });
+	}
+	onKeydown(event, input) {
+		if (event.key === "Enter") {
+			const value = input.value;
+			input.value = "";
+			this.run(value);
+			return;
+		}
+		if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+		const history = this.entries().map((entry) => entry.command);
+		if (!history.length) return;
+		event.preventDefault();
+		if (event.key === "ArrowUp") this.recall = this.recall < 0 ? history.length - 1 : Math.max(0, this.recall - 1);
+		else this.recall = this.recall < 0 || this.recall >= history.length - 1 ? -1 : this.recall + 1;
+		input.value = this.recall < 0 ? "" : history[this.recall];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTerminal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTerminal,
+		isStandalone: true,
+		selector: "star-terminal",
+		inputs: {
+			prompt: {
+				classPropertyName: "prompt",
+				publicName: "prompt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			welcome: {
+				classPropertyName: "welcome",
+				publicName: "welcome",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			handler: {
+				classPropertyName: "handler",
+				publicName: "handler",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { commandRun: "commandRun" },
+		host: {
+			listeners: { "click": "focus()" },
+			classAttribute: "star-terminal"
+		},
+		viewQueries: [{
+			propertyName: "input",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "log",
+			first: true,
+			predicate: ["log"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      #log
+      class="star-terminal__log"
+      role="log"
+      aria-live="polite"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @if (welcome()) {
+        <p class="star-terminal__welcome">{{ welcome() }}</p>
+      }
+      @for (entry of entries(); track $index) {
+        <p class="star-terminal__command">
+          <span class="star-terminal__prompt" aria-hidden="true">{{ prompt() }}</span>
+          {{ entry.command }}
+        </p>
+        @if (entry.response !== null) {
+          <pre
+            class="star-terminal__response"
+            [class.star-terminal__response--error]="entry.error"
+            >{{ entry.response }}</pre>
+        }
+      }
+    </div>
+    <div class="star-terminal__line">
+      <label class="star-terminal__prompt" [for]="inputId">{{ prompt() }}</label>
+      <input
+        #input
+        type="text"
+        class="star-terminal__input"
+        autocomplete="off"
+        autocapitalize="off"
+        spellcheck="false"
+        [id]="inputId"
+        [attr.aria-label]="text.terminalCommand"
+        [disabled]="busy()"
+        (keydown)="onKeydown($event, input)"
+      />
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTerminal,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-terminal",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-terminal",
+				"(click)": "focus()"
+			},
+			template: `
+    <div
+      #log
+      class="star-terminal__log"
+      role="log"
+      aria-live="polite"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @if (welcome()) {
+        <p class="star-terminal__welcome">{{ welcome() }}</p>
+      }
+      @for (entry of entries(); track $index) {
+        <p class="star-terminal__command">
+          <span class="star-terminal__prompt" aria-hidden="true">{{ prompt() }}</span>
+          {{ entry.command }}
+        </p>
+        @if (entry.response !== null) {
+          <pre
+            class="star-terminal__response"
+            [class.star-terminal__response--error]="entry.error"
+            >{{ entry.response }}</pre>
+        }
+      }
+    </div>
+    <div class="star-terminal__line">
+      <label class="star-terminal__prompt" [for]="inputId">{{ prompt() }}</label>
+      <input
+        #input
+        type="text"
+        class="star-terminal__input"
+        autocomplete="off"
+        autocapitalize="off"
+        spellcheck="false"
+        [id]="inputId"
+        [attr.aria-label]="text.terminalCommand"
+        [disabled]="busy()"
+        (keydown)="onKeydown($event, input)"
+      />
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		prompt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prompt",
+				required: false
+			}]
+		}],
+		welcome: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "welcome",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		handler: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "handler",
+				required: false
+			}]
+		}],
+		commandRun: [{
+			type: i0.Output,
+			args: ["commandRun"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		log: [{
+			type: i0.ViewChild,
+			args: ["log", { isSignal: true }]
+		}]
+	}
+});
+var StarSplitter = class StarSplitter {
+	text = inject(STAR_UI_TEXT);
+	host = inject(ElementRef);
+	layout = input("horizontal", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	size = model(50, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	minSize = input(15, ...ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	clamp(value) {
+		return Math.round(Math.min(100 - this.minSize(), Math.max(this.minSize(), value)) * 10) / 10;
+	}
+	startDrag(event) {
+		const gutter = event.currentTarget;
+		gutter.setPointerCapture?.(event.pointerId);
+		const box = this.host.nativeElement.getBoundingClientRect();
+		const rtl = starIsRtl(this.host.nativeElement);
+		const move = (e) => {
+			const ratio = this.layout() === "horizontal" ? (rtl ? box.right - e.clientX : e.clientX - box.left) / box.width : (e.clientY - box.top) / box.height;
+			this.size.set(this.clamp(ratio * 100));
+		};
+		const stop = () => {
+			gutter.removeEventListener("pointermove", move);
+			gutter.removeEventListener("pointerup", stop);
+		};
+		gutter.addEventListener("pointermove", move);
+		gutter.addEventListener("pointerup", stop);
+	}
+	onKeydown(event) {
+		const horizontal = this.layout() === "horizontal";
+		const flip = starIsRtl(this.host.nativeElement) ? -1 : 1;
+		const delta = {
+			ArrowLeft: horizontal ? -2 * flip : 0,
+			ArrowRight: horizontal ? 2 * flip : 0,
+			ArrowUp: horizontal ? 0 : -2,
+			ArrowDown: horizontal ? 0 : 2
+		}[event.key];
+		if (delta) {
+			event.preventDefault();
+			this.size.set(this.clamp(this.size() + delta));
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			this.size.set(event.key === "Home" ? this.minSize() : 100 - this.minSize());
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarSplitter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarSplitter,
+		isStandalone: true,
+		selector: "star-splitter",
+		inputs: {
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minSize: {
+				classPropertyName: "minSize",
+				publicName: "minSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { size: "sizeChange" },
+		host: { properties: {
+			"class": "'star-splitter star-splitter--' + layout()",
+			"style.--star-split": "size() + '%'"
+		} },
+		ngImport: i0,
+		template: `
+    <div class="star-splitter__pane"><ng-content select="[starSplitterStart]" /></div>
+    <div
+      class="star-splitter__gutter"
+      role="separator"
+      tabindex="0"
+      [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+      [attr.aria-valuenow]="size()"
+      [attr.aria-valuemin]="minSize()"
+      [attr.aria-valuemax]="100 - minSize()"
+      [attr.aria-label]="ariaLabel() ?? text.resizePanes"
+      (pointerdown)="startDrag($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span class="star-splitter__handle" aria-hidden="true"></span>
+    </div>
+    <div class="star-splitter__pane"><ng-content select="[starSplitterEnd]" /></div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarSplitter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-splitter",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "'star-splitter star-splitter--' + layout()",
+				"[style.--star-split]": "size() + '%'"
+			},
+			template: `
+    <div class="star-splitter__pane"><ng-content select="[starSplitterStart]" /></div>
+    <div
+      class="star-splitter__gutter"
+      role="separator"
+      tabindex="0"
+      [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+      [attr.aria-valuenow]="size()"
+      [attr.aria-valuemin]="minSize()"
+      [attr.aria-valuemax]="100 - minSize()"
+      [attr.aria-label]="ariaLabel() ?? text.resizePanes"
+      (pointerdown)="startDrag($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span class="star-splitter__handle" aria-hidden="true"></span>
+    </div>
+    <div class="star-splitter__pane"><ng-content select="[starSplitterEnd]" /></div>
+  `
+		}]
+	}],
+	propDecorators: {
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sizeChange"]
+		}],
+		minSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minSize",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var StarSpeedDial = class StarSpeedDial {
+	text = inject(STAR_UI_TEXT);
+	listId = inject(_IdGenerator).getId("star-speed-dial-");
+	injector = inject(Injector);
+	host = inject(ElementRef);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	direction = input("up", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	icon = input("ph-bold ph-plus", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	activeIndex = input(null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	defaultIcon = "ph-bold ph-plus";
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	toggle(list) {
+		this.open.update((open) => !open);
+		if (this.open()) afterNextRender(() => list.querySelector("button")?.focus(), { injector: this.injector });
+	}
+	close(restoreFocus = false, fab) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (restoreFocus) (fab ?? this.host.nativeElement.querySelector(".star-speed-dial__fab"))?.focus();
+	}
+	onArrow(event) {
+		if (!this.open()) return;
+		const rtl = starIsRtl(this.host.nativeElement);
+		const direction = this.direction();
+		const side = direction === "start" ? rtl ? "right" : "left" : direction === "end" ? rtl ? "left" : "right" : direction;
+		const forward = {
+			up: "ArrowUp",
+			down: "ArrowDown",
+			left: "ArrowLeft",
+			right: "ArrowRight"
+		}[side];
+		const backward = {
+			up: "ArrowDown",
+			down: "ArrowUp",
+			left: "ArrowRight",
+			right: "ArrowLeft"
+		}[side];
+		if (event.key !== forward && event.key !== backward && event.key !== "Home" && event.key !== "End") return;
+		const actions = [...this.host.nativeElement.querySelectorAll(".star-speed-dial__action:not(:disabled)")];
+		if (!actions.length) return;
+		event.preventDefault();
+		const last = actions.length - 1;
+		const current = actions.indexOf(this.host.nativeElement.ownerDocument.activeElement);
+		let next;
+		if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = last;
+		else if (event.key === forward) next = current < 0 ? 0 : Math.min(last, current + 1);
+		else next = current < 0 ? last : Math.max(0, current - 1);
+		actions[next].focus();
+	}
+	run(item) {
+		item.command?.(item);
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarSpeedDial,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarSpeedDial,
+		isStandalone: true,
+		selector: "star-speed-dial",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			direction: {
+				classPropertyName: "direction",
+				publicName: "direction",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: {
+			listeners: {
+				"keydown.escape": "close(true)",
+				"keydown": "onArrow($event)"
+			},
+			properties: {
+				"class": "'star-speed-dial star-speed-dial--' + direction()",
+				"class.star-speed-dial--open": "open()",
+				"class.star-speed-dial--sm": "size() === 'sm'",
+				"class.star-speed-dial--static": "icon() !== defaultIcon"
+			}
+		},
+		ngImport: i0,
+		template: `
+    <button
+      #fab
+      type="button"
+      class="star-speed-dial__fab"
+      aria-haspopup="true"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listId"
+      [attr.aria-label]="ariaLabel() ?? text.actions"
+      (click)="toggle(list)"
+    >
+      <i [class]="icon()" aria-hidden="true"></i>
+    </button>
+    <ul #list class="star-speed-dial__list" [id]="listId" [attr.inert]="open() ? null : ''">
+      @for (item of items(); track $index; let i = $index) {
+        <li [style.--star-i]="i">
+          <button
+            type="button"
+            class="star-speed-dial__action"
+            [class.star-speed-dial__action--active]="i === activeIndex()"
+            [attr.aria-pressed]="activeIndex() === null ? null : i === activeIndex()"
+            [attr.aria-label]="item.label"
+            [attr.title]="item.label"
+            [disabled]="item.disabled"
+            (click)="run(item); close(true, fab)"
+          >
+            <i [class]="item.icon ?? 'ph-bold ph-circle'" aria-hidden="true"></i>
+          </button>
+        </li>
+      }
+    </ul>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarSpeedDial,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-speed-dial",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "'star-speed-dial star-speed-dial--' + direction()",
+				"[class.star-speed-dial--open]": "open()",
+				"[class.star-speed-dial--sm]": "size() === 'sm'",
+				"[class.star-speed-dial--static]": "icon() !== defaultIcon",
+				"(keydown.escape)": "close(true)",
+				"(keydown)": "onArrow($event)"
+			},
+			template: `
+    <button
+      #fab
+      type="button"
+      class="star-speed-dial__fab"
+      aria-haspopup="true"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listId"
+      [attr.aria-label]="ariaLabel() ?? text.actions"
+      (click)="toggle(list)"
+    >
+      <i [class]="icon()" aria-hidden="true"></i>
+    </button>
+    <ul #list class="star-speed-dial__list" [id]="listId" [attr.inert]="open() ? null : ''">
+      @for (item of items(); track $index; let i = $index) {
+        <li [style.--star-i]="i">
+          <button
+            type="button"
+            class="star-speed-dial__action"
+            [class.star-speed-dial__action--active]="i === activeIndex()"
+            [attr.aria-pressed]="activeIndex() === null ? null : i === activeIndex()"
+            [attr.aria-label]="item.label"
+            [attr.title]="item.label"
+            [disabled]="item.disabled"
+            (click)="run(item); close(true, fab)"
+          >
+            <i [class]="item.icon ?? 'ph-bold ph-circle'" aria-hidden="true"></i>
+          </button>
+        </li>
+      }
+    </ul>
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		direction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "direction",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+var StarDock = class StarDock {
+	text = inject(STAR_UI_TEXT);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	position = input("bottom", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDock,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarDock,
+		isStandalone: true,
+		selector: "star-dock",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: { properties: { "class": "'star-dock star-dock--' + position()" } },
+		ngImport: i0,
+		template: `
+    <nav [attr.aria-label]="ariaLabel() ?? text.dock">
+      <ul class="star-dock__list">
+        @for (item of items(); track $index) {
+          <li>
+            <button
+              type="button"
+              class="star-dock__item"
+              [attr.aria-label]="item.label"
+              [attr.title]="item.label"
+              [disabled]="item.disabled"
+              (click)="item.command?.(item); itemClick.emit(item)"
+            >
+              <i [class]="item.icon ?? 'ph-bold ph-app-window'" aria-hidden="true"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDock,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-dock",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class]": "'star-dock star-dock--' + position()" },
+			template: `
+    <nav [attr.aria-label]="ariaLabel() ?? text.dock">
+      <ul class="star-dock__list">
+        @for (item of items(); track $index) {
+          <li>
+            <button
+              type="button"
+              class="star-dock__item"
+              [attr.aria-label]="item.label"
+              [attr.title]="item.label"
+              [disabled]="item.disabled"
+              (click)="item.command?.(item); itemClick.emit(item)"
+            >
+              <i [class]="item.icon ?? 'ph-bold ph-app-window'" aria-hidden="true"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+var StarScrollTop = class StarScrollTop {
+	text = inject(STAR_UI_TEXT);
+	threshold = input(400, ...ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []);
+	target = input(null, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+	visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const onScroll = (event) => {
+			const el = this.target();
+			if (el && event.target !== el) return;
+			const top = el ? el.scrollTop : document.scrollingElement?.scrollTop ?? 0;
+			this.visible.set(top > this.threshold());
+		};
+		document.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
+		inject(DestroyRef).onDestroy(() => document.removeEventListener("scroll", onScroll, { capture: true }));
+	}
+	toTop() {
+		const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		(this.target() ?? document.scrollingElement ?? document.documentElement).scrollTo?.({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarScrollTop,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarScrollTop,
+		isStandalone: true,
+		selector: "star-scroll-top",
+		inputs: {
+			threshold: {
+				classPropertyName: "threshold",
+				publicName: "threshold",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			target: {
+				classPropertyName: "target",
+				publicName: "target",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "class.star-scroll-top--visible": "visible()" },
+			classAttribute: "star-scroll-top"
+		},
+		ngImport: i0,
+		template: `
+    <button
+      type="button"
+      class="star-scroll-top__btn"
+      [attr.aria-label]="text.scrollToTop"
+      [attr.tabindex]="visible() ? 0 : -1"
+      (click)="toTop()"
+    >
+      <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+    </button>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarScrollTop,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-scroll-top",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-scroll-top",
+				"[class.star-scroll-top--visible]": "visible()"
+			},
+			template: `
+    <button
+      type="button"
+      class="star-scroll-top__btn"
+      [attr.aria-label]="text.scrollToTop"
+      [attr.tabindex]="visible() ? 0 : -1"
+      (click)="toTop()"
+    >
+      <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>
+    </button>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		threshold: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "threshold",
+				required: false
+			}]
+		}],
+		target: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "target",
+				required: false
+			}]
+		}]
+	}
+});
+var StarBlockUi = class StarBlockUi {
+	blocked = input(false, {
+		...ngDevMode ? { debugName: "blocked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarBlockUi,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarBlockUi,
+		isStandalone: true,
+		selector: "star-block-ui",
+		inputs: {
+			blocked: {
+				classPropertyName: "blocked",
+				publicName: "blocked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.aria-busy": "blocked() || null" },
+			classAttribute: "star-block-ui"
+		},
+		ngImport: i0,
+		template: `
+    <div class="star-block-ui__content" [attr.inert]="blocked() ? '' : null"><ng-content /></div>
+    @if (blocked()) {
+      <div class="star-block-ui__mask">
+        <star-spinner size="2rem" [ariaLabel]="message()" />
+        @if (message()) {
+          <span class="star-block-ui__message">{{ message() }}</span>
+        }
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: StarSpinner,
+			selector: "star-spinner",
+			inputs: [
+				"size",
+				"strokeWidth",
+				"ariaLabel"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarBlockUi,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-block-ui",
+			imports: [StarSpinner],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-block-ui",
+				"[attr.aria-busy]": "blocked() || null"
+			},
+			template: `
+    <div class="star-block-ui__content" [attr.inert]="blocked() ? '' : null"><ng-content /></div>
+    @if (blocked()) {
+      <div class="star-block-ui__mask">
+        <star-spinner size="2rem" [ariaLabel]="message()" />
+        @if (message()) {
+          <span class="star-block-ui__message">{{ message() }}</span>
+        }
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		blocked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "blocked",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}]
+	}
+});
+var StarMeterGroup = class StarMeterGroup {
+	text = inject(STAR_UI_TEXT);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	unit = input("", ...ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	total = computed(() => this.max() ?? (this.items().reduce((sum, item) => sum + item.value, 0) || 1), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	color(index) {
+		return `var(--star-chart-${index % 8 + 1})`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMeterGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMeterGroup,
+		isStandalone: true,
+		selector: "star-meter-group",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			unit: {
+				classPropertyName: "unit",
+				publicName: "unit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: { "attr.aria-label": "ariaLabel()" },
+			classAttribute: "star-meter-group"
+		},
+		ngImport: i0,
+		template: `
+    <div class="star-meter-group__bar">
+      @for (item of items(); track item.label; let i = $index) {
+        <span
+          class="star-meter-group__part"
+          role="meter"
+          [attr.aria-label]="item.label"
+          aria-valuemin="0"
+          [attr.aria-valuemax]="total()"
+          [attr.aria-valuenow]="item.value"
+          [attr.aria-valuetext]="
+            text.meterValue(item.value + (unit() ? ' ' + unit() : ''), total())
+          "
+          [style.width.%]="(item.value / total()) * 100"
+          [style.background]="color(i)"
+        ></span>
+      }
+    </div>
+    <ul class="star-meter-group__legend" aria-hidden="true">
+      @for (item of items(); track item.label; let i = $index) {
+        <li>
+          <span class="star-chart__swatch" [style.background]="color(i)"></span>
+          {{ item.label }} <strong>{{ item.value }}{{ unit() ? ' ' + unit() : '' }}</strong>
+        </li>
+      }
+    </ul>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMeterGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-meter-group",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-meter-group",
+				role: "group",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: `
+    <div class="star-meter-group__bar">
+      @for (item of items(); track item.label; let i = $index) {
+        <span
+          class="star-meter-group__part"
+          role="meter"
+          [attr.aria-label]="item.label"
+          aria-valuemin="0"
+          [attr.aria-valuemax]="total()"
+          [attr.aria-valuenow]="item.value"
+          [attr.aria-valuetext]="
+            text.meterValue(item.value + (unit() ? ' ' + unit() : ''), total())
+          "
+          [style.width.%]="(item.value / total()) * 100"
+          [style.background]="color(i)"
+        ></span>
+      }
+    </div>
+    <ul class="star-meter-group__legend" aria-hidden="true">
+      @for (item of items(); track item.label; let i = $index) {
+        <li>
+          <span class="star-chart__swatch" [style.background]="color(i)"></span>
+          {{ item.label }} <strong>{{ item.value }}{{ unit() ? ' ' + unit() : '' }}</strong>
+        </li>
+      }
+    </ul>
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		unit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unit",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { StarAnimateOnScroll, StarBlockUi, StarDock, StarFloatLabel, StarFocusTrap, StarImageCompare, StarInplace, StarInplaceContent, StarInplaceDisplay, StarMeterGroup, StarRipple, StarScrollPanel, StarScrollTop, StarSpeedDial, StarSplitter, StarTerminal };
+
+//# sourceMappingURL=star-ng-ui-utility.mjs.map