@sewadah/selaras 0.1.1

package/dist/runtime/composables/use-modal.d.ts

@@ -0,0 +1,32 @@
+import type { Component, Ref } from 'vue';
+export interface ModalInstance {
+    id: number;
+    component: Component;
+    props: Record<string, unknown>;
+    isOpen: boolean;
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+    resolve: (value: unknown) => void;
+}
+export interface UseModalOpenOptions {
+    props?: Record<string, unknown>;
+    /** Registered with Reka as the dialog's accessible name, visually hidden - the opened component still supplies its own visible header via the content slot. */
+    title?: string;
+    /** Registered with Reka as the dialog's accessible description, visually hidden. */
+    description?: string;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+}
+export interface UseModalReturn {
+    modals: Ref<ModalInstance[]>;
+    open: <T = void>(component: Component, options?: UseModalOpenOptions) => Promise<T | undefined>;
+    close: (id: number, value?: unknown) => void;
+    remove: (id: number) => void;
+}
+export declare function useModal(): UseModalReturn;

package/dist/runtime/composables/use-modal.js

@@ -0,0 +1,39 @@
+import { markRaw, ref } from "vue";
+const modals = ref([]);
+let counter = 0;
+export function useModal() {
+  function open(component, options) {
+    return new Promise((resolve) => {
+      modals.value.push({
+        id: counter++,
+        // Vue components are meant to stay an opaque, non-reactive value -
+        // without this, pushing one into this reactive array wraps it in
+        // a reactive proxy too, which Vue's own dev warning flags as
+        // wasted overhead for no benefit.
+        component: markRaw(component),
+        props: options?.props ?? {},
+        isOpen: true,
+        title: options?.title,
+        description: options?.description,
+        dismissible: options?.dismissible,
+        modal: options?.modal,
+        overlay: options?.overlay,
+        transition: options?.transition,
+        resolve
+      });
+    });
+  }
+  function close(id, value) {
+    const instance = modals.value.find((m) => m.id === id);
+    if (!instance)
+      return;
+    instance.isOpen = false;
+    instance.resolve(value);
+  }
+  function remove(id) {
+    const index = modals.value.findIndex((m) => m.id === id);
+    if (index !== -1)
+      modals.value.splice(index, 1);
+  }
+  return { modals, open, close, remove };
+}

package/dist/runtime/composables/use-ripple.d.ts

@@ -0,0 +1,15 @@
+import type { ComputedRef } from 'vue';
+/**
+ * Whether v-ripple should actually spawn a ripple - mirrors useIcons' own
+ * app.config merge (see use-icons.ts), just a single top-level boolean
+ * instead of a registry object. Defaults to enabled; app.config.ripple =
+ * false turns it off globally for every component that binds v-ripple to
+ * this rather than hardcoding it unconditionally on.
+ *
+ * Deliberately not read inside the directive itself (directives/ripple.ts)
+ * - useAppConfig() is a Nuxt composable meant to run in a component's own
+ * setup context, not a directive lifecycle hook, so each consuming
+ * component reads this itself and passes the result as v-ripple's binding
+ * value (`v-ripple="rippleEnabled"`) instead.
+ */
+export declare function useRippleEnabled(): ComputedRef<boolean>;

package/dist/runtime/composables/use-ripple.js

@@ -0,0 +1,6 @@
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+export function useRippleEnabled() {
+  const appConfig = useAppConfig();
+  return computed(() => appConfig.ripple ?? true);
+}

package/dist/runtime/composables/use-slideover.d.ts

@@ -0,0 +1,36 @@
+import type { Component, Ref } from 'vue';
+export interface SlideoverInstance {
+    id: number;
+    component: Component;
+    props: Record<string, unknown>;
+    isOpen: boolean;
+    title?: string;
+    description?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    inset?: boolean;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+    resolve: (value: unknown) => void;
+}
+export interface UseSlideoverOpenOptions {
+    props?: Record<string, unknown>;
+    /** Registered with Reka as the panel's accessible name, visually hidden - the opened component still supplies its own visible header via the content slot. */
+    title?: string;
+    /** Registered with Reka as the panel's accessible description, visually hidden. */
+    description?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    inset?: boolean;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+}
+export interface UseSlideoverReturn {
+    slideovers: Ref<SlideoverInstance[]>;
+    open: <T = void>(component: Component, options?: UseSlideoverOpenOptions) => Promise<T | undefined>;
+    close: (id: number, value?: unknown) => void;
+    remove: (id: number) => void;
+}
+export declare function useSlideover(): UseSlideoverReturn;

package/dist/runtime/composables/use-slideover.js

@@ -0,0 +1,41 @@
+import { markRaw, ref } from "vue";
+const slideovers = ref([]);
+let counter = 0;
+export function useSlideover() {
+  function open(component, options) {
+    return new Promise((resolve) => {
+      slideovers.value.push({
+        id: counter++,
+        // Vue components are meant to stay an opaque, non-reactive value -
+        // without this, pushing one into this reactive array wraps it in
+        // a reactive proxy too, which Vue's own dev warning flags as
+        // wasted overhead for no benefit.
+        component: markRaw(component),
+        props: options?.props ?? {},
+        isOpen: true,
+        title: options?.title,
+        description: options?.description,
+        side: options?.side,
+        inset: options?.inset,
+        dismissible: options?.dismissible,
+        modal: options?.modal,
+        overlay: options?.overlay,
+        transition: options?.transition,
+        resolve
+      });
+    });
+  }
+  function close(id, value) {
+    const instance = slideovers.value.find((s) => s.id === id);
+    if (!instance)
+      return;
+    instance.isOpen = false;
+    instance.resolve(value);
+  }
+  function remove(id) {
+    const index = slideovers.value.findIndex((s) => s.id === id);
+    if (index !== -1)
+      slideovers.value.splice(index, 1);
+  }
+  return { slideovers, open, close, remove };
+}

package/dist/runtime/composables/use-table.d.ts

@@ -0,0 +1,63 @@
+import type { ComputedRef } from 'vue';
+interface UseTableProps {
+    data: unknown[];
+    selectable?: boolean;
+    pageSize?: number;
+    virtualize?: unknown;
+    sorting?: any[];
+    defaultSorting?: any[];
+    rowSelection?: Record<string, boolean>;
+    globalFilter?: string;
+    pageIndex?: number;
+    expanded?: any;
+    columnVisibility?: Record<string, boolean>;
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
+}
+interface UseTableEmit {
+    (event: 'update:sorting', value: any[]): void;
+    (event: 'update:rowSelection', value: Record<string, boolean>): void;
+    (event: 'update:globalFilter', value: string): void;
+    (event: 'update:pageIndex', value: number): void;
+    (event: 'update:expanded', value: any): void;
+    (event: 'update:columnVisibility', value: Record<string, boolean>): void;
+}
+/**
+ * Pure TanStack wiring - the final column defs (including any synthetic
+ * selection/expand column, which need to render SCheckbox/an expand button
+ * and so live in Table.vue instead) are passed in already built.
+ */
+export declare function useTable(props: UseTableProps, emit: UseTableEmit, columns: ComputedRef<any[]>, columnPinning: ComputedRef<{
+    start: string[];
+    end: string[];
+}>): {
+    table: import("@tanstack/vue-table").AppVueTable<{
+        rowSortingFeature: import("@tanstack/vue-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/vue-table").TableFeature;
+        rowPaginationFeature: import("@tanstack/vue-table").TableFeature;
+        rowExpandingFeature: import("@tanstack/vue-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/vue-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/vue-table").TableFeature;
+        columnPinningFeature: import("@tanstack/vue-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/vue-table").TableFeature;
+        sortedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+        paginatedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+        filteredRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+        expandedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+        sortFns: {
+            alphanumeric: import("@tanstack/vue-table").CreatedSortFn<any, any>;
+        };
+        filterFns: {
+            includesString: import("@tanstack/vue-table").CreatedFilterFn<any, any>;
+        };
+    }, import("@tanstack/vue-table").RowData, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>>;
+    sorting: import("vue").WritableComputedRef<any[], any[]>;
+    rowSelection: import("vue").WritableComputedRef<Record<string, boolean>, Record<string, boolean>>;
+    globalFilter: import("vue").WritableComputedRef<string, string>;
+    pageIndex: import("vue").WritableComputedRef<number, number>;
+    expanded: import("vue").WritableComputedRef<any, any>;
+    columnVisibility: import("vue").WritableComputedRef<Record<string, boolean>, Record<string, boolean>>;
+    effectivePageSize: ComputedRef<number>;
+};
+export {};

package/dist/runtime/composables/use-table.js

@@ -0,0 +1,142 @@
+import {
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTableHook,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric
+} from "@tanstack/vue-table";
+import { computed, ref } from "vue";
+const { useAppTable } = createTableHook({
+  features: {
+    rowSortingFeature,
+    rowSelectionFeature,
+    rowPaginationFeature,
+    rowExpandingFeature,
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    columnPinningFeature,
+    globalFilteringFeature,
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    sortFns: { alphanumeric: sortFn_alphanumeric },
+    filterFns: { includesString: filterFn_includesString }
+  }
+});
+export function useTable(props, emit, columns, columnPinning) {
+  const internalSorting = ref(props.defaultSorting ?? []);
+  const sorting = computed({
+    get: () => props.sorting ?? internalSorting.value,
+    set: (value) => {
+      internalSorting.value = value;
+      emit("update:sorting", value);
+    }
+  });
+  const internalRowSelection = ref({});
+  const rowSelection = computed({
+    get: () => props.rowSelection ?? internalRowSelection.value,
+    set: (value) => {
+      internalRowSelection.value = value;
+      emit("update:rowSelection", value);
+    }
+  });
+  const internalGlobalFilter = ref("");
+  const globalFilter = computed({
+    get: () => props.globalFilter ?? internalGlobalFilter.value,
+    set: (value) => {
+      internalGlobalFilter.value = value;
+      emit("update:globalFilter", value);
+    }
+  });
+  const internalPageIndex = ref(0);
+  const pageIndex = computed({
+    get: () => props.pageIndex ?? internalPageIndex.value,
+    set: (value) => {
+      internalPageIndex.value = value;
+      emit("update:pageIndex", value);
+    }
+  });
+  const effectivePageSize = computed(() => props.virtualize || props.pageSize === void 0 ? Math.max(props.data.length, 1) : props.pageSize);
+  const internalExpanded = ref({});
+  const expanded = computed({
+    get: () => props.expanded ?? internalExpanded.value,
+    set: (value) => {
+      internalExpanded.value = value;
+      emit("update:expanded", value);
+    }
+  });
+  const internalColumnVisibility = ref({});
+  const columnVisibility = computed({
+    get: () => props.columnVisibility ?? internalColumnVisibility.value,
+    set: (value) => {
+      internalColumnVisibility.value = value;
+      emit("update:columnVisibility", value);
+    }
+  });
+  const table = useAppTable({
+    data: computed(() => props.data),
+    columns,
+    enableRowSelection: computed(() => !!props.selectable),
+    // Row expansion otherwise only allows expanding rows that already have
+    // real hierarchical subRows - this table's own expansion is manual
+    // (detail content via the `expanded` slot), not a subRow tree.
+    getRowCanExpand: () => true,
+    // Opts out of the local sorted/filtered/paginated row models - state
+    // still lives here (sorting/globalFilter/pageIndex above, still
+    // emitting their own update:* events the normal way), only the row
+    // model itself defers to whatever `data` already is. Captured once at
+    // setup, not wrapped in `computed()` - a table's manual/local mode
+    // isn't realistically expected to flip reactively mid-session (it's
+    // established once, alongside how `data` itself is sourced), and
+    // wrapping `manualPagination` specifically in a reactive computed was
+    // found to corrupt @tanstack/vue-table's own internal page-index
+    // auto-reset tracking (Previous/Next silently stopped changing pages,
+    // even though the resolved boolean value was identical either way) -
+    // a real bug in this exact adapter version, not a misuse on our part.
+    // Kept all three plain for consistency rather than reactive-except-one.
+    manualSorting: !!props.manualSorting,
+    manualFiltering: !!props.manualFiltering,
+    manualPagination: !!props.manualPagination,
+    state: computed(() => ({
+      sorting: sorting.value,
+      rowSelection: rowSelection.value,
+      globalFilter: globalFilter.value,
+      pagination: { pageIndex: pageIndex.value, pageSize: effectivePageSize.value },
+      expanded: expanded.value,
+      columnVisibility: columnVisibility.value,
+      columnPinning: columnPinning.value
+    })),
+    onSortingChange: (updater) => {
+      sorting.value = typeof updater === "function" ? updater(sorting.value) : updater;
+    },
+    onRowSelectionChange: (updater) => {
+      rowSelection.value = typeof updater === "function" ? updater(rowSelection.value) : updater;
+    },
+    onGlobalFilterChange: (updater) => {
+      globalFilter.value = typeof updater === "function" ? updater(globalFilter.value) : updater;
+    },
+    onPaginationChange: (updater) => {
+      const current = { pageIndex: pageIndex.value, pageSize: effectivePageSize.value };
+      const next = typeof updater === "function" ? updater(current) : updater;
+      pageIndex.value = next.pageIndex;
+    },
+    onExpandedChange: (updater) => {
+      expanded.value = typeof updater === "function" ? updater(expanded.value) : updater;
+    },
+    onColumnVisibilityChange: (updater) => {
+      columnVisibility.value = typeof updater === "function" ? updater(columnVisibility.value) : updater;
+    }
+  });
+  return { table, sorting, rowSelection, globalFilter, pageIndex, expanded, columnVisibility, effectivePageSize };
+}

package/dist/runtime/composables/use-toast.d.ts

@@ -0,0 +1,15 @@
+export interface ToastItem {
+    id: number;
+    title?: string;
+    description?: string;
+    duration?: number;
+    /** Status - tints the icon and adds a matching left-edge accent. Scoped to just these four (not the full color palette Button/Badge/Chip expose) since a toast's color only ever means "what kind of status is this." */
+    color?: 'success' | 'danger' | 'warning' | 'info';
+    /** Overrides the color's own default icon (or shows an icon with no color set at all). */
+    icon?: string;
+}
+export declare function useToast(): {
+    toasts: import("vue").Ref<ToastItem[], ToastItem[]>;
+    add: (toast: Omit<ToastItem, "id">) => number;
+    remove: (id: number) => void;
+};

package/dist/runtime/composables/use-toast.js

@@ -0,0 +1,16 @@
+import { useState } from "#imports";
+export function useToast() {
+  const toasts = useState("selaras-toasts", () => []);
+  const counter = useState("selaras-toast-counter", () => 0);
+  function add(toast) {
+    const id = counter.value++;
+    toasts.value.push({ id, ...toast });
+    return id;
+  }
+  function remove(id) {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index !== -1)
+      toasts.value.splice(index, 1);
+  }
+  return { toasts, add, remove };
+}

package/dist/runtime/directives/index.d.ts

@@ -0,0 +1 @@
+export * from './ripple.js';

package/dist/runtime/directives/index.js

@@ -0,0 +1 @@
+export * from "./ripple.js";

package/dist/runtime/directives/ripple.d.ts

@@ -0,0 +1,16 @@
+import type { Directive } from 'vue';
+export interface RippleOptions {
+    /** Fill color for the ripple. @default 'currentColor' */
+    color?: string;
+    /** Peak opacity the ripple reaches before fading out. @default 0.25 */
+    opacity?: number;
+    /** How long the ripple takes to grow and fade, in ms. @default 500 */
+    duration?: number;
+}
+/** `v-ripple` (defaults on) / `v-ripple="false"` (opt out) / `v-ripple="{ color, opacity, duration }"` (override any default). */
+export type RippleValue = boolean | RippleOptions;
+interface RippleHost extends HTMLElement {
+    _rippleHandler?: (event: PointerEvent) => void;
+}
+export declare const vRipple: Directive<RippleHost, RippleValue | undefined>;
+export {};

package/dist/runtime/directives/ripple.js

@@ -0,0 +1,80 @@
+const RIPPLE_DEFAULTS = {
+  color: "currentColor",
+  opacity: 0.25,
+  duration: 500
+};
+function resolveOptions(value) {
+  if (value === false)
+    return void 0;
+  if (value === true || value === void 0)
+    return RIPPLE_DEFAULTS;
+  return { ...RIPPLE_DEFAULTS, ...value };
+}
+function spawnRipple(host, event, options) {
+  const rect = host.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  const radius = Math.max(
+    Math.hypot(x, y),
+    Math.hypot(rect.width - x, y),
+    Math.hypot(x, rect.height - y),
+    Math.hypot(rect.width - x, rect.height - y)
+  );
+  const span = document.createElement("span");
+  span.setAttribute("aria-hidden", "true");
+  Object.assign(span.style, {
+    position: "absolute",
+    left: `${x - radius}px`,
+    top: `${y - radius}px`,
+    width: `${radius * 2}px`,
+    height: `${radius * 2}px`,
+    borderRadius: "9999px",
+    background: options.color,
+    opacity: String(options.opacity),
+    transform: "scale(0)",
+    pointerEvents: "none",
+    // The grow+fade motion itself lives in theme.css's selaras-ripple
+    // @keyframes (a shared, single definition rather than one per ripple
+    // instance) - this just points a specific instance at it with this
+    // click's own duration. Runs through the same global
+    // prefers-reduced-motion kill-switch every other animation/transition
+    // in this library already goes through (see theme.css), so it needs no
+    // separate reduced-motion handling of its own.
+    animation: `selaras-ripple ${options.duration}ms cubic-bezier(0, 0, 0.2, 1)`
+  });
+  span.addEventListener("animationend", () => span.remove());
+  host.appendChild(span);
+}
+function ensureContainment(host) {
+  const style = getComputedStyle(host);
+  if (style.position === "static")
+    host.style.position = "relative";
+  if (style.overflow === "visible")
+    host.style.overflow = "hidden";
+}
+export const vRipple = {
+  // The ripple itself is purely a client-side pointerdown effect with no
+  // server-renderable output (nothing about the host element's own SSR
+  // markup needs to change) - but Vue's server-renderer calls
+  // dir.getSSRProps(...) unconditionally on every directive bound in a
+  // template it's rendering, with no existence check first, so omitting
+  // this entirely crashes SSR outright ("dir.getSSRProps is not a
+  // function") rather than just skipping the directive.
+  getSSRProps() {
+    return void 0;
+  },
+  mounted(el, binding) {
+    const options = resolveOptions(binding.value);
+    if (!options)
+      return;
+    ensureContainment(el);
+    el._rippleHandler = (event) => spawnRipple(el, event, options);
+    el.addEventListener("pointerdown", el._rippleHandler);
+  },
+  beforeUnmount(el) {
+    if (el._rippleHandler) {
+      el.removeEventListener("pointerdown", el._rippleHandler);
+      delete el._rippleHandler;
+    }
+  }
+};

package/dist/runtime/internal/ColorPickerBody.d.vue.ts

@@ -0,0 +1,26 @@
+export interface ColorPickerBodyProps {
+    modelValue: string;
+    disabled?: boolean;
+    alpha?: boolean;
+    swatches?: string[];
+    placeholder?: string;
+    areaProps?: Record<string, unknown>;
+    thumbProps?: Record<string, unknown>;
+    sliderRootProps?: Record<string, unknown>;
+    trackProps?: Record<string, unknown>;
+    fieldProps?: Record<string, unknown>;
+    swatchListProps?: Record<string, unknown>;
+    swatchProps?: Record<string, unknown>;
+    swatchFillProps?: Record<string, unknown>;
+    swatchIndicatorProps?: Record<string, unknown>;
+}
+export interface ColorPickerBodyEmits {
+    'update:modelValue': [value: string];
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorPickerBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerBodyProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ColorPickerBody.vue

@@ -0,0 +1,111 @@
+<script setup>
+import {
+  ColorAreaArea,
+  ColorAreaRoot,
+  ColorAreaThumb,
+  ColorFieldInput,
+  ColorFieldRoot,
+  ColorSliderRoot,
+  ColorSliderThumb,
+  ColorSliderTrack,
+  ColorSwatchPickerItem,
+  ColorSwatchPickerItemIndicator,
+  ColorSwatchPickerItemSwatch,
+  ColorSwatchPickerRoot
+} from "reka-ui";
+import Icon from "../components/Icon.vue";
+import { useIcons } from "../composables/use-icons";
+defineProps({
+  modelValue: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  alpha: { type: Boolean, required: false },
+  swatches: { type: Array, required: false },
+  placeholder: { type: String, required: false },
+  areaProps: { type: Object, required: false },
+  thumbProps: { type: Object, required: false },
+  sliderRootProps: { type: Object, required: false },
+  trackProps: { type: Object, required: false },
+  fieldProps: { type: Object, required: false },
+  swatchListProps: { type: Object, required: false },
+  swatchProps: { type: Object, required: false },
+  swatchFillProps: { type: Object, required: false },
+  swatchIndicatorProps: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const icons = useIcons();
+function onUpdateColor(value) {
+  if (typeof value === "string")
+    emit("update:modelValue", value);
+}
+</script>
+
+<template>
+  <ColorAreaRoot
+    :model-value="modelValue"
+    color-space="hsb"
+    x-channel="saturation"
+    y-channel="brightness"
+    :disabled="disabled"
+    @update:model-value="onUpdateColor"
+  >
+    <template #default="{ style }">
+      <ColorAreaArea :style="style" v-bind="areaProps">
+        <ColorAreaThumb v-bind="thumbProps" />
+      </ColorAreaArea>
+    </template>
+  </ColorAreaRoot>
+
+  <ColorSliderRoot
+    :model-value="modelValue"
+    channel="hue"
+    :disabled="disabled"
+    v-bind="sliderRootProps"
+    @update:model-value="onUpdateColor"
+  >
+    <ColorSliderTrack v-bind="trackProps">
+      <ColorSliderThumb v-bind="thumbProps" />
+    </ColorSliderTrack>
+  </ColorSliderRoot>
+
+  <ColorSliderRoot
+    v-if="alpha"
+    :model-value="modelValue"
+    channel="alpha"
+    :disabled="disabled"
+    v-bind="sliderRootProps"
+    @update:model-value="onUpdateColor"
+  >
+    <ColorSliderTrack v-bind="trackProps">
+      <ColorSliderThumb v-bind="thumbProps" />
+    </ColorSliderTrack>
+  </ColorSliderRoot>
+
+  <ColorFieldRoot
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @update:model-value="onUpdateColor"
+  >
+    <ColorFieldInput v-bind="fieldProps" />
+  </ColorFieldRoot>
+
+  <ColorSwatchPickerRoot
+    v-if="swatches?.length"
+    :model-value="modelValue"
+    :disabled="disabled"
+    v-bind="swatchListProps"
+    @update:model-value="onUpdateColor"
+  >
+    <ColorSwatchPickerItem
+      v-for="hex in swatches"
+      :key="hex"
+      :value="hex"
+      v-bind="swatchProps"
+    >
+      <ColorSwatchPickerItemSwatch v-bind="swatchFillProps" />
+      <ColorSwatchPickerItemIndicator v-bind="swatchIndicatorProps">
+        <Icon :name="icons.check" class="size-3" />
+      </ColorSwatchPickerItemIndicator>
+    </ColorSwatchPickerItem>
+  </ColorSwatchPickerRoot>
+</template>