@neumorphism-ui/elements 0.0.0-stage → 1.0.0-next.1

package/dist/components/button-group/button-group.js

@@ -0,0 +1,13 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { buttonGroupDef } from './button-group.def.js';
+export class NeuButtonGroup extends NeuElement {
+    static def = buttonGroupDef;
+    constructor() {
+        super();
+        this.internals.role = 'group';
+    }
+    update(changed) {
+        if (changed.has('label'))
+            this.internals.ariaLabel = String(this.props.label) || null;
+    }
+}

package/dist/components/button-group/button-group.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Merging is pure CSS: the group sets --_neu-grp-* on its slotted buttons, which read them. The
+ * outer corners go to the first and last rendered children. Slotted buttons become flex boxes
+ * whose base grows, so a stretched button is filled edge to edge (this outer ::slotted rule wins
+ * over the button's own :host display). Both rules skip the same children that never render.
+ */
+export declare const buttonGroupStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: inline-flex; vertical-align: middle; }\n.base { display: inline-flex; border-radius: var(--_neu-r); box-shadow: var(--_neu-raised); }\n:host([orientation='vertical']) .base { flex-direction: column; }\n::slotted(*) { --_neu-grp-shadow: 0 0 transparent; --_neu-grp-ss: 0; --_neu-grp-se: 0; --_neu-grp-es: 0; --_neu-grp-ee: 0; }\n::slotted(:not([hidden], template, script, style)) { display: flex; }\n::slotted(:focus-visible) { position: relative; z-index: 1; }\n:host(:not([orientation='vertical'])) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-es: var(--_neu-r); }\n:host(:not([orientation='vertical'])) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-se: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }\n:host([orientation='vertical']) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-se: var(--_neu-r); }\n:host([orientation='vertical']) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-es: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }\n";

package/dist/components/button-group/button-group.styles.js

@@ -0,0 +1,19 @@
+import { hostTheme } from '../../core/styles.js';
+/**
+ * Merging is pure CSS: the group sets --_neu-grp-* on its slotted buttons, which read them. The
+ * outer corners go to the first and last rendered children. Slotted buttons become flex boxes
+ * whose base grows, so a stretched button is filled edge to edge (this outer ::slotted rule wins
+ * over the button's own :host display). Both rules skip the same children that never render.
+ */
+export const buttonGroupStyles = `${hostTheme}
+:host { display: inline-flex; vertical-align: middle; }
+.base { display: inline-flex; border-radius: var(--_neu-r); box-shadow: var(--_neu-raised); }
+:host([orientation='vertical']) .base { flex-direction: column; }
+::slotted(*) { --_neu-grp-shadow: 0 0 transparent; --_neu-grp-ss: 0; --_neu-grp-se: 0; --_neu-grp-es: 0; --_neu-grp-ee: 0; }
+::slotted(:not([hidden], template, script, style)) { display: flex; }
+::slotted(:focus-visible) { position: relative; z-index: 1; }
+:host(:not([orientation='vertical'])) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-es: var(--_neu-r); }
+:host(:not([orientation='vertical'])) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-se: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }
+:host([orientation='vertical']) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-se: var(--_neu-r); }
+:host([orientation='vertical']) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-es: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }
+`;

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,14 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuDivider extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly orientation: {
+            readonly type: "string";
+            readonly default: "horizontal";
+            readonly values: readonly ["horizontal", "vertical"];
+            readonly reflect: true;
+        };
+    }>;
+    orientation: 'horizontal' | 'vertical';
+    constructor();
+    protected update(changed: ReadonlySet<string>): void;
+}

package/dist/components/divider/divider.def.d.ts

@@ -0,0 +1,8 @@
+export declare const dividerDef: import("../../core/define.js").ComponentDef<{
+    readonly orientation: {
+        readonly type: "string";
+        readonly default: "horizontal";
+        readonly values: readonly ["horizontal", "vertical"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/divider/divider.def.js

@@ -0,0 +1,24 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { dividerStyles } from './divider.styles.js';
+export const dividerDef = defineComponent({
+    tag: 'neu-divider',
+    props: {
+        orientation: {
+            type: 'string',
+            default: 'horizontal',
+            values: ['horizontal', 'vertical'],
+            reflect: true,
+        },
+    },
+    styles: dividerStyles,
+    template: () => html `<span part="base" class="base"></span>`,
+    docs: {
+        summary: 'A thin engraved line that separates content.',
+        events: [],
+        slots: [],
+        parts: [{ name: 'base', description: 'The engraved line.' }],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/divider/divider.js

@@ -0,0 +1,13 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { dividerDef } from './divider.def.js';
+export class NeuDivider extends NeuElement {
+    static def = dividerDef;
+    constructor() {
+        super();
+        this.internals.role = 'separator';
+    }
+    update(changed) {
+        if (changed.has('orientation'))
+            this.internals.ariaOrientation = this.orientation;
+    }
+}

package/dist/components/divider/divider.styles.d.ts

@@ -0,0 +1 @@
+export declare const dividerStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: block; margin-block: 0.75rem; }\n.base { display: block; border-block-start: 1px solid var(--_neu-sd); border-block-end: 1px solid var(--_neu-sl); }\n:host([orientation='vertical']) { display: inline-block; align-self: stretch; min-block-size: 1em; margin-block: 0; margin-inline: 0.75rem; }\n:host([orientation='vertical']) .base { block-size: 100%; min-block-size: 1em; border-block: 0; border-inline-start: 1px solid var(--_neu-sd); border-inline-end: 1px solid var(--_neu-sl); }\n";

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,7 @@
+import { hostTheme } from '../../core/styles.js';
+export const dividerStyles = `${hostTheme}
+:host { display: block; margin-block: 0.75rem; }
+.base { display: block; border-block-start: 1px solid var(--_neu-sd); border-block-end: 1px solid var(--_neu-sl); }
+:host([orientation='vertical']) { display: inline-block; align-self: stretch; min-block-size: 1em; margin-block: 0; margin-inline: 0.75rem; }
+:host([orientation='vertical']) .base { block-size: 100%; min-block-size: 1em; border-block: 0; border-inline-start: 1px solid var(--_neu-sd); border-inline-end: 1px solid var(--_neu-sl); }
+`;

package/dist/components/icon/icon-drawer.d.ts

@@ -0,0 +1,12 @@
+export interface IconDrawer {
+    draw(): void;
+    connected(): void;
+    disconnected(): void;
+}
+/**
+ * Keeps an element's icon container in step with its library and name: on prop changes and when
+ * the library is registered again (while connected, or while the element was away), and never
+ * twice for the same icon, so hydration and DOM moves write nothing. Used by neu-icon and
+ * neu-icon-button. A closure rather than a class, so the minifier can shorten its state.
+ */
+export declare function iconDrawer(box: () => Element | null, library: () => string, name: () => string): IconDrawer;

package/dist/components/icon/icon-drawer.js

@@ -0,0 +1,38 @@
+import { renderIconInto } from './icon-loader.js';
+import { iconLibraryVersion, onIconLibraryChange } from './icon-registry.js';
+/**
+ * Keeps an element's icon container in step with its library and name: on prop changes and when
+ * the library is registered again (while connected, or while the element was away), and never
+ * twice for the same icon, so hydration and DOM moves write nothing. Used by neu-icon and
+ * neu-icon-button. A closure rather than a class, so the minifier can shorten its state.
+ */
+export function iconDrawer(box, library, name) {
+    /** Library, name and library version of what the container shows or is loading. */
+    let shown;
+    let unsubscribe;
+    const key = () => `${library()}\n${name()}\n${iconLibraryVersion(library())}`;
+    const draw = () => {
+        const container = box();
+        if (!container)
+            return;
+        // The first draw finds the template's markup, rendered here or on the server: a system icon
+        // is already in place.
+        if (shown === undefined && library() === 'system')
+            shown = key();
+        if (key() === shown)
+            return;
+        shown = key();
+        renderIconInto(container, library(), name());
+    };
+    return {
+        draw,
+        connected: () => {
+            unsubscribe ??= onIconLibraryChange(draw);
+            draw();
+        },
+        disconnected: () => {
+            unsubscribe?.();
+            unsubscribe = undefined;
+        },
+    };
+}

package/dist/components/icon/icon-loader.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Fills `container` with the icon: the system set at once, other libraries asynchronously.
+ * Unknown names, a throwing library and failed loads leave it empty. Never throws.
+ */
+export declare function renderIconInto(container: Element, library: string, name: string): void;

package/dist/components/icon/icon-loader.js

@@ -0,0 +1,102 @@
+import { getIconLibrary } from './icon-registry.js';
+import { systemIconSvg } from './system-icons.js';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/** Static shapes, paint servers and structure only. Case matters: XML names are case-sensitive. */
+const ALLOWED = new Set('svg g path circle ellipse line polyline polygon rect defs title desc symbol linearGradient radialGradient stop clipPath mask use'.split(' '));
+/** Sanitized SVG elements by URL; the promise is shared so one URL is fetched once. */
+const cache = new Map();
+/** The latest request per container; a response for an older one is dropped. */
+const tokens = new WeakMap();
+let parser;
+let counter = 0;
+/**
+ * Tested against `name=value` of every attribute: event handlers, style, an href that is not a
+ * local #id, and any value that could make the page send a request (url() other than url(#id),
+ * image-set(), src(), or a CSS escape, which could spell any of them).
+ */
+const UNSAFE = /^on|^style=|href=(?!#)|\\|(?:image-set|src)\(|url\((?![\s'"]*#)/i;
+/** Allowlist walk: keeps allowed SVG elements and text, drops everything else. */
+function clean(parent) {
+    for (const { name, value } of [...parent.attributes]) {
+        if (UNSAFE.test(`${name}=${value}`))
+            parent.removeAttribute(name);
+    }
+    for (const node of [...parent.childNodes]) {
+        if (node.nodeType === 3)
+            continue;
+        if (node.nodeType !== 1 ||
+            node.namespaceURI !== SVG_NS ||
+            !ALLOWED.has(node.localName)) {
+            node.remove();
+            continue;
+        }
+        clean(node);
+    }
+}
+/**
+ * Parses SVG text as XML and returns the cleaned root, or null. The result is only ever inserted
+ * as nodes, never serialized back into HTML, so no parser differential can reintroduce markup.
+ */
+function sanitize(text) {
+    parser ??= new DOMParser();
+    const source = text.replace(/<svg\b(?![^>]*\sxmlns\s*=)/, `<svg xmlns="${SVG_NS}"`);
+    const svg = parser.parseFromString(source, 'image/svg+xml').documentElement;
+    if (svg.namespaceURI !== SVG_NS || svg.localName !== 'svg' || svg.querySelector('parsererror')) {
+        return null;
+    }
+    clean(svg);
+    svg.removeAttribute('xmlns:xlink');
+    svg.setAttribute('part', 'svg');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    return svg;
+}
+function load(url) {
+    let entry = cache.get(url);
+    if (!entry) {
+        entry = (async () => {
+            try {
+                const response = await fetch(url);
+                return response.ok ? sanitize((await response.text()).trim()) : null;
+            }
+            catch {
+                return null;
+            }
+        })();
+        cache.set(url, entry);
+        // A failure is not remembered, so the next request can try again.
+        void entry.then((svg) => svg === null && cache.delete(url));
+    }
+    return entry;
+}
+/**
+ * Fills `container` with the icon: the system set at once, other libraries asynchronously.
+ * Unknown names, a throwing library and failed loads leave it empty. Never throws.
+ */
+export function renderIconInto(container, library, name) {
+    const token = ++counter;
+    tokens.set(container, token);
+    const show = (svg) => {
+        if (tokens.get(container) !== token)
+            return;
+        container.replaceChildren(...(svg ? [container.ownerDocument.importNode(svg, true)] : []));
+    };
+    if (library === 'system') {
+        // Constant, library-owned markup.
+        container.innerHTML = systemIconSvg(name) ?? '';
+        return;
+    }
+    try {
+        const source = name ? String(getIconLibrary(library)?.resolve(name) ?? '').trim() : '';
+        if (source.startsWith('<'))
+            show(sanitize(source));
+        // A blank source stays empty: fetch('') would request the current page.
+        else if (source)
+            void load(source).then(show);
+        else
+            show(null);
+    }
+    catch {
+        show(null);
+    }
+}

package/dist/components/icon/icon-registry.d.ts

@@ -0,0 +1,11 @@
+export interface IconLibrary {
+    /** Markup that starts with `<` is an SVG; any other string, and a URL, is fetched. */
+    resolve(name: string): string | URL;
+}
+/** Registers a library. Registering a name again replaces it and reloads the icons using it. */
+export declare function registerIconLibrary(name: string, library: IconLibrary): void;
+export declare function getIconLibrary(name: string): IconLibrary | undefined;
+/** Changes every time the library is registered; 0 before the first time. */
+export declare function iconLibraryVersion(name: string): number;
+/** Calls `listener` with the name of every library that gets (re-)registered. Returns the unsubscribe. */
+export declare function onIconLibraryChange(listener: (library: string) => void): () => void;

package/dist/components/icon/icon-registry.js

@@ -0,0 +1,26 @@
+const libraries = new Map();
+/** How often each library has been registered, so a drawn icon knows when it went stale. */
+const versions = new Map();
+const listeners = new Set();
+/** Registers a library. Registering a name again replaces it and reloads the icons using it. */
+export function registerIconLibrary(name, library) {
+    // The built-in set is not a registered library and cannot be replaced.
+    if (name === 'system')
+        return;
+    libraries.set(name, library);
+    versions.set(name, iconLibraryVersion(name) + 1);
+    for (const listener of [...listeners])
+        listener(name);
+}
+export function getIconLibrary(name) {
+    return libraries.get(name);
+}
+/** Changes every time the library is registered; 0 before the first time. */
+export function iconLibraryVersion(name) {
+    return versions.get(name) ?? 0;
+}
+/** Calls `listener` with the name of every library that gets (re-)registered. Returns the unsubscribe. */
+export function onIconLibraryChange(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,25 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuIcon extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly name: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly library: {
+            readonly type: "string";
+            readonly default: "system";
+            readonly reflect: true;
+        };
+        readonly label: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+    }>;
+    name: string;
+    library: string;
+    label: string;
+    private readonly drawer;
+    protected update(changed: ReadonlySet<string>): void;
+    protected connected(): void;
+    protected disconnected(): void;
+}

package/dist/components/icon/icon.def.d.ts

@@ -0,0 +1,15 @@
+export declare const iconDef: import("../../core/define.js").ComponentDef<{
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly library: {
+        readonly type: "string";
+        readonly default: "system";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+}>;

package/dist/components/icon/icon.def.js

@@ -0,0 +1,24 @@
+import { defineComponent } from '../../core/define.js';
+import { html, unsafeHTML } from '../../core/html.js';
+import { iconStyles } from './icon.styles.js';
+import { systemIconSvg } from './system-icons.js';
+export const iconDef = defineComponent({
+    tag: 'neu-icon',
+    props: {
+        name: { type: 'string', reflect: true },
+        library: { type: 'string', default: 'system', reflect: true },
+        label: { type: 'string', reflect: true },
+    },
+    styles: iconStyles,
+    template: (p) => {
+        const svg = p.library === 'system' ? systemIconSvg(p.name) : undefined;
+        return html `<span class="box" data-ref="box">${svg === undefined ? '' : unsafeHTML(svg)}</span>`;
+    },
+    docs: {
+        summary: 'A vector icon from the built-in set or a registered icon library.',
+        events: [],
+        slots: [],
+        parts: [{ name: 'svg', description: 'The rendered SVG element.' }],
+        cssProperties: [],
+    },
+});

package/dist/components/icon/icon.js

@@ -0,0 +1,23 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { iconDrawer } from './icon-drawer.js';
+import { iconDef } from './icon.def.js';
+export class NeuIcon extends NeuElement {
+    static def = iconDef;
+    drawer = iconDrawer(() => this.ref('box'), () => String(this.props.library), () => String(this.props.name));
+    update(changed) {
+        if (changed.has('label')) {
+            const label = String(this.props.label);
+            this.internals.role = label ? 'img' : null;
+            this.internals.ariaLabel = label || null;
+            this.internals.ariaHidden = label ? null : 'true';
+        }
+        if (changed.has('name') || changed.has('library'))
+            this.drawer.draw();
+    }
+    connected() {
+        this.drawer.connected();
+    }
+    disconnected() {
+        this.drawer.disconnected();
+    }
+}

package/dist/components/icon/icon.styles.d.ts

@@ -0,0 +1 @@
+export declare const iconStyles = "\n:host { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; color: inherit; }\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n.box, svg { display: block; inline-size: 100%; block-size: 100%; }\n.box { contain: paint; }\n";

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,7 @@
+export const iconStyles = `
+:host { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; color: inherit; }
+:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }
+:host([hidden]) { display: none !important; }
+.box, svg { display: block; inline-size: 100%; block-size: 100%; }
+.box { contain: paint; }
+`;

package/dist/components/icon/system-icons.d.ts

@@ -0,0 +1,2 @@
+/** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
+export declare function systemIconSvg(name: string): string | undefined;

package/dist/components/icon/system-icons.js

@@ -0,0 +1,17 @@
+const BODIES = {
+    check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+    'chevron-down': '<path d="M6 9l6 6 6-6"/>',
+    'chevron-up': '<path d="M6 15l6-6 6 6"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    minus: '<path d="M5 12h14"/>',
+    x: '<path d="M6 6l12 12M18 6L6 18"/>',
+    'alert-circle': '<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5h.01"/>',
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/>',
+};
+/** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
+export function systemIconSvg(name) {
+    const body = Object.hasOwn(BODIES, name) ? BODIES[name] : undefined;
+    if (body === undefined)
+        return undefined;
+    return `<svg part="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,51 @@
+import { NeuButton } from '../button/button.js';
+export declare class NeuIconButton extends NeuButton {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly icon: {
+            readonly type: "string";
+        };
+        readonly library: {
+            readonly type: "string";
+            readonly default: "system";
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly shape: {
+            readonly type: "string";
+            readonly default: "circle";
+            readonly values: readonly ["circle", "square"];
+            readonly reflect: true;
+        };
+        readonly variant: {
+            readonly type: "string";
+            readonly default: "default";
+            readonly values: readonly ["default", "primary", "flat"];
+            readonly reflect: true;
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly type: {
+            readonly type: "string";
+            readonly default: "button";
+            readonly values: readonly ["button", "submit", "reset"];
+            readonly reflect: true;
+        };
+    }>;
+    icon: string;
+    library: string;
+    label: string;
+    shape: 'circle' | 'square';
+    private readonly drawer;
+    protected update(changed: ReadonlySet<string>): void;
+    protected connected(): void;
+    protected disconnected(): void;
+}

package/dist/components/icon-button/icon-button.def.d.ts

@@ -0,0 +1,40 @@
+export declare const iconButtonDef: import("../../core/define.js").ComponentDef<{
+    readonly icon: {
+        readonly type: "string";
+    };
+    readonly library: {
+        readonly type: "string";
+        readonly default: "system";
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly shape: {
+        readonly type: "string";
+        readonly default: "circle";
+        readonly values: readonly ["circle", "square"];
+        readonly reflect: true;
+    };
+    readonly variant: {
+        readonly type: "string";
+        readonly default: "default";
+        readonly values: readonly ["default", "primary", "flat"];
+        readonly reflect: true;
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly type: {
+        readonly type: "string";
+        readonly default: "button";
+        readonly values: readonly ["button", "submit", "reset"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/icon-button/icon-button.def.js

@@ -0,0 +1,44 @@
+import { defineComponent } from '../../core/define.js';
+import { html, unsafeHTML } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { systemIconSvg } from '../icon/system-icons.js';
+import { iconButtonStyles } from './icon-button.styles.js';
+export const iconButtonDef = defineComponent({
+    tag: 'neu-icon-button',
+    props: {
+        icon: { type: 'string' },
+        library: { type: 'string', default: 'system' },
+        label: { type: 'string' },
+        shape: { type: 'string', default: 'circle', values: ['circle', 'square'], reflect: true },
+        variant: {
+            type: 'string',
+            default: 'default',
+            values: ['default', 'primary', 'flat'],
+            reflect: true,
+        },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        disabled: { type: 'boolean', reflect: true },
+        type: {
+            type: 'string',
+            default: 'button',
+            values: ['button', 'submit', 'reset'],
+            reflect: true,
+        },
+    },
+    styles: iconButtonStyles,
+    template: (p) => {
+        const svg = p.library === 'system' ? systemIconSvg(p.icon) : undefined;
+        return html `<span part="base" class="base"><span part="icon" class="icon" data-ref="icon">${svg === undefined ? '' : unsafeHTML(svg)}</span></span>`;
+    },
+    docs: {
+        summary: 'A raised button that shows an icon instead of a label. Name it with label.',
+        events: [{ name: 'click', description: 'Fired on activation; never while disabled.' }],
+        slots: [],
+        parts: [
+            { name: 'base', description: 'The raised surface.' },
+            { name: 'icon', description: 'Wrapper around the icon.' },
+            { name: 'svg', description: 'The rendered SVG element.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,21 @@
+import { NeuButton } from '../button/button.js';
+import { iconDrawer } from '../icon/icon-drawer.js';
+import { iconButtonDef } from './icon-button.def.js';
+export class NeuIconButton extends NeuButton {
+    static def = iconButtonDef;
+    drawer = iconDrawer(() => this.ref('icon'), () => String(this.props.library), () => String(this.props.icon));
+    update(changed) {
+        super.update(changed);
+        if (changed.has('label') || changed.has('icon')) {
+            this.internals.ariaLabel = String(this.props.label || this.props.icon) || null;
+        }
+        if (changed.has('icon') || changed.has('library'))
+            this.drawer.draw();
+    }
+    connected() {
+        this.drawer.connected();
+    }
+    disconnected() {
+        this.drawer.disconnected();
+    }
+}

package/dist/components/icon-button/icon-button.styles.d.ts

@@ -0,0 +1 @@
+export declare const iconButtonStyles: string;

package/dist/components/icon-button/icon-button.styles.js

@@ -0,0 +1,12 @@
+import { buttonBaseStyles } from '../button/button.styles.js';
+export const iconButtonStyles = `${buttonBaseStyles}
+:host { inline-size: 2.5rem; block-size: 2.5rem; }
+:host([size='sm']) { inline-size: 2rem; block-size: 2rem; }
+:host([size='lg']) { inline-size: 3rem; block-size: 3rem; }
+.base { inline-size: 100%; block-size: 100%; --_neu-rr: 50%; }
+:host([shape='square']) .base { --_neu-rr: var(--_neu-r); }
+.icon { display: block; inline-size: 1.125rem; block-size: 1.125rem; contain: paint; }
+:host([size='sm']) .icon { inline-size: 1rem; block-size: 1rem; }
+:host([size='lg']) .icon { inline-size: 1.375rem; block-size: 1.375rem; }
+.icon svg { display: block; inline-size: 100%; block-size: 100%; }
+`;