opui-css 5.4.2 → 6.0.0-rc.1

package/components/Divider/Divider.astro

@@ -1,12 +1,34 @@
 ---
-export const title = "Divider"
 import type { Props } from "./types.astro"
 
-const { class: className, variant, ...rest } = Astro.props
-const variantClass = variant ? `border-${variant}` : ""
+export const title = "Divider"
+
+const { align, class: className, color, variant, ...rest } = Astro.props
 ---
 
-<hr
-  class:list={["ui-divider", className, variantClass && `ui-${variantClass}`]}
-  {...rest}
-/>
+{
+  Astro.slots.has("default") ? (
+    <div
+      class:list={[
+        "ui-divider",
+        align && align !== "center" && `ui-align-${align}`,
+        color && `ui-${color}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ]}
+      {...rest}
+    >
+      <slot />
+    </div>
+  ) : (
+    <hr
+      class:list={[
+        "ui-divider",
+        color && `ui-${color}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ]}
+      {...rest}
+    />
+  )
+}

package/components/Divider/Divider.react.tsx

@@ -0,0 +1,36 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Divider({
+  align,
+  className,
+  color,
+  variant,
+  children,
+  ...rest
+}: Props) {
+  return children ? (
+    <div
+      className={cx([
+        "ui-divider",
+        align && align !== "center" && `ui-align-${align}`,
+        color && `ui-${color}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ])}
+      {...rest}
+    >
+      {children}
+    </div>
+  ) : (
+    <hr
+      className={cx([
+        "ui-divider",
+        color && `ui-${color}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Divider/Divider.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  let {
+    align,
+    class: className,
+    color,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+{#if children}
+  <div
+    class={[
+      "ui-divider",
+      align && align !== "center" && `ui-align-${align}`,
+      color && `ui-${color}`,
+      variant && variant !== "outlined" && `ui-${variant}`,
+      className,
+    ]}
+    {...rest as HTMLAttributes<HTMLDivElement>}
+  >
+    {@render children()}
+  </div>
+{:else}
+  <hr
+    class={[
+      "ui-divider",
+      color && `ui-${color}`,
+      variant && variant !== "outlined" && `ui-${variant}`,
+      className,
+    ]}
+    {...rest}
+  />
+{/if}

package/components/Divider/Divider.vue

@@ -1,12 +1,30 @@
 <script setup lang="ts">
-import type { Props } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { variant } = defineProps<Props>()
-const variantClass = variant ? `border-${variant}` : ""
+const { align, color, variant } = defineProps<Props>()
+defineSlots<Slots>()
 </script>
 
 <template>
+  <div
+    v-if="$slots.default"
+    :class="[
+      'ui-divider',
+      align && align !== 'center' && `ui-align-${align}`,
+      color && `ui-${color}`,
+      variant && variant !== 'outlined' && `ui-${variant}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
   <hr
-    :class="['ui-divider', $props.class, variantClass && `ui-${variantClass}`]"
+    v-else
+    :class="[
+      'ui-divider',
+      color && `ui-${color}`,
+      variant && variant !== 'outlined' && `ui-${variant}`,
+      $props.class,
+    ]"
   />
 </template>

package/components/Divider/types.react.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"hr">

package/components/Divider/types.ts

@@ -1,3 +1,5 @@
 export type Props = {
-  variant?: "tonal" | "filled" | "primary"
+  align?: "center" | "end" | "start"
+  color?: "primary"
+  variant?: "filled" | "outlined" | "tonal"
 }

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

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

package/components/Drawer/Drawer.astro

@@ -1,5 +1,8 @@
 ---
 import type { Props } from "./types.astro"
+import { autoLabelledBy } from "../id"
+import { warnMissingId } from "../dev"
+import { drawerContext } from "./context.astro"
 
 export const title = "Drawer"
 
@@ -8,40 +11,32 @@ const {
   class: className,
   closedby = "any",
   id,
-  scrollLock = true,
+  scrollLock,
   side = "inline-start",
   ...rest
 } = Astro.props
 
-const { $id } = Astro.locals
-const drawerId = id || $id("drawer")
+warnMissingId("Drawer", id)
+const labelledBy = autoLabelledBy(rest, `${id}-heading`)
+const html = await drawerContext.provide({ id, titleId: labelledBy }, () =>
+  Astro.slots.render("default"),
+)
 ---
 
 <dialog
   closedby={closedby}
   class:list={[
     "ui-drawer",
-    side && `ui-${side}`,
     {
       "ui-backdrop-transparent": backdrop === "transparent",
       "ui-scroll-lock": scrollLock,
     },
+    side && side !== "inline-start" && `ui-${side}`,
     className,
   ]}
-  id={drawerId}
+  aria-labelledby={labelledBy}
+  id={id}
   {...rest}
 >
-  {Astro.slots.has("header") && <slot name="header" />}
-
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-
-  <slot />
-
-  {Astro.slots.has("footer") && <slot name="footer" />}
+  <Fragment set:html={html} />
 </dialog>

package/components/Drawer/Drawer.react.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnMissingId } from "../dev"
+import { autoLabelledBy } from "../id"
+import { DrawerContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Drawer({
+  backdrop = "blurred",
+  className,
+  closedby = "any",
+  id,
+  scrollLock,
+  side = "inline-start",
+  ...rest
+}: Props) {
+  warnMissingId("Drawer", id)
+  const labelledBy = autoLabelledBy(rest, `${id}-heading`)
+
+  return (
+    <DrawerContext value={{ id, titleId: labelledBy }}>
+      <dialog
+        className={cx([
+          "ui-drawer",
+          {
+            "ui-backdrop-transparent": backdrop === "transparent",
+            "ui-scroll-lock": scrollLock,
+          },
+          side && side !== "inline-start" && `ui-${side}`,
+          className,
+        ])}
+        aria-labelledby={labelledBy}
+        closedby={closedby}
+        id={id}
+        {...rest}
+      />
+    </DrawerContext>
+  )
+}

package/components/Drawer/Drawer.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnMissingId } from "../dev"
+  import { autoLabelledBy } from "../id"
+  import { setDrawerContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    backdrop = "blurred",
+    class: className,
+    closedby = "any",
+    id,
+    scrollLock,
+    side = "inline-start",
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnMissingId("Drawer", id))
+  const labelledBy = $derived(autoLabelledBy(rest, `${id}-heading`))
+
+  setDrawerContext({
+    get id() {
+      return id
+    },
+    get titleId() {
+      return labelledBy
+    },
+  })
+</script>
+
+<dialog
+  {closedby}
+  class={[
+    "ui-drawer",
+    {
+      "ui-backdrop-transparent": backdrop === "transparent",
+      "ui-scroll-lock": scrollLock,
+    },
+    side && side !== "inline-start" && `ui-${side}`,
+    className,
+  ]}
+  aria-labelledby={labelledBy}
+  {id}
+  {...rest}
+>
+  {@render children?.()}
+</dialog>

package/components/Drawer/Drawer.vue

@@ -1,46 +1,41 @@
 <script setup lang="ts">
-import { useId } from "vue"
-import type { DrawerSlots, Props } from "./types.d.vue"
+import { computed, provide, reactive, useAttrs } from "vue"
+import { warnMissingId } from "../dev"
+import { autoLabelledBy } from "../id"
+import { DrawerKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
 
 const {
   backdrop = "blurred",
   closedby = "any",
   id,
-  scrollLock = true,
+  scrollLock,
   side = "inline-start",
 } = defineProps<Props>()
-const slots = defineSlots<DrawerSlots>()
+defineSlots<Slots>()
 
-defineOptions({
-  inheritAttrs: false,
-})
+warnMissingId("Drawer", id)
+const attrs = useAttrs()
+const labelledBy = computed(() => autoLabelledBy(attrs, `${id}-heading`))
 
-const drawerId = id || useId()
+provide(DrawerKey, reactive({ id: computed(() => id), titleId: labelledBy }))
 </script>
 
 <template>
   <dialog
-    :id="drawerId"
+    :id="id"
+    :aria-labelledby="labelledBy"
     :class="[
       'ui-drawer',
-      side && `ui-${side}`,
       {
         'ui-backdrop-transparent': backdrop === 'transparent',
         'ui-scroll-lock': scrollLock,
       },
+      side && side !== 'inline-start' && `ui-${side}`,
       $props.class,
     ]"
     :closedby="closedby"
-    v-bind="$attrs"
   >
-    <slot v-if="slots.header" name="header"></slot>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
     <slot></slot>
-
-    <slot v-if="slots.footer" name="footer"></slot>
   </dialog>
 </template>

package/components/Drawer/DrawerContent.astro

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

package/components/Drawer/DrawerContent.react.tsx

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

package/components/Drawer/DrawerContent.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { DrawerContentProps 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/Drawer/DrawerContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DrawerContentProps 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/Drawer/DrawerFooter.astro

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

package/components/Drawer/DrawerFooter.react.tsx

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

package/components/Drawer/DrawerFooter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { DrawerFooterProps 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/Drawer/DrawerFooter.vue

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

package/components/Drawer/DrawerHeader.astro

@@ -1,27 +1,35 @@
 ---
-import IconButton from "../IconButton/IconButton.astro"
+import Button from "../Button/Button.astro"
 
 import type { DrawerHeaderProps as Props } from "./types.astro"
+import { drawerContext } from "./context.astro"
+import { closePath } from "./icons"
 
-export const title = "Drawer Header"
+const {
+  class: className,
+  closeLabel = "Close",
+  commandfor,
+  ...rest
+} = Astro.props
 
-const { class: className, heading, ...rest } = Astro.props
+const drawer = drawerContext.get()
+const closeAttrs =
+  commandfor || drawer
+    ? { command: "close", commandfor: commandfor ?? drawer?.id }
+    : { onclick: "this.closest('dialog')?.close()" }
 ---
 
 <div class:list={["ui-header", className]} {...rest}>
-  {heading && <span>{heading}</span>}
   <slot />
-  <IconButton onclick="this.closest('dialog').close()" title="Close">
+  <Button aria-label={closeLabel} round size="small" {...closeAttrs}>
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       width="32"
       height="32"
       viewBox="0 0 32 32"
     >
-      <path
-        fill="currentColor"
-        d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
-      ></path>
+      <path fill="currentColor" d={closePath}></path>
     </svg>
-  </IconButton>
+  </Button>
 </div>

package/components/Drawer/DrawerHeader.react.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import Button from "../Button/Button.react"
+import { cx } from "../cx"
+import { useDrawerContext } from "./context.react"
+import { closePath } from "./icons"
+import type { DrawerHeaderProps as Props } from "./types.react"
+
+export default function DrawerHeader({
+  className,
+  closeLabel = "Close",
+  commandfor,
+  children,
+  ...rest
+}: Props) {
+  const drawer = useDrawerContext()
+  const closeProps =
+    commandfor || drawer
+      ? { command: "close", commandfor: commandfor ?? drawer?.id }
+      : {
+          onClick: (event: { currentTarget: HTMLElement }) =>
+            event.currentTarget.closest("dialog")?.close(),
+        }
+
+  return (
+    <div className={cx(["ui-header", className])} {...rest}>
+      {children}
+      <Button aria-label={closeLabel} round size="small" {...closeProps}>
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path fill="currentColor" d={closePath}></path>
+        </svg>
+      </Button>
+    </div>
+  )
+}

package/components/Drawer/DrawerHeader.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Button from "../Button/Button.svelte"
+  import { getDrawerContext } from "./context.svelte"
+  import { closePath } from "./icons"
+  import type { DrawerHeaderProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    closeLabel = "Close",
+    commandfor,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const drawer = getDrawerContext()
+
+  const closeAttrs = $derived(
+    commandfor || drawer
+      ? { command: "close", commandfor: commandfor ?? drawer?.id }
+      : {
+          onclick: (event: MouseEvent) =>
+            (event.currentTarget as HTMLElement).closest("dialog")?.close(),
+        },
+  )
+</script>
+
+<div class={["ui-header", className]} {...rest}>
+  {@render children?.()}
+  <Button aria-label={closeLabel} round size="small" {...closeAttrs}>
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path fill="currentColor" d={closePath}></path>
+    </svg>
+  </Button>
+</div>