@kwtv/components 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -34,6 +34,6 @@
     }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.5.0"
+    "@kwtv/tokens": "^0.6.0"
   }
 }

package/src/astro/Badge.astro

@@ -12,6 +12,9 @@ import Icon from "./Icon.astro";
  */
 interface Props {
   tone?: "neutral" | "success" | "warning" | "danger" | "outline";
+  /** Show the tone's default status icon. Defaults to true for status tones
+   *  (success/warning/danger); pass false to suppress it for label-only use. */
+  icon?: boolean;
   removable?: boolean;
   /** aria-label for the × button when removable. Name the filter it clears. */
   removeLabel?: string;
@@ -20,6 +23,7 @@ interface Props {
 
 const {
   tone = "neutral",
+  icon: showIcon = true,
   removable = false,
   removeLabel = "Verwijderen",
   class: className,
@@ -31,7 +35,7 @@ const icons: Record<string, string> = {
   warning: "alert-triangle",
   danger: "close",
 };
-const icon = icons[tone];
+const icon = showIcon ? icons[tone] : undefined;
 
 const classes = [
   "ui-badge",

package/src/astro/Checkbox.astro

@@ -1,8 +1,9 @@
 ---
 /**
- * Checkbox. Native control tinted with accent-color, wrapped in a label so the
- * whole row is the hit area. 17 px box, 32 px row. Disabled rows keep their
- * text legible.
+ * Checkbox. Custom-styled native control: appearance:none box with a CSS
+ * checkmark SVG, so the checked state is consistent across surfaces and themes.
+ * Wrapped in a label so the whole row is the hit area. 17 px box, 32 px row.
+ * Disabled rows keep their text legible.
  *
  * When several checkboxes form a question, put them in a <fieldset> with a
  * <legend> in the consuming page so the question is announced first.
@@ -62,12 +63,28 @@ const classes = ["ui-check", disabled && "is-disabled", className]
     }
 
     .ui-check input {
+      appearance: none;
+      -webkit-appearance: none;
       width: 17px;
       height: 17px;
       flex-shrink: 0;
       margin-top: calc((var(--leading-sm, 1.375rem) - 17px) / 2);
-      accent-color: var(--primary);
+      border: 1.5px solid var(--border-strong);
+      border-radius: var(--radius-xs, 3px);
+      background: var(--surface);
       cursor: pointer;
+      transition:
+        background-color var(--duration-fast, 100ms) var(--ease-standard, ease),
+        border-color var(--duration-fast, 100ms) var(--ease-standard, ease);
+    }
+
+    .ui-check input:checked {
+      background: var(--primary);
+      border-color: var(--primary);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 5 4.5 8.5 11 1'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 10px 8px;
     }
 
     .ui-check input:focus-visible {
@@ -83,6 +100,7 @@ const classes = ["ui-check", disabled && "is-disabled", className]
 
     .ui-check.is-disabled input {
       cursor: not-allowed;
+      opacity: 0.45;
     }
 
     @media (max-width: 700px), (pointer: coarse) {

package/src/astro/CopyChip.astro

@@ -0,0 +1,128 @@
+---
+/**
+ * CopyChip. Displays a short text value (typically an email or code string)
+ * in a monospace pill with a copy-to-clipboard button. Renders the text as
+ * static HTML; the button is injected client-side by the bundled script, so
+ * the component degrades cleanly without JavaScript.
+ *
+ * @prop {string} text   The value to display and copy.
+ * @prop {string} [label] Accessible label for the copy button (default: "Copy").
+ * @prop {string} [class]
+ */
+interface Props {
+  text: string;
+  label?: string;
+  class?: string;
+}
+
+const { text, label = "Copy", class: className, ...rest } = Astro.props;
+const classes = ["ui-copy-chip", className].filter(Boolean).join(" ");
+---
+
+<span class={classes} data-copy={text} {...rest}>
+  <span class="ui-copy-chip__text">{text}</span>
+</span>
+
+<script>
+  function initCopyChip(el: HTMLElement) {
+    if (el.querySelector(".ui-copy-chip__btn")) return;
+
+    const text = el.getAttribute("data-copy") ?? "";
+    const label = el.getAttribute("data-label") ?? "Copy";
+
+    const COPY_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M3 11V3a1 1 0 0 1 1-1h8"/></svg>`;
+    const CHECK_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="2 8 6 12 14 4"/></svg>`;
+
+    const btn = document.createElement("button");
+    btn.className = "ui-copy-chip__btn";
+    btn.type = "button";
+    btn.setAttribute("aria-label", label);
+    btn.innerHTML = COPY_ICON;
+
+    btn.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(text);
+        btn.innerHTML = CHECK_ICON;
+        btn.setAttribute("aria-label", "Copied");
+        setTimeout(() => {
+          btn.innerHTML = COPY_ICON;
+          btn.setAttribute("aria-label", label);
+        }, 2000);
+      } catch (_e) {
+        // Clipboard API unavailable.
+      }
+    });
+
+    el.appendChild(btn);
+  }
+
+  function initAll(root: Document | HTMLElement) {
+    root
+      .querySelectorAll<HTMLElement>(".ui-copy-chip:not([data-copy-ready])")
+      .forEach((el) => {
+        el.setAttribute("data-copy-ready", "");
+        initCopyChip(el);
+      });
+  }
+
+  initAll(document);
+  document.addEventListener("astro:page-load", () => initAll(document));
+</script>
+
+<style>
+  @layer reset, tokens, base, components, motion, utilities;
+
+  @layer components {
+    .ui-copy-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1);
+      padding: 1px var(--space-2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      background: var(--surface-hover);
+      font-family: var(--font-mono, monospace);
+      font-size: 0.875em;
+      color: var(--text);
+      white-space: nowrap;
+      vertical-align: middle;
+    }
+
+    .ui-copy-chip__text {
+      user-select: all;
+    }
+
+    .ui-copy-chip__btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      border-radius: var(--radius-xs);
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition:
+        color var(--duration-fast, 100ms) var(--ease-standard, ease),
+        background-color var(--duration-fast, 100ms) var(--ease-standard, ease);
+    }
+
+    .ui-copy-chip__btn:hover {
+      color: var(--text);
+      background: var(--border);
+    }
+
+    .ui-copy-chip__btn:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    .ui-copy-chip__btn svg {
+      width: 13px;
+      height: 13px;
+    }
+  }
+</style>

package/src/styles/base.css

@@ -10,6 +10,12 @@
 @layer reset, tokens, base, components, motion, utilities;
 
 @layer base {
+  /* Text selection: sage fill instead of the browser default blue. */
+  ::selection {
+    background-color: var(--surface-accent);
+    color: var(--surface-accent-fg);
+  }
+
   /* Screen-reader-only, still announced. */
   .ui-sr-only {
     position: absolute;