opui-css 5.1.2 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 5.3.0 - 2026-06-04
+
+Vue support! 🎉
+It's a lot of work but hopefully it's all good with them.
+
+### Added
+
+- Vue components, importable from `opui-css/vue`.
+- Adjusted types for Vue, Svelte and Solid.
+
+## 5.2.0 - 2026-06-03
+
+### Changed
+
+- Broke out types for components into their own files. All frameworks now have their own types file. Yes you read that right, there will be more frameworks soon. Svelte, Vue and Solid are coming soon (in that order).
+
+Thank you to [somephic](https://github.com/somephic) for the contribution and discussions!
+
 ## 5.1.2 - 2026-05-29
 
 ### Fixed

package/README.md

@@ -36,7 +36,10 @@ import { Button, Card } from "opui-css/astro"
 Drop a pre-bundled stylesheet into any page and use the documented class names:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/opui-css/dist/opui.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/opui-css/dist/opui.css"
+/>
 
 <button class="ui-button ui-primary">Click me</button>
 ```
@@ -78,10 +81,6 @@ Wrap your own styles in a layer above `utils` (or unlayered) to override.
 | `opui-css/astro`                    | All Astro components                          |
 | `opui-css/components/*`             | Individual Astro component sources            |
 
-## Contributing
-
-See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for the component-authoring pattern.
-
 ## License
 
 [MIT](./LICENSE) © Felix Bohlin

package/components/AGENTS.md

@@ -8,7 +8,7 @@ This guide defines the standards for implementing reusable Astro UI components i
 
 When implementing or updating a component, ensure:
 - [ ] **Title Export**: `export const title = "Component Name"` is present.
-- [ ] **Props Type**: Used `type Props = { ... }` (avoid interfaces).
+- [ ] **Props Type**: Imported `Props` from `./types.astro` (avoid interfaces).
 - [ ] **Sorting**: Props, Destructuring, and Classes are sorted alphabetically.
 - [ ] **Rest Props**: `...rest` is captured and spread onto the root element.
 - [ ] **Class Management**: Used `class:list` for all class manipulations.
@@ -20,18 +20,17 @@ When implementing or updating a component, ensure:
 
 ## 1. Frontmatter Structure
 
+Every component uses layered type files:
+
+- `types.ts` — shared, framework-agnostic props (component-specific only; no `HTMLAttributes`)
+- `types.astro.ts` — Astro props = base + `HTMLAttributes<element>`
+- `types.d.vue.ts` / `types.svelte.ts` / `types.solid.ts` — framework-specific extensions (for merge parity)
+
 Every component must follow this exact frontmatter layout:
 
 ```astro
 ---
-type Props = {
-  [key: string]: any // Required for ...rest support
-  class?: string
-  disabled?: boolean
-  label?: string
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "My Component"
 
@@ -40,15 +39,15 @@ const {
   disabled,
   label,
   size,
-  variant = "outlined", // Default values in destructuring
+  variant = "outlined",
   ...rest
 } = Astro.props
 ---
 ```
 
 ### Key Rules:
-- **Alphabetical Sorting**: Sort property definitions in `type Props` and variables in the destructuring statement.
-- **REST Support**: Always include `[key: string]: any` in props and `...rest` in destructuring.
+- **Alphabetical Sorting**: Sort property definitions in `types.ts` and variables in the destructuring statement.
+- **REST Support**: Use `HTMLAttributes` in `types.astro.ts` and `...rest` in destructuring. Do not add `[key: string]: any` to `types.ts` — native attributes belong in the framework type files.
 - **Title Export**: This is mandatory for documentation generation.
 
 ---
@@ -137,7 +136,7 @@ Use named slots for specific functional areas. Check for existence before render
 Most inputs should be wrapped in a `<label>` to provide a larger hit area and built-in accessibility.
 
 ```astro
-<label class:list={["ui-field", { "ui-disabled": disabled, "ui-critical": error }]}>
+<label class:list={["ui-field", { "ui-disabled": disabled }]} data-invalid={error || undefined}>
   <span class="ui-label">{label}</span>
   <input type="text" {...rest} />
   {endText && <span class="ui-end-text">{endText}</span>}

package/components/Accordion/Accordion.astro

@@ -1,11 +1,5 @@
 ---
-type Props = {
-  class?: string
-  name?: string
-  open?: boolean
-  variant?: "default" | "outlined" | "elevated" | "tonal"
-  [key: string]: any
-}
+import type { Props } from "./types.astro"
 
 export const title = "Accordion"
 
@@ -28,8 +22,10 @@ const contentId = $id("content")
   {...rest}
 >
   <!-- Summary -->
-  <!-- prettier-ignore -->
-  <summary id={summaryId} aria-controls={contentId}><slot name="summary" /><slot name="marker" /></summary>
+
+  <summary id={summaryId} aria-controls={contentId}
+    ><slot name="summary" /><slot name="marker" /></summary
+  >
 
   <!-- Content -->
   <div

package/components/Accordion/Accordion.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { class: className, name, open, 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"
+  >
+    <!-- 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>
+  </details>
+</template>

package/components/Accordion/types.astro.ts

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

package/components/Accordion/types.d.vue.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+  name?: string
+  open?: boolean
+}
+
+export type Slots = {
+  actions?: Slot
+  default?: Slot
+  marker?: Slot
+  summary?: Slot
+}

package/components/Accordion/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Base.Slots<JSX.Element> &
+  JSX.DetailsHtmlAttributes<HTMLDetailsElement>

package/components/Accordion/types.svelte.ts

@@ -0,0 +1,7 @@
+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 & Snippets & SvelteHTMLElements["details"]

package/components/Accordion/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  variant?: "default" | "outlined" | "elevated" | "tonal"
+}
+
+export type Slots<S> = {
+  actions?: S
+  children: S
+  marker?: S
+  summary: string | S
+}

package/components/Anchor/Anchor.astro

@@ -1,11 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  alignment?: string
-  class?: string
-  id?: string
-  trigger?: "always" | "hover"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Anchor"
 

package/components/Anchor/Anchor.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { alignment, id: idProp, trigger = "always" } = 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 positionArea = alignment
+  ? {
+      "--anchor-position-area": alignment,
+      "--_anchor-inset": insetMap[alignment],
+    }
+  : {}
+</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>
+</template>

package/components/Anchor/types.astro.ts

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

package/components/Anchor/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = BaseSlots<Slot> & {
+  default?: Slot
+}

package/components/Anchor/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.HTMLAttributes<HTMLSpanElement>

package/components/Anchor/types.svelte.ts

@@ -0,0 +1,7 @@
+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 & Snippets & SvelteHTMLElements["span"]

package/components/Anchor/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+  [key: string]: any
+  alignment?: string
+  trigger?: "always" | "hover"
+}
+
+export type Slots<S> = {
+  anchored?: S
+}

package/components/Avatar/Avatar.astro

@@ -1,14 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  alt?: string
-  as?: "div" | "a" | "button" | string
-  class?: string
-  href?: string
-  isGroup?: boolean
-  src?: string
-  variant?: "squared" | "rounded" | "squircle"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Avatar"
 
@@ -23,10 +14,9 @@ const {
   ...rest
 } = Astro.props
 
-const Tag = as || (href ? "a" : "div")
+const Tag = (as || (href ? "a" : "div")) as any
 ---
 
-<!-- prettier-ignore -->
 <Tag
   class:list={[
     { "ui-avatar": !isGroup },
@@ -35,4 +25,5 @@ const Tag = as || (href ? "a" : "div")
   ]}
   href={href}
   role={isGroup ? "group" : undefined}
-  {...rest}>{src ? <img src={src} alt={alt} /> : <slot />}</Tag>
+  {...rest}>{src ? <img src={src} alt={alt} /> : <slot />}</Tag
+>

package/components/Avatar/Avatar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { alt, as, href, isGroup, src, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = as || (href ? "a" : "div")
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      { 'ui-avatar': !isGroup },
+      !isGroup && variant && `ui-${variant}`,
+      $props.class,
+    ]"
+    :href="href"
+    :role="isGroup ? 'group' : undefined"
+  >
+    <img v-if="src" :src="src" :alt="alt" />
+    <slot v-else></slot>
+  </component>
+</template>

package/components/Avatar/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props &
+  Pick<HTMLAttributes<"img">, Base.ImageProps> &
+  (
+    | ({ as?: "div" } & HTMLAttributes<"div">)
+    | ({ as?: "button" } & HTMLAttributes<"button">)
+    | ({ as?: "a" } & HTMLAttributes<"a">)
+  )

package/components/Avatar/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ImgHTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps &
+  Pick<ImgHTMLAttributes, "alt" | "src"> & {
+    class?: HTMLAttributes["class"]
+  }
+
+export type Slots = {
+  default?: Slot
+}

package/components/Avatar/types.solid.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Base.Slots<JSX.Element> &
+  Pick<JSX.ImgHTMLAttributes<HTMLImageElement>, Base.ImageProps> &
+  (
+    | ({ as?: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/Avatar/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+export type Props = Base.Props &
+  Base.Slots<Snippet> &
+  Pick<SvelteHTMLElements["img"], Base.ImageProps> &
+  (
+    | ({ as?: "div" } & SvelteHTMLElements["div"])
+    | ({ as?: "button" } & SvelteHTMLElements["button"])
+    | ({ as?: "a" } & SvelteHTMLElements["a"])
+  )

package/components/Avatar/types.ts

@@ -0,0 +1,29 @@
+export type Props = {
+  command?: string
+  commandfor?: string
+  interestfor?: string
+  isGroup?: boolean
+  variant?: "squared" | "rounded" | "squircle"
+} & (
+  | {
+      as?: "div"
+      href: never
+      disabled?: never
+    }
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)
+
+export type Slots<S> = {
+  children?: S
+}
+
+export type ImageProps = "src" | "alt"

package/components/Badge/Badge.astro

@@ -1,15 +1,7 @@
 ---
-import Anchor from "../Anchor/Anchor.astro"
+import type { Props } from "./types.astro"
 
-type Props = {
-  [key: string]: any
-  alignment?: "start-start" | "end-start" | "end-end"
-  class?: string
-  color?: "critical" | "info" | "neutral" | "success" | "warning"
-  dot?: boolean
-  invisible?: boolean
-  label?: string | number
-}
+import Anchor from "../Anchor/Anchor.astro"
 
 export const title = "Badge"
 
@@ -45,7 +37,7 @@ const positionArea =
     className,
     color && `ui-${color}`,
   ]}
-  {...rest}
+  {...rest as any}
 >
   <slot />
   <span

package/components/Badge/Badge.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import Anchor from "../Anchor/Anchor.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { alignment, color, dot, invisible, label } = defineProps<Props>()
+defineSlots<Slots>()
+
+const positionArea =
+  alignment === "start-start"
+    ? "start start"
+    : alignment === "end-start"
+      ? "end start"
+      : alignment === "end-end"
+        ? "end end"
+        : undefined
+</script>
+
+<template>
+  <Anchor
+    :alignment="positionArea"
+    :class="[
+      'ui-badge',
+      {
+        'ui-dot': dot,
+        'ui-invisible': invisible,
+      },
+      alignment && `ui-${alignment}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+    <template #anchored>
+      <span class="ui-badge-indicator" :aria-label="label?.toString()">{{
+        dot ? "" : label
+      }}</span>
+    </template>
+  </Anchor>
+</template>

package/components/Badge/types.astro.ts

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

package/components/Badge/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/Badge/types.solid.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLSpanElement>

package/components/Badge/types.svelte.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["span"]

package/components/Badge/types.ts

@@ -0,0 +1,8 @@
+export type Props = {
+  [key: string]: any
+  alignment?: "start-start" | "end-start" | "end-end"
+  color?: "critical" | "info" | "neutral" | "success" | "warning"
+  dot?: boolean
+  invisible?: boolean
+  label?: string | number
+}

package/components/Button/Button.astro

@@ -1,45 +1,36 @@
 ---
-type CommonProps = {
-  [key: string]: any
-  as?: string
-  class?: string
-  color?: "critical" | "primary"
-  size?: "x-small" | "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
-
-type AnchorProps = CommonProps & {
-  disabled?: never
-  href: string
-}
-
-type ButtonProps = CommonProps & {
-  disabled?: boolean
-  href?: undefined
-}
-
-type Props = AnchorProps | ButtonProps
+import type { Props } from "./types.astro"
 
 export const title = "Button"
 
+const props = Astro.props as Props
 const {
   as,
   class: className,
   color,
-  disabled,
-  href,
   size,
   variant,
+  disabled,
+  href,
   ...rest
-} = Astro.props
+} = props
 
-const Tag = as || (href ? "a" : "button")
+const Tag = (as || (href ? "a" : "button")) as any
 const isButton = Tag === "button"
 ---
 
-<!-- prettier-ignore -->
 <Tag
-  class:list={["ui-button", { "ui-disabled": isButton && disabled }, size && `ui-${size}`, variant && `ui-${variant}`, color && `ui-${color}`, className]}
+  class:list={[
+    "ui-button",
+    { "ui-disabled": isButton && disabled },
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    color && `ui-${color}`,
+    className,
+  ]}
   disabled={isButton ? disabled : undefined}
   href={href}
-  {...rest}><slot /></Tag>
+  {...rest as any}
+>
+  <slot />
+</Tag>

package/components/Button/Button.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { as, color, disabled, href, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = as || (href ? "a" : "button")
+const isButton = Tag === "button"
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      'ui-button',
+      { 'ui-disabled': isButton && disabled },
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+    :disabled="isButton ? disabled : undefined"
+    :href="href"
+  >
+    <slot></slot>
+  </component>
+</template>