@jsekulowicz/ds-components 0.1.0 → 0.2.0

package/custom-elements.json

@@ -77,6 +77,54 @@
             "module": "./atoms/badge/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "DsDivider",
+          "declaration": {
+            "name": "DsDivider",
+            "module": "./atoms/divider/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DividerOrientation",
+          "declaration": {
+            "name": "DividerOrientation",
+            "module": "./atoms/divider/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DsList",
+          "declaration": {
+            "name": "DsList",
+            "module": "./atoms/list/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DsListItem",
+          "declaration": {
+            "name": "DsListItem",
+            "module": "./atoms/list/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ListVariant",
+          "declaration": {
+            "name": "ListVariant",
+            "module": "./atoms/list/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ListDensity",
+          "declaration": {
+            "name": "ListDensity",
+            "module": "./atoms/list/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DsIcon",
@@ -1068,7 +1116,7 @@
         {
           "kind": "variable",
           "name": "breadcrumbItemStyles",
-          "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ds-shadow-focus); } .current { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-1) var(--ds-space-2); } .separator { display: inline-flex; color: var(--ds-color-fg-subtle); font-size: 0.875em; } `"
+          "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; padding: var(--ds-space-1) 0; border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ds-shadow-focus); } .current { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-1) 0; } .separator { display: inline-flex; color: var(--ds-color-fg-subtle); font-size: 0.875em; } `"
         }
       ],
       "exports": [
@@ -1475,7 +1523,7 @@
         {
           "kind": "variable",
           "name": "buttonStyles",
-          "default": "css` :host { display: inline-flex; vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-5); height: var(--ds-size-md); min-width: var(--ds-size-md); border-radius: var(--ds-radius-sm); border: 1px solid transparent; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); letter-spacing: var(--ds-letter-spacing-normal); line-height: 1; cursor: pointer; background: transparent; color: var(--ds-color-fg); transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard), transform var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ds-shadow-focus); } .btn:active:not([aria-disabled='true']) { transform: translateY(1px); } :host([disabled]) .btn { opacity: 0.45; cursor: not-allowed; } :host([loading]) .btn { cursor: wait; } .spinner { width: 1.25rem; height: 1.25rem; flex-shrink: 0; animation: ds-btn-spin 0.75s linear infinite; } @keyframes ds-btn-spin { to { transform: rotate(360deg); } } :host([variant='primary']) .btn { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); } :host([variant='primary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-accent-hover); } :host([variant='primary']) .btn:active:not([aria-disabled='true']) { background: var(--ds-color-accent-active); } :host([variant='secondary']) .btn { background: transparent; color: var(--ds-color-fg); border-color: var(--ds-color-border-strong); } :host([variant='secondary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='ghost']) .btn { background: transparent; color: var(--ds-color-fg); } :host([variant='ghost']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='danger']) .btn { background: var(--ds-color-danger); color: var(--ds-color-accent-fg); } :host([size='sm']) .btn { height: var(--ds-size-sm); padding: 0 var(--ds-space-4); font-size: var(--ds-font-size-xs); } :host([size='lg']) .btn { height: var(--ds-size-lg); padding: 0 var(--ds-space-6); font-size: var(--ds-font-size-md); } :host([full-width]) { display: flex; width: 100%; } :host([full-width]) .btn { width: 100%; } `"
+          "default": "css` :host { display: inline-flex; vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); height: var(--ds-size-md); min-width: var(--ds-size-md); border-radius: var(--ds-radius-sm); border: 1px solid transparent; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); letter-spacing: var(--ds-letter-spacing-normal); line-height: 1; cursor: pointer; background: transparent; color: var(--ds-color-fg); transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard), transform var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ds-shadow-focus); } .btn:active:not([aria-disabled='true']) { transform: translateY(1px); } :host([disabled]) .btn { opacity: 0.45; cursor: not-allowed; } :host([loading]) .btn { cursor: wait; } .spinner { width: 1.25rem; height: 1.25rem; flex-shrink: 0; animation: ds-btn-spin 0.75s linear infinite; } @keyframes ds-btn-spin { to { transform: rotate(360deg); } } :host([variant='primary']) .btn { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); } :host([variant='primary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-accent-hover); } :host([variant='primary']) .btn:active:not([aria-disabled='true']) { background: var(--ds-color-accent-active); } :host([variant='secondary']) .btn { background: transparent; color: var(--ds-color-fg); border-color: var(--ds-color-border-strong); } :host([variant='secondary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='ghost']) .btn { background: transparent; color: var(--ds-color-fg); } :host([variant='ghost']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='danger']) .btn { background: var(--ds-color-danger); color: var(--ds-color-accent-fg); } :host([size='sm']) .btn { height: var(--ds-size-sm); font-size: var(--ds-font-size-xs); } :host([size='lg']) .btn { height: var(--ds-size-lg); font-size: var(--ds-font-size-md); } :host([full-width]) { display: flex; width: 100%; } :host([full-width]) .btn { width: 100%; } `"
         }
       ],
       "exports": [
@@ -2258,6 +2306,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/divider/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-divider",
+          "declaration": {
+            "name": "DsDivider",
+            "module": "/src/atoms/divider/divider.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/divider/divider.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "dividerStyles",
+          "default": "css` :host { display: block; color: var(--ds-color-border); margin-block: var(--ds-space-3); } :host([orientation='vertical']) { display: inline-block; height: 1em; align-self: stretch; margin-block: 0; margin-inline: var(--ds-space-3); } [part='line'] { display: block; background: currentColor; width: 100%; height: 1px; } :host([orientation='vertical']) [part='line'] { width: 1px; height: 100%; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dividerStyles",
+          "declaration": {
+            "name": "dividerStyles",
+            "module": "src/atoms/divider/divider.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/divider/divider.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DsDivider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "DividerOrientation"
+              },
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "DividerOrientation"
+              },
+              "description": "'horizontal' (default) or 'vertical'.",
+              "name": "orientation",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "DsElement",
+            "package": "@jsekulowicz/ds-core"
+          },
+          "tagName": "ds-divider",
+          "customElement": true,
+          "summary": "A thin separator line. Horizontal by default, can be vertical."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsDivider",
+          "declaration": {
+            "name": "DsDivider",
+            "module": "src/atoms/divider/divider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/divider/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsDivider",
+          "declaration": {
+            "name": "DsDivider",
+            "module": "./divider.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DividerOrientation",
+          "declaration": {
+            "name": "DividerOrientation",
+            "module": "./divider.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/icon/define.ts",
@@ -2673,6 +2831,258 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-list",
+          "declaration": {
+            "name": "DsList",
+            "module": "/src/atoms/list/list.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-list-item",
+          "declaration": {
+            "name": "DsListItem",
+            "module": "/src/atoms/list/list-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsList",
+          "declaration": {
+            "name": "DsList",
+            "module": "./list.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ListVariant",
+          "declaration": {
+            "name": "ListVariant",
+            "module": "./list.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ListDensity",
+          "declaration": {
+            "name": "ListDensity",
+            "module": "./list.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DsListItem",
+          "declaration": {
+            "name": "DsListItem",
+            "module": "./list-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/list-item.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "listItemStyles",
+          "default": "css` :host { display: block; } li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); background: transparent; } :host-context(ds-list[density='compact']) li, :host([compact]) li { padding: var(--ds-space-1) var(--ds-space-3); } .leading, .trailing { display: inline-flex; align-items: center; flex-shrink: 0; } [hidden] { display: none; } .content { min-width: 0; display: flex; align-items: center; gap: var(--ds-space-2); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "listItemStyles",
+          "declaration": {
+            "name": "listItemStyles",
+            "module": "src/atoms/list/list-item.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/list-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DsListItem",
+          "slots": [
+            {
+              "description": "Optional content rendered before the main label (avatar, swatch, icon).",
+              "name": "leading"
+            },
+            {
+              "description": "Main label or input.",
+              "name": "default"
+            },
+            {
+              "description": "Optional trailing content (action button, value, chevron).",
+              "name": "trailing"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_hasLeading",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasTrailing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#onLeadingSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onTrailingSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "DsElement",
+            "package": "@jsekulowicz/ds-core"
+          },
+          "tagName": "ds-list-item",
+          "customElement": true,
+          "summary": "A single row in a `ds-list`. Three slots: leading / default / trailing."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsListItem",
+          "declaration": {
+            "name": "DsListItem",
+            "module": "src/atoms/list/list-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/list.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "listStyles",
+          "default": "css` :host { display: block; } ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } :host([variant='bordered']) ul { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } :host([variant='bordered']) ::slotted(ds-list-item:not(:last-of-type)) { border-bottom: 1px solid var(--ds-color-border-subtle); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "listStyles",
+          "declaration": {
+            "name": "listStyles",
+            "module": "src/atoms/list/list.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/list/list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DsList",
+          "slots": [
+            {
+              "description": "One or more `ds-list-item` children.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ListVariant"
+              },
+              "default": "'bordered'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "ListDensity"
+              },
+              "default": "'default'",
+              "attribute": "density",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "ListVariant"
+              },
+              "description": "`plain` (no surrounding border) or `bordered` (default).",
+              "name": "variant",
+              "default": "'bordered'",
+              "fieldName": "variant"
+            },
+            {
+              "type": {
+                "text": "ListDensity"
+              },
+              "description": "`default` or `compact`.",
+              "name": "density",
+              "default": "'default'",
+              "fieldName": "density"
+            }
+          ],
+          "superclass": {
+            "name": "DsElement",
+            "package": "@jsekulowicz/ds-core"
+          },
+          "tagName": "ds-list",
+          "customElement": true,
+          "summary": "Vertical stack of `ds-list-item` rows, optionally bordered with hairline dividers."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsList",
+          "declaration": {
+            "name": "DsList",
+            "module": "src/atoms/list/list.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/menu/define.ts",
@@ -5875,7 +6285,7 @@
         {
           "kind": "variable",
           "name": "tablePaginationStyles",
-          "default": "css` :host { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-1); } .list { display: flex; align-items: center; gap: var(--ds-space-1); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } `"
+          "default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-1); } .list { display: flex; align-items: center; gap: var(--ds-space-1); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } `"
         }
       ],
       "exports": [
@@ -7624,7 +8034,7 @@
         {
           "kind": "variable",
           "name": "tooltipStyles",
-          "default": "css` :host { display: inline-flex; position: relative; } .anchor { position: relative; display: inline-flex; } .tooltip { /* Override UA popover defaults so JS-set top/left/transform stay authoritative. */ position: fixed; inset: auto; margin: 0; border: none; width: max-content; height: auto; overflow: visible; z-index: var(--ds-z-index-tooltip, 999); background: var(--ds-color-fg); color: var(--ds-color-bg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-xs); line-height: 1.4; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-xs); max-width: 16rem; pointer-events: none; } `"
+          "default": "css` :host { display: inline-flex; position: relative; } :host([full-width]) { display: flex; width: 100%; } .anchor { position: relative; display: inline-flex; } :host([full-width]) .anchor { display: flex; width: 100%; } .tooltip { /* Override UA popover defaults so JS-set top/left/transform stay authoritative. */ position: fixed; inset: auto; margin: 0; border: none; width: max-content; height: auto; overflow: visible; z-index: var(--ds-z-index-tooltip, 999); background: var(--ds-color-fg); color: var(--ds-color-bg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-xs); line-height: 1.4; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-xs); max-width: 16rem; pointer-events: none; } `"
         }
       ],
       "exports": [
@@ -7705,6 +8115,16 @@
               "default": "0",
               "attribute": "delay"
             },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_hovered",
@@ -7824,6 +8244,14 @@
               },
               "default": "0",
               "fieldName": "delay"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth"
             }
           ],
           "superclass": {
@@ -9277,7 +9705,7 @@
         {
           "kind": "variable",
           "name": "cardStyles",
-          "default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); } :host([orientation='horizontal']) .card { flex-direction: row; align-items: center; } :host([orientation='horizontal']) .body { flex: 1; } @container (max-width: 360px) { :host([orientation='horizontal']) .card { flex-direction: column; align-items: stretch; } :host([orientation='horizontal']) .body { flex: unset; } } .header { display: flex; flex-direction: column; gap: var(--ds-space-1); } .actions[hidden] { display: none; } ::slotted([slot='actions']) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } ::slotted([slot='title']) { font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); margin: 0; } ::slotted([slot='eyebrow']) { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } `"
+          "default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); } :host([orientation='horizontal']) .card { flex-direction: row; align-items: center; } :host([orientation='horizontal']) .body { flex: 1; } @container (max-width: 360px) { :host([orientation='horizontal']) .card { flex-direction: column; align-items: stretch; } :host([orientation='horizontal']) .body { flex: unset; } } .header { display: flex; flex-direction: column; gap: var(--ds-space-1); } [hidden] { display: none; } ::slotted([slot='actions']) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } ::slotted([slot='title']) { font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); margin: 0; } ::slotted([slot='eyebrow']) { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } `"
         }
       ],
       "exports": [
@@ -9358,6 +9786,24 @@
               "attribute": "interactive",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_hasEyebrow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasTitle",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_hasActions",
@@ -9368,17 +9814,33 @@
               "default": "false"
             },
             {
-              "kind": "method",
-              "name": "#onActionsSlotChange",
+              "kind": "field",
+              "name": "_hasFooter",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#onEyebrowSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onTitleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onActionsSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onFooterSlotChange",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -12463,7 +12925,7 @@
         {
           "kind": "variable",
           "name": "footerStyles",
-          "default": "css` :host { display: block; container-type: inline-size; } footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-6); border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width: 480px) { footer { gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } `"
+          "default": "css` :host { display: block; container-type: inline-size; } footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-5); border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width: 480px) { footer { gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } `"
         }
       ],
       "exports": [
@@ -13359,7 +13821,7 @@
         {
           "kind": "variable",
           "name": "pageShellStyles",
-          "default": "css` :host { display: grid; position: relative; grid-template-areas: 'header header' 'aside main' 'footer footer'; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { grid-area: header; border-bottom: 1px solid var(--ds-color-border); margin-bottom: var(--ds-space-1, 0.25rem); padding: var(--ds-space-5) var(--ds-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } aside { grid-area: aside; display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; scrollbar-gutter: stable; } main { grid-area: main; padding: var(--ds-space-5); max-width: min(72rem, 100%); overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } footer { grid-area: footer; } .brand { font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-close { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) { grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } :host(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) main { padding: var(--ds-space-5); } :host([mobile-layout]) header { padding: var(--ds-space-3) var(--ds-space-5); } :host([mobile-layout]) aside { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-2) 0; } :host([mobile-layout]) .drawer-close { display: inline-flex; margin: 0; } :host([mobile-layout]) aside ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
+          "default": "css` :host { display: grid; position: relative; grid-template-areas: 'header header' 'aside main' 'footer footer'; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { grid-area: header; border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2) var(--ds-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } aside { grid-area: aside; display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; scrollbar-gutter: stable; } main { grid-area: main; padding: var(--ds-space-5); max-width: min(72rem, 100%); overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } footer { grid-area: footer; } .brand { font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-close { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) { grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } :host(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) main { padding: var(--ds-space-5); } :host([mobile-layout]) aside { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-2) 0; } :host([mobile-layout]) .drawer-close { display: inline-flex; margin: 0; } :host([mobile-layout]) aside ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } :host([aside-empty]) { grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 1fr; } :host([aside-empty]) aside, :host([aside-empty]) .mobile-backdrop { display: none; } `"
         }
       ],
       "exports": [
@@ -13391,7 +13853,7 @@
               "name": "header-actions"
             },
             {
-              "description": "Side navigation.",
+              "description": "Side navigation. When empty, the aside column and hamburger toggle are not rendered.",
               "name": "aside"
             },
             {
@@ -13431,6 +13893,24 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_hasAside",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "#resizeObserver",
@@ -13469,6 +13949,16 @@
               "kind": "field",
               "name": "#onAsideClick",
               "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onAsideSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onFooterSlotChange",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -13563,6 +14053,18 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/eye-slash.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/eye.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/icon/icons/home.ts",
@@ -13587,12 +14089,30 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/moon.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/plus.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/icon/icons/puzzle-piece.ts",
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/sun.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/icon/icons/swatch.ts",