@thewhatmatters/wmds 0.4.46 → 0.4.48

package/CHANGELOG.md

@@ -7,6 +7,31 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): don't edit this file on a feature branch. Add a release note as `changes/<topic>.md` (format in `changes/README.md`). The release step, `npm run release:prepare` on its own **Release 0.x.y** branch, folds every note into one new entry here and bumps the version once. `npm run check:changelog` checks this file and the notes.
 
+## 0.4.48
+
+**IndexList: rows on the page grid, with tags and arrows.**
+
+- **IndexList** `columns="page"` (new): the rows sit on the page grid like a table of posts: the date in the first two columns, the title across the width, and an end column (Journal — Hover Index; Randy, 2026-11-06). Default stays `"tracks"`.
+- **IndexList.Item** `tags` (new): a few WMDS `Badge`s at the row's end (on phones they join the meta line).
+- **IndexList.Item** `rowLink` (new): the whole row is one link with a quiet fill on hover and keyboard focus.
+- **IndexList.Item** `arrow` / `external` (new): an arrow at the row's end (→, or ↗ for another site); `external` opens a new tab and says so.
+
+### Consumer actions
+
+- None.
+
+## 0.4.47
+
+**Table: a ruled grid for pricing tables.**
+
+- **Table** `rules="grid"` (new): a rule between every column and round the outside, so each cell is a ruled box. With a `colgroup` the columns are equal, so packages can head the same columns as the rows under them (Pricing — Ruled Table; Randy, 2026-11-06). Default stays `"rows"`.
+- **Table** `stickyHeader` (new, with `rules="grid"`): the header row stays at the top of the page while the rows scroll under it, so each row's column is always clear (Heron-style pricing; Randy, 2026-11-06). `--table-sticky-top` sits it under a fixed nav.
+- **TableHead** `wrap` (new): a header cell that holds more than a label (a heading, a price, a button) wraps, sits at the top and gets more room.
+
+### Consumer actions
+
+- None.
+
 ## 0.4.46
 
 **Carousel: a quiet Pause button for logo marquees.**

package/dist/components/atoms/Table/Table.d.ts

@@ -9,6 +9,18 @@ export interface TableProps {
     /** Names the scrolling region and the table. One of `aria-label` or `aria-labelledby` is required. */
     "aria-label"?: string;
     "aria-labelledby"?: string;
+    /**
+     * `rows` (default): a rule under each row. `grid`: rules between the columns and round the outside too, so every
+     * cell is a ruled box. Pair it with a `colgroup` for equal columns (a pricing grid whose packages head the columns).
+     */
+    rules?: "rows" | "grid";
+    /**
+     * Pin the header row to the top of the page while the rows scroll under it, so a long comparison keeps its
+     * column heads in view (a pricing grid's packages). Needs `rules="grid"`: only a table that fits its box can let
+     * go of the sideways scroll that would otherwise trap the header. Offset it under a fixed nav with
+     * `--table-sticky-top` on a parent.
+     */
+    stickyHeader?: boolean;
     /** Layout-only — applies to the scroll box. */
     className?: TableLayoutClassName;
 }
@@ -25,6 +37,8 @@ export interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellEleme
     align?: TableAlign;
     /** Pin the column to the start edge while the table scrolls sideways. Set it on every cell of the column. */
     sticky?: boolean;
+    /** Content richer than a label (a heading, a price, a button): it wraps, sits at the top of the cell and gets more room. */
+    wrap?: boolean;
     className?: TableLayoutClassName;
 }
 export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "className" | "align"> {
@@ -42,12 +56,12 @@ export interface TableCaptionProps {
  * Semantic table in a horizontal-scroll box. The box is a focusable `region` named by the table's
  * label, so a keyboard can scroll it; the table never squeezes its columns below their content.
  */
-declare function Table({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className }: TableProps): import("react").JSX.Element;
+declare function Table({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, rules, stickyHeader, className }: TableProps): import("react").JSX.Element;
 declare function TableHeader({ children, className }: TableSectionProps): import("react").JSX.Element;
 declare function TableBody({ children, className }: TableSectionProps): import("react").JSX.Element;
 declare function TableFooter({ children, className }: TableSectionProps): import("react").JSX.Element;
 declare function TableRow({ children, className, ...rest }: TableRowProps): import("react").JSX.Element;
-declare function TableHead({ align, sticky, scope, className, children, ...rest }: TableHeadProps): import("react").JSX.Element;
+declare function TableHead({ align, sticky, wrap, scope, className, children, ...rest }: TableHeadProps): import("react").JSX.Element;
 declare function TableCell({ align, sticky, className, children, ...rest }: TableCellProps): import("react").JSX.Element;
 declare function TableCaption({ children, className }: TableCaptionProps): import("react").JSX.Element;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/atoms/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAYL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D,sDAAsD;AACtD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UAAU;IACzB,qEAAqE;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC3F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACzG,qDAAqD;IACrD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6GAA6G;IAC7G,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACzG,iFAAiF;IACjF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6GAA6G;IAC7G,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED;;;GAGG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,UAAU,+BAc7G;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAE9D;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAE5D;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAE9D;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAMhE;AAED,iBAAS,SAAS,CAAC,EAAE,KAAe,EAAE,MAAM,EAAE,KAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAM1G;AAED,iBAAS,SAAS,CAAC,EAAE,KAAe,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAM3F;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAE/D;AAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/components/atoms/Table/Table.js

@@ -3,15 +3,17 @@ import { cn as e } from "../../../lib/cn.js";
 import { tableAlignClasses as t, tableAligns as n, tableBodyClasses as r, tableCaptionClasses as i, tableCellClasses as a, tableClasses as o, tableFooterClasses as s, tableHeadClasses as c, tableHeaderClasses as l, tableRowClasses as u, tableScrollClasses as d } from "./tableStyles.js";
 import { jsx as f } from "react/jsx-runtime";
 //#region src/components/atoms/Table/Table.tsx
-function p({ children: t, "aria-label": n, "aria-labelledby": r, className: i }) {
+function p({ children: t, "aria-label": n, "aria-labelledby": r, rules: i = "rows", stickyHeader: a, className: s }) {
+	let c = a === !0 && i === "grid";
 	return /* @__PURE__ */ f("div", {
 		role: "region",
 		tabIndex: 0,
 		"aria-label": n,
 		"aria-labelledby": r,
-		className: e(d, i),
+		className: e(d, c && "!overflow-visible", s),
 		children: /* @__PURE__ */ f("table", {
-			className: o,
+			className: e(o, i === "grid" && "!min-w-0 border border-border [&_th]:border-x [&_th]:border-border [&_td]:border-x [&_td]:border-border [&_th]:px-6 [&_td]:px-6 [&_td]:py-4 lg:[&_th]:px-8 lg:[&_td]:px-8", c && "[&_thead]:sticky [&_thead]:top-[var(--table-sticky-top,0px)] [&_thead]:z-10 [&_thead]:bg-body [&_thead]:shadow-[0_1px_0_var(--color-border)]"),
+			"data-rules": i,
 			children: t
 		})
 	});
@@ -41,12 +43,12 @@ function _({ children: t, className: n, ...r }) {
 		children: t
 	});
 }
-function v({ align: n = "start", sticky: r, scope: i = "col", className: a, children: o, ...s }) {
+function v({ align: n = "start", sticky: r, wrap: i, scope: a = "col", className: o, children: s, ...l }) {
 	return /* @__PURE__ */ f("th", {
-		...s,
-		scope: i,
-		className: e(c, t[n], r && "sticky start-0 z-10 bg-body", a),
-		children: o
+		...l,
+		scope: a,
+		className: e(c, t[n], r && "sticky start-0 z-10 bg-body", i && "!h-auto !whitespace-normal !align-top py-6 lg:py-8", o),
+		children: s
 	});
 }
 function y({ align: n = "start", sticky: r, className: i, children: o, ...s }) {

package/dist/components/atoms/Table/tableStyles.d.ts

@@ -5,12 +5,23 @@ export type TableAlign = (typeof tableAligns)[number];
 export declare const tableScrollClasses = "w-full max-w-full overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring";
 /** A table with a `colgroup` lays its columns out from the `col` widths, so a filled and an empty table match. */
 export declare const tableClasses: string;
+/** `rules="grid"`: a rule between every column and round the outside, so each cell is a ruled box (a pricing grid). */
+export declare const tableGridRulesClasses: string;
 export declare const tableHeaderClasses = "[&_tr]:border-b [&_tr]:border-border";
 export declare const tableBodyClasses = "[&_tr:last-child]:border-b-0";
 export declare const tableFooterClasses = "border-t border-border-emphasized [&>tr]:border-b-0";
 export declare const tableRowClasses = "border-b border-border transition-colors hover:bg-ghost-hover";
 export declare const tableHeadClasses: string;
 export declare const tableCellClasses = "px-3 py-3 align-middle";
+/**
+ * `stickyHeader` (with `rules="grid"`, which fits its box): the scroll box lets go of its overflow so the header row
+ * can stick to the page, and the whole header (every header row) pins to the top (below `--table-sticky-top`, e.g. a fixed nav's height),
+ * opaque so the rows slide under them.
+ */
+export declare const tableStickyHeaderScrollClasses = "!overflow-visible";
+export declare const tableStickyHeaderClasses = "[&_thead]:sticky [&_thead]:top-[var(--table-sticky-top,0px)] [&_thead]:z-10 [&_thead]:bg-body [&_thead]:shadow-[0_1px_0_var(--color-border)]";
+/** A header cell that holds more than a label (a package's name, price and action): wraps, sits at the top, roomier. */
+export declare const tableHeadWrapClasses = "!h-auto !whitespace-normal !align-top py-6 lg:py-8";
 export declare const tableCaptionClasses: string;
 /** A column pinned to the start edge while the rest scrolls — opaque so cells slide under it. */
 export declare const tableStickyClasses = "sticky start-0 z-10 bg-body";

package/dist/components/atoms/Table/tableStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tableStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Table/tableStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,qCAAsC,CAAC;AAE/D,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,6IAC6G,CAAC;AAE7I,kHAAkH;AAClH,eAAO,MAAM,YAAY,QAAkH,CAAC;AAE5I,eAAO,MAAM,kBAAkB,yCAAyC,CAAC;AAEzE,eAAO,MAAM,gBAAgB,iCAAiC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,wDAAwD,CAAC;AAExF,eAAO,MAAM,eAAe,kEAAkE,CAAC;AAE/F,eAAO,MAAM,gBAAgB,QAAmG,CAAC;AAEjI,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AAEzD,eAAO,MAAM,mBAAmB,QAA0D,CAAC;AAE3F,iGAAiG;AACjG,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxD,CAAC"}
+{"version":3,"file":"tableStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Table/tableStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,qCAAsC,CAAC;AAE/D,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,6IAC6G,CAAC;AAE7I,kHAAkH;AAClH,eAAO,MAAM,YAAY,QAAkH,CAAC;AAE5I,uHAAuH;AACvH,eAAO,MAAM,qBAAqB,QAImC,CAAC;AAEtE,eAAO,MAAM,kBAAkB,yCAAyC,CAAC;AAEzE,eAAO,MAAM,gBAAgB,iCAAiC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,wDAAwD,CAAC;AAExF,eAAO,MAAM,eAAe,kEAAkE,CAAC;AAE/F,eAAO,MAAM,gBAAgB,QAAmG,CAAC;AAEjI,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,sBAAsB,CAAC;AAClE,eAAO,MAAM,wBAAwB,iJAC2G,CAAC;AAEjJ,wHAAwH;AACxH,eAAO,MAAM,oBAAoB,uDAAuD,CAAC;AAEzF,eAAO,MAAM,mBAAmB,QAA0D,CAAC;AAE3F,iGAAiG;AACjG,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxD,CAAC"}

package/dist/components/atoms/Table/tableStyles.js

@@ -5,10 +5,10 @@ var t = [
 	"start",
 	"center",
 	"end"
-], n = "w-full max-w-full overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring", r = `w-full min-w-max caption-bottom border-collapse has-[colgroup]:table-fixed text-fg ${e("body")}`, i = "[&_tr]:border-b [&_tr]:border-border", a = "[&_tr:last-child]:border-b-0", o = "border-t border-border-emphasized [&>tr]:border-b-0", s = "border-b border-border transition-colors hover:bg-ghost-hover", c = `h-11 px-3 text-start align-middle font-normal whitespace-nowrap ${e("ui-label")}`, l = "px-3 py-3 align-middle", u = `mt-3 text-start ${e("body")} text-muted`, d = "sticky start-0 z-10 bg-body", f = {
+], n = "w-full max-w-full overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring", r = `w-full min-w-max caption-bottom border-collapse has-[colgroup]:table-fixed text-fg ${e("body")}`, i = "!min-w-0 border border-border [&_th]:border-x [&_th]:border-border [&_td]:border-x [&_td]:border-border [&_th]:px-6 [&_td]:px-6 [&_td]:py-4 lg:[&_th]:px-8 lg:[&_td]:px-8", a = "[&_tr]:border-b [&_tr]:border-border", o = "[&_tr:last-child]:border-b-0", s = "border-t border-border-emphasized [&>tr]:border-b-0", c = "border-b border-border transition-colors hover:bg-ghost-hover", l = `h-11 px-3 text-start align-middle font-normal whitespace-nowrap ${e("ui-label")}`, u = "px-3 py-3 align-middle", d = "!overflow-visible", f = "[&_thead]:sticky [&_thead]:top-[var(--table-sticky-top,0px)] [&_thead]:z-10 [&_thead]:bg-body [&_thead]:shadow-[0_1px_0_var(--color-border)]", p = "!h-auto !whitespace-normal !align-top py-6 lg:py-8", m = `mt-3 text-start ${e("body")} text-muted`, h = "sticky start-0 z-10 bg-body", g = {
 	start: "text-start",
 	center: "text-center",
 	end: "text-end tabular-nums"
 };
 //#endregion
-export { f as tableAlignClasses, t as tableAligns, a as tableBodyClasses, u as tableCaptionClasses, l as tableCellClasses, r as tableClasses, o as tableFooterClasses, c as tableHeadClasses, i as tableHeaderClasses, s as tableRowClasses, n as tableScrollClasses, d as tableStickyClasses };
+export { g as tableAlignClasses, t as tableAligns, o as tableBodyClasses, m as tableCaptionClasses, u as tableCellClasses, r as tableClasses, s as tableFooterClasses, i as tableGridRulesClasses, l as tableHeadClasses, p as tableHeadWrapClasses, a as tableHeaderClasses, c as tableRowClasses, n as tableScrollClasses, h as tableStickyClasses, f as tableStickyHeaderClasses, d as tableStickyHeaderScrollClasses };

package/dist/components/molecules/IndexList/IndexList.d.ts

@@ -18,6 +18,12 @@ export interface IndexListProps {
     captions?: IndexListCaptions;
     /** Title scale: `lg` type-display-3 (default), `md` type-heading-1, `sm` type-heading-3. */
     size?: IndexListSize;
+    /**
+     * `tracks` (default): the list's own two tracks (meta and title). `page`: the rows sit on the WMDS page grid
+     * (place the list as a direct child of a `grid-page` or Band): meta in the first two columns from md, the title
+     * across the width, a row's arrow in the last column. Like a table of posts.
+     */
+    columns?: "tracks" | "page";
     /** The heading element around each title. Default: `h2`. */
     titleAs?: IndexListTitleElement;
     /** Shown in place of the rows when there are none — for example "No posts match these filters." */
@@ -52,14 +58,28 @@ export interface IndexListItemProps {
     onOpenChange?: (open: boolean) => void;
     /** Names the preview control. Default: "Preview: {title}". */
     previewLabel?: string;
+    /**
+     * The whole row is the link: one hit area, a quiet fill across the row on hover and keyboard focus. `arrow` sets
+     * it too.
+     */
+    rowLink?: boolean;
+    /** An arrow at the row's end (→, or ↗ with `external`); the whole row is the link. */
+    arrow?: boolean;
+    /** The row goes to another site: the link opens in a new tab (said to screen readers), and its arrow, if any, is ↗. */
+    external?: boolean;
+    /**
+     * Slot: the row's tags, a few WMDS `Badge`s (e.g. "Case study", "Guide"), at the row's end before its arrow (from
+     * md; on phones they join the meta line). Needs `columns="page"`.
+     */
+    tags?: ReactNode;
     className?: IndexListLayoutClassName;
 }
 /**
  * Editorial index — a ruled list where each row has a meta column, a large linked title, and an
  * optional preview that expands under the title. Optional column captions share the rows' tracks.
  */
-declare function IndexListRoot({ captions, size, titleAs, empty, resultsLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: IndexListProps): import("react").JSX.Element;
-declare function IndexListItem({ title, href, render, meta, preview, defaultOpen, open: openProp, onOpenChange, previewLabel, className, }: IndexListItemProps): import("react").JSX.Element;
+declare function IndexListRoot({ captions, size, titleAs, columns, empty, resultsLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: IndexListProps): import("react").JSX.Element;
+declare function IndexListItem({ title, href, render, meta, preview, defaultOpen, open: openProp, onOpenChange, previewLabel, rowLink: rowLinkProp, arrow, external, tags, className, }: IndexListItemProps): import("react").JSX.Element;
 export declare const IndexList: typeof IndexListRoot & {
     Item: typeof IndexListItem;
 };

package/dist/components/molecules/IndexList/IndexList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndexList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/IndexList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAiBL,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAG3B,sDAAsD;AACtD,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,IAAI,EAAE,SAAS,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,OAAc,EACd,KAAK,EACL,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAmChB;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,+BA6CpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"IndexList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/IndexList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAiCL,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAG3B,sDAAsD;AACtD,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,IAAI,EAAE,SAAS,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAUD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,OAAc,EACd,OAAkB,EAClB,KAAK,EACL,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAoChB;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EAAE,WAAmB,EAC5B,KAAa,EACb,QAAgB,EAChB,IAAI,EACJ,SAAS,GACV,EAAE,kBAAkB,+BAsEpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/molecules/IndexList/IndexList.js

@@ -3,97 +3,137 @@ import { cn as e } from "../../../lib/cn.js";
 import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
 import { TextLink as n } from "../../atoms/TextLink/TextLink.js";
 import { emptySlot as r } from "../EmptyState/EmptyState.js";
-import { indexListCaptionsClasses as i, indexListChevronClasses as a, indexListEmptyClasses as o, indexListItemClasses as s, indexListListClasses as c, indexListMetaClasses as l, indexListPanelClasses as u, indexListPanelContentClasses as d, indexListPanelInnerClasses as f, indexListRootClasses as p, indexListSizes as m, indexListTitleCellClasses as h, indexListTitleClasses as g, indexListTitleElements as _, indexListTitleSizeClasses as v, indexListToggleAlignClasses as y } from "./indexListStyles.js";
-import { Children as b, createContext as x, useContext as S, useId as C, useMemo as w, useState as T } from "react";
-import { ChevronDown as E } from "lucide-react";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { indexListArrowClasses as i, indexListArrowNudgeClasses as a, indexListArrowNudgeExternalClasses as o, indexListCaptionsClasses as s, indexListChevronClasses as c, indexListEmptyClasses as l, indexListItemClasses as u, indexListListClasses as d, indexListMetaClasses as f, indexListPageCaptionsClasses as p, indexListPageEndClasses as m, indexListPageItemClasses as h, indexListPageMetaClasses as g, indexListPagePanelClasses as _, indexListPageRootClasses as v, indexListPageTitleCellClasses as y, indexListPageTitleCellEndClasses as b, indexListPanelClasses as ee, indexListPanelContentClasses as x, indexListPanelInnerClasses as S, indexListRootClasses as C, indexListRowLinkClasses as w, indexListSizes as T, indexListTagsClasses as te, indexListTagsInMetaClasses as E, indexListTitleCellClasses as D, indexListTitleClasses as O, indexListTitleElements as k, indexListTitleSizeClasses as A, indexListToggleAlignClasses as j } from "./indexListStyles.js";
+import { Children as M, createContext as N, useContext as P, useId as F, useMemo as I, useState as ne } from "react";
+import { ArrowRight as L, ArrowUpRight as R, ChevronDown as z } from "lucide-react";
+import { jsx as B, jsxs as V } from "react/jsx-runtime";
 //#region src/components/molecules/IndexList/IndexList.tsx
-var k = x({
+var H = N({
 	size: "lg",
-	titleAs: "h2"
+	titleAs: "h2",
+	page: !1
 });
-function A({ captions: t, size: n = "lg", titleAs: a = "h2", empty: s, resultsLabel: l, "aria-label": u, "aria-labelledby": d, children: f, className: m }) {
-	let h = b.toArray(f).length > 0, g = w(() => ({
+function U({ captions: t, size: n = "lg", titleAs: i = "h2", columns: a = "tracks", empty: o, resultsLabel: c, "aria-label": u, "aria-labelledby": f, children: m, className: h }) {
+	let g = M.toArray(m).length > 0, _ = a === "page", y = I(() => ({
 		size: n,
-		titleAs: a
-	}), [n, a]);
-	return /* @__PURE__ */ D(k.Provider, {
-		value: g,
-		children: /* @__PURE__ */ O("div", {
-			className: e(p, m),
+		titleAs: i,
+		page: _
+	}), [
+		n,
+		i,
+		_
+	]);
+	return /* @__PURE__ */ B(H.Provider, {
+		value: y,
+		children: /* @__PURE__ */ V("div", {
+			className: e(_ ? v : C, h),
 			"data-size": n,
+			"data-columns": a,
 			children: [
-				h && t != null ? /* @__PURE__ */ O("div", {
-					className: i,
+				g && t != null ? /* @__PURE__ */ V("div", {
+					className: _ ? p : s,
 					"aria-hidden": "true",
 					"data-index-list-captions": "",
-					children: [/* @__PURE__ */ O("span", { children: ["/ ", t.meta] }), /* @__PURE__ */ O("span", {
-						className: "@lg:col-start-2",
+					children: [/* @__PURE__ */ V("span", {
+						className: _ ? "md:col-span-2" : void 0,
+						children: ["/ ", t.meta]
+					}), /* @__PURE__ */ V("span", {
+						className: _ ? "md:col-span-6 md:col-start-3 lg:col-span-10" : "@lg:col-start-2",
 						children: ["/ ", t.title]
 					})]
 				}) : null,
-				h ? /* @__PURE__ */ D("ul", {
+				g ? /* @__PURE__ */ B("ul", {
 					role: "list",
 					"aria-label": u,
-					"aria-labelledby": d,
-					className: e(c, t != null && "@lg:border-t-0"),
-					children: f
-				}) : s == null ? null : /* @__PURE__ */ D("div", {
-					className: o,
+					"aria-labelledby": f,
+					className: e(d, _ && "col-span-full grid grid-cols-subgrid", t != null && "@lg:border-t-0"),
+					children: m
+				}) : o == null ? null : /* @__PURE__ */ B("div", {
+					className: l,
 					"data-index-list-empty": "",
-					children: r(s)
+					children: r(o)
 				}),
-				l == null ? null : /* @__PURE__ */ D("p", {
+				c == null ? null : /* @__PURE__ */ B("p", {
 					role: "status",
 					className: "sr-only",
-					children: l
+					children: c
 				})
 			]
 		})
 	});
 }
-function j({ title: r, href: i, render: o, meta: c, preview: p, defaultOpen: m = !1, open: _, onOpenChange: b, previewLabel: x, className: w }) {
-	let { size: A, titleAs: j } = S(k), M = C(), [N, P] = T(m), F = _ !== void 0, I = F ? _ : N, L = p != null;
-	function R() {
-		let e = !I;
-		F || P(e), b?.(e);
+function W({ title: r, href: s, render: l, meta: d, preview: p, defaultOpen: v = !1, open: C, onOpenChange: T, previewLabel: k, rowLink: M = !1, arrow: N = !1, external: I = !1, tags: U, className: W }) {
+	let { size: G, titleAs: K, page: q } = P(H), J = M || N, Y = q && (N || U != null), X = F(), [re, ie] = ne(v), Z = C !== void 0, Q = Z ? C : re, $ = p != null;
+	function ae() {
+		let e = !Q;
+		Z || ie(e), T?.(e);
 	}
-	return /* @__PURE__ */ O("li", {
-		className: e(s, w),
+	return /* @__PURE__ */ V("li", {
+		className: e(q ? h : u, J && w, W),
+		"data-row-link": J ? "" : void 0,
 		children: [
-			c == null ? null : /* @__PURE__ */ D("div", {
-				className: l,
-				children: c
+			d == null ? null : /* @__PURE__ */ V("div", {
+				className: q ? g : f,
+				children: [d, q && U != null ? /* @__PURE__ */ B("span", {
+					className: E,
+					children: U
+				}) : null]
+			}),
+			/* @__PURE__ */ V("div", {
+				className: q ? Y ? b : y : D,
+				children: [
+					/* @__PURE__ */ B(K, {
+						className: e(O, A[G]),
+						children: /* @__PURE__ */ B(n, {
+							variant: "quiet",
+							href: s,
+							render: l,
+							newTab: I,
+							children: r
+						})
+					}),
+					$ ? /* @__PURE__ */ B(t, {
+						size: "md",
+						className: e(j[G], J && "relative z-10"),
+						icon: /* @__PURE__ */ B(z, { className: e(c, Q && "rotate-180") }),
+						"aria-label": k ?? `Preview: ${r}`,
+						title: "",
+						"aria-expanded": Q,
+						"aria-controls": X,
+						onClick: ae
+					}) : null,
+					N && !q ? /* @__PURE__ */ B("span", {
+						"aria-hidden": "true",
+						className: e(i, I ? o : a),
+						children: B(I ? R : L, {
+							className: "size-5",
+							strokeWidth: 2
+						})
+					}) : null
+				]
 			}),
-			/* @__PURE__ */ O("div", {
-				className: h,
-				children: [/* @__PURE__ */ D(j, {
-					className: e(g, v[A]),
-					children: /* @__PURE__ */ D(n, {
-						variant: "quiet",
-						href: i,
-						render: o,
-						children: r
+			Y ? /* @__PURE__ */ V("div", {
+				className: m,
+				children: [U == null ? null : /* @__PURE__ */ B("span", {
+					className: te,
+					children: U
+				}), N ? /* @__PURE__ */ B("span", {
+					"aria-hidden": "true",
+					className: e(i, I ? o : a),
+					children: B(I ? R : L, {
+						className: "size-5",
+						strokeWidth: 2
 					})
-				}), L ? /* @__PURE__ */ D(t, {
-					size: "md",
-					className: y[A],
-					icon: /* @__PURE__ */ D(E, { className: e(a, I && "rotate-180") }),
-					"aria-label": x ?? `Preview: ${r}`,
-					title: "",
-					"aria-expanded": I,
-					"aria-controls": M,
-					onClick: R
 				}) : null]
-			}),
-			L ? /* @__PURE__ */ D("div", {
-				className: e("motion-collapse", u),
-				"data-visible": I ? "true" : "false",
-				children: /* @__PURE__ */ D("div", {
-					id: M,
-					className: f,
-					children: /* @__PURE__ */ D("div", {
-						className: d,
+			}) : null,
+			$ ? /* @__PURE__ */ B("div", {
+				className: e("motion-collapse", q ? _ : ee),
+				"data-visible": Q ? "true" : "false",
+				children: /* @__PURE__ */ B("div", {
+					id: X,
+					className: S,
+					children: /* @__PURE__ */ B("div", {
+						className: x,
 						children: p
 					})
 				})
@@ -101,6 +141,6 @@ function j({ title: r, href: i, render: o, meta: c, preview: p, defaultOpen: m =
 		]
 	});
 }
-var M = Object.assign(A, { Item: j });
+var G = Object.assign(U, { Item: W });
 //#endregion
-export { M as IndexList, m as indexListSizes, _ as indexListTitleElements };
+export { G as IndexList, T as indexListSizes, k as indexListTitleElements };

package/dist/components/molecules/IndexList/indexListStyles.d.ts

@@ -26,4 +26,33 @@ export declare const indexListPanelInnerClasses = "overflow-hidden";
 export declare const indexListPanelContentClasses: string;
 /** Empty state — between the same rules as the rows. */
 export declare const indexListEmptyClasses = "border-y border-border py-8";
+/**
+ * `columns="page"`: the list sits on the WMDS page grid (subgrid) instead of its own tracks. The meta takes the
+ * first two columns from md (above the title on phones), the title the width, and a row's arrow the last column.
+ */
+export declare const indexListPageRootClasses = "col-span-full grid min-w-0 grid-cols-subgrid";
+export declare const indexListPageListClasses = "col-span-full grid grid-cols-subgrid";
+export declare const indexListPageCaptionsClasses: string;
+export declare const indexListPageItemClasses = "col-span-full grid grid-cols-subgrid items-baseline border-b border-border py-4";
+export declare const indexListPageMetaClasses: string;
+/** The title cell beside the meta; a row with an end cell (tags, arrow) leaves the last columns for it. */
+export declare const indexListPageTitleCellClasses = "col-span-full flex min-w-0 items-start gap-3 md:col-span-6 md:col-start-3 lg:col-span-10";
+export declare const indexListPageTitleCellEndClasses = "col-span-3 flex min-w-0 items-start gap-3 md:col-span-4 md:col-start-3 lg:col-span-7";
+/** The end cell: the row's tags (badges) then its arrow, flush to the end; one column on phones (arrow only), two from md, three from lg. */
+export declare const indexListPageEndClasses = "col-span-1 flex items-center justify-end gap-3 self-center md:col-span-2 lg:col-span-3";
+/** Tags sit in the end cell from md; on phones they join the meta line. */
+export declare const indexListTagsClasses = "flex-wrap justify-end gap-2 max-md:hidden md:flex";
+export declare const indexListTagsInMetaClasses = "ms-2 flex-wrap gap-2 align-middle max-md:inline-flex md:hidden";
+export declare const indexListPagePanelClasses = "col-span-full md:col-span-6 md:col-start-3 lg:col-span-10";
+/**
+ * A row that is one link (`arrow` or `external`): the title's link covers the whole row, and the row lights up under
+ * the pointer or keyboard focus with a quiet fill that bleeds a little past the text.
+ */
+export declare const indexListRowLinkClasses: string;
+/** The row's arrow at the end: decorative (the title says where it goes), nudged on hover. */
+export declare const indexListArrowClasses: string;
+export declare const indexListArrowNudgeClasses = "group-has-[a:hover]/row:translate-x-1";
+export declare const indexListArrowNudgeExternalClasses = "group-has-[a:hover]/row:-translate-y-0.5 group-has-[a:hover]/row:translate-x-0.5";
+/** The preview control stays clickable over the row's link. */
+export declare const indexListToggleAboveRowClasses = "relative z-10";
 //# sourceMappingURL=indexListStyles.d.ts.map

package/dist/components/molecules/IndexList/indexListStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"indexListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/indexListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,6BAA8B,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,sBAAsB,6BAA8B,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAU5E,eAAO,MAAM,oBAAoB,4CAA4C,CAAC;AAE9E,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,QAIpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,6CAA6C,CAAC;AAE/E,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,mBAAmB,CAAC;AAE9D,+GAA+G;AAC/G,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAA+D,CAAC;AAEjG,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,mDAAmD,CAAC;AAE1F,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAInE,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAuC,CAAC;AAE1E,gFAAgF;AAChF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAyD,CAAC;AAE9F,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,oBAAoB,CAAC;AAE5D,eAAO,MAAM,4BAA4B,QAA4D,CAAC;AAEtG,wDAAwD;AACxD,eAAO,MAAM,qBAAqB,gCAAgC,CAAC"}
+{"version":3,"file":"indexListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/indexListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,6BAA8B,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,sBAAsB,6BAA8B,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAU5E,eAAO,MAAM,oBAAoB,4CAA4C,CAAC;AAE9E,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,QAIpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,6CAA6C,CAAC;AAE/E,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,mBAAmB,CAAC;AAE9D,+GAA+G;AAC/G,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAA+D,CAAC;AAEjG,gFAAgF;AAChF,eAAO,MAAM,yBAAyB,mDAAmD,CAAC;AAE1F,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAInE,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAuC,CAAC;AAE1E,gFAAgF;AAChF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAyD,CAAC;AAE9F,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,oBAAoB,CAAC;AAE5D,eAAO,MAAM,4BAA4B,QAA4D,CAAC;AAEtG,wDAAwD;AACxD,eAAO,MAAM,qBAAqB,gCAAgC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,wBAAwB,iDAAiD,CAAC;AACvF,eAAO,MAAM,wBAAwB,yCAAyC,CAAC;AAC/E,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AACF,eAAO,MAAM,wBAAwB,oFAAoF,CAAC;AAC1H,eAAO,MAAM,wBAAwB,QAA0F,CAAC;AAChI,2GAA2G;AAC3G,eAAO,MAAM,6BAA6B,6FAA6F,CAAC;AACxI,eAAO,MAAM,gCAAgC,yFAAyF,CAAC;AACvI,6IAA6I;AAC7I,eAAO,MAAM,uBAAuB,2FAA2F,CAAC;AAChI,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,sDAAsD,CAAC;AACxF,eAAO,MAAM,0BAA0B,mEAAmE,CAAC;AAC3G,eAAO,MAAM,yBAAyB,8DAA8D,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAMnC,CAAC;AACF,8FAA8F;AAC9F,eAAO,MAAM,qBAAqB,QAGjC,CAAC;AACF,eAAO,MAAM,0BAA0B,0CAA0C,CAAC;AAClF,eAAO,MAAM,kCAAkC,qFAAqF,CAAC;AACrI,+DAA+D;AAC/D,eAAO,MAAM,8BAA8B,kBAAkB,CAAC"}

package/dist/components/molecules/IndexList/indexListStyles.js

@@ -19,6 +19,6 @@ var r = [
 	lg: "mt-[calc((var(--text-display-3-size)*var(--text-display-3-leading)-2.75rem)/2)]",
 	md: "mt-[calc((var(--text-heading-1-size)*var(--text-heading-1-leading)-2.75rem)/2)]",
 	sm: "mt-[calc((var(--text-heading-3-size)*var(--text-heading-3-leading)-2.75rem)/2)]"
-}, g = e("transition-transform", n("medium")), _ = "rotate-180", v = "@lg:col-start-2", y = "overflow-hidden", b = e(t("body"), "text-muted pt-2 pb-1 pr-14"), x = "border-y border-border py-8";
+}, g = e("transition-transform", n("medium")), _ = "rotate-180", v = "@lg:col-start-2", y = "overflow-hidden", b = e(t("body"), "text-muted pt-2 pb-1 pr-14"), x = "border-y border-border py-8", S = "col-span-full grid min-w-0 grid-cols-subgrid", C = "col-span-full grid grid-cols-subgrid", w = e("col-span-full grid-cols-subgrid border-b border-border-emphasized pb-3 text-muted max-md:hidden md:grid", t("eyebrow")), T = "col-span-full grid grid-cols-subgrid items-baseline border-b border-border py-4", E = e(t("caption"), "col-span-full mb-1 tabular-nums md:col-span-2 md:mb-0"), D = "col-span-full flex min-w-0 items-start gap-3 md:col-span-6 md:col-start-3 lg:col-span-10", O = "col-span-3 flex min-w-0 items-start gap-3 md:col-span-4 md:col-start-3 lg:col-span-7", k = "col-span-1 flex items-center justify-end gap-3 self-center md:col-span-2 lg:col-span-3", A = "flex-wrap justify-end gap-2 max-md:hidden md:flex", j = "ms-2 flex-wrap gap-2 align-middle max-md:inline-flex md:hidden", M = "col-span-full md:col-span-6 md:col-start-3 lg:col-span-10", N = e("group/row relative isolate [&_a]:after:absolute [&_a]:after:inset-0 [&_a]:after:content-['']", "before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-3 before:-z-10 before:rounded-md before:bg-ghost-hover before:opacity-0", "has-[a:hover]:before:opacity-100 has-[a:focus-visible]:before:opacity-100", n("fast"), "before:transition-opacity"), P = e("pointer-events-none flex shrink-0 justify-end self-center text-muted transition-transform", n("fast")), F = "group-has-[a:hover]/row:translate-x-1", I = "group-has-[a:hover]/row:-translate-y-0.5 group-has-[a:hover]/row:translate-x-0.5", L = "relative z-10";
 //#endregion
-export { s as indexListCaptionsClasses, g as indexListChevronClasses, _ as indexListChevronOpenClasses, x as indexListEmptyClasses, u as indexListItemClasses, l as indexListListCaptionedClasses, c as indexListListClasses, d as indexListMetaClasses, v as indexListPanelClasses, b as indexListPanelContentClasses, y as indexListPanelInnerClasses, o as indexListRootClasses, r as indexListSizes, f as indexListTitleCellClasses, m as indexListTitleClasses, i as indexListTitleElements, p as indexListTitleSizeClasses, h as indexListToggleAlignClasses };
+export { P as indexListArrowClasses, F as indexListArrowNudgeClasses, I as indexListArrowNudgeExternalClasses, s as indexListCaptionsClasses, g as indexListChevronClasses, _ as indexListChevronOpenClasses, x as indexListEmptyClasses, u as indexListItemClasses, l as indexListListCaptionedClasses, c as indexListListClasses, d as indexListMetaClasses, w as indexListPageCaptionsClasses, k as indexListPageEndClasses, T as indexListPageItemClasses, C as indexListPageListClasses, E as indexListPageMetaClasses, M as indexListPagePanelClasses, S as indexListPageRootClasses, D as indexListPageTitleCellClasses, O as indexListPageTitleCellEndClasses, v as indexListPanelClasses, b as indexListPanelContentClasses, y as indexListPanelInnerClasses, o as indexListRootClasses, N as indexListRowLinkClasses, r as indexListSizes, A as indexListTagsClasses, j as indexListTagsInMetaClasses, f as indexListTitleCellClasses, m as indexListTitleClasses, i as indexListTitleElements, p as indexListTitleSizeClasses, L as indexListToggleAboveRowClasses, h as indexListToggleAlignClasses };