@lyeve-labs/ui-kit 0.29.0 → 0.30.0

package/dist/components/Dropdown.svelte

@@ -257,7 +257,7 @@
       role="menu"
       use:placePanel
       transition:motion.popover|global
-      class="{PANEL_SURFACE} min-w-36 {align === 'right' ? 'end-0' : 'start-0'}"
+      class="{PANEL_SURFACE} w-max min-w-36 max-w-xs {align === 'right' ? 'end-0' : 'start-0'}"
     >
       <div class={PANEL_LIST} data-panel-list>
         {#each items as item, index}
@@ -267,7 +267,7 @@
             disabled={item.disabled}
             tabindex={index === active ? 0 : -1}
             onclick={() => handleItemClick(item)}
-            class="{TOUCH_GROW} flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors
+            class="{TOUCH_GROW} flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm whitespace-nowrap transition-colors
               outline-none focus-visible:ring-2 focus-visible:ring-inset
               focus-visible:ring-brand disabled:cursor-not-allowed disabled:opacity-40
               {item.variant === 'danger' ? 'text-danger hover:bg-danger/10' : 'hover:bg-surface-2'}"

package/dist/components/Input.svelte

@@ -31,6 +31,12 @@
     required?: boolean;
     id?: string;
     name?: string;
+    /**
+     * Monospace for the control alone: a slug, a key, a locale tag. Passing
+     * `font-mono` as a class reached the wrapper, so the label and the hint
+     * turned monospace with it.
+     */
+    mono?: boolean;
     class?: string;
   }
 
@@ -44,6 +50,7 @@
     disabled = false,
     required = false,
     id = undefined,
+    mono = false,
     class: klass = '',
     ...rest
   }: Props = $props();
@@ -67,7 +74,7 @@
     bind:value
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={describedBy(fieldId, error, hint)}
-    class="{CONTROL_BASE} {controlBorder(!!error)}"
+    class="{CONTROL_BASE} {controlBorder(!!error)} {mono ? 'font-mono' : ''}"
     {...rest}
   />
 

package/dist/components/Input.svelte.d.ts

@@ -16,6 +16,12 @@ interface Props extends Forwarded {
     required?: boolean;
     id?: string;
     name?: string;
+    /**
+     * Monospace for the control alone: a slug, a key, a locale tag. Passing
+     * `font-mono` as a class reached the wrapper, so the label and the hint
+     * turned monospace with it.
+     */
+    mono?: boolean;
     class?: string;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;

package/dist/components/SegmentedControl.svelte

@@ -199,7 +199,7 @@
         'inline-flex items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed ' +
         SIZES[size].segment +
         (selected
-          ? ' bg-surface text-fg shadow-sm'
+          ? ' bg-surface text-brand shadow-sm ring-1 ring-inset ring-brand/40'
           : ' text-muted hover:text-fg active:bg-surface active:text-fg')}
       {#snippet content()}
         {#if Icon}

package/dist/components/Textarea.svelte

@@ -26,6 +26,7 @@
     resize = true,
     error,
     hint,
+    mono = false,
     class: cls = '',
     oninput,
     onblur,
@@ -43,6 +44,12 @@
     resize?: boolean;
     error?: string;
     hint?: string;
+    /**
+     * Monospace for the control alone: code, JSON, a key. Passing `font-mono`
+     * as a class reached the wrapper, so the label and the hint turned
+     * monospace with it.
+     */
+    mono?: boolean;
     class?: string;
     oninput?: (e: TAE) => void;
     onblur?: (e: FocusEvent & { currentTarget: TA }) => void;
@@ -69,7 +76,7 @@
     {placeholder}
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={describedBy(fieldId, error, hint)}
-    class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'}"
+    class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'} {mono ? 'font-mono' : ''}"
     bind:value
     {oninput}
     {onblur}

package/dist/components/Textarea.svelte.d.ts

@@ -16,6 +16,12 @@ type $$ComponentProps = {
     resize?: boolean;
     error?: string;
     hint?: string;
+    /**
+     * Monospace for the control alone: code, JSON, a key. Passing `font-mono`
+     * as a class reached the wrapper, so the label and the hint turned
+     * monospace with it.
+     */
+    mono?: boolean;
     class?: string;
     oninput?: (e: TAE) => void;
     onblur?: (e: FocusEvent & {

package/dist/index.d.ts

@@ -93,4 +93,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.29.0";
+export declare const VERSION = "0.30.0";

package/dist/index.js

@@ -103,4 +103,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.29.0';
+export const VERSION = '0.30.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",