@lyeve-labs/ui-kit 0.28.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/Logo.svelte

@@ -11,9 +11,11 @@
    * drew a near-black column on a dark surface. There is no media query here
    * for that reason, and none belongs here.
    *
-   * The neutral faces come from currentColor and the lit faces from the brand
-   * ramp, so every face answers the same tokens as the rest of the page and a
-   * palette change reaches the mark with everything else.
+   * Every face and the wordmark paint from the mark-* tokens, which carry the
+   * brand book's colours per theme: the same lockup the documentation site
+   * ships as a static file. They are separate from the brand ramp because that
+   * ramp darkens for text contrast in the light theme and inverts the mark's
+   * lighting there.
    */
 
   type Size = 'sm' | 'md' | 'lg';
@@ -47,10 +49,7 @@
   const px = $derived(marks[size]);
 </script>
 
-<!-- text-fg is stated here rather than inherited. The mark is usually wrapped
-     in a link that carries no colour of its own, so currentColor would
-     otherwise be whatever that ancestor happened to hold. -->
-<span class="inline-flex items-center gap-2 text-fg {klass}">
+<span class="inline-flex items-center gap-2 {klass}">
   <span class="inline-flex shrink-0 items-center justify-center">
     <svg
       width={px}
@@ -60,18 +59,24 @@
       aria-hidden="true"
     >
       <g transform="translate(6 4)">
-        <polygon class="fill-current" points="0,14 14,7 14,40 0,47" />
-        <polygon class="fill-current opacity-50" points="0,47 14,40 14,54 0,61" />
-        <polygon class="fill-current opacity-75" points="14,40 28,33 28,47 14,54" />
-        <polygon class="fill-brand-light" points="14,54 28,47 56,33 42,40" />
-        <polygon class="fill-brand-deep" points="42,40 56,33 56,47 42,54" />
-        <polygon class="fill-brand" points="14,54 28,61 42,54 28,47" />
-        <polygon class="fill-brand" points="28,47 42,54 56,47 42,40" />
+        <polygon class="fill-mark-ink" points="0,14 14,7 14,40 0,47" />
+        <polygon class="fill-mark-foot" points="0,47 14,40 14,54 0,61" />
+        <polygon class="fill-mark-step" points="14,40 28,33 28,47 14,54" />
+        <polygon class="fill-mark-top" points="14,54 28,47 56,33 42,40" />
+        <polygon class="fill-mark-side" points="42,40 56,33 56,47 42,54" />
+        <polygon class="fill-mark-face" points="14,54 28,61 42,54 28,47" />
+        <polygon class="fill-mark-face" points="28,47 42,54 56,47 42,40" />
       </g>
     </svg>
   </span>
 
   {#if wordmark}
-    <span class="font-semibold tracking-tight {words[size]}">LyEve</span>
+    <!-- The accent splits the word across two elements, which some screen
+         readers announce letter group by letter group, so the painted word is
+         hidden and the name is given once as plain text. -->
+    <span class="font-bold tracking-tight text-mark-ink {words[size]}">
+      <span aria-hidden="true">Ly<span class="text-mark-accent">E</span>ve</span>
+      <span class="sr-only">LyEve</span>
+    </span>
   {/if}
 </span>

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

@@ -10,9 +10,11 @@
  * drew a near-black column on a dark surface. There is no media query here
  * for that reason, and none belongs here.
  *
- * The neutral faces come from currentColor and the lit faces from the brand
- * ramp, so every face answers the same tokens as the rest of the page and a
- * palette change reaches the mark with everything else.
+ * Every face and the wordmark paint from the mark-* tokens, which carry the
+ * brand book's colours per theme: the same lockup the documentation site
+ * ships as a static file. They are separate from the brand ramp because that
+ * ramp darkens for text contrast in the light theme and inverts the mark's
+ * lighting there.
  */
 type Size = 'sm' | 'md' | 'lg';
 interface Props {

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.28.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.28.0';
+export const VERSION = '0.30.0';

package/dist/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.28.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>",

package/src/lib/styles/theme.css

@@ -57,6 +57,19 @@
    * paints it on and the badge as well. */
   --color-violet: #9587f2;
 
+  /* The product mark's faces, at the brand book's values. They are their own
+   * tokens because the brand ramp above is tuned for text contrast: in the
+   * light theme it darkens to #005a77 and brand-light sits below brand, so a
+   * mark painted from it inverts its lighting. A logotype is exempt from the
+   * contrast floor, so these keep the published colours instead. */
+  --color-mark-ink: #ffffff;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #00d4ff;
+  --color-mark-side: #0099c4;
+  --color-mark-face: #00b4dd;
+  --color-mark-accent: #00d4ff;
+
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
@@ -396,12 +409,33 @@ html[data-theme='light'] {
   --color-brand-light: #004f69;
   --color-brand-deep: #00455c;
   --color-violet: #5544da;
+  --color-mark-ink: #0a0e14;
+  --color-mark-foot: #9aa1ad;
+  --color-mark-step: #c5cad3;
+  --color-mark-top: #0099c4;
+  --color-mark-side: #006a8a;
+  --color-mark-face: #007ea6;
+  --color-mark-accent: #00d4ff;
 
   --color-success: #126c34;
   --color-warn: #904207;
   --color-danger: #ab1a1a;
 }
 
+/*
+ * A forced-colors scheme repaints the page but not a fill named in hex, so the
+ * mark's white column vanished on a white high-contrast canvas. Its neutral
+ * faces take the system colours there; the cyan faces keep their shape.
+ */
+@media (forced-colors: active) {
+  :root,
+  html[data-theme='light'] {
+    --color-mark-ink: CanvasText;
+    --color-mark-foot: GrayText;
+    --color-mark-step: GrayText;
+  }
+}
+
 /*
  * The four durations as utilities. A --duration-* token generates nothing
  * (see the motion section of the @theme block), so each is declared here the
@@ -552,6 +586,13 @@ html[data-theme='light'] {
     --color-brand-light: #000000;
     --color-brand-deep: #000000;
     --color-violet: #000000;
+    /* The mark keeps its light-theme faces: in black every face is one
+     * shape and the L is gone. Printing from the dark theme would otherwise
+     * put a white column on white paper. */
+    --color-mark-ink: #0a0e14;
+    --color-mark-top: #0099c4;
+    --color-mark-side: #006a8a;
+    --color-mark-face: #007ea6;
     --color-success: #000000;
     --color-warn: #000000;
     --color-danger: #000000;