@pipelex/mthds-form 0.28.0 → 0.30.0

package/dist/core/gate.js

@@ -1,8 +1,8 @@
-export { apiInputsFromSchemaData, buildRunInputsSchema, gateRunInputs, prepareRunInputs, validateRunInputs } from '../chunk-4DPYGNJ3.js';
+export { apiInputsFromSchemaData, buildRunInputsSchema, gateRunInputs, prepareRunInputs, validateRunInputs } from '../chunk-IBBAJXIO.js';
 import '../chunk-E6BIXJ6C.js';
+import '../chunk-XO5OENNF.js';
 import '../chunk-Y2ND6W4W.js';
 import '../chunk-LBFZXYCY.js';
-import '../chunk-XO5OENNF.js';
 import '../chunk-OD3VYXUY.js';
 import '../chunk-WYH56SOZ.js';
 import '../chunk-V3OV2XQT.js';

package/dist/core/humanize.d.ts

@@ -0,0 +1,77 @@
+/**
+ * What a person reads in place of an identifier: a field's name, and the value
+ * of a choice. Headless, so a host that draws its own choice control, a server
+ * that writes a summary and the package's own controls all word a value the
+ * same way.
+ *
+ * The descriptor carries an enum's values and nothing else: the standard has no
+ * display label for an option, and none is wanted. Its label is derived from
+ * the value here, by rule, and only what a person reads changes: the value a
+ * form stores, the JSON view, the copy control and the download all keep the
+ * code.
+ */
+/**
+ * `full_name` → `Full name`. Only the first word is capitalised: these are
+ * labels, not titles, and Title Case on every word reads as a form from 2009.
+ * Takes IDENTIFIERS only - snake_case or kebab-case names, where a separator
+ * is structure. An authored `title` never goes through here: it is already
+ * human-facing, and its hyphens are spelling (`E-mail address`), not structure.
+ */
+declare function humanizeFieldName(name: string): string;
+/**
+ * An enum CODE as words: `keynote` → `Keynote`, `unit_price_differs_from_po`
+ * → `Unit price differs from po`, `HIGH_RISK` → `High risk`.
+ *
+ * It is `humanizeFieldName`, applied after an all-caps code of several words is
+ * lowercased. The capitals of `HIGH_RISK` are a convention of the code, not an
+ * emphasis its author meant, and "HIGH RISK" on a sentence-case page reads as
+ * an alarm.
+ *
+ * A single all-caps token is left exactly as written: `USD`, `EUR`, `OK` and
+ * `HIGH` hold no separator, and a lone capitalised word is far more often an
+ * acronym, a unit or a currency than a shouted word, so lowercasing it would
+ * misspell it ("Usd"). Only a code that is several words joined by `_` or `-`
+ * is taken to be capitalised by convention.
+ *
+ * Acronyms inside a longer code are not guessed: `po` stays `po` where a reader
+ * expects `PO`, just as a field name does. That is the price of deriving the
+ * label from the value rather than carrying one on the wire, and it is paid
+ * knowingly: a method's author who wants `PO` read writes the code so that it
+ * reads.
+ *
+ * Only a code is humanised. A value that is not an identifier is authored
+ * words already, and its separators are spelling rather than structure, so it
+ * is shown verbatim: `18-24`, `N/A` and `Very satisfied` do not start with a
+ * letter or hold something other than letters, digits, `_` and `-`. That is
+ * the line `humanizeFieldName` draws between an identifier and an authored
+ * title.
+ *
+ * This words ONE code, with no knowledge of the enum it belongs to. A choice
+ * control goes one step further: when two options of one enum would read the
+ * same, it shows that enum's codes instead (see `enumValueLabeler`).
+ */
+declare function humanizeEnumValue(code: string): string;
+/**
+ * How ONE enum's values read, as words: the labeler every choice control and
+ * every enum result goes through, so the options a form offers, the value a
+ * result shows and a host's own chips read alike. Built from the enum's
+ * options, it maps a value to what a person reads.
+ *
+ * A declared option reads as words (`humanizeEnumValue`), except in two cases,
+ * where the code is shown as written:
+ *
+ * - **Every option, when two of them would read the same.** `high_risk` and
+ *   `HIGH_RISK`, or `foo-bar` and `foo_bar`, are distinct codes that humanise
+ *   to one label, and a person offered two identical choices is choosing
+ *   blind. Wording the others while showing those two as codes would make one
+ *   enum read in two registers, so the whole enum falls back.
+ * - **A value the enum does not declare.** It is the payload disagreeing with
+ *   its descriptor, and worded it could pass for an option it is not.
+ *
+ * This is the wording, not the decision to word: a builder-facing surface that
+ * must show the code the bundle spells (the control set's `studio`
+ * presentation) does not call it.
+ */
+declare function enumValueLabeler(options: readonly string[]): (value: string) => string;
+
+export { enumValueLabeler, humanizeEnumValue, humanizeFieldName };

package/dist/core/humanize.js

@@ -0,0 +1,3 @@
+export { enumValueLabeler, humanizeEnumValue, humanizeFieldName } from '../chunk-GHVVULHY.js';
+//# sourceMappingURL=humanize.js.map
+//# sourceMappingURL=humanize.js.map

package/dist/core/humanize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"humanize.js"}

package/dist/core/index.d.ts

@@ -1,4 +1,5 @@
 export { BooleanRunField, ConceptCategory, DateRunField, EnumRunField, FileRunField, ListRunField, NumberRunField, ObjectRunField, ProseRunField, RunField, RunFieldCommon, RunFieldKind, TextConstraints, TextRunField, UnknownRunField, conceptCategory } from './descriptor.js';
+export { enumValueLabeler, humanizeEnumValue, humanizeFieldName } from './humanize.js';
 export { IOMultiplicity, InputForm, InputFormTopLevelField, OutputForm, PipeIOContract, PipeIOContracts, PipeInputContract, PipeInputFormDescriptor, PipeOutputContract, PipeOutputFormDescriptor } from 'mthds/protocol';
 export { buildResultField, buildRunFields, getPipeInputForm } from './derive.js';
 export { getPipeOutputForm } from './output-form.js';

package/dist/core/index.js

@@ -4,17 +4,18 @@ export { addChosenFiles, chosenFilesAdded, roomForChosenFiles, sourceFileValue }
 export { collectStuffFiles } from '../chunk-56WECFBD.js';
 export { describeValidationError, displayValue, valueAtProperty } from '../chunk-RPA7DNSK.js';
 export { apiInputsFromRunValues, fieldsForContract, inputDataFromWorkingMemory, outputsFromPipeOutput, rjsfDataFromRunValues, runValuesFromInputs, runValuesFromStore, sameRunValues, setValueAtPath, storeInputDataFromRunValues } from '../chunk-ZX52CQJ4.js';
+export { enumValueLabeler, humanizeEnumValue, humanizeFieldName } from '../chunk-GHVVULHY.js';
 export { narrowFileFormats } from '../chunk-CAKQ5VFT.js';
 export { NATIVE_CHOICE_CONCEPT_REF, NATIVE_COMPOSITE_CONCEPT_REF, NATIVE_DATE_CONCEPT_REF, NATIVE_HTML_CONCEPT_REF, NATIVE_PAGE_CONCEPT_REF, NATIVE_RATING_CONCEPT_REF, NATIVE_SEARCH_RESULT_CONCEPT_REF, NATIVE_YES_NO_CONCEPT_REF, TYPED_SCALAR_MARKERS, citedSource, formatDateContent, hasTypedScalarMarkers, isNativeCompositeNode, isNativeDateNode, isNativeHtmlNode, isNativePageNode, isNativeSearchResultNode, isViewableUrl, nativeVerdictOf, readChoiceContent, readCompositeContent, readDataUrl, readDateContent, readDocumentContent, readHtmlContent, readImageContent, readPageContent, readRatingContent, readSearchResultContent, readYesNoContent, splitCitations, viewableUrl } from '../chunk-QQK6Y55E.js';
 export { getPipeOutputForm } from '../chunk-JIGRWJTV.js';
 export { buildResultField, buildRunFields, getPipeInputForm } from '../chunk-ZB4RYUKV.js';
 export { conceptCategory } from '../chunk-FABY3DEY.js';
 export { DOCUMENT_FORMATS, IMAGE_FORMATS, acceptLabel, acceptMap, formatsForKind, isAcceptedFile } from '../chunk-XCO6GTEC.js';
-export { apiInputsFromSchemaData, buildRunInputsSchema, gateRunInputs, prepareRunInputs, validateRunInputs } from '../chunk-4DPYGNJ3.js';
+export { apiInputsFromSchemaData, buildRunInputsSchema, gateRunInputs, prepareRunInputs, validateRunInputs } from '../chunk-IBBAJXIO.js';
 export { deflateAllInputs, deflateInput, healStringWrappers, inflateAllInputs, inflateInput, pruneEmptyOptionals, resolveConceptCode } from '../chunk-E6BIXJ6C.js';
+export { anyOptionalStructureOpen, computeReadiness, fieldFilled, foldsBehindOptionalDisclosure, isFilled, isFoldedOptional, isOptionalStructure, mustBeFilled, optionalStructureOpen, shownAsOptional } from '../chunk-XO5OENNF.js';
 import '../chunk-Y2ND6W4W.js';
 export { normalizeSchemaForRjsf, prepareSchemaForRjsf } from '../chunk-LBFZXYCY.js';
-export { anyOptionalStructureOpen, computeReadiness, fieldFilled, foldsBehindOptionalDisclosure, isFilled, isFoldedOptional, isOptionalStructure, mustBeFilled, optionalStructureOpen, shownAsOptional } from '../chunk-XO5OENNF.js';
 export { collapseNullable, collectSchemaDefs, derefSchema, flattenAnyOf, hoistDefsToRoot, resolveSchemaIndirection, schemaTypeOf } from '../chunk-OD3VYXUY.js';
 export { buildPipeRef, getPipeIOContract, inputMustBeFilled, isFixedCountInput, isOptionalInput, isPluralInput } from '../chunk-WYH56SOZ.js';
 import '../chunk-V3OV2XQT.js';

package/dist/generative/index.js

@@ -1,10 +1,11 @@
 "use client";
-import { cn, checkedAccentClass, focusOutlineClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../chunk-II5TOORN.js';
+import { cn, headingClass, checkedAccentClass, focusOutlineClass, actionShadowClass, panelSurfaceClass, panelRaisedShadowClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, panelFlatShadowClass } from '../chunk-JCFALTTY.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
 import '../chunk-56WECFBD.js';
 import '../chunk-ZX52CQJ4.js';
+import '../chunk-GHVVULHY.js';
 import { isNativeValueNode, readDateContent, formatDateContent, isNativeHtmlNode, isNativeDateNode, isNativeCompositeNode } from '../chunk-QQK6Y55E.js';
 export { brandManifestSchema } from '../chunk-QFX332LE.js';
 import '../chunk-ZB4RYUKV.js';
@@ -1842,13 +1843,24 @@ function Card({
   props,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-6 text-card-foreground", children: [
-    props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-      props.title ? /* @__PURE__ */ jsx("h3", { className: "text-lg leading-none font-semibold", children: props.title }) : null,
-      props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
-    ] }) : null,
-    children
-  ] });
+  return (
+    // A style's panel: a host writes the style's field fill onto `--input`
+    // here, as on its own panel, so the fields inside do not sink into it.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn("rounded-lg p-6 text-card-foreground", panelSurfaceClass, panelFlatShadowClass),
+        children: [
+          props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+            props.title ? /* @__PURE__ */ jsx("h3", { className: cn("text-lg leading-none", headingClass(600)), children: props.title }) : null,
+            props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
+          ] }) : null,
+          children
+        ]
+      }
+    )
+  );
 }
 var GAP = {
   none: "gap-0",
@@ -1935,10 +1947,10 @@ function Collapsible({
   );
 }
 var HEADING = {
-  h1: "text-3xl font-bold tracking-tight",
-  h2: "text-2xl font-semibold tracking-tight",
-  h3: "text-lg font-semibold",
-  h4: "text-base font-semibold"
+  h1: cn("text-3xl", headingClass(700, true)),
+  h2: cn("text-2xl", headingClass(600, true)),
+  h3: cn("text-lg", headingClass(600)),
+  h4: cn("text-base", headingClass(600))
 };
 function Heading({
   props
@@ -2115,7 +2127,8 @@ function Textarea({
     /* @__PURE__ */ jsx(FieldError, { message: field.error })
   ] });
 }
-var NATIVE_CHECK = cn("size-4", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK = cn("size-4 shrink-0", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK_ROW = "flex items-center gap-2 text-sm max-sm:min-h-11";
 function Radio({
   props,
   bindings,
@@ -2123,9 +2136,10 @@ function Radio({
 }) {
   const id = useControlId(props.name);
   const field = useBoundField(props.value, bindings?.value, "", props);
+  const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", "aria-invalid": field.error ? true : void 0, children: [
     /* @__PURE__ */ jsx("legend", { className: LABEL, children: props.label }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 max-sm:space-y-0", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2141,7 +2155,7 @@ function Radio({
           }
         }
       ),
-      /* @__PURE__ */ jsx("span", { children: option })
+      /* @__PURE__ */ jsx("span", { children: labelOf(option) })
     ] }, `${index}-${option}`)) }),
     /* @__PURE__ */ jsx(FieldError, { message: field.error })
   ] });
@@ -2154,7 +2168,7 @@ function Checkbox({
   const id = useControlId(props.name);
   const field = useBoundField(props.checked, bindings?.checked, false, props);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2322,6 +2336,7 @@ function AccessibleSelect({ props, bindings, emit }) {
     hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
   );
   const id = useControlId(props.name);
+  const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block text-sm leading-none font-medium", children: props.label }),
     /* @__PURE__ */ jsxs(
@@ -2334,8 +2349,8 @@ function AccessibleSelect({ props, bindings, emit }) {
           emit("change");
         },
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, `${index}-${option}`)) })
+          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-11 w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: labelOf(option) }, `${index}-${option}`)) })
         ]
       }
     ),
@@ -2428,11 +2443,11 @@ function Tabs({ props, children }) {
   const panels = React3.Children.toArray(children);
   const [value, setValue] = React3.useState(tabs[0]?.value ?? "");
   return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange: setValue, className: "w-full", children: [
-    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground max-sm:h-auto max-sm:flex-wrap", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
       {
         value: tab.value,
-        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm max-sm:min-h-11 max-sm:min-w-11",
         children: tab.label
       },
       tab.value
@@ -2448,7 +2463,7 @@ function Tabs({ props, children }) {
     ))
   ] });
 }
-var BUTTON_BASE = "inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+var BUTTON_BASE = "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 var PRIMARY_BUTTON = cn(BUTTON_BASE, "bg-primary text-primary-foreground hover:bg-primary/90");
 var SECONDARY_BUTTON = cn(
   BUTTON_BASE,
@@ -2591,6 +2606,7 @@ function Segmented({ props, bindings, emit }) {
   const value = isBound ? boundValue ?? "" : localValue;
   const setValue = isBound ? setBoundValue : setLocalValue;
   const labelId = useControlId(props.name);
+  const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx("span", { id: labelId, className: "block text-sm leading-none font-medium", children: props.label }),
     /* @__PURE__ */ jsx(
@@ -2611,8 +2627,8 @@ function Segmented({ props, bindings, emit }) {
             value: option,
             variant: "outline",
             size: "sm",
-            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
-            children: option
+            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground max-sm:h-11 max-sm:min-w-11",
+            children: labelOf(option)
           },
           option
         ))
@@ -2651,7 +2667,7 @@ function NumberInput({ props, bindings, emit }) {
           },
           className: cn(
             fieldControlClass,
-            "h-10 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+            "h-11 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
           )
         }
       ),
@@ -2769,7 +2785,16 @@ function Hero({ props }) {
         children: props.eyebrow
       }
     ) : null,
-    /* @__PURE__ */ jsx("h1", { className: "max-w-2xl text-4xl font-bold tracking-tight text-foreground sm:text-[44px] sm:leading-[1.15]", children: props.headline }),
+    /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn(
+          "max-w-2xl text-4xl text-foreground sm:text-[44px] sm:leading-[1.15]",
+          headingClass(700, true)
+        ),
+        children: props.headline
+      }
+    ),
     props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-2xl text-[17px] leading-relaxed text-muted-foreground", children: props.lede }) : null
   ] });
 }
@@ -2807,7 +2832,7 @@ function ResultPanel() {
   const slot = useResultSlot();
   if (!slot?.content) return null;
   return /* @__PURE__ */ jsxs("section", { className: "border-t border-border py-9", "data-testid": "result-panel", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx("h2", { className: "mb-6 text-xl font-semibold tracking-tight text-foreground", children: slot.title ?? "Result" }),
+    /* @__PURE__ */ jsx("h2", { className: cn("mb-6 text-xl text-foreground", headingClass(600, true)), children: slot.title ?? "Result" }),
     slot.content
   ] });
 }
@@ -2816,7 +2841,7 @@ function Section({ props, children }) {
     /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3", children: [
         props.number ? /* @__PURE__ */ jsx("span", { className: cn("font-mono text-[12px]", linkTextClass), children: props.number }) : null,
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: props.title })
+        /* @__PURE__ */ jsx("h2", { className: cn("text-xl text-foreground", headingClass(600, true)), children: props.title })
       ] }),
       props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: props.lede }) : null
     ] }),
@@ -2829,10 +2854,21 @@ function Rail({ props, children }) {
     // the `@theme inline` mapping and does not inherit its fallback - it has to
     // carry its own, or a host that defines no tokens loses the declaration
     // outright. See src/styles/tailwind-entry.css.
-    /* @__PURE__ */ jsxs("div", { className: "rounded-[calc(var(--radius,0.5rem)*1.5)] border border-border bg-card p-7 text-card-foreground shadow-xl", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn(
+          "rounded-[calc(var(--radius,0.5rem)*1.5)] p-7 text-card-foreground",
+          panelSurfaceClass,
+          panelRaisedShadowClass
+        ),
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
+        ]
+      }
+    )
   );
 }
 function present(value) {
@@ -2853,10 +2889,12 @@ function Cta({ props, emit }) {
         type: "button",
         onClick: () => emit("press"),
         className: cn(
-          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground",
-          // The fallback is not decoration here either - see Rail above.
-          "shadow-[0_0_28px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_35%,transparent)] transition-all hover:bg-primary/90 hover:shadow-[0_0_44px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_50%,transparent)]",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
+          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90",
+          // The page's call-to-action shadow, or the glow in the button colour
+          // it had. Focus is an outline, which no shadow a style sets can
+          // replace or hide.
+          actionShadowClass,
+          focusOutlineClass
         ),
         children: props.label
       }