@pinfold/core 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -130,7 +130,7 @@ function setAccordionItem(value, rows, id, open, rules) {
   if (!row || row.disabled || rules.disabled) return null;
   const isOpen = value.indexOf(id) !== -1;
   if (isOpen === open) return null;
-  if (!open && rules.mode === "single" && !rules.collapsible) return null;
+  if (!open && !rules.collapsible && value.length === 1) return null;
   if (open) return rules.mode === "single" ? [id] : value.concat(id);
   return value.filter((v) => v !== id);
 }
@@ -140,7 +140,7 @@ function openAllAccordion(value, rows, rules) {
   return sameSet(value, next) ? null : next;
 }
 function closeAllAccordion(value, rows, rules) {
-  if (rules.disabled || rules.mode === "single" && !rules.collapsible) return null;
+  if (rules.disabled || !rules.collapsible) return null;
   const locked = new Set(rows.filter((r) => r.disabled).map((r) => r.id));
   const next = value.filter((id) => locked.has(id));
   return sameSet(value, next) ? null : next;
@@ -162,6 +162,36 @@ function mapAccordionFields(records, fields) {
     return out;
   });
 }
+var ZERO = /^0*\.?0*(px|rem|em|%|vh|vw)?$/;
+function accordionRowsJoined(variant = "solid", gap) {
+  if (gap === void 0 || gap === null || gap === "") return variant !== "separated" && variant !== "filled";
+  if (gap === "none" || gap === 0) return true;
+  return typeof gap === "string" && ZERO.test(gap.trim());
+}
+function inactiveAccordionOptions(input) {
+  var _a;
+  const variant = (_a = input.variant) != null ? _a : "solid";
+  const joined = accordionRowsJoined(variant, input.gap);
+  const card = variant === "solid" || variant === "outline";
+  const rows = variant === "separated" || variant === "filled";
+  const out = {};
+  if (variant === "ghost") {
+    out.radius = "Ghost has no surface to round. Pick solid or outline for a rounded container.";
+    out.itemRadius = "Ghost rows have no surface to round. Pick separated or filled for rounded rows.";
+  }
+  if (card) out.itemRadius = "In a solid or outline card the rows are not surfaces; the card takes `radius`.";
+  if (rows && joined) out.itemRadius = "With no gap the rows join into one group, rounded by `radius`.";
+  if (rows && !joined && input.itemRadius !== void 0) {
+    out.radius = 'Separated and filled rows are the surfaces and `itemRadius` already rounds them. Unset `itemRadius` so `radius` reaches the rows, or set `gap: "none"` to join them.';
+  }
+  if (rows && !joined) out.dividers = 'The rows are already apart. Dividers appear when `gap` is "none".';
+  if (input.indicator === "none") {
+    out.indicatorPosition = 'There is no indicator (`indicator: "none"`).';
+    out.animateIndicator = 'There is no indicator (`indicator: "none"`).';
+  }
+  if (input.disabled) out.disabledIds = "Every row is already disabled (`disabled: true`).";
+  return out;
+}
 function shouldMountPanel(policy, open, everOpened) {
   if (policy === "always" || open) return true;
   return policy === "first-open" && everOpened;
@@ -183,18 +213,20 @@ function resetWarnings() {
 }
 
 // src/index.ts
-var version = "0.1.0";
+var version = "0.2.0";
 
 exports.__DEV__ = __DEV__;
 exports.accordionFocusTarget = accordionFocusTarget;
 exports.accordionPartIds = accordionPartIds;
 exports.accordionRowId = accordionRowId;
+exports.accordionRowsJoined = accordionRowsJoined;
 exports.ariaAttr = ariaAttr;
 exports.closeAllAccordion = closeAllAccordion;
 exports.cn = cn;
 exports.composeRefs = composeRefs;
 exports.dataAttr = dataAttr;
 exports.dimensionVars = dimensionVars;
+exports.inactiveAccordionOptions = inactiveAccordionOptions;
 exports.initialAccordionValue = initialAccordionValue;
 exports.mapAccordionFields = mapAccordionFields;
 exports.mergeProps = mergeProps;

package/dist/index.d.cts

@@ -8,7 +8,7 @@ type PinfoldTheme = 'light' | 'dark' | 'system';
 /** When a component's code loads. `auto`: light components eagerly, heavy ones when visible. */
 type PinfoldLazy = 'auto' | 'eager' | 'visible' | 'idle';
 /** Visual style pack, applied through `data-pinfold-style`. */
-type PinfoldStylePack = 'default' | 'glass' | 'bauhaus' | 'brutalist' | 'noise' | 'soft';
+type PinfoldStylePack = 'default' | 'glass' | 'material' | 'noise' | 'brutalist';
 /** Any DOM props bag a component hands back from a `getXProps()` call. */
 type PropsBag = Record<string, any>;
 /** A CSS length. Numbers are px, strings pass through (`'50%'`, `'12rem'`, `calc()`). */
@@ -128,13 +128,13 @@ declare function initialAccordionValue(items: ReadonlyArray<{
 }>, defaultValue: readonly string[] | undefined, mode: AccordionMode): string[];
 /**
  * The open set after asking row `id` to become `open`, or `null` when the
- * rules refuse (unknown or disabled row, no change, or closing the only open
- * row of a non-collapsible single accordion).
+ * rules refuse (unknown or disabled row, no change, or closing the last open
+ * row of a non-collapsible accordion, in either mode).
  */
 declare function setAccordionItem(value: readonly string[], rows: readonly AccordionRowLike[], id: string, open: boolean, rules: AccordionRules): string[] | null;
 /** `openAll`: every enabled row, multiple mode only. */
 declare function openAllAccordion(value: readonly string[], rows: readonly AccordionRowLike[], rules: AccordionRules): string[] | null;
-/** `closeAll`: refused for a non-collapsible single accordion. Disabled rows keep their state. */
+/** `closeAll`: refused for a non-collapsible accordion. Disabled rows keep their state. */
 declare function closeAllAccordion(value: readonly string[], rows: readonly AccordionRowLike[], rules: AccordionRules): string[] | null;
 interface AccordionKeyOptions {
     orientation?: PinfoldOrientation;
@@ -150,8 +150,34 @@ declare function accordionFocusTarget(key: string, index: number, count: number,
  * Field mapping: lets raw records (a CMS row, a DB result) feed the accordion
  * without a `.map()`. `{ id: 'slug', title: 'question', content: 'answer' }`.
  */
-type AccordionFieldMap = Partial<Record<'id' | 'title' | 'content' | 'description' | 'icon' | 'badge' | 'disabled' | 'defaultOpen', string>>;
+type AccordionFieldMap<Row = any> = Partial<Record<'id' | 'title' | 'content' | 'description' | 'icon' | 'endIcon' | 'badge' | 'disabled' | 'defaultOpen', Extract<keyof Row, string>>>;
 declare function mapAccordionFields<T>(records: readonly any[], fields: AccordionFieldMap | undefined): T[];
+/**
+ * The appearance cascade, as rules every adapter and the docs share:
+ * 1. The variant decides what is a surface: the container (solid, outline), each row
+ *    (separated, filled) or nothing (ghost).
+ * 2. `radius` shapes the container; `itemRadius` defaults to it.
+ * 3. A zero gap joins the rows. Joined separated or filled rows become one group whose outer
+ *    corners follow the container `radius`; `dividers` draws the lines inside it.
+ */
+type AccordionVariantName = 'solid' | 'outline' | 'separated' | 'filled' | 'ghost';
+interface AccordionAppearanceInput {
+    variant?: AccordionVariantName;
+    /** Resolved gap: `dimensions.gap` if set, else `gap`. */
+    gap?: unknown;
+    radius?: unknown;
+    itemRadius?: unknown;
+    dividers?: boolean;
+    indicator?: unknown;
+    disabled?: boolean;
+}
+/** Whether the rows touch. The card and ghost variants default to no gap; separated and filled to a small one. */
+declare function accordionRowsJoined(variant?: AccordionVariantName, gap?: unknown): boolean;
+/**
+ * Options that have no visible effect with the rest of the config, each with the reason and
+ * what to do instead. Playgrounds disable them; the dev build warns when one is set explicitly.
+ */
+declare function inactiveAccordionOptions(input: AccordionAppearanceInput): Record<string, string>;
 /** When panel content is mounted. */
 type AccordionMountPanels = 'always' | 'open' | 'first-open';
 /** Whether a panel's content should be in the DOM right now. */
@@ -179,7 +205,7 @@ declare function resetWarnings(): void;
  */
 
 /** Package version, injected at publish time by the release script. */
-declare const version = "0.1.0";
+declare const version = "0.2.0";
 
-export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };
-export type { AccordionChangeDetails, AccordionChangeReason, AccordionFieldMap, AccordionKeyOptions, AccordionMode, AccordionMountPanels, AccordionRowLike, AccordionRules, Length, ListNavOptions, PinfoldDir, PinfoldLazy, PinfoldOrientation, PinfoldRadius, PinfoldSize, PinfoldStylePack, PinfoldTheme, PinfoldTone, PropsBag, Ref, Slottable, VariantProps };
+export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, accordionRowsJoined, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, inactiveAccordionOptions, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };
+export type { AccordionAppearanceInput, AccordionChangeDetails, AccordionChangeReason, AccordionFieldMap, AccordionKeyOptions, AccordionMode, AccordionMountPanels, AccordionRowLike, AccordionRules, AccordionVariantName, Length, ListNavOptions, PinfoldDir, PinfoldLazy, PinfoldOrientation, PinfoldRadius, PinfoldSize, PinfoldStylePack, PinfoldTheme, PinfoldTone, PropsBag, Ref, Slottable, VariantProps };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ type PinfoldTheme = 'light' | 'dark' | 'system';
 /** When a component's code loads. `auto`: light components eagerly, heavy ones when visible. */
 type PinfoldLazy = 'auto' | 'eager' | 'visible' | 'idle';
 /** Visual style pack, applied through `data-pinfold-style`. */
-type PinfoldStylePack = 'default' | 'glass' | 'bauhaus' | 'brutalist' | 'noise' | 'soft';
+type PinfoldStylePack = 'default' | 'glass' | 'material' | 'noise' | 'brutalist';
 /** Any DOM props bag a component hands back from a `getXProps()` call. */
 type PropsBag = Record<string, any>;
 /** A CSS length. Numbers are px, strings pass through (`'50%'`, `'12rem'`, `calc()`). */
@@ -128,13 +128,13 @@ declare function initialAccordionValue(items: ReadonlyArray<{
 }>, defaultValue: readonly string[] | undefined, mode: AccordionMode): string[];
 /**
  * The open set after asking row `id` to become `open`, or `null` when the
- * rules refuse (unknown or disabled row, no change, or closing the only open
- * row of a non-collapsible single accordion).
+ * rules refuse (unknown or disabled row, no change, or closing the last open
+ * row of a non-collapsible accordion, in either mode).
  */
 declare function setAccordionItem(value: readonly string[], rows: readonly AccordionRowLike[], id: string, open: boolean, rules: AccordionRules): string[] | null;
 /** `openAll`: every enabled row, multiple mode only. */
 declare function openAllAccordion(value: readonly string[], rows: readonly AccordionRowLike[], rules: AccordionRules): string[] | null;
-/** `closeAll`: refused for a non-collapsible single accordion. Disabled rows keep their state. */
+/** `closeAll`: refused for a non-collapsible accordion. Disabled rows keep their state. */
 declare function closeAllAccordion(value: readonly string[], rows: readonly AccordionRowLike[], rules: AccordionRules): string[] | null;
 interface AccordionKeyOptions {
     orientation?: PinfoldOrientation;
@@ -150,8 +150,34 @@ declare function accordionFocusTarget(key: string, index: number, count: number,
  * Field mapping: lets raw records (a CMS row, a DB result) feed the accordion
  * without a `.map()`. `{ id: 'slug', title: 'question', content: 'answer' }`.
  */
-type AccordionFieldMap = Partial<Record<'id' | 'title' | 'content' | 'description' | 'icon' | 'badge' | 'disabled' | 'defaultOpen', string>>;
+type AccordionFieldMap<Row = any> = Partial<Record<'id' | 'title' | 'content' | 'description' | 'icon' | 'endIcon' | 'badge' | 'disabled' | 'defaultOpen', Extract<keyof Row, string>>>;
 declare function mapAccordionFields<T>(records: readonly any[], fields: AccordionFieldMap | undefined): T[];
+/**
+ * The appearance cascade, as rules every adapter and the docs share:
+ * 1. The variant decides what is a surface: the container (solid, outline), each row
+ *    (separated, filled) or nothing (ghost).
+ * 2. `radius` shapes the container; `itemRadius` defaults to it.
+ * 3. A zero gap joins the rows. Joined separated or filled rows become one group whose outer
+ *    corners follow the container `radius`; `dividers` draws the lines inside it.
+ */
+type AccordionVariantName = 'solid' | 'outline' | 'separated' | 'filled' | 'ghost';
+interface AccordionAppearanceInput {
+    variant?: AccordionVariantName;
+    /** Resolved gap: `dimensions.gap` if set, else `gap`. */
+    gap?: unknown;
+    radius?: unknown;
+    itemRadius?: unknown;
+    dividers?: boolean;
+    indicator?: unknown;
+    disabled?: boolean;
+}
+/** Whether the rows touch. The card and ghost variants default to no gap; separated and filled to a small one. */
+declare function accordionRowsJoined(variant?: AccordionVariantName, gap?: unknown): boolean;
+/**
+ * Options that have no visible effect with the rest of the config, each with the reason and
+ * what to do instead. Playgrounds disable them; the dev build warns when one is set explicitly.
+ */
+declare function inactiveAccordionOptions(input: AccordionAppearanceInput): Record<string, string>;
 /** When panel content is mounted. */
 type AccordionMountPanels = 'always' | 'open' | 'first-open';
 /** Whether a panel's content should be in the DOM right now. */
@@ -179,7 +205,7 @@ declare function resetWarnings(): void;
  */
 
 /** Package version, injected at publish time by the release script. */
-declare const version = "0.1.0";
+declare const version = "0.2.0";
 
-export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };
-export type { AccordionChangeDetails, AccordionChangeReason, AccordionFieldMap, AccordionKeyOptions, AccordionMode, AccordionMountPanels, AccordionRowLike, AccordionRules, Length, ListNavOptions, PinfoldDir, PinfoldLazy, PinfoldOrientation, PinfoldRadius, PinfoldSize, PinfoldStylePack, PinfoldTheme, PinfoldTone, PropsBag, Ref, Slottable, VariantProps };
+export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, accordionRowsJoined, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, inactiveAccordionOptions, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };
+export type { AccordionAppearanceInput, AccordionChangeDetails, AccordionChangeReason, AccordionFieldMap, AccordionKeyOptions, AccordionMode, AccordionMountPanels, AccordionRowLike, AccordionRules, AccordionVariantName, Length, ListNavOptions, PinfoldDir, PinfoldLazy, PinfoldOrientation, PinfoldRadius, PinfoldSize, PinfoldStylePack, PinfoldTheme, PinfoldTone, PropsBag, Ref, Slottable, VariantProps };

package/dist/index.js

@@ -128,7 +128,7 @@ function setAccordionItem(value, rows, id, open, rules) {
   if (!row || row.disabled || rules.disabled) return null;
   const isOpen = value.indexOf(id) !== -1;
   if (isOpen === open) return null;
-  if (!open && rules.mode === "single" && !rules.collapsible) return null;
+  if (!open && !rules.collapsible && value.length === 1) return null;
   if (open) return rules.mode === "single" ? [id] : value.concat(id);
   return value.filter((v) => v !== id);
 }
@@ -138,7 +138,7 @@ function openAllAccordion(value, rows, rules) {
   return sameSet(value, next) ? null : next;
 }
 function closeAllAccordion(value, rows, rules) {
-  if (rules.disabled || rules.mode === "single" && !rules.collapsible) return null;
+  if (rules.disabled || !rules.collapsible) return null;
   const locked = new Set(rows.filter((r) => r.disabled).map((r) => r.id));
   const next = value.filter((id) => locked.has(id));
   return sameSet(value, next) ? null : next;
@@ -160,6 +160,36 @@ function mapAccordionFields(records, fields) {
     return out;
   });
 }
+var ZERO = /^0*\.?0*(px|rem|em|%|vh|vw)?$/;
+function accordionRowsJoined(variant = "solid", gap) {
+  if (gap === void 0 || gap === null || gap === "") return variant !== "separated" && variant !== "filled";
+  if (gap === "none" || gap === 0) return true;
+  return typeof gap === "string" && ZERO.test(gap.trim());
+}
+function inactiveAccordionOptions(input) {
+  var _a;
+  const variant = (_a = input.variant) != null ? _a : "solid";
+  const joined = accordionRowsJoined(variant, input.gap);
+  const card = variant === "solid" || variant === "outline";
+  const rows = variant === "separated" || variant === "filled";
+  const out = {};
+  if (variant === "ghost") {
+    out.radius = "Ghost has no surface to round. Pick solid or outline for a rounded container.";
+    out.itemRadius = "Ghost rows have no surface to round. Pick separated or filled for rounded rows.";
+  }
+  if (card) out.itemRadius = "In a solid or outline card the rows are not surfaces; the card takes `radius`.";
+  if (rows && joined) out.itemRadius = "With no gap the rows join into one group, rounded by `radius`.";
+  if (rows && !joined && input.itemRadius !== void 0) {
+    out.radius = 'Separated and filled rows are the surfaces and `itemRadius` already rounds them. Unset `itemRadius` so `radius` reaches the rows, or set `gap: "none"` to join them.';
+  }
+  if (rows && !joined) out.dividers = 'The rows are already apart. Dividers appear when `gap` is "none".';
+  if (input.indicator === "none") {
+    out.indicatorPosition = 'There is no indicator (`indicator: "none"`).';
+    out.animateIndicator = 'There is no indicator (`indicator: "none"`).';
+  }
+  if (input.disabled) out.disabledIds = "Every row is already disabled (`disabled: true`).";
+  return out;
+}
 function shouldMountPanel(policy, open, everOpened) {
   if (policy === "always" || open) return true;
   return policy === "first-open" && everOpened;
@@ -181,6 +211,6 @@ function resetWarnings() {
 }
 
 // src/index.ts
-var version = "0.1.0";
+var version = "0.2.0";
 
-export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };
+export { __DEV__, accordionFocusTarget, accordionPartIds, accordionRowId, accordionRowsJoined, ariaAttr, closeAllAccordion, cn, composeRefs, dataAttr, dimensionVars, inactiveAccordionOptions, initialAccordionValue, mapAccordionFields, mergeProps, nextIndexFromKey, normalizeAccordionValue, openAllAccordion, resetWarnings, resolveNode, setAccordionItem, shouldMountPanel, variants, version, warnOnce };

package/dist/meta.cjs

@@ -4,6 +4,7 @@
 var SIZE = ["sm", "md", "lg"];
 var TONE = ["primary", "neutral", "success", "warning", "danger", "info"];
 var RADIUS = ["none", "sm", "md", "lg", "full"];
+var GAP = ["none", "sm", "md", "lg"];
 var SLOTS = [
   "root",
   "item",
@@ -14,6 +15,7 @@ var SLOTS = [
   "title",
   "description",
   "badge",
+  "endIcon",
   "indicator",
   "panel",
   "content"
@@ -38,8 +40,9 @@ var item = {
   title: { ...node("The row heading. A node or `(state) => node`."), required: true },
   content: node("The panel body."),
   description: node("A secondary line under the title."),
-  icon: node("A leading visual."),
+  icon: node("A leading visual: a node, or a string (an emoji, or an icon-font ligature with `classNames.icon`). Overrides the accordion-wide `icon`."),
   badge: node("A trailing chip before the indicator."),
+  endIcon: node("A trailing visual just before the indicator. Overrides the accordion-wide `endIcon`."),
   indicator: {
     type: "enum",
     values: ["chevron", "plus", "caret", "arrow", "none"],
@@ -72,7 +75,7 @@ var accordionMeta = {
       description: "Map raw records onto rows: `{ id: 'slug', title: 'question', content: 'answer' }`.",
       group: "data",
       keys: Object.fromEntries(
-        ["id", "title", "content", "description", "icon", "badge", "disabled", "defaultOpen"].map((k) => [
+        ["id", "title", "content", "description", "icon", "endIcon", "badge", "disabled", "defaultOpen"].map((k) => [
           k,
           { type: "string", description: `Source field for \`${k}\`.`, group: "data" }
         ])
@@ -89,7 +92,7 @@ var accordionMeta = {
     collapsible: {
       type: "boolean",
       default: true,
-      description: "In single mode, lets the user close the open row.",
+      description: "Lets the user close the last open row. `false` keeps at least one row open, in either mode.",
       group: "behaviour",
       control: true
     },
@@ -102,6 +105,7 @@ var accordionMeta = {
       group: "behaviour",
       control: true
     },
+    disabledIds: { type: "string[]", description: "Disables these rows by id.", group: "behaviour" },
     orientation: {
       type: "enum",
       values: ["vertical", "horizontal"],
@@ -155,7 +159,35 @@ var accordionMeta = {
     },
     size: { type: "enum", values: SIZE, default: "md", description: "Size preset.", group: "appearance", control: true },
     tone: { type: "enum", values: TONE, default: "primary", description: "Accent colour role.", group: "appearance", control: true },
-    radius: { type: "enum", values: RADIUS, default: "md", description: "Corner radius preset.", group: "appearance", control: true },
+    radius: {
+      type: "enum",
+      values: RADIUS,
+      orLength: true,
+      auto: "the theme radius (provider `radius`, default md)",
+      description: "Corner radius of the container that holds the rows: a preset, or a length (`20` is px, `'1.25rem'` passes through). Default: the theme radius.",
+      group: "appearance",
+      control: true
+    },
+    itemRadius: {
+      type: "enum",
+      values: RADIUS,
+      orLength: true,
+      auto: "follows `radius`",
+      description: "Corner radius of each row, same values as `radius`. Default: `radius` for separated, filled and ghost rows; square rows inside a solid or outline card.",
+      group: "appearance",
+      control: true
+    },
+    gap: {
+      type: "enum",
+      values: GAP,
+      orLength: true,
+      auto: "none; sm for separated and filled",
+      description: "Space between rows: a preset, or a length (`12` is px). Default: none for solid, outline and ghost; `'sm'` for separated and filled.",
+      group: "appearance",
+      control: true
+    },
+    icon: { ...node("Leading visual for every row: a node, or `(state) => node`. A row\u2019s own `icon` wins."), group: "appearance" },
+    endIcon: { ...node("Trailing visual for every row, just before the indicator. A row\u2019s own `endIcon` wins."), group: "appearance" },
     indicator: {
       type: "enum",
       values: ["chevron", "plus", "caret", "arrow", "none"],
@@ -173,6 +205,13 @@ var accordionMeta = {
       group: "appearance",
       control: true
     },
+    animateIndicator: {
+      type: "boolean",
+      default: true,
+      description: "Rotate (or morph) the indicator when a row opens.",
+      group: "appearance",
+      control: true
+    },
     headingLevel: {
       type: "enum",
       values: [1, 2, 3, 4, 5, 6],
@@ -187,7 +226,7 @@ var accordionMeta = {
       group: "appearance",
       control: true
     },
-    dividers: { type: "boolean", default: true, description: "Lines between rows.", group: "appearance", control: true },
+    dividers: { type: "boolean", default: true, description: "Lines between rows (solid, outline and ghost).", group: "appearance", control: true },
     overflow: {
       type: "object",
       description: "Text overflow per slot. Default: title wraps, description clamps to 2 lines.",
@@ -204,7 +243,7 @@ var accordionMeta = {
         maxWidth: len("Maximum width."),
         height: len("Fixed height."),
         maxHeight: len("Caps the root; rows scroll."),
-        gap: len("Space between rows."),
+        gap: len("Space between rows. Overrides `gap`."),
         paddingX: len("Trigger horizontal padding."),
         paddingY: len("Trigger vertical padding."),
         panelPaddingX: len("Panel horizontal padding."),
@@ -216,7 +255,8 @@ var accordionMeta = {
         iconSize: len("Icon box size."),
         indicatorSize: len("Indicator size."),
         borderWidth: len("Border width."),
-        radius: len("Corner radius as a length."),
+        radius: len("Container corner radius. Overrides `radius`."),
+        itemRadius: len("Row corner radius. Overrides `itemRadius`."),
         duration: len("Transition duration, e.g. '320ms'.")
       }
     },
@@ -280,6 +320,8 @@ var accordionMeta = {
     "--pinfold-accordion-panel-max-height",
     "--pinfold-accordion-gap",
     "--pinfold-accordion-radius",
+    "--pinfold-accordion-item-radius",
+    "--pinfold-accordion-divider-color",
     "--pinfold-accordion-duration"
   ],
   examples: [
@@ -361,7 +403,8 @@ function checkType(prop, v) {
     case "enum":
       if (prop.values.indexOf(v) !== -1) return null;
       if (prop.orNode && typeof v !== "string") return null;
-      return `must be one of ${list}, got ${JSON.stringify(v)}.`;
+      if (prop.orLength && (typeof v === "number" || typeof v === "string" && /\d|\(/.test(v))) return null;
+      return `must be one of ${list}${prop.orLength ? " or a length" : ""}, got ${JSON.stringify(v)}.`;
     case "node":
       return null;
   }
@@ -423,6 +466,7 @@ function toJsonSchema(meta) {
       case "string[]":
         return { ...base, type: "array", items: { type: "string" } };
       case "enum":
+        if (p.orLength) return { ...base, anyOf: [{ enum: p.values }, { type: ["number", "string"] }] };
         return p.orNode ? { ...base, anyOf: [{ enum: p.values }, {}] } : { ...base, enum: p.values };
       case "array":
         return { ...base, type: "array", items: p.items ? { ...shape(p.items), additionalProperties: true } : {} };
@@ -445,12 +489,12 @@ function toJsonSchema(meta) {
 function metaToMarkdown(meta) {
   var _a;
   const cell = (s) => String(s != null ? s : "").replace(/\|/g, "\\|").replace(/\n/g, " ");
-  const type = (p) => p.type === "enum" ? p.values.map((v) => JSON.stringify(v)).join(" \\| ") + (p.orNode ? " \\| node" : "") : p.type;
+  const type = (p) => p.type === "enum" ? p.values.map((v) => JSON.stringify(v)).join(" \\| ") + (p.orNode ? " \\| node" : "") + (p.orLength ? " \\| length" : "") : p.type;
   const table = (props) => [
     "| Option | Type | Default | Description |",
     "|---|---|---|---|",
     ...Object.entries(props).map(
-      ([k, p]) => `| \`${k}\`${p.required ? " (required)" : ""}${p.status === "deprecated" ? " (deprecated)" : ""} | ${type(p)} | ${p.default === void 0 ? "" : `\`${JSON.stringify(p.default)}\``} | ${cell(p.description)} |`
+      ([k, p]) => `| \`${k}\`${p.required ? " (required)" : ""}${p.status === "deprecated" ? " (deprecated)" : ""} | ${type(p)} | ${p.default === void 0 ? p.auto ? `auto: ${p.auto}` : "" : `\`${JSON.stringify(p.default)}\``} | ${cell(p.description)} |`
     )
   ].join("\n");
   const rows = (_a = meta.props.items) == null ? void 0 : _a.items;

package/dist/meta.d.cts

@@ -22,7 +22,11 @@ interface PropMeta {
     values?: readonly (string | number)[];
     /** Also accepts a node, e.g. `indicator`: a glyph name or your own node. */
     orNode?: boolean;
+    /** Also accepts a length, e.g. `radius`: a preset name or `20` / `'1.25rem'`. */
+    orLength?: boolean;
     default?: unknown;
+    /** What an unset option resolves to when it has no fixed default (e.g. `theme radius`). */
+    auto?: string;
     required?: boolean;
     description: string;
     group: PropGroup;

package/dist/meta.d.ts

@@ -22,7 +22,11 @@ interface PropMeta {
     values?: readonly (string | number)[];
     /** Also accepts a node, e.g. `indicator`: a glyph name or your own node. */
     orNode?: boolean;
+    /** Also accepts a length, e.g. `radius`: a preset name or `20` / `'1.25rem'`. */
+    orLength?: boolean;
     default?: unknown;
+    /** What an unset option resolves to when it has no fixed default (e.g. `theme radius`). */
+    auto?: string;
     required?: boolean;
     description: string;
     group: PropGroup;

package/dist/meta.js

@@ -2,6 +2,7 @@
 var SIZE = ["sm", "md", "lg"];
 var TONE = ["primary", "neutral", "success", "warning", "danger", "info"];
 var RADIUS = ["none", "sm", "md", "lg", "full"];
+var GAP = ["none", "sm", "md", "lg"];
 var SLOTS = [
   "root",
   "item",
@@ -12,6 +13,7 @@ var SLOTS = [
   "title",
   "description",
   "badge",
+  "endIcon",
   "indicator",
   "panel",
   "content"
@@ -36,8 +38,9 @@ var item = {
   title: { ...node("The row heading. A node or `(state) => node`."), required: true },
   content: node("The panel body."),
   description: node("A secondary line under the title."),
-  icon: node("A leading visual."),
+  icon: node("A leading visual: a node, or a string (an emoji, or an icon-font ligature with `classNames.icon`). Overrides the accordion-wide `icon`."),
   badge: node("A trailing chip before the indicator."),
+  endIcon: node("A trailing visual just before the indicator. Overrides the accordion-wide `endIcon`."),
   indicator: {
     type: "enum",
     values: ["chevron", "plus", "caret", "arrow", "none"],
@@ -70,7 +73,7 @@ var accordionMeta = {
       description: "Map raw records onto rows: `{ id: 'slug', title: 'question', content: 'answer' }`.",
       group: "data",
       keys: Object.fromEntries(
-        ["id", "title", "content", "description", "icon", "badge", "disabled", "defaultOpen"].map((k) => [
+        ["id", "title", "content", "description", "icon", "endIcon", "badge", "disabled", "defaultOpen"].map((k) => [
           k,
           { type: "string", description: `Source field for \`${k}\`.`, group: "data" }
         ])
@@ -87,7 +90,7 @@ var accordionMeta = {
     collapsible: {
       type: "boolean",
       default: true,
-      description: "In single mode, lets the user close the open row.",
+      description: "Lets the user close the last open row. `false` keeps at least one row open, in either mode.",
       group: "behaviour",
       control: true
     },
@@ -100,6 +103,7 @@ var accordionMeta = {
       group: "behaviour",
       control: true
     },
+    disabledIds: { type: "string[]", description: "Disables these rows by id.", group: "behaviour" },
     orientation: {
       type: "enum",
       values: ["vertical", "horizontal"],
@@ -153,7 +157,35 @@ var accordionMeta = {
     },
     size: { type: "enum", values: SIZE, default: "md", description: "Size preset.", group: "appearance", control: true },
     tone: { type: "enum", values: TONE, default: "primary", description: "Accent colour role.", group: "appearance", control: true },
-    radius: { type: "enum", values: RADIUS, default: "md", description: "Corner radius preset.", group: "appearance", control: true },
+    radius: {
+      type: "enum",
+      values: RADIUS,
+      orLength: true,
+      auto: "the theme radius (provider `radius`, default md)",
+      description: "Corner radius of the container that holds the rows: a preset, or a length (`20` is px, `'1.25rem'` passes through). Default: the theme radius.",
+      group: "appearance",
+      control: true
+    },
+    itemRadius: {
+      type: "enum",
+      values: RADIUS,
+      orLength: true,
+      auto: "follows `radius`",
+      description: "Corner radius of each row, same values as `radius`. Default: `radius` for separated, filled and ghost rows; square rows inside a solid or outline card.",
+      group: "appearance",
+      control: true
+    },
+    gap: {
+      type: "enum",
+      values: GAP,
+      orLength: true,
+      auto: "none; sm for separated and filled",
+      description: "Space between rows: a preset, or a length (`12` is px). Default: none for solid, outline and ghost; `'sm'` for separated and filled.",
+      group: "appearance",
+      control: true
+    },
+    icon: { ...node("Leading visual for every row: a node, or `(state) => node`. A row\u2019s own `icon` wins."), group: "appearance" },
+    endIcon: { ...node("Trailing visual for every row, just before the indicator. A row\u2019s own `endIcon` wins."), group: "appearance" },
     indicator: {
       type: "enum",
       values: ["chevron", "plus", "caret", "arrow", "none"],
@@ -171,6 +203,13 @@ var accordionMeta = {
       group: "appearance",
       control: true
     },
+    animateIndicator: {
+      type: "boolean",
+      default: true,
+      description: "Rotate (or morph) the indicator when a row opens.",
+      group: "appearance",
+      control: true
+    },
     headingLevel: {
       type: "enum",
       values: [1, 2, 3, 4, 5, 6],
@@ -185,7 +224,7 @@ var accordionMeta = {
       group: "appearance",
       control: true
     },
-    dividers: { type: "boolean", default: true, description: "Lines between rows.", group: "appearance", control: true },
+    dividers: { type: "boolean", default: true, description: "Lines between rows (solid, outline and ghost).", group: "appearance", control: true },
     overflow: {
       type: "object",
       description: "Text overflow per slot. Default: title wraps, description clamps to 2 lines.",
@@ -202,7 +241,7 @@ var accordionMeta = {
         maxWidth: len("Maximum width."),
         height: len("Fixed height."),
         maxHeight: len("Caps the root; rows scroll."),
-        gap: len("Space between rows."),
+        gap: len("Space between rows. Overrides `gap`."),
         paddingX: len("Trigger horizontal padding."),
         paddingY: len("Trigger vertical padding."),
         panelPaddingX: len("Panel horizontal padding."),
@@ -214,7 +253,8 @@ var accordionMeta = {
         iconSize: len("Icon box size."),
         indicatorSize: len("Indicator size."),
         borderWidth: len("Border width."),
-        radius: len("Corner radius as a length."),
+        radius: len("Container corner radius. Overrides `radius`."),
+        itemRadius: len("Row corner radius. Overrides `itemRadius`."),
         duration: len("Transition duration, e.g. '320ms'.")
       }
     },
@@ -278,6 +318,8 @@ var accordionMeta = {
     "--pinfold-accordion-panel-max-height",
     "--pinfold-accordion-gap",
     "--pinfold-accordion-radius",
+    "--pinfold-accordion-item-radius",
+    "--pinfold-accordion-divider-color",
     "--pinfold-accordion-duration"
   ],
   examples: [
@@ -359,7 +401,8 @@ function checkType(prop, v) {
     case "enum":
       if (prop.values.indexOf(v) !== -1) return null;
       if (prop.orNode && typeof v !== "string") return null;
-      return `must be one of ${list}, got ${JSON.stringify(v)}.`;
+      if (prop.orLength && (typeof v === "number" || typeof v === "string" && /\d|\(/.test(v))) return null;
+      return `must be one of ${list}${prop.orLength ? " or a length" : ""}, got ${JSON.stringify(v)}.`;
     case "node":
       return null;
   }
@@ -421,6 +464,7 @@ function toJsonSchema(meta) {
       case "string[]":
         return { ...base, type: "array", items: { type: "string" } };
       case "enum":
+        if (p.orLength) return { ...base, anyOf: [{ enum: p.values }, { type: ["number", "string"] }] };
         return p.orNode ? { ...base, anyOf: [{ enum: p.values }, {}] } : { ...base, enum: p.values };
       case "array":
         return { ...base, type: "array", items: p.items ? { ...shape(p.items), additionalProperties: true } : {} };
@@ -443,12 +487,12 @@ function toJsonSchema(meta) {
 function metaToMarkdown(meta) {
   var _a;
   const cell = (s) => String(s != null ? s : "").replace(/\|/g, "\\|").replace(/\n/g, " ");
-  const type = (p) => p.type === "enum" ? p.values.map((v) => JSON.stringify(v)).join(" \\| ") + (p.orNode ? " \\| node" : "") : p.type;
+  const type = (p) => p.type === "enum" ? p.values.map((v) => JSON.stringify(v)).join(" \\| ") + (p.orNode ? " \\| node" : "") + (p.orLength ? " \\| length" : "") : p.type;
   const table = (props) => [
     "| Option | Type | Default | Description |",
     "|---|---|---|---|",
     ...Object.entries(props).map(
-      ([k, p]) => `| \`${k}\`${p.required ? " (required)" : ""}${p.status === "deprecated" ? " (deprecated)" : ""} | ${type(p)} | ${p.default === void 0 ? "" : `\`${JSON.stringify(p.default)}\``} | ${cell(p.description)} |`
+      ([k, p]) => `| \`${k}\`${p.required ? " (required)" : ""}${p.status === "deprecated" ? " (deprecated)" : ""} | ${type(p)} | ${p.default === void 0 ? p.auto ? `auto: ${p.auto}` : "" : `\`${JSON.stringify(p.default)}\``} | ${cell(p.description)} |`
     )
   ].join("\n");
   const rows = (_a = meta.props.items) == null ? void 0 : _a.items;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinfold/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Pinfold core: framework-free logic, palette engine and helpers shared by every Pinfold adapter.",
   "author": "Indranil Bhattacharya",
   "keywords": [