@editora/ui-core 0.1.24 → 0.2.0

package/dist/form.cjs.js

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-DxbvhLJs.js");class _{constructor(){this.fields=new Map}registerField(t,e){if(!t)throw new Error("Field must have a name to register with the form");return this.fields.set(t,e),()=>{this.fields.delete(t)}}getValues(){const t={};for(const[e,i]of this.fields)t[e]=i.getValue();return t}setValue(t,e){const i=this.fields.get(t);i&&typeof i.setValue=="function"&&i.setValue(e)}async validateField(t){const e=this.fields.get(t);if(!e)return{valid:!0};if(typeof e.validate=="function"){const i=await e.validate();return e.setError&&e.setError(i.valid?void 0:i.message),i}return{valid:!0}}async validateAll(){const t={};let e=!0;const i=Array.from(this.fields.entries());for(const[r,s]of i){const n=await this.validateField(r);n.valid||(e=!1,t[r]=n.message||"invalid")}return{valid:e,errors:t}}}const v=new Set(["heading","title","description","state-text","loading-text"]),y=`
   :host {
     --ui-form-gap: 12px;
-    --ui-form-radius: 14px;
-    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-form-bg: transparent;
     --ui-form-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-form-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-form-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent);
-    --ui-form-border: 1px solid var(--ui-form-border-color);
+    --ui-form-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent));
+    --ui-form-border: 0;
     --ui-form-shadow:
       none;
-    --ui-form-padding: 16px;
+    --ui-form-padding: 0px;
     --ui-form-header-gap: 12px;
     --ui-form-header-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
     --ui-form-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -164,12 +164,19 @@
     padding-top: 2px;
   }
 
+  /* A plain form is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]),
+  :host([variant="elevated"]) {
+    --ui-form-border: 1px solid var(--ui-form-border-color);
+  }
+
   :host([variant="surface"]) {
     --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 14px 28px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -182,9 +189,7 @@
     --ui-form-bg: color-mix(in srgb, var(--ui-form-accent) 6%, var(--ui-color-surface, #ffffff));
     --ui-form-border-color: color-mix(in srgb, var(--ui-form-accent) 26%, var(--ui-color-border, #cbd5e1));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 4px rgba(2, 6, 23, 0.04),
-      0 12px 24px rgba(2, 6, 23, 0.06);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="contrast"]) {
@@ -194,9 +199,7 @@
     --ui-form-border-color: #334155;
     --ui-form-padding: 16px;
     --ui-form-focus-ring: #93c5fd;
-    --ui-form-shadow:
-      0 2px 8px rgba(2, 6, 23, 0.24),
-      0 26px 52px rgba(2, 6, 23, 0.38);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="minimal"]) {
@@ -208,9 +211,7 @@
 
   :host([variant="elevated"]) {
     --ui-form-bg: var(--ui-color-surface, #ffffff);
-    --ui-form-shadow:
-      0 2px 10px rgba(2, 6, 23, 0.1),
-      0 28px 56px rgba(2, 6, 23, 0.16);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([tone="success"]) {
@@ -248,15 +249,11 @@
   }
 
   :host([elevation="low"]) {
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 10px 20px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([elevation="high"]) {
-    --ui-form-shadow:
-      0 3px 14px rgba(2, 6, 23, 0.12),
-      0 32px 64px rgba(2, 6, 23, 0.2);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([loading]) .form {

package/dist/form.esm.js

@@ -42,15 +42,15 @@ class g {
 const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-text", "loading-text"]), v = `
   :host {
     --ui-form-gap: 12px;
-    --ui-form-radius: 14px;
-    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-form-bg: transparent;
     --ui-form-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-form-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-form-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent);
-    --ui-form-border: 1px solid var(--ui-form-border-color);
+    --ui-form-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent));
+    --ui-form-border: 0;
     --ui-form-shadow:
       none;
-    --ui-form-padding: 16px;
+    --ui-form-padding: 0px;
     --ui-form-header-gap: 12px;
     --ui-form-header-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
     --ui-form-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -205,12 +205,19 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     padding-top: 2px;
   }
 
+  /* A plain form is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]),
+  :host([variant="elevated"]) {
+    --ui-form-border: 1px solid var(--ui-form-border-color);
+  }
+
   :host([variant="surface"]) {
     --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 14px 28px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -223,9 +230,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     --ui-form-bg: color-mix(in srgb, var(--ui-form-accent) 6%, var(--ui-color-surface, #ffffff));
     --ui-form-border-color: color-mix(in srgb, var(--ui-form-accent) 26%, var(--ui-color-border, #cbd5e1));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 4px rgba(2, 6, 23, 0.04),
-      0 12px 24px rgba(2, 6, 23, 0.06);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="contrast"]) {
@@ -235,9 +240,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     --ui-form-border-color: #334155;
     --ui-form-padding: 16px;
     --ui-form-focus-ring: #93c5fd;
-    --ui-form-shadow:
-      0 2px 8px rgba(2, 6, 23, 0.24),
-      0 26px 52px rgba(2, 6, 23, 0.38);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="minimal"]) {
@@ -249,9 +252,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
 
   :host([variant="elevated"]) {
     --ui-form-bg: var(--ui-color-surface, #ffffff);
-    --ui-form-shadow:
-      0 2px 10px rgba(2, 6, 23, 0.1),
-      0 28px 56px rgba(2, 6, 23, 0.16);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([tone="success"]) {
@@ -289,15 +290,11 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
   }
 
   :host([elevation="low"]) {
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 10px 20px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([elevation="high"]) {
-    --ui-form-shadow:
-      0 3px 14px rgba(2, 6, 23, 0.12),
-      0 32px 64px rgba(2, 6, 23, 0.2);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([loading]) .form {