@jsekulowicz/ds-components 0.4.1 → 0.5.0

package/custom-elements.json

@@ -898,6 +898,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/test-utils/mount.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "resetTestDom",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
+        {
+          "kind": "function",
+          "name": "mount",
+          "return": {
+            "type": {
+              "text": "Promise<T>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "template",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "selector",
+              "optional": true,
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mountWithProps",
+          "return": {
+            "type": {
+              "text": "Promise<T>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "template",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "props",
+              "default": "{}",
+              "type": {
+                "text": "Partial<T>"
+              }
+            },
+            {
+              "name": "selector",
+              "optional": true,
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "resetTestDom",
+          "declaration": {
+            "name": "resetTestDom",
+            "module": "src/test-utils/mount.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mount",
+          "declaration": {
+            "name": "mount",
+            "module": "src/test-utils/mount.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mountWithProps",
+          "declaration": {
+            "name": "mountWithProps",
+            "module": "src/test-utils/mount.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/badge/badge.styles.ts",
@@ -1013,102 +1109,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/test-utils/mount.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "resetTestDom",
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          }
-        },
-        {
-          "kind": "function",
-          "name": "mount",
-          "return": {
-            "type": {
-              "text": "Promise<T>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "template",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "selector",
-              "optional": true,
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "mountWithProps",
-          "return": {
-            "type": {
-              "text": "Promise<T>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "template",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "props",
-              "default": "{}",
-              "type": {
-                "text": "Partial<T>"
-              }
-            },
-            {
-              "name": "selector",
-              "optional": true,
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "resetTestDom",
-          "declaration": {
-            "name": "resetTestDom",
-            "module": "src/test-utils/mount.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "mount",
-          "declaration": {
-            "name": "mount",
-            "module": "src/test-utils/mount.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "mountWithProps",
-          "declaration": {
-            "name": "mountWithProps",
-            "module": "src/test-utils/mount.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/breadcrumb/breadcrumb-item.styles.ts",
@@ -2457,7 +2457,7 @@
         {
           "kind": "variable",
           "name": "iconStyles",
-          "default": "css` :host { display: inline-flex; width: 1em; height: 1em; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875em; height: 0.875em; } :host([size='lg']) { width: 1.25em; height: 1.25em; } svg { width: 100%; height: 100%; display: block; } `"
+          "default": "css` :host { display: inline-flex; width: 1em; height: 1em; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875em; height: 0.875em; } :host([size='lg']) { width: 1.25em; height: 1.25em; } :host([size='xl']) { width: 1.25rem; height: 1.25rem; } :host([size='2xl']) { width: 1.5rem; height: 1.5rem; } svg { width: 100%; height: 100%; display: block; } `"
         }
       ],
       "exports": [
@@ -7186,198 +7186,522 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/define.ts",
+      "path": "src/atoms/text-field/define.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "ds-tabs",
-          "declaration": {
-            "name": "DsTabs",
-            "module": "/src/atoms/tabs/tabs.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "ds-tab",
-          "declaration": {
-            "name": "DsTab",
-            "module": "/src/atoms/tabs/tab.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "ds-tab-panel",
+          "name": "ds-text-field",
           "declaration": {
-            "name": "DsTabPanel",
-            "module": "/src/atoms/tabs/tab-panel.js"
+            "name": "DsTextField",
+            "module": "/src/atoms/text-field/text-field.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/index.ts",
+      "path": "src/atoms/text-field/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTabs",
+          "name": "DsTextField",
           "declaration": {
-            "name": "DsTabs",
-            "module": "./tabs.js"
+            "name": "DsTextField",
+            "module": "./text-field.js"
           }
         },
         {
           "kind": "js",
-          "name": "DsTab",
+          "name": "TextFieldType",
           "declaration": {
-            "name": "DsTab",
-            "module": "./tab.js"
+            "name": "TextFieldType",
+            "module": "./text-field.js"
           }
         },
         {
           "kind": "js",
-          "name": "DsTabPanel",
+          "name": "TextFieldSize",
           "declaration": {
-            "name": "DsTabPanel",
-            "module": "./tab-panel.js"
+            "name": "TextFieldSize",
+            "module": "./text-field.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab-panel.styles.ts",
+      "path": "src/atoms/text-field/text-field.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "tabPanelStyles",
-          "default": "css` :host { display: block; } :host(:focus-visible) { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
+          "name": "textFieldStyles",
+          "default": "css` :host { display: flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } .wrap { position: relative; display: flex; align-items: center; width: 100%; height: var(--ds-size-md); padding: 0 var(--ds-space-3); gap: var(--ds-space-2); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .wrap:hover { border-color: var(--ds-color-fg-subtle); } .wrap:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } :host([invalid]) .wrap { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .wrap:focus-within { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .wrap { opacity: 0.5; cursor: not-allowed; background: var(--ds-color-bg-subtle); } input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.4; padding: 0; min-width: 0; } input::placeholder { color: var(--ds-color-fg-muted); } :host([size='sm']) .wrap { height: var(--ds-size-sm); padding: 0 var(--ds-space-2); } :host([size='lg']) .wrap { height: var(--ds-size-lg); padding: 0 var(--ds-space-4); font-size: var(--ds-font-size-md); } .adornment { display: inline-flex; align-items: center; color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-sm); } .adornment[hidden] { display: none; } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "tabPanelStyles",
+          "name": "textFieldStyles",
           "declaration": {
-            "name": "tabPanelStyles",
-            "module": "src/atoms/tabs/tab-panel.styles.ts"
+            "name": "textFieldStyles",
+            "module": "src/atoms/text-field/text-field.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab-panel.ts",
+      "path": "src/atoms/text-field/text-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTabPanel",
+          "name": "DsTextField",
           "slots": [
             {
-              "description": "Panel contents, shown only when the panel is active.",
-              "name": "default"
-            }
-          ],
+              "description": "Adornment rendered before the input.",
+              "name": "leading"
+            },
+            {
+              "description": "Adornment rendered after the input.",
+              "name": "trailing"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextFieldType"
+              },
+              "default": "'text'",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TextFieldSize"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "value"
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "active",
+              "attribute": "readonly",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "min-length"
+            },
+            {
+              "kind": "field",
+              "name": "maxLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "max-length"
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "inputLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "input-label"
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "description"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "error"
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "optional",
+              "reflects": true
+            },
+            {
+              "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": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onLeadingChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onTrailingChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#syncValidity",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired on every keystroke with the current value.",
+              "name": "ds-input"
+            },
+            {
+              "description": "Fired when the value is committed.",
+              "name": "ds-change"
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "type",
+              "type": {
+                "text": "TextFieldType"
+              },
+              "default": "'text'",
+              "fieldName": "type"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "TextFieldSize"
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            },
+            {
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "value"
+              "fieldName": "placeholder"
             },
             {
-              "name": "active",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "active"
+              "fieldName": "readonly"
+            },
+            {
+              "name": "min-length",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "minLength"
+            },
+            {
+              "name": "max-length",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "maxLength"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "pattern"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "input-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "inputLabel"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "description"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "error"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid"
+            },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "optional"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@jsekulowicz/ds-core"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-tab-panel",
+          "tagName": "ds-text-field",
           "customElement": true,
-          "summary": "Content region associated with a ds-tab."
+          "summary": "Single-line text input with native form participation via ElementInternals."
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DsTextField",
+          "declaration": {
+            "name": "DsTextField",
+            "module": "src/atoms/text-field/text-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/tabs/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-tabs",
+          "declaration": {
+            "name": "DsTabs",
+            "module": "/src/atoms/tabs/tabs.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-tab",
+          "declaration": {
+            "name": "DsTab",
+            "module": "/src/atoms/tabs/tab.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-tab-panel",
+          "declaration": {
+            "name": "DsTabPanel",
+            "module": "/src/atoms/tabs/tab-panel.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/tabs/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsTabs",
+          "declaration": {
+            "name": "DsTabs",
+            "module": "./tabs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DsTab",
+          "declaration": {
+            "name": "DsTab",
+            "module": "./tab.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DsTabPanel",
           "declaration": {
             "name": "DsTabPanel",
-            "module": "src/atoms/tabs/tab-panel.ts"
+            "module": "./tab-panel.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab.styles.ts",
+      "path": "src/atoms/tabs/tab-panel.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "tabStyles",
-          "default": "css` :host { display: inline-flex; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .tab { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-2); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); line-height: 1; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; white-space: nowrap; } :host(:hover:not([disabled])) .tab { color: var(--ds-color-fg); } :host([selected]) .tab { color: var(--ds-color-accent); border-bottom-color: var(--ds-color-accent); } :host(:focus-visible) .tab { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
+          "name": "tabPanelStyles",
+          "default": "css` :host { display: block; } :host(:focus-visible) { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "tabStyles",
+          "name": "tabPanelStyles",
           "declaration": {
-            "name": "tabStyles",
-            "module": "src/atoms/tabs/tab.styles.ts"
+            "name": "tabPanelStyles",
+            "module": "src/atoms/tabs/tab-panel.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab.ts",
+      "path": "src/atoms/tabs/tab-panel.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTab",
-          "cssParts": [
-            {
-              "description": "The inner tab surface.",
-              "name": "tab"
-            }
-          ],
+          "name": "DsTabPanel",
           "slots": [
             {
-              "description": "Tab label content.",
+              "description": "Panel contents, shown only when the panel is active.",
               "name": "default"
             }
           ],
@@ -7393,28 +7717,13 @@
             },
             {
               "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "active",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "#onClick",
-              "privacy": "private"
             }
           ],
           "attributes": [
@@ -7427,88 +7736,72 @@
               "fieldName": "value"
             },
             {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "selected"
-            },
-            {
-              "name": "disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "active"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-tab",
+          "tagName": "ds-tab-panel",
           "customElement": true,
-          "summary": "Individual tab trigger inside a ds-tabs tablist."
+          "summary": "Content region associated with a ds-tab."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTab",
+          "name": "DsTabPanel",
           "declaration": {
-            "name": "DsTab",
-            "module": "src/atoms/tabs/tab.ts"
+            "name": "DsTabPanel",
+            "module": "src/atoms/tabs/tab-panel.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tabs.styles.ts",
+      "path": "src/atoms/tabs/tab.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "tabsStyles",
-          "default": "css` :host { display: block; width: 100%; } .tablist { display: flex; gap: var(--ds-space-2); border-bottom: 1px solid var(--ds-color-border); padding: 4px 4px 0; margin: -4px -4px 0; } .panels { padding-top: var(--ds-space-4); } `"
+          "name": "tabStyles",
+          "default": "css` :host { display: inline-flex; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .tab { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-2); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); line-height: 1; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; white-space: nowrap; } :host(:hover:not([disabled])) .tab { color: var(--ds-color-fg); } :host([selected]) .tab { color: var(--ds-color-accent); border-bottom-color: var(--ds-color-accent); } :host(:focus-visible) .tab { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "tabsStyles",
+          "name": "tabStyles",
           "declaration": {
-            "name": "tabsStyles",
-            "module": "src/atoms/tabs/tabs.styles.ts"
+            "name": "tabStyles",
+            "module": "src/atoms/tabs/tab.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tabs.ts",
+      "path": "src/atoms/tabs/tab.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTabs",
+          "name": "DsTab",
           "cssParts": [
             {
-              "description": "The horizontal tab row.",
-              "name": "tablist"
-            },
-            {
-              "description": "The panels container.",
-              "name": "panels"
+              "description": "The inner tab surface.",
+              "name": "tab"
             }
           ],
           "slots": [
             {
-              "description": "ds-tab elements that make up the tablist.",
-              "name": "tab"
-            },
-            {
-              "description": "ds-tab-panel elements, one per tab.",
+              "description": "Tab label content.",
               "name": "default"
             }
           ],
@@ -7524,57 +7817,30 @@
             },
             {
               "kind": "field",
-              "name": "_tabs",
+              "name": "selected",
               "type": {
-                "text": "DsTab[]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_panels",
+              "name": "disabled",
               "type": {
-                "text": "DsTabPanel[]"
+                "text": "boolean"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#onSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#syncSelection",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#onTabActivate",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#setValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#focusTab",
-              "privacy": "private"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "#onKeydown",
+              "name": "#onClick",
               "privacy": "private"
             }
           ],
-          "events": [
-            {
-              "description": "Fires when the active tab changes. Detail: `{ value: string }`.",
-              "name": "ds-change"
-            }
-          ],
           "attributes": [
             {
               "name": "value",
@@ -7583,448 +7849,182 @@
               },
               "default": "''",
               "fieldName": "value"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-tabs",
+          "tagName": "ds-tab",
           "customElement": true,
-          "summary": "Tablist container that coordinates ds-tab triggers and ds-tab-panel regions."
+          "summary": "Individual tab trigger inside a ds-tabs tablist."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTabs",
-          "declaration": {
-            "name": "DsTabs",
-            "module": "src/atoms/tabs/tabs.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/atoms/text-field/define.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "ds-text-field",
-          "declaration": {
-            "name": "DsTextField",
-            "module": "/src/atoms/text-field/text-field.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/atoms/text-field/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DsTextField",
-          "declaration": {
-            "name": "DsTextField",
-            "module": "./text-field.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextFieldType",
-          "declaration": {
-            "name": "TextFieldType",
-            "module": "./text-field.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextFieldSize",
+          "name": "DsTab",
           "declaration": {
-            "name": "TextFieldSize",
-            "module": "./text-field.js"
+            "name": "DsTab",
+            "module": "src/atoms/tabs/tab.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/text-field/text-field.styles.ts",
+      "path": "src/atoms/tabs/tabs.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "textFieldStyles",
-          "default": "css` :host { display: flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } .wrap { position: relative; display: flex; align-items: center; width: 100%; height: var(--ds-size-md); padding: 0 var(--ds-space-3); gap: var(--ds-space-2); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .wrap:hover { border-color: var(--ds-color-fg-subtle); } .wrap:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } :host([invalid]) .wrap { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .wrap:focus-within { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .wrap { opacity: 0.5; cursor: not-allowed; background: var(--ds-color-bg-subtle); } input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.4; padding: 0; min-width: 0; } input::placeholder { color: var(--ds-color-fg-muted); } :host([size='sm']) .wrap { height: var(--ds-size-sm); padding: 0 var(--ds-space-2); } :host([size='lg']) .wrap { height: var(--ds-size-lg); padding: 0 var(--ds-space-4); font-size: var(--ds-font-size-md); } .adornment { display: inline-flex; align-items: center; color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-sm); } .adornment[hidden] { display: none; } `"
+          "name": "tabsStyles",
+          "default": "css` :host { display: block; width: 100%; } .tablist { display: flex; gap: var(--ds-space-2); border-bottom: 1px solid var(--ds-color-border); padding: 4px 4px 0; margin: -4px -4px 0; } .panels { padding-top: var(--ds-space-4); } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "textFieldStyles",
+          "name": "tabsStyles",
           "declaration": {
-            "name": "textFieldStyles",
-            "module": "src/atoms/text-field/text-field.styles.ts"
+            "name": "tabsStyles",
+            "module": "src/atoms/tabs/tabs.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/text-field/text-field.ts",
+      "path": "src/atoms/tabs/tabs.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTextField",
-          "slots": [
-            {
-              "description": "Adornment rendered before the input.",
-              "name": "leading"
-            },
-            {
-              "description": "Adornment rendered after the input.",
-              "name": "trailing"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TextFieldType"
-              },
-              "default": "'text'",
-              "attribute": "type"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "TextFieldSize"
-              },
-              "default": "'md'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "placeholder"
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "readonly",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "minLength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "attribute": "min-length"
-            },
-            {
-              "kind": "field",
-              "name": "maxLength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "attribute": "max-length"
-            },
-            {
-              "kind": "field",
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "pattern"
-            },
+          "name": "DsTabs",
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "autocomplete"
+              "description": "The horizontal tab row.",
+              "name": "tablist"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "label"
-            },
+              "description": "The panels container.",
+              "name": "panels"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "inputLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "input-label"
+              "description": "ds-tab elements that make up the tablist.",
+              "name": "tab"
             },
             {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "description"
-            },
+              "description": "ds-tab-panel elements, one per tab.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "error",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "error"
-            },
-            {
-              "kind": "field",
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "invalid",
-              "reflects": true
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "optional",
+              "name": "_tabs",
               "type": {
-                "text": "boolean"
+                "text": "DsTab[]"
               },
-              "default": "false",
-              "attribute": "optional",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_hasLeading",
+              "name": "_panels",
               "type": {
-                "text": "boolean"
+                "text": "DsTabPanel[]"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_hasTrailing",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "name": "#onSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              },
+              "name": "#syncSelection",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onLeadingChange",
+              "name": "#onTabActivate",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onTrailingChange",
+              "name": "#setValue",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onInput",
+              "name": "#focusTab",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onChange",
+              "name": "#onKeydown",
               "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "#syncValidity",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "events": [
             {
-              "description": "Fired on every keystroke with the current value.",
-              "name": "ds-input"
-            },
-            {
-              "description": "Fired when the value is committed.",
+              "description": "Fires when the active tab changes. Detail: `{ value: string }`.",
               "name": "ds-change"
             }
           ],
           "attributes": [
             {
-              "name": "type",
-              "type": {
-                "text": "TextFieldType"
-              },
-              "default": "'text'",
-              "fieldName": "type"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "TextFieldSize"
-              },
-              "default": "'md'",
-              "fieldName": "size"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "min-length",
-              "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "minLength"
-            },
-            {
-              "name": "max-length",
-              "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "maxLength"
-            },
-            {
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "pattern"
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "autocomplete"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "input-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "inputLabel"
-            },
-            {
-              "name": "description",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "description"
-            },
-            {
-              "name": "error",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "error"
-            },
-            {
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "invalid"
-            },
-            {
-              "name": "optional",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "optional"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormControlMixin",
-              "package": "@jsekulowicz/ds-core"
+              "fieldName": "value"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-text-field",
+          "tagName": "ds-tabs",
           "customElement": true,
-          "summary": "Single-line text input with native form participation via ElementInternals."
+          "summary": "Tablist container that coordinates ds-tab triggers and ds-tab-panel regions."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTextField",
+          "name": "DsTabs",
           "declaration": {
-            "name": "DsTextField",
-            "module": "src/atoms/text-field/text-field.ts"
+            "name": "DsTabs",
+            "module": "src/atoms/tabs/tabs.ts"
           }
         }
       ]
@@ -12965,7 +12965,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-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: ${mobileBreakpoint}) { 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: ${mobileBreakpoint}) { footer { gap: var(--ds-space-2); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } @media (max-width: ${belowDesktopBreakpoint}) { footer { padding-inline: var(--ds-space-4); } } `"
         }
       ],
       "exports": [
@@ -13296,7 +13296,7 @@
         {
           "kind": "variable",
           "name": "navbarStyles",
-          "default": "css` :host { display: block; container-type: inline-size; } nav { position: relative; display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-6); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); } .brand { display: flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .links { display: flex; align-items: center; gap: var(--ds-space-3); flex: 1; } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } .toggle { display: none; align-items: center; justify-content: center; border: 1px solid var(--ds-color-border); background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg); cursor: pointer; padding: var(--ds-space-2); } .toggle:focus-visible { box-shadow: var(--ds-shadow-focus); } .menu { display: contents; } @container (max-width: ${tabletBreakpoint}) { .links { justify-content: flex-end; flex: 0 0 auto; margin-left: auto; } .toggle { display: inline-flex; } .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--ds-space-1); padding: var(--ds-space-3); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); box-shadow: var(--ds-shadow-md); z-index: 10; } :host([data-open]) .menu { display: flex; } } `"
+          "default": "css` :host { display: block; container-type: inline-size; } nav { position: relative; display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-5); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); } .brand { display: flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .links { display: flex; align-items: center; gap: var(--ds-space-3); flex: 1; } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } .toggle { display: none; align-items: center; justify-content: center; border: 1px solid var(--ds-color-border); background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg); cursor: pointer; padding: var(--ds-space-2); } .toggle:focus-visible { box-shadow: var(--ds-shadow-focus); } .menu { display: contents; } @container (max-width: ${tabletBreakpoint}) { .links { justify-content: flex-end; flex: 0 0 auto; margin-left: auto; } .toggle { display: inline-flex; } .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--ds-space-1); padding: var(--ds-space-3); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); box-shadow: var(--ds-shadow-md); z-index: 10; } :host([data-open]) .menu { display: flex; } } @media (max-width: ${belowDesktopBreakpoint}) { nav { padding-inline: var(--ds-space-4); } } `"
         }
       ],
       "exports": [
@@ -13861,7 +13861,7 @@
         {
           "kind": "variable",
           "name": "pageShellStyles",
-          "default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2) 0; 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); } footer { display: block; } .shell-inner { width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; padding-inline: var(--ds-space-5); } .shell-inner--header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr; } 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; } :host([aside-empty]) aside, :host([aside-empty]) .mobile-backdrop { display: none; } main { padding: var(--ds-space-5); overflow: auto; min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .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(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) .brand { flex: 1; } :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 { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2) 0; 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); } footer { display: block; } .shell-inner { width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; padding-inline: var(--ds-space-5); } .shell-inner--header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) .mobile-backdrop { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { display: none; } main { padding: var(--ds-space-5); overflow: auto; min-width: 0; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; /* Reserve scrollbar gutters on both inline sides so the horizontal content position stays symmetric whether the vertical scrollbar is present or not. Without this, an overflowing main has its content pushed inward on the inline-end side only (asymmetric margins). */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { .shell-inner { padding-inline: var(--ds-space-4); } main { padding: var(--ds-space-4) var(--ds-space-2); } } .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(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) aside[part=\"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[part=\"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[part=\"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); } `"
         }
       ],
       "exports": [
@@ -13899,9 +13899,13 @@
               "name": "header-actions"
             },
             {
-              "description": "Side navigation. When empty, the aside column and hamburger toggle are not rendered.",
+              "description": "Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.",
               "name": "aside"
             },
+            {
+              "description": "Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.",
+              "name": "aside-end"
+            },
             {
               "description": "Main content.",
               "name": "default"
@@ -13930,6 +13934,15 @@
               "default": "'Navigation menu'",
               "attribute": "menu-label"
             },
+            {
+              "kind": "field",
+              "name": "endLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Secondary navigation'",
+              "attribute": "end-label"
+            },
             {
               "kind": "field",
               "name": "_mobileNavOpen",
@@ -13948,6 +13961,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_hasAsideEnd",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_hasFooter",
@@ -14015,6 +14037,11 @@
               "name": "#onAsideSlotChange",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "#onAsideEndSlotChange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "#onFooterSlotChange",
@@ -14037,6 +14064,14 @@
               },
               "default": "'Navigation menu'",
               "fieldName": "menuLabel"
+            },
+            {
+              "name": "end-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Secondary navigation'",
+              "fieldName": "endLabel"
             }
           ],
           "superclass": {