@kerusiweb/angular 2.1.0 → 2.3.0

package/fesm2022/kerusiweb-angular.mjs

@@ -1,6 +1,7 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, model, signal, effect } from '@angular/core';
-import { DEFAULT_KERUSI_COLORS, seatFill, seatTextFill, cssVar, seatBodyPath, seatOccupantVariant, seatSelectedFrame, seatCoreFill, seatWashFill, seatOccupantPath, seatOccupantStroke, occupantFillFor, occupantStrokeFor, elementStyle, elementFill, elementTextFill, screenPath, readableOn, formatMoney, DEFAULT_SEAT_ARIA_STRINGS, errorsOf, KerusiValidationError, validateDocumentSet, expireHolds, buildRenderModel, resolveMapLocale, isRtlLocale, resolveColors, computeSectionLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, DEFAULT_SEQUENCE_READER, heldSeats, applyStateDeltaOrdered } from '@kerusiweb/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ElementRef, model, contentChild, signal, viewChild, effect, untracked } from '@angular/core';
+import { DEFAULT_KERUSI_COLORS, resolveSeatStyle, resolveSeatGlyph, cssVar, elementStyle, elementFill, elementTextFill, screenPath, legendSwatchFill, legendSwatchPath, legendSwatchText, seatBodyPath, seatSelectedFrame, seatOccupantPath, seatOccupantStroke, seatWashFill, occupantFillFor, occupantStrokeFor, seatCoreFill, formatMoney, DEFAULT_SEAT_ARIA_STRINGS, DEFAULT_MAX_ZOOM, FIT_VIEWPORT, IDLE_GESTURE, errorsOf, KerusiValidationError, viewportsEqual, validateDocumentSet, expireHolds, buildRenderModel, resolveMapLocale, isRtlLocale, resolveColors, zoomLimits, resolveControlStrings, controlStyle, viewportTransform, viewportTouchAction, computeSectionLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, fitViewport, stepViewport, clampViewport, revealRect, reduceGesture, wheelZoomFactor, zoomViewportBy, zoomViewportTo, isTextEntryTarget, keyboardViewport, DEFAULT_SEQUENCE_READER, heldSeats, applyStateDeltaOrdered } from '@kerusiweb/core';
 
 /**
  * Draws one Kerusi `Section` as a single `<svg>`.
@@ -32,6 +33,15 @@ class KerusiSectionComponent {
     /** Whether an available seat may take its `SeatType.color` (§4.7). */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Styles for every seat of a type, keyed by `SeatType.id`. */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
+    /** A style for one seat, laid over its type's. */
+    seatStyle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatStyle" }] : /* istanbul ignore next */ []));
+    /** Draws the inside of each seat in place of the stock glyph. */
+    seatTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTemplate" }] : /* istanbul ignore next */ []));
     /** When false, seats render but do not respond to pointer or keyboard. */
     interactive = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
@@ -54,114 +64,29 @@ class KerusiSectionComponent {
     /** The section's natural width in CSS pixels; it never draws wider. */
     naturalWidth = computed(() => this.layout().width * this.unitScale(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "naturalWidth" }] : /* istanbul ignore next */ []));
-    isSelected(placed) {
-        return this.selection().has(placed.seat.id);
-    }
-    fill(placed) {
-        return seatFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
-    }
-    textFill(placed) {
-        return seatTextFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
-    }
-    backdrop() {
-        return cssVar('backdrop', this.colors().backdrop);
-    }
-    // --- the seat glyph -------------------------------------------------------
-    /** The seat's outline: square-ish front, tapered back — shape carries facing. */
-    bodyPath(placed) {
-        return seatBodyPath(placed.x, placed.y, placed.width, placed.height);
-    }
-    /** `null` for an available or blocked seat — nothing to mark. */
-    occupantVariant(placed) {
-        return seatOccupantVariant(placed.seat, this.isSelected(placed));
-    }
-    /**
-     * The box a seat's decorative marks are drawn to: the seat's own, or — when
-     * it is selected — the core plate's, which is inset by the frame width.
-     *
-     * Everything over a selected seat sits on the core, so it all has to be
-     * measured from the core. Drawing to the seat's box instead leaves the
-     * occupant's hips crossing the frame, where a figure tinted `selectedBg`
-     * lands on a frame filled `selectedBg` and reads as a hard nub. Since the
-     * core is an exact scaled copy of the body (see {@link seatSelectedFrame}),
-     * routing through here reproduces every clearance the mark had against the
-     * body, scaled — so the frame width stays free to change.
-     */
-    markBox(placed) {
-        if (!this.isSelected(placed)) {
-            return placed;
-        }
-        const frame = seatSelectedFrame(placed.width, placed.height);
-        return {
-            x: placed.x + frame,
-            y: placed.y + frame,
-            width: placed.width - frame * 2,
-            height: placed.height - frame * 2,
-        };
-    }
-    /** The bright plate inside a selected seat's frame. */
-    corePath(placed) {
-        const box = this.markBox(placed);
-        return seatBodyPath(box.x, box.y, box.width, box.height);
-    }
-    coreFill() {
-        return seatCoreFill(this.colors());
-    }
-    /** The dimming wash over a held or booked seat's type colour. */
-    washFill(placed) {
-        // Only called for held/booked seats — see the template's @if.
-        return seatWashFill(placed.seat.status, this.colors());
-    }
-    /** The occupant figure for a marked seat, sized to whatever it sits on. */
-    occupantPath(placed) {
-        const box = this.markBox(placed);
-        return seatOccupantPath(box.x, box.y, box.width, box.height);
-    }
-    occupantStroke(placed) {
-        const box = this.markBox(placed);
-        return seatOccupantStroke(box.width, box.height);
-    }
-    // The wheelchair marker keeps the same relative corner it always had; only
-    // the box it is relative to changes, so a selected seat's dot stays whole
-    // instead of being bitten off by the frame.
-    wheelchairCx(placed) {
-        const box = this.markBox(placed);
-        return box.x + box.width * 0.82;
-    }
-    wheelchairCy(placed) {
-        const box = this.markBox(placed);
-        return box.y + box.height * 0.18;
-    }
-    wheelchairRadius(placed) {
-        return this.markBox(placed).width * 0.13;
-    }
     /**
-     * A core-coloured outline behind a selected seat's number, painted under the
-     * glyphs via `paint-order`.
-     *
-     * The label is centred on the occupant's shoulder line, so without this it is
-     * `selectedBg` over a `selectedBg` silhouette — the figure, not the plate, is
-     * what it actually has to contrast against. The halo also rescues a label too
-     * long for the core, which would otherwise run onto the frame and vanish into
-     * it.
-     *
-     * Bound here rather than in the stylesheet on purpose: a CSS
-     * `var(--kerusi-selected-fg, …)` rule would carry the library default as its
-     * fallback and silently skip the `[colors]` input tier, which only the
-     * TypeScript side can resolve.
+     * Every seat with its glyph resolved, once per change of layout, selection or
+     * theme rather than once per binding per change detection.
      */
-    labelHalo(placed) {
-        return this.isSelected(placed) ? seatCoreFill(this.colors()) : 'none';
-    }
-    labelHaloWidth(placed) {
-        return this.isSelected(placed) ? placed.fontSize * 0.22 : 0;
-    }
-    /** Solid for selected/booked; `none` for held, which draws hollow instead. */
-    occupantFill(variant) {
-        return occupantFillFor(variant, this.colors());
-    }
-    occupantStrokeColor(variant) {
-        return occupantStrokeFor(variant, this.colors());
+    seats = computed(() => {
+        const selection = this.selection();
+        const colors = this.colors();
+        const typeColors = this.typeColors();
+        const typeStyles = this.seatTypeStyles();
+        const seatStyle = this.seatStyle();
+        return this.layout().seats.map((placed) => {
+            const selected = selection.has(placed.seat.id);
+            const style = resolveSeatStyle(placed.seat, selected, typeStyles, seatStyle);
+            return {
+                placed,
+                selected,
+                glyph: resolveSeatGlyph(placed, selected, colors, typeColors, style),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seats" }] : /* istanbul ignore next */ []));
+    backdrop() {
+        return cssVar('backdrop', this.colors().backdrop);
     }
     /** The section's single tab stop; every other seat is reachable by arrow key. */
     tabIndex(placed) {
@@ -173,19 +98,6 @@ class KerusiSectionComponent {
     ariaLabel(placed) {
         return this.ariaLabels().get(placed.seat.id) ?? placed.seat.label;
     }
-    seatClasses(placed) {
-        const seat = placed.seat;
-        return [
-            'kerusi-seat',
-            `kerusi-seat--${seat.status}`,
-            this.isSelected(placed) ? 'kerusi-seat--selected' : '',
-            seat.selectable ? '' : 'kerusi-seat--unselectable',
-            seat.accessibility?.wheelchairAccessible ? 'kerusi-seat--wheelchair' : '',
-            seat.companions.length > 0 ? 'kerusi-seat--companion' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
     /** SVG rotate() about the item's center; null when it does not rotate. */
     transform(item) {
         return item.rotation ? `rotate(${item.rotation} ${item.centerX} ${item.centerY})` : null;
@@ -237,12 +149,12 @@ class KerusiSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSectionComponent, isStandalone: true, selector: "kerusi-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, focusedSeatId: { classPropertyName: "focusedSeatId", publicName: "focusedSeatId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seatActivate: "seatActivate", seatFocused: "seatFocused", seatKeydown: "seatKeydown" }, ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSectionComponent, isStandalone: true, selector: "kerusi-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, focusedSeatId: { classPropertyName: "focusedSeatId", publicName: "focusedSeatId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, seatStyle: { classPropertyName: "seatStyle", publicName: "seatStyle", isSignal: true, isRequired: false, transformFunction: null }, seatTemplate: { classPropertyName: "seatTemplate", publicName: "seatTemplate", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seatActivate: "seatActivate", seatFocused: "seatFocused", seatKeydown: "seatKeydown" }, ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  <!-- The stock seat drawing. A template rather than inline markup so that a\r\n       custom seat template can render it too, as `defaultContent`. Declared\r\n       inside the <svg>, so its elements are created in the SVG namespace. -->\r\n  <ng-template #stockSeat let-seat>\r\n    @let glyph = seat.glyph;\r\n    <!-- Tapered toward the back, square at the front, so which way the seat\r\n         faces is legible from the outline alone. -->\r\n    <path class=\"kerusi-seat__box\" [attr.d]=\"glyph.body.d\" [style.fill]=\"glyph.body.fill\" />\r\n    @if (glyph.wash; as wash) {\r\n      <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n           instead, so the type colour still reads on a busy map. -->\r\n      <path class=\"kerusi-seat__wash\" [attr.d]=\"wash.d\" [style.fill]=\"wash.fill\" />\r\n    }\r\n    @if (glyph.core; as core) {\r\n      <!-- Selection is the one state drawn from two tones: the body above is\r\n           the frame, this is the bright core inside it. Whichever way the\r\n           host page is themed, one of the two separates from it \u2014 which is\r\n           why nothing here has to know about the page. -->\r\n      <path class=\"kerusi-seat__core\" [attr.d]=\"core.d\" [style.fill]=\"core.fill\" />\r\n    }\r\n    @if (glyph.occupant; as occupant) {\r\n      <!-- Deliberately not counter-rotated: the occupant leans with the\r\n           seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n           progress. -->\r\n      <path\r\n        class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ occupant.variant }}\"\r\n        [attr.d]=\"occupant.d\"\r\n        [attr.stroke-width]=\"occupant.strokeWidth\"\r\n        [style.fill]=\"occupant.fill\"\r\n        [style.stroke]=\"occupant.stroke\"\r\n      />\r\n    }\r\n    <!-- The halo colour and width are bound here rather than in the\r\n         stylesheet: a CSS `var(--kerusi-selected-fg, \u2026)` rule would carry\r\n         the library default as its fallback and skip the [colors] tier. -->\r\n    <text\r\n      class=\"kerusi-seat__label\"\r\n      text-anchor=\"middle\"\r\n      dominant-baseline=\"central\"\r\n      [attr.x]=\"glyph.label.x\"\r\n      [attr.y]=\"glyph.label.y\"\r\n      [attr.font-size]=\"glyph.label.fontSize\"\r\n      [style.fill]=\"glyph.label.fill\"\r\n      [style.stroke]=\"glyph.label.halo\"\r\n      [attr.stroke-width]=\"glyph.label.haloWidth\"\r\n      [attr.transform]=\"glyph.label.transform\"\r\n    >\r\n      {{ glyph.label.text }}\r\n    </text>\r\n    @if (glyph.wheelchair; as wheelchair) {\r\n      <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n      <circle\r\n        class=\"kerusi-seat__wheelchair\"\r\n        [attr.cx]=\"wheelchair.cx\"\r\n        [attr.cy]=\"wheelchair.cy\"\r\n        [attr.r]=\"wheelchair.r\"\r\n        [style.fill]=\"wheelchair.fill\"\r\n      />\r\n    }\r\n  </ng-template>\r\n\r\n  @for (entry of seats(); track entry.placed.seat.id) {\r\n    @let placed = entry.placed;\r\n    @let glyph = entry.glyph;\r\n    @let ctx =\r\n      {\r\n        placed: placed,\r\n        seat: placed.seat,\r\n        selected: entry.selected,\r\n        glyph: glyph,\r\n        defaultContent: stockSeat,\r\n      };\r\n    <g\r\n      [class]=\"glyph.className\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"entry.selected\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.data-seat-type]=\"glyph.data.type\"\r\n      [attr.data-seat-status]=\"glyph.data.status\"\r\n      [attr.data-section-id]=\"glyph.data.section\"\r\n      [attr.data-seat-row]=\"glyph.data.row\"\r\n      [attr.data-seat-attributes]=\"glyph.data.attributes\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @if (seatTemplate(); as custom) {\r\n        <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: ctx }\" />\r\n        <!-- Drawn over the custom content, because that content may have no\r\n             .kerusi-seat__box for the stock focus ring to stroke. Only visible\r\n             on :focus-visible. -->\r\n        <path class=\"kerusi-seat__focus\" [attr.d]=\"glyph.body.d\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"stockSeat; context: { $implicit: ctx }\" />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-seat__focus{fill:none;stroke:none;pointer-events:none}.kerusi-seat:focus-visible .kerusi-seat__focus{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"] }]
-        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], focusedSeatId: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedSeatId", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], seatActivate: [{ type: i0.Output, args: ["seatActivate"] }], seatFocused: [{ type: i0.Output, args: ["seatFocused"] }], seatKeydown: [{ type: i0.Output, args: ["seatKeydown"] }] } });
+            args: [{ selector: 'kerusi-section', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  <!-- The stock seat drawing. A template rather than inline markup so that a\r\n       custom seat template can render it too, as `defaultContent`. Declared\r\n       inside the <svg>, so its elements are created in the SVG namespace. -->\r\n  <ng-template #stockSeat let-seat>\r\n    @let glyph = seat.glyph;\r\n    <!-- Tapered toward the back, square at the front, so which way the seat\r\n         faces is legible from the outline alone. -->\r\n    <path class=\"kerusi-seat__box\" [attr.d]=\"glyph.body.d\" [style.fill]=\"glyph.body.fill\" />\r\n    @if (glyph.wash; as wash) {\r\n      <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n           instead, so the type colour still reads on a busy map. -->\r\n      <path class=\"kerusi-seat__wash\" [attr.d]=\"wash.d\" [style.fill]=\"wash.fill\" />\r\n    }\r\n    @if (glyph.core; as core) {\r\n      <!-- Selection is the one state drawn from two tones: the body above is\r\n           the frame, this is the bright core inside it. Whichever way the\r\n           host page is themed, one of the two separates from it \u2014 which is\r\n           why nothing here has to know about the page. -->\r\n      <path class=\"kerusi-seat__core\" [attr.d]=\"core.d\" [style.fill]=\"core.fill\" />\r\n    }\r\n    @if (glyph.occupant; as occupant) {\r\n      <!-- Deliberately not counter-rotated: the occupant leans with the\r\n           seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n           progress. -->\r\n      <path\r\n        class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ occupant.variant }}\"\r\n        [attr.d]=\"occupant.d\"\r\n        [attr.stroke-width]=\"occupant.strokeWidth\"\r\n        [style.fill]=\"occupant.fill\"\r\n        [style.stroke]=\"occupant.stroke\"\r\n      />\r\n    }\r\n    <!-- The halo colour and width are bound here rather than in the\r\n         stylesheet: a CSS `var(--kerusi-selected-fg, \u2026)` rule would carry\r\n         the library default as its fallback and skip the [colors] tier. -->\r\n    <text\r\n      class=\"kerusi-seat__label\"\r\n      text-anchor=\"middle\"\r\n      dominant-baseline=\"central\"\r\n      [attr.x]=\"glyph.label.x\"\r\n      [attr.y]=\"glyph.label.y\"\r\n      [attr.font-size]=\"glyph.label.fontSize\"\r\n      [style.fill]=\"glyph.label.fill\"\r\n      [style.stroke]=\"glyph.label.halo\"\r\n      [attr.stroke-width]=\"glyph.label.haloWidth\"\r\n      [attr.transform]=\"glyph.label.transform\"\r\n    >\r\n      {{ glyph.label.text }}\r\n    </text>\r\n    @if (glyph.wheelchair; as wheelchair) {\r\n      <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n      <circle\r\n        class=\"kerusi-seat__wheelchair\"\r\n        [attr.cx]=\"wheelchair.cx\"\r\n        [attr.cy]=\"wheelchair.cy\"\r\n        [attr.r]=\"wheelchair.r\"\r\n        [style.fill]=\"wheelchair.fill\"\r\n      />\r\n    }\r\n  </ng-template>\r\n\r\n  @for (entry of seats(); track entry.placed.seat.id) {\r\n    @let placed = entry.placed;\r\n    @let glyph = entry.glyph;\r\n    @let ctx =\r\n      {\r\n        placed: placed,\r\n        seat: placed.seat,\r\n        selected: entry.selected,\r\n        glyph: glyph,\r\n        defaultContent: stockSeat,\r\n      };\r\n    <g\r\n      [class]=\"glyph.className\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"entry.selected\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.data-seat-type]=\"glyph.data.type\"\r\n      [attr.data-seat-status]=\"glyph.data.status\"\r\n      [attr.data-section-id]=\"glyph.data.section\"\r\n      [attr.data-seat-row]=\"glyph.data.row\"\r\n      [attr.data-seat-attributes]=\"glyph.data.attributes\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @if (seatTemplate(); as custom) {\r\n        <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: ctx }\" />\r\n        <!-- Drawn over the custom content, because that content may have no\r\n             .kerusi-seat__box for the stock focus ring to stroke. Only visible\r\n             on :focus-visible. -->\r\n        <path class=\"kerusi-seat__focus\" [attr.d]=\"glyph.body.d\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"stockSeat; context: { $implicit: ctx }\" />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-seat__focus{fill:none;stroke:none;pointer-events:none}.kerusi-seat:focus-visible .kerusi-seat__focus{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"] }]
+        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], focusedSeatId: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedSeatId", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], seatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatStyle", required: false }] }], seatTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTemplate", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], seatActivate: [{ type: i0.Output, args: ["seatActivate"] }], seatFocused: [{ type: i0.Output, args: ["seatFocused"] }], seatKeydown: [{ type: i0.Output, args: ["seatKeydown"] }] } });
 
 /**
  * A key for a seat map: its seat types on one side, its availability states on
@@ -268,6 +180,9 @@ class KerusiLegendComponent {
     /** Whether an available seat takes its type color — mirrors the seatmap input. */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Mirrors the seatmap input: a type's style is what its swatch shows. */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
     showPrices = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showPrices" }] : /* istanbul ignore next */ []));
     /** Hide types no seat in the rendered map actually uses. */
@@ -301,13 +216,17 @@ class KerusiLegendComponent {
         ];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+    // Same token and fallback as an available seat of the type, so a rule that
+    // sets `--kerusi-seat-fill` on the seats and the legend items keeps them in step.
     swatch(entry) {
-        return (this.typeColors() && entry.color) || cssVar('availableBg', this.colors().availableBg);
+        return legendSwatchFill(entry, this.colors(), this.typeColors(), this.seatTypeStyles()?.[entry.id]);
+    }
+    /** The swatch outline for a type styled with its own shape; `undefined` keeps the square. */
+    typeShape(entry) {
+        return legendSwatchPath(this.seatTypeStyles()?.[entry.id], this.glyphSize);
     }
     swatchText(entry) {
-        const typeColor = this.typeColors() && entry.color;
-        // Mirrors `seatTextFill`: only a document-supplied color needs guessing at.
-        return typeColor ? readableOn(typeColor) : cssVar('availableFg', this.colors().availableFg);
+        return legendSwatchText(entry, this.colors(), this.typeColors(), this.seatTypeStyles()?.[entry.id]);
     }
     // --- status swatches -------------------------------------------------------
     //
@@ -355,12 +274,44 @@ class KerusiLegendComponent {
         return entry.price ? formatMoney(entry.price, this.locale()) : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiLegendComponent, isStandalone: true, selector: "kerusi-legend", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, showPrices: { classPropertyName: "showPrices", publicName: "showPrices", isSignal: true, isRequired: false, transformFunction: null }, hideUnusedTypes: { classPropertyName: "hideUnusedTypes", publicName: "hideUnusedTypes", isSignal: true, isRequired: false, transformFunction: null }, headingSeatTypes: { classPropertyName: "headingSeatTypes", publicName: "headingSeatTypes", isSignal: true, isRequired: false, transformFunction: null }, headingAvailability: { classPropertyName: "headingAvailability", publicName: "headingAvailability", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiLegendComponent, isStandalone: true, selector: "kerusi-legend", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, showPrices: { classPropertyName: "showPrices", publicName: "showPrices", isSignal: true, isRequired: false, transformFunction: null }, hideUnusedTypes: { classPropertyName: "hideUnusedTypes", publicName: "hideUnusedTypes", isSignal: true, isRequired: false, transformFunction: null }, headingSeatTypes: { classPropertyName: "headingSeatTypes", publicName: "headingSeatTypes", isSignal: true, isRequired: false, transformFunction: null }, headingAvailability: { classPropertyName: "headingAvailability", publicName: "headingAvailability", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\" [attr.data-seat-type]=\"entry.id\">\r\n            @if (typeShape(entry); as d) {\r\n              <!-- A type styled with its own shape keys that shape, not a square. -->\r\n              <svg\r\n                class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n                aria-hidden=\"true\"\r\n                focusable=\"false\"\r\n                [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n              >\r\n                <path [attr.d]=\"d\" [style.fill]=\"swatch(entry)\" />\r\n              </svg>\r\n            } @else {\r\n              <span\r\n                class=\"kerusi-legend__swatch\"\r\n                aria-hidden=\"true\"\r\n                [style.background]=\"swatch(entry)\"\r\n                [style.color]=\"swatchText(entry)\"\r\n              ></span>\r\n            }\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], showPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrices", required: false }] }], hideUnusedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnusedTypes", required: false }] }], headingSeatTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingSeatTypes", required: false }] }], headingAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAvailability", required: false }] }] } });
+            args: [{ selector: 'kerusi-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\" [attr.data-seat-type]=\"entry.id\">\r\n            @if (typeShape(entry); as d) {\r\n              <!-- A type styled with its own shape keys that shape, not a square. -->\r\n              <svg\r\n                class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n                aria-hidden=\"true\"\r\n                focusable=\"false\"\r\n                [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n              >\r\n                <path [attr.d]=\"d\" [style.fill]=\"swatch(entry)\" />\r\n              </svg>\r\n            } @else {\r\n              <span\r\n                class=\"kerusi-legend__swatch\"\r\n                aria-hidden=\"true\"\r\n                [style.background]=\"swatch(entry)\"\r\n                [style.color]=\"swatchText(entry)\"\r\n              ></span>\r\n            }\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], showPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrices", required: false }] }], hideUnusedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnusedTypes", required: false }] }], headingSeatTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingSeatTypes", required: false }] }], headingAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAvailability", required: false }] }] } });
+
+/**
+ * Marks an `<ng-template>` inside `<kerusi-seatmap>` as the drawing for every
+ * seat. The library keeps each seat's `<g>`, with its role, ARIA state, tab
+ * stop, rotation and event handlers, and stamps this template inside it.
+ *
+ * The template is declared outside any `<svg>`, so Angular cannot tell its
+ * elements are SVG: prefix each one with `svg:` (`<svg:path>`, `<svg:image>`),
+ * or it is created as an unknown HTML element and draws nothing.
+ *
+ * ```html
+ * <kerusi-seatmap [map]="map">
+ *   <ng-template kerusiSeat let-seat>
+ *     <ng-container *ngTemplateOutlet="seat.defaultContent; context: { $implicit: seat }" />
+ *     <svg:circle [attr.cx]="seat.glyph.box.x" [attr.cy]="seat.glyph.box.y" r="3" />
+ *   </ng-template>
+ * </kerusi-seatmap>
+ * ```
+ */
+class KerusiSeatTemplateDirective {
+    template = inject(TemplateRef);
+    /** Types `let-seat` as a {@link SeatTemplateContext}. */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: KerusiSeatTemplateDirective, isStandalone: true, selector: "ng-template[kerusiSeat]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[kerusiSeat]' }]
+        }] });
 
 /**
  * Renders a Kerusi seat map.
@@ -375,6 +326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * ```html
  * <kerusi-seatmap [map]="map" [state]="state" [(selection)]="picked" />
  * ```
+ *
+ * Two opt-in features sit on top, both off by default so an existing map is
+ * unchanged: `[zoomable]` (pinch, wheel and drag, keys `+` `-` `0`, buttons)
+ * and `[maximizable]` (a full-screen button). Their arithmetic is in
+ * `@kerusiweb/core`; this class supplies the listeners and the signals.
  */
 class KerusiSeatmapComponent {
     host = inject((ElementRef));
@@ -406,6 +362,25 @@ class KerusiSeatmapComponent {
     /** Let an available seat take its `SeatType.color` (§4.7). */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /**
+     * Styles for every seat of a type, keyed by `SeatType.id`: fill, label colour
+     * and classes. Never changes a selected or blocked seat's fill. Also shown in
+     * the legend.
+     */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * A style for one seat, laid over its `seatTypeStyles` entry; return nothing
+     * to leave a seat be. Never changes a selected or blocked seat's fill.
+     */
+    seatStyle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * A `<ng-template kerusiSeat let-seat>` placed inside the map draws the inside
+     * of every seat in place of the stock glyph. See {@link KerusiSeatTemplateDirective}.
+     */
+    seatTemplate = contentChild(KerusiSeatTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTemplate" }] : /* istanbul ignore next */ []));
     /** Grid cell edge, in viewBox units. */
     seatSize = input(28, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seatSize" }] : /* istanbul ignore next */ []));
@@ -456,6 +431,28 @@ class KerusiSeatmapComponent {
     ...(ngDevMode ? [{ debugName: "expireHolds" }] : /* istanbul ignore next */ []));
     expiryIntervalMs = input(1000, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expiryIntervalMs" }] : /* istanbul ignore next */ []));
+    // --- zoom, pan and maximize (both opt in) ---------------------------------
+    /**
+     * Pinch, Ctrl/Cmd + wheel and drag to zoom and pan, `+` `-` `0` on the keyboard,
+     * and on-screen buttons. A tap still selects at every zoom level.
+     */
+    zoomable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomable" }] : /* istanbul ignore next */ []));
+    /** The zoom ceiling, relative to fit-to-container. The floor is always fit. */
+    maxZoom = input(DEFAULT_MAX_ZOOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+    /**
+     * The built-in zoom buttons. Turn this off to supply your own, anywhere on the
+     * page, and call `zoomIn()`, `zoomOut()` and `resetZoom()` on the component.
+     */
+    showZoomControls = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showZoomControls" }] : /* istanbul ignore next */ []));
+    /** A button that maximizes the map to fill the screen. */
+    maximizable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizable" }] : /* istanbul ignore next */ []));
+    /** Overrides the built-in English names of the zoom and maximize controls. */
+    controlStrings = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlStrings" }] : /* istanbul ignore next */ []));
     // --- validation -----------------------------------------------------------
     validate = input('collect', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
@@ -466,6 +463,9 @@ class KerusiSeatmapComponent {
     seatFocus = output();
     /** Emitted whenever the documents change, in `collect` mode. */
     validationIssues = output();
+    /** The zoom and pan, whenever they change. For a host that persists or shows them. */
+    viewportChange = output();
+    maximizedChange = output();
     // --- internal state -------------------------------------------------------
     /**
      * The seat holding each section's tab stop, keyed by section id.
@@ -481,6 +481,25 @@ class KerusiSeatmapComponent {
     /** Bumped by the hold ticker to force the state to be re-derived. */
     expiryTick = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expiryTick" }] : /* istanbul ignore next */ []));
+    viewportState = signal(FIT_VIEWPORT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportState" }] : /* istanbul ignore next */ []));
+    maximizedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizedState" }] : /* istanbul ignore next */ []));
+    /** True for a discrete change (button, key, reveal), false while a finger or wheel drives. */
+    animated = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    viewportEl = viewChild('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportEl" }] : /* istanbul ignore next */ []));
+    contentEl = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []));
+    gesture = IDLE_GESTURE;
+    suppressClick = false;
+    gestureBase = null;
+    nativeFullscreen = false;
+    /** The current zoom and pan. Read-only: drive it with the methods below. */
+    viewport = this.viewportState.asReadonly();
+    /** Whether the map is currently maximized. */
+    maximized = this.maximizedState.asReadonly();
     constructor() {
         effect(() => {
             const issues = this.issues();
@@ -520,6 +539,93 @@ class KerusiSeatmapComponent {
             const handle = setInterval(() => this.expiryTick.update((n) => n + 1), this.expiryIntervalMs());
             onCleanup(() => clearInterval(handle));
         });
+        // Gesture listeners go on natively, not through the template: the wheel
+        // listener must be non-passive to `preventDefault` a page zoom, and the
+        // click listener must be in the capture phase to swallow the click that
+        // follows a drag before the seat sees it.
+        effect((onCleanup) => {
+            const el = this.viewportEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const listeners = [
+                ['pointerdown', (e) => this.onPointerDown(e), false],
+                ['pointermove', (e) => this.onPointerMove(e), false],
+                ['pointerup', (e) => this.onPointerEnd(e, 'up'), false],
+                ['pointercancel', (e) => this.onPointerEnd(e, 'cancel'), false],
+                ['wheel', (e) => this.onWheel(e), { passive: false }],
+                ['click', (e) => this.onClickCapture(e), true],
+                // Safari reports a trackpad pinch as gesture events, not Ctrl + wheel.
+                ['gesturestart', (e) => this.onGestureStart(e), { passive: false }],
+                ['gesturechange', (e) => this.onGestureChange(e), { passive: false }],
+                ['gestureend', (e) => this.onGestureEnd(e), { passive: false }],
+            ];
+            for (const [type, listener, options] of listeners) {
+                el.addEventListener(type, listener, options);
+            }
+            onCleanup(() => {
+                for (const [type, listener, options] of listeners) {
+                    el.removeEventListener(type, listener, options);
+                }
+            });
+        });
+        // Re-clamp when the box or the ceiling changes: a rotated phone, a
+        // maximized map, a lowered `maxZoom`.
+        effect((onCleanup) => {
+            this.limits();
+            const view = this.viewportEl()?.nativeElement;
+            untracked(() => this.reclamp());
+            if (!view || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => this.reclamp());
+            observer.observe(view);
+            const content = this.contentEl()?.nativeElement;
+            if (content) {
+                observer.observe(content);
+            }
+            onCleanup(() => observer.disconnect());
+        });
+        // Switching `zoomable` or `maximizable` off puts the map back as it was.
+        effect(() => {
+            if (!this.zoomable() && !viewportsEqual(untracked(this.viewportState), FIT_VIEWPORT)) {
+                this.viewportState.set(FIT_VIEWPORT);
+            }
+        });
+        effect(() => {
+            if (!this.maximizable() && untracked(this.maximizedState)) {
+                untracked(() => this.setMaximized(false));
+            }
+        });
+        // While maximized: freeze the page behind, and follow the browser leaving
+        // native full screen (Esc) so the two never disagree.
+        effect((onCleanup) => {
+            if (!this.maximizedState()) {
+                return;
+            }
+            const host = this.host.nativeElement;
+            const doc = host.ownerDocument;
+            const previousOverflow = doc.body.style.overflow;
+            doc.body.style.overflow = 'hidden';
+            const onFullscreenChange = () => {
+                if (doc.fullscreenElement === host) {
+                    this.nativeFullscreen = true;
+                }
+                else if (this.nativeFullscreen) {
+                    this.nativeFullscreen = false;
+                    this.setMaximized(false);
+                }
+            };
+            doc.addEventListener('fullscreenchange', onFullscreenChange);
+            onCleanup(() => {
+                doc.body.style.overflow = previousOverflow;
+                doc.removeEventListener('fullscreenchange', onFullscreenChange);
+                this.nativeFullscreen = false;
+                if (doc.fullscreenElement === host) {
+                    doc.exitFullscreen?.().catch(() => undefined);
+                }
+            });
+        });
     }
     // --- derived model --------------------------------------------------------
     issues = computed(() => this.validate() === 'off'
@@ -555,6 +661,22 @@ class KerusiSeatmapComponent {
     ...(ngDevMode ? [{ debugName: "resolvedColors" }] : /* istanbul ignore next */ []));
     selectionSet = computed(() => new Set(this.selection()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionSet" }] : /* istanbul ignore next */ []));
+    limits = computed(() => zoomLimits(this.maxZoom()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limits" }] : /* istanbul ignore next */ []));
+    strings = computed(() => resolveControlStrings(this.controlStrings()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strings" }] : /* istanbul ignore next */ []));
+    controlColors = computed(() => controlStyle(this.colors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlColors" }] : /* istanbul ignore next */ []));
+    transform = computed(() => viewportTransform(this.viewportState()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    touchAction = computed(() => viewportTouchAction(this.viewportState(), this.maximizedState()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    showToolbar = computed(() => (this.zoomable() && this.showZoomControls()) || this.maximizable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    atMaxZoom = computed(() => this.viewportState().zoom >= this.limits().maxZoom - 1e-4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMaxZoom" }] : /* istanbul ignore next */ []));
+    atFit = computed(() => this.viewportState().zoom <= 1 + 1e-4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atFit" }] : /* istanbul ignore next */ []));
     /** Placed geometry per section, keyed by section id. */
     layouts = computed(() => {
         const overrides = this.sectionOverrides();
@@ -643,6 +765,9 @@ class KerusiSeatmapComponent {
         }
         this.setFocusedSeat(seat.sectionId, seatId);
         this.seatFocus.emit(seat);
+        if (this.zoomable()) {
+            this.revealSeat(seatId);
+        }
     }
     /**
      * Arrow keys walk the navigation graph, which orders seats by `col` in grid
@@ -714,19 +839,247 @@ class KerusiSeatmapComponent {
     /**
      * Moves the roving tab stop, then the DOM focus that follows it.
      *
+     * When zoomable, the browser's own scroll-into-view is suppressed: the map
+     * moves by transform, so `onSeatFocused` pans it into view instead.
+     */
+    moveFocusTo(sectionId, seatId) {
+        this.setFocusedSeat(sectionId, seatId);
+        const node = this.seatNode(seatId);
+        if (this.zoomable()) {
+            node?.focus?.({ preventScroll: true });
+        }
+        else {
+            node?.focus?.();
+        }
+    }
+    /**
      * Seat ids come from the document, so they cannot be interpolated into a
      * selector unescaped — and `CSS.escape` is absent in jsdom and under SSR.
      * Scanning the rendered nodes avoids both problems.
      */
-    moveFocusTo(sectionId, seatId) {
-        this.setFocusedSeat(sectionId, seatId);
+    seatNode(seatId) {
         const nodes = this.host.nativeElement.querySelectorAll('[data-seat-id]');
         for (const node of Array.from(nodes)) {
             if (node.dataset['seatId'] === seatId) {
-                node.focus?.();
+                return node;
+            }
+        }
+        return null;
+    }
+    // --- zoom and pan ---------------------------------------------------------
+    /** Zooms in one step about the centre. No-op unless `zoomable`. */
+    zoomIn() {
+        this.stepZoom(1);
+    }
+    /** Zooms out one step about the centre. No-op unless `zoomable`. */
+    zoomOut() {
+        this.stepZoom(-1);
+    }
+    /** Back to fit-to-container: the map's original view. No-op unless `zoomable`. */
+    resetZoom() {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            this.commit(fitViewport(measured.content, measured.container, this.limits()), true);
+        }
+    }
+    stepZoom(direction) {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            const next = stepViewport(this.viewportState(), direction, measured.content, measured.container, this.limits());
+            this.commit(next, true);
+        }
+    }
+    /** Sizes in CSS pixels, read when needed: `offset*` ignores the zoom transform. */
+    measure() {
+        const view = this.viewportEl()?.nativeElement;
+        const content = this.contentEl()?.nativeElement;
+        if (!view || !content) {
+            return null;
+        }
+        return {
+            container: { width: view.clientWidth, height: view.clientHeight },
+            content: { width: content.offsetWidth, height: content.offsetHeight },
+        };
+    }
+    commit(next, animate) {
+        if (viewportsEqual(next, this.viewportState())) {
+            return;
+        }
+        this.animated.set(animate);
+        this.viewportState.set(next);
+        this.viewportChange.emit(next);
+    }
+    reclamp() {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            const next = clampViewport(this.viewportState(), measured.content, measured.container, this.limits());
+            this.commit(next, false);
+        }
+    }
+    /** A point in the viewport's own coordinates, which is what the core functions take. */
+    containerPoint(event) {
+        const box = this.viewportEl().nativeElement.getBoundingClientRect();
+        return { x: event.clientX - box.left, y: event.clientY - box.top };
+    }
+    /**
+     * Pans a seat that took keyboard focus into view. A click or tap also
+     * focuses the seat, but should not move the map under the finger, so only a
+     * `:focus-visible` focus counts.
+     */
+    revealSeat(seatId) {
+        const view = this.viewportEl()?.nativeElement;
+        const node = this.seatNode(seatId);
+        const measured = this.measure();
+        if (!view || !node || !measured || !focusIsVisible(node)) {
+            return;
+        }
+        const seat = node.getBoundingClientRect();
+        const frame = view.getBoundingClientRect();
+        const next = revealRect(this.viewportState(), {
+            x: seat.left - frame.left,
+            y: seat.top - frame.top,
+            width: seat.width,
+            height: seat.height,
+        }, measured.content, measured.container, undefined, this.limits());
+        this.commit(next, true);
+    }
+    // --- pointer gestures -----------------------------------------------------
+    onPointerDown(event) {
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        this.suppressClick = false;
+        this.feedGesture({ type: 'down', id: event.pointerId, point: this.containerPoint(event) });
+    }
+    onPointerMove(event) {
+        if (this.gesture.ids.length > 0) {
+            this.feedGesture({ type: 'move', id: event.pointerId, point: this.containerPoint(event) });
+        }
+    }
+    onPointerEnd(event, type) {
+        this.feedGesture({ type, id: event.pointerId });
+    }
+    feedGesture(event) {
+        const measured = this.measure();
+        if (!measured) {
+            return;
+        }
+        const result = reduceGesture(this.gesture, event, {
+            viewport: this.viewportState(),
+            content: measured.content,
+            container: measured.container,
+            limits: this.limits(),
+        });
+        this.gesture = result.state;
+        // Capture only once a tap has become a gesture: capturing on `down` would
+        // retarget the tap's click away from the seat.
+        if (result.capture) {
+            const view = this.viewportEl()?.nativeElement;
+            for (const id of result.state.ids) {
+                try {
+                    view?.setPointerCapture(id);
+                }
+                catch {
+                    // The pointer already ended; nothing to capture.
+                }
+            }
+        }
+        if (result.viewport !== this.viewportState()) {
+            this.commit(result.viewport, false);
+        }
+        if (result.suppressClick) {
+            // The click a drag ends with arrives right after `pointerup`, before this timer.
+            this.suppressClick = true;
+            setTimeout(() => (this.suppressClick = false));
+        }
+    }
+    onClickCapture(event) {
+        if (this.suppressClick) {
+            this.suppressClick = false;
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    onWheel(event) {
+        const factor = wheelZoomFactor(event);
+        const measured = this.measure();
+        if (factor === null || !measured) {
+            return; // A plain wheel is the page's to scroll.
+        }
+        event.preventDefault();
+        const next = zoomViewportBy(this.viewportState(), factor, this.containerPoint(event), measured.content, measured.container, this.limits());
+        this.commit(next, false);
+    }
+    onGestureStart(event) {
+        event.preventDefault();
+        this.gestureBase = this.viewportState();
+    }
+    onGestureChange(event) {
+        event.preventDefault();
+        const measured = this.measure();
+        if (!this.gestureBase || !measured) {
+            return;
+        }
+        const next = zoomViewportTo(this.gestureBase, this.gestureBase.zoom * event.scale, this.containerPoint(event), measured.content, measured.container, this.limits());
+        this.commit(next, false);
+    }
+    onGestureEnd(event) {
+        event.preventDefault();
+        this.gestureBase = null;
+    }
+    // --- keyboard on the map as a whole ----------------------------------------
+    /**
+     * `+` `-` `0` zoom, and arrows pan when the viewport itself has focus; Esc
+     * leaves a maximized map. A seat's own handler runs first, so an Esc that
+     * cleared the selection is already `defaultPrevented` and stays at that.
+     */
+    onRootKeydown(event) {
+        if (event.defaultPrevented || isTextEntryTarget(event.target)) {
+            return;
+        }
+        if (this.zoomable()) {
+            const measured = this.measure();
+            const next = measured &&
+                keyboardViewport(this.viewportState(), {
+                    key: event.key,
+                    ctrlKey: event.ctrlKey,
+                    metaKey: event.metaKey,
+                    altKey: event.altKey,
+                    viewportFocused: event.target === this.viewportEl()?.nativeElement,
+                }, measured.content, measured.container, this.limits());
+            if (next) {
+                event.preventDefault();
+                this.commit(next, true);
                 return;
             }
         }
+        if (event.key === 'Escape' && this.maximizedState()) {
+            event.preventDefault();
+            this.setMaximized(false);
+        }
+    }
+    // --- maximize -------------------------------------------------------------
+    /** Maximizes or restores the map. Maximizing needs `maximizable`. */
+    toggleMaximized() {
+        this.setMaximized(!this.maximizedState());
+    }
+    setMaximized(next) {
+        if (next === this.maximizedState() || (next && !this.maximizable())) {
+            return;
+        }
+        this.maximizedState.set(next);
+        this.maximizedChange.emit(next);
+        // Native full screen is an enhancement over the fixed-position layout, which
+        // is all iPhone Safari offers. It is requested here, inside the click that
+        // got us here, because browsers only grant it to a user gesture.
+        const host = this.host.nativeElement;
+        const doc = host.ownerDocument;
+        if (next && !doc.fullscreenElement) {
+            host.requestFullscreen?.()?.catch(() => undefined);
+        }
+        else if (!next && doc.fullscreenElement === host) {
+            doc.exitFullscreen?.()?.catch(() => undefined);
+        }
     }
     announceSelection(selection) {
         const strings = this.ariaStrings();
@@ -758,15 +1111,24 @@ class KerusiSeatmapComponent {
         return (this.map().sections ?? []).map((s) => s.id).filter((id) => !hidden.includes(id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSeatmapComponent, isStandalone: true, selector: "kerusi-seatmap", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, ariaStrings: { classPropertyName: "ariaStrings", publicName: "ariaStrings", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatSize: { classPropertyName: "seatSize", publicName: "seatSize", isSignal: true, isRequired: false, transformFunction: null }, seatGap: { classPropertyName: "seatGap", publicName: "seatGap", isSignal: true, isRequired: false, transformFunction: null }, freeformBasis: { classPropertyName: "freeformBasis", publicName: "freeformBasis", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null }, showSectionLabels: { classPropertyName: "showSectionLabels", publicName: "showSectionLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendPrices: { classPropertyName: "showLegendPrices", publicName: "showLegendPrices", isSignal: true, isRequired: false, transformFunction: null }, sectionIds: { classPropertyName: "sectionIds", publicName: "sectionIds", isSignal: true, isRequired: false, transformFunction: null }, sectionOverrides: { classPropertyName: "sectionOverrides", publicName: "sectionOverrides", isSignal: true, isRequired: false, transformFunction: null }, selectableStatuses: { classPropertyName: "selectableStatuses", publicName: "selectableStatuses", isSignal: true, isRequired: false, transformFunction: null }, companionMode: { classPropertyName: "companionMode", publicName: "companionMode", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, seatSelectable: { classPropertyName: "seatSelectable", publicName: "seatSelectable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, expireHolds: { classPropertyName: "expireHolds", publicName: "expireHolds", isSignal: true, isRequired: false, transformFunction: null }, expiryIntervalMs: { classPropertyName: "expiryIntervalMs", publicName: "expiryIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", seatSelect: "seatSelect", seatDeselect: "seatDeselect", seatDisallowed: "seatDisallowed", seatFocus: "seatFocus", validationIssues: "validationIssues" }, ngImport: i0, template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "kerusi-section", inputs: ["section", "layout", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "interactive", "unitScale"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "showPrices", "hideUnusedTypes", "headingSeatTypes", "headingAvailability"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSeatmapComponent, isStandalone: true, selector: "kerusi-seatmap", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, ariaStrings: { classPropertyName: "ariaStrings", publicName: "ariaStrings", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, seatStyle: { classPropertyName: "seatStyle", publicName: "seatStyle", isSignal: true, isRequired: false, transformFunction: null }, seatSize: { classPropertyName: "seatSize", publicName: "seatSize", isSignal: true, isRequired: false, transformFunction: null }, seatGap: { classPropertyName: "seatGap", publicName: "seatGap", isSignal: true, isRequired: false, transformFunction: null }, freeformBasis: { classPropertyName: "freeformBasis", publicName: "freeformBasis", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null }, showSectionLabels: { classPropertyName: "showSectionLabels", publicName: "showSectionLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendPrices: { classPropertyName: "showLegendPrices", publicName: "showLegendPrices", isSignal: true, isRequired: false, transformFunction: null }, sectionIds: { classPropertyName: "sectionIds", publicName: "sectionIds", isSignal: true, isRequired: false, transformFunction: null }, sectionOverrides: { classPropertyName: "sectionOverrides", publicName: "sectionOverrides", isSignal: true, isRequired: false, transformFunction: null }, selectableStatuses: { classPropertyName: "selectableStatuses", publicName: "selectableStatuses", isSignal: true, isRequired: false, transformFunction: null }, companionMode: { classPropertyName: "companionMode", publicName: "companionMode", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, seatSelectable: { classPropertyName: "seatSelectable", publicName: "seatSelectable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, expireHolds: { classPropertyName: "expireHolds", publicName: "expireHolds", isSignal: true, isRequired: false, transformFunction: null }, expiryIntervalMs: { classPropertyName: "expiryIntervalMs", publicName: "expiryIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showZoomControls: { classPropertyName: "showZoomControls", publicName: "showZoomControls", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, controlStrings: { classPropertyName: "controlStrings", publicName: "controlStrings", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", seatSelect: "seatSelect", seatDeselect: "seatDeselect", seatDisallowed: "seatDisallowed", seatFocus: "seatFocus", validationIssues: "validationIssues", viewportChange: "viewportChange", maximizedChange: "maximizedChange" }, queries: [{ propertyName: "seatTemplate", first: true, predicate: KerusiSeatTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentEl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\r\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\r\n  (keydown)=\"onRootKeydown($event)\"\r\n>\r\n  @if (zoomable() || maximizable()) {\r\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\r\n         exactly what it was before they existed. -->\r\n    <div class=\"kerusi-seatmap__stage\">\r\n      @if (showToolbar()) {\r\n        <div\r\n          class=\"kerusi-toolbar\"\r\n          role=\"toolbar\"\r\n          [attr.aria-label]=\"strings().toolbar\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          @if (zoomable() && showZoomControls()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-in\"\r\n              [attr.aria-label]=\"strings().zoomIn\"\r\n              [attr.aria-disabled]=\"atMaxZoom()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomIn()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M12 5v14M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-out\"\r\n              [attr.aria-label]=\"strings().zoomOut\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomOut()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-reset\"\r\n              [attr.aria-label]=\"strings().zoomReset\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"resetZoom()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (maximizable()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--maximize\"\r\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"toggleMaximized()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                @if (maximized()) {\r\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\r\n                } @else {\r\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\r\n                }\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (zoomable()) {\r\n        <div\r\n          #viewport\r\n          class=\"kerusi-viewport\"\r\n          role=\"group\"\r\n          tabindex=\"0\"\r\n          [attr.aria-label]=\"strings().viewport\"\r\n          [style.touch-action]=\"touchAction()\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          <div\r\n            #content\r\n            class=\"kerusi-viewport__content\"\r\n            [class.kerusi-viewport__content--animated]=\"animated()\"\r\n            [style.transform]=\"transform()\"\r\n          >\r\n            <ng-container [ngTemplateOutlet]=\"sections\" />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"sections\" />\r\n      }\r\n    </div>\r\n  } @else {\r\n    <ng-container [ngTemplateOutlet]=\"sections\" />\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [seatTypeStyles]=\"seatTypeStyles()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n\r\n<ng-template #sections>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [seatTemplate]=\"seatTemplate()?.template\"\r\n        [seatStyle]=\"seatStyle()\"\r\n        [seatTypeStyles]=\"seatTypeStyles()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.kerusi-seatmap__stage{display:flex;flex-direction:column;gap:1.25rem}.kerusi-toolbar{display:flex;gap:.35rem;align-self:flex-end;flex:none}.kerusi-control{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.75rem;height:2.75rem;padding:0;border:1px solid;border-radius:.4rem;font:inherit;cursor:pointer}.kerusi-control[aria-disabled=true]{opacity:.45;cursor:default}.kerusi-control svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.kerusi-control:focus-visible,.kerusi-viewport:focus-visible{outline:2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));outline-offset:2px}.kerusi-viewport{position:relative;overflow:hidden;overflow:clip;user-select:none;-webkit-user-select:none}.kerusi-viewport__content{display:flex;flex-direction:column;gap:1.25rem;transform-origin:0 0}.kerusi-viewport__content--animated{transition:transform .16s ease-out}@media(prefers-reduced-motion:reduce){.kerusi-viewport__content--animated{transition:none}}.kerusi-seatmap--maximized{position:fixed;inset:0;z-index:var(--kerusi-maximized-z-index, 1000);box-sizing:border-box;padding:.75rem;gap:.5rem;overflow:hidden;overscroll-behavior:contain}.kerusi-seatmap--maximized .kerusi-seatmap__stage{flex:1 1 auto;min-height:0;gap:.5rem;overflow:auto}.kerusi-seatmap--maximized .kerusi-viewport{flex:1 1 auto;min-height:0}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "kerusi-section", inputs: ["section", "layout", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "seatTypeStyles", "seatStyle", "seatTemplate", "interactive", "unitScale"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "seatTypeStyles", "showPrices", "hideUnusedTypes", "headingSeatTypes", "headingAvailability"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent], template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], ariaStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaStrings", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSize", required: false }] }], seatGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatGap", required: false }] }], freeformBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformBasis", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], showSectionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSectionLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendPrices", required: false }] }], sectionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIds", required: false }] }], sectionOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOverrides", required: false }] }], selectableStatuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableStatuses", required: false }] }], companionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "companionMode", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], seatSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSelectable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], expireHolds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expireHolds", required: false }] }], expiryIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "expiryIntervalMs", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], seatSelect: [{ type: i0.Output, args: ["seatSelect"] }], seatDeselect: [{ type: i0.Output, args: ["seatDeselect"] }], seatDisallowed: [{ type: i0.Output, args: ["seatDisallowed"] }], seatFocus: [{ type: i0.Output, args: ["seatFocus"] }], validationIssues: [{ type: i0.Output, args: ["validationIssues"] }] } });
+            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent, NgTemplateOutlet], template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\r\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\r\n  (keydown)=\"onRootKeydown($event)\"\r\n>\r\n  @if (zoomable() || maximizable()) {\r\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\r\n         exactly what it was before they existed. -->\r\n    <div class=\"kerusi-seatmap__stage\">\r\n      @if (showToolbar()) {\r\n        <div\r\n          class=\"kerusi-toolbar\"\r\n          role=\"toolbar\"\r\n          [attr.aria-label]=\"strings().toolbar\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          @if (zoomable() && showZoomControls()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-in\"\r\n              [attr.aria-label]=\"strings().zoomIn\"\r\n              [attr.aria-disabled]=\"atMaxZoom()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomIn()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M12 5v14M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-out\"\r\n              [attr.aria-label]=\"strings().zoomOut\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomOut()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-reset\"\r\n              [attr.aria-label]=\"strings().zoomReset\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"resetZoom()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (maximizable()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--maximize\"\r\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"toggleMaximized()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                @if (maximized()) {\r\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\r\n                } @else {\r\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\r\n                }\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (zoomable()) {\r\n        <div\r\n          #viewport\r\n          class=\"kerusi-viewport\"\r\n          role=\"group\"\r\n          tabindex=\"0\"\r\n          [attr.aria-label]=\"strings().viewport\"\r\n          [style.touch-action]=\"touchAction()\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          <div\r\n            #content\r\n            class=\"kerusi-viewport__content\"\r\n            [class.kerusi-viewport__content--animated]=\"animated()\"\r\n            [style.transform]=\"transform()\"\r\n          >\r\n            <ng-container [ngTemplateOutlet]=\"sections\" />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"sections\" />\r\n      }\r\n    </div>\r\n  } @else {\r\n    <ng-container [ngTemplateOutlet]=\"sections\" />\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [seatTypeStyles]=\"seatTypeStyles()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n\r\n<ng-template #sections>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [seatTemplate]=\"seatTemplate()?.template\"\r\n        [seatStyle]=\"seatStyle()\"\r\n        [seatTypeStyles]=\"seatTypeStyles()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.kerusi-seatmap__stage{display:flex;flex-direction:column;gap:1.25rem}.kerusi-toolbar{display:flex;gap:.35rem;align-self:flex-end;flex:none}.kerusi-control{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.75rem;height:2.75rem;padding:0;border:1px solid;border-radius:.4rem;font:inherit;cursor:pointer}.kerusi-control[aria-disabled=true]{opacity:.45;cursor:default}.kerusi-control svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.kerusi-control:focus-visible,.kerusi-viewport:focus-visible{outline:2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));outline-offset:2px}.kerusi-viewport{position:relative;overflow:hidden;overflow:clip;user-select:none;-webkit-user-select:none}.kerusi-viewport__content{display:flex;flex-direction:column;gap:1.25rem;transform-origin:0 0}.kerusi-viewport__content--animated{transition:transform .16s ease-out}@media(prefers-reduced-motion:reduce){.kerusi-viewport__content--animated{transition:none}}.kerusi-seatmap--maximized{position:fixed;inset:0;z-index:var(--kerusi-maximized-z-index, 1000);box-sizing:border-box;padding:.75rem;gap:.5rem;overflow:hidden;overscroll-behavior:contain}.kerusi-seatmap--maximized .kerusi-seatmap__stage{flex:1 1 auto;min-height:0;gap:.5rem;overflow:auto}.kerusi-seatmap--maximized .kerusi-viewport{flex:1 1 auto;min-height:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], ariaStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaStrings", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], seatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatStyle", required: false }] }], seatTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KerusiSeatTemplateDirective), { isSignal: true }] }], seatSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSize", required: false }] }], seatGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatGap", required: false }] }], freeformBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformBasis", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], showSectionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSectionLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendPrices", required: false }] }], sectionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIds", required: false }] }], sectionOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOverrides", required: false }] }], selectableStatuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableStatuses", required: false }] }], companionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "companionMode", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], seatSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSelectable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], expireHolds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expireHolds", required: false }] }], expiryIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "expiryIntervalMs", required: false }] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], showZoomControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomControls", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], controlStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlStrings", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], seatSelect: [{ type: i0.Output, args: ["seatSelect"] }], seatDeselect: [{ type: i0.Output, args: ["seatDeselect"] }], seatDisallowed: [{ type: i0.Output, args: ["seatDisallowed"] }], seatFocus: [{ type: i0.Output, args: ["seatFocus"] }], validationIssues: [{ type: i0.Output, args: ["validationIssues"] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentEl: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 function formatTotal(total, locale) {
     return total ? formatMoney(total, locale) : '';
 }
+/** `:focus-visible` where the engine knows it; otherwise assume the focus is the keyboard's. */
+function focusIsVisible(node) {
+    try {
+        return node.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}
 
 /**
  * The Kerusi-native seat map: `<kerusi-seatmap>`, its section renderer, and an
@@ -876,5 +1238,5 @@ class KerusiStateStore {
  * Generated bundle index. Do not edit.
  */
 
-export { KerusiLegendComponent, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
+export { KerusiLegendComponent, KerusiSeatTemplateDirective, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
 //# sourceMappingURL=kerusiweb-angular.mjs.map