opui-css 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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/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/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.d.vue.ts

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

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/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>

package/components/Button/types.ts

@@ -1,8 +1,5 @@
 export type Props = {
   color?: "critical" | "primary"
-  command?: string
-  commandfor?: string
-  interestfor?: string
   size?: "x-small" | "small" | "large"
   variant?: "outlined" | "tonal" | "filled"
 } & (

package/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-button-group',
+      props.color && `ui-${props.color}`,
+      props.size && `ui-${props.size}`,
+      props.variant && `ui-${props.variant}`,
+      props.orientation && `ui-${props.orientation}`,
+      props.class,
+    ]"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Callout/Callout.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { severity, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <article
+    role="note"
+    :class="[
+      'ui-callout',
+      variant && `ui-${variant}`,
+      severity && `ui-${severity}`,
+      $props.class,
+    ]"
+  >
+    <slot name="icon">
+      <svg
+        v-if="severity === 'info'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'warning'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'critical'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 48 48"
+      >
+        <path
+          fill="currentColor"
+          d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
+        />
+      </svg>
+    </slot>
+    <div class="ui-content">
+      <h3 v-if="slots.title" class="ui-title">
+        <slot name="title"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </article>
+</template>

package/components/Card/Card.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useSlots } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { actionsAlign, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-card', variant && `ui-${variant}`, $props.class]">
+    <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>
+  </div>
+</template>

package/components/Card/types.ts

@@ -5,6 +5,7 @@ export type Props = {
 
 export type Slots<S> = {
   actions?: S
+  children?: S
   content?: S
   header?: S
 }

package/components/Checkbox/Checkbox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import CheckboxInput from "./CheckboxInput.vue"
+import type { CheckboxProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<CheckboxProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-checkbox',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <CheckboxInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="$slots['end-text'] ? endTextId : undefined"
+      :indeterminate="props.indeterminate"
+    />
+    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      ><slot></slot
+    ></span>
+    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Checkbox/CheckboxInput.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { CheckboxInputProps } from "./types"
+import { useAttrs, useTemplateRef, watchPostEffect } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const props = defineProps<CheckboxInputProps>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const input = useTemplateRef<HTMLInputElement>("input")
+
+if (modelValue.value === undefined && attrs.checked !== undefined) {
+  modelValue.value = attrs.checked !== false
+}
+
+watchPostEffect(() => {
+  if (input.value) input.value.indeterminate = Boolean(props.indeterminate)
+})
+</script>
+
+<template>
+  <input
+    ref="input"
+    type="checkbox"
+    :data-indeterminate="props.indeterminate || undefined"
+    v-bind="$attrs"
+    v-model="modelValue"
+  />
+</template>

package/components/Checkbox/types.ts

@@ -1,5 +1,4 @@
 export type CheckboxProps = {
-  disabled?: boolean
   error?: boolean
   hideLabel?: boolean
   indeterminate?: boolean

package/components/Chip/Chip.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const {
+  as,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  href,
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+const tag = computed(() => as || (href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[
+      'ui-chip',
+      {
+        'ui-multiline': multiline,
+      },
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      $props.class,
+    ]"
+    :href="tag === 'a' ? href : undefined"
+  >
+    <slot name="start"></slot>
+    <slot></slot>
+    <span v-if="label" class="ui-text">{{ label }}</span>
+    <slot name="end"></slot>
+  </component>
+</template>

package/components/ClassicSelect/ClassicSelect.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ClassicSelectProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ClassicSelectProps>(), {
+  items: () => [],
+  variant: "outlined",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | (string | number)[]>()
+
+const selectId = props.id || useId()
+const labelId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-select',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-filled': props.variant === 'filled',
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label" class="ui-label" :id="labelId">{{
+      props.label
+    }}</span>
+    <span class="ui-field">
+      <select
+        :aria-labelledby="props.label ? labelId : undefined"
+        :id="selectId"
+        v-bind="$attrs"
+        v-model="modelValue"
+      >
+        <option
+          v-for="item in props.items"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+        <slot></slot>
+      </select>
+    </span>
+    <span v-if="props.endText" class="ui-end-text">{{ props.endText }}</span>
+  </label>
+</template>

package/components/ClassicSelect/types.ts

@@ -5,15 +5,11 @@ export type Item = {
 
 export type ClassicSelectProps = {
   [key: string]: any
-  disabled?: boolean
   error?: boolean
   id?: string
   items?: Item[]
   label?: string
-  name?: string
-  required?: boolean
   size?: "small"
   endText?: string
-  value?: any
   variant?: "outlined" | "filled"
 }

package/components/DescriptionList/Description.vue

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

package/components/DescriptionList/DescriptionList.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { bordered } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <dl
+    :class="[
+      'ui-description-list',
+      { 'ui-bordered': bordered, 'ui-dotted': bordered === 'dotted' },
+      $props.class,
+    ]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </dl>
+</template>

package/components/DescriptionList/Item.vue

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

package/components/DescriptionList/Term.vue

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

package/components/Dialog/Dialog.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { actionsAlign } = defineProps<Props>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <dialog
+    :class="['ui-dialog', 'ui-card', 'ui-elevated', $props.class]"
+    v-bind="$attrs"
+  >
+    <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/types.ts

@@ -4,6 +4,7 @@ export type Props = {
 
 export type Slots<S> = {
   actions?: S
+  children?: S
   content?: S
   header?: string | S
 }

package/components/Divider/Divider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Props } from "./types.d.vue"
+
+const { variant } = defineProps<Props>()
+const variantClass = variant ? `border-${variant}` : ""
+</script>
+
+<template>
+  <hr
+    :class="['ui-divider', $props.class, variantClass && `ui-${variantClass}`]"
+  />
+</template>

package/components/Drawer/Drawer.astro

@@ -33,9 +33,15 @@ const drawerId = id || $id("drawer")
 >
   {Astro.slots.has("header") && <slot name="header" />}
 
-  <div class="ui-content">
-    <slot name="content" />
-  </div>
+  {
+    Astro.slots.has("content") && (
+      <div class="ui-content">
+        <slot name="content" />
+      </div>
+    )
+  }
+
+  <slot />
 
   {Astro.slots.has("footer") && <slot name="footer" />}
 </dialog>