@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -1,16 +1,14 @@
-import { useState } from "#imports";
+import { useToastService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
 export function useToast() {
-  const toasts = useState("selaras-toasts", () => []);
-  const counter = useState("selaras-toast-counter", () => 0);
+  const service = useToastService();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
   function add(toast) {
-    const id = counter.value++;
-    toasts.value.push({ id, ...toast });
+    if (import.meta.server)
+      throw new Error("[useToast] add() is client-only. Render server-visible status content declaratively.");
+    const id = service.nextId();
+    service.toasts.value.push({ ...toast, id, _theme: snapshotTheme() });
     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 };
+  return { add, remove: service.remove };
 }

package/dist/runtime/default-color-metadata.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultSeedSurfaces: {
+    readonly light: "#fdfdfe";
+    readonly dark: "#090a0d";
+};

package/dist/runtime/default-color-metadata.js

@@ -0,0 +1,4 @@
+export const defaultSeedSurfaces = {
+  light: "#fdfdfe",
+  dark: "#090a0d"
+};

package/dist/runtime/default-colors.css

@@ -0,0 +1 @@
+@theme static{--color-selaras-blue-50:oklch(0.975 0.018 245);--color-selaras-blue-100:oklch(0.945 0.04 245);--color-selaras-blue-200:oklch(0.895 0.075 245);--color-selaras-blue-300:oklch(0.82 0.115 245);--color-selaras-blue-400:oklch(0.715 0.155 245);--color-selaras-blue-500:oklch(0.62 0.175 245);--color-selaras-blue-600:oklch(0.535 0.165 245);--color-selaras-blue-700:oklch(0.455 0.145 245);--color-selaras-blue-800:oklch(0.375 0.115 245);--color-selaras-blue-900:oklch(0.3 0.085 245);--color-selaras-blue-950:oklch(0.215 0.055 245);--color-selaras-gray-25:oklch(0.995 0.0015 280);--color-selaras-gray-50:oklch(0.98 0.003 280);--color-selaras-gray-100:oklch(0.945 0.0065 280);--color-selaras-gray-200:oklch(0.9 0.01 280);--color-selaras-gray-300:oklch(0.84 0.014 280);--color-selaras-gray-400:oklch(0.7 0.018 280);--color-selaras-gray-500:oklch(0.555 0.02 280);--color-selaras-gray-600:oklch(0.445 0.019 280);--color-selaras-gray-700:oklch(0.365 0.017 280);--color-selaras-gray-800:oklch(0.275 0.014 280);--color-selaras-gray-900:oklch(0.205 0.011 280);--color-selaras-gray-950:oklch(0.145 0.008 280);--color-selaras-green-50:oklch(0.982 0.018 155.826);--color-selaras-green-100:oklch(0.962 0.044 156.743);--color-selaras-green-200:oklch(0.925 0.084 155.995);--color-selaras-green-300:oklch(0.871 0.15 154.449);--color-selaras-green-400:oklch(0.792 0.209 151.711);--color-selaras-green-500:oklch(0.723 0.219 149.579);--color-selaras-green-600:oklch(0.627 0.194 149.214);--color-selaras-green-700:oklch(0.527 0.154 150.069);--color-selaras-green-800:oklch(0.448 0.119 151.328);--color-selaras-green-900:oklch(0.393 0.095 152.535);--color-selaras-green-950:oklch(0.266 0.065 152.934);--color-selaras-indigo-50:oklch(0.97 0.012 279.99);--color-selaras-indigo-100:oklch(0.93 0.028 279.99);--color-selaras-indigo-200:oklch(0.86 0.055 279.99);--color-selaras-indigo-300:oklch(0.78 0.1 279.99);--color-selaras-indigo-400:oklch(0.64 0.165 279.99);--color-selaras-indigo-500:oklch(0.4755 0.2026 279.99);--color-selaras-indigo-600:oklch(0.415 0.185 279.99);--color-selaras-indigo-700:oklch(0.355 0.158 279.99);--color-selaras-indigo-800:oklch(0.295 0.128 279.99);--color-selaras-indigo-900:oklch(0.235 0.095 279.99);--color-selaras-indigo-950:oklch(0.17 0.06 279.99);--color-selaras-plum-50:oklch(0.975 0.012 325);--color-selaras-plum-100:oklch(0.945 0.03 325);--color-selaras-plum-200:oklch(0.89 0.06 325);--color-selaras-plum-300:oklch(0.81 0.1 325);--color-selaras-plum-400:oklch(0.69 0.145 325);--color-selaras-plum-500:oklch(0.565 0.175 325);--color-selaras-plum-600:oklch(0.495 0.165 325);--color-selaras-plum-700:oklch(0.42 0.145 325);--color-selaras-plum-800:oklch(0.345 0.115 325);--color-selaras-plum-900:oklch(0.275 0.085 325);--color-selaras-plum-950:oklch(0.19 0.055 325);--color-selaras-red-50:oklch(0.971 0.013 17.38);--color-selaras-red-100:oklch(0.936 0.032 17.717);--color-selaras-red-200:oklch(0.885 0.062 18.334);--color-selaras-red-300:oklch(0.808 0.114 19.571);--color-selaras-red-400:oklch(0.704 0.191 22.216);--color-selaras-red-500:oklch(0.637 0.237 25.331);--color-selaras-red-600:oklch(0.577 0.245 27.325);--color-selaras-red-700:oklch(0.505 0.213 27.518);--color-selaras-red-800:oklch(0.444 0.177 26.899);--color-selaras-red-900:oklch(0.396 0.141 25.723);--color-selaras-red-950:oklch(0.258 0.092 26.042);--color-selaras-yellow-50:oklch(0.987 0.026 102.212);--color-selaras-yellow-100:oklch(0.973 0.071 103.193);--color-selaras-yellow-200:oklch(0.945 0.129 101.54);--color-selaras-yellow-300:oklch(0.905 0.182 98.111);--color-selaras-yellow-400:oklch(0.852 0.199 91.936);--color-selaras-yellow-500:oklch(0.795 0.184 86.047);--color-selaras-yellow-600:oklch(0.681 0.162 75.834);--color-selaras-yellow-700:oklch(0.554 0.135 66.442);--color-selaras-yellow-800:oklch(0.476 0.114 61.907);--color-selaras-yellow-900:oklch(0.421 0.095 57.708);--color-selaras-yellow-950:oklch(0.286 0.066 53.813)}@layer theme{:root,[data-selaras-theme]{--_selaras-default-surface-canvas:#fff;--_selaras-default-surface-default:--theme(--color-selaras-gray-25);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-50);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-950);--_selaras-default-text-default:--theme(--color-selaras-gray-950);--_selaras-default-text-muted:--theme(--color-selaras-gray-600);--_selaras-default-text-inverted:--theme(--color-selaras-gray-50);--_selaras-default-border-default:--theme(--color-selaras-gray-200);--_selaras-default-border-muted:--theme(--color-selaras-gray-100);--_selaras-default-border-hover:--theme(--color-selaras-gray-300)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--_selaras-default-surface-canvas:#0c0c0d;--_selaras-default-surface-default:--theme(--color-selaras-gray-950);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-900);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-50);--_selaras-default-text-default:--theme(--color-selaras-gray-50);--_selaras-default-text-muted:--theme(--color-selaras-gray-400);--_selaras-default-text-inverted:--theme(--color-selaras-gray-950);--_selaras-default-border-default:--theme(--color-selaras-gray-800);--_selaras-default-border-muted:--theme(--color-selaras-gray-900);--_selaras-default-border-hover:--theme(--color-selaras-gray-700)}}

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

@@ -13,6 +13,7 @@ export interface ColorPickerBodyProps {
     swatchProps?: Record<string, unknown>;
     swatchFillProps?: Record<string, unknown>;
     swatchIndicatorProps?: Record<string, unknown>;
+    colorRoleMarker?: string;
 }
 export interface ColorPickerBodyEmits {
     'update:modelValue': [value: string];

package/dist/runtime/internal/ColorPickerBody.vue

@@ -15,6 +15,7 @@ import {
 } from "reka-ui";
 import Icon from "../components/Icon.vue";
 import { useIcons } from "../composables/use-icons";
+import { useThemeBindings } from "../utils/ui";
 defineProps({
   modelValue: { type: String, required: true },
   disabled: { type: Boolean, required: false },
@@ -29,10 +30,12 @@ defineProps({
   swatchListProps: { type: Object, required: false },
   swatchProps: { type: Object, required: false },
   swatchFillProps: { type: Object, required: false },
-  swatchIndicatorProps: { type: Object, required: false }
+  swatchIndicatorProps: { type: Object, required: false },
+  colorRoleMarker: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const icons = useIcons();
+const themeBindings = useThemeBindings();
 function onUpdateColor(value) {
   if (typeof value === "string")
     emit("update:modelValue", value);
@@ -41,6 +44,10 @@ function onUpdateColor(value) {
 
 <template>
   <ColorAreaRoot
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :style="themeBindings.style"
+    :data-selaras-color="colorRoleMarker"
     :model-value="modelValue"
     color-space="hsb"
     x-channel="saturation"
@@ -56,6 +63,10 @@ function onUpdateColor(value) {
   </ColorAreaRoot>
 
   <ColorSliderRoot
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :style="themeBindings.style"
+    :data-selaras-color="colorRoleMarker"
     :model-value="modelValue"
     channel="hue"
     :disabled="disabled"
@@ -69,6 +80,10 @@ function onUpdateColor(value) {
 
   <ColorSliderRoot
     v-if="alpha"
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :style="themeBindings.style"
+    :data-selaras-color="colorRoleMarker"
     :model-value="modelValue"
     channel="alpha"
     :disabled="disabled"
@@ -81,6 +96,10 @@ function onUpdateColor(value) {
   </ColorSliderRoot>
 
   <ColorFieldRoot
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :style="themeBindings.style"
+    :data-selaras-color="colorRoleMarker"
     :model-value="modelValue"
     :placeholder="placeholder"
     :disabled="disabled"
@@ -91,6 +110,10 @@ function onUpdateColor(value) {
 
   <ColorSwatchPickerRoot
     v-if="swatches?.length"
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :style="themeBindings.style"
+    :data-selaras-color="colorRoleMarker"
     :model-value="modelValue"
     :disabled="disabled"
     v-bind="swatchListProps"

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

@@ -13,6 +13,7 @@ export interface ColorPickerBodyProps {
     swatchProps?: Record<string, unknown>;
     swatchFillProps?: Record<string, unknown>;
     swatchIndicatorProps?: Record<string, unknown>;
+    colorRoleMarker?: string;
 }
 export interface ColorPickerBodyEmits {
     'update:modelValue': [value: string];

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

@@ -1,16 +1,24 @@
 import type { VariantProps } from 'tailwind-variants';
-import type { SelectItems, SelectOption } from '../composables/use-combobox-select.js';
 import type { SelectThemeSlots } from '../theme/select.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
+import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
 type SelectVariants = VariantProps<typeof selectTheme>;
 export interface ComboboxSelectBaseProps {
     id?: string;
     name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
     items: SelectItems;
     valueKey?: string;
     labelKey?: string;
-    modelValue?: string | string[];
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
+    modelValue?: string | number | (string | number)[];
+    /** Initial uncontrolled selection and native form reset target. */
+    defaultValue?: string | number | (string | number)[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -22,10 +30,11 @@ export interface ComboboxSelectBaseProps {
     loading?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    required?: boolean;
     size?: SelectVariants['size'];
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: SelectVariants['color'];
+    color?: ColorRole;
     clearable?: boolean;
     dropdown?: boolean;
     creatable?: boolean;
@@ -35,30 +44,33 @@ export interface ComboboxSelectBaseProps {
     resetSearchTermOnSelect?: boolean;
     /** Shows a small pointer triangle connecting the panel to its trigger. */
     arrow?: boolean;
-    /** Below 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`) rather than automatic, so an existing usage's look never changes without asking for it. */
-    mobileModal?: boolean;
+    /** Opts into the component's accessible small-screen presentation. */
+    adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
 export interface ComboboxSelectBaseEmits {
-    'update:modelValue': [value: string | string[] | undefined];
+    'update:open': [value: boolean];
+    'update:modelValue': [value: string | number | (string | number)[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_138: {
-    item: SelectOption;
-}, __VLS_158: {
-    selected: import("../composables/use-combobox-select.js").ResolvedOption | undefined;
-}, __VLS_169: {}, __VLS_176: {}, __VLS_183: {}, __VLS_211: {}, __VLS_214: {}, __VLS_217: {}, __VLS_220: {}, __VLS_223: {
-    item: SelectOption;
-}, __VLS_226: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_229: {}, __VLS_260: {}, __VLS_263: {}, __VLS_266: {}, __VLS_269: {}, __VLS_272: {
-    item: SelectOption;
-}, __VLS_275: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_278: {};
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_160: {
+    selected: import("./combobox-select.js").ResolvedOption | undefined;
+}, __VLS_171: {}, __VLS_178: {}, __VLS_185: {}, __VLS_213: {}, __VLS_216: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_228: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_274: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_267>]?: (props: typeof __VLS_268) => any;
+} & {
     item?: (props: typeof __VLS_43) => any;
 } & {
     'clear-icon'?: (props: typeof __VLS_94) => any;
@@ -67,49 +79,41 @@ type __VLS_Slots = {} & {
 } & {
     'dropdown-icon'?: (props: typeof __VLS_116) => any;
 } & {
-    item?: (props: typeof __VLS_138) => any;
-} & {
-    value?: (props: typeof __VLS_158) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_169) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_176) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_183) => any;
-} & {
-    header?: (props: typeof __VLS_211) => any;
+    item?: (props: typeof __VLS_140) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_214) => any;
+    value?: (props: typeof __VLS_160) => any;
 } & {
-    empty?: (props: typeof __VLS_217) => any;
+    'clear-icon'?: (props: typeof __VLS_171) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_220) => any;
+    'loading-icon'?: (props: typeof __VLS_178) => any;
 } & {
-    item?: (props: typeof __VLS_223) => any;
+    'dropdown-icon'?: (props: typeof __VLS_185) => any;
 } & {
-    group?: (props: typeof __VLS_226) => any;
+    header?: (props: typeof __VLS_213) => any;
 } & {
-    footer?: (props: typeof __VLS_229) => any;
+    'filter-icon'?: (props: typeof __VLS_216) => any;
 } & {
-    header?: (props: typeof __VLS_260) => any;
+    empty?: (props: typeof __VLS_219) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_263) => any;
+    'empty-filter'?: (props: typeof __VLS_222) => any;
 } & {
-    empty?: (props: typeof __VLS_266) => any;
+    item?: (props: typeof __VLS_225) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_269) => any;
+    group?: (props: typeof __VLS_228) => any;
 } & {
-    item?: (props: typeof __VLS_272) => any;
+    footer?: (props: typeof __VLS_231) => any;
 } & {
-    group?: (props: typeof __VLS_275) => any;
+    item?: (props: typeof __VLS_271) => any;
 } & {
-    footer?: (props: typeof __VLS_278) => any;
+    group?: (props: typeof __VLS_274) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;