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

package/dist/core/props.js

@@ -0,0 +1,52 @@
+/** `helpText` → `help-text`, unless the declaration names the attribute explicitly. */
+export function attributeName(prop, decl) {
+    return decl.attribute ?? prop.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+}
+/** Attribute text (null when absent) → prop value. Invalid input silently becomes the default. */
+export function parseAttribute(decl, raw) {
+    switch (decl.type) {
+        case 'boolean':
+            return raw !== null;
+        case 'number': {
+            if (raw === null || raw.trim() === '')
+                return decl.default;
+            const parsed = Number(raw);
+            return Number.isFinite(parsed) ? parsed : decl.default;
+        }
+        case 'string': {
+            const fallback = decl.default ?? '';
+            if (raw === null)
+                return fallback;
+            if (decl.values && !decl.values.includes(raw))
+                return fallback;
+            return raw;
+        }
+    }
+}
+/** Value assigned through a JS property → prop value, with the same fallback rules. */
+export function coerceProperty(decl, value) {
+    if (decl.type === 'boolean')
+        return Boolean(value);
+    if (decl.type === 'number' && typeof value === 'number') {
+        return Number.isFinite(value) ? value : decl.default;
+    }
+    return parseAttribute(decl, value === null || value === undefined ? null : String(value));
+}
+/** Prop value → attribute text for reflection and SSR; null means "remove the attribute". */
+export function serializeAttribute(decl, value) {
+    switch (decl.type) {
+        case 'boolean':
+            return value ? '' : null;
+        case 'number':
+            return String(value);
+        case 'string':
+            return value === '' ? null : String(value);
+    }
+}
+export function parseProps(schema, read) {
+    const props = {};
+    for (const [key, decl] of Object.entries(schema)) {
+        props[key] = parseAttribute(decl, read(attributeName(key, decl)));
+    }
+    return props;
+}

package/dist/core/styles.d.ts

@@ -0,0 +1,8 @@
+import type { DocEntry } from './define.js';
+/**
+ * Re-declares the derived theme values on every host (spec §5.3). Fallbacks are the light
+ * defaults from @neumorphism-ui/tokens so components still look right without the tokens stylesheet;
+ * styles.test.ts keeps the two in sync.
+ */
+export declare const hostTheme = "\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";
+export declare const themeCssProperties: readonly DocEntry[];

package/dist/core/styles.js

@@ -0,0 +1,40 @@
+/**
+ * Re-declares the derived theme values on every host (spec §5.3). Fallbacks are the light
+ * defaults from @neumorphism-ui/tokens so components still look right without the tokens stylesheet;
+ * styles.test.ts keeps the two in sync.
+ */
+export const hostTheme = `
+:host {
+  --_neu-bg: var(--neu-bg, #e0e5ec);
+  --_neu-accent-c: var(--neu-accent, #6d5dfc);
+  --_neu-d: var(--neu-distance, 6px);
+  --_neu-k: var(--neu-intensity, 1);
+  --_neu-r: var(--neu-radius, 12px);
+  --_neu-danger: var(--neu-danger, #e5484d);
+  --_neu-dur: var(--neu-duration, 150ms);
+  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));
+  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));
+  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));
+  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));
+  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));
+  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);
+  --_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);
+  --_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);
+  --_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);
+  --_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);
+  font-family: var(--neu-font);
+  color: var(--_neu-fg);
+  -webkit-tap-highlight-color: transparent;
+}
+:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }
+:host([hidden]) { display: none !important; }
+:host(:focus) { outline: none; }
+*, *::before, *::after { box-sizing: border-box; }
+`;
+export const themeCssProperties = [
+    { name: '--neu-bg', description: 'Surface colour; shadows and text are derived from it.' },
+    { name: '--neu-accent', description: 'Accent colour.' },
+    { name: '--neu-distance', description: 'Shadow distance for the md size.' },
+    { name: '--neu-intensity', description: 'Shadow strength multiplier.' },
+    { name: '--neu-radius', description: 'Corner radius for the md size.' },
+];

package/dist/core/validation.d.ts

@@ -0,0 +1,4 @@
+/** The browser's own, localised "please check this box" message, borrowed from a native checkbox. */
+export declare function requiredCheckboxMessage(): string;
+/** Copies a native input's validity so the host can report the same errors. */
+export declare function copyValidity(validity: ValidityState): ValidityStateFlags;

package/dist/core/validation.js

@@ -0,0 +1,26 @@
+let checkboxMessage;
+/** The browser's own, localised "please check this box" message, borrowed from a native checkbox. */
+export function requiredCheckboxMessage() {
+    if (checkboxMessage === undefined) {
+        const probe = document.createElement('input');
+        probe.type = 'checkbox';
+        probe.required = true;
+        checkboxMessage = probe.validationMessage || 'Please check this box if you want to proceed.';
+    }
+    return checkboxMessage;
+}
+/** Copies a native input's validity so the host can report the same errors. */
+export function copyValidity(validity) {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+}

package/dist/divider.d.ts

@@ -0,0 +1,3 @@
+import { NeuDivider } from './components/divider/divider.js';
+export { NeuDivider };
+export { dividerDef } from './components/divider/divider.def.js';

package/dist/divider.js

@@ -0,0 +1,4 @@
+import { NeuDivider } from './components/divider/divider.js';
+NeuDivider.define();
+export { NeuDivider };
+export { dividerDef } from './components/divider/divider.def.js';

package/dist/icon-button.d.ts

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

package/dist/icon-button.js

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

package/dist/icon.d.ts

@@ -0,0 +1,3 @@
+import { NeuIcon } from './components/icon/icon.js';
+export { NeuIcon };
+export { iconDef } from './components/icon/icon.def.js';

package/dist/icon.js

@@ -0,0 +1,4 @@
+import { NeuIcon } from './components/icon/icon.js';
+NeuIcon.define();
+export { NeuIcon };
+export { iconDef } from './components/icon/icon.def.js';

package/dist/icons.d.ts

@@ -0,0 +1,2 @@
+export type { IconLibrary } from './components/icon/icon-registry.js';
+export { registerIconLibrary } from './components/icon/icon-registry.js';

package/dist/icons.js

@@ -0,0 +1 @@
+export { registerIconLibrary } from './components/icon/icon-registry.js';

package/dist/spinner.d.ts

@@ -0,0 +1,3 @@
+import { NeuSpinner } from './components/spinner/spinner.js';
+export { NeuSpinner };
+export { spinnerDef } from './components/spinner/spinner.def.js';

package/dist/spinner.js

@@ -0,0 +1,4 @@
+import { NeuSpinner } from './components/spinner/spinner.js';
+NeuSpinner.define();
+export { NeuSpinner };
+export { spinnerDef } from './components/spinner/spinner.def.js';

package/dist/ssr.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentDef } from './core/define.js';
+export type { ComponentDef, ComponentDocs, DocEntry, FormDef } from './core/define.js';
+export { formDefaultProp } from './core/define.js';
+export type { InferProps, PropDecl, PropsSchema, PropValue } from './core/props.js';
+export { attributeName, coerceProperty, parseAttribute, parseProps, serializeAttribute, } from './core/props.js';
+/** Every component definition by tag. DOM-free: safe to import in Node. */
+export declare const definitions: ReadonlyMap<string, ComponentDef>;
+/** Inner HTML of a declarative shadow root: inline styles, then the template. */
+export declare function renderShadowContents(def: ComponentDef, attrs: Readonly<Record<string, string>>): string;
+/** The `<template shadowrootmode>` for one element, or '' for tags this library does not own. */
+export declare function renderDSD(tag: string, attrs: Readonly<Record<string, string>>): string;

package/dist/ssr.js

@@ -0,0 +1,41 @@
+import { avatarDef } from './components/avatar/avatar.def.js';
+import { badgeDef } from './components/badge/badge.def.js';
+import { buttonDef } from './components/button/button.def.js';
+import { buttonGroupDef } from './components/button-group/button-group.def.js';
+import { dividerDef } from './components/divider/divider.def.js';
+import { iconDef } from './components/icon/icon.def.js';
+import { iconButtonDef } from './components/icon-button/icon-button.def.js';
+import { spinnerDef } from './components/spinner/spinner.def.js';
+import { surfaceDef } from './components/surface/surface.def.js';
+import { switchDef } from './components/switch/switch.def.js';
+import { textFieldDef } from './components/text-field/text-field.def.js';
+import { parseProps } from './core/props.js';
+export { formDefaultProp } from './core/define.js';
+export { attributeName, coerceProperty, parseAttribute, parseProps, serializeAttribute, } from './core/props.js';
+/** Every component definition by tag. DOM-free: safe to import in Node. */
+export const definitions = /* @__PURE__ */ new Map([
+    [avatarDef.tag, avatarDef],
+    [badgeDef.tag, badgeDef],
+    [buttonDef.tag, buttonDef],
+    [buttonGroupDef.tag, buttonGroupDef],
+    [dividerDef.tag, dividerDef],
+    [iconDef.tag, iconDef],
+    [iconButtonDef.tag, iconButtonDef],
+    [spinnerDef.tag, spinnerDef],
+    [surfaceDef.tag, surfaceDef],
+    [switchDef.tag, switchDef],
+    [textFieldDef.tag, textFieldDef],
+]);
+/** Inner HTML of a declarative shadow root: inline styles, then the template. */
+export function renderShadowContents(def, attrs) {
+    const props = parseProps(def.props, (name) => (Object.hasOwn(attrs, name) ? attrs[name] : null));
+    return `<style data-neu-ssr>${def.styles}</style>${def.template(props).value}`;
+}
+/** The `<template shadowrootmode>` for one element, or '' for tags this library does not own. */
+export function renderDSD(tag, attrs) {
+    const def = definitions.get(tag.toLowerCase());
+    if (!def)
+        return '';
+    const delegates = def.delegatesFocus ? ' shadowrootdelegatesfocus' : '';
+    return `<template shadowrootmode="open"${delegates}>${renderShadowContents(def, attrs)}</template>`;
+}

package/dist/surface.d.ts

@@ -0,0 +1,3 @@
+import { NeuSurface } from './components/surface/surface.js';
+export { NeuSurface };
+export { surfaceDef } from './components/surface/surface.def.js';

package/dist/surface.js

@@ -0,0 +1,4 @@
+import { NeuSurface } from './components/surface/surface.js';
+NeuSurface.define();
+export { NeuSurface };
+export { surfaceDef } from './components/surface/surface.def.js';

package/dist/switch.d.ts

@@ -0,0 +1,3 @@
+import { NeuSwitch } from './components/switch/switch.js';
+export { NeuSwitch };
+export { switchDef } from './components/switch/switch.def.js';

package/dist/switch.js

@@ -0,0 +1,4 @@
+import { NeuSwitch } from './components/switch/switch.js';
+NeuSwitch.define();
+export { NeuSwitch };
+export { switchDef } from './components/switch/switch.def.js';

package/dist/text-field.d.ts

@@ -0,0 +1,3 @@
+import { NeuTextField } from './components/text-field/text-field.js';
+export { NeuTextField };
+export { textFieldDef } from './components/text-field/text-field.def.js';

package/dist/text-field.js

@@ -0,0 +1,4 @@
+import { NeuTextField } from './components/text-field/text-field.js';
+NeuTextField.define();
+export { NeuTextField };
+export { textFieldDef } from './components/text-field/text-field.def.js';

package/package.json

@@ -1,6 +1,107 @@
 {
   "name": "@neumorphism-ui/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-next.1",
+  "description": "Neumorphism UI web components",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hunghdvn/neumorphism-ui.git",
+    "directory": "packages/elements"
+  },
+  "files": [
+    "dist",
+    "cdn",
+    "custom-elements.json"
+  ],
+  "customElements": "custom-elements.json",
+  "exports": {
+    "./avatar.js": {
+      "types": "./dist/avatar.d.ts",
+      "default": "./dist/avatar.js"
+    },
+    "./badge.js": {
+      "types": "./dist/badge.d.ts",
+      "default": "./dist/badge.js"
+    },
+    "./button.js": {
+      "types": "./dist/button.d.ts",
+      "default": "./dist/button.js"
+    },
+    "./button-group.js": {
+      "types": "./dist/button-group.d.ts",
+      "default": "./dist/button-group.js"
+    },
+    "./icon-button.js": {
+      "types": "./dist/icon-button.d.ts",
+      "default": "./dist/icon-button.js"
+    },
+    "./divider.js": {
+      "types": "./dist/divider.d.ts",
+      "default": "./dist/divider.js"
+    },
+    "./icon.js": {
+      "types": "./dist/icon.d.ts",
+      "default": "./dist/icon.js"
+    },
+    "./icons.js": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./spinner.js": {
+      "types": "./dist/spinner.d.ts",
+      "default": "./dist/spinner.js"
+    },
+    "./surface.js": {
+      "types": "./dist/surface.d.ts",
+      "default": "./dist/surface.js"
+    },
+    "./switch.js": {
+      "types": "./dist/switch.d.ts",
+      "default": "./dist/switch.js"
+    },
+    "./text-field.js": {
+      "types": "./dist/text-field.d.ts",
+      "default": "./dist/text-field.js"
+    },
+    "./all.js": {
+      "types": "./dist/all.d.ts",
+      "default": "./dist/all.js"
+    },
+    "./ssr.js": {
+      "types": "./dist/ssr.d.ts",
+      "default": "./dist/ssr.js"
+    },
+    "./cdn/neu.min.js": "./cdn/neu.min.js",
+    "./custom-elements.json": "./custom-elements.json",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/avatar.js",
+    "./dist/badge.js",
+    "./dist/button.js",
+    "./dist/button-group.js",
+    "./dist/divider.js",
+    "./dist/icon.js",
+    "./dist/icon-button.js",
+    "./dist/spinner.js",
+    "./dist/surface.js",
+    "./dist/switch.js",
+    "./dist/text-field.js",
+    "./dist/all.js",
+    "./cdn/neu.min.js"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "axe-core": "4.13.0",
+    "esbuild": "0.28.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/build-cdn.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }