@ng-prism/core 22.6.0 → 22.7.0-beta.0

package/dist/app/shared/prism-segmented.component.js

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, input, model, viewChildren } from '@angular/core';
+import { nextRovingIndex, rovingTabStop } from './roving-focus.js';
+import * as i0 from "@angular/core";
+const _c0 = ["segment"];
+const _forTrack0 = ($index, $item) => $item.value;
+function PrismSegmentedComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 3, 0);
+    i0.ɵɵdomListener("click", function PrismSegmentedComponent_For_2_Template_button_click_0_listener() { const option_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.choose(option_r2)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const option_r2 = ctx.$implicit;
+    const ɵ$index_3_r4 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-segment--on", option_r2.value === ctx_r2.value());
+    i0.ɵɵattribute("aria-checked", option_r2.value === ctx_r2.value())("tabindex", ctx_r2.isFocusable(ɵ$index_3_r4) ? 0 : -1)("title", option_r2.title ?? null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", option_r2.label, " ");
+} }
+/**
+ * A choice between a few values: the view switch (Playground / Overview / API),
+ * zoom levels, fit modes. A radio group with a roving tabindex; the active
+ * segment sits raised on the track with a line in the brand ink under it.
+ */
+export class PrismSegmentedComponent {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    segments = viewChildren('segment', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    choose(option) {
+        this.value.set(option.value);
+    }
+    onKey(event) {
+        const options = this.options();
+        const current = Math.max(0, this.segments().findIndex((s) => s.nativeElement === event.target));
+        const next = nextRovingIndex(current, event.key, options.length);
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.value.set(options[next].value);
+        this.segments()[next]?.nativeElement.focus();
+    }
+    /** The segment in the tab order: the chosen one, or the first when the value matches none. */
+    isFocusable(index) {
+        return (index ===
+            rovingTabStop(this.options().map((option) => option.value), this.value()));
+    }
+    static ɵfac = function PrismSegmentedComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSegmentedComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSegmentedComponent, selectors: [["prism-segmented"]], viewQuery: function PrismSegmentedComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.segments, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostVars: 2, hostBindings: function PrismSegmentedComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("prism-segmented--sm", ctx.size() === "sm");
+        } }, inputs: { options: [1, "options"], value: [1, "value"], ariaLabel: [1, "ariaLabel"], size: [1, "size"] }, outputs: { value: "valueChange" }, decls: 3, vars: 1, consts: [["segment", ""], ["role", "radiogroup", 1, "prism-segmented", 3, "keydown"], ["type", "button", "role", "radio", 1, "prism-segment", 3, "prism-segment--on"], ["type", "button", "role", "radio", 1, "prism-segment", 3, "click"]], template: function PrismSegmentedComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1);
+            i0.ɵɵdomListener("keydown", function PrismSegmentedComponent_Template_div_keydown_0_listener($event) { return ctx.onKey($event); });
+            i0.ɵɵrepeaterCreate(1, PrismSegmentedComponent_For_2_Template, 3, 6, "button", 2, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel());
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.options());
+        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.prism-segmented[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 6px;\n    box-shadow: inset 0 0 0 1px var(--%NS%prism-border);\n}\n\n.prism-segment[_ngcontent-%COMP%] {\n    position: relative;\n    padding: 2px 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n    transition: color var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-segment[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-segment--on[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-bg-elevated);\n    box-shadow: var(--%NS%prism-shadow-sm);\n}\n\n.prism-segment--%NS%on[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 10px;\n    bottom: 1px;\n    left: 10px;\n    height: 1.5px;\n    content: '';\n    background: var(--%NS%prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-segment[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-segmented--sm[_nghost-%COMP%]   .prism-segment[_ngcontent-%COMP%] {\n    padding: 1px 9px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSegmentedComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-segmented', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.prism-segmented--sm]': "size() === 'sm'" }, template: "<div\n    class=\"prism-segmented\"\n    role=\"radiogroup\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onKey($event)\">\n    @for (option of options(); track option.value; let i = $index) {\n        <button\n            #segment\n            type=\"button\"\n            role=\"radio\"\n            class=\"prism-segment\"\n            [class.prism-segment--on]=\"option.value === value()\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"isFocusable(i) ? 0 : -1\"\n            [attr.title]=\"option.title ?? null\"\n            (click)=\"choose(option)\">\n            {{ option.label }}\n        </button>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.prism-segmented {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--prism-input-bg);\n    border-radius: 6px;\n    box-shadow: inset 0 0 0 1px var(--prism-border);\n}\n\n.prism-segment {\n    position: relative;\n    padding: 2px 12px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: 4px;\n    transition: color var(--dur-fast) var(--ease-default);\n}\n\n.prism-segment:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-segment--on {\n    color: var(--prism-text);\n    background: var(--prism-bg-elevated);\n    box-shadow: var(--prism-shadow-sm);\n}\n\n.prism-segment--on::after {\n    position: absolute;\n    right: 10px;\n    bottom: 1px;\n    left: 10px;\n    height: 1.5px;\n    content: '';\n    background: var(--prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-segment:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n:host(.prism-segmented--sm) .prism-segment {\n    padding: 1px 9px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n}\n"] }]
+    }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], segments: [{ type: i0.ViewChildren, args: ['segment', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSegmentedComponent, { className: "PrismSegmentedComponent", filePath: "app/shared/prism-segmented.component.ts", lineNumber: 23 }); })();

package/dist/app/shared/prism-tabs.component.d.ts

@@ -0,0 +1,44 @@
+import type { BadgeTone } from './badge.types.js';
+import * as i0 from "@angular/core";
+/** A tab's badge: `count` is a plain quantity, `issues` a number of open findings. */
+export interface PrismTabBadge {
+    kind: 'count' | 'issues';
+    text: string;
+    tone?: BadgeTone;
+    /** Read after the tab's label by assistive technology, e.g. "A11y, 1 violation". Same name as on `PanelBadge`. */
+    label: string;
+}
+export interface PrismTabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: PrismTabBadge | null;
+    title?: string;
+}
+/**
+ * The one tab bar of the chrome: variant ribbon and panel tabs (`md`), sub-tabs
+ * inside panels (`sm`).
+ *
+ * One indicator per size: `md` underlines the active tab in the brand ink, `sm`
+ * in the primary colour. Full tab semantics with a roving tabindex: arrow keys,
+ * Home and End move between tabs and select them.
+ */
+export declare class PrismTabsComponent {
+    readonly items: import("@angular/core").InputSignal<readonly PrismTabItem[]>;
+    readonly active: import("@angular/core").ModelSignal<string | null>;
+    readonly size: import("@angular/core").InputSignal<"md" | "sm">;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+    /** When set, each tab points at `<prefix><id>` through `aria-controls`. */
+    readonly panelIdPrefix: import("@angular/core").InputSignal<string | null>;
+    private readonly tabs;
+    /** The tab in the tab order: the active one, or the first when the active id matches none. */
+    protected readonly tabStop: import("@angular/core").Signal<number>;
+    constructor();
+    protected select(item: PrismTabItem): void;
+    protected onKey(event: KeyboardEvent): void;
+    protected panelId(item: PrismTabItem): string | null;
+    protected accessibleName(item: PrismTabItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismTabsComponent, "prism-tabs", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "panelIdPrefix": { "alias": "panelIdPrefix"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=prism-tabs.component.d.ts.map

package/dist/app/shared/prism-tabs.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-tabs.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-tabs.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;;AAGlD,sFAAsF;AACtF,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,qBASa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,+DAA6C;IAC3D,QAAQ,CAAC,MAAM,qDAA8B;IAC7C,QAAQ,CAAC,IAAI,mDAA4B;IACzC,QAAQ,CAAC,SAAS,qDAA8B;IAChD,2EAA2E;IAC3E,QAAQ,CAAC,aAAa,qDAA8B;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsD;IAE3E,8FAA8F;IAC9F,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAKxB;;IAUF,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAI1C,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAc3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI;IAMpD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM;yCAlD3C,kBAAkB;2CAAlB,kBAAkB;CAqD9B"}

package/dist/app/shared/prism-tabs.component.js

@@ -0,0 +1,134 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, model, viewChildren } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { nextRovingIndex, rovingTabStop } from './roving-focus.js';
+import * as i0 from "@angular/core";
+const _c0 = ["tab"];
+const _forTrack0 = ($index, $item) => $item.id;
+function PrismTabsComponent_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-icon", 4);
+} if (rf & 2) {
+    const item_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("name", item_r2.icon)("size", 13);
+} }
+function PrismTabsComponent_For_2_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const badge_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(badge_r4.text);
+} }
+function PrismTabsComponent_For_2_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const badge_r4 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-tone", badge_r4.tone ?? "danger");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(badge_r4.text);
+} }
+function PrismTabsComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismTabsComponent_For_2_Conditional_5_Conditional_0_Template, 2, 1, "span", 6)(1, PrismTabsComponent_For_2_Conditional_5_Conditional_1_Template, 2, 2, "span", 7);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.kind === "count" ? 0 : 1);
+} }
+function PrismTabsComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 3, 0);
+    i0.ɵɵlistener("click", function PrismTabsComponent_For_2_Template_button_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.select(item_r2)); });
+    i0.ɵɵconditionalCreate(2, PrismTabsComponent_For_2_Conditional_2_Template, 1, 2, "prism-icon", 4);
+    i0.ɵɵelementStart(3, "span", 5);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismTabsComponent_For_2_Conditional_5_Template, 2, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_19_0;
+    const item_r2 = ctx.$implicit;
+    const $index_r5 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-tab--active", item_r2.id === ctx_r2.active());
+    i0.ɵɵattribute("aria-selected", item_r2.id === ctx_r2.active())("tabindex", $index_r5 === ctx_r2.tabStop() ? 0 : -1)("aria-controls", ctx_r2.panelId(item_r2))("aria-label", ctx_r2.accessibleName(item_r2))("title", item_r2.title ?? null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(item_r2.icon ? 2 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_19_0 = item_r2.badge) ? 5 : -1, tmp_19_0);
+} }
+/**
+ * The one tab bar of the chrome: variant ribbon and panel tabs (`md`), sub-tabs
+ * inside panels (`sm`).
+ *
+ * One indicator per size: `md` underlines the active tab in the brand ink, `sm`
+ * in the primary colour. Full tab semantics with a roving tabindex: arrow keys,
+ * Home and End move between tabs and select them.
+ */
+export class PrismTabsComponent {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    active = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** When set, each tab points at `<prefix><id>` through `aria-controls`. */
+    panelIdPrefix = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelIdPrefix" }] : /* istanbul ignore next */ []));
+    tabs = viewChildren('tab', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** The tab in the tab order: the active one, or the first when the active id matches none. */
+    tabStop = computed(() => rovingTabStop(this.items().map((item) => item.id), this.active()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const index = this.items().findIndex((item) => item.id === this.active());
+            this.tabs()[index]?.nativeElement.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        });
+    }
+    select(item) {
+        this.active.set(item.id);
+    }
+    onKey(event) {
+        const items = this.items();
+        const current = Math.max(0, this.tabs().findIndex((tab) => tab.nativeElement === event.target));
+        const next = nextRovingIndex(current, event.key, items.length);
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.active.set(items[next].id);
+        this.tabs()[next]?.nativeElement.focus();
+    }
+    panelId(item) {
+        const prefix = this.panelIdPrefix();
+        return prefix === null ? null : prefix + item.id;
+    }
+    accessibleName(item) {
+        return item.badge ? `${item.label}, ${item.badge.label}` : item.label;
+    }
+    static ɵfac = function PrismTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismTabsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTabsComponent, selectors: [["prism-tabs"]], viewQuery: function PrismTabsComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.tabs, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostVars: 2, hostBindings: function PrismTabsComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("prism-tabs--sm", ctx.size() === "sm");
+        } }, inputs: { items: [1, "items"], active: [1, "active"], size: [1, "size"], ariaLabel: [1, "ariaLabel"], panelIdPrefix: [1, "panelIdPrefix"] }, outputs: { active: "activeChange" }, decls: 3, vars: 1, consts: [["tab", ""], ["role", "tablist", 1, "prism-tabs", 3, "keydown"], ["type", "button", "role", "tab", 1, "prism-tab", 3, "prism-tab--active"], ["type", "button", "role", "tab", 1, "prism-tab", 3, "click"], ["aria-hidden", "true", 3, "name", "size"], [1, "prism-tab__label"], ["aria-hidden", "true", 1, "prism-tab__count"], ["aria-hidden", "true", 1, "prism-tab__issues"]], template: function PrismTabsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵlistener("keydown", function PrismTabsComponent_Template_div_keydown_0_listener($event) { return ctx.onKey($event); });
+            i0.ɵɵrepeaterCreate(1, PrismTabsComponent_For_2_Template, 6, 10, "button", 2, _forTrack0);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel());
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.items());
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    min-width: 0;\n    height: 100%;\n}\n\n.prism-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: stretch;\n    min-width: 0;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.prism-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n}\n\n.prism-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    flex: none;\n    gap: 7px;\n    align-items: center;\n    padding: 0 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    transition: color var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n\n.prism-tab--%NS%active[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 8px;\n    bottom: 0;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--%NS%prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-tab[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: -2px;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-tabs--sm[_nghost-%COMP%]   .prism-tab[_ngcontent-%COMP%] {\n    gap: 6px;\n    padding: 0 10px;\n    font-size: 12.5px;\n}\n\n.prism-tabs--sm[_nghost-%COMP%]   .prism-tab--%NS%active[_ngcontent-%COMP%]::after {\n    right: 6px;\n    left: 6px;\n    height: 1.5px;\n    background: var(--%NS%prism-primary);\n}\n\n.prism-tab__count[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-tab__issues[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n    border-radius: 8px;\n}\n\n.prism-tab__issues[data-tone='danger'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n    background: var(--%NS%prism-danger-bg);\n}\n\n.prism-tab__issues[data-tone='warn'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: var(--%NS%prism-warn-bg);\n}\n\n.prism-tab__issues[data-tone='primary'][_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n    background: var(--%NS%prism-primary-bg);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTabsComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], host: { '[class.prism-tabs--sm]': "size() === 'sm'" }, template: "<div\n    class=\"prism-tabs\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onKey($event)\">\n    @for (item of items(); track item.id) {\n        <button\n            #tab\n            type=\"button\"\n            role=\"tab\"\n            class=\"prism-tab\"\n            [class.prism-tab--active]=\"item.id === active()\"\n            [attr.aria-selected]=\"item.id === active()\"\n            [attr.tabindex]=\"$index === tabStop() ? 0 : -1\"\n            [attr.aria-controls]=\"panelId(item)\"\n            [attr.aria-label]=\"accessibleName(item)\"\n            [attr.title]=\"item.title ?? null\"\n            (click)=\"select(item)\">\n            @if (item.icon) {\n                <prism-icon\n                    [name]=\"item.icon\"\n                    [size]=\"13\"\n                    aria-hidden=\"true\" />\n            }\n            <span class=\"prism-tab__label\">{{ item.label }}</span>\n            @if (item.badge; as badge) {\n                @if (badge.kind === 'count') {\n                    <span\n                        class=\"prism-tab__count\"\n                        aria-hidden=\"true\"\n                        >{{ badge.text }}</span\n                    >\n                } @else {\n                    <span\n                        class=\"prism-tab__issues\"\n                        [attr.data-tone]=\"badge.tone ?? 'danger'\"\n                        aria-hidden=\"true\"\n                        >{{ badge.text }}</span\n                    >\n                }\n            }\n        </button>\n    }\n</div>\n", styles: [":host {\n    display: flex;\n    min-width: 0;\n    height: 100%;\n}\n\n.prism-tabs {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: stretch;\n    min-width: 0;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.prism-tabs::-webkit-scrollbar {\n    display: none;\n}\n\n.prism-tab {\n    position: relative;\n    display: flex;\n    flex: none;\n    gap: 7px;\n    align-items: center;\n    padding: 0 12px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    transition: color var(--dur-fast) var(--ease-default);\n}\n\n.prism-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-tab--active {\n    color: var(--prism-text);\n}\n\n/* md: the brand ink, the one gradient a tab ever carries. */\n.prism-tab--active::after {\n    position: absolute;\n    right: 8px;\n    bottom: 0;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: var(--prism-brand-ink);\n    border-radius: 2px;\n}\n\n.prism-tab:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: -2px;\n    border-radius: var(--radius-xs);\n}\n\n:host(.prism-tabs--sm) .prism-tab {\n    gap: 6px;\n    padding: 0 10px;\n    font-size: 12.5px;\n}\n\n:host(.prism-tabs--sm) .prism-tab--active::after {\n    right: 6px;\n    left: 6px;\n    height: 1.5px;\n    background: var(--prism-primary);\n}\n\n.prism-tab__count {\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n}\n\n.prism-tab__issues {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n    border-radius: 8px;\n}\n\n.prism-tab__issues[data-tone='danger'] {\n    color: var(--prism-danger);\n    background: var(--prism-danger-bg);\n}\n\n.prism-tab__issues[data-tone='warn'] {\n    color: var(--prism-warn);\n    background: var(--prism-warn-bg);\n}\n\n.prism-tab__issues[data-tone='primary'] {\n    color: var(--prism-primary);\n    background: var(--prism-primary-bg);\n}\n"] }]
+    }], () => [], { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], panelIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelIdPrefix", required: false }] }], tabs: [{ type: i0.ViewChildren, args: ['tab', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTabsComponent, { className: "PrismTabsComponent", filePath: "app/shared/prism-tabs.component.ts", lineNumber: 40 }); })();

package/dist/app/shared/roving-focus.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Where a roving focus moves for a key, following the WAI-ARIA tabs and radio
+ * group patterns: arrows step and wrap, Home and End jump to the ends. `null`
+ * when the key does not move focus.
+ */
+export declare function nextRovingIndex(current: number, key: string, count: number): number | null;
+/**
+ * The one item of a roving group that is in the tab order: the active one, or
+ * the first when nothing matches (the active panel was filtered out, or no
+ * value is set), so the group can always be reached. `-1` for an empty group.
+ */
+export declare function rovingTabStop<T>(values: readonly T[], active: T | null): number;
+//# sourceMappingURL=roving-focus.d.ts.map

package/dist/app/shared/roving-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-focus.d.ts","sourceRoot":"","sources":["../../../src/app/shared/roving-focus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgB1F;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,GAAG,MAAM,CAK/E"}

package/dist/app/shared/roving-focus.js

@@ -0,0 +1,34 @@
+/**
+ * Where a roving focus moves for a key, following the WAI-ARIA tabs and radio
+ * group patterns: arrows step and wrap, Home and End jump to the ends. `null`
+ * when the key does not move focus.
+ */
+export function nextRovingIndex(current, key, count) {
+    if (count <= 0)
+        return null;
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            return (current + 1) % count;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            return (current - 1 + count) % count;
+        case 'Home':
+            return 0;
+        case 'End':
+            return count - 1;
+        default:
+            return null;
+    }
+}
+/**
+ * The one item of a roving group that is in the tab order: the active one, or
+ * the first when nothing matches (the active panel was filtered out, or no
+ * value is set), so the group can always be reached. `-1` for an empty group.
+ */
+export function rovingTabStop(values, active) {
+    if (values.length === 0)
+        return -1;
+    const index = active === null ? -1 : values.indexOf(active);
+    return index < 0 ? 0 : index;
+}

package/dist/app/shell/prism-shell.component.d.ts

@@ -7,9 +7,22 @@ export declare class PrismShellComponent {
     protected readonly navigationService: PrismNavigationService;
     private readonly themeService;
     protected readonly layout: PrismLayoutService;
+    protected readonly sidebarBounds: {
+        readonly min: 200;
+        readonly max: 360;
+        readonly default: 280;
+    };
+    protected readonly panelBounds: {
+        readonly min: 200;
+        readonly max: 560;
+        readonly default: 300;
+    };
     protected readonly panelService: PrismPanelService;
     private readonly urlStateService;
     private readonly persistenceService;
+    private readonly variantBg;
+    /** Overlays on the canvas follow its ground: light and dark are absolute, the others follow the theme. */
+    protected readonly overlayTokens: import("@angular/core").Signal<Record<string, string>>;
     protected readonly viewPanels: import("@angular/core").Signal<import("../../plugin/plugin.types.js").PanelDefinition[]>;
     protected readonly showPanel: import("@angular/core").Signal<boolean>;
     protected readonly shellStyle: import("@angular/core").Signal<string>;

package/dist/app/shell/prism-shell.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAWvE,qBAsBa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAA0I;IAEtK,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;;IAmCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCApDlC,mBAAmB;2CAAnB,mBAAmB;CAwE/B"}
+{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAgB,kBAAkB,EAAiB,MAAM,qCAAqC,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAcvE,qBAuBa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,aAAa;;;;MAAiB;IACjD,SAAS,CAAC,QAAQ,CAAC,WAAW;;;;MAAgB;IAC9C,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IACtE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,0GAA0G;IAC1G,SAAS,CAAC,QAAQ,CAAC,aAAa,yDAAmE;IAEnG,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAA0I;IAEtK,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;;IAwCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCA/DlC,mBAAmB;2CAAnB,mBAAmB;CAmF/B"}