praxis-kit 6.6.1 → 7.3.0

package/dist/vue/index.js

@@ -1,6 +1,30 @@
 // ../../adapters/vue/src/create-contract-component.ts
 import { computed, defineComponent as defineComponent2 } from "vue";
 
+// ../../lib/adapter-utils/src/invariant.ts
+function panic(message) {
+  throw new Error(message);
+}
+function invariant(condition, message) {
+  if (!condition) panic(message);
+}
+
+// ../../lib/adapter-utils/src/runtime/apply-display-name.ts
+function applyDisplayName(component, name) {
+  Object.assign(component, { displayName: name ?? "PolymorphicComponent" });
+}
+
+// ../../lib/adapter-utils/src/runtime/define-component.ts
+function defineContractComponent(options) {
+  return (factory) => factory(options);
+}
+
+// ../../lib/adapter-utils/src/runtime/assemble-compound-component.ts
+function assembleCompoundComponent(root, subComponents) {
+  if (!subComponents) return root;
+  return Object.assign(root, subComponents);
+}
+
 // ../../lib/primitive/src/tag/resolve-tag.ts
 function makeResolveTag(defaultTag) {
   return function tag(as) {
@@ -11,6 +35,11 @@ function makeResolveTag(defaultTag) {
 // ../../lib/primitive/src/rule/rule-brand.ts
 var RULE_BRAND = /* @__PURE__ */ Symbol("praxis-kit/dynamic-rule");
 
+// ../../lib/primitive/src/rule/dynamic.ts
+function dynamic(resolve) {
+  return { [RULE_BRAND]: true, resolve };
+}
+
 // ../../lib/primitive/src/guards/foundational/is-defined.ts
 function isUndefined(value) {
   return value === void 0;
@@ -24,7 +53,7 @@ function isNonNull(value) {
   return value != null;
 }
 function isNullish(value) {
-  return isNull(value) || value === void 0;
+  return isNull(value) || isUndefined(value);
 }
 
 // ../../lib/primitive/src/utils/type-guards.ts
@@ -38,10 +67,13 @@ function isString(value) {
 function isNumber(value) {
   return typeof value === "number";
 }
+function isFunction(value) {
+  return typeof value === "function";
+}
 
 // ../../lib/primitive/src/rule/is-dynamic-rule.ts
 function isDynamicRule(rule) {
-  return isObject(rule, true) && rule[RULE_BRAND] === true;
+  return isObject(rule, true) && Reflect.get(rule, RULE_BRAND) === true;
 }
 
 // ../../lib/primitive/src/rule/resolve-rule.ts
@@ -601,6 +633,24 @@ var ROLE_RESTRICTED_ATTRIBUTES = /* @__PURE__ */ new Map([
   ]
 ]);
 
+// ../../lib/primitive/src/constants/html/void-tags.ts
+var VOID_TAGS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+
 // ../../lib/primitive/src/guards/aria/is-aria-attribute.ts
 function isGlobalAriaAttribute(attr) {
   return GLOBAL_ARIA_ATTRIBUTES.has(attr);
@@ -653,17 +703,17 @@ var COMPONENT_DEFAULT_TAG = /* @__PURE__ */ Symbol.for("praxis.component-default
 // ../../lib/primitive/src/guards/children/is-tag.ts
 function getAsProp(child) {
   if (!isObject(child) || !("props" in child)) return void 0;
-  const props = child.props;
+  const { props } = child;
   if (!isObject(props)) return void 0;
-  const as = props.as;
+  const as = Reflect.get(props, "as");
   return isString(as) && as !== "" ? as : void 0;
 }
 function getTag(child) {
   if (!isObject(child) || !("type" in child)) return void 0;
-  const t = child.type;
+  const { type: t } = child;
   if (isString(t)) return t;
   if (typeof t === "function" || isObject(t)) {
-    const defaultTag = t[COMPONENT_DEFAULT_TAG];
+    const defaultTag = Reflect.get(t, COMPONENT_DEFAULT_TAG);
     if (!isString(defaultTag)) return void 0;
     return getAsProp(child) ?? defaultTag;
   }
@@ -683,22 +733,34 @@ function isTag(...args) {
   return tag !== void 0 && set2.has(tag);
 }
 
-// ../../lib/adapter-utils/src/invariant.ts
-function panic(message) {
-  throw new Error(message);
-}
-function invariant(condition, message) {
-  if (!condition) panic(message);
-}
-
-// ../../lib/adapter-utils/src/runtime/apply-display-name.ts
-function applyDisplayName(component, name) {
-  Object.assign(component, { displayName: name ?? "PolymorphicComponent" });
-}
-
-// ../../lib/adapter-utils/src/runtime/define-component.ts
-function defineContractComponent(options) {
-  return (factory) => factory(options);
+// ../../lib/adapter-utils/src/runtime/finalize-component.ts
+function finalizeComponent(component, defaultTag, subComponents) {
+  if (typeof defaultTag === "string") {
+    Object.assign(component, { [COMPONENT_DEFAULT_TAG]: defaultTag });
+  }
+  return assembleCompoundComponent(component, subComponents);
+}
+
+// ../../lib/adapter-utils/src/runtime/is-factory-options-like.ts
+var FACTORY_OPTIONS_FIELD_VALIDATORS = {
+  tag: (v) => v === void 0 || isString(v),
+  name: (v) => v === void 0 || isString(v),
+  defaults: (v) => v === void 0 || isObject(v),
+  normalize: (v) => v === void 0 || isFunction(v),
+  styling: (v) => v === void 0 || isObject(v),
+  enforcement: (v) => v === void 0 || isObject(v),
+  diagnostics: (v) => v === void 0 || isObject(v),
+  subComponents: (v) => v === void 0 || isObject(v),
+  onElement: (v) => v === void 0 || isFunction(v)
+};
+function isFactoryOptionsLike(options, extraFieldValidators) {
+  if (!isObject(options)) return false;
+  const validators = { ...FACTORY_OPTIONS_FIELD_VALIDATORS, ...extraFieldValidators };
+  for (const [key, value] of Object.entries(options)) {
+    const validate = validators[key];
+    if (!validate || !validate(value)) return false;
+  }
+  return true;
 }
 
 // ../../lib/contract/src/aria/aria-role-policy.ts
@@ -1599,7 +1661,8 @@ var AriaPolicyEngine = class _AriaPolicyEngine extends InvariantBase {
     const cached = _AriaPolicyEngine.#removeAttributeFixCache.get(attr);
     if (cached) return cached;
     const fix = {
-      kind: `removeAttribute:${attr}`,
+      kind: "removeAttribute",
+      attribute: attr,
       apply: ({ props }) => {
         if (!(attr in props)) return { applied: false, next: props };
         return { applied: true, next: omitProp(props, attr), previous: props };
@@ -1870,7 +1933,8 @@ var AriaPolicyEngine = class _AriaPolicyEngine extends InvariantBase {
     if (!impliedLive) return NO_VIOLATIONS2;
     if ("aria-live" in props) return NO_VIOLATIONS2;
     const injectLive = {
-      kind: `injectLive:${effectiveRole}`,
+      kind: "injectLive",
+      attribute: "aria-live",
       apply: (ctx) => ({
         applied: true,
         next: { ...ctx.props, "aria-live": impliedLive },
@@ -1939,6 +2003,23 @@ var AriaPolicyEngine = class _AriaPolicyEngine extends InvariantBase {
   }
 };
 
+// ../../lib/contract/src/aria/factories.ts
+function removeProp(props, key) {
+  const next = { ...props };
+  delete next[key];
+  return next;
+}
+function removeAttributeFix(attribute) {
+  return Object.freeze({
+    kind: "removeAttribute",
+    attribute,
+    apply: ({ props }) => {
+      if (!(attribute in props)) return { applied: false, next: props };
+      return { applied: true, next: removeProp(props, attribute), previous: props };
+    }
+  });
+}
+
 // ../../lib/contract/src/children/get-type-name.ts
 function getTypeName(value) {
   if (value === null) return "null";
@@ -2257,22 +2338,6 @@ import { warnDiagnostics as warnDiagnostics2 } from "../_shared/diagnostics.js";
 
 // ../core/src/html/contracts/categories.ts
 var METADATA_TAGS = ["script", "template"];
-var VOID_TAGS = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
 var TEXT_ONLY_TAGS = [
   "option",
   "script",
@@ -2396,20 +2461,6 @@ var INPUT_MUTUALLY_EXCLUSIVE_POLICIES = [
 
 // ../core/src/html/spec/validators/attribute-type-validator.ts
 var DEFAULT_INPUT_TYPE = "text";
-function omit(props, key) {
-  const next = { ...props };
-  delete next[key];
-  return next;
-}
-function removeAttributeFix(attribute) {
-  return {
-    kind: `removeAttribute:${attribute}`,
-    apply: ({ props }) => {
-      if (!(attribute in props)) return { applied: false, next: props };
-      return { applied: true, next: omit(props, attribute), previous: props };
-    }
-  };
-}
 function createInputAttributeTypeRule({
   attribute,
   allowedTypes
@@ -2862,7 +2913,7 @@ function getChildProp(child, key) {
   if (!isVNodeLike(child)) return void 0;
   const { props } = child;
   if (!isObject(props)) return void 0;
-  return props[key];
+  return Reflect.get(props, key);
 }
 
 // ../core/src/html/contracts/aria/landmarks.ts
@@ -2915,6 +2966,13 @@ function isLabelableControl(child) {
   const type = getChildProp(child, "type");
   return !isString(type) || type !== "hidden";
 }
+function hasAccessibleNameProp(props) {
+  return "aria-label" in props || "aria-labelledby" in props;
+}
+function isNonEmptyTextChild(child) {
+  if (isNumber(child)) return true;
+  return isString(child) && child.trim().length > 0;
+}
 var labelContract = contract([
   { name: "control", match: isLabelableControl, cardinality: { max: 1 } },
   { name: "nested-label", match: isTag("label"), cardinality: { max: 0 } },
@@ -2922,6 +2980,13 @@ var labelContract = contract([
     name: "other-interactive-content",
     match: isTag(...OTHER_INTERACTIVE_TAGS),
     cardinality: { max: 0 }
+  },
+  {
+    name: "accessible-name",
+    match: isNonEmptyTextChild,
+    cardinality: dynamic(
+      (ctx) => hasAccessibleNameProp(ctx.props) ? { min: 0 } : { min: 1 }
+    )
   }
 ]);
 
@@ -3545,6 +3610,13 @@ function buildRuntime(options) {
   return built;
 }
 
+// ../../adapters/vue/src/is-polymorphic-component.ts
+function isPolymorphicComponent(value) {
+  if (!isObject(value)) return false;
+  if (!("displayName" in value)) return true;
+  return value.displayName === void 0 || isString(value.displayName);
+}
+
 // ../../adapters/vue/src/render.ts
 import { cloneVNode, h as h3 } from "vue";
 
@@ -3643,7 +3715,7 @@ function prepareRenderState(runtime, attrs, filterProps) {
     className
   };
 }
-function buildElementProps(props, className) {
+function buildElementProps(props, className, elementRef) {
   const { role, ...rest } = props;
   return {
     ...normalizeListenerKeys(rest),
@@ -3651,11 +3723,17 @@ function buildElementProps(props, className) {
     // normalizeClass turns it into '' and still emits class="", while the client patcher
     // removes the attribute outright. Omitting the key entirely keeps both paths consistent.
     ...className !== void 0 && { class: className },
-    ...isKnownAriaRole(role) && { role }
+    ...isKnownAriaRole(role) && { role },
+    // Vue calls a function-ref with the element on mount and with null on unmount, same
+    // contract as React/Preact's callback refs — a natural fit for FactoryOptions.onElement.
+    // Cast: Vue's own VNodeRef type also accepts a resolved *component* instance, since refs
+    // can target components as well as elements — irrelevant here, this is only ever attached
+    // to an intrinsic host tag, which always resolves to a real Element.
+    ...elementRef !== void 0 && { ref: elementRef }
   };
 }
-function renderIntrinsic(state, runtime, slots) {
-  const elementProps = buildElementProps(state.props, state.className);
+function renderIntrinsic(state, runtime, slots, elementRef) {
+  const elementProps = buildElementProps(state.props, state.className, elementRef);
   const domProps = runtime.resolveAria(state.tag, elementProps).props;
   return h3(state.tag, domProps, slots.default ? { default: slots.default } : void 0);
 }
@@ -3668,12 +3746,13 @@ function validateSlotDirectives(directives, validator) {
   }
   return true;
 }
-function tryRenderAsChild(state, children, discarded, validator) {
+function tryRenderAsChild(state, children, discarded, validator, elementRef) {
   if (!validateSlotDirectives(state.directives, validator)) return null;
   if (discarded > 0) validator.warnDiscardedChildren(discarded);
   const attrs = {
     ...pickAttributes(state.props),
-    ...state.className !== void 0 && { class: state.className }
+    ...state.className !== void 0 && { class: state.className },
+    ...elementRef !== void 0 && { ref: elementRef }
   };
   const slottable = extractSlottable(children);
   if (slottable) return slottable.rebuild(cloneVNode(slottable.child, attrs));
@@ -3688,20 +3767,31 @@ function render({
   state,
   slots,
   slotValidator,
-  childrenEvaluator
+  childrenEvaluator,
+  elementRef
 }) {
   const { vnodes: children, discarded } = normalizeChildren(slots);
   if (process.env.NODE_ENV !== "production") {
     childrenEvaluator?.evaluate(children, { tag: state.tag, props: state.normalizedProps });
-    runtime.options.htmlChildrenEvaluatorFn?.(state.tag)?.evaluate(children);
+    runtime.options.htmlChildrenEvaluatorFn?.(state.tag)?.evaluate(children, { tag: state.tag, props: state.normalizedProps });
   }
-  const slotResult = tryRenderAsChild(state, children, discarded, slotValidator);
-  return slotResult ?? renderIntrinsic(state, runtime, slots);
+  const slotResult = tryRenderAsChild(state, children, discarded, slotValidator, elementRef);
+  return slotResult ?? renderIntrinsic(state, runtime, slots, elementRef);
+}
+
+// ../../adapters/vue/src/to-vue-factory-options.ts
+var VUE_FIELD_VALIDATORS = {
+  filterProps: (v) => v === void 0 || isFunction(v)
+};
+function isVueFactoryOptions(options) {
+  return isFactoryOptionsLike(options, VUE_FIELD_VALIDATORS);
 }
 
 // ../../adapters/vue/src/create-contract-component.ts
 function createContractComponent(options) {
+  invariant(isVueFactoryOptions(options), "options is not a valid VueFactoryOptions object");
   const bundle = buildRuntime(options);
+  const { onElement } = options;
   const Component = defineComponent2({
     // normalizeOptions always supplies `name`, so displayName is always defined here —
     // the fallback only satisfies the type, which allows it to be absent in general.
@@ -3711,15 +3801,33 @@ function createContractComponent(options) {
       const state = computed(
         () => prepareRenderState(bundle.runtime, attrs, bundle.filterProps)
       );
-      return () => render({ ...bundle, state: state.value, slots });
+      let cleanup;
+      let boundElement = null;
+      const onElementRef = onElement ? (element) => {
+        if (element === boundElement) return;
+        if (boundElement) {
+          cleanup?.();
+          cleanup = void 0;
+        }
+        boundElement = element;
+        if (element) {
+          cleanup = onElement(element, () => attrs) ?? void 0;
+        }
+      } : void 0;
+      return () => render({ ...bundle, state: state.value, slots, elementRef: onElementRef });
     }
   });
   applyDisplayName(Component, options.name);
-  const defaultTag = bundle.runtime.options.defaultTag;
-  if (typeof defaultTag === "string") {
-    Object.assign(Component, { [COMPONENT_DEFAULT_TAG]: defaultTag });
-  }
-  return Component;
+  const assembled = finalizeComponent(
+    Component,
+    bundle.runtime.options.defaultTag,
+    options.subComponents
+  );
+  invariant(
+    isPolymorphicComponent(assembled),
+    "Generated component failed to satisfy the PolymorphicComponent shape"
+  );
+  return assembled;
 }
 export {
   Slottable,

package/dist/web/index.d.ts

@@ -4,6 +4,8 @@ import { Diagnostics, DiagnosticInput, DiagnosticsMode } from '../_shared/diagno
 type StringMap<T = unknown> = Record<string, T>;
 type AnyRecord = StringMap<unknown>;
 type EmptyRecord = Record<never, never>;
+/** A compound component's named sub-components, e.g. `{ Header, Content, Footer }`. */
+type SubComponentMap = Readonly<AnyRecord>;
 
 type IntrinsicTag = keyof HTMLElementTagNameMap;
 
@@ -178,8 +180,8 @@ type AriaContext = {
     readonly props: ReadonlyDeep<IntrinsicProps>;
 };
 
-type RemoveAttributeFixKind = `removeAttribute:${string}`;
-type InjectLiveFixKind = `injectLive:${string}`;
+type RemoveAttributeFixKind = 'removeAttribute';
+type InjectLiveFixKind = 'injectLive';
 type FixKind = 'removeRole' | 'setRole' | 'normalizeRelevantAll' | RemoveAttributeFixKind | InjectLiveFixKind;
 
 type AriaFixResult = {
@@ -192,6 +194,9 @@ type AriaFixResult = {
 };
 type AriaFix = {
     readonly kind: FixKind;
+    /** The attribute a `'removeAttribute'`/`'injectLive'` fix targets — always set for those
+     *  kinds, absent for kinds with no single-attribute target (`'removeRole'`, etc.). */
+    readonly attribute?: string;
     readonly priority?: number;
     readonly source?: string;
     readonly apply: (context: AriaContext) => AriaFixResult;
@@ -285,6 +290,30 @@ type FactoryOptions<TDefault extends ElementType = ElementType, Props extends An
      * be set directly by component authors — use `enforcement.diagnostics` to override per component.
      */
     readonly diagnostics?: Diagnostics;
+    /**
+     * Sub-components to attach to the generated root component, producing a
+     * compound component API (for example, `Card.Header`, `Card.Content`,
+     * and `Card.Footer`). Purely additive — has no effect on
+     * `enforcement.children`; author child rules explicitly if the component
+     * needs to validate its children.
+     */
+    readonly subComponents?: SubComponentMap;
+    /**
+     * Called once per instance, when the real underlying DOM element first
+     * exists, in every adapter — via that adapter's own native mount
+     * lifecycle, never through the props/attribute pipeline. Use this for
+     * wiring that needs the actual element (native imperative methods like
+     * `dialogEl.showModal()`, native events like `close`/`cancel` that have
+     * no prop-based equivalent), not for anything expressible as a plain
+     * prop.
+     *
+     * `getProps` returns the instance's *current* resolved props at call
+     * time — read it from inside a listener registered once at mount, rather
+     * than re-subscribing on every prop change.
+     *
+     * Return a cleanup function to run when the instance unmounts.
+     */
+    readonly onElement?: (element: Element, getProps: () => Readonly<Props>) => void | (() => void);
 };
 
 type FilterPredicate = (key: string, variantKeys: ReadonlySet<string>) => boolean;
@@ -349,7 +378,9 @@ type WebContractComponent<TVariants extends Readonly<VariantMap> = Readonly<Empt
  * For non-reactive attributes (`aria-*`, `role`, `data-*`) call `element.update()`
  * after setting them to trigger an explicit pipeline re-run.
  */
-declare function createContractComponent<TDefault extends ElementType, TProps extends UnknownProps = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<TVariants> = Readonly<EmptyRecord>, TPlugin extends AnyClassPluginFactory = AnyClassPluginFactory>(options: WebFactoryOptions<TDefault, TProps, TVariants, TPreset, TPlugin>): WebContractComponent<TVariants, ExtractPluginProps<TPlugin>>;
+declare function createContractComponent<TDefault extends ElementType, TProps extends UnknownProps = EmptyRecord, TVariants extends Readonly<VariantMap> = Readonly<EmptyRecord>, TPreset extends RecipeMap<TVariants> = Readonly<EmptyRecord>, TPlugin extends AnyClassPluginFactory = AnyClassPluginFactory, TSubComponents extends Readonly<AnyRecord> = EmptyRecord>(options: WebFactoryOptions<TDefault, TProps, TVariants, TPreset, TPlugin> & {
+    readonly subComponents?: TSubComponents;
+}): WebContractComponent<TVariants, ExtractPluginProps<TPlugin>> & TSubComponents;
 
 /**
  * Renders a praxis-kit web component to an HTML string without requiring a DOM.