fixing the issues 82 and 130

CHANGELOG.md

@@ -6,6 +6,15 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## [Unreleased]
 
 ### Fixed
+- **HtmlAttrs spread detection missed indirect attribute surfaces; package CSS bases inlined
+  per component** (#130, #82) — blend's `Omit<BlockProps, 'children'>` (attrs reachable only
+  through a package-local alias and a nested `Omit`) flattened ~149 labeled args into every
+  Block-extending component. The attrs walk is now transitive with omit keys composed across
+  layers, and a pure package-local named intersection part (`StyledBlockProps`,
+  `BaseSkeletonProps`) becomes ONE shared record spread by every consumer
+  (`type props = { ...HtmlAttrs.…, ...BlendTypes.styledBlockProps, own… }`). A shadowed or
+  otherwise unprovable base falls back to inline flattening — never a duplicate-label compile
+  error. Fixture: `shared-base-records`.
 - **Compound-component statics silently dropped** (#100) — `const Menu: FC<MenuProps> &
   { Item: FC<ItemProps> }` bound only `Menu`; `Menu.Item` vanished with no skip entry (antd,
   react-bootstrap, headlessui's dominant idiom). Component-typed statics now bind as sibling

benchmark/baselines/_base-ui-components_react/bindings/AccordionTrigger.res

@@ -1,69 +1,71 @@
 /** zero-cost wrapper: pass the FUNCTION form of `render` — `render={renderFn((…) => …)}` */
 external renderFn: ((PositionerSharedTypes.htmlProps, ItemTypes.accordionItemState) => React.element) => React.element = "%identity"
 
-@module("@base-ui-components/react") @scope("Accordion") @react.component
-external make: (
-  ~nativeButton: bool=?,
-  ~form: string=?,
-  ~style: ItemTypes.accordionItemStyle=?,
-  ~title: string=?,
-  ~autoFocus: bool=?,
-  ~hidden: bool=?,
-  ~id: string=?,
-  ~tabIndex: int=?,
-  ~role: string=?,
-  ~rel: string=?,
-  @as("aria-checked") ~ariaChecked: [#"true" | #"false" | #mixed]=?,
-  @as("aria-controls") ~ariaControls: string=?,
-  @as("aria-current") ~ariaCurrent: [#page | #step | #location | #date | #time | #"true" | #"false"]=?,
-  @as("aria-describedby") ~ariaDescribedby: string=?,
-  @as("aria-disabled") ~ariaDisabled: bool=?,
-  @as("aria-expanded") ~ariaExpanded: bool=?,
-  @as("aria-haspopup") ~ariaHaspopup: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"]=?,
-  @as("aria-hidden") ~ariaHidden: bool=?,
-  @as("aria-invalid") ~ariaInvalid: [#grammar | #"false" | #spelling | #"true"]=?,
-  @as("aria-label") ~ariaLabel: string=?,
-  @as("aria-labelledby") ~ariaLabelledby: string=?,
-  @as("aria-live") ~ariaLive: [#off | #polite | #assertive | #rude]=?,
-  @as("aria-pressed") ~ariaPressed: [#"true" | #"false" | #mixed]=?,
-  @as("aria-required") ~ariaRequired: bool=?,
-  @as("aria-selected") ~ariaSelected: bool=?,
-  ~children: React.element=?,
-  ~onCopy: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onCut: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onPaste: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onFocus: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onBlur: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onChange: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onInput: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onSubmit: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyDown: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyPress: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyUp: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onClick: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onContextMenu: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDoubleClick: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDrag: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDrop: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseDown: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseEnter: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseLeave: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseMove: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseOut: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseOver: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseUp: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onScroll: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onWheel: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~disabled: bool=?,
-  @as("type") ~type_: TriggerTypes.triggerType=?,
-  ~formAction: CommonTypes.triggerFormAction<'a>=?,
-  ~formEncType: string=?,
-  ~formMethod: string=?,
-  ~formNoValidate: bool=?,
-  ~formTarget: string=?,
-  ~name: string=?,
-  ~value: CommonTypes.stringOrNumberOrStringArray=?,
-  ~className: ItemTypes.accordionItemClassName=?,
-  ~render: React.element=?,  // ⓘ function form: wrap with `renderFn` (zero-cost)
-  ~ref: React.ref<Nullable.t<Dom.element>>=?,
-) => React.element = "Trigger"
+type props<'a> = {
+  ...PositionerSharedTypes.nativeButtonProps,
+  form?: string,
+  style?: ItemTypes.accordionItemStyle,
+  title?: string,
+  autoFocus?: bool,
+  hidden?: bool,
+  id?: string,
+  tabIndex?: int,
+  role?: string,
+  rel?: string,
+  @as("aria-checked") ariaChecked?: [#"true" | #"false" | #mixed],
+  @as("aria-controls") ariaControls?: string,
+  @as("aria-current") ariaCurrent?: [#page | #step | #location | #date | #time | #"true" | #"false"],
+  @as("aria-describedby") ariaDescribedby?: string,
+  @as("aria-disabled") ariaDisabled?: bool,
+  @as("aria-expanded") ariaExpanded?: bool,
+  @as("aria-haspopup") ariaHaspopup?: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"],
+  @as("aria-hidden") ariaHidden?: bool,
+  @as("aria-invalid") ariaInvalid?: [#grammar | #"false" | #spelling | #"true"],
+  @as("aria-label") ariaLabel?: string,
+  @as("aria-labelledby") ariaLabelledby?: string,
+  @as("aria-live") ariaLive?: [#off | #polite | #assertive | #rude],
+  @as("aria-pressed") ariaPressed?: [#"true" | #"false" | #mixed],
+  @as("aria-required") ariaRequired?: bool,
+  @as("aria-selected") ariaSelected?: bool,
+  children?: React.element,
+  onCopy?: PositionerSharedTypes.baseUIEvent => unit,
+  onCut?: PositionerSharedTypes.baseUIEvent => unit,
+  onPaste?: PositionerSharedTypes.baseUIEvent => unit,
+  onFocus?: PositionerSharedTypes.baseUIEvent => unit,
+  onBlur?: PositionerSharedTypes.baseUIEvent => unit,
+  onChange?: PositionerSharedTypes.baseUIEvent => unit,
+  onInput?: PositionerSharedTypes.baseUIEvent => unit,
+  onSubmit?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyDown?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyPress?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyUp?: PositionerSharedTypes.baseUIEvent => unit,
+  onClick?: PositionerSharedTypes.baseUIEvent => unit,
+  onContextMenu?: PositionerSharedTypes.baseUIEvent => unit,
+  onDoubleClick?: PositionerSharedTypes.baseUIEvent => unit,
+  onDrag?: PositionerSharedTypes.baseUIEvent => unit,
+  onDrop?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseDown?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseEnter?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseLeave?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseMove?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseOut?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseOver?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseUp?: PositionerSharedTypes.baseUIEvent => unit,
+  onScroll?: PositionerSharedTypes.baseUIEvent => unit,
+  onWheel?: PositionerSharedTypes.baseUIEvent => unit,
+  disabled?: bool,
+  @as("type") type_?: TriggerTypes.triggerType,
+  formAction?: CommonTypes.triggerFormAction<'a>,
+  formEncType?: string,
+  formMethod?: string,
+  formNoValidate?: bool,
+  formTarget?: string,
+  name?: string,
+  value?: CommonTypes.stringOrNumberOrStringArray,
+  className?: ItemTypes.accordionItemClassName,
+  render?: React.element,  // ⓘ function form: wrap with `renderFn` (zero-cost)
+  ref?: React.ref<Nullable.t<Dom.element>>,
+}
+
+@module("@base-ui-components/react") @scope("Accordion")
+external make: React.component<props<'a>> = "Trigger"

benchmark/baselines/_base-ui-components_react/bindings/CheckboxRoot.res

@@ -1,70 +1,72 @@
 /** zero-cost wrapper: pass the FUNCTION form of `render` — `render={renderFn((…) => …)}` */
 external renderFn: ((PositionerSharedTypes.htmlProps, RootSharedTypes.checkboxRootState) => React.element) => React.element = "%identity"
 
-@module("@base-ui-components/react") @scope("Checkbox") @react.component
-external make: (
-  ~id: string=?,
-  ~name: string=?,
-  ~checked: bool=?,
-  ~defaultChecked: bool=?,
-  ~disabled: bool=?,
-  ~onCheckedChange: (bool, PositionerSharedTypes.utilsOnCheckedChangeConfig) => unit=?,
-  ~readOnly: bool=?,
-  ~required: bool=?,
-  ~indeterminate: bool=?,
-  ~inputRef: React.ref<Nullable.t<Dom.element>>=?,
-  ~parent: bool=?,
-  ~uncheckedValue: string=?,
-  ~value: string=?,
-  ~nativeButton: bool=?,
-  ~className: RootSharedTypes.checkboxRootClassName=?,
-  ~style: RootSharedTypes.checkboxRootStyle=?,
-  ~title: string=?,
-  ~autoFocus: bool=?,
-  ~hidden: bool=?,
-  ~tabIndex: int=?,
-  ~role: string=?,
-  ~rel: string=?,
-  @as("aria-checked") ~ariaChecked: [#"true" | #"false" | #mixed]=?,
-  @as("aria-controls") ~ariaControls: string=?,
-  @as("aria-current") ~ariaCurrent: [#page | #step | #location | #date | #time | #"true" | #"false"]=?,
-  @as("aria-describedby") ~ariaDescribedby: string=?,
-  @as("aria-disabled") ~ariaDisabled: bool=?,
-  @as("aria-expanded") ~ariaExpanded: bool=?,
-  @as("aria-haspopup") ~ariaHaspopup: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"]=?,
-  @as("aria-hidden") ~ariaHidden: bool=?,
-  @as("aria-invalid") ~ariaInvalid: [#grammar | #"false" | #spelling | #"true"]=?,
-  @as("aria-label") ~ariaLabel: string=?,
-  @as("aria-labelledby") ~ariaLabelledby: string=?,
-  @as("aria-live") ~ariaLive: [#off | #polite | #assertive | #rude]=?,
-  @as("aria-pressed") ~ariaPressed: [#"true" | #"false" | #mixed]=?,
-  @as("aria-required") ~ariaRequired: bool=?,
-  @as("aria-selected") ~ariaSelected: bool=?,
-  ~children: React.element=?,
-  ~onCopy: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onCut: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onPaste: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onFocus: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onBlur: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onInput: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onSubmit: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyDown: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyPress: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onKeyUp: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onClick: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onContextMenu: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDoubleClick: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDrag: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onDrop: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseDown: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseEnter: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseLeave: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseMove: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseOut: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseOver: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onMouseUp: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onScroll: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~onWheel: PositionerSharedTypes.baseUIEvent => unit=?,
-  ~render: React.element=?,  // ⓘ function form: wrap with `renderFn` (zero-cost)
-  ~ref: React.ref<Nullable.t<Dom.element>>=?,
-) => React.element = "Root"
+type props = {
+  ...PositionerSharedTypes.nativeButtonProps,
+  id?: string,
+  name?: string,
+  checked?: bool,
+  defaultChecked?: bool,
+  disabled?: bool,
+  onCheckedChange?: (bool, PositionerSharedTypes.utilsOnCheckedChangeConfig) => unit,
+  readOnly?: bool,
+  required?: bool,
+  indeterminate?: bool,
+  inputRef?: React.ref<Nullable.t<Dom.element>>,
+  parent?: bool,
+  uncheckedValue?: string,
+  value?: string,
+  className?: RootSharedTypes.checkboxRootClassName,
+  style?: RootSharedTypes.checkboxRootStyle,
+  title?: string,
+  autoFocus?: bool,
+  hidden?: bool,
+  tabIndex?: int,
+  role?: string,
+  rel?: string,
+  @as("aria-checked") ariaChecked?: [#"true" | #"false" | #mixed],
+  @as("aria-controls") ariaControls?: string,
+  @as("aria-current") ariaCurrent?: [#page | #step | #location | #date | #time | #"true" | #"false"],
+  @as("aria-describedby") ariaDescribedby?: string,
+  @as("aria-disabled") ariaDisabled?: bool,
+  @as("aria-expanded") ariaExpanded?: bool,
+  @as("aria-haspopup") ariaHaspopup?: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"],
+  @as("aria-hidden") ariaHidden?: bool,
+  @as("aria-invalid") ariaInvalid?: [#grammar | #"false" | #spelling | #"true"],
+  @as("aria-label") ariaLabel?: string,
+  @as("aria-labelledby") ariaLabelledby?: string,
+  @as("aria-live") ariaLive?: [#off | #polite | #assertive | #rude],
+  @as("aria-pressed") ariaPressed?: [#"true" | #"false" | #mixed],
+  @as("aria-required") ariaRequired?: bool,
+  @as("aria-selected") ariaSelected?: bool,
+  children?: React.element,
+  onCopy?: PositionerSharedTypes.baseUIEvent => unit,
+  onCut?: PositionerSharedTypes.baseUIEvent => unit,
+  onPaste?: PositionerSharedTypes.baseUIEvent => unit,
+  onFocus?: PositionerSharedTypes.baseUIEvent => unit,
+  onBlur?: PositionerSharedTypes.baseUIEvent => unit,
+  onInput?: PositionerSharedTypes.baseUIEvent => unit,
+  onSubmit?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyDown?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyPress?: PositionerSharedTypes.baseUIEvent => unit,
+  onKeyUp?: PositionerSharedTypes.baseUIEvent => unit,
+  onClick?: PositionerSharedTypes.baseUIEvent => unit,
+  onContextMenu?: PositionerSharedTypes.baseUIEvent => unit,
+  onDoubleClick?: PositionerSharedTypes.baseUIEvent => unit,
+  onDrag?: PositionerSharedTypes.baseUIEvent => unit,
+  onDrop?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseDown?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseEnter?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseLeave?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseMove?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseOut?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseOver?: PositionerSharedTypes.baseUIEvent => unit,
+  onMouseUp?: PositionerSharedTypes.baseUIEvent => unit,
+  onScroll?: PositionerSharedTypes.baseUIEvent => unit,
+  onWheel?: PositionerSharedTypes.baseUIEvent => unit,
+  render?: React.element,  // ⓘ function form: wrap with `renderFn` (zero-cost)
+  ref?: React.ref<Nullable.t<Dom.element>>,
+}
+
+@module("@base-ui-components/react") @scope("Checkbox")
+external make: React.component<props> = "Root"