@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, ref, useSlots } from "vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 import NavigationMenuFlyoutList from "./NavigationMenuFlyoutList.vue";
 import Popover from "./Popover.vue";
@@ -24,7 +25,9 @@ function slotName(item, suffix) {
   return `item${suffix}`;
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
-const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
+const themeBindings = useThemeBindings();
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
 let closeTimer;
 function cancelClose() {
   if (closeTimer !== void 0) {
@@ -92,6 +95,10 @@ function onContentKeydown(event) {
       ref="triggerRef"
       type="button"
       :disabled="item.disabled"
+      :data-selaras-color="effectiveColor"
+      :data-selaras-theme="themeBindings['data-selaras-theme']"
+      :data-selaras-mode="themeBindings['data-selaras-mode']"
+      :style="themeBindings.style"
       v-bind="resolveSlot(ui.link, props.ui?.link)"
       @mouseenter="openNow"
       @mouseleave="scheduleClose"

package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue.d.ts

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuFlyoutTriggerProps {
     item: NavigationMenuItem;
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     open: boolean;

package/dist/runtime/components/Pagination.d.vue.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { buttonTheme } from '../theme/button.js';
 import type { PaginationThemeSlots } from '../theme/pagination.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { paginationTheme } from '../theme/pagination.js';
 type PaginationVariants = VariantProps<typeof paginationTheme>;
@@ -23,10 +24,10 @@ export interface PaginationProps {
     disabled?: boolean;
     size?: PaginationVariants['size'];
     /** Inactive controls (First/Prev/Next/Last and non-current page numbers). */
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: ButtonVariants['variant'];
     /** The current page's own button. */
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     activeVariant?: ButtonVariants['variant'];
     ui?: UiProp<PaginationThemeSlots>;
 }

package/dist/runtime/components/Pagination.vue.d.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { buttonTheme } from '../theme/button.js';
 import type { PaginationThemeSlots } from '../theme/pagination.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { paginationTheme } from '../theme/pagination.js';
 type PaginationVariants = VariantProps<typeof paginationTheme>;
@@ -23,10 +24,10 @@ export interface PaginationProps {
     disabled?: boolean;
     size?: PaginationVariants['size'];
     /** Inactive controls (First/Prev/Next/Last and non-current page numbers). */
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: ButtonVariants['variant'];
     /** The current page's own button. */
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     activeVariant?: ButtonVariants['variant'];
     ui?: UiProp<PaginationThemeSlots>;
 }

package/dist/runtime/components/PinInput.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { PinInputThemeSlots } from '../theme/pin-input.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { pinInputTheme } from '../theme/pin-input.js';
 type PinInputVariants = VariantProps<typeof pinInputTheme>;
@@ -19,7 +20,7 @@ export interface PinInputProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: PinInputVariants['size'];
-    color?: PinInputVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<PinInputThemeSlots>;

package/dist/runtime/components/PinInput.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { PinInputInput, PinInputRoot } from "reka-ui";
-import { computed } from "vue";
+import { computed, mergeProps, useAttrs } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { pinInputTheme } from "../theme/pin-input";
-import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { isNativeInputAttr } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
@@ -24,23 +26,28 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue", "complete"]);
 const field = useFormField();
+const attrs = useAttrs();
 const pinInputId = computed(() => props.id ?? field?.id);
 const pinInputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
-const describedBy = computed(() => field?.describedBy.value);
+const describedBy = computed(() => attrs["aria-describedby"] ?? field?.describedBy.value);
+const labelledBy = computed(() => attrs["aria-labelledby"] ?? field?.labelId);
 const theme = useComponentTheme("pinInput", pinInputTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: effectiveSize.value,
-  color: props.color,
+  color: effectiveColor.value,
   invalid: pinInputInvalid.value
 }));
-const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
-const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isNativeInputAttr });
+const nativeInputAttrs = useFallthroughAttrs(isNativeInputAttr);
+const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.ui?.input), nativeInputAttrs.value));
 </script>
 
 <template>
   <PinInputRoot
     :id="pinInputId"
+    role="group"
     :model-value="modelValue"
     :default-value="defaultValue"
     :placeholder="placeholder"
@@ -52,6 +59,8 @@ const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
     :required="required"
     :aria-invalid="pinInputInvalid || void 0"
     :aria-describedby="describedBy"
+    :aria-labelledby="labelledBy"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @complete="(value) => emit('complete', value)"
@@ -60,6 +69,8 @@ const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
       v-for="i in length ?? 5"
       :key="i"
       :index="i - 1"
+      :aria-invalid="pinInputInvalid || void 0"
+      :aria-describedby="describedBy"
       v-bind="inputProps"
     />
   </PinInputRoot>

package/dist/runtime/components/PinInput.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { PinInputThemeSlots } from '../theme/pin-input.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { pinInputTheme } from '../theme/pin-input.js';
 type PinInputVariants = VariantProps<typeof pinInputTheme>;
@@ -19,7 +20,7 @@ export interface PinInputProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: PinInputVariants['size'];
-    color?: PinInputVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<PinInputThemeSlots>;

package/dist/runtime/components/Popover.d.vue.ts

@@ -2,6 +2,8 @@ import type { PopoverThemeSlots } from '../theme/popover.js';
 import type { UiProp } from '../utils/ui.js';
 export interface PopoverProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled popover. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */

package/dist/runtime/components/Popover.vue

@@ -1,10 +1,11 @@
 <script setup>
 import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
-import { computed, ref, watch } from "vue";
+import { computed, getCurrentInstance, ref, watch } from "vue";
 import { popoverTheme } from "../theme/popover";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 const props = defineProps({
-  open: { type: Boolean, required: false },
+  open: { type: Boolean, required: false, default: void 0 },
+  defaultOpen: { type: Boolean, required: false },
   side: { type: String, required: false, default: "bottom" },
   align: { type: String, required: false, default: "center" },
   modal: { type: Boolean, required: false, default: false },
@@ -38,16 +39,19 @@ function onOpenAutoFocus(event) {
   emit("openAutoFocus", event);
 }
 const theme = useComponentTheme("popover", popoverTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
-const internalOpen = ref(props.open ?? false);
+const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
+const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
 watch(() => props.open, (value) => {
-  if (value !== void 0)
-    internalOpen.value = value;
+  if (isControlled)
+    internalOpen.value = value ?? false;
 });
 function onUpdateOpen(value) {
-  internalOpen.value = value;
+  if (!isControlled)
+    internalOpen.value = value;
   emit("update:open", value);
 }
 </script>
@@ -59,6 +63,9 @@ function onUpdateOpen(value) {
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
         :side="side"
         :align="align"
         :side-offset="8"

package/dist/runtime/components/Popover.vue.d.ts

@@ -2,6 +2,8 @@ import type { PopoverThemeSlots } from '../theme/popover.js';
 import type { UiProp } from '../utils/ui.js';
 export interface PopoverProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled popover. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */

package/dist/runtime/components/Progress.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ProgressThemeSlots } from '../theme/progress.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { progressTheme } from '../theme/progress.js';
 type ProgressVariants = VariantProps<typeof progressTheme>;
@@ -12,7 +13,7 @@ export interface ProgressProps {
     /** @default 'linear' */
     type?: 'linear' | 'circular';
     size?: ProgressVariants['size'];
-    color?: ProgressVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<ProgressThemeSlots>;
 }
 export interface ProgressSlots {

package/dist/runtime/components/Progress.vue

@@ -2,6 +2,7 @@
 import { ProgressIndicator, ProgressRoot } from "reka-ui";
 import { computed } from "vue";
 import { progressTheme } from "../theme/progress";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -28,14 +29,15 @@ const radius = computed(() => (circleSpec.value.diameter - circleSpec.value.stro
 const circumference = computed(() => 2 * Math.PI * radius.value);
 const dashOffset = computed(() => percent.value == null ? circumference.value * 0.75 : circumference.value * (1 - percent.value / 100));
 const theme = useComponentTheme("progress", progressTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: props.size,
-  color: props.color,
+  color: effectiveColor.value,
   indeterminate: props.modelValue == null
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
-const circleRootProps = computed(() => resolveSlot(ui.value.circleRoot, props.ui?.circleRoot));
+const circleRootProps = useRootProps(() => ui.value.circleRoot, () => props.ui?.circleRoot);
 const circleWrapperProps = computed(() => resolveSlot(ui.value.circleWrapper, props.ui?.circleWrapper));
 const circleTrackProps = computed(() => resolveSlot(ui.value.circleTrack, props.ui?.circleTrack));
 const circleIndicatorProps = computed(() => resolveSlot(ui.value.circleIndicator, props.ui?.circleIndicator));
@@ -43,10 +45,10 @@ const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
 </script>
 
 <template>
-  <ProgressRoot v-if="type === 'linear'" :model-value="modelValue" :max="max" v-bind="rootProps">
+  <ProgressRoot v-if="type === 'linear'" :model-value="modelValue" :max="max" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <ProgressIndicator v-bind="indicatorProps" :style="modelValue == null ? void 0 : { width: `${percent}%` }" />
   </ProgressRoot>
-  <ProgressRoot v-else :model-value="modelValue" :max="max" v-bind="circleRootProps">
+  <ProgressRoot v-else :model-value="modelValue" :max="max" :data-selaras-color="effectiveColor" v-bind="circleRootProps">
     <svg :width="circleSpec.diameter" :height="circleSpec.diameter" :viewBox="`0 0 ${circleSpec.diameter} ${circleSpec.diameter}`" v-bind="circleWrapperProps">
       <circle
         :cx="circleSpec.diameter / 2"

package/dist/runtime/components/Progress.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ProgressThemeSlots } from '../theme/progress.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { progressTheme } from '../theme/progress.js';
 type ProgressVariants = VariantProps<typeof progressTheme>;
@@ -12,7 +13,7 @@ export interface ProgressProps {
     /** @default 'linear' */
     type?: 'linear' | 'circular';
     size?: ProgressVariants['size'];
-    color?: ProgressVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<ProgressThemeSlots>;
 }
 export interface ProgressSlots {

package/dist/runtime/components/ProseH1.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH1Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH1.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h1, () => void 0);
 </script>
 
 <template>
-  <h1 :id="id" v-bind="rootProps">
+  <h1 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH1.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH1Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH2.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH2Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH2.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h2, () => void 0);
 </script>
 
 <template>
-  <h2 :id="id" v-bind="rootProps">
+  <h2 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH2.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH2Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH3.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH3Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH3.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h3, () => void 0);
 </script>
 
 <template>
-  <h3 :id="id" v-bind="rootProps">
+  <h3 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH3.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH3Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH4.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH4Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH4.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h4, () => void 0);
 </script>
 
 <template>
-  <h4 :id="id" v-bind="rootProps">
+  <h4 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH4.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH4Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH5.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH5Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH5.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h5, () => void 0);
 </script>
 
 <template>
-  <h5 :id="id" v-bind="rootProps">
+  <h5 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH5.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH5Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH6.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH6Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ProseH6.vue

@@ -1,18 +1,21 @@
 <script setup>
 import { computed } from "vue";
 import { proseTheme } from "../theme/prose";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
-defineProps({
-  id: { type: String, required: false }
+const props = defineProps({
+  id: { type: String, required: false },
+  color: { type: null, required: false }
 });
 const theme = useComponentTheme("prose", proseTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.h6, () => void 0);
 </script>
 
 <template>
-  <h6 :id="id" v-bind="rootProps">
+  <h6 :id="id" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
       <slot />
     </a>

package/dist/runtime/components/ProseH6.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ColorRole } from '../utils/color-registry.js';
 export interface ProseH6Props {
     id?: string;
+    color?: ColorRole;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/RadioGroup.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { RadioGroupThemeSlots } from '../theme/radio-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { radioGroupTheme } from '../theme/radio-group.js';
 export interface RadioItem {
@@ -19,7 +20,7 @@ export interface RadioGroupProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: RadioGroupVariants['size'];
-    color?: RadioGroupVariants['color'];
+    color?: ColorRole;
     orientation?: RadioGroupVariants['orientation'];
     variant?: RadioGroupVariants['variant'];
     ui?: UiProp<RadioGroupThemeSlots>;