opui-css 5.4.2 → 6.0.0-rc.1

package/components/DescriptionList/DescriptionListTerm.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { DescriptionListTermProps as Props } from "./types.react"
+
+export default function DescriptionListTerm({ className, ...rest }: Props) {
+  return <dt className={cx([className])} {...rest} />
+}

package/components/DescriptionList/DescriptionListTerm.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { DescriptionListTermProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<dt class={[className]} {...rest}>
+  {@render children?.()}
+</dt>

package/components/DescriptionList/{Term.vue → DescriptionListTerm.vue}

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import type {
+  DescriptionListTermProps as Props,
+  Slots,
+} from "./types.vue-props"
 
 defineProps<Props>()
 defineSlots<Slots>()
 </script>
 
 <template>
-  <dt :class="['ui-term', $props.class]">
+  <dt :class="[$props.class]">
     <slot></slot>
   </dt>
 </template>

package/components/DescriptionList/types.astro.ts

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"dl">
 
-export type TermProps = Base.Props & HTMLAttributes<"dt">
+export type DescriptionListDescriptionProps = HTMLAttributes<"dd">
 
-export type DescriptionProps = Base.Props & HTMLAttributes<"dd">
+export type DescriptionListItemProps = HTMLAttributes<"div">
 
-export type ItemProps = Base.Props & HTMLAttributes<"div">
+export type DescriptionListTermProps = HTMLAttributes<"dt">

package/components/DescriptionList/types.react.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"dl">
+
+export type DescriptionListDescriptionProps = ComponentProps<"dd">
+
+export type DescriptionListItemProps = ComponentProps<"div">
+
+export type DescriptionListTermProps = ComponentProps<"dt">

package/components/DescriptionList/types.svelte.ts

@@ -2,3 +2,9 @@ import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
 export type Props = Base.Props & SvelteHTMLElements["dl"]
+
+export type DescriptionListDescriptionProps = SvelteHTMLElements["dd"]
+
+export type DescriptionListItemProps = SvelteHTMLElements["div"]
+
+export type DescriptionListTermProps = SvelteHTMLElements["dt"]

package/components/DescriptionList/types.ts

@@ -1,3 +1,5 @@
 export type Props = {
-  bordered?: boolean | "dotted"
+  bordered?: boolean
+  dotted?: boolean
+  orientation?: "auto" | "horizontal"
 }

package/components/DescriptionList/types.vue-props.ts

@@ -0,0 +1,12 @@
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type DescriptionListDescriptionProps = Class
+
+export type DescriptionListItemProps = Class
+
+export type DescriptionListTermProps = Class
+
+export type Slots = DefaultSlots

package/components/Dialog/Dialog.astro

@@ -1,38 +1,24 @@
 ---
 import type { Props } from "./types.astro"
+import { autoLabelledBy, createId } from "../id"
+import { dialogContext } from "./context.astro"
 
 export const title = "Dialog"
 
-const { actionsAlign, class: className, closedby, ...rest } = Astro.props
+const { class: className, closedby, ...rest } = Astro.props
+
+const titleId = createId(Astro.locals)("dialog-title")
+const labelledBy = autoLabelledBy(rest, titleId)
+const html = await dialogContext.provide({ titleId: labelledBy }, () =>
+  Astro.slots.render("default"),
+)
 ---
 
 <dialog
-  class:list={["ui-dialog ui-card ui-elevated", className]}
+  aria-labelledby={labelledBy}
+  class:list={["ui-dialog", "ui-elevated", className]}
   closedby={closedby}
   {...rest}
 >
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div
-        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
-      >
-        <slot name="actions" />
-      </div>
-    )
-  }
+  <Fragment set:html={html} />
 </dialog>

package/components/Dialog/Dialog.react.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { useId } from "react"
+import { cx } from "../cx"
+import { autoLabelledBy } from "../id"
+import { DialogContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Dialog({ className, closedby, ...rest }: Props) {
+  const titleId = `dialog-title-${useId()}`
+  const labelledBy = autoLabelledBy(rest, titleId)
+
+  return (
+    <DialogContext value={{ titleId: labelledBy }}>
+      <dialog
+        aria-labelledby={labelledBy}
+        className={cx(["ui-dialog", "ui-elevated", className])}
+        closedby={closedby}
+        {...rest}
+      />
+    </DialogContext>
+  )
+}

package/components/Dialog/Dialog.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { autoLabelledBy } from "../id"
+  import { setDialogContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    closedby,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const titleId = `dialog-title-${uid}`
+  const labelledBy = $derived(autoLabelledBy(rest, titleId))
+
+  setDialogContext({
+    get titleId() {
+      return labelledBy
+    },
+  })
+</script>
+
+<dialog
+  aria-labelledby={labelledBy}
+  class={["ui-dialog", "ui-elevated", className]}
+  {closedby}
+  {...rest}
+>
+  {@render children?.()}
+</dialog>

package/components/Dialog/Dialog.vue

@@ -1,35 +1,25 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import { computed, provide, reactive, useAttrs, useId } from "vue"
+import { autoLabelledBy } from "../id"
+import { DialogKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { actionsAlign } = defineProps<Props>()
+const { closedby } = defineProps<Props>()
+defineSlots<Slots>()
 
-defineOptions({
-  inheritAttrs: false,
-})
+const attrs = useAttrs()
+const titleId = `dialog-title-${useId()}`
+const labelledBy = computed(() => autoLabelledBy(attrs, titleId))
 
-const slots = defineSlots<Slots>()
+provide(DialogKey, reactive({ titleId: labelledBy }))
 </script>
 
 <template>
   <dialog
-    :class="['ui-dialog', 'ui-card', 'ui-elevated', $props.class]"
-    v-bind="$attrs"
+    :aria-labelledby="labelledBy"
+    :class="['ui-dialog', 'ui-elevated', $props.class]"
+    :closedby="closedby"
   >
-    <hgroup v-if="slots.header">
-      <slot name="header"></slot>
-    </hgroup>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
     <slot></slot>
-
-    <div
-      v-if="slots.actions"
-      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
-    >
-      <slot name="actions"></slot>
-    </div>
   </dialog>
 </template>

package/components/Dialog/DialogContent.astro

@@ -0,0 +1,9 @@
+---
+import type { DialogContentProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-content", className]} {...rest}>
+  <slot />
+</div>

package/components/Dialog/DialogContent.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { DialogContentProps as Props } from "./types.react"
+
+export default function DialogContent({ className, ...rest }: Props) {
+  return <div className={cx(["ui-content", className])} {...rest} />
+}

package/components/Dialog/DialogContent.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { DialogContentProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class={["ui-content", className]} {...rest}>
+  {@render children?.()}
+</div>

package/components/Dialog/DialogContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogContentProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-content', $props.class]">
+    <slot></slot>
+  </div>
+</template>

package/components/Dialog/DialogFooter.astro

@@ -0,0 +1,16 @@
+---
+import type { DialogFooterProps as Props } from "./types.astro"
+
+const { align, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    "ui-footer",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</div>

package/components/Dialog/DialogFooter.react.tsx

@@ -0,0 +1,15 @@
+import { cx } from "../cx"
+import type { DialogFooterProps as Props } from "./types.react"
+
+export default function DialogFooter({ align, className, ...rest }: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-footer",
+        align && align !== "end" && `ui-align-${align}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Dialog/DialogFooter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { DialogFooterProps as Props } from "./types.svelte"
+
+  let {
+    align,
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-footer",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Dialog/DialogFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DialogFooterProps as Props, Slots } from "./types.vue-props"
+
+const { align } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-footer',
+      align && align !== 'end' && `ui-align-${align}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Dialog/DialogHeader.astro

@@ -0,0 +1,9 @@
+---
+import type { DialogHeaderProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-header", className]} {...rest}>
+  <slot />
+</div>

package/components/Dialog/DialogHeader.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { DialogHeaderProps as Props } from "./types.react"
+
+export default function DialogHeader({ className, ...rest }: Props) {
+  return <div className={cx(["ui-header", className])} {...rest} />
+}

package/components/Dialog/DialogHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { DialogHeaderProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class={["ui-header", className]} {...rest}>
+  {@render children?.()}
+</div>

package/components/Dialog/DialogHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogHeaderProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-header', $props.class]">
+    <slot></slot>
+  </div>
+</template>

package/components/Dialog/DialogTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { DialogTitleProps as Props } from "./types.astro"
+import { dialogContext } from "./context.astro"
+import { warnReplacedId } from "../dev"
+
+const { class: className, id, ...rest } = Astro.props
+
+const dialog = dialogContext.get()
+warnReplacedId("DialogTitle", "Dialog", id, dialog?.titleId)
+---
+
+<h2 class:list={[className]} id={dialog?.titleId ?? id} {...rest}>
+  <slot />
+</h2>

package/components/Dialog/DialogTitle.react.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnReplacedId } from "../dev"
+import { useDialogContext } from "./context.react"
+import type { DialogTitleProps as Props } from "./types.react"
+
+export default function DialogTitle({ className, id, ...rest }: Props) {
+  const dialog = useDialogContext()
+  warnReplacedId("DialogTitle", "Dialog", id, dialog?.titleId)
+
+  return <h2 className={cx([className])} id={dialog?.titleId ?? id} {...rest} />
+}

package/components/Dialog/DialogTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnReplacedId } from "../dev"
+  import { getDialogContext } from "./context.svelte"
+  import type { DialogTitleProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    id,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const dialog = getDialogContext()
+
+  untrack(() => warnReplacedId("DialogTitle", "Dialog", id, dialog?.titleId))
+</script>
+
+<h2 class={[className]} id={dialog?.titleId ?? id} {...rest}>
+  {@render children?.()}
+</h2>

package/components/Dialog/DialogTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { warnReplacedId } from "../dev"
+import { DialogKey } from "./context.vue"
+import type { DialogTitleProps as Props, Slots } from "./types.vue-props"
+
+const { id } = defineProps<Props>()
+defineSlots<Slots>()
+
+const dialog = inject(DialogKey, undefined)
+warnReplacedId("DialogTitle", "Dialog", id, dialog?.titleId)
+</script>
+
+<template>
+  <h2 :class="[$props.class]" :id="dialog?.titleId ?? id">
+    <slot></slot>
+  </h2>
+</template>

package/components/Dialog/context.astro.ts

@@ -0,0 +1,4 @@
+import { createContext } from "../context.astro"
+import type { Context } from "./types"
+
+export const dialogContext = createContext<Context>()

package/components/Dialog/context.react.ts

@@ -0,0 +1,8 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { Context } from "./types"
+
+export const DialogContext = createContext<Context | undefined>(undefined)
+
+export const useDialogContext = () => useContext(DialogContext)

package/components/Dialog/context.svelte.ts

@@ -0,0 +1,7 @@
+import { getContext, setContext } from "svelte"
+import type { Context } from "./types"
+
+const key = Symbol()
+
+export const getDialogContext = () => getContext<Context | undefined>(key)
+export const setDialogContext = (context: Context) => setContext(key, context)

package/components/Dialog/context.vue.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+import type { Context } from "./types"
+
+export const DialogKey = Symbol() as InjectionKey<Context>

package/components/Dialog/types.astro.ts

@@ -2,3 +2,11 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"dialog">
+
+export type DialogContentProps = Base.DialogContentProps & HTMLAttributes<"div">
+
+export type DialogFooterProps = Base.DialogFooterProps & HTMLAttributes<"div">
+
+export type DialogHeaderProps = Base.DialogHeaderProps & HTMLAttributes<"div">
+
+export type DialogTitleProps = Base.DialogTitleProps & HTMLAttributes<"h2">

package/components/Dialog/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & Omit<ComponentProps<"dialog">, "closedby">
+
+export type DialogContentProps = Base.DialogContentProps & ComponentProps<"div">
+
+export type DialogFooterProps = Base.DialogFooterProps & ComponentProps<"div">
+
+export type DialogHeaderProps = Base.DialogHeaderProps & ComponentProps<"div">
+
+export type DialogTitleProps = Base.DialogTitleProps & ComponentProps<"h2">

package/components/Dialog/types.svelte.ts

@@ -1,7 +1,15 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
 
-type Snippets = Base.Slots<Snippet>
+export type Props = Base.Props & Omit<SvelteHTMLElements["dialog"], "closedby">
 
-export type Props = Base.Props & Snippets & SvelteHTMLElements["dialog"]
+export type DialogContentProps = Base.DialogContentProps &
+  SvelteHTMLElements["div"]
+
+export type DialogFooterProps = Base.DialogFooterProps &
+  SvelteHTMLElements["div"]
+
+export type DialogHeaderProps = Base.DialogHeaderProps &
+  SvelteHTMLElements["div"]
+
+export type DialogTitleProps = Base.DialogTitleProps & SvelteHTMLElements["h2"]

package/components/Dialog/types.ts

@@ -1,10 +1,17 @@
 export type Props = {
-  actionsAlign?: "start" | "end"
+  closedby?: "any" | "closerequest" | "none"
 }
 
-export type Slots<S> = {
-  actions?: S
-  children?: S
-  content?: S
-  header?: string | S
+export type DialogContentProps = {}
+
+export type DialogFooterProps = {
+  align?: "start" | "end"
+}
+
+export type DialogHeaderProps = {}
+
+export type DialogTitleProps = {}
+
+export type Context = {
+  titleId?: string
 }

package/components/Dialog/types.vue-props.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  DialogContentProps as BaseDialogContentProps,
+  DialogFooterProps as BaseDialogFooterProps,
+  DialogHeaderProps as BaseDialogHeaderProps,
+  DialogTitleProps as BaseDialogTitleProps,
+  Props as BaseProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type DialogContentProps = BaseDialogContentProps & Class
+
+export type DialogFooterProps = BaseDialogFooterProps & Class
+
+export type DialogHeaderProps = BaseDialogHeaderProps & Class
+
+export type DialogTitleProps = BaseDialogTitleProps &
+  Class & {
+    id?: HTMLAttributes["id"]
+  }
+
+export type Slots = DefaultSlots