@neumorphism-ui/elements 1.0.0-next.1 → 1.0.0-next.3

package/dist/core/styles.d.ts

@@ -1,8 +1,6 @@
-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

@@ -31,10 +31,3 @@ export const hostTheme = `
 :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

@@ -1,4 +1,8 @@
-/** The browser's own, localised "please check this box" message, borrowed from a native checkbox. */
-export declare function requiredCheckboxMessage(): string;
+/**
+ * The browser's own, localised "value missing" message, borrowed once from a required native
+ * control: an input of type `kind` ("checkbox", "radio") or, for "select", a select. `fallback`
+ * covers a browser that reports none.
+ */
+export declare function requiredMessage(kind: 'checkbox' | 'radio' | 'select', fallback: string): 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

@@ -1,13 +1,20 @@
-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';
+const missing = new Map();
+/**
+ * The browser's own, localised "value missing" message, borrowed once from a required native
+ * control: an input of type `kind` ("checkbox", "radio") or, for "select", a select. `fallback`
+ * covers a browser that reports none.
+ */
+export function requiredMessage(kind, fallback) {
+    let message = missing.get(kind);
+    if (message === undefined) {
+        const probe = kind === 'select'
+            ? document.createElement('select')
+            : Object.assign(document.createElement('input'), { type: kind });
         probe.required = true;
-        checkboxMessage = probe.validationMessage || 'Please check this box if you want to proceed.';
+        message = probe.validationMessage || fallback;
+        missing.set(kind, message);
     }
-    return checkboxMessage;
+    return message;
 }
 /** Copies a native input's validity so the host can report the same errors. */
 export function copyValidity(validity) {

package/dist/docs.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentDocs } from './core/define.js';
+/** The documentation of every component by tag, for tools. DOM-free; never part of the runtime bundles. */
+export declare const componentDocs: ReadonlyMap<string, ComponentDocs>;

package/dist/docs.js

@@ -0,0 +1,41 @@
+import { avatarDocs } from './components/avatar/avatar.docs.js';
+import { badgeDocs } from './components/badge/badge.docs.js';
+import { buttonDocs } from './components/button/button.docs.js';
+import { buttonGroupDocs } from './components/button-group/button-group.docs.js';
+import { checkboxDocs } from './components/checkbox/checkbox.docs.js';
+import { dividerDocs } from './components/divider/divider.docs.js';
+import { iconDocs } from './components/icon/icon.docs.js';
+import { iconButtonDocs } from './components/icon-button/icon-button.docs.js';
+import { numberFieldDocs } from './components/number-field/number-field.docs.js';
+import { optionDocs } from './components/option/option.docs.js';
+import { radioDocs } from './components/radio/radio.docs.js';
+import { radioGroupDocs } from './components/radio-group/radio-group.docs.js';
+import { selectDocs } from './components/select/select.docs.js';
+import { sliderDocs } from './components/slider/slider.docs.js';
+import { spinnerDocs } from './components/spinner/spinner.docs.js';
+import { surfaceDocs } from './components/surface/surface.docs.js';
+import { switchDocs } from './components/switch/switch.docs.js';
+import { textFieldDocs } from './components/text-field/text-field.docs.js';
+import { textareaDocs } from './components/textarea/textarea.docs.js';
+/** The documentation of every component by tag, for tools. DOM-free; never part of the runtime bundles. */
+export const componentDocs = new Map([
+    ['neu-avatar', avatarDocs],
+    ['neu-badge', badgeDocs],
+    ['neu-button', buttonDocs],
+    ['neu-button-group', buttonGroupDocs],
+    ['neu-checkbox', checkboxDocs],
+    ['neu-divider', dividerDocs],
+    ['neu-icon', iconDocs],
+    ['neu-icon-button', iconButtonDocs],
+    ['neu-number-field', numberFieldDocs],
+    ['neu-option', optionDocs],
+    ['neu-radio', radioDocs],
+    ['neu-radio-group', radioGroupDocs],
+    ['neu-select', selectDocs],
+    ['neu-slider', sliderDocs],
+    ['neu-spinner', spinnerDocs],
+    ['neu-surface', surfaceDocs],
+    ['neu-switch', switchDocs],
+    ['neu-text-field', textFieldDocs],
+    ['neu-textarea', textareaDocs],
+]);

package/dist/number-field.d.ts

@@ -0,0 +1,3 @@
+import { NeuNumberField } from './components/number-field/number-field.js';
+export { NeuNumberField };
+export { numberFieldDef } from './components/number-field/number-field.def.js';

package/dist/number-field.js

@@ -0,0 +1,4 @@
+import { NeuNumberField } from './components/number-field/number-field.js';
+NeuNumberField.define();
+export { NeuNumberField };
+export { numberFieldDef } from './components/number-field/number-field.def.js';

package/dist/option.d.ts

@@ -0,0 +1,3 @@
+import { NeuOption } from './components/option/option.js';
+export { NeuOption };
+export { optionDef } from './components/option/option.def.js';

package/dist/option.js

@@ -0,0 +1,4 @@
+import { NeuOption } from './components/option/option.js';
+NeuOption.define();
+export { NeuOption };
+export { optionDef } from './components/option/option.def.js';

package/dist/radio-group.d.ts

@@ -0,0 +1,4 @@
+import './radio.js';
+import { NeuRadioGroup } from './components/radio-group/radio-group.js';
+export { NeuRadioGroup };
+export { radioGroupDef } from './components/radio-group/radio-group.def.js';

package/dist/radio-group.js

@@ -0,0 +1,6 @@
+// A group is unusable without its radios (tokens hide undefined neu-radio), so define both.
+import './radio.js';
+import { NeuRadioGroup } from './components/radio-group/radio-group.js';
+NeuRadioGroup.define();
+export { NeuRadioGroup };
+export { radioGroupDef } from './components/radio-group/radio-group.def.js';

package/dist/radio.d.ts

@@ -0,0 +1,3 @@
+import { NeuRadio } from './components/radio/radio.js';
+export { NeuRadio };
+export { radioDef } from './components/radio/radio.def.js';

package/dist/radio.js

@@ -0,0 +1,4 @@
+import { NeuRadio } from './components/radio/radio.js';
+NeuRadio.define();
+export { NeuRadio };
+export { radioDef } from './components/radio/radio.def.js';

package/dist/select.d.ts

@@ -0,0 +1,3 @@
+import { NeuSelect } from './components/select/select.js';
+export { NeuSelect };
+export { selectDef } from './components/select/select.def.js';

package/dist/select.js

@@ -0,0 +1,4 @@
+import { NeuSelect } from './components/select/select.js';
+NeuSelect.define();
+export { NeuSelect };
+export { selectDef } from './components/select/select.def.js';

package/dist/slider.d.ts

@@ -0,0 +1,3 @@
+import { NeuSlider } from './components/slider/slider.js';
+export { NeuSlider };
+export { sliderDef } from './components/slider/slider.def.js';

package/dist/slider.js

@@ -0,0 +1,4 @@
+import { NeuSlider } from './components/slider/slider.js';
+NeuSlider.define();
+export { NeuSlider };
+export { sliderDef } from './components/slider/slider.def.js';

package/dist/ssr.d.ts

@@ -1,11 +1,15 @@
-import type { ComponentDef } from './core/define.js';
-export type { ComponentDef, ComponentDocs, DocEntry, FormDef } from './core/define.js';
+import type { ComponentDef, TemplateContext } from './core/define.js';
+export type { ComponentDef, ComponentDocs, DocEntry, FormDef, OptionData, TemplateContext, } from './core/define.js';
 export { formDefaultProp } from './core/define.js';
+export { optionLabel } from './components/option/option-data.js';
 export type { InferProps, PropDecl, PropsSchema, PropValue } from './core/props.js';
-export { attributeName, coerceProperty, parseAttribute, parseProps, serializeAttribute, } from './core/props.js';
+export { attributeName, coerceProperty, parseAttribute, parseProps, reflects, 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;
+export declare function renderShadowContents(def: ComponentDef, attrs: Readonly<Record<string, string>>, ctx?: TemplateContext): string;
+/**
+ * The `<template shadowrootmode>` for one element, or '' for tags this library does not own.
+ * `ctx` carries what the attributes cannot, such as the options of a select (spec §8.2).
+ */
+export declare function renderDSD(tag: string, attrs: Readonly<Record<string, string>>, ctx?: TemplateContext): string;

package/dist/ssr.js

@@ -2,40 +2,60 @@ 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 { checkboxDef } from './components/checkbox/checkbox.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 { numberFieldDef } from './components/number-field/number-field.def.js';
+import { optionDef } from './components/option/option.def.js';
+import { radioDef } from './components/radio/radio.def.js';
+import { radioGroupDef } from './components/radio-group/radio-group.def.js';
+import { selectDef } from './components/select/select.def.js';
+import { sliderDef } from './components/slider/slider.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 { textareaDef } from './components/textarea/textarea.def.js';
 import { parseProps } from './core/props.js';
 export { formDefaultProp } from './core/define.js';
-export { attributeName, coerceProperty, parseAttribute, parseProps, serializeAttribute, } from './core/props.js';
+export { optionLabel } from './components/option/option-data.js';
+export { attributeName, coerceProperty, parseAttribute, parseProps, reflects, 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],
+    [checkboxDef.tag, checkboxDef],
     [dividerDef.tag, dividerDef],
     [iconDef.tag, iconDef],
     [iconButtonDef.tag, iconButtonDef],
+    [numberFieldDef.tag, numberFieldDef],
+    [optionDef.tag, optionDef],
+    [radioDef.tag, radioDef],
+    [radioGroupDef.tag, radioGroupDef],
+    [selectDef.tag, selectDef],
+    [sliderDef.tag, sliderDef],
     [spinnerDef.tag, spinnerDef],
     [surfaceDef.tag, surfaceDef],
     [switchDef.tag, switchDef],
     [textFieldDef.tag, textFieldDef],
+    [textareaDef.tag, textareaDef],
 ]);
 /** Inner HTML of a declarative shadow root: inline styles, then the template. */
-export function renderShadowContents(def, attrs) {
+export function renderShadowContents(def, attrs, ctx) {
     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}`;
+    return `<style data-neu-ssr>${def.styles}</style>${def.template(props, ctx).value}`;
 }
-/** The `<template shadowrootmode>` for one element, or '' for tags this library does not own. */
-export function renderDSD(tag, attrs) {
+/**
+ * The `<template shadowrootmode>` for one element, or '' for tags this library does not own.
+ * `ctx` carries what the attributes cannot, such as the options of a select (spec §8.2).
+ */
+export function renderDSD(tag, attrs, ctx) {
     const def = definitions.get(tag.toLowerCase());
     if (!def)
         return '';
     const delegates = def.delegatesFocus ? ' shadowrootdelegatesfocus' : '';
-    return `<template shadowrootmode="open"${delegates}>${renderShadowContents(def, attrs)}</template>`;
+    return `<template shadowrootmode="open"${delegates}>${renderShadowContents(def, attrs, ctx)}</template>`;
 }

package/dist/textarea.d.ts

@@ -0,0 +1,3 @@
+import { NeuTextarea } from './components/textarea/textarea.js';
+export { NeuTextarea };
+export { textareaDef } from './components/textarea/textarea.def.js';

package/dist/textarea.js

@@ -0,0 +1,4 @@
+import { NeuTextarea } from './components/textarea/textarea.js';
+NeuTextarea.define();
+export { NeuTextarea };
+export { textareaDef } from './components/textarea/textarea.def.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neumorphism-ui/elements",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.3",
   "description": "Neumorphism UI web components",
   "license": "MIT",
   "type": "module",
@@ -32,6 +32,10 @@
       "types": "./dist/button-group.d.ts",
       "default": "./dist/button-group.js"
     },
+    "./checkbox.js": {
+      "types": "./dist/checkbox.d.ts",
+      "default": "./dist/checkbox.js"
+    },
     "./icon-button.js": {
       "types": "./dist/icon-button.d.ts",
       "default": "./dist/icon-button.js"
@@ -48,6 +52,30 @@
       "types": "./dist/icons.d.ts",
       "default": "./dist/icons.js"
     },
+    "./number-field.js": {
+      "types": "./dist/number-field.d.ts",
+      "default": "./dist/number-field.js"
+    },
+    "./option.js": {
+      "types": "./dist/option.d.ts",
+      "default": "./dist/option.js"
+    },
+    "./radio.js": {
+      "types": "./dist/radio.d.ts",
+      "default": "./dist/radio.js"
+    },
+    "./radio-group.js": {
+      "types": "./dist/radio-group.d.ts",
+      "default": "./dist/radio-group.js"
+    },
+    "./select.js": {
+      "types": "./dist/select.d.ts",
+      "default": "./dist/select.js"
+    },
+    "./slider.js": {
+      "types": "./dist/slider.d.ts",
+      "default": "./dist/slider.js"
+    },
     "./spinner.js": {
       "types": "./dist/spinner.d.ts",
       "default": "./dist/spinner.js"
@@ -60,6 +88,10 @@
       "types": "./dist/switch.d.ts",
       "default": "./dist/switch.js"
     },
+    "./textarea.js": {
+      "types": "./dist/textarea.d.ts",
+      "default": "./dist/textarea.js"
+    },
     "./text-field.js": {
       "types": "./dist/text-field.d.ts",
       "default": "./dist/text-field.js"
@@ -68,6 +100,10 @@
       "types": "./dist/all.d.ts",
       "default": "./dist/all.js"
     },
+    "./docs.js": {
+      "types": "./dist/docs.d.ts",
+      "default": "./dist/docs.js"
+    },
     "./ssr.js": {
       "types": "./dist/ssr.d.ts",
       "default": "./dist/ssr.js"
@@ -81,13 +117,21 @@
     "./dist/badge.js",
     "./dist/button.js",
     "./dist/button-group.js",
+    "./dist/checkbox.js",
     "./dist/divider.js",
     "./dist/icon.js",
     "./dist/icon-button.js",
+    "./dist/number-field.js",
+    "./dist/option.js",
+    "./dist/radio.js",
+    "./dist/radio-group.js",
+    "./dist/select.js",
+    "./dist/slider.js",
     "./dist/spinner.js",
     "./dist/surface.js",
     "./dist/switch.js",
     "./dist/text-field.js",
+    "./dist/textarea.js",
     "./dist/all.js",
     "./cdn/neu.min.js"
   ],