@taprootio/espalier 2.15.4 → 2.16.0

package/custom-elements.json

@@ -19434,368 +19434,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/form/esp-form.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A form wrapper that renders a native `<form>` element in\nthe light DOM. All form-associated custom elements placed\ninside participate natively in form submission, validation,\nand reset.\n\n`esp-form` has no visual presentation of its own — all\nstyling, labels, and layout should be handled independently\n(e.g. via [esp-form-item](/components/form-item), `esp-box`,\nor plain CSS).\n\n### Standard submission\n\n```html\n<esp-form action=\"/api/save\" method=\"post\" label=\"Contact form\">\n  <esp-form-item label=\"Name\">\n    <esp-input name=\"name\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Send\"></esp-button>\n</esp-form>\n```\n\n### Fetch submission\n\n```html\n<esp-form action=\"/api/save\" use-fetch use-json label=\"Settings\">\n  <esp-form-item label=\"Email\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Save\"></esp-button>\n</esp-form>\n```\n\n### Dialog integration\n\nWhen `method=\"dialog\"`, submitting the form dispatches a\n`closeDialog` event that `esp-dialog` listens for, closing\nthe dialog without a network request.\n\n### Multi-field form with validation\n\nRequired fields are validated on submit. The first invalid\nfield is scrolled into view and focused. Errors clear as\nthe user corrects each field. Use the `required-message`\nattribute on any form control to customize the error text.\n\n```html\n<style>\nesp-form.signup-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.signup-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"signup-demo\" use-fetch use-json action=\"/api/signup\" label=\"Sign up\">\n  <esp-form-item label=\"Full name\">\n    <esp-input name=\"fullName\" required required-message=\"We need your full name.\"></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Email address\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Password\">\n    <esp-input name=\"password\" input-type=\"password\" required required-message=\"You must enter a password to continue!\"></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Favorite color\">\n    <esp-pick-one name=\"color\" required placeholder=\"Pick one...\" required-message=\"Please choose your favorite color.\">\n      <esp-picker-item text=\"Red\" value=\"red\"></esp-picker-item>\n      <esp-picker-item text=\"Green\" value=\"green\"></esp-picker-item>\n      <esp-picker-item text=\"Blue\" value=\"blue\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n  <esp-form-item label=\"I agree to the terms\">\n    <esp-checkbox name=\"terms\" value=\"agreed\" required required-message=\"You must accept the terms to continue.\">\n      Yes, I accept\n    </esp-checkbox>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Sign Up\"></esp-button>\n    <esp-button button-type=\"reset\" label=\"Reset\" variant=\"danger\"></esp-button>\n  </div>\n</esp-form>\n```\n\n### Skipping validation\n\nAdd `formnovalidate` to a submit button to bypass constraint\nvalidation. This is useful for \"Save Draft\" buttons that\nshould persist incomplete data.\n\n```html\n<style>\nesp-form.draft-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.draft-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"draft-demo\" use-fetch use-json action=\"/api/drafts\" label=\"Article editor\">\n  <esp-form-item label=\"Title\">\n    <esp-input name=\"title\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Category\">\n    <esp-pick-one name=\"category\" required placeholder=\"Select...\">\n      <esp-picker-item text=\"Technology\" value=\"tech\"></esp-picker-item>\n      <esp-picker-item text=\"Design\" value=\"design\"></esp-picker-item>\n      <esp-picker-item text=\"Business\" value=\"biz\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Publish\"></esp-button>\n    <esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\" variant=\"split-complementary-left\"></esp-button>\n  </div>\n</esp-form>\n```\n\n### Handling the response\n\nListen for `esp-submit-response` and `esp-submit-error` to\nreact to the server's reply when using fetch submission.\n\n```html\n<style>\nesp-form.response-demo { display: grid; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"response-demo\" use-fetch use-json action=\"/api/feedback\" label=\"Feedback\">\n  <esp-form-item label=\"Your feedback\">\n    <esp-input name=\"message\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Send Feedback\"></esp-button>\n  <esp-info id=\"response-msg\" icon=\"info-i\" style=\"display:none\">\n    <span id=\"response-text\"></span>\n  </esp-info>\n</esp-form>\n<script>\n  const form = findByTagName(\"esp-form\")[0];\n  const msg = findById(\"response-msg\");\n  const text = findById(\"response-text\");\n  form.addEventListener(\"esp-submit-response\", (ev) => {\n    msg.style.display = \"\";\n    msg.setAttribute(\"variant\", ev.detail.ok ? \"success\" : \"warning\");\n    text.textContent = ev.detail.ok\n      ? \"Submitted successfully!\"\n      : \"Server returned an error.\";\n  });\n  form.addEventListener(\"esp-submit-error\", () => {\n    msg.style.display = \"\";\n    msg.setAttribute(\"variant\", \"danger\");\n    text.textContent = \"Network error — please try again.\";\n  });\n</script>\n```\n\n### Form with diverse input types\n\nCombines email, telephone, number, and date inputs with\nvalidation and custom messages.\n\n```html\n<style>\nesp-form.diverse-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.diverse-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"diverse-demo\" use-fetch use-json action=\"/api/contact\" label=\"Contact info\">\n  <esp-form-item label=\"Email\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Phone\">\n    <esp-input name=\"phone\" input-type=\"tel\"\n      tel-localities=\"US CA GB\" required>\n    </esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Age\">\n    <esp-input name=\"age\" input-type=\"number\"\n      min=\"0\" max=\"150\" required>\n    </esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Date of birth\">\n    <esp-input name=\"dob\" input-type=\"date\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Comments\">\n    <esp-textarea name=\"comments\" rows=\"3\"\n      placeholder=\"Any additional comments...\">\n    </esp-textarea>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n    <esp-button button-type=\"reset\" label=\"Reset\" variant=\"danger\"></esp-button>\n  </div>\n</esp-form>\n```",
-          "name": "EspalierForm",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_form",
-              "type": {
-                "text": "HTMLFormElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_formReady",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "action",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The URL that processes the form submission. When `use-fetch`\nis true this is the URL `fetch()` sends the request to.",
-              "attribute": "action"
-            },
-            {
-              "kind": "field",
-              "name": "method",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"post\"",
-              "description": "The HTTP method for submission. Standard values are `get`,\n`post`, and `dialog`. When set to `dialog`, submitting the\nform closes the nearest `esp-dialog` ancestor without making\na network request.",
-              "attribute": "method"
-            },
-            {
-              "kind": "field",
-              "name": "novalidate",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, constraint validation is skipped during\nsubmission.",
-              "attribute": "novalidate"
-            },
-            {
-              "kind": "field",
-              "name": "useFetch",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, the form uses `fetch()` instead of native\nbrowser navigation for submission. An `esp-submit` event\nis fired with the `FormData` in the detail, allowing\nconsumers to cancel or modify the request.",
-              "attribute": "use-fetch"
-            },
-            {
-              "kind": "field",
-              "name": "useJson",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When `use-fetch` is true and this is also true, the request\nbody is serialized as JSON instead of `FormData`.",
-              "attribute": "use-json"
-            },
-            {
-              "kind": "field",
-              "name": "enctype",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"application/x-www-form-urlencoded\"",
-              "description": "The encoding type for form submission. Maps to the native\n`enctype` attribute on the inner `<form>`.",
-              "attribute": "enctype"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "An accessible label applied as `aria-label` on the inner\n`<form>` element so the form is discoverable as an ARIA\n`form` landmark by screen readers.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "syncFormAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Run constraint validation on all controls without showing\nany UI feedback."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Run constraint validation, display error messages via each\ncontrol's `esp-form-item`, and scroll the first invalid\nitem into view."
-            },
-            {
-              "kind": "method",
-              "name": "reset",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Programmatically reset the form and all its controls."
-            },
-            {
-              "kind": "method",
-              "name": "submit",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Programmatically trigger form submission (with validation)."
-            },
-            {
-              "kind": "method",
-              "name": "handleSubmit",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "SubmitEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "submitViaFetch",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "form",
-                  "type": {
-                    "text": "HTMLFormElement"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "noValidate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            }
-          ],
-          "events": [
-            {
-              "name": "closeDialog",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired when `method=\"dialog\"` is used and the form requests its containing `<esp-dialog>` to close. The event detail is an empty object."
-            },
-            {
-              "name": "esp-submit-response",
-              "type": {
-                "text": "CustomEvent<{ response: Response; ok: boolean }>"
-              },
-              "description": "Fired after a successful `fetch` submission."
-            },
-            {
-              "name": "esp-submit-error",
-              "type": {
-                "text": "CustomEvent<{ error: unknown }>"
-              },
-              "description": "Fired when a `fetch` submission fails."
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{ formData: FormData; form: HTMLFormElement }>"
-              },
-              "description": "Fired when `use-fetch` is true and the form passes validation. Cancelable; calling `preventDefault()` aborts the fetch.",
-              "name": "esp-submit"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "action",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The URL that processes the form submission. When `use-fetch`\nis true this is the URL `fetch()` sends the request to.",
-              "fieldName": "action"
-            },
-            {
-              "name": "method",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"post\"",
-              "description": "The HTTP method for submission. Standard values are `get`,\n`post`, and `dialog`. When set to `dialog`, submitting the\nform closes the nearest `esp-dialog` ancestor without making\na network request.",
-              "fieldName": "method"
-            },
-            {
-              "name": "novalidate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, constraint validation is skipped during\nsubmission.",
-              "fieldName": "novalidate"
-            },
-            {
-              "name": "use-fetch",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the form uses `fetch()` instead of native\nbrowser navigation for submission. An `esp-submit` event\nis fired with the `FormData` in the detail, allowing\nconsumers to cancel or modify the request.",
-              "fieldName": "useFetch"
-            },
-            {
-              "name": "use-json",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When `use-fetch` is true and this is also true, the request\nbody is serialized as JSON instead of `FormData`.",
-              "fieldName": "useJson"
-            },
-            {
-              "name": "enctype",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"application/x-www-form-urlencoded\"",
-              "description": "The encoding type for form submission. Maps to the native\n`enctype` attribute on the inner `<form>`.",
-              "fieldName": "enctype"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "An accessible label applied as `aria-label` on the inner\n`<form>` element so the form is discoverable as an ARIA\n`form` landmark by screen readers.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "esp-form",
-          "customElement": true,
-          "docPageTitle": {
-            "name": "Form",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/form",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
-          },
-          "menuLabel": {
-            "name": "Form",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "forms",
-            "description": ""
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EspalierForm",
-          "declaration": {
-            "name": "EspalierForm",
-            "module": "dist/form/esp-form.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-form",
-          "declaration": {
-            "name": "EspalierForm",
-            "module": "dist/form/esp-form.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/footer/esp-footer-column.js",
@@ -22241,6 +21879,368 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/form/esp-form.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A form wrapper that renders a native `<form>` element in\nthe light DOM. All form-associated custom elements placed\ninside participate natively in form submission, validation,\nand reset.\n\n`esp-form` has no visual presentation of its own — all\nstyling, labels, and layout should be handled independently\n(e.g. via [esp-form-item](/components/form-item), `esp-box`,\nor plain CSS).\n\n### Standard submission\n\n```html\n<esp-form action=\"/api/save\" method=\"post\" label=\"Contact form\">\n  <esp-form-item label=\"Name\">\n    <esp-input name=\"name\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Send\"></esp-button>\n</esp-form>\n```\n\n### Fetch submission\n\n```html\n<esp-form action=\"/api/save\" use-fetch use-json label=\"Settings\">\n  <esp-form-item label=\"Email\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Save\"></esp-button>\n</esp-form>\n```\n\n### Dialog integration\n\nWhen `method=\"dialog\"`, submitting the form dispatches a\n`closeDialog` event that `esp-dialog` listens for, closing\nthe dialog without a network request.\n\n### Multi-field form with validation\n\nRequired fields are validated on submit. The first invalid\nfield is scrolled into view and focused. Errors clear as\nthe user corrects each field. Use the `required-message`\nattribute on any form control to customize the error text.\n\n```html\n<style>\nesp-form.signup-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.signup-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"signup-demo\" use-fetch use-json action=\"/api/signup\" label=\"Sign up\">\n  <esp-form-item label=\"Full name\">\n    <esp-input name=\"fullName\" required required-message=\"We need your full name.\"></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Email address\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Password\">\n    <esp-input name=\"password\" input-type=\"password\" required required-message=\"You must enter a password to continue!\"></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Favorite color\">\n    <esp-pick-one name=\"color\" required placeholder=\"Pick one...\" required-message=\"Please choose your favorite color.\">\n      <esp-picker-item text=\"Red\" value=\"red\"></esp-picker-item>\n      <esp-picker-item text=\"Green\" value=\"green\"></esp-picker-item>\n      <esp-picker-item text=\"Blue\" value=\"blue\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n  <esp-form-item label=\"I agree to the terms\">\n    <esp-checkbox name=\"terms\" value=\"agreed\" required required-message=\"You must accept the terms to continue.\">\n      Yes, I accept\n    </esp-checkbox>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Sign Up\"></esp-button>\n    <esp-button button-type=\"reset\" label=\"Reset\" variant=\"danger\"></esp-button>\n  </div>\n</esp-form>\n```\n\n### Skipping validation\n\nAdd `formnovalidate` to a submit button to bypass constraint\nvalidation. This is useful for \"Save Draft\" buttons that\nshould persist incomplete data.\n\n```html\n<style>\nesp-form.draft-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.draft-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"draft-demo\" use-fetch use-json action=\"/api/drafts\" label=\"Article editor\">\n  <esp-form-item label=\"Title\">\n    <esp-input name=\"title\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Category\">\n    <esp-pick-one name=\"category\" required placeholder=\"Select...\">\n      <esp-picker-item text=\"Technology\" value=\"tech\"></esp-picker-item>\n      <esp-picker-item text=\"Design\" value=\"design\"></esp-picker-item>\n      <esp-picker-item text=\"Business\" value=\"biz\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Publish\"></esp-button>\n    <esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\" variant=\"split-complementary-left\"></esp-button>\n  </div>\n</esp-form>\n```\n\n### Handling the response\n\nListen for `esp-submit-response` and `esp-submit-error` to\nreact to the server's reply when using fetch submission.\n\n```html\n<style>\nesp-form.response-demo { display: grid; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"response-demo\" use-fetch use-json action=\"/api/feedback\" label=\"Feedback\">\n  <esp-form-item label=\"Your feedback\">\n    <esp-input name=\"message\" required></esp-input>\n  </esp-form-item>\n  <esp-button button-type=\"submit\" label=\"Send Feedback\"></esp-button>\n  <esp-info id=\"response-msg\" icon=\"info-i\" style=\"display:none\">\n    <span id=\"response-text\"></span>\n  </esp-info>\n</esp-form>\n<script>\n  const form = findByTagName(\"esp-form\")[0];\n  const msg = findById(\"response-msg\");\n  const text = findById(\"response-text\");\n  form.addEventListener(\"esp-submit-response\", (ev) => {\n    msg.style.display = \"\";\n    msg.setAttribute(\"variant\", ev.detail.ok ? \"success\" : \"warning\");\n    text.textContent = ev.detail.ok\n      ? \"Submitted successfully!\"\n      : \"Server returned an error.\";\n  });\n  form.addEventListener(\"esp-submit-error\", () => {\n    msg.style.display = \"\";\n    msg.setAttribute(\"variant\", \"danger\");\n    text.textContent = \"Network error — please try again.\";\n  });\n</script>\n```\n\n### Form with diverse input types\n\nCombines email, telephone, number, and date inputs with\nvalidation and custom messages.\n\n```html\n<style>\nesp-form.diverse-demo { display: grid; gap: var(--esp-size-small); }\nesp-form.diverse-demo .actions { display: flex; gap: var(--esp-size-small); }\n</style>\n<esp-form class=\"diverse-demo\" use-fetch use-json action=\"/api/contact\" label=\"Contact info\">\n  <esp-form-item label=\"Email\">\n    <esp-input name=\"email\" input-type=\"email\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Phone\">\n    <esp-input name=\"phone\" input-type=\"tel\"\n      tel-localities=\"US CA GB\" required>\n    </esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Age\">\n    <esp-input name=\"age\" input-type=\"number\"\n      min=\"0\" max=\"150\" required>\n    </esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Date of birth\">\n    <esp-input name=\"dob\" input-type=\"date\" required></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Comments\">\n    <esp-textarea name=\"comments\" rows=\"3\"\n      placeholder=\"Any additional comments...\">\n    </esp-textarea>\n  </esp-form-item>\n  <div class=\"actions\">\n    <esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n    <esp-button button-type=\"reset\" label=\"Reset\" variant=\"danger\"></esp-button>\n  </div>\n</esp-form>\n```",
+          "name": "EspalierForm",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_form",
+              "type": {
+                "text": "HTMLFormElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_formReady",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The URL that processes the form submission. When `use-fetch`\nis true this is the URL `fetch()` sends the request to.",
+              "attribute": "action"
+            },
+            {
+              "kind": "field",
+              "name": "method",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"post\"",
+              "description": "The HTTP method for submission. Standard values are `get`,\n`post`, and `dialog`. When set to `dialog`, submitting the\nform closes the nearest `esp-dialog` ancestor without making\na network request.",
+              "attribute": "method"
+            },
+            {
+              "kind": "field",
+              "name": "novalidate",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, constraint validation is skipped during\nsubmission.",
+              "attribute": "novalidate"
+            },
+            {
+              "kind": "field",
+              "name": "useFetch",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the form uses `fetch()` instead of native\nbrowser navigation for submission. An `esp-submit` event\nis fired with the `FormData` in the detail, allowing\nconsumers to cancel or modify the request.",
+              "attribute": "use-fetch"
+            },
+            {
+              "kind": "field",
+              "name": "useJson",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When `use-fetch` is true and this is also true, the request\nbody is serialized as JSON instead of `FormData`.",
+              "attribute": "use-json"
+            },
+            {
+              "kind": "field",
+              "name": "enctype",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"application/x-www-form-urlencoded\"",
+              "description": "The encoding type for form submission. Maps to the native\n`enctype` attribute on the inner `<form>`.",
+              "attribute": "enctype"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "An accessible label applied as `aria-label` on the inner\n`<form>` element so the form is discoverable as an ARIA\n`form` landmark by screen readers.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "syncFormAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Run constraint validation on all controls without showing\nany UI feedback."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Run constraint validation, display error messages via each\ncontrol's `esp-form-item`, and scroll the first invalid\nitem into view."
+            },
+            {
+              "kind": "method",
+              "name": "reset",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Programmatically reset the form and all its controls."
+            },
+            {
+              "kind": "method",
+              "name": "submit",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Programmatically trigger form submission (with validation)."
+            },
+            {
+              "kind": "method",
+              "name": "handleSubmit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "SubmitEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "submitViaFetch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "noValidate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            }
+          ],
+          "events": [
+            {
+              "name": "closeDialog",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when `method=\"dialog\"` is used and the form requests its containing `<esp-dialog>` to close. The event detail is an empty object."
+            },
+            {
+              "name": "esp-submit-response",
+              "type": {
+                "text": "CustomEvent<{ response: Response; ok: boolean }>"
+              },
+              "description": "Fired after a successful `fetch` submission."
+            },
+            {
+              "name": "esp-submit-error",
+              "type": {
+                "text": "CustomEvent<{ error: unknown }>"
+              },
+              "description": "Fired when a `fetch` submission fails."
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{ formData: FormData; form: HTMLFormElement }>"
+              },
+              "description": "Fired when `use-fetch` is true and the form passes validation. Cancelable; calling `preventDefault()` aborts the fetch.",
+              "name": "esp-submit"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The URL that processes the form submission. When `use-fetch`\nis true this is the URL `fetch()` sends the request to.",
+              "fieldName": "action"
+            },
+            {
+              "name": "method",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"post\"",
+              "description": "The HTTP method for submission. Standard values are `get`,\n`post`, and `dialog`. When set to `dialog`, submitting the\nform closes the nearest `esp-dialog` ancestor without making\na network request.",
+              "fieldName": "method"
+            },
+            {
+              "name": "novalidate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, constraint validation is skipped during\nsubmission.",
+              "fieldName": "novalidate"
+            },
+            {
+              "name": "use-fetch",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the form uses `fetch()` instead of native\nbrowser navigation for submission. An `esp-submit` event\nis fired with the `FormData` in the detail, allowing\nconsumers to cancel or modify the request.",
+              "fieldName": "useFetch"
+            },
+            {
+              "name": "use-json",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `use-fetch` is true and this is also true, the request\nbody is serialized as JSON instead of `FormData`.",
+              "fieldName": "useJson"
+            },
+            {
+              "name": "enctype",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"application/x-www-form-urlencoded\"",
+              "description": "The encoding type for form submission. Maps to the native\n`enctype` attribute on the inner `<form>`.",
+              "fieldName": "enctype"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "An accessible label applied as `aria-label` on the inner\n`<form>` element so the form is discoverable as an ARIA\n`form` landmark by screen readers.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "esp-form",
+          "customElement": true,
+          "docPageTitle": {
+            "name": "Form",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/form",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Form",
+            "description": "Controls"
+          },
+          "menuLabel": {
+            "name": "Form",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "forms",
+            "description": ""
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierForm",
+          "declaration": {
+            "name": "EspalierForm",
+            "module": "dist/form/esp-form.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-form",
+          "declaration": {
+            "name": "EspalierForm",
+            "module": "dist/form/esp-form.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/form-item/esp-form-item.js",
@@ -55382,7 +55382,7 @@
               }
             }
           ],
-          "description": "Parse an OKLCH CSS string into its components.\n\nAccepts:\n- `oklch(0.7 0.125 216)`\n- `oklch(70% 0.125 216)`\n\nReturns `null` if the string is not valid OKLCH."
+          "description": "Parse an OKLCH CSS string into its components.\n\nAccepts the CSS Color 4 grammar for the three components:\n- lightness as a number (`0.7`) or percentage (`70%`), clamped to 0–1\n- chroma as a number (`0.125`) or percentage of the 0.4 reference\n  maximum (`31.25%` = 0.125), negative values clamped to 0\n- hue as a number or angle (`deg`, `grad`, `rad`, `turn`), signed and\n  wrapped into 0–360\n\nAlpha is not supported. Returns `null` if the string is not valid OKLCH."
         },
         {
           "kind": "function",
@@ -55667,6 +55667,33 @@
             }
           ],
           "description": "Derive a semantic color with automatic APCA contrast\nenforcement against a reference background."
+        },
+        {
+          "kind": "variable",
+          "name": "ACCEPTED_COLOR_FORMS",
+          "type": {
+            "text": "string"
+          },
+          "default": "'\"#rrggbb\", \"#rgb\", \"rgb(…)\", \"hsl(…)\", \"oklch(…)\"'",
+          "description": "The color forms parseCssColor accepts, for validation\nerror messages and documentation."
+        },
+        {
+          "kind": "function",
+          "name": "parseCssColor",
+          "return": {
+            "type": {
+              "text": "OklchColor | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "colorStr",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Parse any accepted CSS color form into OKLCH components.\n\nAccepted forms:\n- `oklch(0.7 0.125 216)` / `oklch(70% 31.25% 0.6turn)` — parsed\n  natively via parseOklch, no re-rounding\n- `#rrggbb` / `#rgb`\n- `rgb(120, 72, 106)` / `rgb(120 72 106)` — numbers (with exponents)\n  or percentages; the legacy comma syntax requires all channels to be\n  the same type, the modern syntax may mix; `rgba()` is accepted as an\n  alias of the three-argument form\n- `hsl(338, 25%, 38%)` / `hsl(.94turn 25% 38%)` — hue as a number or\n  `deg`/`grad`/`rad`/`turn` angle; the legacy comma syntax requires\n  percentage saturation and lightness, the modern syntax also accepts\n  bare numbers; `hsla()` is accepted as an alias\n\nCSS comments are equivalent to whitespace in every form, and only\nCSS whitespace (tab, newline, form feed, carriage return, space)\nseparates arguments — JavaScript-only whitespace such as NBSP is\nrejected, matching browsers.\n\nNon-OKLCH forms convert through the forward sRGB → OKLab transform,\nnormalized to display precision (L 3 / C 4 / H 1 decimals, hue 0 when\nachromatic) when that rounding reproduces the identical 8-bit color\nin-gamut, and kept at full precision otherwise. Alpha is rejected in\nevery form — theme colors are opaque.\n\nReturns `null` when the string is not a valid instance of any\naccepted form."
         }
       ],
       "exports": [
@@ -55757,6 +55784,22 @@
             "name": "deriveSemanticWithContrast",
             "module": "dist/shared/color-engine.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "ACCEPTED_COLOR_FORMS",
+          "declaration": {
+            "name": "ACCEPTED_COLOR_FORMS",
+            "module": "dist/shared/color-engine.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parseCssColor",
+          "declaration": {
+            "name": "parseCssColor",
+            "module": "dist/shared/color-engine.js"
+          }
         }
       ]
     },

package/dist/root/helpers/compute-theme-properties.js

@@ -1 +1 @@
-import{parseOklch as y,serializeOklch as p,gamutMapToSRGB as S,deriveSemantic as v,deriveSemanticWithContrast as B}from"../../shared/color-engine.js";import{generateScaleProperties as x}from"../../shared/scale-engine.js";import{SEMANTIC_COLOR_NAMES as l,LIGHTNESS_KEYS as C,semanticToCSS as b}from"../../shared/theme.js";import{lightnessKeyToCSS as I}from"./lightness-key-to-css.js";import{computeVariants as O}from"./compute-variants.js";function M(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function W(o,k){const d=y(o.seedColor);if(!d)return{};const n={};n["--esp-scheme"]=k,n["--esp-seed-color"]=o.seedColor;const c=O(d,o);for(const[a,t]of Object.entries(c))n[`--esp-color-${a}`]=p(S(t));for(const a of C)n[I(a)]=`${Math.round(o.lightness[a]*100)}%`;const u={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},s={};for(const a of l){if(u[a])continue;const t=o.semanticMappings[a],i=o.chroma[a],r=c[t.source],e=o.lightness[t.lightness],g=v(r,e,i.min,i.max);s[a]=g,n[b(a)]=p(g)}for(const a of l){const t=u[a];if(!t)continue;const i=o.semanticMappings[a],r=o.chroma[a],e=c[i.source],g=o.lightness[i.lightness],m=s[t.bg],f=B(e,g,r.min,r.max,m,t.targetLc);s[a]=f,n[b(a)]=p(f)}return Object.assign(n,x(M(o))),o.fontBody&&(n["--esp-font-body"]=o.fontBody),o.fontHeadings&&(n["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(n["--esp-font-brand"]=o.fontBrand),o.fontMonospace&&(n["--esp-font-monospace"]=o.fontMonospace),n["--esp-font-weight-body"]=o.fontWeightBody,n["--esp-font-weight-headings"]=o.fontWeightHeadings,n["--esp-font-weight-brand"]=o.fontWeightBrand,n["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(n["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(n["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(n["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(n["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(n["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(n["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(n["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),n}export{W as computeThemeProperties};
+import{parseCssColor as y,serializeOklch as p,gamutMapToSRGB as S,deriveSemantic as v,deriveSemanticWithContrast as B}from"../../shared/color-engine.js";import{generateScaleProperties as C}from"../../shared/scale-engine.js";import{SEMANTIC_COLOR_NAMES as l,LIGHTNESS_KEYS as x,semanticToCSS as b}from"../../shared/theme.js";import{lightnessKeyToCSS as I}from"./lightness-key-to-css.js";import{computeVariants as M}from"./compute-variants.js";function O(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function W(o,k){const d=y(o.seedColor);if(!d)return{};const n={};n["--esp-scheme"]=k,n["--esp-seed-color"]=o.seedColor;const c=M(d,o);for(const[a,t]of Object.entries(c))n[`--esp-color-${a}`]=p(S(t));for(const a of x)n[I(a)]=`${Math.round(o.lightness[a]*100)}%`;const u={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},s={};for(const a of l){if(u[a])continue;const t=o.semanticMappings[a],i=o.chroma[a],r=c[t.source],e=o.lightness[t.lightness],g=v(r,e,i.min,i.max);s[a]=g,n[b(a)]=p(g)}for(const a of l){const t=u[a];if(!t)continue;const i=o.semanticMappings[a],r=o.chroma[a],e=c[i.source],g=o.lightness[i.lightness],m=s[t.bg],f=B(e,g,r.min,r.max,m,t.targetLc);s[a]=f,n[b(a)]=p(f)}return Object.assign(n,C(O(o))),o.fontBody&&(n["--esp-font-body"]=o.fontBody),o.fontHeadings&&(n["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(n["--esp-font-brand"]=o.fontBrand),o.fontMonospace&&(n["--esp-font-monospace"]=o.fontMonospace),n["--esp-font-weight-body"]=o.fontWeightBody,n["--esp-font-weight-headings"]=o.fontWeightHeadings,n["--esp-font-weight-brand"]=o.fontWeightBrand,n["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(n["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(n["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(n["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(n["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(n["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(n["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(n["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),n}export{W as computeThemeProperties};

package/dist/shared/color-engine.js

@@ -1 +1 @@
-const S=Math.PI/180,s=1e-4,w=50;function P(t){const o=t.h*S;return{L:t.l,a:t.c*Math.cos(o),b:t.c*Math.sin(o)}}function k(t){const o=t.L+.3963377774*t.a+.2158037573*t.b,e=t.L-.1055613458*t.a-.0638541728*t.b,n=t.L-.0894841775*t.a-1.291485548*t.b,r=o*o*o,c=e*e*e,a=n*n*n;return{r:4.0767416621*r-3.3077115913*c+.2309699292*a,g:-1.2684380046*r+2.6097574011*c-.3413193965*a,b:-.0041960863*r-.7034186147*c+1.707614701*a}}function p(t){return t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055}function N(t){return{r:p(t.r),g:p(t.g),b:p(t.b)}}function O(t){return t.r>=-s&&t.r<=1+s&&t.g>=-s&&t.g<=1+s&&t.b>=-s&&t.b<=1+s}function M(t){return Math.max(0,Math.min(1,t))}function X(t){const e=t.trim().match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*\)$/i);if(!e)return null;let n=parseFloat(e[1]);e[2]==="%"&&(n/=100);const r=parseFloat(e[3]),c=parseFloat(e[4]);return isNaN(n)||isNaN(r)||isNaN(c)?null:{l:n,c:r,h:(c%360+360)%360}}function $(t){const o=T(t.l,6),e=T(t.c,6),n=T((t.h%360+360)%360,4);return`oklch(${o} ${e} ${n})`}function m(t){return N(k(P(t)))}function _(t){return O(m(t))}function h(t){if(t.c<=s||_(t))return{...t};let o=0,e=t.c,n={...t};for(let r=0;r<w;r++){const c=(o+e)/2;if(n={l:t.l,c,h:t.h},_(n)?o=c:e=c,e-o<s)break}return{l:t.l,c:o,h:t.h}}function E(t,o,e){const n={l:t.l,c:Math.max(o,Math.min(e,t.c)),h:t.h};return h(n)}const f=.022,G=.012,x=.022,C=.57,L=.56,R=1.14,A=.001,l=.027;function d(t){const o=Math.pow(M(t.r),2.4),e=Math.pow(M(t.g),2.4),n=Math.pow(M(t.b),2.4);return .2126729*o+.7151522*e+.072175*n}function B(t,o){const e=m(h(t)),n=m(h(o));let r=d(e),c=d(n);if(r=r>f?r:r+Math.pow(f-r,1.414),c=c>f?c:c+Math.pow(f-c,1.414),Math.abs(c-r)<A)return 0;let a;if(c>r){const i=Math.pow(c,L),u=Math.pow(r,C);if(a=(i-u)*R,a<A)return 0;a=a<l?a-a*x*l:a-x}else{const i=Math.pow(c,L),u=Math.pow(r,C);if(a=(i-u)*R,a>-A)return 0;a=a>-l?a-a*G*l:a+G}return a*100}function F(t,o,e=60){let n=h({...t}),r=Math.abs(B(n,o));if(r>=e)return n;const c=o.l>.5,a=.01,i=c?0:1;for(let u=0;u<100;u++){if(c?n.l=Math.max(i,n.l-a):n.l=Math.min(i,n.l+a),n=h(n),r=Math.abs(B(n,o)),r>=e)return n;if(n.l<=0||n.l>=1)break}return n}function b(t,o){return((t+o)%360+360)%360}function I(t,o,e,n){return E({l:o,c:t.c,h:t.h},e,n)}function W(t,o,e,n,r,c=60){const a=I(t,o,e,n);return F(a,r,c)}function T(t,o){const e=Math.pow(10,o);return Math.round(t*e)/e}export{B as apcaContrast,E as clampChromaAndGamutMap,I as deriveSemantic,W as deriveSemanticWithContrast,F as ensureContrast,h as gamutMapToSRGB,_ as isInSRGBGamut,m as oklchToSRGB,X as parseOklch,b as rotateHue,$ as serializeOklch};
+const S=Math.PI/180,h=1e-4,$=50,m="[+-]?(?:\\d+|\\d*\\.\\d+)(?:[eE][+-]?\\d+)?",i="[\\t\\n\\f\\r ]",X=new RegExp(i+"*,"+i+"*"),y=new RegExp(i+"+");function G(t){return t.replace(/\/\*[\s\S]*?(?:\*\/|$)/g," ").replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g,"")}const L={"":1,deg:1,grad:.9,rad:180/Math.PI,turn:360},H=.4,U=new RegExp("^oklch\\("+i+"*("+m+")(%?)"+i+"+("+m+")(%?)"+i+"+("+m+")(deg|grad|rad|turn)?"+i+"*\\)$","i");function V(t){const n=t.h*S;return{L:t.l,a:t.c*Math.cos(n),b:t.c*Math.sin(n)}}function W(t){const n=t.L+.3963377774*t.a+.2158037573*t.b,r=t.L-.1055613458*t.a-.0638541728*t.b,e=t.L-.0894841775*t.a-1.291485548*t.b,o=n*n*n,u=r*r*r,c=e*e*e;return{r:4.0767416621*o-3.3077115913*u+.2309699292*c,g:-1.2684380046*o+2.6097574011*u-.3413193965*c,b:-.0041960863*o-.7034186147*u+1.707614701*c}}function T(t){return t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055}function z(t){return{r:T(t.r),g:T(t.g),b:T(t.b)}}function Y(t){return t.r>=-h&&t.r<=1+h&&t.g>=-h&&t.g<=1+h&&t.b>=-h&&t.b<=1+h}function g(t){return Math.max(0,Math.min(1,t))}function q(t){const n=G(t).match(U);if(!n)return null;let r=parseFloat(n[1]);n[2]==="%"&&(r/=100);let e=parseFloat(n[3]);n[4]==="%"&&(e=e/100*H);const o=parseFloat(n[5])*L[(n[6]??"").toLowerCase()];return!isFinite(r)||!isFinite(e)||!isFinite(o)?null:{l:Math.max(0,Math.min(1,r)),c:Math.max(0,e),h:(o%360+360)%360}}function ct(t){const n=p(t.l,6),r=p(t.c,6),e=p((t.h%360+360)%360,4);return`oklch(${n} ${r} ${e})`}function _(t){return z(W(V(t)))}function x(t){return Y(_(t))}function M(t){if(t.c<=h||x(t))return{...t};let n=0,r=t.c,e={...t};for(let o=0;o<$;o++){const u=(n+r)/2;if(e={l:t.l,c:u,h:t.h},x(e)?n=u:r=u,r-n<h)break}return{l:t.l,c:n,h:t.h}}function K(t,n,r){const e={l:t.l,c:Math.max(n,Math.min(r,t.c)),h:t.h};return M(e)}const C=.022,w=.012,O=.022,b=.57,k=.56,P=1.14,A=.001,R=.027;function B(t){const n=Math.pow(g(t.r),2.4),r=Math.pow(g(t.g),2.4),e=Math.pow(g(t.b),2.4);return .2126729*n+.7151522*r+.072175*e}function I(t,n){const r=_(M(t)),e=_(M(n));let o=B(r),u=B(e);if(o=o>C?o:o+Math.pow(C-o,1.414),u=u>C?u:u+Math.pow(C-u,1.414),Math.abs(u-o)<A)return 0;let c;if(u>o){const s=Math.pow(u,k),a=Math.pow(o,b);if(c=(s-a)*P,c<A)return 0;c=c<R?c-c*O*R:c-O}else{const s=Math.pow(u,k),a=Math.pow(o,b);if(c=(s-a)*P,c>-A)return 0;c=c>-R?c-c*w*R:c+w}return c*100}function j(t,n,r=60){let e=M({...t}),o=Math.abs(I(e,n));if(o>=r)return e;const u=n.l>.5,c=.01,s=u?0:1;for(let a=0;a<100;a++){if(u?e.l=Math.max(s,e.l-c):e.l=Math.min(s,e.l+c),e=M(e),o=Math.abs(I(e,n)),o>=r)return e;if(e.l<=0||e.l>=1)break}return e}function st(t,n){return((t+n)%360+360)%360}function J(t,n,r,e){return K({l:n,c:t.c,h:t.h},r,e)}function at(t,n,r,e,o,u=60){const c=J(t,n,r,e);return j(c,o,u)}function E(t){return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function Q(t){const n=E(t.r),r=E(t.g),e=E(t.b),o=Math.cbrt(.4122214708*n+.5363325363*r+.0514459929*e),u=Math.cbrt(.2119034982*n+.6806995451*r+.1073969566*e),c=Math.cbrt(.0883024619*n+.2817188376*r+.6299787005*e);return{L:.2104542553*o+.793617785*u-.0040720468*c,a:1.9779984951*o-2.428592205*u+.4505937099*c,b:.0259040371*o+.7827717662*u-.808675766*c}}function Z(t){const n=Math.sqrt(t.a*t.a+t.b*t.b),r=(Math.atan2(t.b,t.a)/S%360+360)%360;return{l:t.L,c:n,h:r}}function tt(t){const n=p(t.c,4);return{l:p(t.l,3),c:n,h:n===0?0:p(t.h,1)}}function f(t){return Math.round(g(t)*255)}function d(t){const n=Z(Q(t)),r=t.r===t.g&&t.g===t.b?{l:n.l,c:0,h:0}:n,e=tt(r);if(x(e)){const o=_(e);if(f(o.r)===f(t.r)&&f(o.g)===f(t.g)&&f(o.b)===f(t.b))return e}return r}function nt(t){const n=t.slice(1);if(!/^[0-9a-f]+$/i.test(n))return null;if(n.length===3){const[r,e,o]=n.split("").map(u=>parseInt(u+u,16));return{r:r/255,g:e/255,b:o/255}}return n.length===6?{r:parseInt(n.slice(0,2),16)/255,g:parseInt(n.slice(2,4),16)/255,b:parseInt(n.slice(4,6),16)/255}:null}function F(t,n){const r=t.match(new RegExp("^"+n+"\\("+i+"*([^)]*?)"+i+"*\\)$","i"));if(!r)return null;const e=r[1];if(e.includes("/"))return null;const o=e.includes(","),u=e.split(o?X:y);return u.length!==3||u.some(c=>c.length===0)?null:{args:u,legacy:o}}const rt=new RegExp("^("+m+")([a-z%]*)$","i");function D(t){const n=t.match(rt);if(!n)return null;const r=parseFloat(n[1]);return isFinite(r)?{value:r,unit:n[2].toLowerCase()}:null}function et(t){if(t.unit!==""&&t.unit!=="%")return null;const n=t.unit==="%"?t.value/100:t.value/255;return Math.max(0,Math.min(1,n))}function ot(t){const n=L[t.unit];return n===void 0?null:t.value*n}function N(t){return t.unit!==""&&t.unit!=="%"?null:Math.max(0,Math.min(1,t.value/100))}function ut(t,n,r){const e=(t%360+360)%360,o=u=>{const c=(u+e/30)%12,s=n*Math.min(r,1-r);return r-s*Math.max(-1,Math.min(c-3,9-c,1))};return{r:o(0),g:o(8),b:o(4)}}const it='"#rrggbb", "#rgb", "rgb(\u2026)", "hsl(\u2026)", "oklch(\u2026)"';function lt(t){const n=G(t);if(n.startsWith("#")){const r=nt(n);return r?d(r):null}if(/^oklch\(/i.test(n))return q(n);if(/^rgba?\(/i.test(n)){const r=F(n,"rgba?");if(!r)return null;const e=r.args.map(D);if(e.some(l=>l===null))return null;const o=e;if(r.legacy&&new Set(o.map(l=>l.unit)).size>1)return null;const u=o.map(et);if(u.some(l=>l===null))return null;const[c,s,a]=u;return d({r:c,g:s,b:a})}if(/^hsla?\(/i.test(n)){const r=F(n,"hsla?");if(!r)return null;const e=r.args.map(D);if(e.some(v=>v===null))return null;const[o,u,c]=e;if(r.legacy&&(u.unit!=="%"||c.unit!=="%"))return null;const s=ot(o),a=N(u),l=N(c);return s===null||a===null||l===null?null:d(ut(s,a,l))}return null}function p(t,n){const r=Math.pow(10,n);return Math.round(t*r)/r}export{it as ACCEPTED_COLOR_FORMS,I as apcaContrast,K as clampChromaAndGamutMap,J as deriveSemantic,at as deriveSemanticWithContrast,j as ensureContrast,M as gamutMapToSRGB,x as isInSRGBGamut,_ as oklchToSRGB,lt as parseCssColor,q as parseOklch,st as rotateHue,ct as serializeOklch};

package/dist/shared/esp-element-base.js

@@ -1,4 +1,4 @@
-var p=function(f,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,o);else for(var c=f.length-1;c>=0;c--)(a=f[c])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{css as E,LitElement as x}from"lit";import{property as y,state as U}from"lit/decorators.js";import{subscribeToRootEvent as g}from"./root-event-subscription.js";import{traverseToClosest as V}from"./utilities.js";import{parseOklch as A,serializeOklch as k,gamutMapToSRGB as O,deriveSemantic as L,deriveSemanticWithContrast as F}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as S,semanticToCSS as P}from"./theme.js";import{alignAttributeTextInheritance as _,focusRing as z}from"./style-fragments.js";class n extends x{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyVariantTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const o=()=>{const r=e();return r?(r.focus(t),!0):!1};o()||this.updateComplete.then(()=>{o()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=V(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const o=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,o&&this.isConnected&&this.subscribeToRootEvents(t),(o||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),o&&this.requestUpdate(),t}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[g(e,"seed-color-changed",this.handleSeedColorChanged),g(e,"scheme-changed",this.handleSchemeChanged),g(e,"theme-changed",this.handleThemeChanged),g(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return V(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,o=A(t.seedColor);if(!o)return;const s=T(o,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",k(O(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:C}=n,b={};for(const i of S){if(C[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),v=a[d],m=t.lightness[l.lightness],u=L(v,m,h.min,h.max);b[i]=u,this.setVariantTokenProperty(P(i),k(u))}for(const i of S){const l=C[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],v=this.effectiveVariantTokenSource(i,h.source,c),m=a[v],u=t.lightness[h.lightness],w=b[l.bg],R=F(m,u,d.min,d.max,w,l.targetLc);b[i]=R,this.setVariantTokenProperty(P(i),k(R))}}effectiveVariantTokenSource(e,t,o){return o&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const o=this.variantTokenOriginalValues.get(e);if(o){const r=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(r!==o.generatedValue||s!==o.generatedPriority)&&(o.originalValue=r.length?r:null,o.originalPriority=s),o.generatedValue=t,o.generatedPriority=""}else{const r=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:r.length?r:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const o=this.style.getPropertyValue(e),r=this.style.getPropertyPriority(e);(o!==t.generatedValue||r!==t.generatedPriority)&&(t.originalValue=o.length?o:null,t.originalPriority=r),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[z(".esp-field:focus-within","--esp-field-focus-shadow"),_,E`
+var p=function(f,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,o);else for(var c=f.length-1;c>=0;c--)(a=f[c])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{css as E,LitElement as x}from"lit";import{property as y,state as U}from"lit/decorators.js";import{subscribeToRootEvent as g}from"./root-event-subscription.js";import{traverseToClosest as V}from"./utilities.js";import{parseCssColor as A,serializeOklch as k,gamutMapToSRGB as L,deriveSemantic as O,deriveSemanticWithContrast as F}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as S,semanticToCSS as P}from"./theme.js";import{alignAttributeTextInheritance as _,focusRing as z}from"./style-fragments.js";class n extends x{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyVariantTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const o=()=>{const r=e();return r?(r.focus(t),!0):!1};o()||this.updateComplete.then(()=>{o()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=V(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const o=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,o&&this.isConnected&&this.subscribeToRootEvents(t),(o||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),o&&this.requestUpdate(),t}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[g(e,"seed-color-changed",this.handleSeedColorChanged),g(e,"scheme-changed",this.handleSchemeChanged),g(e,"theme-changed",this.handleThemeChanged),g(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return V(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,o=A(t.seedColor);if(!o)return;const s=T(o,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",k(L(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:C}=n,b={};for(const i of S){if(C[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),v=a[d],m=t.lightness[l.lightness],u=O(v,m,h.min,h.max);b[i]=u,this.setVariantTokenProperty(P(i),k(u))}for(const i of S){const l=C[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],v=this.effectiveVariantTokenSource(i,h.source,c),m=a[v],u=t.lightness[h.lightness],w=b[l.bg],R=F(m,u,d.min,d.max,w,l.targetLc);b[i]=R,this.setVariantTokenProperty(P(i),k(R))}}effectiveVariantTokenSource(e,t,o){return o&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const o=this.variantTokenOriginalValues.get(e);if(o){const r=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(r!==o.generatedValue||s!==o.generatedPriority)&&(o.originalValue=r.length?r:null,o.originalPriority=s),o.generatedValue=t,o.generatedPriority=""}else{const r=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:r.length?r:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const o=this.style.getPropertyValue(e),r=this.style.getPropertyPriority(e);(o!==t.generatedValue||r!==t.generatedPriority)&&(t.originalValue=o.length?o:null,t.originalPriority=r),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[z(".esp-field:focus-within","--esp-field-focus-shadow"),_,E`
       :host {
         
         --_esp-field-resolved-hover-bg: var(

package/dist/shared/theme.d.ts

@@ -74,7 +74,14 @@ export interface SemanticMapping {
 export type SemanticMappings = Record<SemanticColorName, SemanticMapping>;
 /** The complete, resolved Espalier theme. */
 export interface EspalierTheme {
-    /** OKLCH seed color string — drives the entire palette. */
+    /**
+     * Seed color — drives the entire palette.
+     *
+     * A theme author may supply any common CSS color form (`#rrggbb`,
+     * `#rgb`, `rgb()`, `hsl()`, or `oklch()`); non-OKLCH forms are
+     * converted at the merge boundary, so a **resolved** theme always
+     * carries an `oklch()` string here.
+     */
     seedColor: string;
     /** CSS `font-family` for body / UI text. */
     fontBody: string;

package/dist/shared/theme.js

@@ -1 +1 @@
-import{parseOklch as O}from"./color-engine.js";const h=["background","layer1","layer2","layer3","layer4","actionBackground","actionText","border","shadow","text","dangerText","headings","headingsHover","link","linkHover","linkHoverBg","inputCaret","inputSelection","inputSelectionBg"],$=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],C=["analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],d=["surface","raised1","raised2","raised3","raised4","accent","muted","text","border","ink","shadow"],I={surface:.99,raised1:.97,raised2:.9,raised3:.8,raised4:.72,accent:.5,muted:.45,text:.35,border:.3,ink:.25,shadow:.2},T={surface:.15,raised1:.2,raised2:.3,raised3:.4,raised4:.36,accent:.6,muted:.75,text:.85,border:.7,ink:.95,shadow:.6},y={background:{source:"primary",lightness:"surface"},layer1:{source:"primary",lightness:"raised1"},layer2:{source:"primary",lightness:"raised2"},layer3:{source:"primary",lightness:"raised3"},layer4:{source:"primary",lightness:"raised4"},actionBackground:{source:"primary",lightness:"raised3"},actionText:{source:"primary",lightness:"ink"},border:{source:"primary",lightness:"border"},shadow:{source:"primary",lightness:"shadow"},text:{source:"primary",lightness:"text"},dangerText:{source:"danger",lightness:"text"},headings:{source:"primary",lightness:"muted"},headingsHover:{source:"primary",lightness:"text"},link:{source:"complementary",lightness:"accent"},linkHover:{source:"complementary",lightness:"text"},linkHoverBg:{source:"triadic-left",lightness:"raised2"},inputCaret:{source:"triadic-right",lightness:"ink"},inputSelection:{source:"complementary",lightness:"text"},inputSelectionBg:{source:"triadic-left",lightness:"raised2"}},f=.4;function b(){const i={};for(const e of h)i[e]={min:0,max:f};return i}const B={seedColor:"oklch(0.7 0.125 216)",fontBody:"",fontHeadings:"",fontBrand:"",fontMonospace:"",fontWeightBody:"normal",fontWeightHeadings:"bold",fontWeightBrand:"bold",fontWeightMonospace:"normal",stylesheets:[],rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200,angles:{analogous:30,complementary:180,splitComplementary:30,triadic:120},semanticHues:{danger:27,success:150,warning:90},variantChroma:{},chroma:b(),semanticMappings:{...y}},_={...B,chroma:b(),semanticMappings:{...y},lightness:{...I}},W={...B,chroma:b(),semanticMappings:{...y},lightness:{...T}},M=new Set(["__proto__","constructor","prototype"]);function l(i){return!M.has(i)}function w(i,e){return M.has(i)?void 0:e}function F(i){return`--esp-color-${i.replace(/([A-Z])/g,"-$1").replace(/(\d)/g,"-$1").toLowerCase()}`}function R(i){try{const e=atob(i),s=JSON.parse(e,w);return typeof s!="object"||s===null||Array.isArray(s)?null:s}catch{return null}}function k(i){return btoa(JSON.stringify(i))}function N(i,e){const s={...i,seedColor:e.seedColor??i.seedColor,fontBody:e.fontBody??i.fontBody,fontHeadings:e.fontHeadings??i.fontHeadings,fontBrand:e.fontBrand??i.fontBrand,fontMonospace:e.fontMonospace??i.fontMonospace,fontWeightBody:String(e.fontWeightBody??i.fontWeightBody),fontWeightHeadings:String(e.fontWeightHeadings??i.fontWeightHeadings),fontWeightBrand:String(e.fontWeightBrand??i.fontWeightBrand),fontWeightMonospace:String(e.fontWeightMonospace??i.fontWeightMonospace),stylesheets:e.stylesheets??[...i.stylesheets],rootFontSize:e.rootFontSize??i.rootFontSize,typeRatio:e.typeRatio??i.typeRatio,spaceRatio:e.spaceRatio??i.spaceRatio,borderRadius:e.borderRadius??i.borderRadius,viewportMin:e.viewportMin??i.viewportMin,viewportMax:e.viewportMax??i.viewportMax,angles:{...i.angles,...e.angles},semanticHues:{...i.semanticHues,...e.semanticHues},variantChroma:{...i.variantChroma,...e.variantChroma},lightness:{...i.lightness,...e.lightness},chroma:S(i.chroma,e.chroma),semanticMappings:S(i.semanticMappings,e.semanticMappings)};return e.pageBackgroundImage!==void 0&&(s.pageBackgroundImage=e.pageBackgroundImage),e.pageBackgroundImageOpacity!==void 0&&(s.pageBackgroundImageOpacity=e.pageBackgroundImageOpacity),e.boxBackgroundImage!==void 0&&(s.boxBackgroundImage=e.boxBackgroundImage),e.boxBackgroundImageOpacity!==void 0&&(s.boxBackgroundImageOpacity=e.boxBackgroundImageOpacity),e.vellumOpacity!==void 0&&(s.vellumOpacity=e.vellumOpacity),e.vellumBackgroundImage!==void 0&&(s.vellumBackgroundImage=e.vellumBackgroundImage),e.vellumBackgroundImageOpacity!==void 0&&(s.vellumBackgroundImageOpacity=e.vellumBackgroundImageOpacity),s}function S(i,e){if(!e)return{...i};const s={...i};for(const c of Object.keys(e)){const u=e[c];u!==void 0&&(s[c]=u)}return s}function L(i){const e=[],s=[];let c;try{c=atob(i)}catch{return e.push("Failed to decode Base64 string."),{valid:!1,errors:e,warnings:s}}let u;try{u=JSON.parse(c)}catch{return e.push("Decoded string is not valid JSON."),{valid:!1,errors:e,warnings:s}}if(typeof u!="object"||u===null||Array.isArray(u))return e.push("Theme must be a JSON object."),{valid:!1,errors:e,warnings:s};const o=u;"seedColor"in o&&(typeof o.seedColor!="string"?e.push("seedColor must be a string."):O(o.seedColor)||e.push(`seedColor is not a valid OKLCH value: "${o.seedColor}".`));for(const t of["fontBody","fontHeadings","fontBrand","fontMonospace"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);const g=["normal","bold","lighter","bolder"],p=["inherit","initial","unset","revert","revert-layer"];for(const t of["fontWeightBody","fontWeightHeadings","fontWeightBrand","fontWeightMonospace"])if(t in o){const n=o[t];if(typeof n=="number")(n<1||n>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got ${n}).`);else if(typeof n=="string"){const a=g.includes(n)||p.includes(n);if(/^\d+$/.test(n)){const x=Number(n);(x<1||x>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got "${n}").`)}else a||s.push(`${t} = "${n}" is not a standard font-weight value.`)}else e.push(`${t} must be a string or number.`)}"stylesheets"in o&&(Array.isArray(o.stylesheets)?o.stylesheets.some(t=>typeof t!="string")&&e.push("Every entry in stylesheets must be a string."):e.push("stylesheets must be an array of strings."));const m=[["rootFontSize",1,100],["borderRadius",0,10],["viewportMin",100,1e4],["viewportMax",200,1e4]];for(const[t,n,a]of m)if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const r=o[t];n!==void 0&&r<n&&e.push(`${t} must be \u2265 ${n} (got ${r}).`),a!==void 0&&r>a&&s.push(`${t} = ${r} is unusually high (max ${a}).`)}for(const t of["typeRatio","spaceRatio"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const n=o[t];n<=1&&e.push(`${t} must be > 1 (got ${n}).`);const a=t==="typeRatio"?1.3:2;n>a&&s.push(`${t} = ${n} is very high (max ${a}); scales may be extreme.`)}if("viewportMin"in o&&"viewportMax"in o){const t=o.viewportMin,n=o.viewportMax;typeof t=="number"&&typeof n=="number"&&t>=n&&e.push(`viewportMin (${t}) must be less than viewportMax (${n}).`)}if("angles"in o)if(typeof o.angles!="object"||o.angles===null)e.push("angles must be an object.");else{const t=o.angles;for(const n of["analogous","complementary","splitComplementary","triadic"])if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`angles.${n} must be a finite number.`);else{const a=t[n];(a<0||a>360)&&s.push(`angles.${n} = ${a} is outside 0\u2013360.`)}}if("semanticHues"in o)if(typeof o.semanticHues!="object"||o.semanticHues===null)e.push("semanticHues must be an object.");else{const t=o.semanticHues;for(const n of["danger","success","warning"])if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`semanticHues.${n} must be a finite number.`);else{const a=t[n];(a<0||a>360)&&s.push(`semanticHues.${n} = ${a} is outside 0\u2013360.`)}}if("variantChroma"in o)if(typeof o.variantChroma!="object"||o.variantChroma===null)e.push("variantChroma must be an object.");else{const t=o.variantChroma;for(const n of C)if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`variantChroma["${n}"] must be a finite number.`);else{const a=t[n];a<0&&e.push(`variantChroma["${n}"] must be \u2265 0 (got ${a}).`),a>f&&s.push(`variantChroma["${n}"] = ${a} exceeds ${f}.`)}}if("lightness"in o)if(typeof o.lightness!="object"||o.lightness===null)e.push("lightness must be an object.");else{const t=o.lightness;for(const n of d)if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`lightness.${n} must be a finite number.`);else{const a=t[n];(a<0||a>1)&&e.push(`lightness.${n} must be 0\u20131 (got ${a}).`)}}if("chroma"in o)if(typeof o.chroma!="object"||o.chroma===null)e.push("chroma must be an object.");else{const t=o.chroma;for(const n of h)if(n in t){const a=t[n];if(typeof a!="object"||a===null){e.push(`chroma.${n} must be { min, max }.`);continue}const r=a;(typeof r.min!="number"||r.min<0)&&e.push(`chroma.${n}.min must be \u2265 0.`),(typeof r.max!="number"||r.max<0||r.max>f)&&e.push(`chroma.${n}.max must be 0\u2013${f}.`),typeof r.min=="number"&&typeof r.max=="number"&&r.min>r.max&&e.push(`chroma.${n}.min (${r.min}) must be \u2264 max (${r.max}).`)}}if("semanticMappings"in o)if(typeof o.semanticMappings!="object"||o.semanticMappings===null)e.push("semanticMappings must be an object.");else{const t=o.semanticMappings;for(const n of h)if(n in t){const a=t[n];if(typeof a!="object"||a===null){e.push(`semanticMappings.${n} must be { source, lightness }.`);continue}const r=a;(typeof r.source!="string"||!$.includes(r.source))&&e.push(`semanticMappings.${n}.source must be one of: ${$.join(", ")}.`),(typeof r.lightness!="string"||!d.includes(r.lightness))&&e.push(`semanticMappings.${n}.lightness must be one of: ${d.join(", ")}.`)}}for(const t of["pageBackgroundImage","boxBackgroundImage","vellumBackgroundImage"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);for(const t of["pageBackgroundImageOpacity","boxBackgroundImageOpacity","vellumOpacity","vellumBackgroundImageOpacity"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const n=o[t];(n<0||n>1)&&e.push(`${t} must be 0\u20131 (got ${n}).`)}return{valid:e.length===0,errors:e,warnings:s}}const A=["angles","chroma","lightness","semanticHues","semanticMappings","variantChroma"];function E(i,e){const s={};for(const[c,u]of Object.entries(i))l(c)&&(s[c]=u);for(const[c,u]of Object.entries(e))u!==void 0&&l(c)&&(s[c]=u);for(const c of A){const u=i[c],o=e[c];if(u&&typeof u=="object"&&!Array.isArray(u)&&o&&typeof o=="object"&&!Array.isArray(o)){const g={};for(const[p,m]of Object.entries(u))l(p)&&(g[p]=m);for(const[p,m]of Object.entries(o))m!==void 0&&l(p)&&(g[p]=m);s[c]=g}}return s}function D(...i){let e={};for(const s of i){if(!s)continue;const c=R(s);c&&(e=E(e,c))}return k(e)}function v(i){return i.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r")}const H={borderRadius:.1,fontBody:'"Noto Sans", sans-serif',fontWeightBody:"normal",fontHeadings:'"Inika", serif',fontWeightHeadings:"normal",fontBrand:'"Inika", serif',fontWeightBrand:"normal",fontMonospace:'"JetBrains Mono", monospace',fontWeightMonospace:"normal",seedColor:"oklch(.07 0.15 216)"};function K(i){return k({...H,pageBackgroundImage:`url("${v(i)}")`,pageBackgroundImageOpacity:.5})}function U(i){return k({...H,pageBackgroundImage:`url("${v(i)}")`,pageBackgroundImageOpacity:.55})}export{$ as COLOR_SOURCES,T as DEFAULT_DARK_LIGHTNESS,W as DEFAULT_DARK_THEME,I as DEFAULT_LIGHT_LIGHTNESS,_ as DEFAULT_LIGHT_THEME,y as DEFAULT_SEMANTIC_MAPPINGS,d as LIGHTNESS_KEYS,A as NESTED_THEME_KEYS,h as SEMANTIC_COLOR_NAMES,C as VARIANT_COLOR_SOURCES,U as buildTaprootDarkTheme,K as buildTaprootLightTheme,k as encodeTheme,D as layerThemes,E as mergePartials,N as mergeTheme,R as parseTheme,F as semanticToCSS,L as validateTheme};
+import{ACCEPTED_COLOR_FORMS as v,parseCssColor as $,parseOklch as I,serializeOklch as T}from"./color-engine.js";const h=["background","layer1","layer2","layer3","layer4","actionBackground","actionText","border","shadow","text","dangerText","headings","headingsHover","link","linkHover","linkHoverBg","inputCaret","inputSelection","inputSelectionBg"],B=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],R=["analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],d=["surface","raised1","raised2","raised3","raised4","accent","muted","text","border","ink","shadow"],w={surface:.99,raised1:.97,raised2:.9,raised3:.8,raised4:.72,accent:.5,muted:.45,text:.35,border:.3,ink:.25,shadow:.2},A={surface:.15,raised1:.2,raised2:.3,raised3:.4,raised4:.36,accent:.6,muted:.75,text:.85,border:.7,ink:.95,shadow:.6},y={background:{source:"primary",lightness:"surface"},layer1:{source:"primary",lightness:"raised1"},layer2:{source:"primary",lightness:"raised2"},layer3:{source:"primary",lightness:"raised3"},layer4:{source:"primary",lightness:"raised4"},actionBackground:{source:"primary",lightness:"raised3"},actionText:{source:"primary",lightness:"ink"},border:{source:"primary",lightness:"border"},shadow:{source:"primary",lightness:"shadow"},text:{source:"primary",lightness:"text"},dangerText:{source:"danger",lightness:"text"},headings:{source:"primary",lightness:"muted"},headingsHover:{source:"primary",lightness:"text"},link:{source:"complementary",lightness:"accent"},linkHover:{source:"complementary",lightness:"text"},linkHoverBg:{source:"triadic-left",lightness:"raised2"},inputCaret:{source:"triadic-right",lightness:"ink"},inputSelection:{source:"complementary",lightness:"text"},inputSelectionBg:{source:"triadic-left",lightness:"raised2"}},f=.4;function b(){const i={};for(const e of h)i[e]={min:0,max:f};return i}const M={seedColor:"oklch(0.7 0.125 216)",fontBody:"",fontHeadings:"",fontBrand:"",fontMonospace:"",fontWeightBody:"normal",fontWeightHeadings:"bold",fontWeightBrand:"bold",fontWeightMonospace:"normal",stylesheets:[],rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200,angles:{analogous:30,complementary:180,splitComplementary:30,triadic:120},semanticHues:{danger:27,success:150,warning:90},variantChroma:{},chroma:b(),semanticMappings:{...y}},L={...M,chroma:b(),semanticMappings:{...y},lightness:{...w}},D={...M,chroma:b(),semanticMappings:{...y},lightness:{...A}},S=new Set(["__proto__","constructor","prototype"]);function l(i){return!S.has(i)}function E(i,e){return S.has(i)?void 0:e}function U(i){return`--esp-color-${i.replace(/([A-Z])/g,"-$1").replace(/(\d)/g,"-$1").toLowerCase()}`}function _(i){try{const e=atob(i),s=JSON.parse(e,E);return typeof s!="object"||s===null||Array.isArray(s)?null:s}catch{return null}}function k(i){return btoa(JSON.stringify(i))}function j(i){if(I(i))return i;const e=$(i);return e?T(e):i}function K(i,e){const s={...i,seedColor:typeof e.seedColor=="string"?j(e.seedColor):i.seedColor,fontBody:e.fontBody??i.fontBody,fontHeadings:e.fontHeadings??i.fontHeadings,fontBrand:e.fontBrand??i.fontBrand,fontMonospace:e.fontMonospace??i.fontMonospace,fontWeightBody:String(e.fontWeightBody??i.fontWeightBody),fontWeightHeadings:String(e.fontWeightHeadings??i.fontWeightHeadings),fontWeightBrand:String(e.fontWeightBrand??i.fontWeightBrand),fontWeightMonospace:String(e.fontWeightMonospace??i.fontWeightMonospace),stylesheets:e.stylesheets??[...i.stylesheets],rootFontSize:e.rootFontSize??i.rootFontSize,typeRatio:e.typeRatio??i.typeRatio,spaceRatio:e.spaceRatio??i.spaceRatio,borderRadius:e.borderRadius??i.borderRadius,viewportMin:e.viewportMin??i.viewportMin,viewportMax:e.viewportMax??i.viewportMax,angles:{...i.angles,...e.angles},semanticHues:{...i.semanticHues,...e.semanticHues},variantChroma:{...i.variantChroma,...e.variantChroma},lightness:{...i.lightness,...e.lightness},chroma:C(i.chroma,e.chroma),semanticMappings:C(i.semanticMappings,e.semanticMappings)};return e.pageBackgroundImage!==void 0&&(s.pageBackgroundImage=e.pageBackgroundImage),e.pageBackgroundImageOpacity!==void 0&&(s.pageBackgroundImageOpacity=e.pageBackgroundImageOpacity),e.boxBackgroundImage!==void 0&&(s.boxBackgroundImage=e.boxBackgroundImage),e.boxBackgroundImageOpacity!==void 0&&(s.boxBackgroundImageOpacity=e.boxBackgroundImageOpacity),e.vellumOpacity!==void 0&&(s.vellumOpacity=e.vellumOpacity),e.vellumBackgroundImage!==void 0&&(s.vellumBackgroundImage=e.vellumBackgroundImage),e.vellumBackgroundImageOpacity!==void 0&&(s.vellumBackgroundImageOpacity=e.vellumBackgroundImageOpacity),s}function C(i,e){if(!e)return{...i};const s={...i};for(const c of Object.keys(e)){const u=e[c];u!==void 0&&(s[c]=u)}return s}function z(i){const e=[],s=[];let c;try{c=atob(i)}catch{return e.push("Failed to decode Base64 string."),{valid:!1,errors:e,warnings:s}}let u;try{u=JSON.parse(c)}catch{return e.push("Decoded string is not valid JSON."),{valid:!1,errors:e,warnings:s}}if(typeof u!="object"||u===null||Array.isArray(u))return e.push("Theme must be a JSON object."),{valid:!1,errors:e,warnings:s};const o=u;"seedColor"in o&&(typeof o.seedColor!="string"?e.push("seedColor must be a string."):$(o.seedColor)||e.push(`seedColor is not a valid CSS color: "${o.seedColor}". Accepted forms: ${v}.`));for(const t of["fontBody","fontHeadings","fontBrand","fontMonospace"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);const g=["normal","bold","lighter","bolder"],p=["inherit","initial","unset","revert","revert-layer"];for(const t of["fontWeightBody","fontWeightHeadings","fontWeightBrand","fontWeightMonospace"])if(t in o){const n=o[t];if(typeof n=="number")(n<1||n>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got ${n}).`);else if(typeof n=="string"){const a=g.includes(n)||p.includes(n);if(/^\d+$/.test(n)){const x=Number(n);(x<1||x>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got "${n}").`)}else a||s.push(`${t} = "${n}" is not a standard font-weight value.`)}else e.push(`${t} must be a string or number.`)}"stylesheets"in o&&(Array.isArray(o.stylesheets)?o.stylesheets.some(t=>typeof t!="string")&&e.push("Every entry in stylesheets must be a string."):e.push("stylesheets must be an array of strings."));const m=[["rootFontSize",1,100],["borderRadius",0,10],["viewportMin",100,1e4],["viewportMax",200,1e4]];for(const[t,n,a]of m)if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const r=o[t];n!==void 0&&r<n&&e.push(`${t} must be \u2265 ${n} (got ${r}).`),a!==void 0&&r>a&&s.push(`${t} = ${r} is unusually high (max ${a}).`)}for(const t of["typeRatio","spaceRatio"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const n=o[t];n<=1&&e.push(`${t} must be > 1 (got ${n}).`);const a=t==="typeRatio"?1.3:2;n>a&&s.push(`${t} = ${n} is very high (max ${a}); scales may be extreme.`)}if("viewportMin"in o&&"viewportMax"in o){const t=o.viewportMin,n=o.viewportMax;typeof t=="number"&&typeof n=="number"&&t>=n&&e.push(`viewportMin (${t}) must be less than viewportMax (${n}).`)}if("angles"in o)if(typeof o.angles!="object"||o.angles===null)e.push("angles must be an object.");else{const t=o.angles;for(const n of["analogous","complementary","splitComplementary","triadic"])if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`angles.${n} must be a finite number.`);else{const a=t[n];(a<0||a>360)&&s.push(`angles.${n} = ${a} is outside 0\u2013360.`)}}if("semanticHues"in o)if(typeof o.semanticHues!="object"||o.semanticHues===null)e.push("semanticHues must be an object.");else{const t=o.semanticHues;for(const n of["danger","success","warning"])if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`semanticHues.${n} must be a finite number.`);else{const a=t[n];(a<0||a>360)&&s.push(`semanticHues.${n} = ${a} is outside 0\u2013360.`)}}if("variantChroma"in o)if(typeof o.variantChroma!="object"||o.variantChroma===null)e.push("variantChroma must be an object.");else{const t=o.variantChroma;for(const n of R)if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`variantChroma["${n}"] must be a finite number.`);else{const a=t[n];a<0&&e.push(`variantChroma["${n}"] must be \u2265 0 (got ${a}).`),a>f&&s.push(`variantChroma["${n}"] = ${a} exceeds ${f}.`)}}if("lightness"in o)if(typeof o.lightness!="object"||o.lightness===null)e.push("lightness must be an object.");else{const t=o.lightness;for(const n of d)if(n in t)if(typeof t[n]!="number"||!isFinite(t[n]))e.push(`lightness.${n} must be a finite number.`);else{const a=t[n];(a<0||a>1)&&e.push(`lightness.${n} must be 0\u20131 (got ${a}).`)}}if("chroma"in o)if(typeof o.chroma!="object"||o.chroma===null)e.push("chroma must be an object.");else{const t=o.chroma;for(const n of h)if(n in t){const a=t[n];if(typeof a!="object"||a===null){e.push(`chroma.${n} must be { min, max }.`);continue}const r=a;(typeof r.min!="number"||r.min<0)&&e.push(`chroma.${n}.min must be \u2265 0.`),(typeof r.max!="number"||r.max<0||r.max>f)&&e.push(`chroma.${n}.max must be 0\u2013${f}.`),typeof r.min=="number"&&typeof r.max=="number"&&r.min>r.max&&e.push(`chroma.${n}.min (${r.min}) must be \u2264 max (${r.max}).`)}}if("semanticMappings"in o)if(typeof o.semanticMappings!="object"||o.semanticMappings===null)e.push("semanticMappings must be an object.");else{const t=o.semanticMappings;for(const n of h)if(n in t){const a=t[n];if(typeof a!="object"||a===null){e.push(`semanticMappings.${n} must be { source, lightness }.`);continue}const r=a;(typeof r.source!="string"||!B.includes(r.source))&&e.push(`semanticMappings.${n}.source must be one of: ${B.join(", ")}.`),(typeof r.lightness!="string"||!d.includes(r.lightness))&&e.push(`semanticMappings.${n}.lightness must be one of: ${d.join(", ")}.`)}}for(const t of["pageBackgroundImage","boxBackgroundImage","vellumBackgroundImage"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);for(const t of["pageBackgroundImageOpacity","boxBackgroundImageOpacity","vellumOpacity","vellumBackgroundImageOpacity"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const n=o[t];(n<0||n>1)&&e.push(`${t} must be 0\u20131 (got ${n}).`)}return{valid:e.length===0,errors:e,warnings:s}}const W=["angles","chroma","lightness","semanticHues","semanticMappings","variantChroma"];function F(i,e){const s={};for(const[c,u]of Object.entries(i))l(c)&&(s[c]=u);for(const[c,u]of Object.entries(e))u!==void 0&&l(c)&&(s[c]=u);for(const c of W){const u=i[c],o=e[c];if(u&&typeof u=="object"&&!Array.isArray(u)&&o&&typeof o=="object"&&!Array.isArray(o)){const g={};for(const[p,m]of Object.entries(u))l(p)&&(g[p]=m);for(const[p,m]of Object.entries(o))m!==void 0&&l(p)&&(g[p]=m);s[c]=g}}return s}function G(...i){let e={};for(const s of i){if(!s)continue;const c=_(s);c&&(e=F(e,c))}return k(e)}function O(i){return i.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r")}const H={borderRadius:.1,fontBody:'"Noto Sans", sans-serif',fontWeightBody:"normal",fontHeadings:'"Inika", serif',fontWeightHeadings:"normal",fontBrand:'"Inika", serif',fontWeightBrand:"normal",fontMonospace:'"JetBrains Mono", monospace',fontWeightMonospace:"normal",seedColor:"oklch(.07 0.15 216)"};function J(i){return k({...H,pageBackgroundImage:`url("${O(i)}")`,pageBackgroundImageOpacity:.5})}function P(i){return k({...H,pageBackgroundImage:`url("${O(i)}")`,pageBackgroundImageOpacity:.55})}export{B as COLOR_SOURCES,A as DEFAULT_DARK_LIGHTNESS,D as DEFAULT_DARK_THEME,w as DEFAULT_LIGHT_LIGHTNESS,L as DEFAULT_LIGHT_THEME,y as DEFAULT_SEMANTIC_MAPPINGS,d as LIGHTNESS_KEYS,W as NESTED_THEME_KEYS,h as SEMANTIC_COLOR_NAMES,R as VARIANT_COLOR_SOURCES,P as buildTaprootDarkTheme,J as buildTaprootLightTheme,k as encodeTheme,G as layerThemes,F as mergePartials,K as mergeTheme,_ as parseTheme,U as semanticToCSS,z as validateTheme};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.15.4",
+  "version": "2.16.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",