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

package/dist/app/theme/prism-default-theme.js

@@ -1,70 +1,125 @@
+/*
+ * The brand gradient from the 22.7 logo. One value in both themes: the
+ * wordmark sits on the navy header band in either, and the brand guide asks for
+ * an identical gradient across themes.
+ */
+const BRAND_GRADIENT = 'linear-gradient(90deg, #00CFEA 0%, #078BFA 38%, #244BFF 68%, #A20CF0 100%)';
+/*
+ * Deprecated since 22.7.0, removed in 23.0.0: `--prism-spectrum`,
+ * `--prism-primary-from`, `--prism-primary-to` and the three `--prism-mark-*`
+ * roles. Core no longer reads them; they stay defined (the marks as aliases of
+ * the status colours) so a consuming stylesheet that does keeps working.
+ */
+const DEPRECATED_ALIASES = {
+    '--prism-mark-nominal': 'var(--prism-success)',
+    '--prism-mark-attention': 'var(--prism-warn)',
+    '--prism-mark-critical': 'var(--prism-danger)',
+    '--prism-spectrum': 'var(--prism-brand-gradient)',
+    '--prism-primary-from': '#2563eb',
+    '--prism-primary-to': '#00cfea'
+};
 export const PRISM_DARK_THEME = {
-    '--prism-code-tag': '#f472b6',
-    '--prism-code-attr': '#60a5fa',
+    '--prism-code-tag': '#e879f9',
+    '--prism-code-attr': '#67e8f9',
     '--prism-code-str': '#86efac',
-    '--prism-code-com': '#6a5d87',
-    '--prism-void': '#07050f',
-    '--prism-bg': '#0d0b1c',
-    '--prism-bg-surface': '#131022',
-    '--prism-bg-elevated': '#1a1535',
-    '--prism-stage': '#16122b',
-    '--prism-stage-edge': 'rgba(255, 255, 255, 0.10)',
-    '--prism-text': '#ede9f8',
-    '--prism-text-2': '#b0a6c8',
-    '--prism-text-muted': '#8476a2',
-    '--prism-text-ghost': '#6a5d87',
-    '--prism-primary': '#a78bfa',
-    '--prism-primary-from': '#7c3aed',
-    '--prism-primary-to': '#3b82f6',
-    '--prism-accent': '#ec4899',
-    '--prism-border': 'rgba(255, 255, 255, 0.08)',
-    '--prism-border-strong': 'rgba(255, 255, 255, 0.16)',
-    '--prism-glow': 'rgba(139, 92, 246, 0.18)',
-    '--prism-glow-strong': 'rgba(139, 92, 246, 0.35)',
-    '--prism-input-bg': 'rgba(255, 255, 255, 0.05)',
-    '--prism-dot': 'rgba(167, 139, 250, 0.18)',
-    '--prism-success': '#34d399',
-    '--prism-warn': '#fbbf24',
-    '--prism-danger': '#f87171',
-    '--prism-mark-nominal': '#34d399',
-    '--prism-mark-attention': '#e8a33d',
-    '--prism-mark-critical': '#e5484d',
+    '--prism-code-com': '#7c8ba1',
+    '--prism-void': '#050911',
+    '--prism-bg': '#080d19',
+    '--prism-bg-surface': '#111827',
+    '--prism-bg-elevated': '#1a2335',
+    '--prism-stage': '#0e1524',
+    '--prism-stage-edge': 'rgba(255, 255, 255, 0.08)',
+    '--prism-text': '#f1f5f9',
+    '--prism-text-2': '#cbd5e1',
+    '--prism-text-muted': '#94a3b8',
+    '--prism-text-ghost': '#64748b',
+    /* Text and indicator blue; brand blue #2563eb only reaches 3–3.9:1 as text here. */
+    '--prism-primary': '#60a5fa',
+    '--prism-primary-fill': '#2563eb',
+    '--prism-primary-fill-hover': '#1d4ed8',
+    '--prism-on-primary': '#ffffff',
+    /* The active switch track: the blue half of the brand light, ending on the fill blue so it holds 3:1 on these surfaces. */
+    '--prism-toggle-on': 'linear-gradient(90deg, #078bfa, #2563eb)',
+    '--prism-link': 'var(--prism-primary)',
+    '--prism-accent': '#a78bfa',
+    '--prism-border': '#1f2b3e',
+    '--prism-border-strong': '#64748b',
+    '--prism-glow': 'rgba(37, 99, 235, 0.18)',
+    '--prism-glow-strong': 'rgba(37, 99, 235, 0.35)',
+    '--prism-input-bg': 'rgba(148, 163, 184, 0.08)',
+    '--prism-dot': 'rgba(96, 165, 250, 0.16)',
+    '--prism-success': '#0ae2cb',
+    '--prism-warn': '#ffb984',
+    '--prism-danger': '#fe6ba6',
+    '--prism-success-bg': 'color-mix(in srgb, var(--prism-success) 16%, transparent)',
+    '--prism-warn-bg': 'color-mix(in srgb, var(--prism-warn) 16%, transparent)',
+    '--prism-danger-bg': 'color-mix(in srgb, var(--prism-danger) 16%, transparent)',
+    '--prism-primary-bg': 'color-mix(in srgb, var(--prism-primary) 16%, transparent)',
+    '--prism-brand-gradient': BRAND_GRADIENT,
+    '--prism-brand-ink': 'var(--prism-brand-gradient)',
+    '--prism-brand-glow': 'radial-gradient(closest-side at 22% 55%, rgba(0, 207, 234, 0.22), transparent), radial-gradient(closest-side at 55% 50%, rgba(36, 75, 255, 0.2), transparent), radial-gradient(closest-side at 85% 50%, rgba(162, 12, 240, 0.18), transparent)',
+    '--prism-facet-cyan': '#22d3ee',
+    '--prism-facet-blue': '#60a5fa',
+    '--prism-facet-violet': '#a78bfa',
+    '--prism-facet-magenta': '#e879f9',
+    '--prism-shadow-sm': '0 1px 2px rgb(0 0 0 / 35%)',
+    '--prism-shadow-md': '0 8px 28px -10px rgb(0 0 0 / 65%)',
     '--prism-measure': '#f632ff',
-    '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))'
+    ...DEPRECATED_ALIASES
 };
 export const PRISM_LIGHT_THEME = {
-    '--prism-code-tag': '#be185d',
-    '--prism-code-attr': '#1d4ed8',
-    '--prism-code-str': '#047857',
-    '--prism-code-com': '#6b5e80',
-    '--prism-void': '#f7f5fc',
-    '--prism-bg': '#ffffff',
-    '--prism-bg-surface': '#faf9fd',
+    '--prism-code-tag': '#a21caf',
+    '--prism-code-attr': '#0e7490',
+    '--prism-code-str': '#127a3a',
+    '--prism-code-com': '#5b6b80',
+    '--prism-void': '#eef2f7',
+    '--prism-bg': '#f1f5f9',
+    '--prism-bg-surface': '#ffffff',
     '--prism-bg-elevated': '#ffffff',
-    '--prism-stage': '#ffffff',
-    '--prism-stage-edge': 'rgba(28, 21, 48, 0.14)',
-    '--prism-text': '#1c1530',
-    '--prism-text-2': '#4d4266',
-    '--prism-text-muted': '#6b5e80',
-    '--prism-text-ghost': '#b0a6c8',
-    '--prism-primary': '#7c3aed',
-    '--prism-primary-from': '#7c3aed',
-    '--prism-primary-to': '#3b82f6',
-    '--prism-accent': '#db2777',
-    '--prism-border': 'rgba(28, 21, 48, 0.08)',
-    '--prism-border-strong': 'rgba(28, 21, 48, 0.16)',
-    '--prism-glow': 'rgba(124, 58, 237, 0.12)',
-    '--prism-glow-strong': 'rgba(124, 58, 237, 0.25)',
-    '--prism-input-bg': 'rgba(28, 21, 48, 0.04)',
-    '--prism-dot': 'rgba(124, 58, 237, 0.2)',
-    '--prism-success': '#047857',
-    '--prism-warn': '#8f6b00',
-    '--prism-danger': '#951226',
-    '--prism-mark-nominal': '#047857',
-    '--prism-mark-attention': '#8f6b00',
-    '--prism-mark-critical': '#951226',
+    '--prism-stage': '#fafbfd',
+    '--prism-stage-edge': 'rgba(15, 23, 42, 0.10)',
+    '--prism-text': '#0f172a',
+    '--prism-text-2': '#334155',
+    '--prism-text-muted': '#5b6b80',
+    '--prism-text-ghost': '#94a3b8',
+    /* Brand blue as fill; the text role takes its hover shade, which holds on tints too. */
+    '--prism-primary': '#1d4ed8',
+    '--prism-primary-fill': '#2563eb',
+    '--prism-primary-fill-hover': '#1d4ed8',
+    '--prism-on-primary': '#ffffff',
+    /* The active switch track: the blue half of the brand light. */
+    '--prism-toggle-on': 'linear-gradient(90deg, #078bfa, #244bff)',
+    '--prism-link': 'var(--prism-primary)',
+    '--prism-accent': '#7c3aed',
+    '--prism-border': '#e2e8f0',
+    '--prism-border-strong': '#7b8aa0',
+    '--prism-glow': 'rgba(37, 99, 235, 0.12)',
+    '--prism-glow-strong': 'rgba(37, 99, 235, 0.25)',
+    '--prism-input-bg': 'rgba(15, 23, 42, 0.04)',
+    '--prism-dot': 'rgba(37, 99, 235, 0.14)',
+    /*
+     * Dark text on a tint taken from a vivid shade of the same hue: tinting the
+     * dark text colour itself reads olive and wine-red.
+     */
+    '--prism-success': '#06776a',
+    '--prism-warn': '#a05602',
+    '--prism-danger': '#8e024d',
+    '--prism-success-bg': 'color-mix(in srgb, #0edbc5 14%, transparent)',
+    '--prism-warn-bg': 'color-mix(in srgb, #ffa65f 14%, transparent)',
+    '--prism-danger-bg': 'color-mix(in srgb, #ff7cad 14%, transparent)',
+    '--prism-primary-bg': 'color-mix(in srgb, var(--prism-primary-fill) 10%, transparent)',
+    '--prism-brand-gradient': BRAND_GRADIENT,
+    /* The same sequence in deeper steps: #00cfea is 1.8:1 on this chrome, an indicator needs 3:1. */
+    '--prism-brand-ink': 'linear-gradient(90deg, #0891b2 0%, #2563eb 38%, #6d28d9 68%, #a20cf0 100%)',
+    '--prism-brand-glow': 'radial-gradient(closest-side at 22% 55%, rgba(0, 207, 234, 0.2), transparent), radial-gradient(closest-side at 55% 50%, rgba(36, 75, 255, 0.14), transparent), radial-gradient(closest-side at 85% 50%, rgba(162, 12, 240, 0.14), transparent)',
+    '--prism-facet-cyan': '#0891b2',
+    '--prism-facet-blue': '#2563eb',
+    '--prism-facet-violet': '#7c3aed',
+    '--prism-facet-magenta': '#c026d3',
+    '--prism-shadow-sm': '0 1px 2px rgb(15 23 42 / 12%)',
+    '--prism-shadow-md': '0 10px 30px -12px rgb(15 23 42 / 28%), 0 2px 6px -2px rgb(15 23 42 / 10%)',
     '--prism-measure': '#ca00c1',
-    '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))'
+    ...DEPRECATED_ALIASES
 };
 export const PRISM_BASE_TOKENS = {
     '--font-sans': "'Inter', system-ui, sans-serif",
@@ -91,13 +146,14 @@ export const PRISM_BASE_TOKENS = {
     '--dur-base': '0.2s',
     '--dur-slow': '0.3s',
     /**
-     * Chrome density. Set on the shell host, so a consuming app can compact or
-     * loosen the entire interface from CSS alone:
+     * Chrome density. A consuming app compacts or loosens the entire interface
+     * with one token in ng-prism.config.ts:
      *
-     *   prism-shell { --density: .8 }
+     *   theme: { '--density': '0.8' }
      *
-     * There is no signal, service or menu behind this. The whole
-     * control surface is the custom property.
+     * The band heights below resolve it on <html>, where every token is set,
+     * so a --density on a descendant such as prism-shell doesn't reach them.
+     * There is no signal, service or menu behind this.
      */
     '--density': '1',
     '--band-header': 'calc(40px * var(--density))',
@@ -106,7 +162,7 @@ export const PRISM_BASE_TOKENS = {
     '--band-tabs': 'calc(34px * var(--density))',
     '--prism-void-light': '#f7f5fc',
     '--prism-void-dark': '#07050f',
-    '--prism-text-light': '#ede9f8',
+    '--prism-text-light': '#f1f5f9',
     /**
      * Kept as an alias rather than removed: it is exported through
      * PRISM_BASE_TOKENS, so a consuming stylesheet may reference it even though

package/dist/app/theme/resolve-theme-tokens.d.ts

@@ -0,0 +1,29 @@
+/** The three theme options of `NgPrismConfig`, as the theme service receives them. */
+export interface ThemeOverrides {
+    theme?: Record<string, string>;
+    darkTheme?: Record<string, string>;
+    lightTheme?: Record<string, string>;
+}
+export interface ResolvedTheme {
+    /** Every token for one mode, ready to be set as custom properties. */
+    tokens: Record<string, string>;
+    /** Deprecated tokens the user overrode, so the caller can warn once about each. */
+    deprecatedOverrides: string[];
+}
+/**
+ * All tokens for one mode: base tokens, the mode's theme, the user's
+ * mode-specific overrides, then the user's `theme` overrides, which win.
+ *
+ * Some overrides are carried further than the key they name. A `--prism-mark-*`
+ * override lands on its successor unless that one is overridden too. An
+ * override of `--prism-primary` pulls `--prism-primary-fill`, its hover and the
+ * indicator ink (`--prism-brand-ink`, the tab and sidebar strokes) along: since
+ * 22.7 those read their own tokens, and a user who recolours the primary would
+ * otherwise get blue buttons and gradient tabs next to links in their colour.
+ * The active toggle track follows the fill, whether the fill was overridden
+ * itself or came along with the primary. Whatever the user sets explicitly wins.
+ *
+ * Pure, so the header can ask for the dark set while the app runs light.
+ */
+export declare function resolveThemeTokens(mode: 'dark' | 'light', overrides: ThemeOverrides): ResolvedTheme;
+//# sourceMappingURL=resolve-theme-tokens.d.ts.map

package/dist/app/theme/resolve-theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/theme/resolve-theme-tokens.ts"],"names":[],"mappings":"AAGA,sFAAsF;AACtF,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,aAAa;IAC1B,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,mFAAmF;IACnF,mBAAmB,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,SAAS,EAAE,cAAc,GAAG,aAAa,CAyBnG"}

package/dist/app/theme/resolve-theme-tokens.js

@@ -0,0 +1,43 @@
+import { DEPRECATED_THEME_TOKENS } from './deprecated-tokens.js';
+import { PRISM_BASE_TOKENS, PRISM_DARK_THEME, PRISM_LIGHT_THEME } from './prism-default-theme.js';
+/**
+ * All tokens for one mode: base tokens, the mode's theme, the user's
+ * mode-specific overrides, then the user's `theme` overrides, which win.
+ *
+ * Some overrides are carried further than the key they name. A `--prism-mark-*`
+ * override lands on its successor unless that one is overridden too. An
+ * override of `--prism-primary` pulls `--prism-primary-fill`, its hover and the
+ * indicator ink (`--prism-brand-ink`, the tab and sidebar strokes) along: since
+ * 22.7 those read their own tokens, and a user who recolours the primary would
+ * otherwise get blue buttons and gradient tabs next to links in their colour.
+ * The active toggle track follows the fill, whether the fill was overridden
+ * itself or came along with the primary. Whatever the user sets explicitly wins.
+ *
+ * Pure, so the header can ask for the dark set while the app runs light.
+ */
+export function resolveThemeTokens(mode, overrides) {
+    const modeTheme = mode === 'dark' ? PRISM_DARK_THEME : PRISM_LIGHT_THEME;
+    const modeOverrides = (mode === 'dark' ? overrides.darkTheme : overrides.lightTheme) ?? {};
+    const user = { ...modeOverrides, ...overrides.theme };
+    const tokens = { ...PRISM_BASE_TOKENS, ...modeTheme, ...user };
+    const deprecatedOverrides = [];
+    // Core reads only the successors, so a carried token's override lands on its
+    // successor to keep working until the token is removed.
+    for (const [token, { successor, carried }] of Object.entries(DEPRECATED_THEME_TOKENS)) {
+        if (!(token in user))
+            continue;
+        deprecatedOverrides.push(token);
+        if (carried && !(successor in user))
+            tokens[successor] = user[token];
+    }
+    if ('--prism-primary' in user) {
+        for (const role of ['--prism-primary-fill', '--prism-primary-fill-hover', '--prism-brand-ink']) {
+            if (!(role in user))
+                tokens[role] = user['--prism-primary'];
+        }
+    }
+    if (('--prism-primary' in user || '--prism-primary-fill' in user) && !('--prism-toggle-on' in user)) {
+        tokens['--prism-toggle-on'] = tokens['--prism-primary-fill'];
+    }
+    return { tokens, deprecatedOverrides };
+}

package/dist/app/variant-ribbon/prism-variant-ribbon.component.d.ts

@@ -1,16 +1,13 @@
 import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { type PrismTabItem } from '../shared/prism-tabs.component.js';
 import * as i0 from "@angular/core";
 export declare class PrismVariantRibbonComponent {
     private readonly navigationService;
     protected readonly rendererService: PrismRendererService;
-    private readonly tabsContainer;
-    private readonly tabButtons;
     protected readonly variants: import("@angular/core").Signal<import("../../index.js").Variant<unknown>[]>;
-    constructor();
-    protected slot(index: number): {
-        i: number;
-        n: number;
-    };
+    /** One tab per variant, keyed by index: names need not be unique. */
+    protected readonly tabItems: import("@angular/core").Signal<PrismTabItem[]>;
+    protected select(id: string | null): void;
     protected prev(): void;
     protected next(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismVariantRibbonComponent, never>;

package/dist/app/variant-ribbon/prism-variant-ribbon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-variant-ribbon.component.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/prism-variant-ribbon.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuD;IACrF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4D;IAEvF,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAIxB;;IAuBH,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAIvD,SAAS,CAAC,IAAI,IAAI,IAAI;IAMtB,SAAS,CAAC,IAAI,IAAI,IAAI;yCA5Cb,2BAA2B;2CAA3B,2BAA2B;CAiDvC"}
+{"version":3,"file":"prism-variant-ribbon.component.d.ts","sourceRoot":"","sources":["../../../src/app/variant-ribbon/prism-variant-ribbon.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,mCAAmC,CAAC;;AAE1F,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAIxB;IAEH,qEAAqE;IACrE,SAAS,CAAC,QAAQ,CAAC,QAAQ,iDAAqG;IAEhI,SAAS,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIzC,SAAS,CAAC,IAAI,IAAI,IAAI;IAMtB,SAAS,CAAC,IAAI,IAAI,IAAI;yCAvBb,2BAA2B;2CAA3B,2BAA2B;CA4BvC"}

package/dist/app/variant-ribbon/prism-variant-ribbon.component.js

@@ -1,86 +1,52 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, viewChild, viewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
-import { spectrumSlot } from './spectrum.js';
+import { PrismIconButtonComponent } from '../shared/prism-icon-button.component.js';
+import { PrismTabsComponent } from '../shared/prism-tabs.component.js';
 import * as i0 from "@angular/core";
-const _c0 = ["tabsContainer"];
-const _c1 = ["tabButton"];
-const _forTrack0 = ($index, $item) => $item.name;
-function PrismVariantRibbonComponent_Conditional_0_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 10, 1);
-    i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_For_4_Template_button_click_0_listener() { const ɵ$index_6_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.rendererService.selectVariant(ɵ$index_6_r3)); });
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const v_r5 = ctx.$implicit;
-    const ɵ$index_6_r3 = ctx.$index;
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--%NS%i", ctx_r3.slot(ɵ$index_6_r3).i)("--%NS%n", ctx_r3.slot(ɵ$index_6_r3).n);
-    i0.ɵɵclassProp("v-tab--active", ctx_r3.rendererService.activeVariantIndex() === ɵ$index_6_r3);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", v_r5.name, " ");
-} }
 function PrismVariantRibbonComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "nav", 2)(1, "div", 3, 0);
-    i0.ɵɵrepeaterCreate(3, PrismVariantRibbonComponent_Conditional_0_For_4_Template, 3, 7, "button", 4, _forTrack0);
+    i0.ɵɵelementStart(0, "nav", 0)(1, "prism-tabs", 1);
+    i0.ɵɵlistener("activeChange", function PrismVariantRibbonComponent_Conditional_0_Template_prism_tabs_activeChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.select($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
-    i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.prev()); });
-    i0.ɵɵelement(7, "prism-icon", 7);
+    i0.ɵɵelementStart(2, "div", 2)(3, "button", 3);
+    i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.prev()); });
+    i0.ɵɵelement(4, "prism-icon", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 8);
-    i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.next()); });
-    i0.ɵɵelement(9, "prism-icon", 9);
+    i0.ɵɵelementStart(5, "button", 5);
+    i0.ɵɵlistener("click", function PrismVariantRibbonComponent_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.next()); });
+    i0.ɵɵelement(6, "prism-icon", 6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r3.variants());
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r3.rendererService.activeVariantIndex() === 0);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("items", ctx_r1.tabItems())("active", "" + ctx_r1.rendererService.activeVariantIndex());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.rendererService.activeVariantIndex() === 0);
+    i0.ɵɵattribute("aria-disabled", ctx_r1.rendererService.activeVariantIndex() === 0);
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 14);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r3.rendererService.activeVariantIndex() >= ctx_r3.variants().length - 1);
+    i0.ɵɵproperty("disabled", ctx_r1.rendererService.activeVariantIndex() >= ctx_r1.variants().length - 1);
+    i0.ɵɵattribute("aria-disabled", ctx_r1.rendererService.activeVariantIndex() >= ctx_r1.variants().length - 1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 14);
 } }
 export class PrismVariantRibbonComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
-    tabsContainer = viewChild('tabsContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabsContainer" }] : /* istanbul ignore next */ []));
-    tabButtons = viewChildren('tabButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
     variants = computed(() => {
         const comp = this.navigationService.activeComponent();
         return comp?.meta.showcaseConfig.variants ?? [];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const idx = this.rendererService.activeVariantIndex();
-            const container = this.tabsContainer()?.nativeElement;
-            const button = this.tabButtons()[idx]?.nativeElement;
-            if (!container || !button)
-                return;
-            const buttonLeft = button.offsetLeft;
-            const buttonRight = buttonLeft + button.offsetWidth;
-            const viewLeft = container.scrollLeft;
-            const viewRight = viewLeft + container.clientWidth;
-            if (buttonLeft < viewLeft) {
-                container.scrollLeft = buttonLeft;
-            }
-            else if (buttonRight > viewRight) {
-                container.scrollLeft = buttonRight - container.clientWidth;
-            }
-        });
-    }
-    slot(index) {
-        return spectrumSlot(index, this.variants().length);
+    /** One tab per variant, keyed by index: names need not be unique. */
+    tabItems = computed(() => this.variants().map((v, i) => ({ id: String(i), label: v.name })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    select(id) {
+        if (id !== null)
+            this.rendererService.selectVariant(Number(id));
     }
     prev() {
         const idx = this.rendererService.activeVariantIndex();
@@ -93,18 +59,14 @@ export class PrismVariantRibbonComponent {
             this.rendererService.selectVariant(idx + 1);
     }
     static ɵfac = function PrismVariantRibbonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismVariantRibbonComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismVariantRibbonComponent, selectors: [["prism-variant-ribbon"]], viewQuery: function PrismVariantRibbonComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.tabsContainer, _c0, 5)(ctx.tabButtons, _c1, 5);
-        } if (rf & 2) {
-            i0.ɵɵqueryAdvance(2);
-        } }, decls: 1, vars: 1, consts: [["tabsContainer", ""], ["tabButton", ""], [1, "variant-ribbon"], [1, "variant-ribbon-tabs"], [1, "v-tab", 3, "v-tab--active", "--%NS%i", "--%NS%n"], [1, "variant-ribbon-right"], ["title", "Previous variant", "aria-label", "Previous variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["title", "Next variant", "aria-label", "Next variant", 1, "tool-btn", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"], [1, "v-tab", 3, "click"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismVariantRibbonComponent_Conditional_0_Template, 10, 4, "nav", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismVariantRibbonComponent, selectors: [["prism-variant-ribbon"]], decls: 1, vars: 1, consts: [["aria-label", "Variants", 1, "variant-ribbon"], ["ariaLabel", "Variants", 1, "variant-ribbon-tabs", 3, "activeChange", "items", "active"], [1, "variant-ribbon-right"], ["prismIconButton", "", "size", "xs", "title", "Previous variant", "aria-label", "Previous variant", 3, "click", "disabled"], ["name", "chevron-right", 2, "transform", "rotate(180deg)", 3, "size"], ["prismIconButton", "", "size", "xs", "title", "Next variant", "aria-label", "Next variant", 3, "click", "disabled"], ["name", "chevron-right", 3, "size"]], template: function PrismVariantRibbonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismVariantRibbonComponent_Conditional_0_Template, 7, 8, "nav", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.variants().length > 0 ? 0 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    height: var(--%NS%band-rail);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.variant-ribbon-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: center;\n    min-width: 0;\n    height: 100%;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.variant-ribbon-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n}\n\n.v-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 100%;\n    padding: 0 14px;\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: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n\n\n\n.v-tab[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: var(--%NS%sp-3);\n    bottom: 0;\n    left: var(--%NS%sp-3);\n    height: 2px;\n    content: '';\n    background: var(--%NS%prism-spectrum);\n    background-position: calc(var(--%NS%i) / (var(--%NS%n) - 1) * 100%) 0;\n    background-size: calc(var(--%NS%n) * 100%) 100%;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.v-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.v-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.v-tab--%NS%active[_ngcontent-%COMP%]::after {\n    opacity: 1;\n}\n\n.v-tab[_ngcontent-%COMP%]:hover::after {\n    opacity: 0.4;\n}\n\n.variant-ribbon-right[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--%NS%prism-border);\n}\n\n.tool-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm);\n    transition: all var(--%NS%dur-fast);\n}\n\n.tool-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n}\n\n.tool-btn[_ngcontent-%COMP%]:disabled {\n    cursor: default;\n    opacity: 0.3;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
+        } }, dependencies: [PrismIconComponent, PrismTabsComponent, PrismIconButtonComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    height: var(--%NS%band-rail);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.variant-ribbon-tabs[_ngcontent-%COMP%] {\n    flex: 1;\n    align-self: stretch;\n    min-width: 0;\n    margin-left: -8px;\n}\n\n.variant-ribbon-right[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--%NS%prism-border);\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismVariantRibbonComponent, [{
         type: Component,
-        args: [{ selector: 'prism-variant-ribbon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "@if (variants().length > 0) {\n    <nav class=\"variant-ribbon\">\n        <div\n            class=\"variant-ribbon-tabs\"\n            #tabsContainer>\n            @for (v of variants(); track v.name; let i = $index) {\n                <button\n                    #tabButton\n                    class=\"v-tab\"\n                    [class.v-tab--active]=\"rendererService.activeVariantIndex() === i\"\n                    [style.--i]=\"slot(i).i\"\n                    [style.--n]=\"slot(i).n\"\n                    (click)=\"rendererService.selectVariant(i)\">\n                    {{ v.name }}\n                </button>\n            }\n        </div>\n        <div class=\"variant-ribbon-right\">\n            <button\n                class=\"tool-btn\"\n                title=\"Previous variant\"\n                aria-label=\"Previous variant\"\n                [disabled]=\"rendererService.activeVariantIndex() === 0\"\n                (click)=\"prev()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\"\n                    style=\"transform: rotate(180deg)\" />\n            </button>\n            <button\n                class=\"tool-btn\"\n                title=\"Next variant\"\n                aria-label=\"Next variant\"\n                [disabled]=\"rendererService.activeVariantIndex() >= variants().length - 1\"\n                (click)=\"next()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\" />\n            </button>\n        </div>\n    </nav>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon {\n    display: flex;\n    align-items: center;\n    height: var(--band-rail);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.variant-ribbon-tabs {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    align-items: center;\n    min-width: 0;\n    height: 100%;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.variant-ribbon-tabs::-webkit-scrollbar {\n    display: none;\n}\n\n.v-tab {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 100%;\n    padding: 0 14px;\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: none;\n    transition: color var(--dur-fast);\n}\n\n/* Colour as position, not assignment: each tab shows the slice of one\n   broken spectrum that corresponds to where it sits in the sequence. Nine\n   arbitrary hues used to say nothing at all; this says \"you are here\". */\n.v-tab::after {\n    position: absolute;\n    right: var(--sp-3);\n    bottom: 0;\n    left: var(--sp-3);\n    height: 2px;\n    content: '';\n    background: var(--prism-spectrum);\n    background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;\n    background-size: calc(var(--n) * 100%) 100%;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity var(--dur-fast) var(--ease-default);\n}\n\n.v-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.v-tab--active {\n    color: var(--prism-text);\n}\n\n.v-tab--active::after {\n    opacity: 1;\n}\n\n.v-tab:hover::after {\n    opacity: 0.4;\n}\n\n.variant-ribbon-right {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--prism-border);\n}\n\n.tool-btn {\n    display: grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm);\n    transition: all var(--dur-fast);\n}\n\n.tool-btn:hover:not(:disabled) {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n}\n\n.tool-btn:disabled {\n    cursor: default;\n    opacity: 0.3;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
-    }], () => [], { tabsContainer: [{ type: i0.ViewChild, args: ['tabsContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismVariantRibbonComponent, { className: "PrismVariantRibbonComponent", filePath: "app/variant-ribbon/prism-variant-ribbon.component.ts", lineNumber: 15 }); })();
+        args: [{ selector: 'prism-variant-ribbon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismTabsComponent, PrismIconButtonComponent], template: "@if (variants().length > 0) {\n    <nav\n        class=\"variant-ribbon\"\n        aria-label=\"Variants\">\n        <prism-tabs\n            class=\"variant-ribbon-tabs\"\n            ariaLabel=\"Variants\"\n            [items]=\"tabItems()\"\n            [active]=\"'' + rendererService.activeVariantIndex()\"\n            (activeChange)=\"select($event)\" />\n        <div class=\"variant-ribbon-right\">\n            <button\n                prismIconButton\n                size=\"xs\"\n                title=\"Previous variant\"\n                aria-label=\"Previous variant\"\n                [disabled]=\"rendererService.activeVariantIndex() === 0\"\n                [attr.aria-disabled]=\"rendererService.activeVariantIndex() === 0\"\n                (click)=\"prev()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\"\n                    style=\"transform: rotate(180deg)\" />\n            </button>\n            <button\n                prismIconButton\n                size=\"xs\"\n                title=\"Next variant\"\n                aria-label=\"Next variant\"\n                [disabled]=\"rendererService.activeVariantIndex() >= variants().length - 1\"\n                [attr.aria-disabled]=\"rendererService.activeVariantIndex() >= variants().length - 1\"\n                (click)=\"next()\">\n                <prism-icon\n                    name=\"chevron-right\"\n                    [size]=\"14\" />\n            </button>\n        </div>\n    </nav>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.variant-ribbon {\n    display: flex;\n    align-items: center;\n    height: var(--band-rail);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.variant-ribbon-tabs {\n    flex: 1;\n    align-self: stretch;\n    min-width: 0;\n    margin-left: -8px;\n}\n\n.variant-ribbon-right {\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    height: 24px;\n    padding-left: 12px;\n    margin-left: 12px;\n    border-left: 1px solid var(--prism-border);\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismVariantRibbonComponent, { className: "PrismVariantRibbonComponent", filePath: "app/variant-ribbon/prism-variant-ribbon.component.ts", lineNumber: 16 }); })();

package/dist/app/view-tab-bar/next-view-id.d.ts

@@ -1,4 +1,5 @@
 import type { PanelDefinition } from '../../plugin/plugin.types.js';
+import type { PanelTarget } from '../../plugin/service.types.js';
 /**
  * The view to switch to, or `null` when the active one still stands.
  *
@@ -7,6 +8,11 @@ import type { PanelDefinition } from '../../plugin/plugin.types.js';
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.
+ *
+ * A service or a pipe has no Playground, so on those pages the rule has no
+ * `renderer` to fall back to: an active view that is not offered, `renderer`
+ * included, gives way to the first panel the page does offer, or to nothing
+ * when it offers none.
  */
-export declare function nextViewId(activeViewId: string, visibleViewPanels: readonly PanelDefinition[]): string | null;
+export declare function nextViewId(activeViewId: string, visibleViewPanels: readonly PanelDefinition[], target?: PanelTarget): string | null;
 //# sourceMappingURL=next-view-id.d.ts.map

package/dist/app/view-tab-bar/next-view-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-view-id.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/next-view-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,iBAAiB,EAAE,SAAS,eAAe,EAAE,GAAG,MAAM,GAAG,IAAI,CAG7G"}
+{"version":3,"file":"next-view-id.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/next-view-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,iBAAiB,EAAE,SAAS,eAAe,EAAE,EAAE,MAAM,GAAE,WAAyB,GAAG,MAAM,GAAG,IAAI,CAMhJ"}

package/dist/app/view-tab-bar/next-view-id.js

@@ -6,8 +6,16 @@
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.
+ *
+ * A service or a pipe has no Playground, so on those pages the rule has no
+ * `renderer` to fall back to: an active view that is not offered, `renderer`
+ * included, gives way to the first panel the page does offer, or to nothing
+ * when it offers none.
  */
-export function nextViewId(activeViewId, visibleViewPanels) {
+export function nextViewId(activeViewId, visibleViewPanels, target = 'component') {
+    if (target !== 'component') {
+        return visibleViewPanels.some((p) => p.id === activeViewId) ? null : (visibleViewPanels[0]?.id ?? null);
+    }
     if (activeViewId === 'renderer')
         return null;
     return visibleViewPanels.some((p) => p.id === activeViewId) ? null : 'renderer';

package/dist/app/view-tab-bar/panel-inputs.d.ts

@@ -0,0 +1,28 @@
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
+import type { PanelDefinition, RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { PanelTarget, RuntimeService } from '../../plugin/service.types.js';
+/** The page kinds a panel appears on. A panel that does not say is a component panel. */
+export declare function panelTargets(panel: PanelDefinition): readonly PanelTarget[];
+/**
+ * The view panel to render for the active view id, or `undefined` when the page
+ * kind is not one the panel applies to.
+ *
+ * The id can outlive the page it was chosen on: a component's Overview is still
+ * the active view for a moment after the reader opens a service or a pipe, until
+ * the shell picks one the page offers, and it stays when the page offers none.
+ * Rendering it there would hand a component panel a service or pipe page.
+ */
+export declare function activeViewPanel(viewPanels: readonly PanelDefinition[], activeViewId: string, target: PanelTarget): PanelDefinition | undefined;
+/**
+ * The inputs a view panel is rendered with: `activeComponent` for a panel that
+ * applies to components, `activeService` for one that applies to services,
+ * `activePipe` for one that applies to pipes, one input per kind it applies to,
+ * and nothing else.
+ *
+ * The restriction is the point. `NgComponentOutlet` logs NG0303 for an input the
+ * component does not declare, so a panel written before services or pipes
+ * existed would start logging if it were handed `activeService` or `activePipe`
+ * too.
+ */
+export declare function panelInputsFor(panel: PanelDefinition | undefined, component: RuntimeComponent | null, service: RuntimeService | null, pipe: RuntimePipe | null): Record<string, unknown>;
+//# sourceMappingURL=panel-inputs.d.ts.map

package/dist/app/view-tab-bar/panel-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/panel-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEjF,yFAAyF;AACzF,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,WAAW,EAAE,CAE3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,SAAS,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,CAI9I;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAClC,OAAO,EAAE,cAAc,GAAG,IAAI,EAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,GACzB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAUzB"}

package/dist/app/view-tab-bar/panel-inputs.js

@@ -0,0 +1,41 @@
+/** The page kinds a panel appears on. A panel that does not say is a component panel. */
+export function panelTargets(panel) {
+    return panel.appliesTo ?? ['component'];
+}
+/**
+ * The view panel to render for the active view id, or `undefined` when the page
+ * kind is not one the panel applies to.
+ *
+ * The id can outlive the page it was chosen on: a component's Overview is still
+ * the active view for a moment after the reader opens a service or a pipe, until
+ * the shell picks one the page offers, and it stays when the page offers none.
+ * Rendering it there would hand a component panel a service or pipe page.
+ */
+export function activeViewPanel(viewPanels, activeViewId, target) {
+    const panel = viewPanels.find((p) => p.id === activeViewId);
+    return panel && panelTargets(panel).includes(target) ? panel : undefined;
+}
+/**
+ * The inputs a view panel is rendered with: `activeComponent` for a panel that
+ * applies to components, `activeService` for one that applies to services,
+ * `activePipe` for one that applies to pipes, one input per kind it applies to,
+ * and nothing else.
+ *
+ * The restriction is the point. `NgComponentOutlet` logs NG0303 for an input the
+ * component does not declare, so a panel written before services or pipes
+ * existed would start logging if it were handed `activeService` or `activePipe`
+ * too.
+ */
+export function panelInputsFor(panel, component, service, pipe) {
+    if (!panel)
+        return { activeComponent: component };
+    const targets = panelTargets(panel);
+    const inputs = {};
+    if (targets.includes('component'))
+        inputs['activeComponent'] = component;
+    if (targets.includes('service'))
+        inputs['activeService'] = service;
+    if (targets.includes('pipe'))
+        inputs['activePipe'] = pipe;
+    return inputs;
+}