monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): session screen accessibility improvements (#9907)

Browse Source
This commit is contained in:
Nolan Darilek
2026-01-22 05:10:53 -06:00
committed by GitHub
parent 8a043edfd5
commit 3435327bc0
19 changed files with 120 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/ui/src/components/popover.tsx
View File

@@ -1,21 +1,23 @@
import { Popover as Kobalte } from "@kobalte/core/popover"
import { ComponentProps, JSXElement, ParentProps, Show, splitProps } from "solid-js"
import { ComponentProps, JSXElement, ParentProps, Show, splitProps, ValidComponent } from "solid-js"
import { IconButton } from "./icon-button"
export interface PopoverProps extends ParentProps, Omit<ComponentProps<typeof Kobalte>, "children"> {
trigger: JSXElement
export interface PopoverProps<T extends ValidComponent = "div"> extends ParentProps, Omit<ComponentProps<typeof Kobalte>, "children"> {
trigger?: JSXElement
triggerAs?: T
triggerProps?: ComponentProps<T>
title?: JSXElement
description?: JSXElement
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
}
export function Popover(props: PopoverProps) {
const [local, rest] = splitProps(props, ["trigger", "title", "description", "class", "classList", "children"])
export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
const [local, rest] = splitProps(props, ["trigger", "triggerAs", "triggerProps", "title", "description", "class", "classList", "children"])
return (
<Kobalte gutter={4} {...rest}>
<Kobalte.Trigger as="div" data-slot="popover-trigger">
<Kobalte.Trigger as={local.triggerAs ?? "div"} data-slot="popover-trigger" {...(local.triggerProps as any)}>
{local.trigger}
</Kobalte.Trigger>
<Kobalte.Portal>
@@ -30,7 +32,7 @@ export function Popover(props: PopoverProps) {
<Show when={local.title}>
<div data-slot="popover-header">
<Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
<Kobalte.CloseButton data-slot="popover-close-button" as={IconButton} icon="close" variant="ghost" />
<Kobalte.CloseButton data-slot="popover-close-button" as={IconButton} icon="close" variant="ghost" aria-label="Close" />
</div>
</Show>
<Show when={local.description}>