@lyeve-labs/ui-kit 0.9.1 → 0.10.0

package/dist/styles/theme.css

@@ -15,6 +15,21 @@
 
 @import 'tailwindcss';
 
+/*
+ * Tailwind scans the importing app's own source and, by default, skips
+ * node_modules. Without this line it never reads the kit's components, so it
+ * emits the tokens above and not one of the utility classes those components
+ * are built from. The kit appeared to work only because a host app happened to
+ * use the same class names in its own pages: whatever the app never wrote for
+ * itself was missing from the kit's components too, and two apps with different
+ * pages lost different parts of the same component. Every class the kit needs
+ * now comes from the kit.
+ *
+ * The path is relative to this file and resolves to the package's dist/, which
+ * is present in every published tarball.
+ */
+@source '../../../dist';
+
 /* ── Soft Dark · default palette ─────────────────────────────────────────── */
 @theme {
   --color-ink: #0b1422;
@@ -23,15 +38,20 @@
   --color-line: #1e2d40;
   --color-fg: #e6e8ee;
   --color-muted: #9aa1ad;
-  --color-faint: #525866;
+  /* #525866 failed WCAG AA against surface/ink (~2.5:1); every caption and
+   * metadata label uses faint, so one token fix clears the systemic
+   * violation. #8b94a7 sits at ~5.6:1 on surface and ~5.9:1 on ink. */
+  --color-faint: #8b94a7;
 
   --color-brand: #00d4ff;
   --color-brand-light: #5fd9f4;
   --color-brand-deep: #0099c4;
   --color-violet: #7c6aef;
 
-  --color-success: #15803d;
-  --color-warn: #b45309;
+  /* #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;
+  --color-warn: #f59e0b;
   --color-danger: #b91c1c;
 
   /* ── Radius ─────────────────────────────────────────────────── */
@@ -91,6 +111,10 @@
   --spacing-section: 3rem; /* 48px - section gap                */
   --spacing-input-x: 0.75rem; /* 12px - input horizontal padding   */
   --spacing-input-y: 0.5rem; /* 8px  - input vertical padding     */
+  /* 38px - the height of every single-line control. Stated once so an Input,
+   * a Select and a NumberInput sitting in the same row line up. Derived from
+   * the 13px/1.25 control text plus input-y padding and a 1px border. */
+  --spacing-control: 2.375rem;
   --spacing-stack: 1rem; /* 16px - default vertical stack gap */
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
 }
@@ -103,7 +127,9 @@ html[data-theme='light'] {
   --color-line: #d6d9e0;
   --color-fg: #111827;
   --color-muted: #525866;
-  --color-faint: #9aa1ad;
+  /* #9aa1ad on white is ~3.1:1, below the 4.5:1 AA floor; #6b7280 sits
+   * at ~4.8:1 while staying visually tertiary. */
+  --color-faint: #6b7280;
 
   --color-brand: #007ea6;
   --color-brand-light: #00b4dd;

package/dist/utils/broken-image.d.ts

@@ -0,0 +1,21 @@
+import type { Action } from 'svelte/action';
+/**
+ * Reports that an image inside `node` could not be decoded.
+ *
+ * The obvious place for this is an `onerror` handler on the `<img>` itself,
+ * and that is what breaks. Svelte's server renderer stamps
+ * `onload="this.__e=event"` and `onerror="this.__e=event"` onto any `<img>`,
+ * `<iframe>`, `<link>` or `<script>` carrying an `onload`/`onerror` handler, a
+ * spread or a `use:` directive, so events that fire before hydration can be
+ * replayed afterwards. Consumers serve this kit under a `script-src` policy
+ * with a nonce and no `unsafe-inline`, and a nonce never covers an event
+ * handler attribute, so the browser blocks that snippet and logs a violation
+ * for every element it rendered. Hydration then strips the attributes, which
+ * is why the markup looks innocent by the time anyone inspects it.
+ *
+ * Attaching from a wrapper element keeps the `<img>` free of all three, so the
+ * server sends no inline handler at all. `error` does not bubble, hence the
+ * capture phase, and an image that already failed fires nothing more, so its
+ * settled state is read once on attach.
+ */
+export declare const brokenImage: Action<HTMLElement, () => void>;

package/dist/utils/broken-image.js

@@ -0,0 +1,40 @@
+/**
+ * Reports that an image inside `node` could not be decoded.
+ *
+ * The obvious place for this is an `onerror` handler on the `<img>` itself,
+ * and that is what breaks. Svelte's server renderer stamps
+ * `onload="this.__e=event"` and `onerror="this.__e=event"` onto any `<img>`,
+ * `<iframe>`, `<link>` or `<script>` carrying an `onload`/`onerror` handler, a
+ * spread or a `use:` directive, so events that fire before hydration can be
+ * replayed afterwards. Consumers serve this kit under a `script-src` policy
+ * with a nonce and no `unsafe-inline`, and a nonce never covers an event
+ * handler attribute, so the browser blocks that snippet and logs a violation
+ * for every element it rendered. Hydration then strips the attributes, which
+ * is why the markup looks innocent by the time anyone inspects it.
+ *
+ * Attaching from a wrapper element keeps the `<img>` free of all three, so the
+ * server sends no inline handler at all. `error` does not bubble, hence the
+ * capture phase, and an image that already failed fires nothing more, so its
+ * settled state is read once on attach.
+ */
+export const brokenImage = (node, onBroken) => {
+    let notify = onBroken;
+    const flag = (event) => {
+        if (event.target instanceof HTMLImageElement)
+            notify();
+    };
+    node.addEventListener('error', flag, true);
+    // An <img> with no src is also `complete` at zero width, so the src has to be
+    // part of the test or every placeholder reports itself broken.
+    const img = node.querySelector('img');
+    if (img?.getAttribute('src') && img.complete && img.naturalWidth === 0)
+        notify();
+    return {
+        update(next) {
+            notify = next;
+        },
+        destroy() {
+            node.removeEventListener('error', flag, true);
+        },
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",
@@ -28,8 +28,10 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "svelte-package && publint && node scripts/check-dist.mjs",
-    "package": "svelte-package && publint",
+    "build": "pnpm version:check && svelte-package && publint && node scripts/check-dist.mjs",
+    "version:sync": "node scripts/sync-version.mjs",
+    "version:check": "node scripts/sync-version.mjs --check",
+    "package": "pnpm version:check && svelte-package && publint",
     "prepublishOnly": "pnpm package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
@@ -59,8 +61,7 @@
     "svelte": "^5.0.0"
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "access": "public"
   },
   "dependencies": {
     "@lucide/svelte": "^0.511.0"

package/src/lib/styles/theme.css

@@ -15,6 +15,21 @@
 
 @import 'tailwindcss';
 
+/*
+ * Tailwind scans the importing app's own source and, by default, skips
+ * node_modules. Without this line it never reads the kit's components, so it
+ * emits the tokens above and not one of the utility classes those components
+ * are built from. The kit appeared to work only because a host app happened to
+ * use the same class names in its own pages: whatever the app never wrote for
+ * itself was missing from the kit's components too, and two apps with different
+ * pages lost different parts of the same component. Every class the kit needs
+ * now comes from the kit.
+ *
+ * The path is relative to this file and resolves to the package's dist/, which
+ * is present in every published tarball.
+ */
+@source '../../../dist';
+
 /* ── Soft Dark · default palette ─────────────────────────────────────────── */
 @theme {
   --color-ink: #0b1422;
@@ -23,15 +38,20 @@
   --color-line: #1e2d40;
   --color-fg: #e6e8ee;
   --color-muted: #9aa1ad;
-  --color-faint: #525866;
+  /* #525866 failed WCAG AA against surface/ink (~2.5:1); every caption and
+   * metadata label uses faint, so one token fix clears the systemic
+   * violation. #8b94a7 sits at ~5.6:1 on surface and ~5.9:1 on ink. */
+  --color-faint: #8b94a7;
 
   --color-brand: #00d4ff;
   --color-brand-light: #5fd9f4;
   --color-brand-deep: #0099c4;
   --color-violet: #7c6aef;
 
-  --color-success: #15803d;
-  --color-warn: #b45309;
+  /* #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;
+  --color-warn: #f59e0b;
   --color-danger: #b91c1c;
 
   /* ── Radius ─────────────────────────────────────────────────── */
@@ -91,6 +111,10 @@
   --spacing-section: 3rem; /* 48px - section gap                */
   --spacing-input-x: 0.75rem; /* 12px - input horizontal padding   */
   --spacing-input-y: 0.5rem; /* 8px  - input vertical padding     */
+  /* 38px - the height of every single-line control. Stated once so an Input,
+   * a Select and a NumberInput sitting in the same row line up. Derived from
+   * the 13px/1.25 control text plus input-y padding and a 1px border. */
+  --spacing-control: 2.375rem;
   --spacing-stack: 1rem; /* 16px - default vertical stack gap */
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
 }
@@ -103,7 +127,9 @@ html[data-theme='light'] {
   --color-line: #d6d9e0;
   --color-fg: #111827;
   --color-muted: #525866;
-  --color-faint: #9aa1ad;
+  /* #9aa1ad on white is ~3.1:1, below the 4.5:1 AA floor; #6b7280 sits
+   * at ~4.8:1 while staying visually tertiary. */
+  --color-faint: #6b7280;
 
   --color-brand: #007ea6;
   --color-brand-light: #00b4dd;