@sewadah/selaras 0.5.0 → 0.7.0

package/dist/runtime/components/ProsePre.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, onBeforeUnmount, ref } from "vue";
 import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
 import { proseTheme } from "../theme/prose";
 import { resolveFileIcon } from "../utils/file-icons";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
-import Badge from "./Badge.vue";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -18,17 +18,21 @@ const props = defineProps({
   meta: { type: String, required: false }
 });
 const icons = useIcons();
+const messages = useMessages();
 const fileIcon = computed(() => props.icon ?? resolveFileIcon(props.language, props.filename));
 const theme = useComponentTheme("prose", proseTheme);
 const ui = computed(() => theme.value());
 const preProps = useRootProps(() => ui.value.pre, () => void 0);
 const copied = ref(false);
+let copyTimer;
+onBeforeUnmount(() => clearTimeout(copyTimer));
 async function copy() {
   if (!props.code)
     return;
   await navigator.clipboard.writeText(props.code);
+  clearTimeout(copyTimer);
   copied.value = true;
-  setTimeout(() => {
+  copyTimer = setTimeout(() => {
     copied.value = false;
   }, 1500);
 }
@@ -39,16 +43,19 @@ async function copy() {
     <div v-if="showHeader && (filename || language || code)" v-bind="resolveSlot(ui.preHeader, void 0)">
       <span v-bind="resolveSlot(ui.preLabel, void 0)">
         <Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
-        <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
-        <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
+        <span v-if="filename" :title="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
+        <span v-else-if="language" v-bind="resolveSlot(ui.preLanguage, void 0)">{{ language }}</span>
       </span>
       <Button
         v-if="code"
         v-bind="resolveSlot(ui.preCopyButton, void 0)"
         size="sm"
+        square
         variant="ghost"
-        color="neutral"
+        :color="copied ? 'success' : 'neutral'"
         :icon="copied ? icons.check : icons.copy"
+        :aria-label="copied ? messages.codeCopied : messages.copyCode"
+        :title="copied ? messages.codeCopied : messages.copyCode"
         @click="copy"
       />
     </div>

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

@@ -9,9 +9,9 @@ export interface ProsePreProps {
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_18: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/SplitterPanel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { SplitterPanel as RekaSplitterPanel } from "reka-ui";
-import { computed, ref } from "vue";
+import { computed, mergeProps, nextTick, onBeforeUnmount, ref } from "vue";
 import { splitterPanelTheme } from "../theme/splitter-panel";
 import { useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
@@ -28,6 +28,32 @@ defineExpose({
 const theme = useComponentTheme("splitterPanel", splitterPanelTheme);
 const ui = computed(() => theme.value());
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const hasMeasuredLayout = ref(false);
+const initialLayoutSettled = ref(false);
+let layoutFrame;
+const panelProps = computed(() => mergeProps({
+  style: props.sizeUnit === "px" && props.defaultSize !== void 0 ? {
+    ...!hasMeasuredLayout.value && { flexBasis: `${props.defaultSize}px`, flexGrow: 0 },
+    ...!initialLayoutSettled.value && { transition: "none" }
+  } : void 0
+}, rootProps.value));
+function handleResize(size) {
+  if (!hasMeasuredLayout.value) {
+    hasMeasuredLayout.value = true;
+    nextTick(() => {
+      layoutFrame = requestAnimationFrame(() => {
+        layoutFrame = requestAnimationFrame(() => {
+          initialLayoutSettled.value = true;
+        });
+      });
+    });
+  }
+  emit("resize", size);
+}
+onBeforeUnmount(() => {
+  if (layoutFrame !== void 0)
+    cancelAnimationFrame(layoutFrame);
+});
 </script>
 
 <template>
@@ -40,10 +66,10 @@ const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
     :collapsible="collapsible"
     :size-unit="sizeUnit"
     :order="order"
-    v-bind="rootProps"
+    v-bind="panelProps"
     @collapse="emit('collapse')"
     @expand="emit('expand')"
-    @resize="(size) => emit('resize', size)"
+    @resize="handleResize"
   >
     <template #default="{ isCollapsed, isExpanded, collapse, expand }">
       <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" :collapse="collapse" :expand="expand" />

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

@@ -27,6 +27,11 @@ export interface StepperEmits {
     'update:modelValue': [value: number];
 }
 export interface StepperSlots {
+    /** Replaces the live-region text for this instance. Keep the content concise. */
+    progress?: (props: {
+        step: number | undefined;
+        total: number;
+    }) => any;
     indicator?: (props: {
         item: Step;
         index: number;

package/dist/runtime/components/Stepper.vue

@@ -2,6 +2,8 @@
 import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
 import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import StepperRootElement from "../internal/stepper-root-element";
 import { stepperTheme } from "../theme/stepper";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
@@ -20,6 +22,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 defineSlots();
 const icons = useIcons();
+const messages = useMessages();
 const theme = useComponentTheme("stepper", stepperTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -36,11 +39,15 @@ const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const labelsProps = computed(() => resolveSlot(ui.value.labels, props.ui?.labels));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const progressProps = computed(() => resolveSlot(ui.value.progress, props.ui?.progress));
 const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
 </script>
 
 <template>
   <StepperRoot
+    v-slot="{ modelValue: currentStep }"
+    :as="StepperRootElement"
+    :aria-label="messages.stepper"
     :model-value="modelValue"
     :default-value="defaultValue"
     :linear="linear"
@@ -100,5 +107,10 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
         </StepperDescription>
       </div>
     </StepperItem>
+    <span role="status" aria-live="polite" aria-atomic="true" v-bind="progressProps">
+      <slot name="progress" :step="currentStep" :total="items.length">
+        {{ currentStep !== void 0 && items.length ? messages.stepperProgress(currentStep, items.length) : "" }}
+      </slot>
+    </span>
   </StepperRoot>
 </template>

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

@@ -27,6 +27,11 @@ export interface StepperEmits {
     'update:modelValue': [value: number];
 }
 export interface StepperSlots {
+    /** Replaces the live-region text for this instance. Keep the content concise. */
+    progress?: (props: {
+        step: number | undefined;
+        total: number;
+    }) => any;
     indicator?: (props: {
         item: Step;
         index: number;

package/dist/runtime/components/Table.vue

@@ -140,6 +140,10 @@ function onRowClick(rowOriginal, event, toggleSelection) {
 function onRowContextmenu(rowOriginal, event) {
   emit("rowContextmenu", rowOriginal, event);
 }
+function isLastHeader(header) {
+  const lastColumn = table.getVisibleLeafColumns().at(-1);
+  return header.column.getLeafColumns().some((column) => column.id === lastColumn?.id);
+}
 const thProps = computed(() => resolveSlot(ui.value.th, props.ui?.th));
 const thSortableClass = computed(() => resolveSlot(ui.value.thSortable, props.ui?.thSortable).class);
 const sortIconProps = computed(() => resolveSlot(ui.value.sortIcon, props.ui?.sortIcon));
@@ -261,6 +265,7 @@ defineExpose({
                 :ref="(el) => setHeaderRef(header.column.id, el)"
                 :colspan="header.colSpan"
                 :rowspan="header.rowSpan"
+                :data-last-column="isLastHeader(header) || void 0"
                 v-bind="thProps"
                 :class="header.column.getCanSort() ? thSortableClass : void 0"
                 :data-pinned="header.column.getIsPinned() || void 0"
@@ -384,7 +389,7 @@ defineExpose({
 
         <tfoot v-if="hasFooter" v-bind="tfootProps">
           <tr v-for="footerGroup in table.getFooterGroups()" :key="footerGroup.id" v-bind="trProps">
-            <th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" v-bind="thProps">
+            <th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" :data-last-column="isLastHeader(header) || void 0" v-bind="thProps">
               <FlexRender v-if="!header.isPlaceholder" :footer="header" />
             </th>
           </tr>

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

@@ -0,0 +1,19 @@
+import type { TooltipProps } from '../components/Tooltip.vue.js';
+type __VLS_Props = {
+    tooltip?: TooltipProps;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/internal/NavigationMenuTooltip.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Tooltip from "../components/Tooltip.vue";
+defineProps({
+  tooltip: { type: Object, required: false }
+});
+</script>
+
+<template>
+  <Tooltip v-if="tooltip" v-bind="tooltip">
+    <slot />
+  </Tooltip>
+  <slot v-else />
+</template>

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

@@ -0,0 +1,19 @@
+import type { TooltipProps } from '../components/Tooltip.vue.js';
+type __VLS_Props = {
+    tooltip?: TooltipProps;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/internal/stepper-root-element.d.ts

@@ -0,0 +1,5 @@
+/** Keep the primitive's root behavior while replacing its fixed progress announcement. */
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/internal/stepper-root-element.js

@@ -0,0 +1,8 @@
+import { defineComponent, h } from "vue";
+export default defineComponent({
+  name: "StepperRootElement",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => h("div", attrs, slots.default?.().filter((node) => !(node.type === "div" && node.props?.role === "status" && node.props?.["aria-live"] === "polite")));
+  }
+});

package/dist/runtime/structural.css

@@ -1 +1 @@
-@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-toast-in{0%{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*-100%)}}@keyframes selaras-toast-out{to{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*var(--_selaras-toast-exit, -100%))}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{position:relative}.selaras-nav-elbow:before{inset-inline-start:-16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:var(--selaras-resolved-border-default);content:"";position:absolute;top:0}.selaras-nav-elbow:after{inset-inline-start:-15px;width:1.5px}.selaras-nav-elbow--content-navigation:before{height:40px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--content-navigation:after{bottom:-2px}.selaras-nav-elbow--content-navigation:last-child:after{bottom:auto;height:14px}.selaras-nav-elbow--navigation-menu:before{height:32px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--navigation-menu:after{bottom:-4px}.selaras-nav-elbow--navigation-menu:last-child:after{bottom:auto;height:10px}.selaras-nav-elbow--file-tree:before{height:28px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--file-tree:after{bottom:-2px}.selaras-nav-elbow--file-tree:last-child:after{bottom:auto;height:8px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}: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-resolved-scrim:var(--selaras-scrim,hsla(0,0%,100%,.05));--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}.selaras-code-tree-code span{color:var(--shiki-light)}.selaras-code-tree-code:where([data-selaras-code-mode=dark]) span,:root.dark .selaras-code-tree-code:where([data-selaras-code-mode=root]) span{color:var(--shiki-dark)}
+@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-toast-in{0%{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*-100%)}}@keyframes selaras-toast-out{to{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*var(--_selaras-toast-exit, -100%))}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{--_selaras-nav-row-height:40px;--_selaras-nav-row-gap:2px;position:relative}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:color-mix(in srgb,var(--selaras-resolved-text-muted) 25%,transparent);content:"";pointer-events:none;position:absolute}.selaras-nav-elbow:before{height:16px;inset-inline-start:-16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M1 0a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M1 0a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;top:calc(var(--_selaras-nav-row-height)/2 - 2px);width:16px}.selaras-nav-elbow:dir(rtl):before{transform:scaleX(-1)}.selaras-nav-elbow:after{bottom:calc(var(--_selaras-nav-row-gap)*-1);inset-inline-start:-15.5px;top:0;width:1px}.selaras-nav-elbow:last-child:after{bottom:auto;height:calc(var(--_selaras-nav-row-height)/2 - 2px)}.selaras-nav-elbow--navigation-menu{--_selaras-nav-row-height:32px;--_selaras-nav-row-gap:4px}.selaras-nav-elbow--file-tree{--_selaras-nav-row-height:28px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}: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-resolved-scrim:var(--selaras-scrim,hsla(0,0%,100%,.05));--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}.selaras-code-tree-code span{color:var(--shiki-light)}.selaras-code-tree-code:where([data-selaras-code-mode=dark]) span,:root.dark .selaras-code-tree-code:where([data-selaras-code-mode=root]) span{color:var(--shiki-dark)}

package/dist/runtime/theme/date-picker.d.ts

@@ -35,6 +35,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }, undefined, {
@@ -74,6 +75,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -113,6 +115,7 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     headCell: string;
     cell: string;
     viewGrid: string;
+    timeSectionStandalone: string;
     timeSection: string;
     arrow: string;
 }>>;

package/dist/runtime/theme/date-picker.js

@@ -49,6 +49,7 @@ export const datePickerTheme = tv({
     viewGrid: "grid grid-cols-3 gap-1",
     // Hour/minute granularity only - sits below the day grid, separated by
     // a divider so it doesn't read as part of the grid itself.
+    timeSectionStandalone: "flex items-center justify-center gap-1.5",
     timeSection: "mt-3 flex items-center justify-center gap-1.5 border-t border-[var(--selaras-resolved-border-default)] pt-3",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },

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

@@ -1,5 +1,9 @@
 import type { VariantProps } from 'tailwind-variants';
 export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -72,8 +76,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }, undefined, {
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -146,8 +156,14 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    contentOrientation: {
+        horizontal: {};
+        vertical: {};
+    };
     orientation: {
         horizontal: {
             root: string;
@@ -220,6 +236,8 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     childLink: string;
     childLinkLabel: string;
     groupLabel: string;
+    collapsedGroupLabel: string;
+    groupSpacer: string;
     separator: string;
 }>>;
 export type NavigationMenuThemeSlots = keyof (typeof navigationMenuTheme)['slots'];

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: {