@remix-run/ui 0.0.0 → 0.1.0

package/src/runtime/invariant.ts

@@ -0,0 +1,31 @@
+/**
+ * Use this when framework code is incorrect, indicating an internal bug rather
+ * than application code error.
+ *
+ * @param assertion The value to check for truthiness
+ * @param message Optional message to include in the error
+ */
+export function invariant(assertion: any, message?: string): asserts assertion {
+  let prefix = 'Framework invariant'
+  if (assertion) return
+  throw new Error(message ? `${prefix}: ${message}` : prefix)
+}
+
+/**
+ * Use this when application logic is incorrect, indicating a developer error.
+ *
+ * Using ID-based warnings with external documentation links allows us to:
+ * - Update warning messages without releasing new versions
+ * - Avoid bloating the library with warning messages or complicating builds
+ *   with prod/dev build/export shenanigans
+ * - Provide detailed troubleshooting guides and examples
+ *
+ * `id` is first so we can easily grep the codebase for ensure calls
+ *
+ * @param id The error ID for the documentation link
+ * @param assertion The value to check for truthiness
+ */
+export function ensure(id: number, assertion: boolean): asserts assertion {
+  if (assertion) return
+  throw new Error(`REMIX_${id}: https://rmx.as/w/${id}`)
+}

package/src/runtime/jsx.ts

@@ -0,0 +1,398 @@
+import type * as dom from './dom.d.ts'
+import type { Handle, RenderFn } from './component.ts'
+
+/**
+ * Any valid element type accepted by JSX or {@link import('./create-element.ts').createElement}.
+ * - `string` for host elements (e.g., 'div')
+ * - `Function` for user components
+ */
+export type ElementType = string | Function
+
+/**
+ * Generic bag of props passed to elements/components.
+ * Consumers should define specific prop types on their components; this is the
+ * renderer's normalized shape used throughout reconciler/SSR code.
+ */
+export type ElementProps = Record<string, any>
+
+/**
+ * A virtual element produced by JSX or {@link import('./create-element.ts').createElement}
+ * describing UI. Carries a `$rmx` brand used to distinguish it from plain objects at runtime.
+ */
+export interface RemixElement {
+  /** Host tag or component function for the element. */
+  type: ElementType
+  /** Normalized props for the element. */
+  props: ElementProps
+  /** Optional reconciliation key. */
+  key?: any
+  /** Internal brand used to distinguish Remix elements at runtime. */
+  $rmx: true
+}
+
+/**
+ * Any single value Remix can render. Booleans render as empty text.
+ */
+export type Renderable = RemixElement | string | number | bigint | boolean | null | undefined
+
+/**
+ * Anything that Remix can render, including nested arrays of renderable values.
+ * This mirrors how JSX spreads children into arrays (e.g. when using `map`)
+ * and how our reconciler flattens children at runtime.
+ *
+ * Particularly useful for `props.children`.
+ *
+ * ```tsx
+ * function MyComponent({ children }: { children: RemixNode }) {}
+ * ```
+ */
+export type RemixNode = Renderable | RemixNode[]
+
+type PreviousMixDepth = [0, 0, 1, 2, 3, 4]
+type FalsyMixValue = false | 0 | 0n | '' | null | undefined
+type NullableMixValue<mix> = mix | FalsyMixValue
+type MixLeaf<mix> = mix extends ReadonlyArray<infer descriptor> ? MixLeaf<descriptor> : mix
+type NormalizeMixLeaf<mix> = Exclude<MixLeaf<mix>, FalsyMixValue>
+type NestedMixValue<mix, depth extends number = 4> = depth extends 0
+  ? NullableMixValue<mix> | ReadonlyArray<NullableMixValue<mix>>
+  : NullableMixValue<mix> | ReadonlyArray<NestedMixValue<mix, PreviousMixDepth[depth]>>
+
+type NormalizeMixProp<props> = props extends { mix?: infer mix }
+  ? Omit<props, 'mix'> & {
+      mix?: Array<NormalizeMixLeaf<mix>>
+    }
+  : props
+
+type ExpandMixProp<props> = props extends { mix?: infer mix }
+  ? Omit<props, 'mix'> & {
+      mix?: NestedMixValue<NormalizeMixLeaf<mix>>
+    }
+  : props
+
+type MixinElementType = ((
+  handle: { update(): Promise<AbortSignal> },
+  setup: unknown,
+) => (props: any) => RemixElement) & {
+  __rmxMixinElementType: string
+}
+
+type MergeComponentProps<handleProps, renderProps> = [handleProps] extends [Record<string, never>]
+  ? renderProps
+  : handleProps & renderProps
+
+/**
+ * Get the props for a specific element type.
+ *
+ * @example
+ * interface MyButtonProps extends Props<"button"> {
+ *   size: "sm" | "md" | "lg"
+ * }
+ */
+export type Props<T extends keyof JSX.IntrinsicElements> = NormalizeMixProp<
+  JSX.IntrinsicElements[T]
+>
+
+/**
+ * Creates a Remix virtual element.
+ *
+ * @param type Host tag or component function.
+ * @param props Element props.
+ * @param key Optional reconciliation key.
+ * @returns A Remix virtual element.
+ */
+export function jsx(type: ElementType, props: ElementProps, key?: string): RemixElement
+export function jsx(type: ElementType, props: ElementProps, key?: string): RemixElement {
+  return { type, props: normalizeElementProps(props), key, $rmx: true }
+}
+
+export { jsx as jsxDEV, jsx as jsxs }
+
+declare global {
+  namespace JSX {
+    export interface IntrinsicAttributes {
+      key?: any
+    }
+
+    type Element = RemixElement
+
+    type ElementType =
+      // host elements
+      | keyof IntrinsicElements
+      // Factory component
+      | ((handle: Handle<any, any>) => RenderFn<any>)
+      // Mixin element used internally by mixin render callbacks
+      | MixinElementType
+
+    type ElementChildrenAttribute = {
+      children: any
+    }
+
+    export interface ElementAttributesProperty {
+      props: any
+    }
+
+    type LibraryManagedAttributes<component, props> = component extends MixinElementType
+      ? ExpandMixProp<Parameters<ReturnType<component>>[0]>
+      : component extends (handle: Handle<infer P, any>) => RenderFn<infer R>
+        ? // It's a ComponentFactory - infer props from the handle
+          ExpandMixProp<MergeComponentProps<P, R>>
+        : component extends () => RenderFn<infer P>
+          ? ExpandMixProp<P>
+          : // Otherwise use props as-is (simple function component)
+            ExpandMixProp<props>
+
+    export interface IntrinsicSVGElements {
+      svg: dom.SVGProps<SVGSVGElement>
+      animate: dom.SVGProps<SVGAnimateElement>
+      circle: dom.SVGProps<SVGCircleElement>
+      animateMotion: dom.SVGProps<SVGAnimateMotionElement>
+      animateTransform: dom.SVGProps<SVGAnimateTransformElement>
+      clipPath: dom.SVGProps<SVGClipPathElement>
+      defs: dom.SVGProps<SVGDefsElement>
+      desc: dom.SVGProps<SVGDescElement>
+      ellipse: dom.SVGProps<SVGEllipseElement>
+      feBlend: dom.SVGProps<SVGFEBlendElement>
+      feColorMatrix: dom.SVGProps<SVGFEColorMatrixElement>
+      feComponentTransfer: dom.SVGProps<SVGFEComponentTransferElement>
+      feComposite: dom.SVGProps<SVGFECompositeElement>
+      feConvolveMatrix: dom.SVGProps<SVGFEConvolveMatrixElement>
+      feDiffuseLighting: dom.SVGProps<SVGFEDiffuseLightingElement>
+      feDisplacementMap: dom.SVGProps<SVGFEDisplacementMapElement>
+      feDistantLight: dom.SVGProps<SVGFEDistantLightElement>
+      feDropShadow: dom.SVGProps<SVGFEDropShadowElement>
+      feFlood: dom.SVGProps<SVGFEFloodElement>
+      feFuncA: dom.SVGProps<SVGFEFuncAElement>
+      feFuncB: dom.SVGProps<SVGFEFuncBElement>
+      feFuncG: dom.SVGProps<SVGFEFuncGElement>
+      feFuncR: dom.SVGProps<SVGFEFuncRElement>
+      feGaussianBlur: dom.SVGProps<SVGFEGaussianBlurElement>
+      feImage: dom.SVGProps<SVGFEImageElement>
+      feMerge: dom.SVGProps<SVGFEMergeElement>
+      feMergeNode: dom.SVGProps<SVGFEMergeNodeElement>
+      feMorphology: dom.SVGProps<SVGFEMorphologyElement>
+      feOffset: dom.SVGProps<SVGFEOffsetElement>
+      fePointLight: dom.SVGProps<SVGFEPointLightElement>
+      feSpecularLighting: dom.SVGProps<SVGFESpecularLightingElement>
+      feSpotLight: dom.SVGProps<SVGFESpotLightElement>
+      feTile: dom.SVGProps<SVGFETileElement>
+      feTurbulence: dom.SVGProps<SVGFETurbulenceElement>
+      filter: dom.SVGProps<SVGFilterElement>
+      foreignObject: dom.SVGProps<SVGForeignObjectElement>
+      g: dom.SVGProps<SVGGElement>
+      image: dom.SVGProps<SVGImageElement>
+      line: dom.SVGProps<SVGLineElement>
+      linearGradient: dom.SVGProps<SVGLinearGradientElement>
+      marker: dom.SVGProps<SVGMarkerElement>
+      mask: dom.SVGProps<SVGMaskElement>
+      metadata: dom.SVGProps<SVGMetadataElement>
+      mpath: dom.SVGProps<SVGMPathElement>
+      path: dom.SVGProps<SVGPathElement>
+      pattern: dom.SVGProps<SVGPatternElement>
+      polygon: dom.SVGProps<SVGPolygonElement>
+      polyline: dom.SVGProps<SVGPolylineElement>
+      radialGradient: dom.SVGProps<SVGRadialGradientElement>
+      rect: dom.SVGProps<SVGRectElement>
+      set: dom.SVGProps<SVGSetElement>
+      stop: dom.SVGProps<SVGStopElement>
+      switch: dom.SVGProps<SVGSwitchElement>
+      symbol: dom.SVGProps<SVGSymbolElement>
+      text: dom.SVGProps<SVGTextElement>
+      textPath: dom.SVGProps<SVGTextPathElement>
+      tspan: dom.SVGProps<SVGTSpanElement>
+      use: dom.SVGProps<SVGUseElement>
+      view: dom.SVGProps<SVGViewElement>
+    }
+
+    export interface IntrinsicMathMLElements {
+      annotation: dom.AnnotationMathMLProps<MathMLElement>
+      'annotation-xml': dom.AnnotationXmlMathMLProps<MathMLElement>
+      /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/MathML/Element/maction */
+      maction: dom.MActionMathMLProps<MathMLElement>
+      math: dom.MathMathMLProps<MathMLElement>
+      /** This feature is non-standard. See https://developer.mozilla.org/en-US/docs/Web/MathML/Element/menclose  */
+      menclose: dom.MEncloseMathMLProps<MathMLElement>
+      merror: dom.MErrorMathMLProps<MathMLElement>
+      /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mfenced */
+      mfenced: dom.MFencedMathMLProps<MathMLElement>
+      mfrac: dom.MFracMathMLProps<MathMLElement>
+      mi: dom.MiMathMLProps<MathMLElement>
+      mmultiscripts: dom.MmultiScriptsMathMLProps<MathMLElement>
+      mn: dom.MNMathMLProps<MathMLElement>
+      mo: dom.MOMathMLProps<MathMLElement>
+      mover: dom.MOverMathMLProps<MathMLElement>
+      mpadded: dom.MPaddedMathMLProps<MathMLElement>
+      mphantom: dom.MPhantomMathMLProps<MathMLElement>
+      mprescripts: dom.MPrescriptsMathMLProps<MathMLElement>
+      mroot: dom.MRootMathMLProps<MathMLElement>
+      mrow: dom.MRowMathMLProps<MathMLElement>
+      ms: dom.MSMathMLProps<MathMLElement>
+      mspace: dom.MSpaceMathMLProps<MathMLElement>
+      msqrt: dom.MSqrtMathMLProps<MathMLElement>
+      mstyle: dom.MStyleMathMLProps<MathMLElement>
+      msub: dom.MSubMathMLProps<MathMLElement>
+      msubsup: dom.MSubsupMathMLProps<MathMLElement>
+      msup: dom.MSupMathMLProps<MathMLElement>
+      mtable: dom.MTableMathMLProps<MathMLElement>
+      mtd: dom.MTdMathMLProps<MathMLElement>
+      mtext: dom.MTextMathMLProps<MathMLElement>
+      mtr: dom.MTrMathMLProps<MathMLElement>
+      munder: dom.MUnderMathMLProps<MathMLElement>
+      munderover: dom.MUnderMathMLProps<MathMLElement>
+      semantics: dom.SemanticsMathMLProps<MathMLElement>
+    }
+
+    export interface IntrinsicHTMLElements {
+      a: dom.AccessibleAnchorHTMLProps<HTMLAnchorElement>
+      abbr: dom.HTMLProps<HTMLElement>
+      address: dom.HTMLProps<HTMLElement>
+      area: dom.AccessibleAreaHTMLProps<HTMLAreaElement>
+      article: dom.ArticleHTMLProps<HTMLElement>
+      aside: dom.AsideHTMLProps<HTMLElement>
+      audio: dom.AudioHTMLProps<HTMLAudioElement>
+      b: dom.HTMLProps<HTMLElement>
+      base: dom.BaseHTMLProps<HTMLBaseElement>
+      bdi: dom.HTMLProps<HTMLElement>
+      bdo: dom.HTMLProps<HTMLElement>
+      big: dom.HTMLProps<HTMLElement>
+      blockquote: dom.BlockquoteHTMLProps<HTMLQuoteElement>
+      body: dom.HTMLProps<HTMLBodyElement>
+      br: dom.BrHTMLProps<HTMLBRElement>
+      button: dom.ButtonHTMLProps<HTMLButtonElement>
+      canvas: dom.CanvasHTMLProps<HTMLCanvasElement>
+      caption: dom.CaptionHTMLProps<HTMLTableCaptionElement>
+      cite: dom.HTMLProps<HTMLElement>
+      code: dom.HTMLProps<HTMLElement>
+      col: dom.ColHTMLProps<HTMLTableColElement>
+      colgroup: dom.ColgroupHTMLProps<HTMLTableColElement>
+      data: dom.DataHTMLProps<HTMLDataElement>
+      datalist: dom.DataListHTMLProps<HTMLDataListElement>
+      dd: dom.DdHTMLProps<HTMLElement>
+      del: dom.DelHTMLProps<HTMLModElement>
+      details: dom.DetailsHTMLProps<HTMLDetailsElement>
+      dfn: dom.HTMLProps<HTMLElement>
+      dialog: dom.DialogHTMLProps<HTMLDialogElement>
+      div: dom.HTMLProps<HTMLDivElement>
+      dl: dom.DlHTMLProps<HTMLDListElement>
+      dt: dom.DtHTMLProps<HTMLElement>
+      em: dom.HTMLProps<HTMLElement>
+      embed: dom.EmbedHTMLProps<HTMLEmbedElement>
+      fieldset: dom.FieldsetHTMLProps<HTMLFieldSetElement>
+      figcaption: dom.FigcaptionHTMLProps<HTMLElement>
+      figure: dom.HTMLProps<HTMLElement>
+      footer: dom.FooterHTMLProps<HTMLElement>
+      form: dom.FormHTMLProps<HTMLFormElement>
+      h1: dom.HeadingHTMLProps<HTMLHeadingElement>
+      h2: dom.HeadingHTMLProps<HTMLHeadingElement>
+      h3: dom.HeadingHTMLProps<HTMLHeadingElement>
+      h4: dom.HeadingHTMLProps<HTMLHeadingElement>
+      h5: dom.HeadingHTMLProps<HTMLHeadingElement>
+      h6: dom.HeadingHTMLProps<HTMLHeadingElement>
+      head: dom.HeadHTMLProps<HTMLHeadElement>
+      header: dom.HeaderHTMLProps<HTMLElement>
+      hgroup: dom.HTMLProps<HTMLElement>
+      hr: dom.HrHTMLProps<HTMLHRElement>
+      html: dom.HtmlHTMLProps<HTMLHtmlElement>
+      i: dom.HTMLProps<HTMLElement>
+      iframe: dom.IframeHTMLProps<HTMLIFrameElement>
+      img: dom.AccessibleImgHTMLProps<HTMLImageElement>
+      input: dom.AccessibleInputHTMLProps<HTMLInputElement>
+      ins: dom.InsHTMLProps<HTMLModElement>
+      kbd: dom.HTMLProps<HTMLElement>
+      keygen: dom.KeygenHTMLProps<HTMLUnknownElement>
+      label: dom.LabelHTMLProps<HTMLLabelElement>
+      legend: dom.LegendHTMLProps<HTMLLegendElement>
+      li: dom.LiHTMLProps<HTMLLIElement>
+      link: dom.LinkHTMLProps<HTMLLinkElement>
+      main: dom.MainHTMLProps<HTMLElement>
+      map: dom.MapHTMLProps<HTMLMapElement>
+      mark: dom.HTMLProps<HTMLElement>
+      marquee: dom.MarqueeHTMLProps<HTMLMarqueeElement>
+      menu: dom.MenuHTMLProps<HTMLMenuElement>
+      menuitem: dom.HTMLProps<HTMLUnknownElement>
+      meta: dom.MetaHTMLProps<HTMLMetaElement>
+      meter: dom.MeterHTMLProps<HTMLMeterElement>
+      nav: dom.NavHTMLProps<HTMLElement>
+      noscript: dom.NoScriptHTMLProps<HTMLElement>
+      object: dom.ObjectHTMLProps<HTMLObjectElement>
+      ol: dom.OlHTMLProps<HTMLOListElement>
+      optgroup: dom.OptgroupHTMLProps<HTMLOptGroupElement>
+      option: dom.OptionHTMLProps<HTMLOptionElement>
+      output: dom.OutputHTMLProps<HTMLOutputElement>
+      p: dom.HTMLProps<HTMLParagraphElement>
+      param: dom.ParamHTMLProps<HTMLParamElement>
+      picture: dom.PictureHTMLProps<HTMLPictureElement>
+      pre: dom.HTMLProps<HTMLPreElement>
+      progress: dom.ProgressHTMLProps<HTMLProgressElement>
+      q: dom.QuoteHTMLProps<HTMLQuoteElement>
+      rp: dom.HTMLProps<HTMLElement>
+      rt: dom.HTMLProps<HTMLElement>
+      ruby: dom.HTMLProps<HTMLElement>
+      s: dom.HTMLProps<HTMLElement>
+      samp: dom.HTMLProps<HTMLElement>
+      script: dom.ScriptHTMLProps<HTMLScriptElement>
+      search: dom.SearchHTMLProps<HTMLElement>
+      section: dom.HTMLProps<HTMLElement>
+      select: dom.AccessibleSelectHTMLProps<HTMLSelectElement>
+      slot: dom.SlotHTMLProps<HTMLSlotElement>
+      small: dom.HTMLProps<HTMLElement>
+      source: dom.SourceHTMLProps<HTMLSourceElement>
+      span: dom.HTMLProps<HTMLSpanElement>
+      strong: dom.HTMLProps<HTMLElement>
+      style: dom.StyleHTMLProps<HTMLStyleElement>
+      sub: dom.HTMLProps<HTMLElement>
+      summary: dom.HTMLProps<HTMLElement>
+      sup: dom.HTMLProps<HTMLElement>
+      table: dom.TableHTMLProps<HTMLTableElement>
+      tbody: dom.HTMLProps<HTMLTableSectionElement>
+      td: dom.TdHTMLProps<HTMLTableCellElement>
+      template: dom.TemplateHTMLProps<HTMLTemplateElement>
+      textarea: dom.TextareaHTMLProps<HTMLTextAreaElement>
+      tfoot: dom.HTMLProps<HTMLTableSectionElement>
+      th: dom.ThHTMLProps<HTMLTableCellElement>
+      thead: dom.HTMLProps<HTMLTableSectionElement>
+      time: dom.TimeHTMLProps<HTMLTimeElement>
+      title: dom.TitleHTMLProps<HTMLTitleElement>
+      tr: dom.HTMLProps<HTMLTableRowElement>
+      track: dom.TrackHTMLProps<HTMLTrackElement>
+      u: dom.UlHTMLProps<HTMLElement>
+      ul: dom.HTMLProps<HTMLUListElement>
+      var: dom.HTMLProps<HTMLElement>
+      video: dom.VideoHTMLProps<HTMLVideoElement>
+      wbr: dom.WbrHTMLProps<HTMLElement>
+    }
+
+    export interface IntrinsicElements
+      extends IntrinsicSVGElements,
+        IntrinsicMathMLElements,
+        IntrinsicHTMLElements {}
+  }
+}
+
+function normalizeElementProps(props: ElementProps | null | undefined): ElementProps {
+  if (!props) return {}
+  if (!('mix' in props)) return props
+
+  let { mix, ...rest } = props
+  let normalizedMix = normalizeMixValue(mix)
+  return normalizedMix === undefined ? rest : { ...rest, mix: normalizedMix }
+}
+
+function normalizeMixValue(mix: unknown): unknown[] | undefined {
+  if (!mix) return undefined
+
+  let normalizedMix = flattenMixValue(mix)
+  return normalizedMix.length === 0 ? undefined : normalizedMix
+}
+
+function flattenMixValue(mix: unknown): unknown[] {
+  if (!mix) return []
+  if (!Array.isArray(mix)) return [mix]
+
+  let flattened: unknown[] = []
+
+  for (let item of mix) {
+    flattened.push(...flattenMixValue(item))
+  }
+
+  return flattened
+}

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

@@ -0,0 +1,35 @@
+import { createMixin } from './mixin.ts'
+import type { ElementProps } from '../jsx.ts'
+import type { MixinDescriptor } from './mixin.ts'
+import { createElement } from '../create-element.ts'
+
+const attrsMixin = createMixin<Element, [defaults: ElementProps], ElementProps>(
+  (handle) => (defaults, props) => {
+    let nextProps = props
+
+    for (let key in defaults) {
+      if (props[key] !== undefined) continue
+      if (nextProps === props) nextProps = { ...props }
+      nextProps[key] = defaults[key]
+    }
+
+    return nextProps === props ? handle.element : createElement(handle.element, nextProps)
+  },
+)
+
+/**
+ * Applies default host props unless the element already provides them explicitly.
+ *
+ * @param defaults Default props to apply when the element does not already define them.
+ * @returns A mixin descriptor that provides default host props.
+ */
+export function attrs<
+  node extends EventTarget = Element,
+  defaults extends ElementProps = ElementProps,
+>(defaults: Partial<defaults>): MixinDescriptor<node, [Partial<ElementProps>], ElementProps> {
+  return attrsMixin(defaults as ElementProps) as unknown as MixinDescriptor<
+    node,
+    [Partial<ElementProps>],
+    ElementProps
+  >
+}

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

@@ -0,0 +1,131 @@
+import { createMixin, renderMixinElement } from './mixin.ts'
+import { navigate } from '../navigation.ts'
+import { on } from './on-mixin.ts'
+import type { ElementProps } from '../jsx.ts'
+
+import type { NavigationOptions } from '../navigation.ts'
+
+type LinkCurrentProps = ElementProps & {
+  disabled?: boolean
+  role?: string
+  tabIndex?: number
+  tabindex?: number
+  type?: string
+  contentEditable?: boolean | string
+  contenteditable?: boolean | string
+  'aria-disabled'?: boolean | 'true' | 'false'
+}
+
+const nativeLinkHostTypes = new Set(['a', 'area'])
+
+/**
+ * Adds client-side navigation behavior to anchor-like elements.
+ */
+export const link = 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 renderMixinElement(handle.element, {
+      ...nextProps,
+      mix: [
+        on('click', (event) => {
+          if (event.detail === 0 && suppressKeyboardClick) {
+            suppressKeyboardClick = false
+            event.preventDefault()
+            return
+          }
+
+          suppressKeyboardClick = false
+          if (isDisabledElement(event.currentTarget)) {
+            event.preventDefault()
+            return
+          }
+          if (event.button !== 0) return
+
+          event.preventDefault()
+          if (event.metaKey || event.ctrlKey) {
+            globalThis.open(href, '_blank')
+            return
+          }
+
+          void navigate(href, options)
+        }),
+        on('auxclick', (event) => {
+          suppressKeyboardClick = false
+          if (isDisabledElement(event.currentTarget)) {
+            event.preventDefault()
+            return
+          }
+          if (event.button !== 1) return
+
+          event.preventDefault()
+          globalThis.open(href, '_blank')
+        }),
+        on('keydown', (event) => {
+          if (event.key === 'Enter') {
+            if (event.repeat) return
+            if (isDisabledElement(event.currentTarget)) {
+              event.preventDefault()
+              return
+            }
+
+            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 (
+    ('disabled' in node && node.disabled === true) || node.getAttribute('aria-disabled') === 'true'
+  )
+}