opui-css 5.4.2 → 6.0.0-rc.1

package/components/Accordion/Accordion.vue

@@ -1,38 +1,21 @@
 <script setup lang="ts">
-import { useId } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { class: className, name, open, variant } = defineProps<Props>()
+const { markerAnimation, variant } = defineProps<Props>()
 defineSlots<Slots>()
-
-const summaryId = useId()
-const contentId = useId()
 </script>
 
 <template>
   <details
-    :name="name"
-    :class="['ui-accordion', 'ui-card', variant && `ui-${variant}`, className]"
-    :open="open"
+    :class="[
+      'ui-accordion',
+      markerAnimation &&
+        markerAnimation !== 'rotate' &&
+        `ui-marker-animation-${markerAnimation}`,
+      variant && variant !== 'plain' && `ui-${variant}`,
+      $props.class,
+    ]"
   >
-    <!-- Summary -->
-    <summary :id="summaryId" :aria-controls="contentId">
-      <slot name="summary"></slot><slot name="marker"></slot>
-    </summary>
-
-    <!-- Content -->
-    <div
-      :id="contentId"
-      class="ui-content"
-      role="region"
-      :aria-labelledby="summaryId"
-    >
-      <slot></slot>
-    </div>
-
-    <!-- Actions -->
-    <div v-if="$slots.actions" class="ui-actions">
-      <slot name="actions"></slot>
-    </div>
+    <slot></slot>
   </details>
 </template>

package/components/Accordion/AccordionActions.astro

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

package/components/Accordion/AccordionActions.react.tsx

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

package/components/Accordion/AccordionActions.svelte

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

package/components/Accordion/AccordionActions.vue

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

package/components/Accordion/AccordionContent.astro

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

package/components/Accordion/AccordionContent.react.tsx

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

package/components/Accordion/AccordionContent.svelte

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

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

@@ -0,0 +1,19 @@
+---
+import type { AccordionSummaryProps as Props } from "./types.astro"
+import { markerPath } from "./icons"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<summary class:list={[className]} {...rest}
+  ><slot /><slot name="marker"
+    ><svg
+      aria-hidden="true"
+      class="ui-marker"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"><path fill="currentColor" d={markerPath}></path></svg
+    ></slot
+  ></summary
+>

package/components/Accordion/AccordionSummary.react.tsx

@@ -0,0 +1,30 @@
+import { cx } from "../cx"
+import { markerPath } from "./icons"
+import type { AccordionSummaryProps as Props } from "./types.react"
+
+export default function AccordionSummary({
+  className,
+  children,
+  marker,
+  ...rest
+}: Props) {
+  return (
+    <summary className={cx([className])} {...rest}>
+      {children}
+      {marker === undefined ? (
+        <svg
+          aria-hidden="true"
+          className="ui-marker"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path fill="currentColor" d={markerPath}></path>
+        </svg>
+      ) : (
+        marker
+      )}
+    </summary>
+  )
+}

package/components/Accordion/AccordionSummary.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { markerPath } from "./icons"
+  import type { AccordionSummaryProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    marker,
+    ...rest
+  }: Props = $props()
+</script>
+
+<summary class={[className]} {...rest}
+  >{@render children?.()}{#if marker}{@render marker()}{:else}<svg
+      aria-hidden="true"
+      class="ui-marker"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"><path fill="currentColor" d={markerPath}></path></svg
+    >{/if}</summary
+>

package/components/Accordion/AccordionSummary.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { markerPath } from "./icons"
+import type {
+  AccordionSummaryProps as Props,
+  AccordionSummarySlots as Slots,
+} from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <summary :class="[$props.class]">
+    <slot></slot><slot v-if="$slots.marker" name="marker"></slot
+    ><svg
+      v-else
+      aria-hidden="true"
+      class="ui-marker"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path fill="currentColor" :d="markerPath"></path>
+    </svg>
+  </summary>
+</template>

package/components/Accordion/icons.ts

@@ -0,0 +1,2 @@
+export const markerPath =
+  "M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414"

package/components/Accordion/types.astro.ts

@@ -2,3 +2,12 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"details">
+
+export type AccordionActionsProps = Base.AccordionActionsProps &
+  HTMLAttributes<"div">
+
+export type AccordionContentProps = Base.AccordionContentProps &
+  HTMLAttributes<"div">
+
+export type AccordionSummaryProps = Base.AccordionSummaryProps &
+  HTMLAttributes<"summary">

package/components/Accordion/types.react.ts

@@ -0,0 +1,14 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+export type Props = Base.Props & ComponentProps<"details">
+
+export type AccordionActionsProps = Base.AccordionActionsProps &
+  ComponentProps<"div">
+
+export type AccordionContentProps = Base.AccordionContentProps &
+  ComponentProps<"div">
+
+export type AccordionSummaryProps = Base.AccordionSummaryProps &
+  Base.AccordionSummarySlots<ReactNode> &
+  ComponentProps<"summary">

package/components/Accordion/types.svelte.ts

@@ -2,6 +2,14 @@ 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 & SvelteHTMLElements["details"]
 
-export type Props = Base.Props & Snippets & SvelteHTMLElements["details"]
+export type AccordionActionsProps = Base.AccordionActionsProps &
+  SvelteHTMLElements["div"]
+
+export type AccordionContentProps = Base.AccordionContentProps &
+  SvelteHTMLElements["div"]
+
+export type AccordionSummaryProps = Base.AccordionSummaryProps &
+  Base.AccordionSummarySlots<Snippet> &
+  SvelteHTMLElements["summary"]

package/components/Accordion/types.ts

@@ -1,10 +1,16 @@
 export type Props = {
-  variant?: "default" | "outlined" | "elevated" | "tonal"
+  markerAnimation?: "flip" | "rotate" | "turn"
+  variant?: "elevated" | "outlined" | "plain" | "tonal" | "transparent"
 }
 
-export type Slots<S> = {
-  actions?: S
-  children: S
+export type AccordionActionsProps = {
+  align?: "start" | "end"
+}
+
+export type AccordionContentProps = {}
+
+export type AccordionSummaryProps = {}
+
+export type AccordionSummarySlots<S> = {
   marker?: S
-  summary: string | S
 }

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

@@ -0,0 +1,22 @@
+import type { Slot } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  AccordionActionsProps as BaseAccordionActionsProps,
+  AccordionContentProps as BaseAccordionContentProps,
+  AccordionSummaryProps as BaseAccordionSummaryProps,
+  AccordionSummarySlots as BaseAccordionSummarySlots,
+  Props as BaseProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type AccordionActionsProps = BaseAccordionActionsProps & Class
+
+export type AccordionContentProps = BaseAccordionContentProps & Class
+
+export type AccordionSummaryProps = BaseAccordionSummaryProps & Class
+
+export type Slots = DefaultSlots
+
+export type AccordionSummarySlots = BaseAccordionSummarySlots<Slot> &
+  DefaultSlots

package/components/Anchor/Anchor.astro

@@ -1,49 +1,37 @@
 ---
 import type { Props } from "./types.astro"
+import { anchorContext } from "./context.astro"
+import { warnMissingId } from "../dev"
+import { mergeStyle } from "../style"
+import { extendsAnchor } from "./root"
 
 export const title = "Anchor"
 
 const {
-  alignment,
   class: className,
   id: idProp,
-  trigger = "always",
+  positionArea,
+  style,
+  trigger,
   ...rest
 } = Astro.props
 
 const isHover = trigger === "hover"
-const id = isHover ? (idProp ?? Astro.locals.$id("anchor")) : undefined
-
-const insetMap: Record<string, string> = {
-  "start start": "auto 100% 100% auto",
-  "start end": "auto auto 100% 100%",
-  "end start": "100% 100% auto auto",
-  "end end": "100% auto auto 100%",
+const id = isHover ? (idProp ?? undefined) : undefined
+if (isHover && !extendsAnchor(className)) {
+  warnMissingId("Anchor", id, "interestfor")
 }
-
-const positionArea = alignment
-  ? {
-      "--anchor-position-area": alignment,
-      "--_anchor-inset": insetMap[alignment],
-    }
-  : {}
+const html = await anchorContext.provide(
+  { floatingId: id, popover: isHover ? "hint" : undefined },
+  () => Astro.slots.render("default"),
+)
 ---
 
-<span class:list={["ui-anchor", className]} style={positionArea} {...rest}>
-  {
-    isHover ? (
-      <span {...({ interestfor: id } as any)}>
-        <slot />
-      </span>
-    ) : (
-      <slot />
-    )
-  }
-  <span
-    class="ui-anchor-floating"
-    id={id}
-    popover={isHover ? "hint" : undefined}
-  >
-    <slot name="anchored" />
-  </span>
+<span
+  class:list={[!extendsAnchor(className) && "ui-anchor", className]}
+  id={isHover ? undefined : idProp}
+  style={mergeStyle({ "--ui-anchor-position-area": positionArea }, style)}
+  {...rest}
+>
+  <Fragment set:html={html} />
 </span>

package/components/Anchor/Anchor.react.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnMissingId } from "../dev"
+import { mergeStyle } from "../style"
+import { AnchorContext } from "./context.react"
+import { extendsAnchor } from "./root"
+import type { Props } from "./types.react"
+
+export default function Anchor({
+  className,
+  id: idProp,
+  positionArea,
+  style,
+  trigger,
+  ...rest
+}: Props) {
+  const isHover = trigger === "hover"
+  const id = isHover ? idProp : undefined
+  if (isHover && !extendsAnchor(className)) {
+    warnMissingId("Anchor", id, "interestfor")
+  }
+  return (
+    <AnchorContext
+      value={{ floatingId: id, popover: isHover ? "hint" : undefined }}
+    >
+      <span
+        className={cx([!extendsAnchor(className) && "ui-anchor", className])}
+        id={isHover ? undefined : idProp}
+        style={mergeStyle(
+          { "--ui-anchor-position-area": positionArea },
+          style ?? {},
+        )}
+        {...rest}
+      />
+    </AnchorContext>
+  )
+}

package/components/Anchor/Anchor.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnMissingId } from "../dev"
+  import { mergeStyle } from "../style"
+  import { setAnchorContext } from "./context.svelte"
+  import { extendsAnchor } from "./root"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    id: idProp,
+    positionArea,
+    style,
+    trigger,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const isHover = $derived(trigger === "hover")
+  const id = $derived(isHover ? (idProp ?? undefined) : undefined)
+
+  untrack(() => {
+    if (isHover && !extendsAnchor(className)) {
+      warnMissingId("Anchor", id, "interestfor")
+    }
+  })
+
+  setAnchorContext({
+    get floatingId() {
+      return id
+    },
+    get popover() {
+      return isHover ? ("hint" as const) : undefined
+    },
+  })
+</script>
+
+<span
+  class={[!extendsAnchor(className) && "ui-anchor", className]}
+  id={isHover ? undefined : idProp}
+  style={mergeStyle({ "--ui-anchor-position-area": positionArea }, style)}
+  {...rest}
+>
+  {@render children?.()}
+</span>

package/components/Anchor/Anchor.vue

@@ -1,41 +1,43 @@
 <script setup lang="ts">
-import { useId } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import { computed, provide, reactive } from "vue"
+import { warnMissingId } from "../dev"
+import { AnchorKey } from "./context.vue"
+import { extendsAnchor } from "./root"
+import type { Props, Slots } from "./types.vue-props"
 
-const { alignment, id: idProp, trigger = "always" } = defineProps<Props>()
+const {
+  class: className,
+  id: idProp,
+  positionArea,
+  trigger,
+} = defineProps<Props>()
 defineSlots<Slots>()
 
-const isHover = trigger === "hover"
-const uid = useId()
-const id = isHover ? (idProp ?? uid) : undefined
-
-const insetMap: Record<string, string> = {
-  "start start": "auto 100% 100% auto",
-  "start end": "auto auto 100% 100%",
-  "end start": "100% 100% auto auto",
-  "end end": "100% auto auto 100%",
+const isHover = computed(() => trigger === "hover")
+const id = computed(() => (isHover.value ? idProp : undefined))
+if (isHover.value && !extendsAnchor(className)) {
+  warnMissingId("Anchor", id.value, "interestfor")
 }
 
-const positionArea = alignment
-  ? {
-      "--anchor-position-area": alignment,
-      "--_anchor-inset": insetMap[alignment],
-    }
-  : {}
+const positionStyle = computed(() =>
+  positionArea ? { "--ui-anchor-position-area": positionArea } : undefined,
+)
+
+provide(
+  AnchorKey,
+  reactive({
+    floatingId: id,
+    popover: computed(() => (isHover.value ? ("hint" as const) : undefined)),
+  }),
+)
 </script>
 
 <template>
-  <span :class="['ui-anchor', $props.class]" :style="positionArea">
-    <span v-if="isHover" :interestfor="id">
-      <slot></slot>
-    </span>
-    <slot v-else></slot>
-    <span
-      class="ui-anchor-floating"
-      :id="id"
-      :popover="isHover ? 'hint' : undefined"
-    >
-      <slot name="anchored"></slot>
-    </span>
+  <span
+    :id="isHover ? undefined : idProp"
+    :class="[!extendsAnchor($props.class) && 'ui-anchor', $props.class]"
+    v-bind="positionStyle && { style: positionStyle }"
+  >
+    <slot></slot>
   </span>
 </template>

package/components/Anchor/AnchorContent.astro

@@ -0,0 +1,17 @@
+---
+import type { AnchorContentProps as Props } from "./types.astro"
+import { anchorContext } from "./context.astro"
+
+const { class: className, ...rest } = Astro.props
+
+const anchor = anchorContext.get()
+---
+
+<span
+  class:list={["ui-floating", className]}
+  id={anchor?.floatingId}
+  popover={anchor?.popover}
+  {...rest}
+>
+  <slot />
+</span>

package/components/Anchor/AnchorContent.react.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { cx } from "../cx"
+import { useAnchorContext } from "./context.react"
+import type { AnchorContentProps as Props } from "./types.react"
+
+export default function AnchorContent({ className, ...rest }: Props) {
+  const anchor = useAnchorContext()
+
+  return (
+    <span
+      className={cx(["ui-floating", className])}
+      id={anchor?.floatingId}
+      popover={anchor?.popover}
+      {...rest}
+    />
+  )
+}