opui-css 5.1.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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/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/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/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 { ImageProps, Props as BaseProps } from "./types"
+
+export type Props = BaseProps &
+  Pick<ImgHTMLAttributes, ImageProps> & {
+    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/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/types.astro.ts

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

package/components/Button/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/Button/types.solid.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/Button/types.svelte.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
+  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])

package/components/Button/types.ts

@@ -0,0 +1,19 @@
+export type Props = {
+  color?: "critical" | "primary"
+  command?: string
+  commandfor?: string
+  interestfor?: string
+  size?: "x-small" | "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+} & (
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)

package/components/ButtonGroup/ButtonGroup.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  color?: "critical" | "primary"
-  orientation?: "vertical"
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Button Group"
 

package/components/ButtonGroup/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<"div">

package/components/ButtonGroup/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/ButtonGroup/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<HTMLDivElement>

package/components/ButtonGroup/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["div"]

package/components/ButtonGroup/types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+  [key: string]: any
+  color?: "critical" | "primary"
+  orientation?: "vertical"
+  size?: "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+}

package/components/Callout/Callout.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  severity?: "critical" | "info" | "neutral" | "success" | "warning"
-  variant?: "tonal" | "outlined"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Callout"
 
@@ -13,7 +8,12 @@ const { class: className, severity, variant, ...rest } = Astro.props
 
 <article
   role="note"
-  class:list={["ui-callout", variant && `ui-${variant}`, severity && `ui-${severity}`, className]}
+  class:list={[
+    "ui-callout",
+    variant && `ui-${variant}`,
+    severity && `ui-${severity}`,
+    className,
+  ]}
   {...rest}
 >
   <slot name="icon">
@@ -66,8 +66,9 @@ const { class: className, severity, variant, ...rest } = Astro.props
   <div class="ui-content">
     {
       Astro.slots.has("title") && (
-        <!-- prettier-ignore -->
-        <h3 class="ui-title"><slot name="title" /></h3>
+        <h3 class="ui-title">
+          <slot name="title" />
+        </h3>
       )
     }
     <slot />

package/components/Callout/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<"article">

package/components/Callout/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
+}