@sewadah/selaras 0.1.1 → 0.3.0

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;
@@ -116,27 +119,34 @@ function buildRailPath(links, height) {
     const x2 = RAIL_X_OUTER + index * indentStep;
     return Math.round(clamp(x2, RAIL_X_OUTER, RAIL_X_INNER_MAX));
   };
+  const curveHalf = RAIL_CURVE_SPAN / 2;
   let x = xForDepth(items[0]?.depth ?? baseDepth);
+  let yPath = 0;
   let yPrev = 0;
   let d = `M ${x} 0`;
   for (const item of items) {
     const y = clamp(item.y, 0, height);
     const xNext = xForDepth(item.depth);
     if (xNext === x) {
-      if (y > yPrev)
+      if (y > yPath) {
         d += ` L ${x} ${y}`;
-      yPrev = Math.max(yPrev, y);
+        yPath = y;
+      }
+      yPrev = y;
       continue;
     }
-    const y0 = clamp(y - RAIL_CURVE_SPAN, yPrev, height);
-    const midY = (y0 + y) / 2;
-    if (y0 > yPrev)
+    const midY = (yPrev + y) / 2;
+    const y0 = clamp(midY - curveHalf, yPath, y);
+    const y1 = clamp(midY + curveHalf, y0, y);
+    const controlY = (y0 + y1) / 2;
+    if (y0 > yPath)
       d += ` L ${x} ${y0}`;
-    d += ` C ${x} ${midY} ${xNext} ${midY} ${xNext} ${y}`;
+    d += ` C ${x} ${controlY} ${xNext} ${controlY} ${xNext} ${y1}`;
     x = xNext;
+    yPath = y1;
     yPrev = y;
   }
-  if (height > yPrev)
+  if (height > yPath)
     d += ` L ${x} ${height}`;
   return d;
 }
@@ -189,7 +199,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 +214,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 +247,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 +263,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. */

package/dist/runtime/components/ContextMenu.vue

@@ -2,7 +2,7 @@
 import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger } from "reka-ui";
 import { computed } from "vue";
 import { contextMenuTheme } from "../theme/context-menu";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 const props = defineProps({
   items: { type: Array, required: true },
@@ -10,6 +10,7 @@ const props = defineProps({
 });
 defineSlots();
 const theme = useComponentTheme("contextMenu", contextMenuTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 function itemPropsFor(item) {
@@ -27,7 +28,7 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal>
-      <ContextMenuContent v-bind="contentProps">
+      <ContextMenuContent :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <template v-for="(group, groupIndex) in items" :key="groupIndex">
           <ContextMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
           <ContextMenuItem

package/dist/runtime/components/DashboardSidebar.vue

@@ -103,7 +103,7 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
     overlay reads differently from an inline panel anyway, so there's
     no real reason to force the split-pane's exact classes onto it.
   -->
-  <Drawer v-else v-model:open="mobileOpen" side="left" :handle="false" :ui="{ content: 'bg-[var(--ui-bg-elevated)]' }">
+  <Drawer v-else v-model:open="mobileOpen" side="left" :handle="false" :ui="{ content: 'bg-[var(--selaras-resolved-surface-elevated)]' }">
     <template v-if="$slots.header" #header>
       <slot name="header" :is-collapsed="false" />
     </template>

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

@@ -8,6 +8,7 @@ export interface DashboardSidebarToggleSlots {
     default?: (props: {
         toggle: () => void;
         isCollapsed: boolean;
+        attrs: Record<string, unknown>;
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -6,6 +6,7 @@ import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
 import { applyClassPrefix } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   icon: { type: String, required: false }
 });
@@ -20,8 +21,9 @@ const messages = useMessages();
     v-if="dashboard?.toggleSidebar.value"
     :toggle="dashboard.toggleSidebar.value"
     :is-collapsed="dashboard.isSidebarCollapsed.value"
+    :attrs="$attrs"
   >
-    <Button variant="ghost" color="neutral" :aria-label="messages.toggleSidebar" @click="dashboard.toggleSidebar.value?.()">
+    <Button variant="ghost" color="neutral" :aria-label="messages.toggleSidebar" v-bind="$attrs" @click="dashboard.toggleSidebar.value?.()">
       <!--
         A slot override (not Button's own `icon` prop + `:ui.leadingIcon`) -
         that `:ui` object would collide with a consumer's own fallthrough

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

@@ -8,6 +8,7 @@ export interface DashboardSidebarToggleSlots {
     default?: (props: {
         toggle: () => void;
         isCollapsed: boolean;
+        attrs: Record<string, unknown>;
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,18 +1,24 @@
 import type { DateValue } from '@internationalized/date';
 import type { DateRange } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { DatePickerThemeSlots } from '../theme/date-picker.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { Time } from '@internationalized/date';
 import { datePickerTheme } from '../theme/date-picker.js';
 type DatePickerVariants = VariantProps<typeof datePickerTheme>;
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface DatePickerProps {
     id?: string;
     name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
     /** A single DateValue, Reka's own `{ start?, end? }` DateRange shape when `range` is set, or a bare date-less Time when `timeOnly` is set - Vue props can't express a type that depends on a sibling prop's value, so this stays a plain union documented here rather than enforced by the type checker. */
     modelValue?: DateValue | DateRange | Time;
+    /** Initial uncontrolled value and native form-reset target. */
+    defaultValue?: DateValue | DateRange | Time;
     /** Switches to picking a start+end pair instead of one date - a real fork in which Reka primitive family renders (RangeCalendar/DateRangePicker vs Calendar/DatePicker), not just a different modelValue shape. */
     range?: boolean;
     /** Drops the date entirely - just a time-of-day picker. modelValue becomes a bare `Time` (no date component at all, not a DateValue). A third top-level mode alongside `range`; every date-grid-specific prop below (minValue/maxValue/isDateUnavailable/isDateDisabled/numberOfMonths/pagedNavigation/weekStartsOn/weekdayFormat/fixedWeeks/view) is simply inert here. `granularity` still applies ('hour'/'minute' only - defaults to 'minute' for a dedicated time picker). */
@@ -62,17 +68,18 @@ export interface DatePickerProps {
     invalid?: boolean;
     clearable?: boolean;
     /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     size?: DatePickerVariants['size'];
     /** Shows a small pointer triangle connecting the panel to its trigger. */
     arrow?: boolean;
-    /** Below 768px viewport width, presents the calendar 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 calendar's accessible small-screen modal presentation. It is selected when the calendar opens and held until close. */
+    adaptive?: boolean;
     ui?: UiProp<DatePickerThemeSlots>;
 }
 export interface DatePickerEmits {
+    'update:open': [value: boolean];
     'update:modelValue': [value: DateValue | DateRange | Time | undefined];
     'update:view': [view: 'date' | 'month' | 'year'];
 }
@@ -92,17 +99,17 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_148: {}, __VLS_186: {}, __VLS_206: {}, __VLS_226: {}, __VLS_242: {}, __VLS_268: {}, __VLS_291: {}, __VLS_329: {}, __VLS_349: {}, __VLS_369: {}, __VLS_385: {}, __VLS_405: {
+}, __VLS_148: {}, __VLS_187: {}, __VLS_207: {}, __VLS_227: {}, __VLS_243: {}, __VLS_269: {}, __VLS_292: {}, __VLS_330: {}, __VLS_350: {}, __VLS_370: {}, __VLS_386: {}, __VLS_406: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_408: {}, __VLS_431: {
+}, __VLS_409: {}, __VLS_432: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_434: {};
+}, __VLS_435: {};
 type __VLS_Slots = {} & {
     'clear-icon'?: (props: typeof __VLS_43) => any;
 } & {
@@ -120,39 +127,41 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_148) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_186) => any;
+    'clear-icon'?: (props: typeof __VLS_187) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_206) => any;
+    'trigger-icon'?: (props: typeof __VLS_207) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_226) => any;
+    'trigger-icon'?: (props: typeof __VLS_227) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_242) => any;
+    'clear-icon'?: (props: typeof __VLS_243) => any;
 } & {
-    footer?: (props: typeof __VLS_268) => any;
+    footer?: (props: typeof __VLS_269) => any;
 } & {
-    footer?: (props: typeof __VLS_291) => any;
+    footer?: (props: typeof __VLS_292) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_329) => any;
+    'clear-icon'?: (props: typeof __VLS_330) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_349) => any;
+    'trigger-icon'?: (props: typeof __VLS_350) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_369) => any;
+    'trigger-icon'?: (props: typeof __VLS_370) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_385) => any;
+    'clear-icon'?: (props: typeof __VLS_386) => any;
 } & {
-    day?: (props: typeof __VLS_405) => any;
+    day?: (props: typeof __VLS_406) => any;
 } & {
-    footer?: (props: typeof __VLS_408) => any;
+    footer?: (props: typeof __VLS_409) => any;
 } & {
-    day?: (props: typeof __VLS_431) => any;
+    day?: (props: typeof __VLS_432) => any;
 } & {
-    footer?: (props: typeof __VLS_434) => any;
+    footer?: (props: typeof __VLS_435) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;
+    "update:open": (value: boolean) => any;
     "update:view": (view: "month" | "year" | "date") => any;
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: DateValue | DateRange | Time | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:view"?: ((view: "month" | "year" | "date") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;