@masmarino/gabarit 2.0.0 → 2.1.1

package/description-list/README.md

@@ -0,0 +1,63 @@
+# DescriptionList
+
+Label/value pairs for a detail page (owner, creation date, size…),
+built on the semantic `<dl>`/`<dt>`/`<dd>` elements rather than a
+`<table>`. For a list of _records_ instead of a single item's
+attributes, use `Table` or `DimensionCard`.
+
+**Selector**: `gbt-description-list`
+
+## Inputs
+
+| Input        | Type                                                        | Default      | Role                                                                                                                                                                                                                                                                                |
+| ------------ | ----------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`      | `{ term: string; value: string \| TemplateRef<unknown> }[]` | required     | Each pair. `value` is either plain text, or a `TemplateRef` for rich content (a `Badge`, a link, …).                                                                                                                                                                                |
+| `layout`     | `'stacked' \| 'inline'`                                     | `'stacked'`  | `stacked`: term above value. `inline`: term left, value right, in a two-column grid. Falls back to `stacked` below 768px either way (see `responsive`).                                                                                                                             |
+| `valueAlign` | `'start' \| 'end'`                                          | `'start'`    | `end` right-aligns the values (the fact-sheet look: term on the left, value on the far edge of its row). When an inline list collapses to one column, values go back to the start edge. With `layout="stacked"` the values stay on the end edge at every width (under their terms). |
+| `responsive` | `'viewport' \| 'container'`                                 | `'viewport'` | What an inline list stacks on. `viewport` (default): stacks below a 768px viewport. `container`: the list's own width — it stacks below 30rem, whatever the viewport.                                                                                                              |
+
+### `responsive="container"`
+
+The component becomes a size container (`display: block; container-type: inline-size`), so an inline
+list in a narrow card or side panel stacks even on a wide screen, and keeps two columns in a
+wide card even on a phone-sized viewport. Things to know:
+
+- The host takes the width its parent gives it. In a flex row, give it `flex: 1` or a width (a size
+  container has no intrinsic inline size of its own).
+- Browsers without container queries (`@supports (container-type: inline-size)` false) ignore the
+  option: the list stays on two columns at every width. Every evergreen browser has supported them
+  since early 2023.
+- It is opt-in: with the default `viewport`, the list only uses the plain viewport media query described above.
+
+## Example
+
+```html
+<ng-template #statusValue>
+  <gbt-badge variant="success">Actif</gbt-badge>
+</ng-template>
+
+<gbt-description-list
+  layout="inline"
+  [items]="[
+    { term: 'Propriétaire', value: 'Ada Lovelace' },
+    { term: 'Créé le', value: '12 mars 2024' },
+    { term: 'Statut', value: statusValue },
+  ]"
+/>
+```
+
+```ts
+statusValue = viewChild.required<TemplateRef<unknown>>('statusValue')
+```
+
+## Why `items` + `TemplateRef`, not projected `<gbt-description-list-item>`s
+
+`<dl>` may only directly contain `<dt>`/`<dd>` (or a `<div>` wrapping a
+pair) — axe flags any other element, including a custom element set to
+`display: contents`, as an invalid child, because that CSS property
+changes rendering, not the actual DOM parent/child relationship the HTML
+content model and ARIA role mapping both depend on. Rendering every
+`<dt>`/`<dd>` directly from this component's own template (via `items`)
+keeps them genuine direct children of `<dl>` while still supporting rich
+values, which is why `value` accepts a `TemplateRef` instead of a
+projected `<gbt-description-list-item>`.

package/dimension-card/README.md

@@ -0,0 +1,39 @@
+# DimensionCard
+
+Dimension table, with the hovered row accented — a decorative accent
+only, everything it highlights is already in the visible table; its rows
+are therefore not focusable.
+
+**Selector**: `gbt-dimension-card`
+
+Standalone, outside the dataviz base: no tooltip, no keyboard
+navigation, no separate `sr-only` table — `gbt-dimension-card` **is**
+already a real, visible table.
+
+## Inputs
+
+| Input          | Type             | Role                                          |
+| -------------- | ---------------- | --------------------------------------------- |
+| `rows`         | `DimensionRow[]` | Required. `{ label, value, display? }` rows.  |
+| `caption`      | `string`         | Required. Table caption.                      |
+| `labelColumn`  | `string`         | Required. Header of the label column.         |
+| `valueColumn`  | `string`         | Required. Header of the value column.         |
+| `emptyMessage` | `string`         | Required. Message shown when `rows` is empty. |
+| `locale`       | `string`         | Required. Locale used to format numbers.      |
+
+A row's `display` replaces the formatted number in the value column, for
+values a locale-aware number format can't express — bytes, durations, a
+currency. The bar still scales on `value`, so the comparison stays honest.
+
+## Example
+
+```html
+<gbt-dimension-card
+  [rows]="[{ label: 'Europe', value: 4200 }, { label: 'Amériques', value: 3100 }]"
+  caption="Requêtes par région"
+  labelColumn="Région"
+  valueColumn="Requêtes"
+  emptyMessage="Aucune donnée"
+  locale="fr-FR"
+/>
+```

package/disclosure/README.md

@@ -0,0 +1,48 @@
+# Disclosure
+
+A single disclosure: a toggle button and the panel it shows or hides ("Advanced options", "Files", "More
+details"). It is [`gbt-accordion-item`](../accordion-item/README.md) without the accordion around it: no parent
+group, no index, an `open` model you can bind.
+
+**Selector**: `gbt-disclosure`
+
+## Inputs
+
+| Input          | Type                            | Default      | Role                                                                                                    |
+| -------------- | ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------- |
+| `label`        | `string`                        | —            | Required. The text of the toggle.                                                                       |
+| `open`         | `boolean` (model)               | `false`      | Whether the panel is shown. Two-way: `[(open)]`.                                                        |
+| `icon`         | `string \| null`                | `null`       | Registered icon name before the label.                                                                  |
+| `appearance`   | `'bordered' \| 'plain'`         | `'bordered'` | `bordered`: a framed box with a tinted panel. `plain`: only the toggle and the panel.                   |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6 \| null` | `null`       | Wraps the toggle in a heading of that level (when the disclosure titles a section). `null`: no heading. |
+
+`openChange` is emitted by the model each time the user toggles.
+
+## Pattern
+
+The ARIA disclosure pattern, on the repo's accordion-item ground:
+
+- a native `<button type="button">` with `aria-expanded` and `aria-controls` (Enter and Space work natively);
+- a panel that is **`inert` while closed** (nothing in it can be focused or read) and `visibility: hidden`
+  once the 200 ms collapse has run;
+- a chevron that turns (not under `prefers-reduced-motion`).
+
+The panel's content is always instantiated: a heavy component inside is created while closed. Wrap it in
+`@if (open())` if that matters (the `open` model is right there).
+
+## Example
+
+```html
+<gbt-disclosure label="Advanced options" [(open)]="advancedOpen">
+  <gbt-switch label="CI enabled" [(ngModel)]="ciEnabled" />
+  <gbt-input label="Pipeline file path" [(ngModel)]="pipelineFile" />
+</gbt-disclosure>
+
+<gbt-disclosure label="Danger zone" icon="alert-triangle" [headingLevel]="3">…</gbt-disclosure>
+```
+
+## Accessibility
+
+See [AUDIT.md](AUDIT.md). Not covered: a disclosure that is open at a wide width and collapsible only on a
+phone (the file view's "Files" toggle) is a layout decision of the page: bind `[open]` to a breakpoint signal
+you own.

package/divider/README.md

@@ -0,0 +1,31 @@
+# Divider
+
+A thin separating line between sections or list items, with an
+optional centered label (e.g. "OR" between two sign-in buttons).
+
+**Selector**: `gbt-divider`
+
+## Inputs
+
+| Input         | Type                          | Default        | Role                                                         |
+| ------------- | ------------------------------ | ---------------- | --------------------------------------------------------------- |
+| `orientation` | `'horizontal' \| 'vertical'`   | `'horizontal'`   | `vertical` needs a defined height from its context — it stretches to fill it (`align-self: stretch`), it doesn't invent one. |
+| `label`       | `string`                       | `''`             | Optional text centered between two line segments.               |
+
+## Example
+
+```html
+<gbt-divider />
+<gbt-divider label="OR" />
+<gbt-divider orientation="vertical" />
+```
+
+## Behavior
+
+- `role="separator"`, with `aria-orientation="vertical"` only for the
+  vertical case — `horizontal` is the ARIA default, so the attribute
+  is omitted rather than stated redundantly.
+- A vertical divider inside a flex row needs the row to give it a
+  height (e.g. via `align-items: stretch`, the flex default, or an
+  explicit height on the row) — it has none of its own to fall back
+  on.

package/drawer/README.md

@@ -0,0 +1,49 @@
+# Drawer
+
+Side panel that slides in from an edge of the screen — traps focus,
+closes on Escape or a click on the backdrop, same control pattern as
+`Modal`. Unlike `Modal` (centered, blocks the whole page for a focused
+task), `Drawer` is for application content that sits alongside the
+page — a detail panel, advanced filters.
+
+**Selector**: `gbt-drawer`
+
+## Inputs
+
+| Input          | Type                                     | Default   | Role                                            |
+| -------------- | ----------------------------------------- | --------- | ------------------------------------------------ |
+| `isOpen`       | `boolean`                                 | required  | Open/closed state, driven by the application.     |
+| `edge`         | `'right' \| 'left' \| 'top' \| 'bottom'`  | `'right'` | Which edge the panel slides in from.               |
+| `heading`      | `string`                                  | `''`      | Panel title.                                       |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6`              | `2`       | Level of the rendered heading.                     |
+| `closeLabel`   | `string`                                  | `'Close'` | Accessible name of the close button.               |
+
+## Outputs
+
+| Output   | Type   | Role                                                                                                                                     |
+| -------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `closed` | `void` | Emitted on Escape, a click outside the panel, or a click on the close button. The application must respond by setting `isOpen` to `false`. |
+
+## Example
+
+```html
+<gbt-drawer [isOpen]="open()" edge="right" heading="Filtres" (closed)="open.set(false)">
+  Contenu du tiroir.
+</gbt-drawer>
+```
+
+## Behavior
+
+- Slides in/out with a matching backdrop fade (200ms), instead of
+  appearing/disappearing instantly like `Modal` — the panel stays
+  mounted for the closing animation's duration after `isOpen` becomes
+  `false`, then unmounts and returns focus, exactly like `Modal`
+  otherwise does immediately. Both animations are skipped under
+  `prefers-reduced-motion: reduce`.
+- Sized `min(90vw, 400px)` for `left`/`right`, `min(90vh, 400px)` for
+  `top`/`bottom` — adapts to the viewport with a fixed cap, same
+  reasoning as `Modal`'s own `min(90vw, 480px)` dialog width.
+- `AppShell`'s own mobile navigation drawer is a separate,
+  independent implementation, not built on `gbt-drawer`: its needs (a
+  fixed nav-link list, no arbitrary content) are narrower than this
+  component's.

package/empty-state/README.md

@@ -0,0 +1,84 @@
+# EmptyState
+
+A placeholder shown instead of an empty list/grid: an illustration, a
+heading, an optional message, and an optional action (a button)
+projected as content — used to distinguish "there is genuinely nothing
+here yet" from a plain "no results" text message.
+
+**Selector**: `gbt-empty-state`
+
+## Inputs
+
+| Input              | Type                                 | Default     | Role                                                                                                                                        |
+| ------------------ | ------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `illustration`     | `EmptyStateIllustration`             | `null`      | One of `'folder' \| 'star' \| 'checklist' \| 'merge' \| 'pipeline' \| 'tag' \| 'book' \| 'server'`. Optional. |
+| `heading`          | `string`                             | —           | Required. The primary message.                                                                                                              |
+| `message`          | `string`                             | `''`        | Optional secondary text, e.g. a hint or call to action description.                                                                         |
+| `icon`             | `string \| null`                     | `null`      | A registered icon name on a soft disc, in place of the artwork (ignored when an `illustration` is set).                                    |
+| `size`             | `'default' \| 'compact'`             | `'default'` | `compact` is the in-card block: smaller disc/artwork, tighter padding and type.                                                             |
+| `tone`             | `'default' \| 'error'`               | `'default'` | `error` tints the disc (or the artwork) in the error colours — a list that could not be loaded.                                             |
+| `headingLevel`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| null` | `null`      | Renders the heading as an `h1`…`h6` (default: a `<p>`).                                                                                     |
+| `headingId`        | `string \| null`                     | `null`      | `id` of the heading element, so a region can use `aria-labelledby`.                                                                         |
+| `headingFocusable` | `boolean`                            | `false`     | Gives the heading `tabindex="-1"` (a programmatic focus target, not a tab stop; it shows no focus ring, being no control).                  |
+
+## Methods
+
+| Method           | Role                                                                                                                                    |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `focusHeading()` | Moves focus to the heading — needs `headingFocusable`. For a result page (activation done, link expired) that moves focus to its title. |
+
+## Content
+
+An optional action (typically a `<gbt-button>`) is projected via
+`<ng-content />`, rendered below the message.
+
+## Example
+
+```html
+<gbt-empty-state
+  illustration="folder"
+  heading="Aucun dépôt pour l'instant"
+  message="Créez votre premier dépôt pour commencer."
+>
+  <gbt-button text="Nouveau dépôt" (clicked)="openCreate()" />
+</gbt-empty-state>
+```
+
+## Icon, compact and in-card states
+
+The 96 px artwork suits a whole page or an empty list. Inside a card, use the
+compact block with an icon:
+
+```html
+<gbt-card variant="outlined" heading="Variables" flush>
+  <gbt-empty-state
+    size="compact"
+    icon="key"
+    heading="Aucune variable définie"
+    message="Les variables sont injectées dans chaque job."
+  />
+</gbt-card>
+
+<gbt-empty-state size="compact" tone="error" icon="alert-circle" heading="Chargement impossible">
+  <gbt-button variant="secondary" size="small" text="Réessayer" (clicked)="retry()" />
+</gbt-empty-state>
+```
+
+With neither `illustration` nor `icon` a compact state is a bare heading (and
+message): the "Not found." block.
+
+## Heading level
+
+By default the heading is a `<p>` — the component cannot know where it sits in
+your page outline. Pass `headingLevel` when the state stands for a section (or
+the whole page, `1`), and `headingId` to name a surrounding `<section>`.
+
+## Choosing an illustration
+
+Each illustration is a fixed, curated piece of art shipped by Gabarit —
+not an extensible registry like `gbt-icon`'s. Pick whichever of the
+eight best matches the empty collection: `folder` for
+repositories/groups, `star` for a starred/favorites list, `checklist`
+for issues, `merge` for merge/pull requests, `pipeline` for CI
+pipelines, `tag` for releases, `book` for a wiki, `server` for
+infrastructure (e.g. CI runners).

package/fesm2022/masmarino-gabarit-accordion.mjs

@@ -0,0 +1,243 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, contentChildren, effect, inject, input, model, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextAccordionId = 0;
+var Accordion = class Accordion {
+	id = input(`gbt-accordion-${++nextAccordionId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	mode = input("single", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	expanded = model([], ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	items = contentChildren(AccordionItem, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const items = this.items();
+			const expanded = this.expanded();
+			const groupId = this.id();
+			items.forEach((item, i) => item.setState(i, expanded.includes(i), groupId));
+		});
+	}
+	toggle(index) {
+		const current = this.expanded();
+		if (this.mode() === "single") {
+			this.expanded.set(current.includes(index) ? [] : [index]);
+			return;
+		}
+		this.expanded.set(current.includes(index) ? current.filter((i) => i !== index) : [...current, index]);
+	}
+	focusHeader(index) {
+		const items = this.items();
+		const count = items.length;
+		if (count === 0) return;
+		items[(index % count + count) % count]?.focusHeader();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Accordion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: Accordion,
+		isStandalone: true,
+		selector: "gbt-accordion",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		queries: [{
+			propertyName: "items",
+			predicate: AccordionItem,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="gbt-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+		isInline: true,
+		styles: [".gbt-accordion{display:block;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);overflow:hidden}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Accordion,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-accordion",
+			standalone: true,
+			imports: [],
+			template: `
+    <div class="gbt-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [".gbt-accordion{display:block;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);overflow:hidden}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => AccordionItem), { isSignal: true }]
+		}]
+	}
+});
+var AccordionItem = class AccordionItem {
+	parent = inject(Accordion);
+	header = viewChild("header", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	active = signal(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	groupId = signal("", ...ngDevMode ? [{ debugName: "groupId" }] : /* istanbul ignore next */ []);
+	headerId = computed(() => `${this.groupId()}-header-${this.index()}`, ...ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => `${this.groupId()}-panel-${this.index()}`, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	setState(index, active, groupId) {
+		this.index.set(index);
+		this.active.set(active);
+		this.groupId.set(groupId);
+	}
+	focusHeader() {
+		this.header()?.nativeElement.focus();
+	}
+	toggle() {
+		this.parent.toggle(this.index());
+	}
+	onKeydown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			this.parent.focusHeader(this.index() + 1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			this.parent.focusHeader(this.index() - 1);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AccordionItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: AccordionItem,
+		isStandalone: true,
+		selector: "gbt-accordion-item",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		viewQueries: [{
+			propertyName: "header",
+			first: true,
+			predicate: ["header"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
+		styles: [":host{display:block}:host:not(:last-child){border-bottom:1px solid var(--border-color)}.gbt-accordion-item__header{box-sizing:border-box;display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem;background:var(--bg-principal);border:none;color:var(--text-primary);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header:hover{background:var(--bg-hover)}.gbt-accordion-item__header:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-accordion-item__label{flex:1;min-width:0}.gbt-accordion-item__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header--open .gbt-accordion-item__chevron{transform:rotate(180deg)}.gbt-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__panel--open{grid-template-rows:1fr}.gbt-accordion-item__panel-inner{overflow:hidden;min-height:0}.gbt-accordion-item__panel-content{padding:1rem}@media(prefers-reduced-motion:reduce){.gbt-accordion-item__chevron,.gbt-accordion-item__panel{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AccordionItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-accordion-item",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
+			styles: [":host{display:block}:host:not(:last-child){border-bottom:1px solid var(--border-color)}.gbt-accordion-item__header{box-sizing:border-box;display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem;background:var(--bg-principal);border:none;color:var(--text-primary);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header:hover{background:var(--bg-hover)}.gbt-accordion-item__header:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-accordion-item__label{flex:1;min-width:0}.gbt-accordion-item__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header--open .gbt-accordion-item__chevron{transform:rotate(180deg)}.gbt-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__panel--open{grid-template-rows:1fr}.gbt-accordion-item__panel-inner{overflow:hidden;min-height:0}.gbt-accordion-item__panel-content{padding:1rem}@media(prefers-reduced-motion:reduce){.gbt-accordion-item__chevron,.gbt-accordion-item__panel{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		header: [{
+			type: i0.ViewChild,
+			args: ["header", { isSignal: true }]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}]
+	}
+});
+export { Accordion, AccordionItem };
+
+//# sourceMappingURL=masmarino-gabarit-accordion.mjs.map

package/fesm2022/masmarino-gabarit-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-accordion.mjs","names":[],"sources":["../../../projects/gabarit/accordion/accordion.ts","../../../projects/gabarit/accordion/accordion-item/accordion-item.ts","../../../projects/gabarit/accordion/accordion-item/accordion-item.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChildren,\n  effect,\n  input,\n  model,\n} from '@angular/core'\nimport { AccordionItem } from './accordion-item/accordion-item'\n\nexport type AccordionMode = 'single' | 'multiple'\n\nlet nextAccordionId = 0\n\n@Component({\n  selector: 'gbt-accordion',\n  standalone: true,\n  imports: [],\n  template: `\n    <div class=\"gbt-accordion\">\n      <ng-content></ng-content>\n    </div>\n  `,\n  styleUrl: './accordion.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Accordion {\n  id = input<string>(`gbt-accordion-${++nextAccordionId}`)\n  mode = input<AccordionMode>('single')\n  expanded = model<number[]>([])\n\n  protected readonly items = contentChildren(AccordionItem)\n\n  constructor() {\n    effect(() => {\n      const items = this.items()\n      const expanded = this.expanded()\n      const groupId = this.id()\n      items.forEach((item, i) => item.setState(i, expanded.includes(i), groupId))\n    })\n  }\n\n  toggle(index: number): void {\n    const current = this.expanded()\n    if (this.mode() === 'single') {\n      this.expanded.set(current.includes(index) ? [] : [index])\n      return\n    }\n    this.expanded.set(\n      current.includes(index) ? current.filter((i) => i !== index) : [...current, index],\n    )\n  }\n\n  focusHeader(index: number): void {\n    const items = this.items()\n    const count = items.length\n    if (count === 0) {\n      return\n    }\n    const wrapped = ((index % count) + count) % count\n    items[wrapped]?.focusHeader()\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { Accordion } from '../accordion'\n\n@Component({\n  selector: 'gbt-accordion-item',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './accordion-item.html',\n  styleUrl: './accordion-item.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionItem {\n  private readonly parent = inject(Accordion)\n  private readonly header = viewChild<ElementRef<HTMLButtonElement>>('header')\n\n  label = input.required<string>()\n\n  protected readonly active = signal(false)\n  protected readonly index = signal(0)\n  protected readonly groupId = signal('')\n\n  protected readonly headerId = computed(() => `${this.groupId()}-header-${this.index()}`)\n  protected readonly panelId = computed(() => `${this.groupId()}-panel-${this.index()}`)\n\n  setState(index: number, active: boolean, groupId: string): void {\n    this.index.set(index)\n    this.active.set(active)\n    this.groupId.set(groupId)\n  }\n\n  focusHeader(): void {\n    this.header()?.nativeElement.focus()\n  }\n\n  protected toggle(): void {\n    this.parent.toggle(this.index())\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this.parent.focusHeader(this.index() + 1)\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.parent.focusHeader(this.index() - 1)\n    }\n  }\n}\n","<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n"],"mappings":"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"}