@star-ng/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ramana Reddy Chamakura
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,149 @@
-# Temporary Holding Version
+# StarNG
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/@star-ng/ui)](https://www.npmjs.com/package/@star-ng/ui)
+[![CI](https://github.com/ramanacr/star-ng/actions/workflows/ci.yml/badge.svg)](https://github.com/ramanacr/star-ng/actions/workflows/ci.yml)
+[![Docs](https://img.shields.io/badge/docs-ramanacr.github.io%2Fstar--ng-blue)](https://ramanacr.github.io/star-ng/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)
+
+StarNG is a library of accessible Angular controls. It uses signals, Signal Forms and the Angular CDK. The npm package is `@star-ng/ui`. The selector prefix is `star-` and the CSS token prefix is `--star-`. Each control group is one entry point, for example `@star-ng/ui/button`, so an application bundles only what it imports. The library does not use Angular Material or another UI kit.
+
+> Status: `@star-ng/ui` has `0.x` versions. The API can change between minor versions (see "Versioning and stability").
+
+## What is in the package
+
+About 90 controls in more than 50 entry points. Each control has a docs page with live examples and an API table.
+
+Control groups: buttons; forms (field, input, checkbox, radio, switch, number, password, mask, one-time code, tags, slider, rating, knob, color picker, select button); selection (select, multi-select, cascade select, listbox, autocomplete, tree, tree select); date and time; table; menus; overlays (dialog, confirm, drawer, popover, tooltip, toast); panels and navigation; data display and charts; media (file upload, editor, carousel, galleria, image); utilities.
+
+## Requirements
+
+| Package                                              | Version                                        |
+| ---------------------------------------------------- | ---------------------------------------------- |
+| `@angular/core`, `@angular/common`, `@angular/forms` | 22 or later                                    |
+| `@angular/cdk`                                       | 22 or later                                    |
+| `@angular/router`                                    | 22 or later                                    |
+| `@phosphor-icons/web`                                | 2.1 or later (icons that the controls draw)    |
+| `rxjs`                                               | 7.8 or later                                   |
+| `@jsverse/transloco`                                 | 8 or later, optional (`@star-ng/ui/transloco`) |
+
+## Install
+
+Use one of these commands.
+
+```bash
+pnpm add @star-ng/ui @angular/cdk @phosphor-icons/web
+npm install @star-ng/ui @angular/cdk @phosphor-icons/web
+yarn add @star-ng/ui @angular/cdk @phosphor-icons/web
+```
+
+## Include the styles
+
+Add the compiled CSS and two Phosphor icon weights to the `styles` of your build target in `angular.json`:
+
+```json
+"styles": [
+  "@phosphor-icons/web/bold/style.css",
+  "@phosphor-icons/web/fill/style.css",
+  "@star-ng/ui/styles/star-ng.css",
+  "src/styles.scss"
+]
+```
+
+With Sass, you can use the SCSS entry instead: `@use '@star-ng/ui/styles/star-ng';`.
+
+## Use a control
+
+Import a control from its entry point, not from the package root.
+
+```ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { StarButton } from '@star-ng/ui/button';
+
+@Component({
+  selector: 'app-orders',
+  imports: [StarButton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<star-button (pressed)="create()">New order</star-button>`,
+})
+export class Orders {
+  create(): void {}
+}
+```
+
+## Forms
+
+1. Form controls implement the Signal Forms control interfaces. Bind them with `[formField]`.
+2. Without a form, use two-way binding, for example `[(checked)]` or `[(value)]`.
+3. In Reactive Forms, use `SignalFormControl` from `@angular/forms/signals/compat`.
+
+See the [forms guide](https://ramanacr.github.io/star-ng/guides/forms).
+
+## Theme and dark mode
+
+Override the `--star-*` tokens after the StarNG styles. Put light values on `:root` and dark values on `[data-theme='dark']`.
+
+```css
+:root {
+  --star-primary: #0f766e;
+}
+[data-theme='dark'] {
+  --star-primary: #2dd4bf;
+}
+```
+
+`StarThemeService` (`@star-ng/ui/theme`) is an optional helper for a system, light or dark choice. A first-paint script avoids a flash of the wrong theme. See the guides [theming and tokens](https://ramanacr.github.io/star-ng/guides/theming) and [dark mode](https://ramanacr.github.io/star-ng/guides/dark-mode).
+
+## Language packs
+
+The built-in text of the controls is English. The German and Spanish packs are separate entry points. The `locale` inputs of the controls set number and date formats. They do not depend on the pack.
+
+```ts
+import { provideStarUiText } from '@star-ng/ui/core';
+import { STAR_UI_TEXT_DE } from '@star-ng/ui/i18n/de';
+
+providers: [provideStarUiText(STAR_UI_TEXT_DE)];
+```
+
+A language model wrote the German and Spanish packs. Native speakers did not review them. See the [internationalisation guide](https://ramanacr.github.io/star-ng/guides/i18n) for run-time switching, your own pack and Transloco.
+
+## Right-to-left
+
+Set `dir="rtl"` on `<html>`. The styles use logical properties, the arrow keys follow the visual direction, and overlays follow the direction at run time. See the [right-to-left guide](https://ramanacr.github.io/star-ng/guides/right-to-left).
+
+## Browser support
+
+The tests run in Chromium only (Playwright). Firefox and Safari are not tested. The library uses these modern CSS and platform features. Check them against your browser targets.
+
+- `:has()` and `:dir()`
+- container queries
+- `@starting-style`
+- `field-sizing`
+- `color-mix()`
+- logical properties
+- the native `<dialog>` element and popover behavior (through the Angular CDK)
+
+## Accessibility
+
+The target is WCAG 2.2 level AA. CI runs an automated axe scan on every docs page in the light and dark themes, and on 65 opened states. Unit tests and keyboard tests cover roles, states and key handling.
+
+Not tested: screen-reader output, zoom and reflow, forced-colors mode. An automated scan finds only some problems. Your application must also name every control and set the page language. See the [accessibility guide](https://ramanacr.github.io/star-ng/guides/accessibility).
+
+## Versioning and stability
+
+The package follows semantic versioning. In `0.x` versions, the API can change between minor versions. Read the [changelog](CHANGELOG.md) before you update. The dist-tag `latest` is for releases. The dist-tag `next` is for prereleases.
+
+## Known limits
+
+- Chromium is the only tested browser.
+- The German and Spanish text packs have no native-speaker review.
+- There are no screen-reader, zoom, reflow or forced-colors tests.
+- The editor and the file upload do not protect your server. See [SECURITY.md](SECURITY.md).
+
+## Links
+
+- [Documentation site](https://ramanacr.github.io/star-ng/)
+- [Changelog](CHANGELOG.md)
+- [Contributing](CONTRIBUTING.md)
+- [Releasing](RELEASING.md)
+- [Security](SECURITY.md)
+- [License (MIT)](LICENSE)

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

@@ -0,0 +1,376 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, TemplateRef, booleanAttribute, computed, contentChild, contentChildren, forwardRef, inject, input, linkedSignal, model } from "@angular/core";
+var StarAccordionContent = class StarAccordionContent {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAccordionContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarAccordionContent,
+		isStandalone: true,
+		selector: "ng-template[starAccordionContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarAccordionContent,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starAccordionContent]" }]
+	}]
+});
+var StarAccordionPanel = class StarAccordionPanel {
+	accordion = inject(forwardRef(() => StarAccordion));
+	ids = inject(_IdGenerator);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	header = input("", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	headerId = this.ids.getId("star-accordion-header-");
+	regionId = this.ids.getId("star-accordion-region-");
+	lazy = contentChild(StarAccordionContent, ...ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []);
+	expanded = computed(() => this.accordion.isOpen(this.value()), ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	rendered = linkedSignal({
+		...ngDevMode ? { debugName: "rendered" } : /* istanbul ignore next */ {},
+		source: this.expanded,
+		computation: (open, previous) => open || (previous?.value ?? false)
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAccordionPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarAccordionPanel,
+		isStandalone: true,
+		selector: "star-accordion-panel",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			header: {
+				classPropertyName: "header",
+				publicName: "header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"class.star-accordion__panel--open": "expanded()",
+				"class.star-accordion__panel--disabled": "disabled()"
+			},
+			classAttribute: "star-accordion__panel"
+		},
+		queries: [{
+			propertyName: "lazy",
+			first: true,
+			predicate: StarAccordionContent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <h3 class="star-accordion__heading">
+      <button
+        type="button"
+        class="star-accordion__header"
+        [id]="headerId"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="regionId"
+        [disabled]="disabled()"
+        (click)="accordion.toggle(value())"
+        (keydown)="accordion.onHeaderKeydown($event)"
+      >
+        @if (icon(); as icon) {
+          <i [class]="icon" aria-hidden="true"></i>
+        }
+        <span class="star-accordion__title">{{ header() }}</span>
+        <ng-content select="[starAccordionHeader]" />
+        <i class="ph-bold ph-caret-down star-accordion__caret" aria-hidden="true"></i>
+      </button>
+    </h3>
+    <div
+      class="star-accordion__region"
+      role="region"
+      [id]="regionId"
+      [attr.aria-labelledby]="headerId"
+      [attr.inert]="expanded() ? null : ''"
+    >
+      <div class="star-accordion__inner">
+        <div class="star-accordion__body">
+          @if (lazy(); as lazyContent) {
+            @if (rendered()) {
+              <ng-container *ngTemplateOutlet="lazyContent.template" />
+            }
+          }
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+		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: StarAccordionPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-accordion-panel",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-accordion__panel",
+				"[class.star-accordion__panel--open]": "expanded()",
+				"[class.star-accordion__panel--disabled]": "disabled()"
+			},
+			template: `
+    <h3 class="star-accordion__heading">
+      <button
+        type="button"
+        class="star-accordion__header"
+        [id]="headerId"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="regionId"
+        [disabled]="disabled()"
+        (click)="accordion.toggle(value())"
+        (keydown)="accordion.onHeaderKeydown($event)"
+      >
+        @if (icon(); as icon) {
+          <i [class]="icon" aria-hidden="true"></i>
+        }
+        <span class="star-accordion__title">{{ header() }}</span>
+        <ng-content select="[starAccordionHeader]" />
+        <i class="ph-bold ph-caret-down star-accordion__caret" aria-hidden="true"></i>
+      </button>
+    </h3>
+    <div
+      class="star-accordion__region"
+      role="region"
+      [id]="regionId"
+      [attr.aria-labelledby]="headerId"
+      [attr.inert]="expanded() ? null : ''"
+    >
+      <div class="star-accordion__inner">
+        <div class="star-accordion__body">
+          @if (lazy(); as lazyContent) {
+            @if (rendered()) {
+              <ng-container *ngTemplateOutlet="lazyContent.template" />
+            }
+          }
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		lazy: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarAccordionContent), { isSignal: true }]
+		}]
+	}
+});
+var StarAccordion = class StarAccordion {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	panels = contentChildren(StarAccordionPanel, ...ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	isOpen(value) {
+		return this.value().includes(value);
+	}
+	toggle(value) {
+		const open = this.isOpen(value);
+		if (this.multiple()) this.value.update((values) => open ? values.filter((v) => v !== value) : [...values, value]);
+		else this.value.set(open ? [] : [value]);
+	}
+	onHeaderKeydown(event) {
+		const headers = [...this.host.nativeElement.querySelectorAll(":scope > star-accordion-panel .star-accordion__header:not(:disabled)")];
+		const index = headers.indexOf(event.target);
+		const targets = {
+			ArrowDown: (index + 1) % headers.length,
+			ArrowUp: (index - 1 + headers.length) % headers.length,
+			Home: 0,
+			End: headers.length - 1
+		};
+		if (!(event.key in targets) || index < 0) return;
+		event.preventDefault();
+		headers[targets[event.key]]?.focus();
+	}
+	count = computed(() => this.panels().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAccordion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarAccordion,
+		isStandalone: true,
+		selector: "star-accordion",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { classAttribute: "star-accordion" },
+		queries: [{
+			propertyName: "panels",
+			predicate: StarAccordionPanel,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarAccordion,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-accordion",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-accordion" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		panels: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => StarAccordionPanel), { isSignal: true }]
+		}]
+	}
+});
+export { StarAccordion, StarAccordionContent, StarAccordionPanel };
+
+//# sourceMappingURL=star-ng-ui-accordion.mjs.map

package/fesm2022/star-ng-ui-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-accordion.mjs","names":[],"sources":["../../../projects/star-ng/accordion/accordion.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  contentChildren,\n  Directive,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  linkedSignal,\n  model,\n  TemplateRef,\n} from '@angular/core';\n\n/** Lazy panel body: `<ng-template starAccordionContent>` renders on first expand only. */\n@Directive({ selector: 'ng-template[starAccordionContent]' })\nexport class StarAccordionContent {\n  readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n/** One section of `star-accordion`. */\n@Component({\n  selector: 'star-accordion-panel',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-accordion__panel',\n    '[class.star-accordion__panel--open]': 'expanded()',\n    '[class.star-accordion__panel--disabled]': 'disabled()',\n  },\n  template: `\n    <h3 class=\"star-accordion__heading\">\n      <button\n        type=\"button\"\n        class=\"star-accordion__header\"\n        [id]=\"headerId\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"regionId\"\n        [disabled]=\"disabled()\"\n        (click)=\"accordion.toggle(value())\"\n        (keydown)=\"accordion.onHeaderKeydown($event)\"\n      >\n        @if (icon(); as icon) {\n          <i [class]=\"icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"star-accordion__title\">{{ header() }}</span>\n        <ng-content select=\"[starAccordionHeader]\" />\n        <i class=\"ph-bold ph-caret-down star-accordion__caret\" aria-hidden=\"true\"></i>\n      </button>\n    </h3>\n    <div\n      class=\"star-accordion__region\"\n      role=\"region\"\n      [id]=\"regionId\"\n      [attr.aria-labelledby]=\"headerId\"\n      [attr.inert]=\"expanded() ? null : ''\"\n    >\n      <div class=\"star-accordion__inner\">\n        <div class=\"star-accordion__body\">\n          @if (lazy(); as lazyContent) {\n            @if (rendered()) {\n              <ng-container *ngTemplateOutlet=\"lazyContent.template\" />\n            }\n          }\n          <ng-content />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class StarAccordionPanel {\n  protected readonly accordion = inject(forwardRef(() => StarAccordion));\n  private readonly ids = inject(_IdGenerator);\n\n  readonly value = input.required<string>();\n  readonly header = input('');\n  readonly icon = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  protected readonly headerId = this.ids.getId('star-accordion-header-');\n  protected readonly regionId = this.ids.getId('star-accordion-region-');\n  protected readonly lazy = contentChild(StarAccordionContent);\n\n  readonly expanded = computed(() => this.accordion.isOpen(this.value()));\n  protected readonly rendered = linkedSignal<boolean, boolean>({\n    source: this.expanded,\n    computation: (open, previous) => open || (previous?.value ?? false),\n  });\n}\n\n/**\n * Accordion (PrimeNG `p-accordion`): `[(value)]` holds the open panel values, `multiple`\n * allows several open, lazy panel bodies, WAI-ARIA accordion keyboard (Arrow Up / Down,\n * Home / End between headers). Height animates with `grid-template-rows`.\n *\n * ```html\n * <star-accordion [(value)]=\"open\" multiple>\n *   <star-accordion-panel value=\"shipping\" header=\"Shipping\">…</star-accordion-panel>\n * </star-accordion>\n * ```\n */\n@Component({\n  selector: 'star-accordion',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-accordion' },\n  template: `<ng-content />`,\n})\nexport class StarAccordion {\n  readonly value = model<readonly string[]>([]);\n  readonly multiple = input(false, { transform: booleanAttribute });\n\n  private readonly panels = contentChildren(StarAccordionPanel);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  isOpen(value: string): boolean {\n    return this.value().includes(value);\n  }\n\n  toggle(value: string): void {\n    const open = this.isOpen(value);\n    if (this.multiple()) {\n      this.value.update((values) =>\n        open ? values.filter((v) => v !== value) : [...values, value],\n      );\n    } else {\n      this.value.set(open ? [] : [value]);\n    }\n  }\n\n  onHeaderKeydown(event: KeyboardEvent): void {\n    const headers = [\n      ...this.host.nativeElement.querySelectorAll<HTMLButtonElement>(\n        ':scope > star-accordion-panel .star-accordion__header:not(:disabled)',\n      ),\n    ];\n    const index = headers.indexOf(event.target as HTMLButtonElement);\n    const targets: Record<string, number> = {\n      ArrowDown: (index + 1) % headers.length,\n      ArrowUp: (index - 1 + headers.length) % headers.length,\n      Home: 0,\n      End: headers.length - 1,\n    };\n    if (!(event.key in targets) || index < 0) return;\n    event.preventDefault();\n    headers[targets[event.key]]?.focus();\n  }\n\n  /** Number of panels (used by tests and demos). */\n  readonly count = computed(() => this.panels().length);\n}\n"],"mappings":"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"}