@remix-run/ui 0.1.2 → 0.2.0

package/src/components/select/select.tsx

@@ -10,6 +10,7 @@ import {
   type ElementProps,
   type Handle,
   type MixinHandle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -106,7 +107,7 @@ interface SelectContextValue {
   unregisterTrigger: (node: HTMLButtonElement) => void
 }
 
-function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>) {
+function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>): () => RemixNode {
   let triggerRef: HTMLButtonElement | undefined
   let listboxRef: listbox.ListboxRef | undefined
   let surfaceRef: HTMLElement | undefined
@@ -396,7 +397,11 @@ function getSelectContext(handle: Handle | MixinHandle) {
   return handle.context.get(SelectProvider)
 }
 
-const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) => {
+const triggerMixin: MixinFactory<HTMLButtonElement, [], ElementProps> = createMixin<
+  HTMLButtonElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return (props) => [
@@ -428,7 +433,11 @@ const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) =
   ]
 })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
   let popoverState = handle.context.get(popover.Context)
 
@@ -453,7 +462,11 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () => [
@@ -466,7 +479,11 @@ const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () =>
@@ -532,17 +549,17 @@ const select = {
 export function onSelectChange<target extends HTMLElement>(
   handler: SelectChangeHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
   return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
 
-function SelectLabel(handle: Handle) {
+function SelectLabel(handle: Handle): () => RemixNode {
   let context = getSelectContext(handle)
 
   return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
 }
 
-export function Select(handle: Handle<SelectProps>) {
+export function Select(handle: Handle<SelectProps>): () => RemixNode {
   return () => {
     let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
 
@@ -568,7 +585,7 @@ export function Select(handle: Handle<SelectProps>) {
   }
 }
 
-export function Option(handle: Handle<SelectOptionProps>) {
+export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
   return () => {
     let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
 

package/src/index.ts

@@ -51,6 +51,7 @@ export type { HostProps, LayoutAnimationConfig } from './runtime/dom.ts'
 export { createMixin } from './runtime/mixins/mixin.ts'
 export type {
   MixinDescriptor,
+  MixinFactory,
   MixinHandle,
   MixinType,
   MixInput,

package/src/runtime/component.ts

@@ -118,13 +118,18 @@ export type ContextFrom<ComponentType> =
 
 /**
  * Context storage API exposed on component handles.
+ *
+ * Context values are keyed by provider component identity. `get(Component)`
+ * reads the nearest ancestor instance whose component function is exactly
+ * `Component`, so nested instances of the same provider shadow outer instances
+ * while different component types remain independent.
  */
 export interface Context<C> {
   /** Replaces the current context value for this component instance. */
   set(values: C): void
-  /** Reads the context value associated with the given component type. */
+  /** Reads the context value from the nearest ancestor instance of the given component type. */
   get<ComponentType>(component: ComponentType): ContextFrom<ComponentType>
-  /** Reads the context value associated with the given component key. */
+  /** Reads an unknown context value for an untyped lookup. */
   get(component: ElementType | symbol): unknown | undefined
 }
 
@@ -218,7 +223,14 @@ type ComponentConfig = {
 /**
  * Runtime handle returned by {@link createComponent}.
  */
-export type ComponentHandle = ReturnType<typeof createComponent>
+export interface ComponentHandle<C = NoContext> {
+  frame: FrameHandle
+  render(nextProps: ElementProps): [RemixNode, Array<() => void>]
+  remove(): Array<() => void>
+  setScheduleUpdate(nextScheduleUpdate: () => void): void
+  getContextValue(): C | undefined
+  isRemoved(): boolean
+}
 
 /**
  * Creates the internal runtime wrapper for a component instance.
@@ -226,11 +238,11 @@ export type ComponentHandle = ReturnType<typeof createComponent>
  * @param config Component runtime configuration.
  * @returns Component runtime helpers used by the reconciler.
  */
-export function createComponent<C = NoContext>(config: ComponentConfig) {
+export function createComponent<C = NoContext>(config: ComponentConfig): ComponentHandle<C> {
   return new ComponentRuntime<C>(config)
 }
 
-class ComponentRuntime<C = NoContext> {
+class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   frame: FrameHandle
 
   #config: ComponentConfig
@@ -240,6 +252,7 @@ class ComponentRuntime<C = NoContext> {
   #props = {} as ElementProps
   #renderController: AbortController | undefined
   #renderFn: RenderFn | undefined
+  #removed = false
   #scheduleUpdate: () => void = () => {
     throw new Error('scheduleUpdate not implemented')
   }
@@ -252,7 +265,7 @@ class ComponentRuntime<C = NoContext> {
   }
 
   render = (nextProps: ElementProps): [RemixNode, Array<() => void>] => {
-    if (this.#connectedController?.signal.aborted) {
+    if (this.#removed) {
       console.warn('render called after component was removed, potential application memory leak')
       return [null, []]
     }
@@ -278,9 +291,11 @@ class ComponentRuntime<C = NoContext> {
   }
 
   remove = (): Array<() => void> => {
+    if (this.#removed) return []
+    this.#removed = true
     this.#connectedController?.abort()
     this.#abortRenderSignal()
-    return this.#dequeueTasks()
+    return this.#dequeueTasks(AbortSignal.abort())
   }
 
   setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
@@ -289,6 +304,8 @@ class ComponentRuntime<C = NoContext> {
 
   getContextValue = (): C | undefined => this.#contextValue
 
+  isRemoved = (): boolean => this.#removed
+
   #createHandle(): Handle<ElementProps, C> {
     let component = this
     let context: Context<C> = {
@@ -303,6 +320,11 @@ class ComponentRuntime<C = NoContext> {
       props: this.#props,
       update: () =>
         new Promise((resolve) => {
+          if (component.#removed) {
+            resolve(AbortSignal.abort())
+            return
+          }
+
           this.#tasks.push((signal) => resolve(signal))
           this.#scheduleUpdate()
         }),
@@ -335,14 +357,14 @@ class ComponentRuntime<C = NoContext> {
     this.#renderController = undefined
   }
 
-  #dequeueTasks(): Array<() => void> {
-    let needsSignal = this.#tasks.some((task) => task.length >= 1)
+  #dequeueTasks(signal?: AbortSignal): Array<() => void> {
+    let needsSignal = signal === undefined && this.#tasks.some((task) => task.length >= 1)
 
     if (needsSignal) {
       this.#renderController ??= new AbortController()
     }
 
-    let signal = this.#renderController?.signal
+    signal ??= this.#renderController?.signal
     let tasks = this.#tasks.splice(0, this.#tasks.length)
     return tasks.map((task) => () => task(signal!))
   }
@@ -366,7 +388,7 @@ function syncProps(target: ElementProps, next: ElementProps): void {
  * @param handle Component handle for the frame instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Frame(handle: Handle<FrameProps, FrameHandle>) {
+export function Frame(handle: Handle<FrameProps, FrameHandle>): RenderFn {
   void handle
   return () => null // reconciler renders
 }
@@ -377,7 +399,7 @@ export function Frame(handle: Handle<FrameProps, FrameHandle>) {
  * @param handle Component handle for the fragment instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Fragment(handle: Handle<FragmentProps>) {
+export function Fragment(handle: Handle<FragmentProps>): RenderFn {
   void handle
   return () => null // reconciler renders
 }

package/src/runtime/core/attributes.ts

@@ -14,6 +14,17 @@ const ATTRIBUTE_FALLBACK_NAMES = new Set([
   'colSpan',
   'role',
   'popover',
+  'translate',
+])
+
+const BOOLEANISH_STRING_ATTRIBUTES = new Set([
+  'autoReverse',
+  'contenteditable',
+  'draggable',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+  'spellcheck',
 ])
 
 export const FRAMEWORK_PROPS = new Set(['children', 'mix', 'key', 'animate', 'innerHTML', 'on'])
@@ -43,9 +54,11 @@ export function canUseProperty(
   element: Element,
   name: string,
   isSvg: boolean,
+  attr: string,
 ): element is Element & Record<string, unknown> {
   if (isSvg) return false
   if (ATTRIBUTE_FALLBACK_NAMES.has(name)) return false
+  if (isBooleanishStringAttribute(attr)) return false
   return name in element
 }
 
@@ -68,6 +81,14 @@ export function normalizeAttributeName(
   return normalizeSvgAttribute(name)
 }
 
+export function isBooleanishStringAttribute(name: string): boolean {
+  return BOOLEANISH_STRING_ATTRIBUTES.has(name)
+}
+
+export function shouldStringifyBooleanAttribute(name: string): boolean {
+  return isBooleanishStringAttribute(name) || name === 'value'
+}
+
 export function serializeStyleObject(style: Record<string, unknown>): string {
   let parts: string[] = []
 

package/src/runtime/core/props.ts

@@ -2,6 +2,7 @@ import type { ElementProps } from '../jsx.ts'
 import {
   canUseProperty,
   getMergedClassName,
+  isBooleanishStringAttribute,
   normalizeAttributeName,
   serializeStyleObject,
   toKebabCase,
@@ -68,11 +69,11 @@ export function patchHostProps(curr: ElementProps, next: ElementProps, dom: Elem
     if (name === 'class' || name === 'className') continue
     if (name in next && next[name] != null) continue
 
-    if (canUseProperty(dom, name, isSvg)) {
+    let { ns, attr } = normalizeAttributeName(name, isSvg)
+    if (canUseProperty(dom, name, isSvg, attr)) {
       clearRuntimePropertyOnRemoval(dom, name)
     }
 
-    let { ns, attr } = normalizeAttributeName(name, isSvg)
     if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
     else dom.removeAttribute(attr)
   }
@@ -114,7 +115,7 @@ function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolea
     return
   }
 
-  if (canUseProperty(dom, name, isSvg)) {
+  if (canUseProperty(dom, name, isSvg, attr)) {
     try {
       dom[name] = value == null ? '' : value
       return
@@ -124,7 +125,8 @@ function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolea
   if (typeof value === 'function') return
 
   let isAriaOrData = name.startsWith('aria-') || name.startsWith('data-')
-  if (value != null && (value !== false || isAriaOrData)) {
+  let isBooleanishString = isBooleanishStringAttribute(attr)
+  if (value != null && (value !== false || isAriaOrData || isBooleanishString)) {
     let attrValue = name === 'popover' && value === true ? '' : String(value)
     if (ns) dom.setAttributeNS(ns, attr, attrValue)
     else dom.setAttribute(attr, attrValue)

package/src/runtime/dom.ts

@@ -9,6 +9,7 @@ import type { MixInput } from './mixins/mixin.ts'
  * - Copyright (c) 2015-present Jason Miller
  */
 type Booleanish = boolean | 'true' | 'false'
+type TranslateValue = 'yes' | 'no'
 
 /**
  * Layout animation configuration for FLIP-based position animations.
@@ -109,6 +110,8 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   attributeName?: Trackable<string | undefined>
   /** The `attributeType` SVG attribute. */
   attributeType?: Trackable<string | undefined>
+  /** The `autoReverse` SVG attribute. */
+  autoReverse?: Trackable<Booleanish | undefined>
   /** The `azimuth` SVG attribute. */
   azimuth?: Trackable<number | string | undefined>
   /** The `baseFrequency` SVG attribute. */
@@ -212,7 +215,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `exponent` SVG attribute. */
   exponent?: Trackable<number | string | undefined>
   /** The `externalResourcesRequired` SVG attribute. */
-  externalResourcesRequired?: Trackable<number | string | undefined>
+  externalResourcesRequired?: Trackable<Booleanish | undefined>
   /** The `fill` SVG attribute. */
   fill?: Trackable<string | undefined>
   /** The `fillOpacity` SVG attribute. */
@@ -238,7 +241,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `flood-opacity` SVG attribute. */
   'flood-opacity'?: Trackable<number | string | undefined>
   /** The `focusable` SVG attribute. */
-  focusable?: Trackable<number | string | undefined>
+  focusable?: Trackable<Booleanish | undefined>
   /** The `fontFamily` SVG attribute. */
   fontFamily?: Trackable<string | undefined>
   /** The `font-family` SVG attribute. */
@@ -446,7 +449,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `pointsAtZ` SVG attribute. */
   pointsAtZ?: Trackable<number | string | undefined>
   /** The `preserveAlpha` SVG attribute. */
-  preserveAlpha?: Trackable<number | string | undefined>
+  preserveAlpha?: Trackable<Booleanish | undefined>
   /** The `preserveAspectRatio` SVG attribute. */
   preserveAspectRatio?: Trackable<string | undefined>
   /** The `primitiveUnits` SVG attribute. */
@@ -1263,7 +1266,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `decoding` HTML attribute. */
   decoding?: Trackable<'sync' | 'async' | 'auto' | undefined>
   /** The `draggable` HTML attribute. */
-  draggable?: Trackable<boolean | undefined>
+  draggable?: Trackable<Booleanish | undefined>
   /** The `encType` HTML attribute. */
   encType?: Trackable<string | undefined>
   /** The `enctype` HTML attribute. */
@@ -1487,7 +1490,9 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `span` HTML attribute. */
   span?: Trackable<number | undefined>
   /** The `spellcheck` HTML attribute. */
-  spellcheck?: Trackable<boolean | undefined>
+  spellcheck?: Trackable<Booleanish | undefined>
+  /** The `spellCheck` HTML attribute. */
+  spellCheck?: Trackable<Booleanish | undefined>
   /** The `src` HTML attribute. */
   src?: Trackable<string | undefined>
   /** The `srcDoc` HTML attribute. */
@@ -1551,7 +1556,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `results` HTML attribute. */
   results?: Trackable<number | undefined>
   /** The `translate` HTML attribute. */
-  translate?: Trackable<boolean | undefined>
+  translate?: Trackable<TranslateValue | undefined>
 
   // RDFa Attributes
   /** The `about` HTML attribute. */
@@ -1632,7 +1637,7 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `dir` HTML attribute. */
   dir?: Trackable<'auto' | 'rtl' | 'ltr' | undefined>
   /** The `draggable` HTML attribute. */
-  draggable?: Trackable<boolean | undefined>
+  draggable?: Trackable<Booleanish | undefined>
   /** The `enterkeyhint` HTML attribute. */
   enterkeyhint?: Trackable<
     'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined
@@ -1662,7 +1667,9 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `slot` HTML attribute. */
   slot?: Trackable<string | undefined>
   /** The `spellcheck` HTML attribute. */
-  spellcheck?: Trackable<boolean | undefined>
+  spellcheck?: Trackable<Booleanish | undefined>
+  /** The `spellCheck` HTML attribute. */
+  spellCheck?: Trackable<Booleanish | undefined>
   /** The `style` HTML attribute. */
   style?: Trackable<string | StyleProps | undefined>
   /** The `tabindex` HTML attribute. */
@@ -1672,7 +1679,7 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `title` HTML attribute. */
   title?: Trackable<string | undefined>
   /** The `translate` HTML attribute. */
-  translate?: Trackable<boolean | undefined>
+  translate?: Trackable<TranslateValue | undefined>
 
   // WAI-ARIA Attributes
   // Most elements only allow a subset of roles and so this

package/src/runtime/jsx.ts

@@ -44,7 +44,7 @@ export type Renderable = RemixElement | string | number | bigint | boolean | nul
  * Particularly useful for `props.children`.
  *
  * ```tsx
- * function MyComponent({ children }: { children: RemixNode }) {}
+ * function MyComponent(handle: Handle<{ children: RemixNode }>) {}
  * ```
  */
 export type RemixNode = Renderable | RemixNode[]

package/src/runtime/mixins/link-mixin.ts

@@ -1,4 +1,4 @@
-import { createMixin, renderMixinElement } from './mixin.ts'
+import { createMixin, renderMixinElement, type MixinFactory } from './mixin.ts'
 import { navigate } from '../navigation.ts'
 import { on } from './on-mixin.ts'
 import type { ElementProps } from '../jsx.ts'
@@ -21,108 +21,110 @@ const nativeLinkHostTypes = new Set(['a', 'area'])
 /**
  * Adds client-side navigation behavior to anchor-like elements.
  */
-export const link = createMixin<
+export const link: MixinFactory<
   HTMLElement,
   [href: string, options?: NavigationOptions],
   LinkCurrentProps
->((handle, hostType) => {
-  let suppressKeyboardClick = false
+> = createMixin<HTMLElement, [href: string, options?: NavigationOptions], LinkCurrentProps>(
+  (handle, hostType) => {
+    let suppressKeyboardClick = false
 
-  return (href, options, props: LinkCurrentProps) => {
-    if (nativeLinkHostTypes.has(hostType)) {
-      return renderMixinElement(handle.element, {
-        ...(props ?? {}),
-        href,
-        ...(options?.target == null ? {} : { 'rmx-target': options.target }),
-        ...(options?.src == null ? {} : { 'rmx-src': options.src }),
-        ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
-      })
-    }
-
-    let nextProps = { ...props }
-    if (nextProps.role == null) {
-      nextProps.role = 'link'
-    }
-    if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
-      nextProps['aria-disabled'] = 'true'
-    }
-    if (hostType === 'button' && nextProps.type == null) {
-      nextProps.type = 'button'
-    }
-    if (
-      hostType !== 'button' &&
-      nextProps.tabIndex == null &&
-      nextProps.tabindex == null &&
-      nextProps.contentEditable == null &&
-      nextProps.contenteditable == null
-    ) {
-      nextProps.tabIndex = 0
-    }
+    return (href, options, props: LinkCurrentProps) => {
+      if (nativeLinkHostTypes.has(hostType)) {
+        return renderMixinElement(handle.element, {
+          ...(props ?? {}),
+          href,
+          ...(options?.target == null ? {} : { 'rmx-target': options.target }),
+          ...(options?.src == null ? {} : { 'rmx-src': options.src }),
+          ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
+        })
+      }
 
-    return renderMixinElement(handle.element, {
-      ...nextProps,
-      mix: [
-        on('click', (event) => {
-          if (event.detail === 0 && suppressKeyboardClick) {
-            suppressKeyboardClick = false
-            event.preventDefault()
-            return
-          }
+      let nextProps = { ...props }
+      if (nextProps.role == null) {
+        nextProps.role = 'link'
+      }
+      if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
+        nextProps['aria-disabled'] = 'true'
+      }
+      if (hostType === 'button' && nextProps.type == null) {
+        nextProps.type = 'button'
+      }
+      if (
+        hostType !== 'button' &&
+        nextProps.tabIndex == null &&
+        nextProps.tabindex == null &&
+        nextProps.contentEditable == null &&
+        nextProps.contenteditable == null
+      ) {
+        nextProps.tabIndex = 0
+      }
 
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
-            event.preventDefault()
-            return
-          }
-          if (event.button !== 0) return
+      return renderMixinElement(handle.element, {
+        ...nextProps,
+        mix: [
+          on('click', (event) => {
+            if (event.detail === 0 && suppressKeyboardClick) {
+              suppressKeyboardClick = false
+              event.preventDefault()
+              return
+            }
 
-          event.preventDefault()
-          if (event.metaKey || event.ctrlKey) {
-            globalThis.open(href, '_blank')
-            return
-          }
+            suppressKeyboardClick = false
+            if (isDisabledElement(event.currentTarget)) {
+              event.preventDefault()
+              return
+            }
+            if (event.button !== 0) return
 
-          void navigate(href, options)
-        }),
-        on('auxclick', (event) => {
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
             event.preventDefault()
-            return
-          }
-          if (event.button !== 1) return
+            if (event.metaKey || event.ctrlKey) {
+              globalThis.open(href, '_blank')
+              return
+            }
 
-          event.preventDefault()
-          globalThis.open(href, '_blank')
-        }),
-        on('keydown', (event) => {
-          if (event.key === 'Enter') {
-            if (event.repeat) return
+            void navigate(href, options)
+          }),
+          on('auxclick', (event) => {
+            suppressKeyboardClick = false
             if (isDisabledElement(event.currentTarget)) {
               event.preventDefault()
               return
             }
+            if (event.button !== 1) return
 
-            suppressKeyboardClick = hostType === 'button'
             event.preventDefault()
-            void navigate(href, options)
-            return
-          }
+            globalThis.open(href, '_blank')
+          }),
+          on('keydown', (event) => {
+            if (event.key === 'Enter') {
+              if (event.repeat) return
+              if (isDisabledElement(event.currentTarget)) {
+                event.preventDefault()
+                return
+              }
 
-          if (hostType === 'button' && event.key === ' ') {
-            suppressKeyboardClick = true
-            event.preventDefault()
-          }
-        }),
-        on('keyup', (event) => {
-          if (hostType === 'button' && event.key === ' ') {
-            event.preventDefault()
-          }
-        }),
-      ],
-    })
-  }
-})
+              suppressKeyboardClick = hostType === 'button'
+              event.preventDefault()
+              void navigate(href, options)
+              return
+            }
+
+            if (hostType === 'button' && event.key === ' ') {
+              suppressKeyboardClick = true
+              event.preventDefault()
+            }
+          }),
+          on('keyup', (event) => {
+            if (hostType === 'button' && event.key === ' ') {
+              event.preventDefault()
+            }
+          }),
+        ],
+      })
+    }
+  },
+)
 
 function isDisabledElement(node: Element) {
   return (

package/src/runtime/mixins/mixin.ts

@@ -130,6 +130,14 @@ export type MixinDescriptor<
   readonly __node?: (node: node) => void
 }
 
+export type MixinFactory<
+  node extends EventTarget = Element,
+  args extends unknown[] = [],
+  props extends ElementProps = ElementProps,
+> = <boundNode extends node = node>(
+  ...args: RebindTuple<args, node, boundNode>
+) => MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props>
+
 type PreviousMixDepth = [0, 0, 1, 2, 3, 4]
 type FalsyMixValue = false | 0 | 0n | '' | null | undefined
 type NullableMixValue<descriptor> = descriptor | FalsyMixValue
@@ -244,7 +252,7 @@ export function createMixin<
   node extends EventTarget = Element,
   args extends unknown[] = [],
   props extends ElementProps = ElementProps,
->(type: MixinType<node, args, props>) {
+>(type: MixinType<node, args, props>): MixinFactory<node, args, props> {
   return <boundNode extends node = node>(
     ...args: RebindTuple<args, node, boundNode>
   ): MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props> => ({