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

package/dist/all.d.ts

@@ -0,0 +1,12 @@
+export * from './avatar.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './button-group.js';
+export * from './divider.js';
+export * from './icon.js';
+export * from './icon-button.js';
+export * from './icons.js';
+export * from './spinner.js';
+export * from './surface.js';
+export * from './switch.js';
+export * from './text-field.js';

package/dist/all.js

@@ -0,0 +1,12 @@
+export * from './avatar.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './button-group.js';
+export * from './divider.js';
+export * from './icon.js';
+export * from './icon-button.js';
+export * from './icons.js';
+export * from './spinner.js';
+export * from './surface.js';
+export * from './switch.js';
+export * from './text-field.js';

package/dist/avatar.d.ts

@@ -0,0 +1,3 @@
+import { NeuAvatar } from './components/avatar/avatar.js';
+export { NeuAvatar };
+export { avatarDef } from './components/avatar/avatar.def.js';

package/dist/avatar.js

@@ -0,0 +1,4 @@
+import { NeuAvatar } from './components/avatar/avatar.js';
+NeuAvatar.define();
+export { NeuAvatar };
+export { avatarDef } from './components/avatar/avatar.def.js';

package/dist/badge.d.ts

@@ -0,0 +1,3 @@
+import { NeuBadge } from './components/badge/badge.js';
+export { NeuBadge };
+export { badgeDef } from './components/badge/badge.def.js';

package/dist/badge.js

@@ -0,0 +1,4 @@
+import { NeuBadge } from './components/badge/badge.js';
+NeuBadge.define();
+export { NeuBadge };
+export { badgeDef } from './components/badge/badge.def.js';

package/dist/button-group.d.ts

@@ -0,0 +1,3 @@
+import { NeuButtonGroup } from './components/button-group/button-group.js';
+export { NeuButtonGroup };
+export { buttonGroupDef } from './components/button-group/button-group.def.js';

package/dist/button-group.js

@@ -0,0 +1,4 @@
+import { NeuButtonGroup } from './components/button-group/button-group.js';
+NeuButtonGroup.define();
+export { NeuButtonGroup };
+export { buttonGroupDef } from './components/button-group/button-group.def.js';

package/dist/button.d.ts

@@ -0,0 +1,3 @@
+import { NeuButton } from './components/button/button.js';
+export { NeuButton };
+export { buttonDef } from './components/button/button.def.js';

package/dist/button.js

@@ -0,0 +1,4 @@
+import { NeuButton } from './components/button/button.js';
+NeuButton.define();
+export { NeuButton };
+export { buttonDef } from './components/button/button.def.js';

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,38 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuAvatar extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly src: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly initials: {
+            readonly type: "string";
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+        readonly shape: {
+            readonly type: "string";
+            readonly default: "circle";
+            readonly values: readonly ["circle", "rounded"];
+            readonly reflect: true;
+        };
+    }>;
+    src: string;
+    label: string;
+    initials: string;
+    size: 'sm' | 'md' | 'lg';
+    shape: 'circle' | 'rounded';
+    private broken;
+    protected willUpdate(changed: ReadonlySet<string>): void;
+    protected rendered(): void;
+    protected update(changed: ReadonlySet<string>): void;
+    private showing;
+    private setBroken;
+}

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

@@ -0,0 +1,24 @@
+export declare const avatarDef: import("../../core/define.js").ComponentDef<{
+    readonly src: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly initials: {
+        readonly type: "string";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+    readonly shape: {
+        readonly type: "string";
+        readonly default: "circle";
+        readonly values: readonly ["circle", "rounded"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/avatar/avatar.def.js

@@ -0,0 +1,33 @@
+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 { avatarStyles } from './avatar.styles.js';
+export const avatarDef = defineComponent({
+    tag: 'neu-avatar',
+    props: {
+        src: { type: 'string', reflect: true },
+        label: { type: 'string' },
+        initials: { type: 'string' },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        shape: { type: 'string', default: 'circle', values: ['circle', 'rounded'], reflect: true },
+    },
+    styles: avatarStyles,
+    template: (p) => {
+        const show = p.src ? 'image' : p.initials ? 'initials' : 'icon';
+        return html `<span part="base" class="base" data-ref="base" data-show="${show}"><img part="image" class="image" data-ref="image" alt=""${p.src ? html ` src="${p.src}"` : ''}><span part="initials" class="initials" data-ref="initials">${p.initials}</span><span part="icon" class="icon">${unsafeHTML(systemIconSvg('user') ?? '')}</span></span>`;
+    },
+    docs: {
+        summary: 'A user picture that falls back to initials, then to a generic user icon. With `label` it is an image named by it; without, it is decorative and hidden from assistive technology.',
+        events: [],
+        slots: [],
+        parts: [
+            { name: 'base', description: 'The sized, raised wrapper.' },
+            { name: 'image', description: 'The picture.' },
+            { name: 'initials', description: 'The initials shown when there is no picture.' },
+            { name: 'icon', description: 'Wrapper around the fallback user icon.' },
+            { name: 'svg', description: 'The rendered fallback SVG element.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/avatar/avatar.js

@@ -0,0 +1,58 @@
+import { setText } from '../../core/dom.js';
+import { NeuElement } from '../../core/neu-element.js';
+import { avatarDef } from './avatar.def.js';
+export class NeuAvatar extends NeuElement {
+    static def = avatarDef;
+    broken = false;
+    willUpdate(changed) {
+        if (changed.has('src'))
+            this.setBroken(false);
+    }
+    rendered() {
+        const img = this.ref('image');
+        if (!img)
+            return;
+        img.addEventListener('error', () => this.setBroken(true));
+        // The error event may have fired before this element upgraded; it will not fire again. An SVG
+        // without intrinsic size is not caught here: browsers give it a 300x150 (or viewBox) size.
+        if (img.hasAttribute('src') && img.complete && img.naturalWidth === 0)
+            this.broken = true;
+        this.toggleState('image-error', this.broken);
+    }
+    update(changed) {
+        if (changed.has('label')) {
+            // Like neu-icon: a picture is named by its label, otherwise it is decoration.
+            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('initials'))
+            setText(this.ref('initials'), String(this.props.initials));
+        const img = this.ref('image');
+        if (!img)
+            return;
+        const src = String(this.props.src);
+        if (changed.has('src') && (img.getAttribute('src') ?? '') !== src) {
+            if (src)
+                img.setAttribute('src', src);
+            else
+                img.removeAttribute('src');
+        }
+        const base = this.ref('base');
+        const show = this.showing();
+        if (base.dataset.show !== show)
+            base.dataset.show = show;
+    }
+    showing() {
+        return this.props.src && !this.broken ? 'image' : this.props.initials ? 'initials' : 'icon';
+    }
+    setBroken(broken) {
+        if (this.broken === broken)
+            return;
+        this.broken = broken;
+        this.toggleState('image-error', broken);
+        if (this.ref('base'))
+            this.update(new Set());
+    }
+}

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

@@ -0,0 +1 @@
+export declare const avatarStyles = "\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-block; vertical-align: middle; --_neu-s: 2.5rem; inline-size: var(--_neu-s); block-size: var(--_neu-s); }\n:host([size='sm']) { --_neu-s: 2rem; }\n:host([size='lg']) { --_neu-s: 3.5rem; }\n.base { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 100%; block-size: 100%; overflow: hidden; font-size: calc(var(--_neu-s) * 0.4); font-weight: 600; border-radius: 50%; box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }\n:host([shape='rounded']) .base { border-radius: var(--_neu-r); }\n.image, .initials, .icon { display: none; }\n.image { inline-size: 100%; block-size: 100%; object-fit: cover; }\n.base[data-show='image'] .image, .base[data-show='initials'] .initials { display: block; }\n.base[data-show='icon'] .icon { display: flex; inline-size: 60%; block-size: 60%; }\n.icon svg { inline-size: 100%; block-size: 100%; }\n";

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,13 @@
+import { hostTheme } from '../../core/styles.js';
+export const avatarStyles = `${hostTheme}
+:host { display: inline-block; vertical-align: middle; --_neu-s: 2.5rem; inline-size: var(--_neu-s); block-size: var(--_neu-s); }
+:host([size='sm']) { --_neu-s: 2rem; }
+:host([size='lg']) { --_neu-s: 3.5rem; }
+.base { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 100%; block-size: 100%; overflow: hidden; font-size: calc(var(--_neu-s) * 0.4); font-weight: 600; border-radius: 50%; box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }
+:host([shape='rounded']) .base { border-radius: var(--_neu-r); }
+.image, .initials, .icon { display: none; }
+.image { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.base[data-show='image'] .image, .base[data-show='initials'] .initials { display: block; }
+.base[data-show='icon'] .icon { display: flex; inline-size: 60%; block-size: 60%; }
+.icon svg { inline-size: 100%; block-size: 100%; }
+`;

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,17 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuBadge extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly variant: {
+            readonly type: "string";
+            readonly default: "neutral";
+            readonly values: readonly ["neutral", "accent", "success", "warning", "danger"];
+            readonly reflect: true;
+        };
+        readonly pill: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+    }>;
+    variant: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+    pill: boolean;
+}

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

@@ -0,0 +1,12 @@
+export declare const badgeDef: import("../../core/define.js").ComponentDef<{
+    readonly variant: {
+        readonly type: "string";
+        readonly default: "neutral";
+        readonly values: readonly ["neutral", "accent", "success", "warning", "danger"];
+        readonly reflect: true;
+    };
+    readonly pill: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+}>;

package/dist/components/badge/badge.def.js

@@ -0,0 +1,29 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { badgeStyles } from './badge.styles.js';
+export const badgeDef = defineComponent({
+    tag: 'neu-badge',
+    props: {
+        variant: {
+            type: 'string',
+            default: 'neutral',
+            values: ['neutral', 'accent', 'success', 'warning', 'danger'],
+            reflect: true,
+        },
+        pill: { type: 'boolean', reflect: true },
+    },
+    styles: badgeStyles,
+    template: () => html `<span part="base" class="base"><slot></slot></span>`,
+    docs: {
+        summary: 'A small raised label for status or counts.',
+        events: [],
+        slots: [{ name: '', description: 'The badge text.' }],
+        parts: [{ name: 'base', description: 'The badge itself.' }],
+        cssProperties: [
+            ...themeCssProperties,
+            { name: '--neu-success', description: 'Colour of the success variant.' },
+            { name: '--neu-warning', description: 'Colour of the warning variant.' },
+        ],
+    },
+});

package/dist/components/badge/badge.js

@@ -0,0 +1,5 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { badgeDef } from './badge.def.js';
+export class NeuBadge extends NeuElement {
+    static def = badgeDef;
+}

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

@@ -0,0 +1 @@
+export declare const badgeStyles = "\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-block; vertical-align: middle; --_neu-success: var(--neu-success, #3bb273); --_neu-warning: var(--neu-warning, #e6a23c); }\n.base { display: inline-flex; align-items: center; min-block-size: 1.25rem; padding-inline: 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: calc(var(--_neu-r) * 0.5); box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }\n:host([pill]) .base { border-radius: 999px; }\n:host([variant='accent']) .base { color: var(--_neu-accent-c); }\n:host([variant='success']) .base { color: var(--_neu-success); }\n:host([variant='warning']) .base { color: var(--_neu-warning); }\n:host([variant='danger']) .base { color: var(--_neu-danger); }\n";

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,10 @@
+import { hostTheme } from '../../core/styles.js';
+export const badgeStyles = `${hostTheme}
+:host { display: inline-block; vertical-align: middle; --_neu-success: var(--neu-success, #3bb273); --_neu-warning: var(--neu-warning, #e6a23c); }
+.base { display: inline-flex; align-items: center; min-block-size: 1.25rem; padding-inline: 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: calc(var(--_neu-r) * 0.5); box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }
+:host([pill]) .base { border-radius: 999px; }
+:host([variant='accent']) .base { color: var(--_neu-accent-c); }
+:host([variant='success']) .base { color: var(--_neu-success); }
+:host([variant='warning']) .base { color: var(--_neu-warning); }
+:host([variant='danger']) .base { color: var(--_neu-danger); }
+`;

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

@@ -0,0 +1,25 @@
+import { SUBMITS } from '../../core/form-control.js';
+import type { ComponentDef } from '../../core/define.js';
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuButton extends NeuElement {
+    static def: ComponentDef;
+    /** Form-associated only to reach internals.form; a button contributes no value. */
+    static formAssociated: boolean;
+    /** type="submit" submits the form, so this class and its subclasses can be the default button. */
+    static readonly [SUBMITS] = true;
+    variant: 'default' | 'primary' | 'flat';
+    size: 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    loading: boolean;
+    type: 'button' | 'submit' | 'reset';
+    constructor();
+    get form(): HTMLFormElement | null;
+    private get inactive();
+    /** The base class already swallows clicks while disabled; loading needs the same. */
+    private onClickCapture;
+    /** Like a native button: submit or reset once the click has dispatched, unless it was cancelled. */
+    private onClick;
+    private onKeyDown;
+    private onKeyUp;
+    protected update(changed: ReadonlySet<string>): void;
+}

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

@@ -0,0 +1,28 @@
+export declare const buttonDef: import("../../core/define.js").ComponentDef<{
+    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 loading: {
+        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/button/button.def.js

@@ -0,0 +1,45 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { buttonStyles } from './button.styles.js';
+export const buttonDef = defineComponent({
+    tag: 'neu-button',
+    props: {
+        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 },
+        loading: { type: 'boolean', reflect: true },
+        type: {
+            type: 'string',
+            default: 'button',
+            values: ['button', 'submit', 'reset'],
+            reflect: true,
+        },
+    },
+    styles: buttonStyles,
+    template: () => html `<span part="base" class="base"><span part="prefix" class="prefix"><slot name="prefix"></slot></span><span part="label" class="label"><slot></slot></span><span part="suffix" class="suffix"><slot name="suffix"></slot></span><span part="spinner" class="spinner" aria-hidden="true"></span></span>`,
+    docs: {
+        summary: 'A raised button. Use variant="primary" for the main action of a view.',
+        events: [
+            { name: 'click', description: 'Fired on activation; never while disabled or loading.' },
+        ],
+        slots: [
+            { name: '', description: 'Button label.' },
+            { name: 'prefix', description: 'Content before the label, such as an icon.' },
+            { name: 'suffix', description: 'Content after the label.' },
+        ],
+        parts: [
+            { name: 'base', description: 'The raised surface.' },
+            { name: 'label', description: 'Wrapper around the default slot.' },
+            { name: 'prefix', description: 'Wrapper around the prefix slot.' },
+            { name: 'suffix', description: 'Wrapper around the suffix slot.' },
+            { name: 'spinner', description: 'Spinner shown while loading.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/button/button.js

@@ -0,0 +1,87 @@
+import { afterDispatch, isActiveInRoot } from '../../core/dom.js';
+import { markSubmitAttempt, SUBMITS } from '../../core/form-control.js';
+import { NeuElement } from '../../core/neu-element.js';
+import { buttonDef } from './button.def.js';
+export class NeuButton extends NeuElement {
+    static def = buttonDef;
+    /** Form-associated only to reach internals.form; a button contributes no value. */
+    static formAssociated = true;
+    /** type="submit" submits the form, so this class and its subclasses can be the default button. */
+    static [SUBMITS] = true;
+    constructor() {
+        super();
+        this.internals.role = 'button';
+        this.addEventListener('click', (event) => this.onClickCapture(event), { capture: true });
+        this.addEventListener('click', (event) => this.onClick(event));
+        this.addEventListener('keydown', (event) => this.onKeyDown(event));
+        this.addEventListener('keyup', (event) => this.onKeyUp(event));
+        // Disarm when focus moves away, not when only the window loses focus.
+        this.addEventListener('blur', () => {
+            if (!isActiveInRoot(this))
+                this.toggleState('pressed', false);
+        });
+        // Focus coming back means Space may have been released while it was away.
+        this.addEventListener('focus', () => this.toggleState('pressed', false));
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get inactive() {
+        return this.isDisabled || this.props.loading === true;
+    }
+    /** The base class already swallows clicks while disabled; loading needs the same. */
+    onClickCapture(event) {
+        if (this.props.loading !== true)
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    /** Like a native button: submit or reset once the click has dispatched, unless it was cancelled. */
+    onClick(event) {
+        afterDispatch(event, () => {
+            const form = this.internals.form;
+            if (event.defaultPrevented || !form)
+                return;
+            if (this.props.type === 'submit') {
+                markSubmitAttempt(form);
+                // No submitter (spec §7.1): new FormData(form, host) would throw for a non-native one.
+                form.requestSubmit();
+            }
+            else if (this.props.type === 'reset') {
+                form.reset();
+            }
+        });
+    }
+    onKeyDown(event) {
+        if (this.inactive)
+            return;
+        if (event.key === 'Enter') {
+            // Not cancelled here, so a handler further up can still cancel the activation.
+            afterDispatch(event, () => {
+                if (!event.defaultPrevented && !this.inactive)
+                    this.click();
+            });
+        }
+        else if (event.key === ' ' && !event.defaultPrevented) {
+            // Cancelled at once: deferred, an ancestor that stops propagation would let the page scroll.
+            // An ancestor claims Space in the capture phase, or by cancelling the keyup.
+            event.preventDefault();
+            this.toggleState('pressed', true);
+        }
+    }
+    onKeyUp(event) {
+        if (event.key !== ' ' || !this.internals.states.has('pressed'))
+            return;
+        this.toggleState('pressed', false);
+        afterDispatch(event, () => {
+            if (!event.defaultPrevented && !this.inactive)
+                this.click();
+        });
+    }
+    update(changed) {
+        if (changed.has('disabled') || changed.has('loading')) {
+            this.syncDisabledState();
+            this.internals.ariaBusy = this.props.loading === true ? 'true' : null;
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+export declare const buttonBaseStyles: string;
+export declare const buttonStyles: string;

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

@@ -0,0 +1,43 @@
+import { hostTheme } from '../../core/styles.js';
+/**
+ * Look and states shared by every button-like component; sizing is each component's own. A
+ * neu-button-group turns the host into a flex box, and the base grows to fill it edge to edge.
+ */
+/** `loading` is only a thing on neu-button; icon buttons ignore a stray attribute. */
+const shared = (loading) => `${hostTheme}
+:host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; }
+:host(:disabled), :host([disabled])${loading ? ', :host([loading])' : ''} { cursor: not-allowed; }
+.base {
+  display: inline-flex; flex: auto; align-items: center; justify-content: center;
+  border-start-start-radius: var(--_neu-grp-ss, var(--_neu-rr, var(--_neu-r))); border-start-end-radius: var(--_neu-grp-se, var(--_neu-rr, var(--_neu-r)));
+  border-end-start-radius: var(--_neu-grp-es, var(--_neu-rr, var(--_neu-r))); border-end-end-radius: var(--_neu-grp-ee, var(--_neu-rr, var(--_neu-r)));
+  background: var(--_neu-bg);
+  color: var(--_neu-fg);
+  box-shadow: var(--_neu-grp-shadow, var(--_neu-raised));
+  transition: box-shadow var(--_neu-dur) ease, color var(--_neu-dur) ease;
+}
+:host([size='sm']) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised-sm)); }
+:host([variant='primary']) .base { color: var(--_neu-accent-c); }
+:host([variant='flat']) .base { box-shadow: none; }
+:host([variant='flat']:hover:not(:disabled):not([disabled])) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised-sm)); }
+:host(:active:not(:disabled):not([disabled])${loading ? ':not([loading])' : ''}) .base, :host(:state(pressed)) .base { box-shadow: var(--_neu-inset-sm); }
+:host(:focus-visible) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised)), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { box-shadow: none; color: var(--_neu-fg-muted); }
+`;
+export const buttonBaseStyles = shared(false);
+export const buttonStyles = `${shared(true)}
+.base { min-block-size: 2.5rem; padding-inline: 1.125rem; font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1; }
+:host([size='sm']) .base { min-block-size: 2rem; padding-inline: 0.875rem; font-size: 0.8125rem; }
+:host([size='lg']) .base { min-block-size: 3rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
+.prefix, .suffix { display: inline-flex; }
+::slotted([slot='prefix']) { margin-inline-end: 0.5em; }
+::slotted([slot='suffix']) { margin-inline-start: 0.5em; }
+.spinner {
+  display: none; inline-size: 1em; block-size: 1em; margin-inline-start: 0.5em; border-radius: 50%;
+  border: 2px solid var(--_neu-accent-soft); border-block-start-color: var(--_neu-accent-c);
+  animation: neu-spin 0.8s linear infinite;
+}
+:host([loading]) .spinner { display: inline-block; }
+@keyframes neu-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
+`;

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { buttonGroupStyles } from './button-group.styles.js';
+export const buttonGroupDef = defineComponent({
+    tag: 'neu-button-group',
+    props: {
+        label: { type: 'string', reflect: true },
+        orientation: {
+            type: 'string',
+            default: 'horizontal',
+            values: ['horizontal', 'vertical'],
+            reflect: true,
+        },
+    },
+    styles: buttonGroupStyles,
+    template: () => html `<span part="base" class="base"><slot></slot></span>`,
+    docs: {
+        summary: 'Merges adjacent buttons into one raised block.',
+        events: [],
+        slots: [{ name: '', description: 'neu-button and neu-icon-button elements.' }],
+        parts: [{ name: 'base', description: 'The raised wrapper around the buttons.' }],
+        cssProperties: themeCssProperties,
+    },
+});