@sewadah/selaras 0.2.0 → 0.3.0

package/dist/runtime/theme/rating.js

@@ -47,7 +47,7 @@ export const ratingTheme = tv({
     // backdrop through it, reading as "not filled" with no shape swap
     // needed - recolored once its own indicator's data-state flips to
     // active.
-    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--_selaras-color-fill)]"
+    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--_selaras-color-indicator)]"
   },
   variants: {
     orientation: {

package/dist/runtime/theme/select.js

@@ -44,7 +44,7 @@ export const selectTheme = tv({
     viewport: "max-h-72 overflow-y-auto p-1",
     group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     item: "relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-fill)]",
+    itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-indicator)]",
     empty: "px-2 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },
@@ -72,7 +72,7 @@ export const selectTheme = tv({
     // overrides win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { trigger: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)] focus-within:ring-[var(--_selaras-color-fill)] data-[state=open]:ring-[var(--_selaras-color-fill)]" }
+      true: { trigger: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)] focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/separator.js

@@ -10,7 +10,7 @@ export const separatorTheme = tv({
     // plain bar; with a label, a second one of these renders after it
     // (see Separator.vue), splitting the available space evenly on both
     // sides of the text.
-    line: "shrink-0 border-[var(--_selaras-color-fill)]",
+    line: "shrink-0 border-[var(--_selaras-color-indicator)]",
     // Always muted, independent of `color` - a colored line with
     // matching bright label text reads as garish rather than
     // informative; the label stays legible/neutral regardless of how

package/dist/runtime/theme/slider.js

@@ -10,8 +10,8 @@ export const sliderTheme = tv({
     // positioned element with no top/bottom of its own collapses to 0
     // height. inset-y-0/inset-x-0 below (in the orientation variant)
     // supply that missing cross-axis size.
-    range: "absolute rounded-full bg-[var(--_selaras-color-fill)]",
-    thumb: "block shrink-0 rounded-full bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)] ring-2 ring-[var(--_selaras-color-fill)] transition-shadow focus-visible:outline-none focus-visible:ring-4",
+    range: "absolute rounded-full bg-[var(--_selaras-color-indicator)]",
+    thumb: "block shrink-0 rounded-full bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)] ring-2 ring-[var(--_selaras-color-indicator)] transition-shadow focus-visible:outline-none focus-visible:ring-4",
     // Own addition - Reka's Slider has no tick/mark concept of its own.
     // Positioned via an inline style (percent along the track), not a
     // variant - see Slider.vue's own `ticks` computed.

package/dist/runtime/theme/splitter-resize-handle.js

@@ -4,7 +4,7 @@ export const splitterResizeHandleTheme = tv({
     // A slim hit area with a thinner visible line inside it - the visible
     // line alone would be too narrow a target to reliably grab.
     root: "group relative shrink-0 bg-transparent outline-none",
-    line: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors group-hover:bg-[var(--_selaras-color-fill)] group-data-[state=drag]:bg-[var(--_selaras-color-fill)]"
+    line: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors group-hover:bg-[var(--_selaras-color-indicator)] group-data-[state=drag]:bg-[var(--_selaras-color-indicator)]"
   },
   variants: {
     color: {

package/dist/runtime/theme/switch.js

@@ -74,7 +74,7 @@ export const switchTheme = tv({
       // its own to recolor (unlike Radio/Checkbox's ring-inset), but an
       // offset outline left a visible gap between it and the pill, unlike
       // every other invalid state in this library, which sits flush.
-      true: { track: "ring-2 ring-[var(--_selaras-color-fill)]", thumb: "data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]" }
+      true: { track: "ring-2 ring-[var(--_selaras-color-border)]", thumb: "data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/textarea.js

@@ -46,7 +46,7 @@ export const textareaTheme = tv({
     // override win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { base: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)]" }
+      true: { base: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/utils/color-registry.d.ts

@@ -18,6 +18,8 @@ export interface ColorRecipe {
     fillHover: string;
     fillPressed: string;
     onFill: string;
+    /** Essential unpaired graphics such as progress and selection indicators. */
+    indicator: string;
     subtle: string;
     subtleHover: string;
     subtlePressed: string;
@@ -28,7 +30,7 @@ export interface ColorRecipe {
     border: string;
     focus: string;
 }
-export type ColorRecipeInput = Pick<ColorRecipe, 'fill' | 'onFill' | 'subtle' | 'onSubtle' | 'text' | 'border'> & Partial<Pick<ColorRecipe, 'fillHover' | 'fillPressed' | 'subtleHover' | 'subtlePressed' | 'textHover' | 'textPressed' | 'focus'>>;
+export type ColorRecipeInput = Pick<ColorRecipe, 'fill' | 'onFill' | 'subtle' | 'onSubtle' | 'text' | 'border'> & Partial<Pick<ColorRecipe, 'fillHover' | 'fillPressed' | 'indicator' | 'subtleHover' | 'subtlePressed' | 'textHover' | 'textPressed' | 'focus'>>;
 export type RuntimeColorOverrides = Partial<Record<ColorRole, Partial<ColorRecipeInput>>>;
 export interface RuntimeThemeMode extends ThemeTokenOverrides {
     colors?: RuntimeColorOverrides;

package/dist/runtime/utils/color-registry.js

@@ -38,6 +38,9 @@ export function normalizeColorRecipe(input) {
     fillHover: input.fillHover ?? "var(--_selaras-color-fill)",
     fillPressed: input.fillPressed ?? "var(--_selaras-color-fill-hover)",
     onFill: input.onFill,
+    // A recipe's border is already authored for visibility against its
+    // surrounding surface, making it the safe shorthand for unpaired marks.
+    indicator: input.indicator ?? "var(--_selaras-color-border)",
     subtle: input.subtle,
     subtleHover: input.subtleHover ?? "var(--_selaras-color-subtle)",
     subtlePressed: input.subtlePressed ?? "var(--_selaras-color-subtle-hover)",
@@ -62,6 +65,7 @@ const generatedRoleFields = [
   "fill-hover",
   "fill-pressed",
   "on-fill",
+  "indicator",
   "subtle",
   "subtle-hover",
   "subtle-pressed",

package/dist/runtime/utils/file-icons.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultFileIcons: Record<string, string>;
+/**
+ * Resolves a file-type icon for a code block, preferring a filename's own
+ * extension (the more specific signal) over the fence's `language`. Returns
+ * undefined when neither maps to a known type, so callers can render no icon
+ * rather than a misleading fallback.
+ */
+export declare function resolveFileIcon(language?: string, filename?: string): string | undefined;

package/dist/runtime/utils/file-icons.js

@@ -0,0 +1,131 @@
+export const defaultFileIcons = {
+  "vue": "vscode-icons:file-type-vue",
+  "ts": "vscode-icons:file-type-typescript",
+  "typescript": "vscode-icons:file-type-typescript",
+  "mts": "vscode-icons:file-type-typescript",
+  "cts": "vscode-icons:file-type-typescript",
+  "tsx": "vscode-icons:file-type-reactts",
+  "js": "vscode-icons:file-type-js",
+  "javascript": "vscode-icons:file-type-js",
+  "mjs": "vscode-icons:file-type-js",
+  "cjs": "vscode-icons:file-type-js",
+  "jsx": "vscode-icons:file-type-reactjs",
+  "html": "vscode-icons:file-type-html",
+  "htm": "vscode-icons:file-type-html",
+  "css": "vscode-icons:file-type-css",
+  "scss": "vscode-icons:file-type-scss",
+  "sass": "vscode-icons:file-type-sass",
+  "less": "vscode-icons:file-type-less",
+  "json": "vscode-icons:file-type-json",
+  "jsonc": "vscode-icons:file-type-json",
+  "json5": "vscode-icons:file-type-json",
+  "md": "vscode-icons:file-type-markdown",
+  "markdown": "vscode-icons:file-type-markdown",
+  "mdx": "vscode-icons:file-type-markdown",
+  "bash": "vscode-icons:file-type-shell",
+  "sh": "vscode-icons:file-type-shell",
+  "shell": "vscode-icons:file-type-shell",
+  "zsh": "vscode-icons:file-type-shell",
+  "console": "vscode-icons:file-type-shell",
+  "terminal": "vscode-icons:file-type-shell",
+  "python": "vscode-icons:file-type-python",
+  "py": "vscode-icons:file-type-python",
+  "yaml": "vscode-icons:file-type-yaml",
+  "yml": "vscode-icons:file-type-yaml",
+  "toml": "vscode-icons:file-type-toml",
+  "ini": "vscode-icons:file-type-ini",
+  "cfg": "vscode-icons:file-type-config",
+  "conf": "vscode-icons:file-type-config",
+  "config": "vscode-icons:file-type-config",
+  "env": "vscode-icons:file-type-dotenv",
+  "dotenv": "vscode-icons:file-type-dotenv",
+  "go": "vscode-icons:file-type-go",
+  "rust": "vscode-icons:file-type-rust",
+  "rs": "vscode-icons:file-type-rust",
+  "php": "vscode-icons:file-type-php",
+  "ruby": "vscode-icons:file-type-ruby",
+  "rb": "vscode-icons:file-type-ruby",
+  "sql": "vscode-icons:file-type-sql",
+  "docker": "vscode-icons:file-type-docker",
+  "dockerfile": "vscode-icons:file-type-docker",
+  "svelte": "vscode-icons:file-type-svelte",
+  "astro": "vscode-icons:file-type-astro",
+  "xml": "vscode-icons:file-type-xml",
+  "svg": "vscode-icons:file-type-svg",
+  "java": "vscode-icons:file-type-java",
+  "kotlin": "vscode-icons:file-type-kotlin",
+  "kt": "vscode-icons:file-type-kotlin",
+  "swift": "vscode-icons:file-type-swift",
+  "csharp": "vscode-icons:file-type-csharp",
+  "cs": "vscode-icons:file-type-csharp",
+  "cpp": "vscode-icons:file-type-cpp",
+  "c++": "vscode-icons:file-type-cpp",
+  "c": "vscode-icons:file-type-c",
+  "vim": "vscode-icons:file-type-vim",
+  "lua": "vscode-icons:file-type-lua",
+  "nginx": "vscode-icons:file-type-nginx",
+  "graphql": "vscode-icons:file-type-graphql",
+  "gql": "vscode-icons:file-type-graphql",
+  "prisma": "vscode-icons:file-type-prisma",
+  "powershell": "vscode-icons:file-type-powershell",
+  "ps1": "vscode-icons:file-type-powershell",
+  "r": "vscode-icons:file-type-r",
+  "elixir": "vscode-icons:file-type-elixir",
+  "ex": "vscode-icons:file-type-elixir",
+  "exs": "vscode-icons:file-type-elixir",
+  "erlang": "vscode-icons:file-type-erlang",
+  "erl": "vscode-icons:file-type-erlang",
+  "haskell": "vscode-icons:file-type-haskell",
+  "hs": "vscode-icons:file-type-haskell",
+  "scala": "vscode-icons:file-type-scala",
+  "julia": "vscode-icons:file-type-julia",
+  "jl": "vscode-icons:file-type-julia",
+  "zig": "vscode-icons:file-type-zig",
+  "nim": "vscode-icons:file-type-nim",
+  "crystal": "vscode-icons:file-type-crystal",
+  "solidity": "vscode-icons:file-type-solidity",
+  "sol": "vscode-icons:file-type-solidity",
+  "terraform": "vscode-icons:file-type-terraform",
+  "tf": "vscode-icons:file-type-terraform",
+  "cmake": "vscode-icons:file-type-cmake",
+  "wasm": "vscode-icons:file-type-wasm",
+  "text": "vscode-icons:file-type-text",
+  "txt": "vscode-icons:file-type-text",
+  "plaintext": "vscode-icons:file-type-text",
+  "plain": "vscode-icons:file-type-text",
+  "output": "vscode-icons:file-type-text",
+  "ansi": "vscode-icons:file-type-text",
+  "diff": "vscode-icons:file-type-diff",
+  "patch": "vscode-icons:file-type-diff",
+  "log": "vscode-icons:file-type-log",
+  "image": "vscode-icons:file-type-image",
+  "audio": "vscode-icons:file-type-audio",
+  "video": "vscode-icons:file-type-video",
+  "font": "vscode-icons:file-type-font",
+  "zip": "vscode-icons:file-type-zip",
+  "git": "vscode-icons:file-type-git",
+  "gitignore": "vscode-icons:file-type-git",
+  "npm": "vscode-icons:file-type-npm",
+  "nuxt": "vscode-icons:file-type-nuxt",
+  "ansible": "vscode-icons:file-type-ansible",
+  "bicep": "vscode-icons:file-type-bicep"
+};
+function normalizeFileIconKey(value) {
+  const key = value?.trim().toLowerCase().replace(/^\./, "");
+  return key || void 0;
+}
+function extensionOf(filename) {
+  if (!filename)
+    return void 0;
+  const base = filename.split(/[\\/]/).pop() ?? filename;
+  const dot = base.lastIndexOf(".");
+  return dot > 0 ? base.slice(dot + 1) : base.replace(/^\./, "");
+}
+export function resolveFileIcon(language, filename) {
+  for (const candidate of [extensionOf(filename), language]) {
+    const key = normalizeFileIconKey(candidate);
+    if (key && defaultFileIcons[key])
+      return defaultFileIcons[key];
+  }
+  return void 0;
+}

package/dist/runtime/utils/functional-tokens.d.ts

@@ -1,6 +1,6 @@
 /** Functional colors are independent of a component's selected intent role. */
 export declare const functionalTokenGroups: {
-    readonly surface: readonly ["default", "elevated", "inverted"];
+    readonly surface: readonly ["canvas", "default", "elevated", "inverted"];
     readonly text: readonly ["default", "muted", "inverted"];
     readonly border: readonly ["default", "muted", "hover"];
 };

package/dist/runtime/utils/functional-tokens.js

@@ -1,5 +1,5 @@
 export const functionalTokenGroups = {
-  surface: ["default", "elevated", "inverted"],
+  surface: ["canvas", "default", "elevated", "inverted"],
   text: ["default", "muted", "inverted"],
   border: ["default", "muted", "hover"]
 };

package/dist/runtime/utils/navigation-menu.d.ts

@@ -2,6 +2,9 @@ export interface NavigationMenuItem {
     label: string;
     icon?: string;
     to?: string;
+    target?: string;
+    rel?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     /** Force active state - otherwise auto-detected against the current route when `to` is set. */
     active?: boolean;

package/dist/runtime/utils/seed-colors.d.ts

@@ -8,7 +8,8 @@ export interface SeedColorOptions {
     surfaces?: SeedColorSurfaces;
 }
 /**
- * Derives a complete, opaque two-mode web ColorRecipe from one opaque sRGB seed.
+ * Preserves one opaque sRGB seed as the resting fill and derives a complete,
+ * opaque two-mode web ColorRecipe around it.
  * Custom or unresolved surfaces require explicit recipes instead.
  */
 export declare function defineColorFromSeed(seed: string, options?: SeedColorOptions): ColorModePair<ColorRecipe>;

package/dist/runtime/utils/seed-colors.js

@@ -150,30 +150,38 @@ function requireSeries(mode, family, create) {
     invalid(`cannot derive the ${mode} ${family} family while preserving its contrast targets; provide an explicit defineColor() recipe.`);
   }
 }
+function deriveFillStates(seed, foreground, mode) {
+  const preferredTarget = mode === "light" ? black : white;
+  const alternateTarget = preferredTarget === black ? white : black;
+  for (const target of [preferredTarget, alternateTarget]) {
+    for (const scale of [1, 0.75, 0.5, 0.25, 0.125, 0.0625, 0.03125]) {
+      const hover = quantize(mixLab(seed, target, 0.06 * scale));
+      const pressed = quantize(mixLab(seed, target, 0.12 * scale));
+      const colors = [seed, hover, pressed];
+      if (new Set(colors.map(toHex)).size === colors.length && colors.every((color) => contrast(color, foreground) >= textMinimum))
+        return [hover, pressed];
+    }
+  }
+  invalid(`cannot derive distinct ${mode} fill states while preserving readable content; provide an explicit defineColor() recipe.`);
+}
 function deriveMode(seed, surface, mode) {
   const direction = contrast(white, surface) > contrast(black, surface) ? 1 : -1;
-  const fillCandidates = [black, white].flatMap((foreground) => {
-    try {
-      const series = findStateSeries(seed, direction, 0.045, 3, (color) => contrast(color, surface) >= nonTextGuard && contrast(color, foreground) >= textGuard);
-      return [{ ...series, foreground }];
-    } catch {
-      return [];
-    }
-  }).sort((left, right) => left.cost + Number(left.collapsed) * 0.02 - (right.cost + Number(right.collapsed) * 0.02));
-  const fill = fillCandidates[0];
-  if (!fill)
-    invalid(`cannot derive the ${mode} fill family while preserving its contrast targets; provide an explicit defineColor() recipe.`);
-  const fillColor = fill.colors[0];
+  const foreground = contrast(seed, black) >= contrast(seed, white) ? black : white;
+  if (contrast(seed, foreground) < textMinimum)
+    invalid(`cannot preserve the ${mode} fill while deriving readable content; provide an explicit defineColor() recipe.`);
+  const [fillHover, fillPressed] = deriveFillStates(seed, foreground, mode);
+  const fillColor = seed;
   const subtle = quantize(mixLab(surface, fillColor, 0.1));
   const subtleHover = quantize(mixLab(surface, fillColor, 0.14));
   const subtlePressed = quantize(mixLab(surface, fillColor, 0.18));
   const text = requireSeries(mode, "text/subtle", () => findStateSeries(seed, direction, 0.03, 3, (color) => [surface, subtle, subtleHover, subtlePressed].every((background) => contrast(color, background) >= textGuard))).colors;
   const border = requireSeries(mode, "border", () => findStateSeries(seed, direction, 0.02, 1, (color) => contrast(color, surface) >= nonTextGuard)).colors[0];
   return {
-    fill: toHex(fill.colors[0]),
-    fillHover: toHex(fill.colors[1]),
-    fillPressed: toHex(fill.colors[2]),
-    onFill: toHex(fill.foreground),
+    fill: toHex(fillColor),
+    fillHover: toHex(fillHover),
+    fillPressed: toHex(fillPressed),
+    onFill: toHex(foreground),
+    indicator: toHex(border),
     subtle: toHex(subtle),
     subtleHover: toHex(subtleHover),
     subtlePressed: toHex(subtlePressed),