@excom/content-tabs 0.1.0

package/.rush/temp/chunked-rush-logs/content-tabs.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/content-tabs.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/content-tabs.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 38.81611700000008
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 61.23910599999999
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 111.23345999999992
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/content-tabs": "../../packages/content-tabs:9IWZ2jw5bqvMUIZ/3hS/tDuKtEoqJKQ6897NQAr/L48=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/content-tabs-body.ts

@@ -0,0 +1,26 @@
+import { Neutron } from "@excom/neutron";
+
+/**
+ * Panel paired with a `<content-tabs-header>` — shown when that header is
+ * open. Lives inside a `<content-tabs>`.
+ *
+ * @summary Tab panel — visible when its paired header is open.
+ */
+export const ContentTabsBody = Neutron({
+  tag: "content-tabs-body",
+  props: {
+    /**
+     * @option
+     * @state
+     * Visibility, kept in sync with the paired header's `is-open`. Set
+     * directly only if this body is not paired with a header.
+     */
+    isOpen: Boolean,
+    /**
+     * @option
+     * Pairs this body with the `<content-tabs-header>` sharing the same
+     * `tab-name`. Unset headers / bodies pair by position instead.
+     */
+    tabName: String,
+  },
+});

package/content-tabs-header.ts

@@ -0,0 +1,64 @@
+import { ConstructorType, Neutron, TEvent } from "@excom/neutron";
+
+export type ContentTabsHeaderOpenedEvent = TEvent & {
+  type: "content-tabs-header-opened";
+  detail: void;
+};
+
+/**
+ * Clickable tab header — lives inside a `<content-tabs>`. Click opens
+ * (`single` / `toggle`) or toggles (`multi`) `is-open`, which keeps the
+ * paired `<content-tabs-body>` in sync.
+ *
+ * @summary Tab header — opens its paired body on click.
+ *
+ * @fires content-tabs-header-opened - Whenever `is-open` is set. The
+ *   parent `<content-tabs>` listens for this to close sibling headers.
+ * @type ContentTabsHeaderOpenedEvent
+ */
+export const ContentTabsHeader = Neutron({
+  tag: "content-tabs-header",
+  props: {
+    /**
+     * @option
+     * Pairs this header with the `<content-tabs-body>` sharing the same
+     * `tab-name`. Unset headers / bodies pair by position instead.
+     */
+    tabName: String,
+    /**
+     * @option
+     * @state
+     * Open state. Click sets or toggles this depending on the parent's
+     * `tab-type`; set it directly to drive the tab programmatically.
+     */
+    isOpen: Boolean,
+    // private state
+    _parentTabs:
+      HTMLElement as unknown as ConstructorType<HTMLContentTabsElement>,
+  },
+})
+  .defineMethods({
+    _getParentTabs: (element) => {
+      const tabs = element._parentTabs || element.closest("content-tabs");
+      return [tabs && { _parentTabs: tabs }, { returns: tabs }];
+    },
+    _handleClick: (element) => ({
+      isOpen: ["toggle", "multi"].includes(
+        // @ts-expect-error - TODO: method typing
+        element._getParentTabs()?.tabType as string
+      )
+        ? !element.isOpen
+        : true,
+    }),
+    _syncCorrespondingBody: (element) => {
+      // @ts-expect-error - TODO: method typing
+      element._getParentTabs()?._queueSyncBody(element);
+    },
+  })
+  .onPropUnset("isOpen", () => [{ _syncCorrespondingBody: [] }])
+  .onPropSet("isOpen", () => [
+    { _syncCorrespondingBody: [] },
+    { emit: ["content-tabs-header-opened"] },
+  ])
+  .onEvent("click", () => ({ _handleClick: [] }))
+  .onDisconnected(() => ({ _parentTabs: null }));

package/content-tabs.ts

@@ -0,0 +1,174 @@
+import type { ContentTabsBody } from "./content-tabs-body";
+import type {
+  ContentTabsHeader,
+  ContentTabsHeaderOpenedEvent,
+} from "./content-tabs-header";
+import { ConstructorType, Neutron } from "@excom/neutron";
+
+export type { ContentTabsHeaderOpenedEvent };
+
+type TContentTabsHeader = typeof ContentTabsHeader.CustomElement;
+type TContentTabsBody = typeof ContentTabsBody.CustomElement;
+
+/**
+ * Open state of a `<content-tabs>` group. A tab is its header's
+ * `tab-name`, or its index among the group's own headers when unnamed.
+ * Nested groups are excluded.
+ */
+export interface ContentTabsProvision {
+  /** The group's `tab-type` (`null` when unset, behaves as `single`). */
+  tabType: string | null;
+  /** Every open tab, in header order. */
+  openTabs: Array<string | number>;
+  /** The first open tab; `null` when none is open. */
+  activeTab: string | number | null;
+}
+
+/** A header's provision id: its `tab-name`, or its index among `headers`. */
+const tabIdOf = (header: TContentTabsHeader, headers: TContentTabsHeader[]) =>
+  header.tabName || headers.indexOf(header);
+
+/** Read `is-open` even if the header hasn't upgraded yet. */
+const isHeaderOpen = (header: TContentTabsHeader) =>
+  header.isOpen ?? header.hasAttribute("is-open");
+
+const isSameProvision = (
+  a: ContentTabsProvision | null | undefined,
+  b: ContentTabsProvision
+) =>
+  !!a &&
+  a.tabType === b.tabType &&
+  a.activeTab === b.activeTab &&
+  a.openTabs.length === b.openTabs.length &&
+  a.openTabs.every((tab, i) => tab === b.openTabs[i]);
+
+/**
+ * Tabs / accordion primitive. Click a `<content-tabs-header>` to show its
+ * paired `<content-tabs-body>` — pair by matching `tab-name`, or by
+ * position when both are unnamed. Nested `<content-tabs>` groups are
+ * isolated from their ancestors.
+ *
+ * `.provision` holds the open state (`{ tabType, openTabs, activeTab }`)
+ * so Quark can read which tab is active with `prop("provision")`.
+ *
+ * @summary Tabs / accordion — single, multi, or toggle selection.
+ *
+ * @listens content-tabs-header-opened - Closes sibling headers when
+ *   `tab-type` is `single` (default) or `toggle`.
+ * @type ContentTabsHeaderOpenedEvent
+ *
+ * @child content-tabs-header - Clickable tab headers.
+ * @child content-tabs-body - Panels shown / hidden to match their header.
+ */
+export const ContentTabs = Neutron({
+  tag: "content-tabs",
+  props: {
+    /**
+     * @option
+     * Selection mode. `single` opens one header at a time (radio-like);
+     * `multi` allows any number open at once (accordion); `toggle` is
+     * like `single`, but re-clicking the open header closes it.
+     * @values single | multi | toggle
+     * @default single
+     */
+    tabType: String,
+    /**
+     * @provision
+     * Open state: `{ tabType, openTabs, activeTab }`. A tab is its
+     * header's `tab-name`, or its index among this group's own headers
+     * when unnamed; `activeTab` is the first open one (`null` when none).
+     * Set after mount and after every header change (batched with the
+     * body sync). Not reflected as an attribute.
+     * @type ContentTabsProvision
+     */
+    provision: Object as unknown as ConstructorType<ContentTabsProvision>,
+
+    // private state
+    _headersToSync: Array as unknown as ConstructorType<TContentTabsHeader[]>,
+    _mutationQueued: Boolean,
+  },
+})
+  .defineMethods({
+    /* Own headers / bodies only. A nested `<content-tabs>` keeps its own
+       (nearest-group filter, not `:not(:scope …)`, which some selector
+       engines scope wrong). */
+    getHeaders: (element) => ({
+      returns: [...element.querySelectorAll("content-tabs-header")].filter(
+        (header) => header.closest("content-tabs") === element
+      ) as TContentTabsHeader[],
+    }),
+    getBodies: (element) => ({
+      returns: [...element.querySelectorAll("content-tabs-body")].filter(
+        (body) => body.closest("content-tabs") === element
+      ) as TContentTabsBody[],
+    }),
+    // @ts-expect-error - TODO: method typing
+    _syncBodies: ({ _headersToSync, getHeaders, getBodies }) => {
+      const allHeaders = getHeaders();
+      const allBodies = getBodies();
+      [...new Set(_headersToSync || [])].forEach((header) => {
+        const body = allBodies.find((body, bodyIndex) => {
+          if (header.tabName) {
+            return body.tabName === header.tabName;
+          }
+          return bodyIndex === allHeaders.indexOf(header);
+        });
+        if (body) {
+          body.isOpen = header.isOpen;
+        }
+      });
+      return {
+        _headersToSync: [],
+        _mutationQueued: false,
+        _syncProvision: [],
+      };
+    },
+    /**
+     * Rebuild `provision` from every own header (group-wide, once per
+     * batch). New object only when something changed, so Quark /
+     * `neutron-provision` listeners skip no-op batches.
+     */
+    // @ts-expect-error - TODO: method typing
+    _syncProvision: ({ getHeaders, tabType, provision }) => {
+      const headers = getHeaders();
+      const openTabs = headers
+        .filter(isHeaderOpen)
+        .map((header) => tabIdOf(header, headers));
+      const next: ContentTabsProvision = {
+        tabType: tabType || null,
+        openTabs,
+        activeTab: openTabs.length ? openTabs[0] : null,
+      };
+      return isSameProvision(provision, next) ? {} : { provision: next };
+    },
+    // @ts-expect-error - TODO: method typing
+    _queueSyncBodies: ({ _mutationQueued, _syncBodies }) => {
+      if (!_mutationQueued) {
+        // Heavy DOM queries: cache and batch.
+        queueMicrotask(_syncBodies);
+        return { _mutationQueued: true };
+      }
+    },
+    _queueSyncBody: ({ _headersToSync }, header) => [
+      { _headersToSync: [...(_headersToSync || []), header] },
+      { _queueSyncBodies: [] },
+    ],
+  })
+  .onEvent("content-tabs-header-opened", (element, e) => {
+    // Close sibling headers
+    e.stopPropagation();
+    if ([null, "single", "toggle"].includes(element.tabType)) {
+      element
+        .getHeaders()
+        // `e.target` is the header that opened
+        .filter((header) => header !== e.target)
+        .forEach((header) => (header.isOpen = false));
+    }
+  })
+  // Initial `is-open` headers may upgrade after this element, so the
+  // first provision read shares the same microtask queue as a change
+  .onConnected(() => ({ _queueSyncBodies: [] }))
+  .onDisconnected(
+    ({ isMoving }) =>
+      !isMoving && { _headersToSync: null, _mutationQueued: false }
+  );

package/index.css

@@ -0,0 +1,5 @@
+@import "./src/content-tabs.css";
+
+@layer {
+  @mixin module-content-tabs;
+}

package/index.ts

@@ -0,0 +1,33 @@
+import { ContentTabs } from "./content-tabs";
+import { ContentTabsBody } from "./content-tabs-body";
+import { ContentTabsHeader } from "./content-tabs-header";
+
+ContentTabs.define();
+ContentTabsBody.define();
+ContentTabsHeader.define();
+
+export { ContentTabs, ContentTabsBody, ContentTabsHeader };
+
+type T_HTMLContentTabsElement = typeof ContentTabs.CustomElement;
+type T_HTMLContentTabsBodyElement = typeof ContentTabsBody.CustomElement;
+type T_HTMLContentTabsHeaderElement = typeof ContentTabsHeader.CustomElement;
+declare global {
+  interface HTMLContentTabsElement extends T_HTMLContentTabsElement {}
+  interface HTMLContentTabsBodyElement extends T_HTMLContentTabsBodyElement {}
+  interface HTMLContentTabsHeaderElement extends T_HTMLContentTabsHeaderElement {}
+  interface Window {
+    HTMLContentTabsElement: HTMLContentTabsElement;
+    HTMLContentTabsBodyElement: HTMLContentTabsBodyElement;
+    HTMLContentTabsHeaderElement: HTMLContentTabsHeaderElement;
+  }
+  interface HTMLElementTagNameMap {
+    "content-tabs": HTMLContentTabsElement;
+    "content-tabs-body": HTMLContentTabsBodyElement;
+    "content-tabs-header": HTMLContentTabsHeaderElement;
+  }
+}
+export type {
+  HTMLContentTabsBodyElement,
+  HTMLContentTabsElement,
+  HTMLContentTabsHeaderElement,
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@excom/content-tabs",
+  "version": "0.1.0",
+  "description": "<content-tabs> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/valence": "^0.1.0",
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/content-tabs"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/content-tabs/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "content-tabs",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/content-tabs.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/content-tabs.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/content-tabs.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/content-tabs.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/content-tabs.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/content-tabs.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/src/content-tabs.css

@@ -0,0 +1,137 @@
+@import "@excom/valence/src/util.default.css";
+
+/**
+ * Styles for `<content-tabs>`, `<content-tabs-header>`, and
+ * `<content-tabs-body>`. Primary layout lives on the `content-tabs`
+ * mixin; headers / bodies are styled via nested selectors.
+ * @element content-tabs
+ */
+
+/* Aliases */
+@custom-selector :--content-tabs content-tabs, .tag-content-tabs;
+@custom-selector :--content-tabs-header content-tabs-header, .tag-content-tabs-header;
+@custom-selector :--content-tabs-body content-tabs-body, .tag-content-tabs-body;
+@custom-selector :--content-tab--is-open [is-open], [aria-selected="true"];
+
+@define-mixin module-content-tabs {
+  :root {
+    /**
+     * Border color for `.file-tabs` headers / bodies.
+     * @cssproperty
+     * @syntax <color>
+     */
+    --content-tabs-border-color: var(--v-muted-border-color, currentColor);
+    /**
+     * Border width for `.file-tabs` headers / bodies.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --content-tabs-border-width: var(--v-border-width, 2px);
+    /**
+     * Text color for the active header in `.underline`.
+     * @cssproperty
+     * @syntax <color>
+     */
+    --content-tabs-color-active: var(--v-color-primary, inherit);
+    /**
+     * Padding for each header.
+     * @cssproperty
+     * @syntax <length>{1,4}
+     */
+    --content-tabs-header-padding: 10px 15px;
+    /**
+     * Padding for each body in `.file-tabs`.
+     * @cssproperty
+     * @syntax <length>{1,4}
+     */
+    --content-tabs-body-padding: var(--v-spacing, 15px);
+    /**
+     * Height of the `.file-tabs` active-tab accent bar.
+     * @cssproperty
+     * @syntax <length>
+     */
+    --content-tabs-active-indicator-height: 2px;
+  }
+
+  :--content-tabs {
+    :--content-tabs-header {
+      cursor: pointer;
+      position: relative;
+      user-select: none;
+    }
+    :--content-tabs-body {
+      display: none;
+    }
+    :--content-tabs-body:--content-tab--is-open {
+      display: block;
+    }
+
+    /**
+     * File-explorer look — headers render as bordered folder tabs joined
+     * to the active body.
+     * @cssclass
+     */
+    &.file-tabs {
+      > :--content-tabs-header {
+        /* compensate for lack of flexbox */
+        margin-right: -5px;
+      }
+      :--content-tabs-header {
+        border: var(--content-tabs-border-width) solid
+          var(--content-tabs-border-color);
+        border-bottom: 0;
+        padding: var(--content-tabs-header-padding);
+        display: inline-block;
+
+        &:not(:last-of-type) {
+          border-right: 0;
+        }
+        :--content-tabs-body {
+          margin-top: -1px;
+        }
+      }
+      &:not(:has(:--content-tabs-header:--content-tab--is-open))
+        :--content-tabs-header:first-of-type,
+      :--content-tabs-header:--content-tab--is-open {
+        @mixin util-nested-card;
+        color: var(--v-primary);
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: calc(var(--content-tabs-border-width) * -1);
+          left: 0;
+          width: 100%;
+          height: var(--content-tabs-active-indicator-height);
+          @mixin util-nested-card;
+        }
+      }
+      &:not(:has(:--content-tabs-body:--content-tab--is-open))
+        :--content-tabs-body:first-of-type,
+      :--content-tabs-body:--content-tab--is-open {
+        border: var(--content-tabs-border-width) solid
+          var(--content-tabs-border-color);
+        padding: var(--content-tabs-body-padding);
+        @mixin util-nested-card;
+      }
+    }
+    /**
+     * Paper / underline look — the active header gets a bottom accent
+     * border instead of a bordered card.
+     * @cssclass
+     */
+    &.underline {
+      :--content-tabs-header {
+        border-bottom: 2px solid transparent;
+        padding: var(--content-tabs-header-padding);
+        &:--content-tab--is-open {
+          color: var(--v-primary);
+          border-color: var(--v-primary-border);
+        }
+      }
+      :--content-tabs-body:--content-tab--is-open {
+        margin-top: 8px;
+      }
+    }
+  }
+}