@sewadah/selaras 0.6.0 → 0.7.1

package/dist/runtime/theme/navigation-menu.js

@@ -1,16 +1,8 @@
 import { tv } from "tailwind-variants";
 export const navigationMenuTheme = tv({
   slots: {
-    // w-full - without it, Root shrink-wraps to just its own trigger
-    // buttons' natural width inside whatever flex/grid container it sits
-    // in (confirmed: inside the docs site's own demo wrapper, a bare
-    // `flex` nav ended up narrower than its own dropdown content). Since
-    // `viewport` below is sized `w-full` *relative to Root*, a narrow
-    // Root clipped any dropdown content wider than the nav's own row -
-    // visible as text cut off mid-word in a custom-content example wider
-    // than the default trigger row. A real navbar spans its container's
-    // width anyway (the standard pattern), so this is correct regardless
-    // of the clipping bug it also happens to fix.
+    // Keep the full navigation width available for wide panels. Compact
+    // panels measure their content and follow the active trigger instead.
     root: "flex w-full",
     list: "flex list-none",
     item: "min-w-0",
@@ -62,28 +54,19 @@ export const navigationMenuTheme = tv({
     // link's, so a "Links"-style heading sits flush with the real items
     // below it.
     groupLabel: "px-2.5 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-[var(--selaras-resolved-text-muted)] first:pt-0",
+    collapsedGroupLabel: "sr-only",
+    groupSpacer: "h-2",
     separator: "my-1 h-px bg-[var(--selaras-resolved-border-default)]"
   },
   variants: {
+    contentOrientation: {
+      horizontal: {},
+      vertical: {}
+    },
     orientation: {
-      // `content`: full width of the nav bar, not sized to its own
-      // content - confirmed directly against two comparable references
-      // (one's own real theme sizes this `w-full`; the other's own
-      // mega-menu-style wide panel component - not its own separate
-      // narrow cascading-submenu component - does the same). Each open
-      // item's own panel stacks absolutely inside the shared viewport
-      // (only one visible via Presence), rather than sizing the
-      // viewport to whichever is active.
-      // `childList`: adaptive column count (not a fixed grid-cols-2 like
-      // a comparable reference's own default) - a fixed count leaves an
-      // awkward empty cell for an odd number of children. `auto-fit`,
-      // not `auto-fill` - fill reserves empty phantom tracks for
-      // however many columns WOULD fit the container width, leaving
-      // that much dead space when there are fewer actual children than
-      // that - exactly what showed up as a wide empty gap next to a
-      // 4-item grid in a very wide panel. `auto-fit` collapses those
-      // phantom tracks to 0 instead, so existing children always
-      // stretch to fill the full width.
+      // Wide panels fill the navigation bar. Auto-fit collapses unused
+      // columns so the links fill the available space. The compact-content
+      // compound variant below replaces the width and column count.
       horizontal: {
         root: "relative items-center",
         list: "items-center gap-1",
@@ -190,6 +173,15 @@ export const navigationMenuTheme = tv({
     }
   },
   compoundVariants: [
+    {
+      orientation: "horizontal",
+      contentOrientation: "vertical",
+      class: {
+        content: "inset-x-auto left-0 w-[min(20rem,calc(100vw-1.25rem))]",
+        viewport: "inset-x-auto left-[var(--reka-navigation-menu-viewport-left)] w-[var(--reka-navigation-menu-viewport-width)]",
+        childList: "grid-cols-1"
+      }
+    },
     { variant: "pill", active: false, class: { link: "hover:bg-[var(--selaras-resolved-surface-elevated)]", childLink: "hover:bg-[var(--selaras-resolved-surface-elevated)]" } },
     // All registered non-neutral roles use the selected semantic recipe.
     // Neutral follows these entries so its functional-token classes win via
@@ -215,6 +207,7 @@ export const navigationMenuTheme = tv({
   ],
   defaultVariants: {
     orientation: "horizontal",
+    contentOrientation: "vertical",
     color: "primary",
     variant: "pill"
   }

package/dist/runtime/theme/prose.d.ts

@@ -21,6 +21,7 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     preLabel: string;
     preIcon: string;
     preFilename: string;
+    preLanguage: string;
     preCopyButton: string;
     pre: string;
 }, undefined, {
@@ -46,6 +47,7 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     preLabel: string;
     preIcon: string;
     preFilename: string;
+    preLanguage: string;
     preCopyButton: string;
     pre: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -71,6 +73,7 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     preLabel: string;
     preIcon: string;
     preFilename: string;
+    preLanguage: string;
     preCopyButton: string;
     pre: string;
 }>>;

package/dist/runtime/theme/prose.js

@@ -8,13 +8,14 @@ export const proseTheme = tv({
     h5: "text-base font-semibold text-[var(--selaras-resolved-text-default)] scroll-mt-20",
     h6: "text-sm font-semibold text-[var(--selaras-resolved-text-default)] scroll-mt-20",
     headingAnchor: "no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
-    preWrapper: "overflow-hidden rounded-[var(--selaras-resolved-radius-md)] ring-1 ring-[var(--selaras-resolved-border-default)]",
-    preHeader: "flex items-center justify-between gap-2 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] px-3 py-1.5",
-    preLabel: "flex min-w-0 items-center gap-2",
-    preIcon: "size-4",
-    preFilename: "font-mono text-xs text-[var(--selaras-resolved-text-muted)]",
+    preWrapper: "min-w-0 overflow-hidden rounded-[var(--selaras-resolved-radius-lg)] bg-[var(--selaras-resolved-surface-elevated)] ring-1 ring-[var(--selaras-resolved-border-default)]",
+    preHeader: "flex min-h-11 items-center justify-between gap-3 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] px-4 py-1.5",
+    preLabel: "flex min-w-0 items-center gap-2.5",
+    preIcon: "size-4 shrink-0",
+    preFilename: "truncate font-mono text-xs font-medium text-[var(--selaras-resolved-text-default)]",
+    preLanguage: "truncate font-mono text-xs text-[var(--selaras-resolved-text-muted)]",
     preCopyButton: "shrink-0",
-    pre: "overflow-x-auto bg-[var(--selaras-resolved-surface-elevated)] p-4 font-mono text-sm leading-relaxed"
+    pre: "m-0 overflow-x-auto rounded-none bg-[var(--selaras-resolved-surface-elevated)] p-4 font-mono text-sm leading-relaxed text-[var(--selaras-resolved-text-default)]"
   },
   variants: {
     color: {

package/dist/runtime/theme/stepper.d.ts

@@ -40,6 +40,7 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
 }, {
+    progress: string;
     root: string;
     item: string;
     connector: string;
@@ -92,6 +93,7 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
 }, {
+    progress: string;
     root: string;
     item: string;
     connector: string;
@@ -144,6 +146,7 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
 }, {
+    progress: string;
     root: string;
     item: string;
     connector: string;

package/dist/runtime/theme/stepper.js

@@ -1,6 +1,7 @@
 import { tv } from "tailwind-variants";
 export const stepperTheme = tv({
   slots: {
+    progress: "sr-only",
     root: "flex w-full items-start",
     // flex-1 (not sized to its own content) - items sit edge-to-edge with
     // no gap between them so the separator living inside the *current*

package/dist/runtime/theme/table.d.ts

@@ -24,9 +24,10 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     };
     gridlines: {
         true: {
-            table: string;
+            thead: string;
             th: string;
             td: string;
+            tfoot: string;
         };
     };
     striped: {
@@ -100,9 +101,10 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     };
     gridlines: {
         true: {
-            table: string;
+            thead: string;
             th: string;
             td: string;
+            tfoot: string;
         };
     };
     striped: {
@@ -176,9 +178,10 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     };
     gridlines: {
         true: {
-            table: string;
+            thead: string;
             th: string;
             td: string;
+            tfoot: string;
         };
     };
     striped: {

package/dist/runtime/theme/table.js

@@ -54,9 +54,11 @@ export const tableTheme = tv({
     },
     gridlines: {
       true: {
-        table: "border border-[var(--selaras-resolved-border-default)]",
-        th: "border border-[var(--selaras-resolved-border-default)]",
-        td: "border border-[var(--selaras-resolved-border-default)]"
+        // The wrapper supplies the outer frame, including empty and scrolling states.
+        thead: "[&>tr>th]:border-b",
+        th: "border-e border-[var(--selaras-resolved-border-default)] data-[last-column]:border-e-0",
+        td: "border-e border-[var(--selaras-resolved-border-default)] last:border-e-0",
+        tfoot: "border-t border-[var(--selaras-resolved-border-default)]"
       }
     },
     striped: {

package/dist/runtime/theme-config.d.ts

@@ -334,7 +334,7 @@ export interface ThemeComponentRegistry {
     /** Shared by the public component and its recursive accordion/flyout renderers. */
     navigationMenu: {
         slots: NavigationMenuThemeSlots;
-        conditions: WithRegisteredColor<Pick<NavigationMenuVariants, 'orientation' | 'color' | 'variant' | 'active' | 'disabled' | 'highlight' | 'collapsed' | 'flyoutRoot'>>;
+        conditions: WithRegisteredColor<Pick<NavigationMenuVariants, 'orientation' | 'contentOrientation' | 'color' | 'variant' | 'active' | 'disabled' | 'highlight' | 'collapsed' | 'flyoutRoot'>>;
     };
     /** Page controls are Button recipes; this key owns wrapper and ellipsis layout. */
     pagination: {

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

@@ -100,7 +100,7 @@ export type { IconRegistry } from '../utils/icons.js';
 export { defaultIcons } from '../utils/icons.js';
 export type { MessageRegistry } from '../utils/messages.js';
 export { defaultMessages } from '../utils/messages.js';
-export type { NavigationMenuItem } from '../utils/navigation-menu.js';
+export type { NavigationMenuItem, NavigationMenuPopover, NavigationMenuPositioning } from '../utils/navigation-menu.js';
 export type { ContextMenuPositioning, OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 export type { SelectGroup, SelectIdentity, SelectModel, SelectModelValue, SelectResolvedOption, SelectValue } from '../utils/select-contracts.js';
 export type { TableEmits, TableProps, TableSlots } from '../utils/table-contracts.js';

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

@@ -1,5 +1,6 @@
 export const defaultFileIcons = {
   "vue": "vscode-icons:file-type-vue",
+  "vue-html": "vscode-icons:file-type-vue",
   "ts": "vscode-icons:file-type-typescript",
   "typescript": "vscode-icons:file-type-typescript",
   "mts": "vscode-icons:file-type-typescript",

package/dist/runtime/utils/messages.d.ts

@@ -18,6 +18,8 @@ export interface MessageRegistry {
     first: string;
     last: string;
     pagination: string;
+    stepper: string;
+    stepperProgress: (step: number, total: number) => string;
     scrollTabsLeft: string;
     scrollTabsRight: string;
     datePicker: string;
@@ -55,6 +57,8 @@ export interface MessageRegistry {
     avatarGroupOverflow: (count: number) => string;
     paginationInfo: (page: number, total: number) => string;
     codeTabFallback: (index: number) => string;
+    copyCode: string;
+    codeCopied: string;
     dropFiles: string;
     invalidFileType: (name: string) => string;
     invalidFileSize: (name: string, max: string) => string;

package/dist/runtime/utils/messages.js

@@ -18,6 +18,8 @@ export const defaultMessages = {
   first: "First",
   last: "Last",
   pagination: "Pagination",
+  stepper: "Progress",
+  stepperProgress: (step, total) => `Step ${step} of ${total}`,
   scrollTabsLeft: "Scroll tabs left",
   scrollTabsRight: "Scroll tabs right",
   datePicker: "Date picker",
@@ -54,6 +56,8 @@ export const defaultMessages = {
   avatarGroupOverflow: (count) => `+${count}`,
   paginationInfo: (page, total) => `Page ${page} of ${total}`,
   codeTabFallback: (index) => `Tab ${index}`,
+  copyCode: "Copy code",
+  codeCopied: "Copied!",
   dropFiles: "Drop files here or click to browse",
   invalidFileType: (name) => `${name}: invalid file type`,
   invalidFileSize: (name, max) => `${name}: exceeds the ${max} size limit`,

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

@@ -1,7 +1,10 @@
 import type { PopoverProps } from '../components/Popover.vue.js';
 import type { TooltipProps } from '../components/Tooltip.vue.js';
 import type { HotkeyOptions } from '../directives/hotkey.js';
+import type { OverlayPositioning } from './overlay.js';
 export type NavigationMenuPopover = Pick<PopoverProps, 'side' | 'align' | 'positioning' | 'portal' | 'arrow' | 'ui'>;
+/** Alignment of a horizontal navigation menu's compact dropdown. */
+export type NavigationMenuPositioning = Pick<OverlayPositioning, 'align'>;
 export interface NavigationMenuItem {
     label: string;
     icon?: string;
@@ -47,3 +50,10 @@ export interface NavigationMenuItem {
 export declare function isNavigationMenuItemActive(item: NavigationMenuItem, currentPath: string): boolean;
 /** The v-hotkey binding for an item that opts in with `hotkey: true`. */
 export declare function navigationMenuHotkey(item: NavigationMenuItem): HotkeyOptions | undefined;
+interface CollapsedNavigationMenuEntry {
+    item: NavigationMenuItem;
+    boundary: false | 'separator' | 'spacing';
+}
+/** Defer a boundary until the next action, avoiding edge and repeated dividers. */
+export declare function collapsedNavigationMenuEntries(items: NavigationMenuItem[], presentation: 'separator' | 'spacing' | 'none'): CollapsedNavigationMenuEntry[];
+export {};

package/dist/runtime/utils/navigation-menu.js

@@ -6,3 +6,28 @@ export function isNavigationMenuItemActive(item, currentPath) {
 export function navigationMenuHotkey(item) {
   return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut } : void 0;
 }
+export function collapsedNavigationMenuEntries(items, presentation) {
+  const entries = [];
+  let hasAction = false;
+  let groupBoundary = false;
+  let explicitBoundary = false;
+  for (const item of items) {
+    if (item.type === "separator") {
+      explicitBoundary = hasAction;
+      continue;
+    }
+    if (item.type === "label") {
+      entries.push({ item, boundary: false });
+      groupBoundary = hasAction;
+      continue;
+    }
+    const boundary = explicitBoundary ? "separator" : groupBoundary && presentation !== "none" ? presentation : false;
+    if (boundary)
+      entries.push({ item: { label: item.label, type: "separator" }, boundary });
+    entries.push({ item, boundary: false });
+    hasAction = true;
+    groupBoundary = false;
+    explicitBoundary = false;
+  }
+  return entries;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -111,9 +111,9 @@
     "dev:preview": "bunx nuxt preview docs",
     "dev:prepare": "bun run docs:prepare",
     "docs:build": "nuxt build docs",
-    "docs:dev": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview && nuxt dev packages/docs/preview",
+    "docs:dev": "nuxt-module-build build --stub && bun run scripts/sync-workspace-dist.mjs && nuxt-module-build prepare && nuxt prepare packages/docs/preview && nuxt dev packages/docs/preview",
     "docs:generate": "nuxt generate docs",
-    "docs:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare docs && bun run scripts/sync-workspace-dist.mjs",
+    "docs:prepare": "nuxt-module-build build --stub && bun run scripts/sync-workspace-dist.mjs && nuxt-module-build prepare && nuxt prepare docs",
     "docs:types": "cd docs && vue-tsc --noEmit",
     "release": "bun run release:both",
     "release:both": "bun run release:selaras && bun run release:docs",