npm - @jsekulowicz/ds-components - Versions diffs - 0.5.0 → 0.5.2 - Mend

@jsekulowicz/ds-components 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/custom-elements.json CHANGED Viewed

@@ -898,102 +898,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/badge/badge.styles.ts",
@@ -1109,6 +1013,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/breadcrumb/breadcrumb-item.styles.ts",
@@ -7186,522 +7186,198 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/text-field/define.ts",
+      "path": "src/atoms/tabs/define.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "ds-text-field",
+          "name": "ds-tabs",
           "declaration": {
-            "name": "DsTextField",
-            "module": "/src/atoms/text-field/text-field.js"
+            "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/text-field/index.ts",
+      "path": "src/atoms/tabs/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTextField",
+          "name": "DsTabs",
           "declaration": {
-            "name": "DsTextField",
-            "module": "./text-field.js"
+            "name": "DsTabs",
+            "module": "./tabs.js"
           }
         },
         {
           "kind": "js",
-          "name": "TextFieldType",
+          "name": "DsTab",
           "declaration": {
-            "name": "TextFieldType",
-            "module": "./text-field.js"
+            "name": "DsTab",
+            "module": "./tab.js"
           }
         },
         {
           "kind": "js",
-          "name": "TextFieldSize",
+          "name": "DsTabPanel",
           "declaration": {
-            "name": "TextFieldSize",
-            "module": "./text-field.js"
+            "name": "DsTabPanel",
+            "module": "./tab-panel.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/text-field/text-field.styles.ts",
+      "path": "src/atoms/tabs/tab-panel.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": "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": "textFieldStyles",
+          "name": "tabPanelStyles",
           "declaration": {
-            "name": "textFieldStyles",
-            "module": "src/atoms/text-field/text-field.styles.ts"
+            "name": "tabPanelStyles",
+            "module": "src/atoms/tabs/tab-panel.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/text-field/text-field.ts",
+      "path": "src/atoms/tabs/tab-panel.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTextField",
+          "name": "DsTabPanel",
           "slots": [
             {
-              "description": "Adornment rendered before the input.",
-              "name": "leading"
-            },
-            {
-              "description": "Adornment rendered after the input.",
-              "name": "trailing"
+              "description": "Panel contents, shown only when the panel is active.",
+              "name": "default"
             }
           ],
           "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"
-            },
-            {
-              "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",
+              "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": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "optional",
+              "attribute": "active",
               "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": "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"
+              "fieldName": "value"
             },
             {
-              "name": "optional",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "optional"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormControlMixin",
-              "package": "@jsekulowicz/ds-core"
+              "fieldName": "active"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-text-field",
+          "tagName": "ds-tab-panel",
           "customElement": true,
-          "summary": "Single-line text input with native form participation via ElementInternals."
+          "summary": "Content region associated with a ds-tab."
         }
       ],
       "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": "./tab-panel.js"
+            "module": "src/atoms/tabs/tab-panel.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab-panel.styles.ts",
+      "path": "src/atoms/tabs/tab.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": "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": "tabPanelStyles",
+          "name": "tabStyles",
           "declaration": {
-            "name": "tabPanelStyles",
-            "module": "src/atoms/tabs/tab-panel.styles.ts"
+            "name": "tabStyles",
+            "module": "src/atoms/tabs/tab.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab-panel.ts",
+      "path": "src/atoms/tabs/tab.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTabPanel",
+          "name": "DsTab",
+          "cssParts": [
+            {
+              "description": "The inner tab surface.",
+              "name": "tab"
+            }
+          ],
           "slots": [
             {
-              "description": "Panel contents, shown only when the panel is active.",
+              "description": "Tab label content.",
               "name": "default"
             }
           ],
@@ -7717,13 +7393,28 @@
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "active",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "#onClick",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -7736,72 +7427,88 @@
               "fieldName": "value"
             },
             {
-              "name": "active",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "active"
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-tab-panel",
+          "tagName": "ds-tab",
           "customElement": true,
-          "summary": "Content region associated with a ds-tab."
+          "summary": "Individual tab trigger inside a ds-tabs tablist."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTabPanel",
+          "name": "DsTab",
           "declaration": {
-            "name": "DsTabPanel",
-            "module": "src/atoms/tabs/tab-panel.ts"
+            "name": "DsTab",
+            "module": "src/atoms/tabs/tab.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab.styles.ts",
+      "path": "src/atoms/tabs/tabs.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": "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": "tabStyles",
+          "name": "tabsStyles",
           "declaration": {
-            "name": "tabStyles",
-            "module": "src/atoms/tabs/tab.styles.ts"
+            "name": "tabsStyles",
+            "module": "src/atoms/tabs/tabs.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tab.ts",
+      "path": "src/atoms/tabs/tabs.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTab",
+          "name": "DsTabs",
           "cssParts": [
             {
-              "description": "The inner tab surface.",
-              "name": "tab"
+              "description": "The horizontal tab row.",
+              "name": "tablist"
+            },
+            {
+              "description": "The panels container.",
+              "name": "panels"
             }
           ],
           "slots": [
             {
-              "description": "Tab label content.",
+              "description": "ds-tab elements that make up the tablist.",
+              "name": "tab"
+            },
+            {
+              "description": "ds-tab-panel elements, one per tab.",
               "name": "default"
             }
           ],
@@ -7817,30 +7524,57 @@
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "_tabs",
               "type": {
-                "text": "boolean"
+                "text": "DsTab[]"
               },
-              "default": "false",
-              "attribute": "selected",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "_panels",
               "type": {
-                "text": "boolean"
+                "text": "DsTabPanel[]"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onClick",
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "#onKeydown",
               "privacy": "private"
             }
           ],
+          "events": [
+            {
+              "description": "Fires when the active tab changes. Detail: `{ value: string }`.",
+              "name": "ds-change"
+            }
+          ],
           "attributes": [
             {
               "name": "value",
@@ -7849,182 +7583,448 @@
               },
               "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-tab",
+          "tagName": "ds-tabs",
           "customElement": true,
-          "summary": "Individual tab trigger inside a ds-tabs tablist."
+          "summary": "Tablist container that coordinates ds-tab triggers and ds-tab-panel regions."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTab",
+          "name": "DsTabs",
           "declaration": {
-            "name": "DsTab",
-            "module": "src/atoms/tabs/tab.ts"
+            "name": "DsTabs",
+            "module": "src/atoms/tabs/tabs.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tabs.styles.ts",
+      "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",
+          "declaration": {
+            "name": "TextFieldSize",
+            "module": "./text-field.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/text-field/text-field.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": "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": "tabsStyles",
+          "name": "textFieldStyles",
           "declaration": {
-            "name": "tabsStyles",
-            "module": "src/atoms/tabs/tabs.styles.ts"
+            "name": "textFieldStyles",
+            "module": "src/atoms/text-field/text-field.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/atoms/tabs/tabs.ts",
+      "path": "src/atoms/text-field/text-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsTabs",
-          "cssParts": [
+          "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"
+            },
             {
-              "description": "The horizontal tab row.",
-              "name": "tablist"
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "autocomplete"
             },
             {
-              "description": "The panels container.",
-              "name": "panels"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
             {
-              "description": "ds-tab elements that make up the tablist.",
-              "name": "tab"
+              "kind": "field",
+              "name": "inputLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "input-label"
             },
             {
-              "description": "ds-tab-panel elements, one per tab.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "description"
+            },
             {
               "kind": "field",
-              "name": "value",
+              "name": "error",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "value"
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "_tabs",
+              "name": "invalid",
               "type": {
-                "text": "DsTab[]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_panels",
+              "name": "optional",
               "type": {
-                "text": "DsTabPanel[]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "attribute": "optional",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "#onSlotChange",
-              "privacy": "private"
+              "name": "_hasLeading",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "#syncSelection",
+              "name": "_hasTrailing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onTabActivate",
+              "name": "#onLeadingChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#setValue",
+              "name": "#onTrailingChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#focusTab",
+              "name": "#onInput",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onKeydown",
+              "name": "#onChange",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#syncValidity",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
           "events": [
             {
-              "description": "Fires when the active tab changes. Detail: `{ value: string }`.",
+              "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": "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",
+              "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-tabs",
+          "tagName": "ds-text-field",
           "customElement": true,
-          "summary": "Tablist container that coordinates ds-tab triggers and ds-tab-panel regions."
+          "summary": "Single-line text input with native form participation via ElementInternals."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsTabs",
+          "name": "DsTextField",
           "declaration": {
-            "name": "DsTabs",
-            "module": "src/atoms/tabs/tabs.ts"
+            "name": "DsTextField",
+            "module": "src/atoms/text-field/text-field.ts"
           }
         }
       ]
@@ -13386,6 +13386,25 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_hasLinks",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#syncLinksPresence",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onLinksSlotChange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "#onDocumentKeydown",
@@ -13472,7 +13491,7 @@
         {
           "kind": "variable",
           "name": "sidenavStyles",
-          "default": "css` :host { --ds-sidenav-item-height: var(--ds-space-10, 2.5rem); --ds-sidenav-item-compact-size: var(--ds-space-12, 3rem); --ds-sidenav-width: var(--ds-space-64, 16rem); display: block; width: var(--ds-sidenav-width); max-width: 100%; transition: width var(--ds-duration-slow) var(--ds-easing-standard); } :host([collapsed]) { --ds-sidenav-collapsed-width: var(--ds-space-14, 3.5rem); justify-items: flex-start; width: var(--ds-sidenav-collapsed-width); nav { width: var(--ds-sidenav-collapsed-width); scrollbar-width: none; } } nav { display: flex; flex-direction: column; height: 100%; padding: var(--ds-space-1); background: var(--ds-color-bg); overflow-x: clip; overflow-y: auto; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .header { padding: 0 var(--ds-space-3); margin-bottom: var(--ds-space-3); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .header[hidden], .footer[hidden] { display: none; } .list { display: flex; flex-direction: column; gap: var(--ds-space-1); flex: 1; min-height: 0; } .footer { margin-top: var(--ds-space-4); border-top: 1px solid var(--ds-color-border); display: flex; flex-direction: column; gap: var(--ds-space-1); } :host-context(ds-page-shell:not([mobile-layout])) nav { border-right: 1px solid var(--ds-color-border); } `"
+          "default": "css` :host { --ds-sidenav-item-height: var(--ds-space-10, 2.5rem); --ds-sidenav-item-compact-size: var(--ds-space-12, 3rem); --ds-sidenav-width: var(--ds-space-64, 16rem); display: block; width: var(--ds-sidenav-width); max-width: 100%; transition: width var(--ds-duration-slow) var(--ds-easing-standard); } :host([collapsed]) { --ds-sidenav-collapsed-width: var(--ds-space-14, 3.5rem); justify-items: flex-start; width: var(--ds-sidenav-collapsed-width); nav { width: var(--ds-sidenav-collapsed-width); padding: var(--ds-space-4) var(--ds-space-1); scrollbar-width: none; } } nav { display: flex; flex-direction: column; height: 100%; padding: var(--ds-space-4); background: var(--ds-color-bg); overflow-x: clip; overflow-y: auto; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .header { padding: 0 var(--ds-space-3); margin-bottom: var(--ds-space-3); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .header[hidden], .footer[hidden] { display: none; } .list { display: flex; flex-direction: column; gap: var(--ds-space-1); flex: 1; min-height: 0; } .footer { margin-top: var(--ds-space-4); border-top: 1px solid var(--ds-color-border); display: flex; flex-direction: column; gap: var(--ds-space-1); } :host-context(ds-page-shell[mobile-layout]) nav { padding-block: var(--ds-space-2); } :host-context(ds-page-shell:not([mobile-layout])) nav { border-right: 1px solid var(--ds-color-border); } `"
         }
       ],
       "exports": [
@@ -13861,7 +13880,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 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); } `"
+          "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); } .header-actions { display: inline-flex; align-items: center; } .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { 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; order: 0; } :host([mobile-layout]) .menu-toggle { order: 1; } :host([mobile-layout]) .header-actions { order: 2; } :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; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; 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": [
@@ -13894,6 +13913,10 @@
               "description": "Top-left brand/logo.",
               "name": "brand"
             },
+            {
+              "description": "Brand/logo shown at the start of the mobile navigation drawer.",
+              "name": "drawer-brand"
+            },
             {
               "description": "Top-right actions.",
               "name": "header-actions"
@@ -14214,6 +14237,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/icon/icons/user-circle.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/icon/icons/user.ts",