@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/components/checkbox.ts

@@ -1,7 +1,7 @@
 /**
  * Checkbox: styled native `<input type="checkbox">`. Tier-1 class
- * helper. Uses `appearance: none` + an inline-SVG `background-image` for
- * the checkmark when `:checked`, so it remains a real form control
+ * helper. Uses `appearance: none` + a masked `::before` for the checkmark
+ * when `:checked`, so it remains a real form control
  * (participates in `<form>` submission, no ElementInternals required).
  *
  * shadcn parity:
@@ -13,11 +13,10 @@
  * --ring, --destructive.
  *
  * A11y (required for accessible output):
- *   `data-slot="checkbox"` is REQUIRED, not decoration. The injected stylesheet
- *   keys the checkmark on it, so without it a checked box renders as a filled
- *   square with no tick: the checked and unchecked states then differ by colour
- *   alone, which is exactly what WCAG 1.4.1 rules out. Every example here
- *   carries it; keep it when you copy one.
+ *   The tick is drawn by the class itself, so the checked state never reads as
+ *   colour alone (WCAG 1.4.1), with or without JavaScript. Keep
+ *   `data-slot="checkbox"` on the input, as every example here does, since the
+ *   styles' field rules select on it.
  *   Associate a label with the input, either `<label for>` pointing at the
  *   input's `id` (as below) or by nesting the input inside the `<label>`. A
  *   checkbox with no label has no accessible name.
@@ -55,86 +54,25 @@
  */
 import { cn } from '../lib/utils.ts';
 
-// Inline SVG checkmark used as background when :checked. Encoded for url().
-//
-// Two variants because shadcn flips `--primary` (and therefore the checked-
-// state box colour) between light + dark: in light mode the box is dark
-// (`oklch(0.205 0 0)`) and the checkmark needs to be light (white); in dark
-// mode the box is light (`oklch(0.922 0 0)`) and the checkmark needs to be
-// dark (black). `currentColor` inside a data:url SVG does NOT inherit from
-// the host element when used as a background-image: that's a long-
-// standing browser limitation: and pseudo-elements (::before/::after) on
-// `<input>` aren't reliable cross-browser, so the simplest correct fix is
-// to ship two SVGs and toggle them via a theme selector.
-const CHECKMARK_LIGHT =
-  'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'white\'><path d=\'M16.704 5.293a1 1 0 010 1.414l-7.001 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L9 11.586l6.29-6.293a1 1 0 011.414 0z\'/></svg>")';
-const CHECKMARK_DARK =
-  'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'black\'><path d=\'M16.704 5.293a1 1 0 010 1.414l-7.001 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L9 11.586l6.29-6.293a1 1 0 011.414 0z\'/></svg>")';
-
+// The checked and indeterminate paint rides the helper's own classes, so it is
+// in the first paint, renders with JavaScript off, and holds in every style.
+// The tick is shadcn's (Lucide's CheckIcon, stroke 2, round caps and joins),
+// drawn by a `::before` that fills the box's padding box (14px of the 16px
+// box, shadcn's size-3.5) in `currentColor` through a mask of the icon. So the
+// tick takes the box's text colour, which every style sets on a checked box
+// (`text-primary-foreground` on the `bg-primary` fill), and it flips with the
+// theme with no per-theme rule. The indeterminate dash is the same fill
+// masked to a centred bar, 60% across and 2px tall. The data URI is fully
+// percent-encoded so it sits in a class with no space or quote.
+// One literal, since Tailwind finds a class only where it is written out whole.
 const CHECKBOX_CLASS =
-  'peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 checked:border-primary checked:bg-primary checked:bg-no-repeat checked:bg-center dark:bg-input/30 dark:aria-invalid:ring-destructive/40';
-
-// Inject style once for the checkmark background-image when :checked.
-//
-// Theme selectors are kept in sync with what shadcn's components.json
-// scaffolds for theme switching: explicit `[data-theme='dark']` /
-// `.dark` on `<html>` (set by toggle scripts), AND `prefers-color-
-// scheme: dark` gated by `:not([data-theme='light']):not(.light)` so
-// an explicit-light toggle still wins over the OS preference. Matches
-// the same pattern used elsewhere in the registry.
-const STYLES = `
-input[type="checkbox"][data-slot="checkbox"]:checked {
-  background-image: ${CHECKMARK_LIGHT};
-  background-size: 80%;
-}
-input[type="checkbox"][data-slot="checkbox"]:indeterminate {
-  background-color: var(--primary);
-  background-image: linear-gradient(to right, white, white);
-  background-size: 60% 2px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']):not(.light) input[type="checkbox"][data-slot="checkbox"]:checked {
-    background-image: ${CHECKMARK_DARK};
-  }
-  :root:not([data-theme='light']):not(.light) input[type="checkbox"][data-slot="checkbox"]:indeterminate {
-    background-image: linear-gradient(to right, black, black);
-  }
-}
-:root[data-theme='dark'] input[type="checkbox"][data-slot="checkbox"]:checked,
-:root.dark input[type="checkbox"][data-slot="checkbox"]:checked {
-  background-image: ${CHECKMARK_DARK};
-}
-:root[data-theme='dark'] input[type="checkbox"][data-slot="checkbox"]:indeterminate,
-:root.dark input[type="checkbox"][data-slot="checkbox"]:indeterminate {
-  background-image: linear-gradient(to right, black, black);
-}
-`;
-
-let installed = false;
-export function installCheckboxStyles(): void {
-  if (installed || typeof document === 'undefined') return;
-  if (document.getElementById('ui-checkbox-styles')) {
-    installed = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = 'ui-checkbox-styles';
-  style.textContent = STYLES;
-  document.head.appendChild(style);
-  installed = true;
-}
-
-if (typeof document !== 'undefined') installCheckboxStyles();
+  'cn-checkbox peer relative shrink-0 appearance-none outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 checked:before:absolute checked:before:inset-0 checked:before:bg-current checked:before:[mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E)_center/contain_no-repeat] indeterminate:border-primary indeterminate:bg-primary indeterminate:text-primary-foreground indeterminate:before:absolute indeterminate:before:inset-0 indeterminate:before:bg-current indeterminate:before:[mask:linear-gradient(#000,#000)_center/60%_2px_no-repeat]';
 
 /**
- * Tailwind classes for a styled native `<input type="checkbox">`.
- *
- * PAIR THIS WITH `data-slot="checkbox"` ON THE SAME INPUT. The injected
- * stylesheet keys the checkmark and the indeterminate dash on that attribute,
- * so the class alone gives you a box that fills with colour when checked but
- * never draws a tick, leaving the two states distinguishable by colour only.
+ * Tailwind classes for a styled native `<input type="checkbox">`. The classes
+ * draw the tick and the indeterminate dash themselves, so a checked box paints
+ * with JavaScript off. Keep `data-slot="checkbox"` on the input as shadcn
+ * does: the styles' field rules select on it.
  */
 export function checkboxClass(): string {
   return cn(CHECKBOX_CLASS);

package/packages/registry/components/code-block.ts

@@ -0,0 +1,191 @@
+/**
+ * Code block: a framed block of code with an optional header, title,
+ * actions, footer, line numbers and per-line highlights. Tier 1, with one
+ * Tier-2 part, the copy button.
+ *
+ * shadcn parity:
+ *   CodeBlock (variant, size)  → <div data-slot="code-block" data-variant data-size class=${codeBlockClass({ variant })}>
+ *                                (codeBlockVariants is the same helper under shadcn's name)
+ *   CodeBlockHeader / Title / Actions / Footer
+ *                              → <div class=${codeBlockHeaderClass()} data-slot="code-block-header"> and so on
+ *   CodeBlockContent (wrap, lineNumbers, startLine)
+ *                              → <pre data-slot="code-block-content" tabindex="0" dir="ltr" class=${codeBlockContentClass()}
+ *                                ?data-wrap ?data-numbered style="counter-reset: line N">
+ *                                <code data-slot="code-block-code" class=${codeBlockCodeClass()}>
+ *   CodeBlockLine variant      → codeBlockLines(text, { variants }) for numbered lines, or a
+ *                                <span data-slot="code-block-line" class=${codeBlockLineClass({ variant })}> of your own
+ *   CodeBlockCopyButton value  → <ui-code-block-copy-button value>, which copies its block's code
+ *                                when it has no value
+ *
+ * `codeBlockLines` splits text on newlines into the line spans numbering and
+ * highlights need, keeping an empty line as a newline so a copied selection
+ * keeps its blank lines. Pass `{ 3: 'added', 4: 'removed' }` as `variants`
+ * (one-based line numbers) to mark lines.
+ *
+ * A11y (required for accessible output): keep `tabindex="0"` on the `<pre>`,
+ * so a keyboard can reach and scroll a block wider than its frame, and
+ * `dir="ltr"`, since code reads left to right on any page. A title names the
+ * file or language. The copy button is named "Copy", becomes "Copied" for two
+ * seconds, and announces it through a polite live region. Added and removed
+ * lines are marked by colour and by a "+" / "−" gutter sign, which a screen
+ * reader skips, so say what changed in prose when it matters.
+ *
+ * @example
+ * ```html
+ * <div data-slot="code-block" data-variant="default" data-size="default" class=${codeBlockClass()}>
+ *   <div data-slot="code-block-header" class=${codeBlockHeaderClass()}>
+ *     <div data-slot="code-block-title" class=${codeBlockTitleClass()}>app/page.ts</div>
+ *     <div data-slot="code-block-actions" class=${codeBlockActionsClass()}>
+ *       <ui-code-block-copy-button></ui-code-block-copy-button>
+ *     </div>
+ *   </div>
+ *   <pre data-slot="code-block-content" data-numbered tabindex="0" dir="ltr" style="counter-reset: line 0" class=${codeBlockContentClass()}><code
+ *     data-slot="code-block-code" class=${codeBlockCodeClass()}>${codeBlockLines(source, { variants: { 2: 'added' } })}</code></pre>
+ * </div>
+ * ```
+ */
+import { WebComponent, html, signal } from '@webjsdev/core';
+import { cn } from '../lib/utils.ts';
+import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
+
+const CODE_BLOCK_VARIANTS = {
+  default: 'cn-code-block-variant-default',
+  destructive: 'cn-code-block-variant-destructive',
+} as const;
+
+export type CodeBlockVariant = keyof typeof CODE_BLOCK_VARIANTS;
+
+/** The frame's classes. */
+export function codeBlockClass(opts: { variant?: CodeBlockVariant } = {}): string {
+  return cn('cn-code-block group/code-block relative flex w-full min-w-0 flex-col overflow-hidden', CODE_BLOCK_VARIANTS[opts.variant ?? 'default']);
+}
+
+/** shadcn's name for {@link codeBlockClass}. Like cva, it merges a `className`. */
+export function codeBlockVariants(opts: { variant?: CodeBlockVariant; className?: string } = {}): string {
+  return cn(codeBlockClass(opts), opts.className);
+}
+
+/** The header row. */
+export function codeBlockHeaderClass(): string {
+  return 'cn-code-block-header flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0';
+}
+
+/** The title in the header. */
+export function codeBlockTitleClass(): string {
+  return 'cn-code-block-title min-w-0 truncate [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle';
+}
+
+/** The actions (in the header, or floating over the code when a direct child of the frame). */
+export function codeBlockActionsClass(): string {
+  return 'cn-code-block-actions ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100';
+}
+
+/** The scrolling `<pre>`. */
+export function codeBlockContentClass(): string {
+  return 'cn-code-block-content min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto text-start font-mono outline-none data-[wrap]:scroll-fade-y data-[wrap]:wrap-break-word data-[wrap]:whitespace-pre-wrap';
+}
+
+/** The `<code>` inside it. */
+export function codeBlockCodeClass(): string {
+  return 'cn-code-block-code grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0';
+}
+
+const CODE_BLOCK_LINE_VARIANTS = {
+  default: 'cn-code-block-line-variant-default',
+  added: 'cn-code-block-line-variant-added',
+  removed: 'cn-code-block-line-variant-removed',
+  highlighted: 'cn-code-block-line-variant-highlighted',
+} as const;
+
+export type CodeBlockLineVariant = keyof typeof CODE_BLOCK_LINE_VARIANTS;
+
+/** One line's classes. */
+export function codeBlockLineClass(opts: { variant?: CodeBlockLineVariant } = {}): string {
+  return cn(
+    "cn-code-block-line relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+    CODE_BLOCK_LINE_VARIANTS[opts.variant ?? 'default'],
+  );
+}
+
+/** shadcn's name for {@link codeBlockLineClass}. Like cva, it merges a `className`. */
+export function codeBlockLineVariants(opts: { variant?: CodeBlockLineVariant; className?: string } = {}): string {
+  return cn(codeBlockLineClass(opts), opts.className);
+}
+
+/** The footer row. */
+export function codeBlockFooterClass(): string {
+  return 'cn-code-block-footer flex min-w-0 shrink-0 items-center';
+}
+
+/**
+ * The line spans for `text`, one per line, for line numbers and highlights.
+ * `variants` maps a one-based line number to its variant.
+ */
+export function codeBlockLines(text: string, opts: { variants?: Record<number, CodeBlockLineVariant> } = {}) {
+  const lines = text.replace(/\n$/, '').split(/\n/);
+  return lines.map((line, i) => {
+    const variant = opts.variants?.[i + 1] ?? 'default';
+    // An empty line holds a newline, so copying a selection keeps blank lines.
+    // (Spelled as a char code: a string literal holding a newline reads, to the
+    // style bake's lexer, like a string that ran into code.)
+    return html`<span data-slot="code-block-line" data-variant=${variant} class=${codeBlockLineClass({ variant })}><span data-slot="code-block-line-content" class="min-w-0">${line === '' ? String.fromCharCode(10) : line}</span></span>`;
+  });
+}
+
+// --------------------------------------------------------------------------
+// <ui-code-block-copy-button>
+// --------------------------------------------------------------------------
+
+export class UiCodeBlockCopyButton extends WebComponent({
+  value: String,
+  variant: String,
+  size: String,
+}) {
+  readonly #copied = signal(false);
+  _timer = 0;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.variant = 'ghost';
+    this.size = 'icon-xs';
+  }
+
+  disconnectedCallback(): void {
+    clearTimeout(this._timer);
+    super.disconnectedCallback?.();
+  }
+
+  /** What a click copies: the `value`, else the code in this block. */
+  text(): string {
+    if (this.value) return this.value;
+    const block = this.closest?.('[data-slot="code-block"]');
+    const code = block?.querySelector('[data-slot="code-block-code"]') ?? block?.querySelector('code');
+    return (code?.textContent ?? '').replace(/\n$/, '');
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      data-slot="code-block-copy-button"
+      ?data-copied=${this.#copied.get()}
+      aria-label=${this.#copied.get() ? 'Copied' : 'Copy'}
+      class=${cn(buttonClass({ variant: this.variant as ButtonVariant, size: this.size as ButtonSize }), 'cn-code-block-copy-button')}
+      @click=${this._onClick}
+    >${this.#copied.get()
+      ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>`
+      : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`}</button><span aria-live="polite" class="sr-only">${this.#copied.get() ? 'Copied' : ''}</span>`;
+  }
+
+  _onClick = (): void => {
+    const write = navigator.clipboard?.writeText?.(this.text());
+    if (!write) return;
+    write.then(() => {
+      this.#copied.set(true);
+      clearTimeout(this._timer);
+      this._timer = window.setTimeout(() => { this.#copied.set(false); }, 2000);
+      this.dispatchEvent(new CustomEvent('ui-copy', { bubbles: true, detail: { text: this.text() } }));
+    }).catch(() => {});
+  };
+}
+UiCodeBlockCopyButton.register('ui-code-block-copy-button');

package/packages/registry/components/collapsible.ts

@@ -65,7 +65,10 @@ export const collapsibleClass = (): string => 'group';
  * `disabled` prop combines both visual and behavior; we split them.
  */
 export const collapsibleTriggerClass = (opts: { disabled?: boolean } = {}): string => {
-  const base = 'flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring/50 marker:hidden [&::-webkit-details-marker]:hidden';
+  // shadcn's CollapsibleTrigger carries no classes of its own, so a button's
+  // classes merged onto it keep their size and type. Only the <summary>
+  // resets stay inline; new-york's row look rides the cn- name.
+  const base = 'cn-collapsible-trigger cursor-pointer list-none marker:hidden [&::-webkit-details-marker]:hidden';
   if (opts.disabled) return `${base} pointer-events-none cursor-not-allowed opacity-50`;
   return base;
 };
@@ -74,4 +77,4 @@ export const collapsibleTriggerClass = (opts: { disabled?: boolean } = {}): stri
  * Content: <details> already hides children other than <summary> when
  * not [open], so this is purely typographic spacing. No display rules.
  */
-export const collapsibleContentClass = (): string => 'text-sm';
+export const collapsibleContentClass = (): string => 'cn-collapsible-content';