@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/Collapsible.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui";
-import { computed, ref, watch } from "vue";
+import { computed, getCurrentInstance, ref, watch } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { collapsibleTheme } from "../theme/collapsible";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -12,13 +13,16 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   size: { type: null, required: false },
   direction: { type: null, required: false },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open"]);
 defineSlots();
+const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
 const icons = useIcons();
 const theme = useComponentTheme("collapsible", collapsibleTheme);
-const ui = computed(() => theme.value({ size: props.size, direction: props.direction }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ size: props.size, direction: props.direction, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
 const chevronProps = computed(() => resolveSlot(ui.value.chevron, props.ui?.chevron));
@@ -26,17 +30,18 @@ const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.cont
 const contentInnerProps = computed(() => resolveSlot(ui.value.contentInner, props.ui?.contentInner));
 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>
 
 <template>
-  <CollapsibleRoot :open="internalOpen" :disabled="disabled" v-bind="rootProps" @update:open="onUpdateOpen">
+  <CollapsibleRoot :open="internalOpen" :disabled="disabled" :data-selaras-color="effectiveColor" v-bind="rootProps" @update:open="onUpdateOpen">
     <CollapsibleTrigger v-bind="triggerProps">
       <slot name="trigger" :open="internalOpen" />
       <slot name="chevron-icon" :open="internalOpen">

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { CollapsibleThemeSlots } from '../theme/collapsible.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { collapsibleTheme } from '../theme/collapsible.js';
 type CollapsibleVariants = VariantProps<typeof collapsibleTheme>;
@@ -11,6 +12,8 @@ export interface CollapsibleProps {
     size?: CollapsibleVariants['size'];
     /** Which way the content reveals - `down` expands below the trigger, `up` above it. Flips the chevron's rest/open rotation to match. @default 'down' */
     direction?: CollapsibleVariants['direction'];
+    /** The trigger hover accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<CollapsibleThemeSlots>;
 }
 export interface CollapsibleEmits {

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

@@ -1,30 +1,40 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
 export interface ColorPickerProps {
+    name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
     modelValue?: string;
     defaultValue?: string;
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
     disabled?: boolean;
     /** Shows an alpha (opacity) slider alongside hue. Reka's own hex output already extends to 8-digit hex (`#RRGGBBAA`) once alpha drops below 1, so this only toggles whether that channel is reachable in the UI - not a format change. @default true */
     alpha?: boolean;
     /** A row of preset colors shown below the hex field - omitted entirely (no swatch row) unless given. */
     swatches?: string[];
     placeholder?: string;
-    /** Below a 768px viewport width, presents the popover as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`), matching Select/Autocomplete/DatePicker's own mobileModal. */
-    mobileModal?: boolean;
+    /** Opts into the picker's accessible small-screen modal presentation. */
+    adaptive?: boolean;
     size?: ColorPickerVariants['size'];
-    color?: ColorPickerVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;
 }
 export interface ColorPickerEmits {
+    'update:open': [value: boolean];
     'update:modelValue': [value: string];
 }
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ColorPicker.vue

@@ -1,28 +1,37 @@
 <script setup>
 import { ColorSwatch } from "reka-ui";
-import { computed, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 import { useIsMobile } from "../composables/use-media-query";
 import { useMessages } from "../composables/use-messages";
 import ColorPickerBody from "../internal/ColorPickerBody.vue";
 import { colorPickerTheme } from "../theme/color-picker";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Modal from "./Modal.vue";
 import Popover from "./Popover.vue";
 const props = defineProps({
+  name: { type: String, required: false },
+  form: { type: String, required: false },
   modelValue: { type: String, required: false },
   defaultValue: { type: String, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   alpha: { type: Boolean, required: false, default: true },
   swatches: { type: Array, required: false },
   placeholder: { type: String, required: false },
-  mobileModal: { type: Boolean, required: false },
+  adaptive: { type: Boolean, required: false },
   size: { type: null, required: false },
   color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:open", "update:modelValue"]);
 const messages = useMessages();
-const internalColor = ref(props.modelValue ?? props.defaultValue ?? "#000000");
+const instance = getCurrentInstance();
+const formAnchor = ref();
+const initialColor = props.defaultValue ?? "#000000";
+let ownerForm = null;
+const internalColor = ref(props.modelValue ?? initialColor);
 watch(() => props.modelValue, (value) => {
   if (value !== void 0)
     internalColor.value = value;
@@ -31,14 +40,41 @@ function onUpdateColor(value) {
   internalColor.value = value;
   emit("update:modelValue", value);
 }
-const internalOpen = ref(false);
+function resetColor(event) {
+  queueMicrotask(() => {
+    if (event.defaultPrevented || Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value"))
+      return;
+    internalColor.value = initialColor;
+  });
+}
+onMounted(() => {
+  ownerForm = formAnchor.value?.form ?? null;
+  ownerForm?.addEventListener("reset", resetColor);
+});
+onUnmounted(() => ownerForm?.removeEventListener("reset", resetColor));
+const localOpen = ref(props.defaultOpen ?? false);
+const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
+const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
 function onUpdateOpen(value) {
-  internalOpen.value = value;
+  if (!isOpenControlled())
+    localOpen.value = value;
+  emit("update:open", value);
 }
 const isMobile = useIsMobile();
-const showMobileModal = computed(() => props.mobileModal && isMobile.value);
+const mobilePresentation = ref(false);
+watch(open, (open2) => {
+  mobilePresentation.value = open2 && !!props.adaptive && isMobile.value;
+});
+onMounted(() => {
+  if (open.value)
+    mobilePresentation.value = !!props.adaptive && isMobile.value;
+});
+const showMobileModal = computed(() => mobilePresentation.value);
 const theme = useComponentTheme("colorPicker", colorPickerTheme);
-const ui = computed(() => theme.value({ size: props.size, color: props.color }));
+const themeBindings = useThemeBindings();
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const colorRoleMarker = computed(() => effectiveColor.value);
+const ui = computed(() => theme.value({ size: props.size, color: effectiveColor.value }));
 const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
 const triggerSwatchProps = computed(() => resolveSlot(ui.value.triggerSwatch, props.ui?.triggerSwatch));
 const triggerValueProps = computed(() => resolveSlot(ui.value.triggerValue, props.ui?.triggerValue));
@@ -65,19 +101,24 @@ const bodyProps = computed(() => ({
   swatchListProps: swatchListProps.value,
   swatchProps: swatchProps.value,
   swatchFillProps: swatchFillProps.value,
-  swatchIndicatorProps: swatchIndicatorProps.value
+  swatchIndicatorProps: swatchIndicatorProps.value,
+  colorRoleMarker: colorRoleMarker.value
 }));
 const popoverUi = computed(() => ({ content: resolveSlot(ui.value.content, props.ui?.content) }));
-const mobileModalUi = computed(() => ({ content: "rounded-[var(--ui-radius-md)]" }));
+const adaptiveUi = computed(() => ({ content: "rounded-[var(--selaras-resolved-radius-md)]" }));
 const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
 </script>
 
 <template>
-  <Popover v-if="!showMobileModal" :open="internalOpen" :ui="popoverUi" @update:open="onUpdateOpen">
+  <Popover v-if="!showMobileModal" :open="open" :ui="popoverUi" @update:open="onUpdateOpen">
     <button
       type="button"
       :disabled="disabled"
       :aria-label="messages.colorPicker"
+      :data-selaras-color="colorRoleMarker"
+      :data-selaras-theme="themeBindings['data-selaras-theme']"
+      :data-selaras-mode="themeBindings['data-selaras-mode']"
+      :style="themeBindings.style"
       v-bind="triggerProps"
     >
       <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
@@ -90,13 +131,17 @@ const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, pr
   </Popover>
 
   <Modal
-    v-else :open="internalOpen" :title="messages.colorPicker" :description="messages.colorPickerDescription"
-    :ui="mobileModalUi" @update:open="onUpdateOpen"
+    v-else :open="open" :title="messages.colorPicker" :description="messages.colorPickerDescription"
+    :ui="adaptiveUi" @update:open="onUpdateOpen"
   >
     <button
       type="button"
       :disabled="disabled"
       :aria-label="messages.colorPicker"
+      :data-selaras-color="colorRoleMarker"
+      :data-selaras-theme="themeBindings['data-selaras-theme']"
+      :data-selaras-mode="themeBindings['data-selaras-mode']"
+      :style="themeBindings.style"
       v-bind="triggerProps"
     >
       <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
@@ -109,4 +154,5 @@ const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, pr
       </div>
     </template>
   </Modal>
+  <input ref="formAnchor" type="hidden" :name="name" :form="form" :value="internalColor">
 </template>

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

@@ -1,30 +1,40 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
 export interface ColorPickerProps {
+    name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
     modelValue?: string;
     defaultValue?: string;
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
     disabled?: boolean;
     /** Shows an alpha (opacity) slider alongside hue. Reka's own hex output already extends to 8-digit hex (`#RRGGBBAA`) once alpha drops below 1, so this only toggles whether that channel is reachable in the UI - not a format change. @default true */
     alpha?: boolean;
     /** A row of preset colors shown below the hex field - omitted entirely (no swatch row) unless given. */
     swatches?: string[];
     placeholder?: string;
-    /** Below a 768px viewport width, presents the popover as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`), matching Select/Autocomplete/DatePicker's own mobileModal. */
-    mobileModal?: boolean;
+    /** Opts into the picker's accessible small-screen modal presentation. */
+    adaptive?: boolean;
     size?: ColorPickerVariants['size'];
-    color?: ColorPickerVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;
 }
 export interface ColorPickerEmits {
+    'update:open': [value: boolean];
     'update:modelValue': [value: string];
 }
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Column.d.ts

@@ -67,6 +67,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     footer: string;
     sortable: boolean;
     filterable: boolean;
-    pinned: "right" | "left" | undefined;
+    pinned: "left" | "right" | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/CommandPalette.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "reka-ui";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, useId, watch } from "vue";
 import { useCommandPalette } from "../composables/use-command-palette";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { commandPaletteTheme } from "../theme/command-palette";
 import { fuzzyScore } from "../utils/fuzzy-match";
-import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 import Kbd from "./Kbd.vue";
 defineOptions({ inheritAttrs: false });
@@ -19,15 +19,9 @@ const props = defineProps({
 const emit = defineEmits(["update:open"]);
 const shared = useCommandPalette();
 const isControlled = computed(() => props.open !== void 0);
-const internalOpen = ref(props.open ?? false);
-watch(() => props.open, (value) => {
-  if (value !== void 0)
-    internalOpen.value = value;
-});
-const isOpen = computed(() => isControlled.value ? internalOpen.value : shared.isOpen.value);
+const isOpen = computed(() => isControlled.value ? props.open : shared.isOpen.value);
 function close() {
   if (isControlled.value) {
-    internalOpen.value = false;
     emit("update:open", false);
   } else {
     shared.close();
@@ -35,8 +29,7 @@ function close() {
 }
 function toggle() {
   if (isControlled.value) {
-    internalOpen.value = !internalOpen.value;
-    emit("update:open", internalOpen.value);
+    emit("update:open", !isOpen.value);
   } else {
     shared.toggle();
   }
@@ -46,6 +39,7 @@ const messages = useMessages();
 const query = ref("");
 const highlightedIndex = ref(0);
 const inputRef = ref();
+const listboxId = `selaras-command-palette-list-${useId()}`;
 watch(isOpen, (open) => {
   if (!open) {
     query.value = "";
@@ -119,6 +113,7 @@ function onGlobalKeydown(event) {
 onMounted(() => window.addEventListener("keydown", onGlobalKeydown));
 onUnmounted(() => window.removeEventListener("keydown", onGlobalKeydown));
 const theme = useComponentTheme("commandPalette", commandPaletteTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const overlayProps = useRootProps(() => ui.value.overlay, () => props.ui?.overlay);
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
@@ -136,15 +131,22 @@ const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
 const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
 const footerKeyProps = computed(() => resolveSlot(ui.value.footerKey, props.ui?.footerKey));
 function itemId(index) {
-  return `command-palette-item-${index}`;
+  return `${listboxId}-item-${index}`;
 }
 </script>
 
 <template>
   <DialogRoot :open="isOpen" @update:open="(value) => value ? void 0 : close()">
     <DialogPortal>
-      <DialogOverlay v-bind="overlayProps" />
-      <DialogContent v-bind="contentProps" @open-auto-focus="onOpenAutoFocus">
+      <DialogOverlay
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="overlayProps"
+      />
+      <!-- CommandPalette has one built-in search field, so it uses the same
+           primary focus role as the other default form controls. -->
+      <DialogContent :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" data-selaras-color="primary" v-bind="contentProps" @open-auto-focus="onOpenAutoFocus">
         <DialogTitle :class="applyClassPrefix('sr-only')">
           {{ messages.commandPalette }}
         </DialogTitle>
@@ -159,14 +161,14 @@ function itemId(index) {
             type="text"
             role="combobox"
             aria-expanded="true"
-            aria-controls="command-palette-list"
+            :aria-controls="listboxId"
             :aria-activedescendant="highlightedItemId"
             :placeholder="messages.search"
             v-bind="inputProps"
             @keydown="onInputKeydown"
           >
         </div>
-        <div id="command-palette-list" v-bind="listProps" role="listbox">
+        <div :id="listboxId" v-bind="listProps" role="listbox">
           <template v-if="filteredGroups.length">
             <div v-for="(group, groupIndex) in filteredGroups" :key="group.label ?? groupIndex" v-bind="groupProps">
               <p v-if="group.label" v-bind="groupLabelProps">

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

@@ -1,4 +1,5 @@
 import type { ContentNavigationThemeSlots } from '../theme/content-navigation.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContentNavigationLink {
     title: string;
@@ -9,6 +10,8 @@ export interface ContentNavigationLink {
 type __VLS_Slots = ContentNavigationSlots;
 export interface ContentNavigationProps {
     navigation: ContentNavigationLink[];
+    /** The active-link accent. @default 'primary' */
+    color?: ColorRole;
     /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
     isNested?: boolean;
     ui?: UiProp<ContentNavigationThemeSlots>;

package/dist/runtime/components/ContentNavigation.vue

@@ -2,12 +2,14 @@
 import { computed } from "vue";
 import { useRoute } from "#imports";
 import { contentNavigationTheme } from "../theme/content-navigation";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Accordion from "./Accordion.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   navigation: { type: Array, required: true },
+  color: { type: null, required: false },
   isNested: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
@@ -17,7 +19,8 @@ function isActive(link) {
   return route.path === link.path;
 }
 const theme = useComponentTheme("contentNavigation", contentNavigationTheme);
-const ui = computed(() => theme.value({ isNested: props.isNested }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ isNested: props.isNested, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const groupUi = computed(() => ({
   item: "",
@@ -29,7 +32,7 @@ const groupUi = computed(() => ({
 </script>
 
 <template>
-  <ul v-bind="rootProps">
+  <ul :data-selaras-color="effectiveColor" v-bind="rootProps">
     <li v-for="link in navigation" :key="link.path" v-bind="resolveSlot(ui.item, props.ui?.item)">
       <Accordion
         v-if="link.children?.length"
@@ -46,7 +49,7 @@ const groupUi = computed(() => ({
         <template #[link.path]>
           <!-- Vue's SFC self-recursion resolves by this file's own bare name -
                keep it unprefixed even though the public component is SContentNavigation. -->
-          <ContentNavigation :navigation="link.children" is-nested :ui="props.ui">
+          <ContentNavigation :navigation="link.children" is-nested :color="color" :ui="props.ui">
             <template #link="scope">
               <slot name="link" v-bind="scope" />
             </template>

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

@@ -1,4 +1,5 @@
 import type { ContentNavigationThemeSlots } from '../theme/content-navigation.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContentNavigationLink {
     title: string;
@@ -9,6 +10,8 @@ export interface ContentNavigationLink {
 type __VLS_Slots = ContentNavigationSlots;
 export interface ContentNavigationProps {
     navigation: ContentNavigationLink[];
+    /** The active-link accent. @default 'primary' */
+    color?: ColorRole;
     /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
     isNested?: boolean;
     ui?: UiProp<ContentNavigationThemeSlots>;

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

@@ -1,4 +1,5 @@
 import type { ContentSurroundThemeSlots } from '../theme/content-surround.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContentSurroundLink {
     title: string;
@@ -9,6 +10,8 @@ export interface ContentSurroundProps {
     prev?: ContentSurroundLink;
     /** The next page in reading order. */
     next?: ContentSurroundLink;
+    /** The navigation-card hover and focus accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<ContentSurroundThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ContentSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ContentSurround.vue

@@ -3,20 +3,23 @@ import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { contentSurroundTheme } from "../theme/content-surround";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   prev: { type: Object, required: false },
   next: { type: Object, required: false },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("contentSurround", contentSurroundTheme);
-const startUi = computed(() => theme.value({ align: "start" }));
-const endUi = computed(() => theme.value({ align: "end" }));
-const rootProps = useRootProps(() => theme.value().root, () => props.ui?.root);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const startUi = computed(() => theme.value({ align: "start", color: effectiveColor.value }));
+const endUi = computed(() => theme.value({ align: "end", color: effectiveColor.value }));
+const rootProps = useRootProps(() => theme.value({ color: effectiveColor.value }).root, () => props.ui?.root);
 const prevLinkProps = computed(() => resolveSlot(startUi.value.link, props.ui?.link));
 const nextLinkProps = computed(() => resolveSlot(endUi.value.link, props.ui?.link));
 const prevLabelProps = computed(() => resolveSlot(startUi.value.label, props.ui?.label));
@@ -26,7 +29,7 @@ const titleProps = computed(() => resolveSlot(startUi.value.title, props.ui?.tit
 </script>
 
 <template>
-  <nav v-if="prev || next" v-bind="rootProps" :aria-label="`${messages.previous} / ${messages.next}`">
+  <nav v-if="prev || next" :data-selaras-color="effectiveColor" v-bind="rootProps" :aria-label="`${messages.previous} / ${messages.next}`">
     <NuxtLink v-if="prev" :to="prev.path" v-bind="prevLinkProps">
       <span v-bind="prevLabelProps">
         <Icon :name="icons.chevronLeft" v-bind="iconProps" />

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

@@ -1,4 +1,5 @@
 import type { ContentSurroundThemeSlots } from '../theme/content-surround.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ContentSurroundLink {
     title: string;
@@ -9,6 +10,8 @@ export interface ContentSurroundProps {
     prev?: ContentSurroundLink;
     /** The next page in reading order. */
     next?: ContentSurroundLink;
+    /** The navigation-card hover and focus accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<ContentSurroundThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ContentSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,4 +1,5 @@
 import type { ContentTocThemeSlots } from '../theme/content-toc.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TocLink {
     id: string;
@@ -10,6 +11,8 @@ type __VLS_Slots = ContentTocSlots;
 export interface ContentTocProps {
     links: TocLink[];
     title?: string;
+    /** The active-heading link and rail accent. @default 'primary' */
+    color?: ColorRole;
     /** Internal: set by recursive self-calls, omit when using this component directly. */
     isNested?: boolean;
     /** Internal: set by recursive self-calls, omit when using this component directly. */

package/dist/runtime/components/ContentToc.vue

@@ -2,11 +2,13 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { contentTocTheme } from "../theme/content-toc";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   links: { type: Array, required: true },
   title: { type: String, required: false },
+  color: { type: null, required: false },
   isNested: { type: Boolean, required: false, default: false },
   activeIds: { type: Set, required: false },
   ui: { type: Object, required: false }
@@ -64,7 +66,8 @@ onUnmounted(() => {
 });
 const messages = useMessages();
 const theme = useComponentTheme("contentToc", contentTocTheme);
-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.root, () => props.ui?.root);
 const RAIL_WIDTH = 20;
 const RAIL_X_OUTER = 1;
@@ -189,7 +192,7 @@ if (isRoot) {
 function linkProps(link) {
   const active = activeIds.value.has(link.id);
   return {
-    ...resolveSlot(theme.value({ active }).link, props.ui?.link),
+    ...resolveSlot(theme.value({ active, color: effectiveColor.value }).link, props.ui?.link),
     "data-toc-link": "true",
     "data-depth": link.depth,
     "data-active": active || void 0,
@@ -204,7 +207,7 @@ function linkProps(link) {
 </script>
 
 <template>
-  <component :is="isRoot ? 'nav' : 'div'" v-bind="isRoot ? rootProps : void 0">
+  <component :is="isRoot ? 'nav' : 'div'" :data-selaras-color="effectiveColor" v-bind="isRoot ? rootProps : void 0">
     <p v-if="isRoot" v-bind="resolveSlot(ui.title, props.ui?.title)">
       <slot name="title">
         {{ title ?? messages.onThisPage }}
@@ -237,7 +240,7 @@ function linkProps(link) {
           <div v-if="link.children?.length" v-bind="resolveSlot(ui.content, props.ui?.content)">
             <!-- Vue's SFC self-recursion resolves by this file's own bare name -
                  keep it unprefixed even though the public component is SContentToc. -->
-            <ContentToc :links="link.children" is-nested :active-ids="activeIds" :ui="props.ui">
+            <ContentToc :links="link.children" is-nested :active-ids="activeIds" :color="color" :ui="props.ui">
               <template #link="scope">
                 <slot name="link" v-bind="scope" />
               </template>
@@ -253,7 +256,7 @@ function linkProps(link) {
           <slot name="link" :link="link" :active="activeIds.has(link.id)">{{ link.text }}</slot>
         </a>
         <div v-if="link.children?.length" v-bind="resolveSlot(ui.content, props.ui?.content)">
-          <ContentToc :links="link.children" is-nested :active-ids="activeIds" :ui="props.ui">
+          <ContentToc :links="link.children" is-nested :active-ids="activeIds" :color="color" :ui="props.ui">
             <template #link="scope">
               <slot name="link" v-bind="scope" />
             </template>

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

@@ -1,4 +1,5 @@
 import type { ContentTocThemeSlots } from '../theme/content-toc.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TocLink {
     id: string;
@@ -10,6 +11,8 @@ type __VLS_Slots = ContentTocSlots;
 export interface ContentTocProps {
     links: TocLink[];
     title?: string;
+    /** The active-heading link and rail accent. @default 'primary' */
+    color?: ColorRole;
     /** Internal: set by recursive self-calls, omit when using this component directly. */
     isNested?: boolean;
     /** Internal: set by recursive self-calls, omit when using this component directly. */