@jsekulowicz/ds-components 0.5.4 → 0.6.1

package/custom-elements.json

@@ -671,10 +671,10 @@
         },
         {
           "kind": "js",
-          "name": "DsNavbar",
+          "name": "DsTopBar",
           "declaration": {
-            "name": "DsNavbar",
-            "module": "./organisms/navbar/index.js"
+            "name": "DsTopBar",
+            "module": "./organisms/top-bar/index.js"
           }
         },
         {
@@ -1116,7 +1116,7 @@
         {
           "kind": "variable",
           "name": "breadcrumbItemStyles",
-          "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; padding: var(--ds-space-1) 0; border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible { box-shadow: var(--ds-shadow-focus); } .current { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-1) 0; } .separator { display: inline-flex; color: var(--ds-color-fg-subtle); font-size: 0.875em; } `"
+          "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; /* padding-inline + negative margin-inline widens the focus-ring bounding box on the horizontal axis while keeping the link's footprint identical, so adjacent crumbs stay aligned. */ padding: var(--ds-space-1) 2px; margin-inline: -2px; border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible { box-shadow: var(--ds-shadow-focus); } .current { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-1) 0; } .separator { display: inline-flex; color: var(--ds-color-fg-subtle); font-size: 0.875em; } `"
         }
       ],
       "exports": [
@@ -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); 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); } } `"
+          "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); /* Fixed 36px height; symmetric 16px inline padding. Padding is declared via padding-inline only — vertical centering is owned by the flexbox + fixed height. */ height: 36px; padding-inline: var(--ds-space-4); 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); box-sizing: border-box; } .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); } } `"
         }
       ],
       "exports": [
@@ -13261,101 +13261,93 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/navbar/define.ts",
+      "path": "src/organisms/sidenav/define.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "ds-navbar",
+          "name": "ds-sidenav",
           "declaration": {
-            "name": "DsNavbar",
-            "module": "/src/organisms/navbar/navbar.js"
+            "name": "DsSidenav",
+            "module": "/src/organisms/sidenav/sidenav.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/navbar/index.ts",
+      "path": "src/organisms/sidenav/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "DsNavbar",
+          "name": "DsSidenav",
           "declaration": {
-            "name": "DsNavbar",
-            "module": "./navbar.js"
+            "name": "DsSidenav",
+            "module": "./sidenav.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/navbar/navbar.styles.ts",
+      "path": "src/organisms/sidenav/sidenav.styles.ts",
       "declarations": [
         {
           "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-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); } } `"
+          "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); 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": [
         {
           "kind": "js",
-          "name": "navbarStyles",
+          "name": "sidenavStyles",
           "declaration": {
-            "name": "navbarStyles",
-            "module": "src/organisms/navbar/navbar.styles.ts"
+            "name": "sidenavStyles",
+            "module": "src/organisms/sidenav/sidenav.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/navbar/navbar.ts",
+      "path": "src/organisms/sidenav/sidenav.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsNavbar",
+          "name": "DsSidenav",
           "cssParts": [
             {
               "description": "The internal `<nav>` element.",
-              "name": "bar"
-            },
-            {
-              "description": "The brand wrapper.",
-              "name": "brand"
-            },
-            {
-              "description": "The collapsible links wrapper (mobile menu when expanded).",
-              "name": "links"
+              "name": "nav"
             },
             {
-              "description": "The actions wrapper.",
-              "name": "actions"
+              "description": "The header wrapper.",
+              "name": "header"
             },
             {
-              "description": "The hamburger toggle button.",
-              "name": "toggle"
+              "description": "The default-slot list wrapper.",
+              "name": "list"
             },
             {
-              "description": "The expandable links container.",
-              "name": "menu"
+              "description": "The footer wrapper.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "Logo or wordmark (left).",
-              "name": "brand"
+              "description": "Logo / app name (top).",
+              "name": "header"
             },
             {
-              "description": "ds-nav-item children (center, collapses on mobile).",
+              "description": "ds-nav-item and ds-nav-group children.",
               "name": "default"
             },
             {
-              "description": "Buttons / user menu (right).",
-              "name": "actions"
+              "description": "Bottom region (settings, sign-out, theme toggle, etc.).",
+              "name": "footer"
             }
           ],
           "members": [
@@ -13365,21 +13357,22 @@
               "type": {
                 "text": "string"
               },
-              "default": "'Primary'",
+              "default": "'Secondary'",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "menuLabel",
+              "name": "collapsed",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Menu'",
-              "attribute": "menu-label"
+              "default": "false",
+              "attribute": "collapsed",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_open",
+              "name": "_hasHeader",
               "type": {
                 "text": "boolean"
               },
@@ -13388,7 +13381,7 @@
             },
             {
               "kind": "field",
-              "name": "_hasLinks",
+              "name": "_hasFooter",
               "type": {
                 "text": "boolean"
               },
@@ -13396,23 +13389,44 @@
               "default": "false"
             },
             {
-              "kind": "field",
-              "name": "#syncLinksPresence",
-              "privacy": "private"
+              "kind": "method",
+              "name": "#syncCompact",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "#onLinksSlotChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "#onHeaderSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "#onDocumentKeydown",
-              "privacy": "private"
+              "kind": "method",
+              "name": "#onFooterSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "#onToggle",
+              "name": "#onDefaultSlotChange",
               "privacy": "private"
             }
           ],
@@ -13422,127 +13436,125 @@
               "type": {
                 "text": "string"
               },
-              "default": "'Primary'",
+              "default": "'Secondary'",
               "fieldName": "label"
             },
             {
-              "name": "menu-label",
+              "name": "collapsed",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Menu'",
-              "fieldName": "menuLabel"
+              "default": "false",
+              "fieldName": "collapsed"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-navbar",
+          "tagName": "ds-sidenav",
           "customElement": true,
-          "summary": "Top-bar navigation shell. Collapses to a hamburger menu below the configured breakpoint."
+          "summary": "Vertical sidebar navigation. Hosts ds-nav-item / ds-nav-group children. Supports an icon-only collapsed mode."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsNavbar",
+          "name": "DsSidenav",
           "declaration": {
-            "name": "DsNavbar",
-            "module": "src/organisms/navbar/navbar.ts"
+            "name": "DsSidenav",
+            "module": "src/organisms/sidenav/sidenav.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/sidenav/define.ts",
+      "path": "src/organisms/top-bar/define.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "ds-sidenav",
+          "name": "ds-top-bar",
           "declaration": {
-            "name": "DsSidenav",
-            "module": "/src/organisms/sidenav/sidenav.js"
+            "name": "DsTopBar",
+            "module": "/src/organisms/top-bar/top-bar.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/sidenav/index.ts",
+      "path": "src/organisms/top-bar/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "DsSidenav",
+          "name": "DsTopBar",
           "declaration": {
-            "name": "DsSidenav",
-            "module": "./sidenav.js"
+            "name": "DsTopBar",
+            "module": "./top-bar.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/sidenav/sidenav.styles.ts",
+      "path": "src/organisms/top-bar/top-bar.styles.ts",
       "declarations": [
         {
           "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); 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); } `"
+          "name": "topBarStyles",
+          "default": "css` :host { display: block; } nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); /* Fixed 48px height at every viewport; 16px symmetric inline padding. Padding is declared via padding-inline only — vertical centering is owned by the flexbox + fixed height. */ height: 48px; padding-inline: var(--ds-space-4); background: var(--ds-top-bar-bg, var(--ds-color-bg)); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); color: var(--ds-color-fg); box-sizing: border-box; } .brand { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "sidenavStyles",
+          "name": "topBarStyles",
           "declaration": {
-            "name": "sidenavStyles",
-            "module": "src/organisms/sidenav/sidenav.styles.ts"
+            "name": "topBarStyles",
+            "module": "src/organisms/top-bar/top-bar.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/organisms/sidenav/sidenav.ts",
+      "path": "src/organisms/top-bar/top-bar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DsSidenav",
-          "cssParts": [
+          "name": "DsTopBar",
+          "cssProperties": [
             {
-              "description": "The internal `<nav>` element.",
-              "name": "nav"
-            },
+              "description": "Background color of the bar. Defaults to `var(--ds-color-bg)`. Override (e.g. to `transparent`) when nesting inside a container that paints its own background underneath, such as a sticky shell with `backdrop-filter`.",
+              "name": "--ds-top-bar-bg"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The header wrapper.",
-              "name": "header"
+              "description": "The internal `<nav>` landmark element.",
+              "name": "bar"
             },
             {
-              "description": "The default-slot list wrapper.",
-              "name": "list"
+              "description": "The brand wrapper.",
+              "name": "brand"
             },
             {
-              "description": "The footer wrapper.",
-              "name": "footer"
+              "description": "The actions wrapper.",
+              "name": "actions"
             }
           ],
           "slots": [
             {
-              "description": "Logo / app name (top).",
-              "name": "header"
-            },
-            {
-              "description": "ds-nav-item and ds-nav-group children.",
-              "name": "default"
+              "description": "Logo, wordmark, and/or page title (left).",
+              "name": "brand"
             },
             {
-              "description": "Bottom region (settings, sign-out, theme toggle, etc.).",
-              "name": "footer"
+              "description": "Buttons, account menus, drawer toggle, etc. (right).",
+              "name": "actions"
             }
           ],
           "members": [
@@ -13552,77 +13564,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "'Secondary'",
+              "default": "'Primary'",
               "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "collapsed",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_hasHeader",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_hasFooter",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "#syncCompact",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#onHeaderSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#onFooterSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "#onDefaultSlotChange",
-              "privacy": "private"
             }
           ],
           "attributes": [
@@ -13631,34 +13574,26 @@
               "type": {
                 "text": "string"
               },
-              "default": "'Secondary'",
+              "default": "'Primary'",
               "fieldName": "label"
-            },
-            {
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "collapsed"
             }
           ],
           "superclass": {
             "name": "DsElement",
             "package": "@jsekulowicz/ds-core"
           },
-          "tagName": "ds-sidenav",
+          "tagName": "ds-top-bar",
           "customElement": true,
-          "summary": "Vertical sidebar navigation. Hosts ds-nav-item / ds-nav-group children. Supports an icon-only collapsed mode."
+          "summary": "Application chrome bar with a left brand region and a right actions region.\n\nThe bar is intentionally minimal: it does not own primary navigation. Pair it with\n`ds-sidenav` (typically inside `ds-page-shell`) for navigation. The bar has a fixed\n48px height at every viewport and a symmetric 16px inline padding."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DsSidenav",
+          "name": "DsTopBar",
           "declaration": {
-            "name": "DsSidenav",
-            "module": "src/organisms/sidenav/sidenav.ts"
+            "name": "DsTopBar",
+            "module": "src/organisms/top-bar/top-bar.ts"
           }
         }
       ]
@@ -13880,7 +13815,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 { display: inline-flex; align-items: center; min-width: 0; 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); } `"
+          "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 { 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); } /* The header composes ds-top-bar; let the top-bar own height, padding, border-bottom, and layout. We just make its background transparent so the sticky header's blurred bg shows through. */ .chrome { --ds-top-bar-bg: transparent; } footer { display: block; } .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 inline-start and inline-end visible empty bands stay equal in width whether the vertical scrollbar is present or not. */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { main { padding-block: var(--ds-space-4); padding-inline: var(--ds-space-4); } } .menu-toggle { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host([mobile-layout]) .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-brand { display: none; } .drawer-close { 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]) 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": [

package/dist/atoms/breadcrumb/breadcrumb-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,yBAyChC,CAAC"}
+{"version":3,"file":"breadcrumb-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,yBA6ChC,CAAC"}

package/dist/atoms/breadcrumb/breadcrumb-item.styles.js

@@ -14,7 +14,11 @@ export const breadcrumbItemStyles = css `
     gap: var(--ds-space-1);
     color: var(--ds-color-fg-muted);
     text-decoration: none;
-    padding: var(--ds-space-1) 0;
+    /* padding-inline + negative margin-inline widens the focus-ring
+       bounding box on the horizontal axis while keeping the link's
+       footprint identical, so adjacent crumbs stay aligned. */
+    padding: var(--ds-space-1) 2px;
+    margin-inline: -2px;
     border-radius: var(--ds-radius-sm);
     transition: color var(--ds-duration-fast) var(--ds-easing-standard);
   }

package/dist/atoms/breadcrumb/breadcrumb-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCtC,CAAC"}
+{"version":3,"file":"breadcrumb-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtC,CAAC"}

package/dist/define.d.ts

@@ -25,7 +25,7 @@ import './molecules/menu-button/define.js';
 import './molecules/bar-chart/define.js';
 import './molecules/alert/define.js';
 import './organisms/form/define.js';
-import './organisms/navbar/define.js';
+import './organisms/top-bar/define.js';
 import './organisms/sidenav/define.js';
 import './organisms/footer/define.js';
 import './templates/page-shell/define.js';

package/dist/define.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}