@madojs/mado 0.6.1 → 0.7.0

package/docs/uk/17-shadow-dom-forms.md

@@ -0,0 +1,193 @@
+# Shadow DOM + форми
+
+Використання `useForm()` з кастомними input-компонентами у Shadow DOM потребує
+знання двох поведінок на рівні браузера:
+
+1. **Ретаргетинг подій** — події, що спливають із Shadow DOM, мають
+   `e.target`, перенаправлений на host-елемент. `useForm().onInput` читає
+   `e.target.name` та `e.target.value`, але host-елемент `<x-input>`
+   не має цих властивостей нативно.
+
+2. **Асоціація з формою** — `<button type="submit">` всередині Shadow Root
+   НЕ бере участі в алгоритмі form-owner для `<form>` у Light DOM. Клік по ній
+   не тригерить submit форми.
+
+Обидва обмеження — на рівні специфікації, не баги Mado. Але фреймворк надає
+патерни, що роблять їх безболісними.
+
+## Патерн: Proxy-властивості на input-компонентах
+
+Обгортаючи `<input>` у Shadow DOM компонент, експонуйте `name` та `value`
+як DOM-властивості на host, щоб `useForm().onInput` працював після ретаргетингу:
+
+```ts
+import { component, css, html } from "@madojs/mado";
+
+component("x-input", ({ host, attr }) => {
+  const name = attr("name", "");
+  const type = attr("type", "text");
+  const value = attr("value", "");
+
+  // Proxy-властивості для сумісності з useForm().
+  // Після ретаргетингу Shadow DOM e.target з <input> → <x-input>,
+  // useForm читає e.target.name / e.target.value — ці геттери будують міст.
+  Object.defineProperty(host, "name", {
+    get: () => host.getAttribute("name") ?? "",
+    configurable: true,
+  });
+  Object.defineProperty(host, "value", {
+    get: () => host.shadowRoot?.querySelector("input")?.value ?? "",
+    set: (v: string) => {
+      const input = host.shadowRoot?.querySelector("input");
+      if (input) input.value = v;
+    },
+    configurable: true,
+  });
+
+  return () => html`<input name=${name} type=${type} .value=${value} />`;
+});
+```
+
+Подія `input` від внутрішнього `<input>` має `composed: true` за замовчуванням,
+тому вона спливає через межу shadow. Після ретаргетингу `e.target` —
+це `<x-input>`, але тепер у нього є геттери `.name` та `.value` → `useForm`
+працює.
+
+## Патерн: Submit форми з Shadow DOM кнопок
+
+`<button type="submit">` всередині Shadow DOM не може тригерити submit `<form>`
+у Light DOM. Міст через `requestSubmit()`:
+
+```ts
+import { component, css, html } from "@madojs/mado";
+
+component("x-button", ({ host, attr }) => {
+  const disabled = attr("disabled");
+
+  const handleClick = () => {
+    const typeAttr = host.getAttribute("type");
+    if (typeAttr === "button" || typeAttr === "reset") return;
+    const form = host.closest("form");
+    if (form && !host.hasAttribute("disabled")) form.requestSubmit();
+  };
+
+  return () => html`
+    <button ?disabled=${() => disabled() !== ""} @click=${handleClick}>
+      <slot></slot>
+    </button>
+  `;
+});
+```
+
+`host.closest("form")` працює, бо сам host-елемент живе в Light DOM
+(тільки його внутрішні елементи у тіні). `requestSubmit()` тригерить валідацію
+та подію `submit` точно так, ніби користувач клікнув нативну submit-кнопку
+всередині форми.
+
+## Патерн: Реактивні атрибути через ctx.attr()
+
+З версії 0.7 `ctx.attr(name, defaultValue?)` повертає `Signal<string>`,
+який автоматично оновлюється при зміні атрибута на host. Ніякого
+`MutationObserver` бойлерплейту:
+
+```ts
+component("x-badge", ({ attr }) => {
+  const variant = attr("variant", "default"); // Signal<string>
+
+  return () =>
+    html`<span class=${() => `badge badge-${variant()}`}>
+      <slot></slot>
+    </span>`;
+});
+```
+
+Батько може використовувати `?disabled=${() => !form.isValid()}` (boolean атрибут)
+або `.variant=${"danger"}` — компонент перерендерюється реактивно в обох випадках.
+
+## Повний приклад форми
+
+```ts
+import { page, html, useForm, navigate } from "@madojs/mado";
+import "../components/x-input.js";
+import "../components/x-button.js";
+
+export default page({
+  title: "Вхід",
+  view: () => {
+    const form = useForm({
+      email: { required: true, type: "email" },
+      password: { required: true, minLength: 6 },
+    });
+
+    const handleLogin = async (values) => {
+      await api("/auth/login", { method: "POST", json: values });
+      navigate("/admin");
+    };
+
+    return html`
+      <form @submit=${form.onSubmit(handleLogin)}>
+        <x-input
+          name="email"
+          type="email"
+          label="Email"
+          required
+          @input=${form.onInput}
+          @blur=${form.onBlur}
+        ></x-input>
+        ${() =>
+          form.errors().email
+            ? html`<small class="err">${form.errors().email}</small>`
+            : null}
+
+        <x-input
+          name="password"
+          type="password"
+          label="Пароль"
+          required
+          @input=${form.onInput}
+          @blur=${form.onBlur}
+        ></x-input>
+
+        <x-button type="submit" ?disabled=${() => !form.isValid()}>
+          Увійти
+        </x-button>
+      </form>
+    `;
+  },
+});
+```
+
+## Коли використовувати Light DOM
+
+Якщо ваш input-компонент — це просто стилізована обгортка без потреби в
+інкапсуляції, `shadow: false` уникає обох проблем (ретаргетинг та
+form-association):
+
+```ts
+component(
+  "x-field",
+  ({ attr }) => {
+    const label = attr("label", "");
+    return () => html`
+      <label>
+        <span>${label}</span>
+        <slot></slot>
+      </label>
+    `;
+  },
+  { shadow: false },
+);
+```
+
+З Light DOM нативний `<input>` — частина дерева документа, події не
+ретаргетуються, і submit форми працює нативно. Компроміс: стилі не
+інкапсульовані (треба скоупити самостійно).
+
+## Підсумок
+
+| Задача                      | Рішення Shadow DOM                     | Альтернатива Light DOM     |
+| --------------------------- | -------------------------------------- | -------------------------- |
+| `useForm` + кастомний input | Proxy `name`/`value` на host           | Нативний `<input>` у slot  |
+| Submit форми                | `form.requestSubmit()` у click handler | Нативна кнопка працює      |
+| Реактивні атрибути          | `ctx.attr()` → авто-сигнал             | `ctx.attr()` працює скрізь |
+| Інкапсуляція стилів         | Так (автоматично)                      | Ручний `@scope` або BEM    |

package/docs/uk/README.md

@@ -2,22 +2,23 @@
 
 Український комплект документації.
 
-| Розділ | Файл |
-|---|---|
-| Шлях Mado | [00-the-mado-way.md](./00-the-mado-way.md) |
-| Маршрутизація | [01-routing.md](./01-routing.md) |
-| Структура проєкту | [02-project-layout.md](./02-project-layout.md) |
-| Static bake & SEO | [03-static-bake.md](./03-static-bake.md) |
-| Налаштування IDE | [04-ide-setup.md](./04-ide-setup.md) |
-| Чому Mado | [05-why-mado.md](./05-why-mado.md) |
-| Для бекендерів | [06-for-backenders.md](./06-for-backenders.md) |
-| Типові помилки LLM | [07-llm-pitfalls.md](./07-llm-pitfalls.md) |
-| LLM zero-history тест | [08-llm-zero-history-test.md](./08-llm-zero-history-test.md) |
-| Shadow DOM vs Light DOM | [09-shadow-vs-light-dom.md](./09-shadow-vs-light-dom.md) |
-| Архітектура застосунку | [10-app-architecture.md](./10-app-architecture.md) |
-| Layouts | [11-layouts.md](./11-layouts.md) |
-| Auth та API | [12-auth-and-api.md](./12-auth-and-api.md) |
-| Deployment | [13-deployment.md](./13-deployment.md) |
-| Тестування | [14-testing.md](./14-testing.md) |
-| Обробка помилок | [15-error-handling.md](./15-error-handling.md) |
-| Bake cookbook | [16-bake-cookbook.md](./16-bake-cookbook.md) |
+| Розділ                  | Файл                                                         |
+| ----------------------- | ------------------------------------------------------------ |
+| Шлях Mado               | [00-the-mado-way.md](./00-the-mado-way.md)                   |
+| Маршрутизація           | [01-routing.md](./01-routing.md)                             |
+| Структура проєкту       | [02-project-layout.md](./02-project-layout.md)               |
+| Статичний bake & SEO    | [03-static-bake.md](./03-static-bake.md)                     |
+| Налаштування IDE        | [04-ide-setup.md](./04-ide-setup.md)                         |
+| Чому Mado               | [05-why-mado.md](./05-why-mado.md)                           |
+| Для бекендерів          | [06-for-backenders.md](./06-for-backenders.md)               |
+| Типові помилки LLM      | [07-llm-pitfalls.md](./07-llm-pitfalls.md)                   |
+| LLM zero-history тест   | [08-llm-zero-history-test.md](./08-llm-zero-history-test.md) |
+| Shadow DOM vs Light DOM | [09-shadow-vs-light-dom.md](./09-shadow-vs-light-dom.md)     |
+| Архітектура застосунку  | [10-app-architecture.md](./10-app-architecture.md)           |
+| Макети (layouts)        | [11-layouts.md](./11-layouts.md)                             |
+| Auth та API             | [12-auth-and-api.md](./12-auth-and-api.md)                   |
+| Розгортання             | [13-deployment.md](./13-deployment.md)                       |
+| Тестування              | [14-testing.md](./14-testing.md)                             |
+| Обробка помилок         | [15-error-handling.md](./15-error-handling.md)               |
+| Рецепти bake            | [16-bake-cookbook.md](./16-bake-cookbook.md)                 |
+| Shadow DOM + форми      | [17-shadow-dom-forms.md](./17-shadow-dom-forms.md)           |

package/llms.txt

@@ -13,6 +13,7 @@ Mado is a narrowly-focused frontend framework that deliberately avoids React pat
 - **Components are Web Components.** Registered via `component('x-name', setupFn, options)`. Names must include a hyphen (`x-foo`, `my-button`).
 - **Component files register tags as side effects.** The browser does not auto-import files by tag name. If `<x-card>` works, some imported module already ran `customElements.define("x-card", ...)`.
 - **Cleanup via `ctx.onDispose(fn)`** in setup, not via return from effect.
+- **Reactive attributes via `ctx.attr(name, default?)`** — returns a Signal<string> that auto-updates when the attribute changes. No MutationObserver needed.
 
 ## Critical template rules
 
@@ -64,6 +65,53 @@ import {
 } from "@madojs/mado";
 ```
 
+## Component ctx.attr() — reactive attributes
+
+```ts
+component("x-badge", ({ attr }) => {
+  const variant = attr("variant", "default"); // Signal<string>, auto-updates
+  const size = attr("size", "md");
+
+  return () => html`<span class=${() => `badge-${variant()} size-${size()}`}>
+    <slot></slot>
+  </span>`;
+});
+```
+
+No MutationObserver boilerplate. The parent can bind with `?disabled=${...}` or
+plain attribute changes and the component re-renders reactively.
+
+## Shadow DOM + Forms
+
+Custom inputs in Shadow DOM need two things for `useForm()` compatibility:
+
+1. **Proxy properties** — expose `name` and `value` on the host:
+   ```ts
+   Object.defineProperty(host, "name", { get: () => host.getAttribute("name") ?? "" });
+   Object.defineProperty(host, "value", { get: () => host.shadowRoot?.querySelector("input")?.value ?? "" });
+   ```
+
+2. **Form submit bridge** — buttons inside Shadow DOM can't submit Light DOM forms:
+   ```ts
+   @click=${() => { const form = host.closest("form"); if (form) form.requestSubmit(); }}
+   ```
+
+See `docs/en/17-shadow-dom-forms.md` for the full recipe.
+
+## Auth fetcher for resource()
+
+The admin starter provides `apiFetcher<T>()` in `lib/api.ts` for protected endpoints:
+
+```ts
+import { resource } from "@madojs/mado";
+import { apiFetcher } from "../lib/api.js";
+
+const stats = resource(() => "/api/admin/stats", apiFetcher<Stats>());
+```
+
+Unlike `jsonFetcher()`, `apiFetcher()` attaches the Bearer token from memory.
+Use `jsonFetcher()` for public endpoints, `apiFetcher()` for anything behind auth.
+
 ## Canonical "Hello world"
 
 ```ts
@@ -150,6 +198,7 @@ export default page({
 - docs/en/14-testing.md — testing strategy and commands
 - docs/en/15-error-handling.md — route/data/action error boundaries
 - docs/en/16-bake-cookbook.md — static bake recipes and failure modes
+- docs/en/17-shadow-dom-forms.md — Shadow DOM + useForm() patterns (proxy properties, form submit bridge)
 - examples/basic/ — minimal API tour
 - examples/tickets/ — LLM zero-history CRUD validation
 - examples/showcase/ — flagship CRM pressure app (auth, nested routes, forms, mutations)
@@ -170,7 +219,7 @@ export default page({
 
 ## Version
 
-`0.6.0` — pre-1.0 product-surface release. API may still change before 1.0.
+`0.7.0` — pre-1.0 product-surface release. API may still change before 1.0.
 Semver is not guaranteed on minor versions before 1.0.
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madojs/mado",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Mado — a small native-web SPA framework with Web Components, signals, tagged-template html, router, resources, and forms. TypeScript-only build, zero runtime dependencies.",
   "type": "module",
   "license": "MIT",
@@ -80,4 +80,4 @@
   "engines": {
     "node": ">=20"
   }
-}
+}

package/scripts/bake.mjs

@@ -41,19 +41,19 @@ const { flags } = parseFlags(process.argv.slice(2));
 const cfg = loadConfig({
   overrides: {
     bake: {
-      entry:    typeof flags.entry    === "string" ? flags.entry    : undefined,
+      entry: typeof flags.entry === "string" ? flags.entry : undefined,
       template: typeof flags.template === "string" ? flags.template : undefined,
-      baseUrl:  typeof flags["base-url"] === "string" ? flags["base-url"] : undefined,
-      outDir:   typeof flags.out      === "string" ? flags.out      : undefined,
+      baseUrl: typeof flags["base-url"] === "string" ? flags["base-url"] : undefined,
+      outDir: typeof flags.out === "string" ? flags.out : undefined,
     },
   },
 });
 
 // Env vars are legacy escape hatches (kept so old CI keeps working).
-const ENTRY     = process.env.ENTRY     ?? resolveProjectPath(cfg, cfg.bake.entry);
-const TEMPLATE  = process.env.TEMPLATE  ?? resolveProjectPath(cfg, cfg.bake.template);
-const BASE_URL  = process.env.BASE_URL  ?? cfg.bake.baseUrl;
-const OUT_DIR   = process.env.OUT_DIR
+const ENTRY = process.env.ENTRY ?? resolveProjectPath(cfg, cfg.bake.entry);
+const TEMPLATE = process.env.TEMPLATE ?? resolveProjectPath(cfg, cfg.bake.template);
+const BASE_URL = process.env.BASE_URL ?? cfg.bake.baseUrl;
+const OUT_DIR = process.env.OUT_DIR
   ?? resolveProjectPath(cfg, cfg.bake.outDir ?? join(cfg.build.out, "baked"));
 
 /** Write message to stderr and exit. Sync write keeps CI/execFile output reliable. */
@@ -119,21 +119,21 @@ const { window: linkedomWindow } = parseHTML(baseHtml);
 globalThis.window = linkedomWindow;
 globalThis.document = linkedomWindow.document;
 globalThis.location = new URL("http://localhost/");
-globalThis.history = { pushState: () => {}, replaceState: () => {} };
+globalThis.history = { pushState: () => { }, replaceState: () => { } };
 globalThis.customElements = {
-  define: () => {},
+  define: () => { },
   get: () => undefined,
   whenDefined: () => Promise.resolve(),
 };
-globalThis.HTMLElement = linkedomWindow.HTMLElement ?? class {};
+globalThis.HTMLElement = linkedomWindow.HTMLElement ?? class { };
 globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? class {
   cssRules = [];
-  replaceSync() {}
+  replaceSync() { }
 };
 globalThis.matchMedia = () => ({
   matches: false,
-  addEventListener: () => {},
-  removeEventListener: () => {},
+  addEventListener: () => { },
+  removeEventListener: () => { },
 });
 if (!globalThis.queueMicrotask) {
   globalThis.queueMicrotask = (fn) => Promise.resolve().then(fn);
@@ -167,7 +167,7 @@ await esbuild.build({
 
 const routesUrl = pathToFileURL(tmpFile).href;
 const routesModule = await import(routesUrl);
-await rm(tmpFile).catch(() => {});
+await rm(tmpFile).catch(() => { });
 const routeApi = routesModule.default;
 
 if (!routeApi) {
@@ -232,6 +232,12 @@ for (const [pattern, entry] of Object.entries(manifest)) {
     }
     const headMeta = pg.head ? pg.head(params, data) : {};
 
+    // Ensure <title> is always set in baked HTML. page.title is the primary
+    // source (string or function of params); head().title overrides it.
+    if (!headMeta.title && pg.title) {
+      headMeta.title = typeof pg.title === "function" ? pg.title(params) : pg.title;
+    }
+
     const tpl = pg.view({
       params,
       data,
@@ -273,11 +279,11 @@ for (const [pattern, entry] of Object.entries(manifest)) {
 const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${sitemapEntries
-  .map(
-    (e) =>
-      `  <url><loc>${escapeXml(e.loc)}</loc><changefreq>${e.changefreq}</changefreq></url>`,
-  )
-  .join("\n")}
+    .map(
+      (e) =>
+        `  <url><loc>${escapeXml(e.loc)}</loc><changefreq>${e.changefreq}</changefreq></url>`,
+    )
+    .join("\n")}
 </urlset>
 `;
 await writeFile(join(OUT_DIR, "sitemap.xml"), sitemap);

package/scripts/cli.mjs

@@ -92,11 +92,12 @@ async function runServe(rawArgs) {
   // example name; everything else (including `--host`, `--port`, etc.) is
   // forwarded verbatim to server/serve.mjs.
   const { example, forwarded } = splitDevArgs(rawArgs);
-  if (!example && PROJECT_ROOT !== PACKAGE_ROOT) {
-    await serveStaticProject(PROJECT_ROOT);
-    return;
-  }
   if (example) assertExample(example, { serveable: true });
+
+  // In app-mode (generated project, no example argument) we also go through
+  // server/serve.mjs to get config support (--host, --port, mado.config.json
+  // dev.proxy, HMR, etc.) — previously this fell back to serveStaticProject()
+  // which only read PORT from env and had no proxy/config/HMR.
   await run(
     process.execPath,
     [join(PACKAGE_ROOT, "server/serve.mjs"), example, ...forwarded].filter(
@@ -235,7 +236,8 @@ async function runRelease(rawArgs) {
   // have to remember the order, and so the deploy artifact (out/) is always
   // assembled the same way.
   //
-  //   mado release
+  //   mado release [--no-clean]
+  //     → rm -rf out/        (unless --no-clean)
   //     → mado typecheck
   //     → mado build       (tsc → dist/)
   //     → mado bundle      (esbuild → out/assets/, also copies index.html)
@@ -243,6 +245,7 @@ async function runRelease(rawArgs) {
   //     → copy public/* → out/
   //
   // Flags are forwarded to bake/bundle.
+  const { flags: releaseFlags } = parseFlags(rawArgs);
   const cfg = loadConfig({ projectRoot: PROJECT_ROOT });
   const outDir = resolve(cfg.projectRoot, cfg.build.out ?? "out");
   const publicDir = resolve(cfg.projectRoot, cfg.build.publicDir ?? "public");
@@ -251,6 +254,18 @@ async function runRelease(rawArgs) {
   console.log(`[release] artifact: ${outDir}`);
   console.log("");
 
+  // Deterministic builds: remove the entire output directory so stale assets,
+  // removed bake routes, and deleted public files don't linger in the deploy
+  // artifact. Use --no-clean to opt out (e.g. incremental CI workflows).
+  if (!releaseFlags["no-clean"]) {
+    if (existsSync(outDir)) {
+      await rm(outDir, { recursive: true, force: true });
+      console.log(`[release] cleaned ${outDir}`);
+    }
+  } else {
+    console.log("[release] --no-clean: keeping existing out/");
+  }
+
   console.log("[release] step 1/5  typecheck");
   await runNodeBin("typescript/bin/tsc", ["--noEmit"]);
 
@@ -527,31 +542,5 @@ function contentType(file) {
   }[ext] ?? "application/octet-stream";
 }
 
-async function serveStaticProject(rootDir) {
-  const port = Number(process.env.PORT || 5173);
-  const server = http.createServer((req, res) => {
-    const url = new URL(req.url || "/", `http://localhost:${port}`);
-    const pathname = decodeURIComponent(url.pathname);
-    const normalized = pathname.replace(/^\/+/, "");
-    let file = resolve(rootDir, normalized);
-    if (pathname === "/" || !normalized.includes(".")) file = join(rootDir, "index.html");
-    if (!file.startsWith(rootDir) || !existsSync(file) || statSync(file).isDirectory()) {
-      file = join(rootDir, "index.html");
-    }
-
-    if (!existsSync(file)) {
-      res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
-      res.end("Not found");
-      return;
-    }
-
-    res.writeHead(200, { "content-type": contentType(file) });
-    res.end(readFileSync(file));
-  });
-
-  await new Promise((resolveListen) => {
-    server.listen(port, resolveListen);
-  });
-  console.log(`[mado] serving ${rootDir}`);
-  console.log(`[mado] http://localhost:${port}`);
-}
+// serveStaticProject removed in v0.7 — mado serve now always goes through
+// server/serve.mjs to get --host, --port, dev.proxy, and HMR support.

package/starters/admin/src/components/x-button.ts

@@ -1,25 +1,45 @@
 // <x-button variant="primary|ghost|danger" ?disabled>
 //
 // Wraps a native <button> so it can be slotted with text/icon and styled
-// consistently across the app. Click events bubble naturally because Shadow
-// DOM is `mode: open` and composed: true is the default for `click`.
+// consistently across the app.
+//
+// Handles two Shadow DOM gotchas out of the box:
+//   1. Reactive attributes via ctx.attr() — external ?disabled changes
+//      re-render the inner button automatically.
+//   2. Form submit — a <button type="submit"> inside Shadow DOM cannot
+//      trigger <form> submit in Light DOM (spec limitation). We call
+//      form.requestSubmit() from a click handler to bridge this gap.
 
 import { component, css, html } from "@madojs/mado";
 
 component(
   "x-button",
-  ({ host }) => () => {
-    const variant = host.getAttribute("variant") ?? "primary";
-    const disabled = host.hasAttribute("disabled");
-    return html`
-      <button data-variant=${variant} ?disabled=${disabled}>
+  ({ host, attr }) => {
+    const variant = attr("variant", "primary");
+    const disabled = attr("disabled");
+
+    const handleClick = () => {
+      const typeAttr = host.getAttribute("type");
+      if (typeAttr === "button" || typeAttr === "reset") return;
+      const form = host.closest("form");
+      if (form && !host.hasAttribute("disabled")) form.requestSubmit();
+    };
+
+    return () => html`
+      <button
+        data-variant=${variant()}
+        ?disabled=${() => disabled() !== ""}
+        @click=${handleClick}
+      >
         <slot></slot>
       </button>
     `;
   },
   {
     styles: css`
-      :host { display: inline-flex; }
+      :host {
+        display: inline-flex;
+      }
       button {
         display: inline-flex;
         align-items: center;
@@ -31,11 +51,18 @@ component(
         cursor: pointer;
         background: var(--accent);
         color: var(--accent-fg);
-        transition: filter .12s ease;
+        transition: filter 0.12s ease;
+      }
+      button:hover:not(:disabled) {
+        filter: brightness(1.07);
+      }
+      button:active:not(:disabled) {
+        filter: brightness(0.95);
+      }
+      button:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
       }
-      button:hover:not(:disabled) { filter: brightness(1.07); }
-      button:active:not(:disabled) { filter: brightness(.95); }
-      button:disabled { opacity: .55; cursor: not-allowed; }
 
       button[data-variant="ghost"] {
         background: transparent;
@@ -52,4 +79,4 @@ component(
       }
     `,
   },
-);
+);