@memberjunction/ng-ui-components 5.51.0 → 6.1.0-edge.1

package/dist/lib/tabs/tab-list.directive.js

@@ -0,0 +1,202 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output, inject, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * `mjTabList` — the ARIA tabs keyboard contract, shared by every MJ tab strip.
+ *
+ * Applied to the element that holds the tabs. It manages the things the APG tabs pattern requires
+ * and that hand-rolled strips almost always miss:
+ *
+ *  - **roving tabindex** — exactly ONE tab is in the page tab order at a time (the selected one),
+ *    so Tab moves past the whole strip rather than through every tab in it;
+ *  - **arrow-key navigation** — Left/Right move between tabs and activate, Home/End jump to the
+ *    ends, wrapping at the edges;
+ *  - **Enter / Space** activate the focused tab;
+ *  - **Delete / Backspace** request closure of the focused tab, which is the APG answer for
+ *    closeable tabs — a close button inside a tab cannot be its own tab stop without putting two
+ *    stops per tab in the page order.
+ *
+ * ## Why a directive rather than a base class
+ *
+ * MJ's two strips disagree about what a tab IS: one projects `<mj-tab>` component instances and
+ * addresses them by positional index, the other renders a data array and addresses it by stable id.
+ * A shared base class would have to pick one of those models. This directive picks neither — it
+ * operates on the DOM, so each strip keeps its own contract and only has to agree that a tab is
+ * `[role="tab"]` and that the selected one carries `aria-selected="true"`. That agreement is the
+ * accessibility requirement anyway, so nothing is invented to make the sharing work.
+ *
+ * ## What the host must do
+ *
+ * Mark each tab `role="tab"`, keep `aria-selected` truthful, and act on `(TabActivateRequested)` /
+ * `(TabCloseRequested)`. The directive sets `role="tablist"` and owns `tabindex` — do not also bind
+ * it, or the two will fight.
+ */
+export class MJTabListDirective {
+    host = inject(ElementRef).nativeElement;
+    /** The user asked to move to / activate a tab. The host maps the index onto its own model. */
+    TabActivateRequested = new EventEmitter();
+    /** The user pressed Delete/Backspace on a tab. Hosts without closeable tabs simply ignore this. */
+    TabCloseRequested = new EventEmitter();
+    /**
+     * Backstop for tab changes that happen OUTSIDE the host's change detection — a strip that mutates
+     * its own DOM, or a projected tab whose component re-renders itself without the parent view being
+     * checked. Change detection is the primary trigger (see `ngAfterViewChecked`); this catches the
+     * rest. Both funnel into the same idempotent write.
+     */
+    observer = typeof MutationObserver === 'function' ? new MutationObserver(() => this.applyRovingTabIndex()) : null;
+    constructor() {
+        this.observer?.observe(this.host, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-selected'],
+        });
+    }
+    ngAfterViewInit() {
+        this.applyRovingTabIndex();
+    }
+    /**
+     * The primary trigger. Deliberately a lifecycle hook rather than only the MutationObserver:
+     * observer callbacks are asynchronous, so between a selection change and the flush the tab order
+     * would point at the PREVIOUS tab — and a tab with no `tabindex` at all is not focusable, making
+     * `focus()` a silent no-op. Running here keeps the tab order correct in the same frame the
+     * selection changed.
+     *
+     * Safe to run every cycle: it writes only when a value actually differs, so it cannot loop.
+     */
+    ngAfterViewChecked() {
+        this.applyRovingTabIndex();
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    /** All tabs in DOM order. Read live rather than cached — the host re-renders them freely. */
+    get tabs() {
+        return Array.from(this.host.querySelectorAll('[role="tab"]'));
+    }
+    /**
+     * A tab hidden with `display: none` still matches `[role="tab"]`, but it cannot take focus
+     * (`focus()` silently no-ops) and hosts reject activating it — `mj-tabstrip` throws on selecting
+     * an invisible tab, and Entity Actions really does hide tabs until a record is saved. So
+     * navigation and the roving tab stop must skip them.
+     *
+     * Checked via INLINE style up the chain rather than `offsetParent`/`getClientRects`, because
+     * jsdom computes no layout (those report every element as invisible in tests) while both strips
+     * hide tabs exactly this way — `mj-tab` binds `[style.display]` on its host.
+     */
+    isTabVisible(tab) {
+        let el = tab;
+        while (el && el !== this.host) {
+            if (el.style.display === 'none')
+                return false;
+            el = el.parentElement;
+        }
+        return true;
+    }
+    /**
+     * Exactly one tab in the page tab order. Falls back to the first tab when nothing is selected,
+     * so the strip is never a keyboard dead end (a list where every tab is -1 cannot be entered).
+     */
+    applyRovingTabIndex() {
+        const tabs = this.tabs;
+        if (tabs.length === 0)
+            return;
+        // The single tab stop must be FOCUSABLE: the selected tab normally, but a hidden selected tab
+        // (or no selection) falls back to the first visible one — a stop on a display:none element
+        // would make the whole strip unreachable by keyboard.
+        let stop = tabs.findIndex(t => t.getAttribute('aria-selected') === 'true' && this.isTabVisible(t));
+        if (stop < 0)
+            stop = tabs.findIndex(t => this.isTabVisible(t));
+        for (let i = 0; i < tabs.length; i++) {
+            const next = i === stop ? '0' : '-1';
+            // Write only on an actual difference — this runs on every change-detection pass, and a
+            // needless setAttribute would both churn the DOM and re-trigger the MutationObserver.
+            if (tabs[i].getAttribute('tabindex') !== next) {
+                tabs[i].setAttribute('tabindex', next);
+            }
+        }
+    }
+    OnKeydown(event) {
+        const tabs = this.tabs;
+        if (tabs.length === 0)
+            return;
+        const target = event.target;
+        // A tab may project arbitrary content. Keys typed INTO an editable control must keep their
+        // native meaning — hijacking Backspace inside an inline-rename input (or arrows moving its
+        // caret) would be indefensible.
+        if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) {
+            return;
+        }
+        // Only handle keys aimed at a tab — a control INSIDE the panel must keep its own behaviour.
+        const current = target?.closest('[role="tab"]');
+        if (!current || !this.host.contains(current))
+            return;
+        const index = tabs.indexOf(current);
+        if (index === -1)
+            return;
+        // Arrow/Home/End navigate the VISIBLE tabs only — a hidden tab cannot take focus and hosts
+        // reject activating it. Indices reported to the host stay positions in the FULL tab list, so
+        // the host's own index-addressed model is never off-by-hidden.
+        const visible = tabs.filter(t => this.isTabVisible(t));
+        const visibleIndex = visible.indexOf(current);
+        switch (event.key) {
+            case 'ArrowRight':
+                this.move(tabs, visible, (visibleIndex + 1) % visible.length, event);
+                break;
+            case 'ArrowLeft':
+                this.move(tabs, visible, (visibleIndex - 1 + visible.length) % visible.length, event);
+                break;
+            case 'Home':
+                this.move(tabs, visible, 0, event);
+                break;
+            case 'End':
+                this.move(tabs, visible, visible.length - 1, event);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.TabActivateRequested.emit({ Index: index, Element: current });
+                break;
+            case 'Delete':
+            case 'Backspace':
+                event.preventDefault();
+                this.TabCloseRequested.emit({ Index: index, Element: current });
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Follow-focus activation: moving to a tab selects it, which is the APG default for tab lists
+     * whose panels are cheap to show, and is what every desktop browser does.
+     */
+    move(all, visible, to, event) {
+        event.preventDefault();
+        const target = visible[to];
+        if (!target)
+            return;
+        // Focus BEFORE emitting: activation re-renders the strip in some hosts, and focusing a detached
+        // element afterwards would silently drop focus to <body>.
+        target.focus();
+        this.TabActivateRequested.emit({ Index: all.indexOf(target), Element: target });
+    }
+    static ɵfac = function MJTabListDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJTabListDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJTabListDirective, selectors: [["", "mjTabList", ""]], hostAttrs: ["role", "tablist"], hostBindings: function MJTabListDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function MJTabListDirective_keydown_HostBindingHandler($event) { return ctx.OnKeydown($event); });
+        } }, outputs: { TabActivateRequested: "TabActivateRequested", TabCloseRequested: "TabCloseRequested" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabListDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjTabList]',
+                standalone: true,
+                host: { role: 'tablist' },
+            }]
+    }], () => [], { TabActivateRequested: [{
+            type: Output
+        }], TabCloseRequested: [{
+            type: Output
+        }], OnKeydown: [{
+            type: HostListener,
+            args: ['keydown', ['$event']]
+        }] }); })();
+//# sourceMappingURL=tab-list.directive.js.map

package/dist/lib/tabs/tab-list.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.directive.js","sourceRoot":"","sources":["../../../src/lib/tabs/tab-list.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewChecked,\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  OnDestroy,\n  Output,\n  inject,\n} from '@angular/core';\n\n/** A keyboard-driven request from the tab list, carrying the tab it refers to. */\nexport interface MJTabListRequest {\n  /** Position of the tab among its siblings, which is all this directive can know about identity. */\n  Index: number;\n  /** The tab element itself, for hosts that key off a data attribute rather than position. */\n  Element: HTMLElement;\n}\n\n/**\n * `mjTabList` — the ARIA tabs keyboard contract, shared by every MJ tab strip.\n *\n * Applied to the element that holds the tabs. It manages the things the APG tabs pattern requires\n * and that hand-rolled strips almost always miss:\n *\n *  - **roving tabindex** — exactly ONE tab is in the page tab order at a time (the selected one),\n *    so Tab moves past the whole strip rather than through every tab in it;\n *  - **arrow-key navigation** — Left/Right move between tabs and activate, Home/End jump to the\n *    ends, wrapping at the edges;\n *  - **Enter / Space** activate the focused tab;\n *  - **Delete / Backspace** request closure of the focused tab, which is the APG answer for\n *    closeable tabs — a close button inside a tab cannot be its own tab stop without putting two\n *    stops per tab in the page order.\n *\n * ## Why a directive rather than a base class\n *\n * MJ's two strips disagree about what a tab IS: one projects `<mj-tab>` component instances and\n * addresses them by positional index, the other renders a data array and addresses it by stable id.\n * A shared base class would have to pick one of those models. This directive picks neither — it\n * operates on the DOM, so each strip keeps its own contract and only has to agree that a tab is\n * `[role=\"tab\"]` and that the selected one carries `aria-selected=\"true\"`. That agreement is the\n * accessibility requirement anyway, so nothing is invented to make the sharing work.\n *\n * ## What the host must do\n *\n * Mark each tab `role=\"tab\"`, keep `aria-selected` truthful, and act on `(TabActivateRequested)` /\n * `(TabCloseRequested)`. The directive sets `role=\"tablist\"` and owns `tabindex` — do not also bind\n * it, or the two will fight.\n */\n@Directive({\n  selector: '[mjTabList]',\n  standalone: true,\n  host: { role: 'tablist' },\n})\nexport class MJTabListDirective implements AfterViewInit, AfterViewChecked, OnDestroy {\n  private readonly host = inject(ElementRef).nativeElement as HTMLElement;\n\n  /** The user asked to move to / activate a tab. The host maps the index onto its own model. */\n  @Output() TabActivateRequested = new EventEmitter<MJTabListRequest>();\n\n  /** The user pressed Delete/Backspace on a tab. Hosts without closeable tabs simply ignore this. */\n  @Output() TabCloseRequested = new EventEmitter<MJTabListRequest>();\n\n  /**\n   * Backstop for tab changes that happen OUTSIDE the host's change detection — a strip that mutates\n   * its own DOM, or a projected tab whose component re-renders itself without the parent view being\n   * checked. Change detection is the primary trigger (see `ngAfterViewChecked`); this catches the\n   * rest. Both funnel into the same idempotent write.\n   */\n  private readonly observer: MutationObserver | null =\n    typeof MutationObserver === 'function' ? new MutationObserver(() => this.applyRovingTabIndex()) : null;\n\n  constructor() {\n    this.observer?.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['aria-selected'],\n    });\n  }\n\n  ngAfterViewInit(): void {\n    this.applyRovingTabIndex();\n  }\n\n  /**\n   * The primary trigger. Deliberately a lifecycle hook rather than only the MutationObserver:\n   * observer callbacks are asynchronous, so between a selection change and the flush the tab order\n   * would point at the PREVIOUS tab — and a tab with no `tabindex` at all is not focusable, making\n   * `focus()` a silent no-op. Running here keeps the tab order correct in the same frame the\n   * selection changed.\n   *\n   * Safe to run every cycle: it writes only when a value actually differs, so it cannot loop.\n   */\n  ngAfterViewChecked(): void {\n    this.applyRovingTabIndex();\n  }\n\n  ngOnDestroy(): void {\n    this.observer?.disconnect();\n  }\n\n  /** All tabs in DOM order. Read live rather than cached — the host re-renders them freely. */\n  private get tabs(): HTMLElement[] {\n    return Array.from(this.host.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n  }\n\n  /**\n   * A tab hidden with `display: none` still matches `[role=\"tab\"]`, but it cannot take focus\n   * (`focus()` silently no-ops) and hosts reject activating it — `mj-tabstrip` throws on selecting\n   * an invisible tab, and Entity Actions really does hide tabs until a record is saved. So\n   * navigation and the roving tab stop must skip them.\n   *\n   * Checked via INLINE style up the chain rather than `offsetParent`/`getClientRects`, because\n   * jsdom computes no layout (those report every element as invisible in tests) while both strips\n   * hide tabs exactly this way — `mj-tab` binds `[style.display]` on its host.\n   */\n  private isTabVisible(tab: HTMLElement): boolean {\n    let el: HTMLElement | null = tab;\n    while (el && el !== this.host) {\n      if (el.style.display === 'none') return false;\n      el = el.parentElement;\n    }\n    return true;\n  }\n\n  /**\n   * Exactly one tab in the page tab order. Falls back to the first tab when nothing is selected,\n   * so the strip is never a keyboard dead end (a list where every tab is -1 cannot be entered).\n   */\n  private applyRovingTabIndex(): void {\n    const tabs = this.tabs;\n    if (tabs.length === 0) return;\n    // The single tab stop must be FOCUSABLE: the selected tab normally, but a hidden selected tab\n    // (or no selection) falls back to the first visible one — a stop on a display:none element\n    // would make the whole strip unreachable by keyboard.\n    let stop = tabs.findIndex(t => t.getAttribute('aria-selected') === 'true' && this.isTabVisible(t));\n    if (stop < 0) stop = tabs.findIndex(t => this.isTabVisible(t));\n    for (let i = 0; i < tabs.length; i++) {\n      const next = i === stop ? '0' : '-1';\n      // Write only on an actual difference — this runs on every change-detection pass, and a\n      // needless setAttribute would both churn the DOM and re-trigger the MutationObserver.\n      if (tabs[i].getAttribute('tabindex') !== next) {\n        tabs[i].setAttribute('tabindex', next);\n      }\n    }\n  }\n\n  @HostListener('keydown', ['$event'])\n  public OnKeydown(event: KeyboardEvent): void {\n    const tabs = this.tabs;\n    if (tabs.length === 0) return;\n\n    const target = event.target as HTMLElement | null;\n\n    // A tab may project arbitrary content. Keys typed INTO an editable control must keep their\n    // native meaning — hijacking Backspace inside an inline-rename input (or arrows moving its\n    // caret) would be indefensible.\n    if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) {\n      return;\n    }\n\n    // Only handle keys aimed at a tab — a control INSIDE the panel must keep its own behaviour.\n    const current = target?.closest<HTMLElement>('[role=\"tab\"]');\n    if (!current || !this.host.contains(current)) return;\n\n    const index = tabs.indexOf(current);\n    if (index === -1) return;\n\n    // Arrow/Home/End navigate the VISIBLE tabs only — a hidden tab cannot take focus and hosts\n    // reject activating it. Indices reported to the host stay positions in the FULL tab list, so\n    // the host's own index-addressed model is never off-by-hidden.\n    const visible = tabs.filter(t => this.isTabVisible(t));\n    const visibleIndex = visible.indexOf(current);\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this.move(tabs, visible, (visibleIndex + 1) % visible.length, event);\n        break;\n      case 'ArrowLeft':\n        this.move(tabs, visible, (visibleIndex - 1 + visible.length) % visible.length, event);\n        break;\n      case 'Home':\n        this.move(tabs, visible, 0, event);\n        break;\n      case 'End':\n        this.move(tabs, visible, visible.length - 1, event);\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.TabActivateRequested.emit({ Index: index, Element: current });\n        break;\n      case 'Delete':\n      case 'Backspace':\n        event.preventDefault();\n        this.TabCloseRequested.emit({ Index: index, Element: current });\n        break;\n      default:\n        return;\n    }\n  }\n\n  /**\n   * Follow-focus activation: moving to a tab selects it, which is the APG default for tab lists\n   * whose panels are cheap to show, and is what every desktop browser does.\n   */\n  private move(all: HTMLElement[], visible: HTMLElement[], to: number, event: KeyboardEvent): void {\n    event.preventDefault();\n    const target = visible[to];\n    if (!target) return;\n    // Focus BEFORE emitting: activation re-renders the strip in some hosts, and focusing a detached\n    // element afterwards would silently drop focus to <body>.\n    target.focus();\n    this.TabActivateRequested.emit({ Index: all.indexOf(target), Element: target });\n  }\n}\n"]}

package/dist/lib/tabs/tabs.scss

@@ -0,0 +1,242 @@
+/**
+ * MJ tab chrome — the ONE visual definition of a browser-style tab strip.
+ *
+ * Loaded globally by the application (see explorer-app's `styles.scss`), exactly like
+ * `button.scss`, so that components in DIFFERENT packages can share one look without either
+ * package depending on the other for styling. Two components consume it today:
+ *
+ *   - `mj-tabstrip`      (@memberjunction/ng-tabstrip) — tabs declared as projected children,
+ *                        addressed by positional index, bodies owned by the strip.
+ *   - `mj-workspace-tab-strip` (@memberjunction/ng-ui-components) — a data-driven strip over an
+ *                        array of draft descriptors, addressed by stable id, projecting nothing.
+ *
+ * Those two have genuinely different API contracts and keep their own state models. What they must
+ * NOT differ on is what a tab LOOKS like — hence this file. Anything here is chrome; anything a
+ * single strip alone needs (CDK drag affordances, scroll-button placement) stays in that
+ * component's own stylesheet.
+ *
+ * Design tokens only. The look is derived from the draft-workspace strip, which was the
+ * token-correct one: the older tabstrip styling used legacy `--gray-*` aliases that resolve to
+ * PRIMITIVES and therefore do not re-point in dark mode.
+ */
+
+/* Max tab width. Tabs size to their text and only grow to this cap, then ellipsize — a fixed width
+   leaves short tabs mostly empty. Overridable per strip by re-declaring the custom property. */
+.mj-tabs {
+  --mj-tab-max: 210px;
+  /* Sentinel read by `warnIfTabChromeMissing` (dev-mode guard): its absence on a rendered strip
+     means this sheet isn't loaded in the host app — the silent-unstyled failure mode. */
+  --mj-tabs-chrome-loaded: 1;
+}
+
+/* The bar = the scrolling tab list plus any pinned trailing control as siblings. The bottom rule
+   runs the full width here so it spans that control too, not just the tabs. */
+.mj-tabs__bar {
+  display: flex;
+  align-items: stretch;
+  /* Full-width baseline across the top of the surface — the consistent separator. The active tab
+     comes forward by COLOR rather than by clearing this line, because a seamless merge gets
+     clipped by the horizontal scroller. */
+  border-bottom: 1px solid var(--mj-border-default);
+  /* Breathing room above the tabs so they don't jam against a card's top edge or get cut by its
+     rounded corner — they read as tabs ON the surface, not sliced off. */
+  padding-top: 8px;
+  /* Tall enough that a horizontal scrollbar isn't cramped against the tabs. */
+  min-height: 46px;
+}
+
+.mj-tabs__list {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  /* Indented, not flush: the first tab lines up with the surface's content gutter. */
+  padding: 0 4px 0 12px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  /* MUST be explicit: a `visible` axis paired with a non-`visible` one computes to `auto`, so
+     `overflow-x: auto` alone would make the strip vertically scrollable too. (`clip` is NOT an
+     option here — paired with an `auto` axis it computes to `hidden` per the same spec rule, which
+     is why nothing may give the list vertical overhang: a `hidden` axis is still programmatically
+     scrollable, and the browser scrolls a focused tab into view. See the tab's margin note.) */
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.mj-tabs__tab {
+  /* The tab's ACCENT — one color expressing what state the tab is in, consumed by the active
+     state's border and top line so they can never disagree (a warning-bordered tab under a
+     brand-blue accent line reads as two components arguing). Brand primary for an ordinary tab;
+     the lifecycle modifiers below re-point it to their status color. */
+  --mj-tab-accent: var(--mj-brand-primary);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  /* Content-sized up to the cap; flex:none so a tab keeps its content width and the LIST scrolls on
+     overflow rather than the tabs squashing. */
+  max-width: var(--mj-tab-max, 210px);
+  flex: none;
+  min-width: 0;
+  padding: 8px 4px 8px 11px;
+  border: 1px solid var(--mj-border-default);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  /* Inactive = the PAGE background (the darkest surface tier) so unselected tabs recede, while the
+     active tab on --mj-bg-surface comes forward. Consistent ordering in light AND dark. */
+  background: var(--mj-bg-page);
+  color: var(--mj-text-secondary);
+  font-family: inherit;
+  font-size: 13px;
+  /* Regular arrow over a tab body, like browser tabs — not the clicky finger. */
+  cursor: default;
+  /* NO negative bottom margin. The classic tab trick of -1px to overlap the bar's rule buys
+     nothing here — the active tab comes forward by COLOR and a brand accent, never by clearing
+     the baseline — and it cost a real bug: 1px of vertical overhang made the list scrollable by
+     exactly 1px, so the whole row jumped every time a tab took keyboard focus. The tab's bottom
+     edge simply meets the bar's rule; the active tab's own border matches it, so the seam reads
+     as continuous anyway. */
+  box-sizing: border-box;
+}
+
+.mj-tabs__tab:hover:not(.mj-tabs__tab--active) {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}
+
+/* Focus lands on the TAB itself (it carries role="tab" and the roving tabindex), so the ring
+   belongs here rather than on anything nested. */
+.mj-tabs__tab:focus-visible,
+.mj-tabs__close:focus-visible,
+.mj-tabs__new:focus-visible {
+  outline: 2px solid var(--mj-border-focus);
+  outline-offset: -2px;
+}
+
+/* Optional lifecycle states — only the draft strip sets these today, but a tab that can be
+   rejected or completed should look the same wherever that concept turns up. INACTIVE tabs keep
+   subtler status borders (they should recede); the full-strength status color is carried by the
+   accent variable, which the active state consumes below. */
+.mj-tabs__tab--rejected {
+  --mj-tab-accent: var(--mj-status-warning);
+  border-color: var(--mj-status-warning-border, var(--mj-status-warning));
+  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));
+}
+.mj-tabs__tab--complete {
+  --mj-tab-accent: var(--mj-status-success);
+  border-color: color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-border-default));
+}
+
+/* AFTER the lifecycle modifiers, deliberately: when a tab is both active and rejected/complete,
+   the active surface and the accent-colored border must win over the modifier's inactive styling. */
+.mj-tabs__tab--active {
+  /* Base surface + a top accent line, as an INSET shadow so it adds no height and shifts nothing.
+     Border and line both draw from --mj-tab-accent, so the ACTIVE tab's chrome states its status
+     in one voice: brand primary for an ordinary tab, warning when rejected, success when complete.
+     The status icon and accessible name carry the same information for anyone who can't rely on
+     the color alone. */
+  background: var(--mj-bg-surface);
+  border-color: var(--mj-tab-accent);
+  box-shadow: inset 0 2px 0 0 var(--mj-tab-accent);
+  color: var(--mj-text-primary);
+  font-weight: 600;
+}
+
+.mj-tabs__label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mj-tabs__icon {
+  flex: none;
+  font-size: 12px;
+}
+
+.mj-tabs__status-icon {
+  flex: none;
+  font-size: 12px;
+  color: var(--mj-status-warning);
+}
+
+/* Inline dot, present only when dirty — it PUSHES the label (so the ellipsis shifts left on a
+   capped tab) rather than occupying a permanently reserved slot. */
+.mj-tabs__dirty {
+  flex: none;
+  padding-left: 3px;
+  color: var(--mj-brand-primary);
+  font-size: 18px;
+  line-height: 0;
+  pointer-events: none;
+}
+
+/* Not in the tab order: the tab itself is the focus stop, and Delete closes it (ARIA APG's pattern
+   for closeable tabs). Kept as a real button so it retains an accessible name and a pointer target. */
+.mj-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  margin-right: 6px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--mj-text-muted);
+  cursor: pointer;
+  font-size: 11px;
+  flex: none;
+}
+.mj-tabs__close:hover {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}
+
+/* Pinned trailing control (new-tab / overflow scroll buttons): flex:none keeps it at the edge of
+   the bar while the list scrolls behind it. */
+.mj-tabs__new {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  flex: none;
+  border: none;
+  border-left: 1px solid var(--mj-border-default);
+  background: var(--mj-bg-surface);
+  color: var(--mj-text-link);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  /* Fill to the top of the surface — cancel the bar's top padding for this control only, so it
+     doesn't cut off early above the tab row. */
+  align-self: stretch;
+  margin-top: -8px;
+  /* Round only the OUTER corner; the tab-side edge stays square and flush against the divider that
+     separates it from the tabs, matching how browsers draw their +. */
+  border-radius: 0 8px 0 0;
+}
+.mj-tabs__new:hover {
+  background: var(--mj-bg-surface-hover);
+}
+
+/* Overflow scroll affordances — same chrome as the pinned control, no bottom rounding. */
+.mj-tabs__scroll {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  flex: none;
+  border: none;
+  background: var(--mj-bg-surface);
+  color: var(--mj-text-secondary);
+  cursor: pointer;
+  align-self: stretch;
+  margin-top: -8px;
+}
+.mj-tabs__scroll:hover {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}

package/dist/lib/workspace-tabs/workspace-card.component.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '@angular/core';
+import { MJWorkspaceTab } from './workspace-tabs.types';
+import { MJTabReorder } from './workspace-tab-strip.component';
+import * as i0 from "@angular/core";
+/**
+ * `<mj-workspace-card>` — the reusable frame every "workspace" screen shares (a screen where the
+ * user builds several drafts in parallel, each in a tab). A THIN, slotted wrapper: it owns ONLY the
+ * invariant chrome —
+ *   • the card surface (border + rounded corners + contained scroll),
+ *   • the tab-strip row (delegated to `<mj-workspace-tab-strip>`, which carries all tab behavior),
+ *   • an identity band beside the tabs, and
+ *   • a single scrollable body —
+ * and PROJECTS everything that varies:
+ *   • `[workspaceHeader]` — the per-workshop identity band content (e.g. number/status/currency badges);
+ *   • the default slot — the workshop's form/body;
+ *   • `[workspaceFooterNote]` — an optional caption beside the standardized footer verbs.
+ *
+ * The card deliberately bakes in NO workshop-specific header; those differ per workshop and are
+ * projected. Height chain: `:host` fills its parent, the card fills the host, the body is the
+ * flex:1 scroller — so the BODY scrolls in place while the strip + identity band stay pinned.
+ *
+ * SIZING RULE for content inside the card: the card is a query container (`container-type: size`),
+ * so content sizes with CONTAINER units (`cqh`/`cqw`/`cqi`) — relative to the card as a pane —
+ * never viewport units (`vh`/`vw`), which break the moment the card sits in a split or a smaller
+ * window.
+ */
+export declare class MJWorkspaceCardComponent {
+    Tabs: MJWorkspaceTab[];
+    ActiveId: string | null;
+    NewTabLabel: string;
+    AriaLabel: string;
+    /** Passed through to the strip — see `MJWorkspaceTabStripComponent.AllowReorder`. */
+    AllowReorder: boolean;
+    /** Render the standardized action bar (confirm / save-as-draft / discard) below the body. */
+    ShowFooter: boolean;
+    /** The primary verb's label — the ONE thing that changes per workshop ("Create entry" / "Build batch"). */
+    ConfirmLabel: string;
+    /** Optional Font Awesome class for the confirm button (e.g. 'fa-solid fa-check'). */
+    ConfirmIcon: string | null;
+    ConfirmDisabled: boolean;
+    /** Tooltip / blocked-reason on the confirm button; falls back to ConfirmLabel. */
+    ConfirmTitle: string | null;
+    /** Show the spinner + busy label on the confirm button while an async confirm runs. */
+    ConfirmBusy: boolean;
+    ConfirmBusyLabel: string;
+    /** Whether the save-as-draft button appears (some workshops have no draft concept). */
+    ShowDraft: boolean;
+    DraftLabel: string;
+    DraftIcon: string | null;
+    DraftDisabled: boolean;
+    DiscardLabel: string;
+    TabSelected: EventEmitter<string>;
+    TabClosed: EventEmitter<string>;
+    NewTabRequested: EventEmitter<void>;
+    TabReordered: EventEmitter<MJTabReorder>;
+    /** The primary verb (create / build / …). */
+    Confirm: EventEmitter<void>;
+    SaveDraft: EventEmitter<void>;
+    Discard: EventEmitter<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJWorkspaceCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJWorkspaceCardComponent, "mj-workspace-card", never, { "Tabs": { "alias": "Tabs"; "required": false; }; "ActiveId": { "alias": "ActiveId"; "required": false; }; "NewTabLabel": { "alias": "NewTabLabel"; "required": false; }; "AriaLabel": { "alias": "AriaLabel"; "required": false; }; "AllowReorder": { "alias": "AllowReorder"; "required": false; }; "ShowFooter": { "alias": "ShowFooter"; "required": false; }; "ConfirmLabel": { "alias": "ConfirmLabel"; "required": false; }; "ConfirmIcon": { "alias": "ConfirmIcon"; "required": false; }; "ConfirmDisabled": { "alias": "ConfirmDisabled"; "required": false; }; "ConfirmTitle": { "alias": "ConfirmTitle"; "required": false; }; "ConfirmBusy": { "alias": "ConfirmBusy"; "required": false; }; "ConfirmBusyLabel": { "alias": "ConfirmBusyLabel"; "required": false; }; "ShowDraft": { "alias": "ShowDraft"; "required": false; }; "DraftLabel": { "alias": "DraftLabel"; "required": false; }; "DraftIcon": { "alias": "DraftIcon"; "required": false; }; "DraftDisabled": { "alias": "DraftDisabled"; "required": false; }; "DiscardLabel": { "alias": "DiscardLabel"; "required": false; }; }, { "TabSelected": "TabSelected"; "TabClosed": "TabClosed"; "NewTabRequested": "NewTabRequested"; "TabReordered": "TabReordered"; "Confirm": "Confirm"; "SaveDraft": "SaveDraft"; "Discard": "Discard"; }, never, ["[workspaceHeader]", "*", "[workspaceFooterNote]"], true, never>;
+}
+//# sourceMappingURL=workspace-card.component.d.ts.map

package/dist/lib/workspace-tabs/workspace-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/workspace-tabs/workspace-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAgC,YAAY,EAAE,MAAM,iCAAiC,CAAC;;AAG7F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAwDa,wBAAwB;IAC1B,IAAI,EAAE,cAAc,EAAE,CAAM;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC/B,WAAW,SAAS;IACpB,SAAS,SAAe;IACjC,qFAAqF;IAC5E,YAAY,UAAQ;IAG7B,6FAA6F;IACpF,UAAU,UAAS;IAC5B,2GAA2G;IAClG,YAAY,SAAa;IAClC,qFAAqF;IAC5E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,eAAe,UAAS;IACjC,kFAAkF;IACzE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5C,uFAAuF;IAC9E,WAAW,UAAS;IACpB,gBAAgB,SAAc;IACvC,uFAAuF;IAC9E,SAAS,UAAQ;IACjB,UAAU,SAAmB;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAA+B;IACvD,aAAa,UAAS;IACtB,YAAY,SAAa;IAExB,WAAW,uBAA8B;IACzC,SAAS,uBAA8B;IACvC,eAAe,qBAA4B;IAC3C,YAAY,6BAAoC;IAC1D,6CAA6C;IACnC,OAAO,qBAA4B;IACnC,SAAS,qBAA4B;IACrC,OAAO,qBAA4B;yCAnClC,wBAAwB;2CAAxB,wBAAwB;CAoCpC"}