@sewadah/selaras 0.2.0 → 0.3.1

package/README.md

@@ -96,6 +96,26 @@ Every component is now auto-imported and ready to use:
 </SButton>
 ```
 
+## Theming
+
+Selaras is CSS-first for design values.
+
+For normal theme changes, override the public `--selaras-*` CSS variables or
+the Selaras foundation palettes in Tailwind `@theme`. You do not need
+`nuxt.config.ts` to change built-in roles such as `primary`, `warning`,
+`danger`, or `neutral`.
+
+Use `selaras.theme.colors` in `nuxt.config.ts` when you must register a new
+role name, such as `tertiary`, or when you intentionally want to author a
+complete build-time recipe.
+
+`defineColorFromSeed()` is an optional accessibility-oriented generator. The
+supplied color remains the exact resting solid fill; Selaras derives readable
+content, interaction states, text, borders, focus, and essential indicators
+around it. Use `defineColor()` when you need to author every leaf yourself.
+
+See the full [Theming guide](./docs/content/overview/theming.md).
+
 ## Contribution
 
 <details>
@@ -105,14 +125,14 @@ Every component is now auto-imported and ready to use:
   # Install dependencies
   npm install
 
-  # Generate type stubs
-  npm run dev:prepare
+  # Generate type stubs and prepare the docs site
+  npm run docs:prepare
 
-  # Develop with the playground (component docs site)
-  npm run dev
+  # Develop with the docs site (documentation + component showcase)
+  npm run docs:dev
 
-  # Build the playground
-  npm run dev:build
+  # Generate the static docs site
+  npm run docs:generate
 
   # Type-check
   npm run test:types
@@ -128,8 +148,17 @@ Every component is now auto-imported and ready to use:
   # Requires Bun for the temporary consumer's dependency installation
   npm run test:compat
 
-  # Release new version
+  # Release new versions (selaras, docs layer, or both)
   npm run release
+  npm run release:selaras
+  npm run release:docs
+
+  # Each package has its own version stream, so one run can bump them at
+  # different levels - Selaras major alongside a docs patch, for example.
+  # The release workflow exposes per-package bump/version inputs for this.
+  # Locally, drive each half through its own env:
+  RELEASE_BUMP=major npm run release:selaras
+  RELEASE_BUMP=patch npm run release:docs
   ```
 
 </details>

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -6,19 +6,19 @@ import { builtinColorNames, createColorRegistry, generateColorRoleCss } from '..
 const foundationPaletteByRole = {
   primary: "indigo",
   secondary: "plum",
-  success: "emerald",
+  success: "green",
   info: "blue",
-  warning: "amber",
+  warning: "yellow",
   danger: "red",
   neutral: "gray"
 };
 const fillShadesByRole = {
   primary: { light: [500, 600, 700], dark: [400, 300, 200] },
   secondary: { light: [600, 700, 800], dark: [400, 300, 200] },
-  success: { light: [700, 800, 900], dark: [500, 400, 300] },
+  success: { light: [500, 600, 700], dark: [500, 400, 300] },
   info: { light: [600, 700, 800], dark: [500, 400, 300] },
-  warning: { light: [700, 800, 900], dark: [500, 400, 300] },
-  danger: { light: [600, 700, 800], dark: [500, 400, 300] },
+  warning: { light: [500, 600, 700], dark: [500, 400, 300] },
+  danger: { light: [500, 600, 700], dark: [500, 400, 300] },
   neutral: { light: [950, 900, 800], dark: [200, 100, 50] }
 };
 function createBuiltinColorRegistry(classPrefix) {
@@ -26,29 +26,35 @@ function createBuiltinColorRegistry(classPrefix) {
   const recipes = Object.fromEntries(builtinColorNames.map((role) => {
     const mode = (dark) => {
       const neutral = role === "neutral";
-      const warning = role === "warning";
+      const brightIntent = role === "success" || role === "warning" || role === "danger";
       const modeName = dark ? "dark" : "light";
       const [fillShade, hoverShade, pressedShade] = fillShadesByRole[role][modeName];
-      const textShade = warning || role === "success" ? 800 : role === "info" || role === "danger" ? 700 : fillShade;
+      const textShade = brightIntent ? 800 : role === "info" ? 700 : fillShade;
       const fill = foundation(role, fillShade);
-      const hover = foundation(role, hoverShade);
-      const pressed = foundation(role, pressedShade);
+      const hover = brightIntent ? `color-mix(in oklab, ${fill} ${!dark && role === "danger" ? 98 : 94}%, ${dark ? "white" : "black"})` : foundation(role, hoverShade);
+      const pressed = brightIntent ? `color-mix(in oklab, ${fill} ${!dark && role === "danger" ? 96 : 88}%, ${dark ? "white" : "black"})` : foundation(role, pressedShade);
       const text = foundation(role, neutral ? dark ? 50 : 950 : dark ? 300 : textShade);
-      const subtle = neutral ? foundation(role, dark ? 900 : 100) : dark ? `color-mix(in oklab, ${fill} 24%, var(--selaras-resolved-surface-default))` : foundation(role, 100);
+      const subtle = neutral ? foundation(role, dark ? 900 : 100) : dark ? `color-mix(in oklab, ${fill} ${brightIntent ? 16 : 24}%, var(--selaras-resolved-surface-default))` : foundation(role, brightIntent ? 50 : 100);
+      const indicatorShade = dark ? 400 : role === "success" || role === "warning" ? 700 : role === "danger" ? 500 : fillShade;
+      const indicator = neutral ? foundation(role, 500) : foundation(role, indicatorShade);
       return {
         fill,
         fillHover: hover,
         fillPressed: pressed,
-        onFill: foundation("neutral", dark ? 950 : 25),
+        // The vivid light-mode intent fills intentionally use white text.
+        // Dark mode restores the shared dark foreground on its lighter fills.
+        // Consumers can override onFill in their own recipe.
+        onFill: brightIntent && !dark ? "#ffffff" : foundation("neutral", dark ? 950 : 25),
+        indicator,
         subtle,
-        subtleHover: dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
-        subtlePressed: dark ? `color-mix(in oklab, ${foundation(role, 500)} 40%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 90%, ${text})`,
+        subtleHover: brightIntent ? `color-mix(in oklab, ${subtle} 96%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
+        subtlePressed: brightIntent ? `color-mix(in oklab, ${subtle} 92%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 40%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 90%, ${text})`,
         onSubtle: text,
         text,
         textHover: foundation(role, neutral ? dark ? 100 : 900 : dark ? 200 : Math.min(textShade + 100, 950)),
         textPressed: foundation(role, neutral ? dark ? 200 : 800 : dark ? 100 : Math.min(textShade + 200, 950)),
-        border: neutral ? foundation(role, 500) : fill,
-        focus: text
+        border: indicator,
+        focus: brightIntent ? indicator : text
       };
     };
     return [role, { light: mode(false), dark: mode(true) }];
@@ -132,6 +138,16 @@ const module$1 = defineNuxtModule({
       from: resolver.resolve("./runtime/directives/ripple"),
       meta: { vueDirective: true }
     });
+    addImports({
+      name: "vMask",
+      from: resolver.resolve("./runtime/directives/mask"),
+      meta: { vueDirective: true }
+    });
+    addImports({
+      name: "vHotkey",
+      from: resolver.resolve("./runtime/directives/hotkey"),
+      meta: { vueDirective: true }
+    });
     addTemplate({
       filename: "selaras-class-prefix.mjs",
       getContents: () => `export const classPrefix = ${JSON.stringify(options.classPrefix ?? null)}

package/dist/runtime/components/Autocomplete.vue

@@ -30,7 +30,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
-  arrow: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });

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

@@ -8,7 +8,7 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role indicator. Supply an accessible name when no label is visible. */
     dot?: boolean;
     color?: ColorRole;
     variant?: BadgeVariants['variant'];

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

@@ -8,7 +8,7 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role indicator. Supply an accessible name when no label is visible. */
     dot?: boolean;
     color?: ColorRole;
     variant?: BadgeVariants['variant'];

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,163 @@
+<script setup>
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot
+} from "reka-ui";
+import { computed, getCurrentInstance, useId, useSlots } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { calendarTheme } from "../theme/calendar";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  defaultValue: { type: Object, required: false },
+  placeholder: { type: Object, required: false },
+  defaultPlaceholder: { type: Object, required: false },
+  minValue: { type: Object, required: false },
+  maxValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  calendarLabel: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  activeColor: { type: null, required: false, default: "primary" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:placeholder"]);
+defineSlots();
+const slots = useSlots();
+const instance = getCurrentInstance();
+const detailsId = useId();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("calendar", calendarTheme);
+const ui = computed(() => theme.value());
+const color = computed(() => resolveRegisteredColorRole(props.color, "neutral"));
+const activeColor = computed(() => resolveRegisteredColorRole(props.activeColor, "primary"));
+const rootModelValue = computed(() => {
+  const vnodeProps = instance.vnode.props ?? {};
+  const isControlled = Object.hasOwn(vnodeProps, "modelValue") || Object.hasOwn(vnodeProps, "model-value");
+  return isControlled && props.modelValue === void 0 ? null : props.modelValue;
+});
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const headingProps = computed(() => resolveSlot(ui.value.heading, props.ui?.heading));
+const gridsProps = computed(() => resolveSlot(ui.value.grids, props.ui?.grids));
+const gridProps = computed(() => resolveSlot(ui.value.grid, props.ui?.grid));
+const gridHeadProps = computed(() => resolveSlot(ui.value.gridHead, props.ui?.gridHead));
+const headCellProps = computed(() => resolveSlot(ui.value.headCell, props.ui?.headCell));
+const cellProps = computed(() => resolveSlot(ui.value.cell, props.ui?.cell));
+const dayButtonProps = computed(() => resolveSlot(ui.value.dayButton, props.ui?.dayButton));
+const dayDetailsProps = computed(() => resolveSlot(ui.value.dayDetails, props.ui?.dayDetails));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
+const dayDetailsId = (month, date) => `${detailsId}-${month.toString()}-${date.toString()}`;
+</script>
+
+<template>
+  <CalendarRoot
+    :model-value="rootModelValue"
+    :default-value="defaultValue"
+    :placeholder="placeholder"
+    :default-placeholder="defaultPlaceholder"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="isDateDisabled"
+    :is-date-unavailable="isDateUnavailable"
+    :locale="locale"
+    :number-of-months="numberOfMonths"
+    :paged-navigation="pagedNavigation"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="weekdayFormat"
+    :fixed-weeks="fixedWeeks"
+    :disable-days-outside-current-view="disableDaysOutsideCurrentView"
+    :prevent-deselect="preventDeselect"
+    :disabled="disabled"
+    :readonly="readonly"
+    :initial-focus="initialFocus"
+    :calendar-label="calendarLabel"
+    :data-selaras-color="activeColor"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+    @update:placeholder="(value) => emit('update:placeholder', value)"
+  >
+    <template #default="{ grid, weekDays }">
+      <CalendarHeader v-bind="headerProps">
+        <CalendarPrev as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronLeft" :aria-label="messages.previousMonth" :ui="navButtonUi" />
+        </CalendarPrev>
+        <CalendarHeading v-bind="headingProps" />
+        <CalendarNext as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronRight" :aria-label="messages.nextMonth" :ui="navButtonUi" />
+        </CalendarNext>
+      </CalendarHeader>
+
+      <div v-bind="gridsProps">
+        <CalendarGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
+          <CalendarGridHead v-bind="gridHeadProps">
+            <CalendarGridRow>
+              <CalendarHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
+                {{ day }}
+              </CalendarHeadCell>
+            </CalendarGridRow>
+          </CalendarGridHead>
+          <CalendarGridBody>
+            <CalendarGridRow v-for="(week, weekIndex) in month.rows" :key="weekIndex">
+              <CalendarCell v-for="date in week" :key="date.toString()" :date="date" v-bind="cellProps">
+                <CalendarCellTrigger
+                  v-slot="dayState"
+                  :day="date"
+                  :month="month.value"
+                  as-child
+                >
+                  <Button
+                    :variant="dayState.selected ? 'solid' : 'ghost'"
+                    :color="dayState.selected ? activeColor : color"
+                    size="sm"
+                    square
+                    :disabled="dayState.disabled"
+                    :aria-describedby="slots['day-details'] ? dayDetailsId(month.value, date) : void 0"
+                    v-bind="dayButtonProps"
+                  >
+                    <slot name="day" :date="date" :month="month.value" v-bind="dayState">
+                      {{ dayState.dayValue }}
+                    </slot>
+                  </Button>
+                </CalendarCellTrigger>
+                <div v-if="slots['day-details']" :id="dayDetailsId(month.value, date)" v-bind="dayDetailsProps">
+                  <slot name="day-details" :date="date" :month="month.value" />
+                </div>
+              </CalendarCell>
+            </CalendarGridRow>
+          </CalendarGridBody>
+        </CalendarGrid>
+      </div>
+      <div v-if="slots.footer" v-bind="footerProps">
+        <slot name="footer" />
+      </div>
+    </template>
+  </CalendarRoot>
+</template>

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Callout.vue

@@ -24,6 +24,13 @@ const iconName = computed(() => {
     return void 0;
   return props.icon ?? icons.value[DEFAULT_ICON[props.type ?? "note"]];
 });
+const colorForType = {
+  note: "info",
+  tip: "success",
+  warning: "warning",
+  danger: "danger"
+};
+const effectiveColor = computed(() => colorForType[props.type ?? "note"]);
 const theme = useComponentTheme("callout", calloutTheme);
 const ui = computed(() => theme.value({ type: props.type }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
@@ -33,7 +40,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 </script>
 
 <template>
-  <div v-bind="rootProps" role="note">
+  <div v-bind="rootProps" data-selaras-callout :data-selaras-color="effectiveColor" role="note">
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
     <div v-bind="contentProps">
       <p v-if="title || $slots.title" v-bind="titleProps">
@@ -45,3 +52,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
     </div>
   </div>
 </template>
+
+<style scoped>
+[data-selaras-callout]:before{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
+</style>

package/dist/runtime/components/CodeGroup.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { cloneVNode, Comment, computed, Fragment, ref, Text, useSlots } from "vue";
 import { useMessages } from "../composables/use-messages";
+import { resolveFileIcon } from "../utils/file-icons";
+import ProsePre from "./ProsePre.vue";
 import Tabs from "./Tabs.vue";
 const slots = useSlots();
 const messages = useMessages();
@@ -22,15 +24,23 @@ function labelFor(child, index) {
   const props = child.props ?? {};
   return props.filename || props.language || messages.value.codeTabFallback(index + 1);
 }
+function iconFor(child) {
+  const props = child.props ?? {};
+  return props.icon ?? resolveFileIcon(props.language, props.filename);
+}
+function cloneForTab(child) {
+  return cloneVNode(child, child.type === ProsePre ? { showHeader: false } : void 0);
+}
 const tabItems = computed(() => children.value.map((child, index) => ({
   label: labelFor(child, index),
-  value: String(index)
+  value: String(index),
+  icon: iconFor(child)
 })));
 const activeTab = ref("0");
 </script>
 
 <template>
-  <Tabs v-model="activeTab" :items="tabItems">
+  <Tabs v-model="activeTab" :items="tabItems" variant="pill">
     <template v-for="(child, index) in children" :key="index" #[String(index)]>
       <!--
         cloneVNode is required, not optional: this vnode was captured from
@@ -40,7 +50,7 @@ const activeTab = ref("0");
         hydration-shape mismatch (Fragment vs text) the first time this
         panel mounts. Cloning gives it a fresh identity for its new spot.
       -->
-      <component :is="() => cloneVNode(child)" />
+      <component :is="() => cloneForTab(child)" />
     </template>
   </Tabs>
 </template>

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {

package/dist/runtime/components/CodeTree.vue

@@ -21,6 +21,56 @@ function findFirstFile(nodes) {
   return void 0;
 }
 const selected = ref(findFirstFile(props.items));
+const highlightedCode = ref("");
+const languageByExtension = {
+  bash: "bash",
+  cjs: "javascript",
+  css: "css",
+  htm: "html",
+  html: "html",
+  js: "javascript",
+  jsx: "jsx",
+  json: "json",
+  jsonc: "jsonc",
+  md: "markdown",
+  mjs: "javascript",
+  mts: "typescript",
+  sh: "bash",
+  ts: "typescript",
+  tsx: "tsx",
+  vue: "vue",
+  yaml: "yaml",
+  yml: "yaml"
+};
+function languageFor(file) {
+  if (file.language)
+    return file.language;
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return languageByExtension[extension] ?? "text";
+}
+watch(selected, async (file, _previous, onCleanup) => {
+  let stale = false;
+  onCleanup(() => {
+    stale = true;
+  });
+  highlightedCode.value = "";
+  if (!file?.code)
+    return;
+  try {
+    const { codeToHtml } = await import("shiki");
+    const html = await codeToHtml(file.code, {
+      lang: languageFor(file),
+      themes: { light: "github-light", dark: "github-dark" },
+      defaultColor: false
+    });
+    if (stale)
+      return;
+    highlightedCode.value = html.match(/<code(?:\s[^>]*)?>([\s\S]*?)<\/code>/)?.[1] ?? "";
+  } catch {
+    if (!stale)
+      highlightedCode.value = "";
+  }
+}, { immediate: true });
 watch(() => props.items, () => {
   selected.value = findFirstFile(props.items);
 });
@@ -28,6 +78,7 @@ const messages = useMessages();
 const theme = useComponentTheme("codeTree", codeTreeTheme);
 const ui = computed(() => theme.value());
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const codeMode = computed(() => rootProps.value["data-selaras-mode"]);
 const treeProps = computed(() => resolveSlot(ui.value.tree, props.ui?.tree));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const preProps = computed(() => resolveSlot(ui.value.pre, props.ui?.pre));
@@ -47,7 +98,7 @@ const fileTreeUi = { root: "rounded-none border-0 bg-transparent p-0" };
       />
     </div>
     <div v-if="selected" v-bind="contentProps">
-      <pre v-bind="preProps">{{ selected.code }}</pre>
+      <pre v-bind="preProps"><code v-if="highlightedCode" class="selaras-code-tree-code" :data-selaras-code-mode="codeMode" v-html="highlightedCode" /><code v-else>{{ selected.code }}</code></pre>
     </div>
     <div v-else v-bind="emptyProps">
       {{ messages.selectFile }}

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {