@taprootio/espalier 2.15.3 → 2.16.0

package/custom-elements.json

@@ -21879,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",
@@ -22444,368 +22806,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/grid/esp-grid-column.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/licenses/ASSET_PROVENANCE.md

@@ -9,6 +9,7 @@ removing, or replacing non-code assets.
 | Asset area | Provenance | Notice |
 |------------|------------|--------|
 | `css/fonts/**` | Generated Google Fonts preview CSS with per-family notices generated from upstream Google Fonts metadata links. | `licenses/GOOGLE_FONTS_NOTICES.md` |
+| `assets/shell-fonts.css`, `assets/shell-fonts/**` | Docs-only self-hosted Quicksand, Oswald, and Sometype Mono WOFF2 subsets under OFL 1.1, downloaded once from the Google Fonts css2 endpoint and checked in so the documentation shell never calls Google at runtime. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `assets/icons.svg` | Tabler-derived SVG symbols plus Taproot-owned logo symbol. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `*.ts` | Inline Tabler-style SVG templates and Taproot rendering helpers. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `dist/shared/virtualizer/**` | Vendored Lit Virtualizer runtime source compiled into Espalier's package. | `licenses/THIRD_PARTY_NOTICES.md` |

package/licenses/README.md

@@ -25,8 +25,8 @@ until reviewed and adapted by qualified IP and technology-transactions counsel.
 - `ESPALIER_DEAL_READINESS_CHECKLIST.md` - practical readiness checklist for
   lawyer review, diligence, packaging, and outreach.
 - `THIRD_PARTY_NOTICES.md` - third-party open-source notices for materials
-  copied into Espalier distribution artifacts, including Lit Virtualizer and
-  Tabler Icons.
+  copied into Espalier distribution artifacts, including Lit Virtualizer,
+  Tabler Icons, and the self-hosted documentation shell fonts.
 - `asset-provenance.json` and `ASSET_PROVENANCE.md` - machine-readable and
   human-readable provenance records for generated fonts, icons, vendored
   runtime source, textures, demo datasets, and docs assets.

package/licenses/THIRD_PARTY_NOTICES.md

@@ -75,3 +75,124 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+## Documentation Shell Fonts
+
+The Espalier documentation site self-hosts the three faces its theme names, so
+the site renders identically behind a strict Content-Security-Policy and no
+visitor's browser calls Google to read the docs. The unmodified WOFF2 subsets
+live in `assets/shell-fonts/` and are declared by `assets/shell-fonts.css`.
+They are docs-only and are excluded from the published `@taprootio/espalier`
+package.
+
+- Project: Quicksand
+- Upstream: https://github.com/andrew-paglinawan/QuicksandFamily
+- Version: Google Fonts v37 (weight 400, `latin` and `latin-ext` subsets)
+- License: SIL Open Font License 1.1
+- Copyright: Copyright 2011 The Quicksand Project Authors (https://github.com/andrew-paglinawan/QuicksandFamily), with Reserved Font Name "Quicksand".
+
+- Project: Oswald
+- Upstream: https://github.com/googlefonts/OswaldFont
+- Version: Google Fonts v57 (weight 700, `latin` and `latin-ext` subsets)
+- License: SIL Open Font License 1.1
+- Copyright: Copyright 2016 The Oswald Project Authors (https://github.com/googlefonts/OswaldFont)
+
+- Project: Sometype Mono
+- Upstream: https://github.com/googlefonts/sometype-mono
+- Version: Google Fonts v4 (weight 400, `latin` and `latin-ext` subsets)
+- License: SIL Open Font License 1.1
+- Copyright: Copyright 2018 The Sometype Mono Project Authors (https://github.com/googlefonts/sometype-mono)
+
+All three are covered by the same license text.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/licenses/asset-provenance.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "updatedAt": "2026-07-21",
+  "updatedAt": "2026-08-19",
   "entries": [
     {
       "id": "google-font-preview-assets",
@@ -316,6 +316,62 @@
       "noticeRequirement": "none",
       "noticePaths": [],
       "reviewStatus": "documented"
+    },
+    {
+      "id": "docs-shell-self-hosted-fonts",
+      "paths": [
+        "assets/shell-fonts.css",
+        "assets/shell-fonts/**"
+      ],
+      "assetType": "self-hosted web font faces (WOFF2 latin and latin-ext subsets) with a hand-authored @font-face stylesheet",
+      "classification": "third-party open font",
+      "owner": "The Quicksand, Oswald, and Sometype Mono project authors",
+      "source": "Google Fonts css2 endpoint, downloaded 2026-08-19 with a desktop Chrome User-Agent so the WOFF2 (not TrueType) sources were served: https://fonts.googleapis.com/css2?family=Quicksand&display=swap (Quicksand v37), https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap (Oswald v57), https://fonts.googleapis.com/css2?family=Sometype+Mono&display=swap (Sometype Mono v4). These are the exact URLs <esp-root> built at runtime for the documentation theme before ESP0171. Upstream license metadata: https://github.com/google/fonts/blob/main/ofl/quicksand/METADATA.pb, https://github.com/google/fonts/blob/main/ofl/oswald/METADATA.pb, https://github.com/google/fonts/blob/main/ofl/sometypemono/METADATA.pb",
+      "license": "SIL Open Font License 1.1 (https://openfontlicense.org/open-font-license-official-text/) for all three families",
+      "transformations": [
+        "Downloaded the latin and latin-ext WOFF2 subsets named by each css2 response; the vietnamese and cyrillic subsets were not vendored",
+        "Renamed each subset to family-weight-subset.woff2; the font bytes themselves are unmodified",
+        "Reproduced the css2 @font-face declarations by hand in assets/shell-fonts.css, keeping the upstream unicode-range values and font-display: swap, with src pointing at the local /assets/shell-fonts/ paths"
+      ],
+      "subsetFiles": [
+        {
+          "path": "assets/shell-fonts/quicksand-400-latin.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/quicksand/v37/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2",
+          "sha256": "fee25690fddfdf52d7c88f8460260998c523b762e1a53fc91561b179835e3316"
+        },
+        {
+          "path": "assets/shell-fonts/quicksand-400-latin-ext.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/quicksand/v37/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58i-wi40.woff2",
+          "sha256": "db0347bb53f618c0d932a128ee262d847a6e7243110e31f869611d1b63450505"
+        },
+        {
+          "path": "assets/shell-fonts/oswald-700-latin.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiZQ.woff2",
+          "sha256": "aae665c75af89ea7cb7d8ccc8b0911ea72267442ebcd84f6e3efa041ad3b3c16"
+        },
+        {
+          "path": "assets/shell-fonts/oswald-700-latin-ext.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUhiZTaR.woff2",
+          "sha256": "ceb8c34b47b9e706ebbb402ca2db8055adea563a417590090bd5ac42df3c8272"
+        },
+        {
+          "path": "assets/shell-fonts/sometype-mono-400-latin.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/sometypemono/v4/70lGu745KGk_R3uxyq0WrROhAJiJsJ_eTWllpTAMGH9diwE.woff2",
+          "sha256": "9719b185dc14ff3e39ee87cc277f7679c4c9b95c10c1dbf7882adcf9c582f685"
+        },
+        {
+          "path": "assets/shell-fonts/sometype-mono-400-latin-ext.woff2",
+          "upstreamUrl": "https://fonts.gstatic.com/s/sometypemono/v4/70lGu745KGk_R3uxyq0WrROhAJiJsJ_eTWllpTAMGH9TiwFrsw.woff2",
+          "sha256": "a467270a93a4f13300e6ac87410414ef6b4bf762e150fca8f04d49d1a2b50abf"
+        }
+      ],
+      "packageInclusion": "not included in npm package",
+      "docsInclusion": "docs-site only — linked from docs/_includes/layout.vto and docs/404.vto and served from the Eleventy /assets passthrough, so the documentation shell renders its theme faces without runtime fonts.googleapis.com links",
+      "noticeRequirement": "required",
+      "noticePaths": [
+        "licenses/THIRD_PARTY_NOTICES.md"
+      ],
+      "reviewStatus": "documented"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.15.3",
+  "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",