@taprootio/espalier 2.0.0 → 2.0.1

package/custom-elements.json

@@ -5200,162 +5200,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/breadcrumbs/esp-breadcrumb.js",
+      "path": "dist/box/esp-box.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Represents a single breadcrumb to use in\n[esp-breadcrumbs](/components/breadcrumbs/) to show breadcrumb\nnavigation.",
-          "name": "EspalierBreadcrumb",
+          "description": "Used as a base to group context visually. `esp-box`\nhas a css part of `box` that can be styled to create cards,\nforms, and other UI elements.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <p>Things grouped visually.</p>\n</esp-box>\n```",
+          "name": "EspalierBox",
           "cssProperties": [
             {
-              "description": "The text color of the breadcrumb link.",
-              "name": "--esp-breadcrumb-color"
-            },
-            {
-              "description": "The text color on hover.",
-              "name": "--esp-breadcrumb-hover-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The label to display in the breadcrumb",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The url the breadcrumb points to",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "separator",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Used to override the SVG separator displayed after the\nbreadcrumb.",
-              "attribute": "separator"
-            },
-            {
-              "kind": "field",
-              "name": "isLastElement",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Used internally to render the item using a label\ninstead of a link.",
-              "attribute": "is-last-element"
-            },
-            {
-              "kind": "method",
-              "name": "_renderLink",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The label to display in the breadcrumb",
-              "fieldName": "label"
+              "description": "The background color of the box.",
+              "name": "--esp-color-box-background"
             },
             {
-              "name": "url",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The url the breadcrumb points to",
-              "fieldName": "url"
+              "description": "Adds a layer in the background of the box. Intended for background images or gradients.",
+              "name": "--esp-box-background"
             },
             {
-              "name": "separator",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Used to override the SVG separator displayed after the\nbreadcrumb.",
-              "fieldName": "separator"
+              "description": "The opacity of the background layer.",
+              "name": "--esp-box-background-opacity"
             },
             {
-              "name": "is-last-element",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used internally to render the item using a label\ninstead of a link.",
-              "fieldName": "isLastElement"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "docPageTitle": {
-            "name": "Breadcrumb",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/breadcrumbs/breadcrumb",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Navigation",
-            "description": ""
-          },
-          "tagName": "esp-breadcrumb",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EspalierBreadcrumb",
-          "declaration": {
-            "name": "EspalierBreadcrumb",
-            "module": "dist/breadcrumbs/esp-breadcrumb.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-breadcrumb",
-          "declaration": {
-            "name": "EspalierBreadcrumb",
-            "module": "dist/breadcrumbs/esp-breadcrumb.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/breadcrumbs/esp-breadcrumbs.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Used to display breadcrumb navigation. By default, the breadcrumbs\nwill be separated by right-arrows, with the final item having a\ndown-arrow after it.\n[esp-breadcrumb](/components/breadcrumbs/breadcrumb) instances\nshould be placed in the default slot to build out the navigation.\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"></esp-breadcrumb>\n</esp-breadcrumbs>\n```\n\nCustom separators can be specified in the `<esp-breadcrumb>`:\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\">\n  </esp-breadcrumb>\n</esp-breadcrumbs>\n```",
-          "name": "EspalierBreadcrumbs",
-          "cssProperties": [
-            {
-              "description": "Set the color of the separator. It defaults to a bright complementary color. ```html <style> esp-breadcrumbs#custom-crumb { --esp-breadcrumb-separator-color: red; } </style> <esp-breadcrumbs id=\"custom-crumb\"> <esp-breadcrumb label=\"One\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Two\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Three\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\"> </esp-breadcrumb> </esp-breadcrumbs> ```",
-              "name": "--esp-breadcrumb-separator-color"
+              "description": "The padding inside the box. ```html <style> esp-root[scheme=\"light\"] { esp-box.box-with-bg { --esp-box-background: url(/assets/espalier-paper-texture.png) repeat; --esp-box-background-opacity: .5; } } esp-root[scheme=\"dark\"] { esp-box.box-with-bg { --esp-box-background: url(/assets/espalier-geometric-texture.png) repeat; --esp-box-background-opacity: .5; } } </style> <esp-box class=\"box-with-bg\" variant=\"analogous-right\"> <h2>Box with background image</h2> <p>I have a different generated background texture in dark mode than light mode.</p> </esp-box> ```",
+              "name": "--esp-size-box-padding"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -5414,17 +5280,29 @@
               }
             }
           ],
+          "cssParts": [
+            {
+              "description": "The box element. The default style is a padded element displayed as a box. Style the CSS part to create cards, forms, and other UI elements. Here is a card style: ```html <style> esp-box.card-box::part(box) { display: grid; grid-template-rows: min-content min-content; gap: var(--esp-size-padding); padding: 0; } esp-box.card-box header { background: oklch(from var(--esp-color-complementary) var(--esp-l-text) c h); color: oklch(from var(--esp-color-complementary) var(--esp-l-surface) c h); font-size: var(--esp-size-big-to-large); padding: var(--esp-size-padding); line-height: 1.1; font-family: var(--esp-font-headings); } esp-box.card-box div { padding: var(--esp-size-padding); } </style> <esp-box class=\"card-box\" variant=\"analogous-right\"> <header>Box as a card</header> <div> <p>Card content.</p> </div> </esp-box> ```",
+              "name": "box"
+            }
+          ],
           "slots": [
             {
-              "description": "`<esp-breadcrumb>` items to display.",
+              "description": "The default slot holds elements to display in the box. ```html <esp-box> <h2>Slotted Content</h2> <p>Goes in the box</p> </esp-box> ```",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "itemsSlot",
-              "privacy": "private"
+              "name": "fullScreen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box variant=\"triadic-right\">\n  <h2>Box things</h2>\n  <esp-box variant=\"complementary\">\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\" variant=\"complementary\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
+              "attribute": "full-screen"
             },
             {
               "kind": "field",
@@ -5885,33 +5763,16 @@
               }
             }
           ],
-          "superclass": {
-            "name": "EspalierElementBase",
-            "module": "dist/shared/esp-element-base.js"
-          },
-          "tagName": "esp-breadcrumbs",
-          "customElement": true,
-          "docPageTitle": {
-            "name": "Breadcrumbs",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/breadcrumbs",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Navigation",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Breadcrumbs",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "directions",
-            "description": ""
-          },
           "attributes": [
+            {
+              "name": "full-screen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box variant=\"triadic-right\">\n  <h2>Box things</h2>\n  <esp-box variant=\"complementary\">\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\" variant=\"complementary\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
+              "fieldName": "fullScreen"
+            },
             {
               "name": "scheme",
               "type": {
@@ -5938,6 +5799,36 @@
               }
             }
           ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "tagName": "esp-box",
+          "customElement": true,
+          "docPageTitle": {
+            "name": "Box",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/box",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Structure",
+            "description": ""
+          },
+          "menuOrder": {
+            "name": "3",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Box",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "box",
+            "description": ""
+          },
           "events": [
             {
               "name": "value-changed",
@@ -5955,122 +5846,127 @@
       "exports": [
         {
           "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/breadcrumbs/esp-breadcrumb.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "EspalierBreadcrumbs",
+          "name": "EspalierBox",
           "declaration": {
-            "name": "EspalierBreadcrumbs",
-            "module": "dist/breadcrumbs/esp-breadcrumbs.js"
+            "name": "EspalierBox",
+            "module": "dist/box/esp-box.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-breadcrumbs",
+          "name": "esp-box",
           "declaration": {
-            "name": "EspalierBreadcrumbs",
-            "module": "dist/breadcrumbs/esp-breadcrumbs.js"
+            "name": "EspalierBox",
+            "module": "dist/box/esp-box.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/burger/esp-burger.js",
+      "path": "dist/breadcrumbs/esp-breadcrumb.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
-          "name": "EspalierBurger",
+          "description": "Represents a single breadcrumb to use in\n[esp-breadcrumbs](/components/breadcrumbs/) to show breadcrumb\nnavigation.",
+          "name": "EspalierBreadcrumb",
           "cssProperties": [
             {
-              "description": "The color of the burger lines when closed.",
-              "name": "--esp-color-burger"
+              "description": "The text color of the breadcrumb link.",
+              "name": "--esp-breadcrumb-color"
             },
             {
-              "description": "The hover color of the burger lines when closed.",
-              "name": "--esp-color-burger-hover"
-            },
+              "description": "The text color on hover.",
+              "name": "--esp-breadcrumb-hover-color"
+            }
+          ],
+          "members": [
             {
-              "description": "The color of the burger lines when open.",
-              "name": "--esp-color-burger-opened"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The label to display in the breadcrumb",
+              "attribute": "label"
             },
             {
-              "description": "The hover color of the burger lines when open.",
-              "name": "--esp-color-burger-opened-hover"
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The url the breadcrumb points to",
+              "attribute": "url"
             },
-            {
-              "description": "The stroke width of the burger lines.",
-              "name": "--esp-size-burger-stroke"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "menuOpen",
+              "name": "separator",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "attribute": "menu-open"
+              "default": "\"\"",
+              "description": "Used to override the SVG separator displayed after the\nbreadcrumb.",
+              "attribute": "separator"
             },
             {
               "kind": "field",
-              "name": "presentationOnly",
+              "name": "isLastElement",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "attribute": "presentation-only"
+              "description": "Used internally to render the item using a label\ninstead of a link.",
+              "attribute": "is-last-element"
             },
             {
               "kind": "method",
-              "name": "toggleMenu"
+              "name": "_renderLink",
+              "privacy": "private"
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "name": "opened",
+              "name": "label",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
+              "default": "\"\"",
+              "description": "The label to display in the breadcrumb",
+              "fieldName": "label"
             },
             {
-              "name": "closed",
+              "name": "url",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
-            }
-          ],
-          "attributes": [
+              "default": "\"\"",
+              "description": "The url the breadcrumb points to",
+              "fieldName": "url"
+            },
             {
-              "name": "menu-open",
+              "name": "separator",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "fieldName": "menuOpen"
+              "default": "\"\"",
+              "description": "Used to override the SVG separator displayed after the\nbreadcrumb.",
+              "fieldName": "separator"
             },
             {
-              "name": "presentation-only",
+              "name": "is-last-element",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "fieldName": "presentationOnly"
+              "description": "Used internally to render the item using a label\ninstead of a link.",
+              "fieldName": "isLastElement"
             }
           ],
           "superclass": {
@@ -6078,72 +5974,52 @@
             "package": "lit"
           },
           "docPageTitle": {
-            "name": "Burger",
+            "name": "Breadcrumb",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/burger",
+            "name": "/components/breadcrumbs/breadcrumb",
             "description": ""
           },
           "menuGroup": {
-            "name": "Interaction",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Burger",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "burger",
+            "name": "Navigation",
             "description": ""
           },
-          "tagName": "esp-burger",
+          "tagName": "esp-breadcrumb",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierBurger",
+          "name": "EspalierBreadcrumb",
           "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
+            "name": "EspalierBreadcrumb",
+            "module": "dist/breadcrumbs/esp-breadcrumb.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-burger",
+          "name": "esp-breadcrumb",
           "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
+            "name": "EspalierBreadcrumb",
+            "module": "dist/breadcrumbs/esp-breadcrumb.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/box/esp-box.js",
+      "path": "dist/breadcrumbs/esp-breadcrumbs.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Used as a base to group context visually. `esp-box`\nhas a css part of `box` that can be styled to create cards,\nforms, and other UI elements.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <p>Things grouped visually.</p>\n</esp-box>\n```",
-          "name": "EspalierBox",
+          "description": "Used to display breadcrumb navigation. By default, the breadcrumbs\nwill be separated by right-arrows, with the final item having a\ndown-arrow after it.\n[esp-breadcrumb](/components/breadcrumbs/breadcrumb) instances\nshould be placed in the default slot to build out the navigation.\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"></esp-breadcrumb>\n</esp-breadcrumbs>\n```\n\nCustom separators can be specified in the `<esp-breadcrumb>`:\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\">\n  </esp-breadcrumb>\n</esp-breadcrumbs>\n```",
+          "name": "EspalierBreadcrumbs",
           "cssProperties": [
             {
-              "description": "The background color of the box.",
-              "name": "--esp-color-box-background"
-            },
-            {
-              "description": "Adds a layer in the background of the box. Intended for background images or gradients.",
-              "name": "--esp-box-background"
-            },
-            {
-              "description": "The opacity of the background layer.",
-              "name": "--esp-box-background-opacity"
-            },
-            {
-              "description": "The padding inside the box. ```html <style> esp-root[scheme=\"light\"] { esp-box.box-with-bg { --esp-box-background: url(/assets/espalier-paper-texture.png) repeat; --esp-box-background-opacity: .5; } } esp-root[scheme=\"dark\"] { esp-box.box-with-bg { --esp-box-background: url(/assets/espalier-geometric-texture.png) repeat; --esp-box-background-opacity: .5; } } </style> <esp-box class=\"box-with-bg\" variant=\"analogous-right\"> <h2>Box with background image</h2> <p>I have a different generated background texture in dark mode than light mode.</p> </esp-box> ```",
-              "name": "--esp-size-box-padding"
+              "description": "Set the color of the separator. It defaults to a bright complementary color. ```html <style> esp-breadcrumbs#custom-crumb { --esp-breadcrumb-separator-color: red; } </style> <esp-breadcrumbs id=\"custom-crumb\"> <esp-breadcrumb label=\"One\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Two\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Three\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\"> </esp-breadcrumb> </esp-breadcrumbs> ```",
+              "name": "--esp-breadcrumb-separator-color"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -6202,29 +6078,17 @@
               }
             }
           ],
-          "cssParts": [
-            {
-              "description": "The box element. The default style is a padded element displayed as a box. Style the CSS part to create cards, forms, and other UI elements. Here is a card style: ```html <style> esp-box.card-box::part(box) { display: grid; grid-template-rows: min-content min-content; gap: var(--esp-size-padding); padding: 0; } esp-box.card-box header { background: oklch(from var(--esp-color-complementary) var(--esp-l-text) c h); color: oklch(from var(--esp-color-complementary) var(--esp-l-surface) c h); font-size: var(--esp-size-big-to-large); padding: var(--esp-size-padding); line-height: 1.1; font-family: var(--esp-font-headings); } esp-box.card-box div { padding: var(--esp-size-padding); } </style> <esp-box class=\"card-box\" variant=\"analogous-right\"> <header>Box as a card</header> <div> <p>Card content.</p> </div> </esp-box> ```",
-              "name": "box"
-            }
-          ],
           "slots": [
             {
-              "description": "The default slot holds elements to display in the box. ```html <esp-box> <h2>Slotted Content</h2> <p>Goes in the box</p> </esp-box> ```",
+              "description": "`<esp-breadcrumb>` items to display.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "fullScreen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box variant=\"triadic-right\">\n  <h2>Box things</h2>\n  <esp-box variant=\"complementary\">\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\" variant=\"complementary\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
-              "attribute": "full-screen"
+              "name": "itemsSlot",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -6685,16 +6549,33 @@
               }
             }
           ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "tagName": "esp-breadcrumbs",
+          "customElement": true,
+          "docPageTitle": {
+            "name": "Breadcrumbs",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/breadcrumbs",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Navigation",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Breadcrumbs",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "directions",
+            "description": ""
+          },
           "attributes": [
-            {
-              "name": "full-screen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box variant=\"triadic-right\">\n  <h2>Box things</h2>\n  <esp-box variant=\"complementary\">\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\" variant=\"complementary\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
-              "fieldName": "fullScreen"
-            },
             {
               "name": "scheme",
               "type": {
@@ -6721,65 +6602,184 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/breadcrumbs/esp-breadcrumb.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EspalierBreadcrumbs",
+          "declaration": {
+            "name": "EspalierBreadcrumbs",
+            "module": "dist/breadcrumbs/esp-breadcrumbs.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-breadcrumbs",
+          "declaration": {
+            "name": "EspalierBreadcrumbs",
+            "module": "dist/breadcrumbs/esp-breadcrumbs.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/burger/esp-burger.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
+          "name": "EspalierBurger",
+          "cssProperties": [
+            {
+              "description": "The color of the burger lines when closed.",
+              "name": "--esp-color-burger"
+            },
+            {
+              "description": "The hover color of the burger lines when closed.",
+              "name": "--esp-color-burger-hover"
+            },
+            {
+              "description": "The color of the burger lines when open.",
+              "name": "--esp-color-burger-opened"
+            },
+            {
+              "description": "The hover color of the burger lines when open.",
+              "name": "--esp-color-burger-opened-hover"
+            },
+            {
+              "description": "The stroke width of the burger lines.",
+              "name": "--esp-size-burger-stroke"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "menuOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "attribute": "menu-open"
+            },
+            {
+              "kind": "field",
+              "name": "presentationOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "attribute": "presentation-only"
+            },
+            {
+              "kind": "method",
+              "name": "toggleMenu"
+            }
+          ],
+          "events": [
+            {
+              "name": "opened",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
+            },
+            {
+              "name": "closed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "menu-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "fieldName": "menuOpen"
+            },
+            {
+              "name": "presentation-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "fieldName": "presentationOnly"
+            }
+          ],
           "superclass": {
-            "name": "EspalierElementBase",
-            "module": "dist/shared/esp-element-base.js"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "esp-box",
-          "customElement": true,
           "docPageTitle": {
-            "name": "Box",
+            "name": "Burger",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/box",
+            "name": "/components/burger",
             "description": ""
           },
           "menuGroup": {
-            "name": "Structure",
-            "description": ""
-          },
-          "menuOrder": {
-            "name": "3",
+            "name": "Interaction",
             "description": ""
           },
           "menuLabel": {
-            "name": "Box",
+            "name": "Burger",
             "description": ""
           },
           "menuIcon": {
-            "name": "box",
+            "name": "burger",
             "description": ""
           },
-          "events": [
-            {
-              "name": "value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          "tagName": "esp-burger",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierBox",
+          "name": "EspalierBurger",
           "declaration": {
-            "name": "EspalierBox",
-            "module": "dist/box/esp-box.js"
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-box",
+          "name": "esp-burger",
           "declaration": {
-            "name": "EspalierBox",
-            "module": "dist/box/esp-box.js"
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
           }
         }
       ]
@@ -53182,462 +53182,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/calendar-grid.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "parseDateBound",
-          "return": {
-            "type": {
-              "text": "Temporal.PlainDate | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "iso",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Safely parse an ISO date string, returning `null` on failure."
-        },
-        {
-          "kind": "function",
-          "name": "isDateDisabled",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "date",
-              "type": {
-                "text": "Temporal.PlainDate"
-              }
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Return `true` if the date falls outside the min/max range."
-        },
-        {
-          "kind": "function",
-          "name": "getSelectedDate",
-          "return": {
-            "type": {
-              "text": "Temporal.PlainDate | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            }
-          ],
-          "description": "Extract the single selected date from a parsed value (date / datetime only)."
-        },
-        {
-          "kind": "function",
-          "name": "getEffectiveRange",
-          "return": {
-            "type": {
-              "text": "{ start: Temporal.PlainDate | null; end: Temporal.PlainDate | null }"
-            }
-          },
-          "parameters": [
-            {
-              "name": "mode",
-              "type": {
-                "text": "DatePickerMode"
-              }
-            },
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            },
-            {
-              "name": "rangeAnchor",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangePreview",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Compute the effective start/end for range grid highlighting.\n\nDuring the `start` phase (anchor set, waiting for second click),\nthe preview hover date is used as the tentative end. The pair\nis always normalised so start <= end."
-        },
-        {
-          "kind": "function",
-          "name": "generateCalendarGrid",
-          "return": {
-            "type": {
-              "text": "CalendarDay[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "month",
-              "type": {
-                "text": "Temporal.PlainYearMonth"
-              }
-            },
-            {
-              "name": "selectedDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangeStart",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangeEnd",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "minDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "maxDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Generate a 6x7 calendar grid for the given month. Each cell\ncarries flags for rendering (today, selected, range, disabled,\noutside-month, etc.)."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "parseDateBound",
-          "declaration": {
-            "name": "parseDateBound",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isDateDisabled",
-          "declaration": {
-            "name": "isDateDisabled",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getSelectedDate",
-          "declaration": {
-            "name": "getSelectedDate",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getEffectiveRange",
-          "declaration": {
-            "name": "getEffectiveRange",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "generateCalendarGrid",
-          "declaration": {
-            "name": "generateCalendarGrid",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/constants.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "GRID_ROWS",
-          "type": {
-            "text": "number"
-          },
-          "default": "6"
-        },
-        {
-          "kind": "variable",
-          "name": "GRID_COLS",
-          "type": {
-            "text": "number"
-          },
-          "default": "7"
-        },
-        {
-          "kind": "variable",
-          "name": "GRID_SIZE"
-        },
-        {
-          "kind": "variable",
-          "name": "WEEKDAY_LABELS",
-          "type": {
-            "text": "array"
-          },
-          "default": "[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"]",
-          "description": "Monday-start day-of-week headers."
-        },
-        {
-          "kind": "variable",
-          "name": "MONTH_NAMES",
-          "type": {
-            "text": "array"
-          },
-          "default": "[ \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", ]",
-          "description": "Month names for the header."
-        },
-        {
-          "kind": "variable",
-          "name": "HOURS_12",
-          "description": "Hours 1–12 for the 12-hour clock picker."
-        },
-        {
-          "kind": "variable",
-          "name": "MINUTES_60",
-          "description": "Minutes 0–59 for the minute picker."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GRID_ROWS",
-          "declaration": {
-            "name": "GRID_ROWS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GRID_COLS",
-          "declaration": {
-            "name": "GRID_COLS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GRID_SIZE",
-          "declaration": {
-            "name": "GRID_SIZE",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WEEKDAY_LABELS",
-          "declaration": {
-            "name": "WEEKDAY_LABELS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MONTH_NAMES",
-          "declaration": {
-            "name": "MONTH_NAMES",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HOURS_12",
-          "declaration": {
-            "name": "HOURS_12",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MINUTES_60",
-          "declaration": {
-            "name": "MINUTES_60",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/parsing.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "parseValue",
-          "return": {
-            "type": {
-              "text": "ParsedValue"
-            }
-          },
-          "parameters": [
-            {
-              "name": "raw",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "mode",
-              "type": {
-                "text": "DatePickerMode"
-              }
-            }
-          ],
-          "description": "Parse a raw ISO 8601 value string into a structured `ParsedValue`\nbased on the picker mode. Returns `{ kind: \"none\" }` for empty or\nunparseable input."
-        },
-        {
-          "kind": "function",
-          "name": "formatDate",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "d",
-              "type": {
-                "text": "Temporal.PlainDate"
-              }
-            }
-          ],
-          "description": "Format a `PlainDate` as \"Month Day, Year\"."
-        },
-        {
-          "kind": "function",
-          "name": "formatTime",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "t",
-              "type": {
-                "text": "Temporal.PlainTime"
-              }
-            }
-          ],
-          "description": "Format a `PlainTime` as \"H:MM AM/PM\"."
-        },
-        {
-          "kind": "function",
-          "name": "displayValue",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            }
-          ],
-          "description": "Build the human-readable display string for the input field\nfrom a parsed value."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "parseValue",
-          "declaration": {
-            "name": "parseValue",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatDate",
-          "declaration": {
-            "name": "formatDate",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatTime",
-          "declaration": {
-            "name": "formatTime",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "displayValue",
-          "declaration": {
-            "name": "displayValue",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "datePickerStyles",
-          "default": "css` /* ── Error state ─────────────────────────────────── */ .temporal-error { font-family: var(--esp-font-body); font-size: var(--esp-type-small); color: var(--esp-color-danger-text); padding: var(--esp-size-padding); } /* ── Trigger field ───────────────────────────────── */ .esp-field { display: grid; grid-template-columns: 1fr min-content; cursor: pointer; > input.esp-input { cursor: pointer; width: auto; } > .field-icon { display: grid; place-content: center; cursor: pointer; > svg { height: calc(1.2 * var(--esp-size-font)); width: calc(1.2 * var(--esp-size-font)); margin: 0 var(--esp-size-tiny); } } } /* ── Popover shell (native top-layer) ────────────── */ .picker-popover { position: fixed; inset: unset; margin: 0; padding: var(--esp-size-small); border-radius: var(--esp-size-border-radius); border: 1px solid var(--esp-color-border); background: var(--esp-color-layer-1); box-shadow: 0 4px 16px var(--esp-color-shadow); color: var(--esp-color-text); font-family: var(--esp-font-body); font-size: var(--esp-size-font); opacity: 0; transition: opacity 150ms ease-in; overflow: visible; } .picker-popover.visible { opacity: 1; } /* ── Calendar ────────────────────────────────────── */ .calendar { display: flex; flex-direction: column; gap: var(--esp-size-tiny); user-select: none; overflow: hidden; } .cal-body { will-change: transform; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--esp-size-tiny); } .cal-title { font-weight: bold; font-size: var(--esp-type-normal); color: var(--esp-color-headings); } .nav-btn { display: grid; place-content: center; background: none; border: none; cursor: pointer; padding: var(--esp-size-tiny); border-radius: var(--esp-size-border-radius); color: var(--esp-color-text); transition: background-color 120ms ease; > svg { height: var(--esp-size-normal); width: var(--esp-size-normal); } &:hover { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; } } /* ── Weekday labels ──────────────────────────────── */ .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .weekday-label { font-size: var(--esp-type-tiny); font-weight: 600; color: var(--esp-color-headings); text-decoration: none; padding: var(--esp-size-tiny) 0; } /* ── Day grid ────────────────────────────────────── */ .day-grid { display: flex; flex-direction: column; } /* Show the focused-day ring only when the grid itself contains focus, so it disappears when the user tabs to the nav arrows or time picker. */ .day-grid:focus-within .day-cell.focused { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } .day-row { display: grid; grid-template-columns: repeat(7, 1fr); } /* ── Day cell ────────────────────────────────────── */ .day-cell { --_cell-size: 2.4em; position: relative; display: grid; place-content: center; width: var(--_cell-size); height: var(--_cell-size); border: none; border-radius: var(--esp-size-border-radius); background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--esp-color-text); transition: background-color 100ms ease, color 100ms ease; &:hover:not(.disabled):not(.selected) { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } /* Outside month — dim */ &.outside-month { opacity: 0.38; } /* Today ring */ &.today { font-weight: bold; box-shadow: inset 0 0 0 1px var(--esp-color-border); border-radius: var(--esp-size-border-radius); } /* Selected / range endpoints */ &.selected { background-color: var(--esp-color-layer-3); color: var(--esp-color-action-text); font-weight: bold; } /* Range span highlight — washed-out brand colour */ &.in-range { background-color: oklch(from var(--esp-color-layer-3) calc(l + 0.15) calc(c * 0.4) h); border-radius: 0; } &.range-start { border-radius: var(--esp-size-border-radius) 0 0 var(--esp-size-border-radius); } &.range-end { border-radius: 0 var(--esp-size-border-radius) var(--esp-size-border-radius) 0; } /* Disabled */ &.disabled { opacity: 0.3; cursor: not-allowed; } } /* ── Time picker ─────────────────────────────────── */ .time-picker { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--esp-size-tiny); padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); white-space: nowrap; /* Push the action buttons to the right edge */ > esp-button:first-of-type { margin-left: auto; } } /* Only-time mode: no top border */ :host([mode=\"time\"]) .time-picker { border-top: none; margin-top: 0; padding-top: 0; } .popover-actions { display: flex; gap: var(--esp-size-tiny); align-items: center; justify-content: flex-end; padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); } .time-sep { font-size: var(--esp-type-medium); font-weight: bold; color: var(--esp-color-headings); padding: 0 2px; } `",
-          "description": "Component-specific styles for `esp-date-picker`."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "datePickerStyles",
-          "declaration": {
-            "name": "datePickerStyles",
-            "module": "dist/date-picker/helpers/styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/types.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist/tree/esp-tree-item.js",
@@ -57506,6 +57050,462 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/calendar-grid.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseDateBound",
+          "return": {
+            "type": {
+              "text": "Temporal.PlainDate | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "iso",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Safely parse an ISO date string, returning `null` on failure."
+        },
+        {
+          "kind": "function",
+          "name": "isDateDisabled",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "date",
+              "type": {
+                "text": "Temporal.PlainDate"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Return `true` if the date falls outside the min/max range."
+        },
+        {
+          "kind": "function",
+          "name": "getSelectedDate",
+          "return": {
+            "type": {
+              "text": "Temporal.PlainDate | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            }
+          ],
+          "description": "Extract the single selected date from a parsed value (date / datetime only)."
+        },
+        {
+          "kind": "function",
+          "name": "getEffectiveRange",
+          "return": {
+            "type": {
+              "text": "{ start: Temporal.PlainDate | null; end: Temporal.PlainDate | null }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "mode",
+              "type": {
+                "text": "DatePickerMode"
+              }
+            },
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            },
+            {
+              "name": "rangeAnchor",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangePreview",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Compute the effective start/end for range grid highlighting.\n\nDuring the `start` phase (anchor set, waiting for second click),\nthe preview hover date is used as the tentative end. The pair\nis always normalised so start <= end."
+        },
+        {
+          "kind": "function",
+          "name": "generateCalendarGrid",
+          "return": {
+            "type": {
+              "text": "CalendarDay[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "month",
+              "type": {
+                "text": "Temporal.PlainYearMonth"
+              }
+            },
+            {
+              "name": "selectedDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangeStart",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangeEnd",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "minDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "maxDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Generate a 6x7 calendar grid for the given month. Each cell\ncarries flags for rendering (today, selected, range, disabled,\noutside-month, etc.)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseDateBound",
+          "declaration": {
+            "name": "parseDateBound",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDateDisabled",
+          "declaration": {
+            "name": "isDateDisabled",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getSelectedDate",
+          "declaration": {
+            "name": "getSelectedDate",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getEffectiveRange",
+          "declaration": {
+            "name": "getEffectiveRange",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "generateCalendarGrid",
+          "declaration": {
+            "name": "generateCalendarGrid",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/constants.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID_ROWS",
+          "type": {
+            "text": "number"
+          },
+          "default": "6"
+        },
+        {
+          "kind": "variable",
+          "name": "GRID_COLS",
+          "type": {
+            "text": "number"
+          },
+          "default": "7"
+        },
+        {
+          "kind": "variable",
+          "name": "GRID_SIZE"
+        },
+        {
+          "kind": "variable",
+          "name": "WEEKDAY_LABELS",
+          "type": {
+            "text": "array"
+          },
+          "default": "[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"]",
+          "description": "Monday-start day-of-week headers."
+        },
+        {
+          "kind": "variable",
+          "name": "MONTH_NAMES",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", ]",
+          "description": "Month names for the header."
+        },
+        {
+          "kind": "variable",
+          "name": "HOURS_12",
+          "description": "Hours 1–12 for the 12-hour clock picker."
+        },
+        {
+          "kind": "variable",
+          "name": "MINUTES_60",
+          "description": "Minutes 0–59 for the minute picker."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID_ROWS",
+          "declaration": {
+            "name": "GRID_ROWS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GRID_COLS",
+          "declaration": {
+            "name": "GRID_COLS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GRID_SIZE",
+          "declaration": {
+            "name": "GRID_SIZE",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WEEKDAY_LABELS",
+          "declaration": {
+            "name": "WEEKDAY_LABELS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MONTH_NAMES",
+          "declaration": {
+            "name": "MONTH_NAMES",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HOURS_12",
+          "declaration": {
+            "name": "HOURS_12",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MINUTES_60",
+          "declaration": {
+            "name": "MINUTES_60",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/parsing.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseValue",
+          "return": {
+            "type": {
+              "text": "ParsedValue"
+            }
+          },
+          "parameters": [
+            {
+              "name": "raw",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "DatePickerMode"
+              }
+            }
+          ],
+          "description": "Parse a raw ISO 8601 value string into a structured `ParsedValue`\nbased on the picker mode. Returns `{ kind: \"none\" }` for empty or\nunparseable input."
+        },
+        {
+          "kind": "function",
+          "name": "formatDate",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "d",
+              "type": {
+                "text": "Temporal.PlainDate"
+              }
+            }
+          ],
+          "description": "Format a `PlainDate` as \"Month Day, Year\"."
+        },
+        {
+          "kind": "function",
+          "name": "formatTime",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "t",
+              "type": {
+                "text": "Temporal.PlainTime"
+              }
+            }
+          ],
+          "description": "Format a `PlainTime` as \"H:MM AM/PM\"."
+        },
+        {
+          "kind": "function",
+          "name": "displayValue",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            }
+          ],
+          "description": "Build the human-readable display string for the input field\nfrom a parsed value."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseValue",
+          "declaration": {
+            "name": "parseValue",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formatDate",
+          "declaration": {
+            "name": "formatDate",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formatTime",
+          "declaration": {
+            "name": "formatTime",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "displayValue",
+          "declaration": {
+            "name": "displayValue",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "datePickerStyles",
+          "default": "css` /* ── Error state ─────────────────────────────────── */ .temporal-error { font-family: var(--esp-font-body); font-size: var(--esp-type-small); color: var(--esp-color-danger-text); padding: var(--esp-size-padding); } /* ── Trigger field ───────────────────────────────── */ .esp-field { display: grid; grid-template-columns: 1fr min-content; cursor: pointer; > input.esp-input { cursor: pointer; width: auto; } > .field-icon { display: grid; place-content: center; cursor: pointer; > svg { height: calc(1.2 * var(--esp-size-font)); width: calc(1.2 * var(--esp-size-font)); margin: 0 var(--esp-size-tiny); } } } /* ── Popover shell (native top-layer) ────────────── */ .picker-popover { position: fixed; inset: unset; margin: 0; padding: var(--esp-size-small); border-radius: var(--esp-size-border-radius); border: 1px solid var(--esp-color-border); background: var(--esp-color-layer-1); box-shadow: 0 4px 16px var(--esp-color-shadow); color: var(--esp-color-text); font-family: var(--esp-font-body); font-size: var(--esp-size-font); opacity: 0; transition: opacity 150ms ease-in; overflow: visible; } .picker-popover.visible { opacity: 1; } /* ── Calendar ────────────────────────────────────── */ .calendar { display: flex; flex-direction: column; gap: var(--esp-size-tiny); user-select: none; overflow: hidden; } .cal-body { will-change: transform; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--esp-size-tiny); } .cal-title { font-weight: bold; font-size: var(--esp-type-normal); color: var(--esp-color-headings); } .nav-btn { display: grid; place-content: center; background: none; border: none; cursor: pointer; padding: var(--esp-size-tiny); border-radius: var(--esp-size-border-radius); color: var(--esp-color-text); transition: background-color 120ms ease; > svg { height: var(--esp-size-normal); width: var(--esp-size-normal); } &:hover { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; } } /* ── Weekday labels ──────────────────────────────── */ .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .weekday-label { font-size: var(--esp-type-tiny); font-weight: 600; color: var(--esp-color-headings); text-decoration: none; padding: var(--esp-size-tiny) 0; } /* ── Day grid ────────────────────────────────────── */ .day-grid { display: flex; flex-direction: column; } /* Show the focused-day ring only when the grid itself contains focus, so it disappears when the user tabs to the nav arrows or time picker. */ .day-grid:focus-within .day-cell.focused { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } .day-row { display: grid; grid-template-columns: repeat(7, 1fr); } /* ── Day cell ────────────────────────────────────── */ .day-cell { --_cell-size: 2.4em; position: relative; display: grid; place-content: center; width: var(--_cell-size); height: var(--_cell-size); border: none; border-radius: var(--esp-size-border-radius); background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--esp-color-text); transition: background-color 100ms ease, color 100ms ease; &:hover:not(.disabled):not(.selected) { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } /* Outside month — dim */ &.outside-month { opacity: 0.38; } /* Today ring */ &.today { font-weight: bold; box-shadow: inset 0 0 0 1px var(--esp-color-border); border-radius: var(--esp-size-border-radius); } /* Selected / range endpoints */ &.selected { background-color: var(--esp-color-layer-3); color: var(--esp-color-action-text); font-weight: bold; } /* Range span highlight — washed-out brand colour */ &.in-range { background-color: oklch(from var(--esp-color-layer-3) calc(l + 0.15) calc(c * 0.4) h); border-radius: 0; } &.range-start { border-radius: var(--esp-size-border-radius) 0 0 var(--esp-size-border-radius); } &.range-end { border-radius: 0 var(--esp-size-border-radius) var(--esp-size-border-radius) 0; } /* Disabled */ &.disabled { opacity: 0.3; cursor: not-allowed; } } /* ── Time picker ─────────────────────────────────── */ .time-picker { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--esp-size-tiny); padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); white-space: nowrap; /* Push the action buttons to the right edge */ > esp-button:first-of-type { margin-left: auto; } } /* Only-time mode: no top border */ :host([mode=\"time\"]) .time-picker { border-top: none; margin-top: 0; padding-top: 0; } .popover-actions { display: flex; gap: var(--esp-size-tiny); align-items: center; justify-content: flex-end; padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); } .time-sep { font-size: var(--esp-type-medium); font-weight: bold; color: var(--esp-color-headings); padding: 0 2px; } `",
+          "description": "Component-specific styles for `esp-date-picker`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "datePickerStyles",
+          "declaration": {
+            "name": "datePickerStyles",
+            "module": "dist/date-picker/helpers/styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/types.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/root/helpers/compute-theme-properties.js",