@sewadah/selaras 0.8.0 → 0.9.0

package/dist/runtime/theme/select.js

@@ -8,6 +8,8 @@ export const selectTheme = tv({
     // let the plain gray hover ring beat the primary one in the cascade,
     // since they're all equal-specificity pseudo-class/attribute selectors.
     trigger: "inline-flex w-full min-h-10 flex-wrap items-center gap-1.5 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] outline-none transition-[color,background-color,box-shadow] not-focus:not-focus-within:not-data-[state=open]:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] focus-within:ring-2 focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-2 data-[state=open]:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leading: "absolute start-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute end-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     value: "flex-1 truncate text-start text-[var(--selaras-resolved-text-default)] data-[placeholder]:text-[var(--selaras-resolved-text-muted)]",
     // Both chip display branches render a real Chip (see
     // ComboboxSelectBase.vue) instead of hand-rolled markup, styled/

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

@@ -51,6 +51,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -107,6 +109,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -163,6 +167,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/textarea.js

@@ -9,6 +9,8 @@ export const textareaTheme = tv({
     // way Input's own icons are - once content wraps past one line,
     // centering against the whole (variable) box height would drift the
     // icon away from the first line of text it's meant to sit beside.
+    leading: "absolute top-1 start-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute top-1 end-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     leadingIcon: "absolute start-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     clear: "absolute end-1 top-1 shrink-0 rounded-full"

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

@@ -97,6 +97,7 @@ export type { ThemeComponentRegistry, ThemeConfiguration, ThemeDefaults, ThemeUi
 export type { ArrowConfig, RoundedArrowConfig } from '../utils/arrow.js';
 export type { AutocompleteValue } from '../utils/autocomplete-contracts.js';
 export type { BuiltinColorName, ColorRecipe, ColorRecipeInput, ColorRole, RuntimeColorOverrides, RuntimeThemeMode, RuntimeTokenOverrides } from '../utils/color-registry.js';
+export type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 export type { FunctionalTokenOverrides, GeometryTokenOverrides, ThemeTokenOverrides } from '../utils/functional-tokens.js';
 export type { IconRegistry } from '../utils/icons.js';
 export { defaultIcons } from '../utils/icons.js';

package/dist/runtime/utils/field-adornments.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'vue';
+export interface FieldAdornmentSlotProps {
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    /** Button size that fits inside the field. */
+    buttonSize: 'sm' | 'md';
+}
+/** Reserve the rendered width of custom content, including dynamic suffixes. */
+export declare function useFieldAdornments(): {
+    leading: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    trailing: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    padding: (hasLeading: boolean, hasTrailing: boolean, trailingExtra?: string) => CSSProperties | undefined;
+    clearOffset: () => CSSProperties;
+};

package/dist/runtime/utils/field-adornments.js

@@ -0,0 +1,36 @@
+import { shallowRef, watchEffect } from "vue";
+export function useFieldAdornments() {
+  const leading = shallowRef(null);
+  const trailing = shallowRef(null);
+  const leadingWidth = shallowRef();
+  const trailingWidth = shallowRef();
+  watchEffect((onCleanup) => {
+    const start = leading.value;
+    const end = trailing.value;
+    function measure() {
+      leadingWidth.value = start ? `${start.getBoundingClientRect().width}px` : void 0;
+      trailingWidth.value = end ? `${end.getBoundingClientRect().width}px` : void 0;
+    }
+    measure();
+    if (!start && !end || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(measure);
+    if (start)
+      observer.observe(start);
+    if (end)
+      observer.observe(end);
+    onCleanup(() => observer.disconnect());
+  }, { flush: "post" });
+  function padding(hasLeading, hasTrailing, trailingExtra = "0rem") {
+    if (!hasLeading && !hasTrailing)
+      return;
+    return {
+      paddingInlineStart: hasLeading ? `calc(${leadingWidth.value ?? "2rem"} + 0.5rem)` : void 0,
+      paddingInlineEnd: hasTrailing ? `calc(${trailingWidth.value ?? "2rem"} + 0.5rem + ${trailingExtra})` : void 0
+    };
+  }
+  function clearOffset() {
+    return { insetInlineEnd: `calc(${trailingWidth.value ?? "2rem"} + 0.25rem)` };
+  }
+  return { leading, trailing, padding, clearOffset };
+}

package/dist/runtime/utils/select-contracts.d.ts

@@ -2,6 +2,7 @@ import type { VariantProps } from 'tailwind-variants';
 import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from './arrow.js';
 import type { ColorRole } from './color-registry.js';
+import type { FieldAdornmentSlotProps } from './field-adornments.js';
 import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
@@ -94,6 +95,8 @@ export interface SelectEmits<Entry extends SelectEntry = {
     'update:searchTerm': [value: string];
 }
 export interface SelectSlots<Entry extends SelectEntry, Key extends string = 'value'> {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
     'item'?: (props: {
         item: SelectEntryItem<Entry>;
     }) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -105,16 +105,17 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "bun run docs:prepare && nuxt dev docs",
+    "dev": "bun run docs:prepare && bun run --cwd docs dev",
     "dev:build": "bun run docs:build",
     "dev:generate": "bun run docs:generate",
     "dev:preview": "bunx nuxt preview docs",
     "dev:prepare": "bun run docs:prepare",
-    "docs:build": "nuxt build docs",
+    "docs:build": "bun run --cwd docs build",
     "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:generate": "bun run --cwd docs generate",
     "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",
+    "test:docs-seo": "node scripts/check-docs-seo.mjs",
     "release": "bun run release:both",
     "release:both": "bun run release:selaras && bun run release:docs",
     "release:selaras": "bun run lint && bun run test && (if [ -n \"$RELEASE_VERSION\" ]; then npx changelogen --bump -r \"$RELEASE_VERSION\"; elif [ \"${RELEASE_BUMP:-auto}\" = \"auto\" ]; then npx changelogen --bump; else npx changelogen --bump \"--$RELEASE_BUMP\"; fi) && bun run test:release && npm publish --access public && bash scripts/tag-and-push-release.sh selaras && changelogen gh release",

package/skills/selaras/SKILL.md

@@ -11,7 +11,7 @@ Use the existing Selaras catalog to compose the requested interface. Check docum
 
 If a Selaras MCP connection is available, start with `list_components` or `search_documentation`, then use `get_documentation` and `get_example` for matching APIs and examples. Its offline catalog follows the installed package version. Tools retrieve documentation; use the user's requirements to decide which components fit. Do not assume a missing MCP connection prevents the task.
 
-Without MCP, read the [documentation index](https://sewadahapp.github.io/selaras/llms.txt), then retrieve the relevant Markdown guides through its links. Each guide includes component contracts and Vue example source. Prefer targeted pages over loading `llms-full.txt` for every task.
+Without MCP, read the [documentation index](https://selarasui.my.id/llms.txt), then retrieve the relevant Markdown guides through its links. Each guide includes component contracts and Vue example source. Prefer targeted pages over loading `llms-full.txt` for every task.
 
 If the project has Selaras installed, inspect its package version and existing Nuxt configuration first. Published web documentation may describe a newer version; confirm uncertain APIs against installed public types. Component names below use the default `S` prefix; the application can configure another prefix.
 
@@ -27,14 +27,14 @@ These are discovery hints, not substitute API definitions. Read the matching cat
 
 ## Integration and customization
 
-For a new integration, read [Installation](https://sewadahapp.github.io/selaras/raw/overview/getting-started/installation.md) and [Nuxt configuration](https://sewadahapp.github.io/selaras/raw/overview/getting-started/nuxt-configuration.md). Existing projects may already have providers and styles configured; inspect before changing them.
+For a new integration, read [Installation](https://selarasui.my.id/raw/overview/getting-started/installation.md) and [Nuxt configuration](https://selarasui.my.id/raw/overview/getting-started/nuxt-configuration.md). Existing projects may already have providers and styles configured; inspect before changing them.
 
 - `SApp` supplies shared providers. Toast and CommandPalette still require the documented mounted components.
 - Use supported props for behavior and appearance, slots for custom content, `class` for the root, and `ui` for documented component parts.
-- Read [Theming](https://sewadahapp.github.io/selaras/raw/overview/theming/overview.md) for CSS tokens, global `app.config.selaras.ui` and defaults, or scoped `STheme`. Do not invent slot names or assume every prop has a global default.
-- Read [Icons](https://sewadahapp.github.io/selaras/raw/overview/getting-started/icons.md) for Nuxt Icon loading and configuration. Internal icon purposes use `app.config.selaras.icons`; explicitly supplied icons remain local.
-- Read [Messages](https://sewadahapp.github.io/selaras/raw/overview/getting-started/messages.md) for internal text and accessible labels. The formatting locale and translated messages are separate settings.
-- Read [Color modes](https://sewadahapp.github.io/selaras/raw/overview/theming/color-modes.md) for light, dark, and system preferences. Documentation showcase themes are not automatically installed application presets.
-- Read [Adaptive interfaces](https://sewadahapp.github.io/selaras/raw/overview/getting-started/adaptive-interfaces.md) before opting supported controls into mobile modal presentation. `adaptive` is opt-in, not a universal component prop.
+- Read [Theming](https://selarasui.my.id/raw/overview/theming/overview.md) for CSS tokens, global `app.config.selaras.ui` and defaults, or scoped `STheme`. Do not invent slot names or assume every prop has a global default.
+- Read [Icons](https://selarasui.my.id/raw/overview/getting-started/icons.md) for Nuxt Icon loading and configuration. Internal icon purposes use `app.config.selaras.icons`; explicitly supplied icons remain local.
+- Read [Messages](https://selarasui.my.id/raw/overview/getting-started/messages.md) for internal text and accessible labels. The formatting locale and translated messages are separate settings.
+- Read [Color modes](https://selarasui.my.id/raw/overview/theming/color-modes.md) for light, dark, and system preferences. Documentation showcase themes are not automatically installed application presets.
+- Read [Adaptive interfaces](https://selarasui.my.id/raw/overview/getting-started/adaptive-interfaces.md) before opting supported controls into mobile modal presentation. `adaptive` is opt-in, not a universal component prop.
 
 Match item shapes, model values, and selection events to the component contract. Preserve accessible names, keyboard behavior, focus restoration, and form associations when customizing slots. Validate interactions relevant to the change in the project's normal checks, including mobile presentation when enabled.