@llumi/design-system 1.0.1 → 2.1.0

package/download-button.md

@@ -0,0 +1,106 @@
+# `<llumi-download-button>`
+
+Download-a-string-as-a-file icon button with animated success/error feedback.
+
+## What it is
+
+A minimal icon button that downloads a string as a file and shows live state:
+
+| State | Visual |
+|-------|--------|
+| idle | download icon |
+| downloading | spinning indicator (button disabled) |
+| downloaded | green ✓ icon, resets after 1 s |
+| error | red × icon, resets after 1 s |
+
+---
+
+## Usage
+
+> **Requires the base theme.** This is a light-DOM element styled by the design-system stylesheet — load `@llumi/design-system/base.css` (or `base.css`) on the page, or the button renders unstyled.
+
+```html
+<script type="module">
+  import "@llumi/design-system/download-button";
+</script>
+
+<llumi-download-button filename="data.json" mime-type="application/json"></llumi-download-button>
+```
+
+Set the content via the `getValue` function property (Lit binding `.getValue=${…}`,
+or assign it in JS):
+
+```js
+const btn = document.querySelector("llumi-download-button");
+btn.getValue = () => JSON.stringify(state, null, 2);
+```
+
+---
+
+## Attributes and properties
+
+| Name | Type | Default | Notes |
+|------|------|---------|-------|
+| `getValue` | `() => string` prop only | `undefined` | Returns the content to download. Called at click time. No HTML attribute. |
+| `filename` | `string` attr + prop | `""` | **Required.** A click with no filename logs a `console.warn` and does nothing. |
+| `mime-type` | `string` attr (prop `mimeType`) | `"text/plain"` | MIME type passed to the `Blob`. |
+| `title` | `string` attr + prop | `"Download file"` | Native tooltip; mirrored to `aria-label`. |
+| `disabled` | — | — | Managed internally while downloading; do not set manually. |
+
+---
+
+## Events
+
+Both events bubble and are composed.
+
+### `llumi-download`
+
+Fires after the file download is triggered.
+
+```ts
+element.addEventListener("llumi-download", (e: CustomEvent<{ filename: string }>) => {
+  console.log("Downloaded:", e.detail.filename);
+});
+```
+
+### `llumi-download-error`
+
+Fires if building or triggering the download throws.
+
+```ts
+element.addEventListener("llumi-download-error", (e: CustomEvent<{ error: unknown }>) => {
+  console.error("Download failed:", e.detail.error);
+});
+```
+
+---
+
+## Styling
+
+The component renders in **light DOM**, so style the inner `<button>` directly —
+no shadow piercing required:
+
+```css
+llumi-download-button button {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+}
+```
+
+The shared icon-button look (and `.is-done` / `.is-error` state colours) is defined
+once in `base.css` and shared with `<llumi-copy-button>`.
+
+### CSS custom properties
+
+Each token has a sensible `oklch` fallback.
+
+| Token | Role | Fallback |
+|-------|------|---------|
+| `--llumi-color-success` | Border + icon colour in the downloaded state | `oklch(62.7% 0.194 149.214)` (green) |
+| `--llumi-color-danger` | Border + icon colour in the error state | `oklch(57.7% 0.245 27.325)` (red) |
+| `--llumi-color-surface` | Button background | `oklch(100% 0 0)` (white) |
+| `--llumi-color-border` | Button border | `oklch(92% 0.004 286.32)` (light grey) |
+| `--llumi-color-fg` | Icon colour (idle) | `oklch(21% 0.006 285.885)` (near-black) |
+| `--llumi-color-ring` | Focus-visible outline | `oklch(55.8% 0.288 302.321)` (purple) |
+| `--llumi-radius` | Button border-radius | `0.5rem` |

package/download-button.mjs

@@ -0,0 +1,177 @@
+import { html as u } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+import { property as l, customElement as p } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js";
+import { i as a } from "./icons-BaUbjt-v.js";
+import { L as f } from "./llumi-element-BWRwgzW5.js";
+import { defineMachine as h } from "https://cdn.jsdelivr.net/npm/yay-machine@1.5.0";
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const d = 1e3, O = h({
+  initialState: { name: "idle" },
+  states: {
+    idle: {
+      on: {
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    },
+    downloading: {
+      onEnter: ({ state: e, send: t }) => {
+        try {
+          const i = URL.createObjectURL(
+            new Blob([e.text], { type: e.mimeType })
+          ), o = document.createElement("a");
+          o.href = i, o.download = e.filename, o.click(), URL.revokeObjectURL(i), queueMicrotask(
+            () => t({ type: "DOWNLOAD_SUCCESS", filename: e.filename })
+          );
+        } catch (i) {
+          queueMicrotask(() => t({ type: "DOWNLOAD_ERROR", error: i }));
+        }
+      },
+      on: {
+        DOWNLOAD_SUCCESS: { to: "downloaded" },
+        DOWNLOAD_ERROR: { to: "error" }
+      }
+    },
+    downloaded: {
+      onEnter: ({ send: e }) => {
+        const t = setTimeout(() => e({ type: "DONE" }), d);
+        return () => clearTimeout(t);
+      },
+      on: {
+        DONE: { to: "idle" },
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    },
+    error: {
+      onEnter: ({ send: e }) => {
+        const t = setTimeout(() => e({ type: "DONE" }), d);
+        return () => clearTimeout(t);
+      },
+      on: {
+        DONE: { to: "idle" },
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    }
+  }
+});
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, t, i, o) => {
+  for (var n = o > 1 ? void 0 : o ? w(t, i) : t, c = e.length - 1, m; c >= 0; c--)
+    (m = e[c]) && (n = (o ? m(t, i, n) : m(n)) || n);
+  return o && n && b(t, i, n), n;
+};
+function y(e) {
+  throw new Error(`Unexpected state: ${JSON.stringify(e)}`);
+}
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.filename = "", this.mimeType = "text/plain", this.title = "Download file";
+  }
+  /** Light DOM so the document-level base.css button style applies. */
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.instance = O.newInstance().start(), this.unsubscribe = this.instance.subscribe(
+      ({ state: e, event: t }) => this.onTransition(e, t)
+    );
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), (e = this.unsubscribe) == null || e.call(this), this.unsubscribe = void 0, (t = this.instance) == null || t.stop(), this.instance = void 0;
+  }
+  onTransition(e, t) {
+    (t == null ? void 0 : t.type) === "DOWNLOAD_SUCCESS" ? this.dispatchEvent(
+      new CustomEvent("llumi-download", {
+        detail: { filename: t.filename },
+        bubbles: !0,
+        composed: !0
+      })
+    ) : (t == null ? void 0 : t.type) === "DOWNLOAD_ERROR" && this.dispatchEvent(
+      new CustomEvent("llumi-download-error", {
+        detail: { error: t.error },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.requestUpdate();
+  }
+  onClick() {
+    var e, t;
+    if (!this.filename) {
+      console.warn(
+        '<llumi-download-button>: "filename" is required; ignoring click'
+      );
+      return;
+    }
+    (t = this.instance) == null || t.send({
+      type: "DOWNLOAD",
+      text: ((e = this.getValue) == null ? void 0 : e.call(this)) ?? "",
+      filename: this.filename,
+      mimeType: this.mimeType
+    });
+  }
+  viewFor(e) {
+    switch (e) {
+      case "idle":
+        return { icon: a.download, cls: "" };
+      case "downloading":
+        return { icon: a.spinner, cls: "is-working" };
+      case "downloaded":
+        return { icon: a.check, cls: "is-done" };
+      case "error":
+        return { icon: a.x, cls: "is-error" };
+      default:
+        return y(e);
+    }
+  }
+  render() {
+    var i;
+    const e = ((i = this.instance) == null ? void 0 : i.state.name) ?? "idle", t = this.viewFor(e);
+    return u`<button
+			type="button"
+			class=${t.cls}
+			title=${this.title}
+			aria-label=${this.title}
+			?disabled=${e === "downloading"}
+			@click=${this.onClick}
+		>
+			<i>${t.icon}</i>
+		</button>`;
+  }
+};
+s([
+  l()
+], r.prototype, "filename", 2);
+s([
+  l({ attribute: "mime-type" })
+], r.prototype, "mimeType", 2);
+s([
+  l()
+], r.prototype, "title", 2);
+s([
+  l({ attribute: !1 })
+], r.prototype, "getValue", 2);
+r = s([
+  p("llumi-download-button")
+], r);
+export {
+  r as LlumiDownloadButton
+};

package/highlighter.md

@@ -0,0 +1,45 @@
+# llumi-highlighter
+
+Syntax-highlighted code block (Prism via `refractor`), with 4 themes, an optional
+copy button, and line-range dimming. Renders in **shadow DOM** (theme/token CSS is
+encapsulated).
+
+## Usage
+
+Load the design-system base stylesheet once (for the document), then the component:
+
+```html
+<link rel="stylesheet" href="@llumi/design-system/base.css" />
+<script type="module" src="@llumi/design-system/highlighter"></script>
+
+<!-- code via the `code` property (recommended) -->
+<llumi-highlighter language="typescript"></llumi-highlighter>
+<script>
+  document.querySelector("llumi-highlighter").code =
+    "const greet = (name) => console.log(name);";
+</script>
+
+<!-- or as text content -->
+<llumi-highlighter language="rust">fn main() { println!("hi"); }</llumi-highlighter>
+```
+
+## Properties / attributes
+
+| Name | Attr | Type | Default | Description |
+|------|------|------|---------|-------------|
+| `language` | `language` | `string` | `""` | Prism language id (e.g. `typescript`, `python`). Aliases: `ts`, `js`, `py`, `rs`, `sh`, `md`, `html`. Unsupported → plain text + a console warning. |
+| `theme` | `theme` | `ghcolors \| oneLight \| oneDark \| dracula` | `ghcolors` | Color theme. |
+| `code` | `code` | `string` | `""` | Code source; falls back to the element's text content. |
+| `highlight` | — (property) | `[number, number][]` | — | 1-based line ranges. When set, line numbers show and other lines dim to 30% opacity. |
+| `copyButton` | `copy-button` | `boolean` | `true` | Show the copy button. Disable with `copy-button="false"`. |
+
+## Events
+
+The embedded copy button emits (bubbling, composed — they cross the shadow boundary):
+`llumi-copy` `{ detail: { text } }` and `llumi-copy-error` `{ detail: { error } }`.
+
+## Supported languages
+
+`markup`/`html`/`xml`, `css`, `javascript`/`js`, `jsx`, `typescript`/`ts`, `tsx`,
+`json`, `bash`/`sh`/`shell`, `python`/`py`, `rust`/`rs`, `go`, `java`, `yaml`,
+`markdown`/`md`, `sql`, `diff`. (Grammars load lazily on first use.)