@material/web 2.5.1-nightly.56a486b.0 → 2.5.1-nightly.849b4dc.0

package/custom-elements.json

@@ -38835,13 +38835,14 @@
             {
               "kind": "field",
               "name": "selected",
-              "description": "Whether or not the button is selected, when `type=\"toggle\"`.",
+              "description": "Whether or not the button is selected, when `type=\"toggle\"`.\n\nTODO: replace reflected `[selected]` with `:state(selected)`",
               "privacy": "public",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "selected"
+              "attribute": "selected",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -38930,7 +38931,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "type"
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -38966,7 +38968,7 @@
                   }
                 ]
               },
-              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .btn {\n        flex: 1;\n        position: relative;\n      }\n      .btn:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .btn.btn-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ]"
+              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    css`\n      :host {\n        --md-icon-fill: 1;\n        display: inline-flex;\n        isolation: isolate;\n      }\n\n      :host([type='toggle']:not([selected])) {\n        --md-icon-fill: 0;\n      }\n\n      :host([type='toggle'][selected]) {\n        --md-icon-fill: 1;\n      }\n\n      .btn {\n        flex: 1;\n        position: relative;\n      }\n      .btn:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .btn.btn-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ]"
             },
             {
               "kind": "method",
@@ -42624,13 +42626,14 @@
             {
               "kind": "field",
               "name": "selected",
-              "description": "Whether or not the button is selected, when `type=\"toggle\"`.",
+              "description": "Whether or not the button is selected, when `type=\"toggle\"`.\n\nTODO: replace reflected `[selected]` with `:state(selected)`",
               "privacy": "public",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "selected"
+              "attribute": "selected",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -42694,7 +42697,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "type"
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -42730,7 +42734,7 @@
                   }
                 ]
               },
-              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    iconButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .icon-btn {\n        flex: 1;\n      }\n    `,\n  ]"
+              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    iconButtonStyles,\n    css`\n      :host {\n        --md-icon-fill: 1;\n        display: inline-flex;\n      }\n\n      :host([type='toggle']:not([selected])) {\n        --md-icon-fill: 0;\n      }\n\n      :host([type='toggle'][selected]) {\n        --md-icon-fill: 1;\n      }\n\n      .icon-btn {\n        flex: 1;\n      }\n    `,\n  ]"
             },
             {
               "kind": "method",
@@ -46386,6 +46390,64 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/shared/update-class-list.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "updateClassList",
+          "description": "Updates an element's class list based on a key-value set of class names to\ntruthy values.\n\nAdds class names where the value is truthy, and removes class names where the\nvalue is falsy.\n\nNote: this function only iterates keys present in `classInfo`. A key that\ndisappears from the record across calls will NOT be removed (unlike Lit's\n`classMap` directive, which retains previous state). Callers must ensure\nthe same class keys are provided in all calls to the function.",
+          "parameters": [
+            {
+              "name": "element",
+              "description": "The element whose class list will be updated.",
+              "type": {
+                "text": "Element",
+                "references": [
+                  {
+                    "name": "Element",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 7
+                  }
+                ]
+              }
+            },
+            {
+              "name": "classInfo",
+              "description": "A ClassInfo record representing classes to toggle.",
+              "type": {
+                "text": "ClassInfo",
+                "references": [
+                  {
+                    "name": "ClassInfo",
+                    "package": "lit",
+                    "module": "directives/class-map.js",
+                    "start": 0,
+                    "end": 9
+                  }
+                ]
+              }
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "updateClassList",
+          "declaration": {
+            "name": "updateClassList"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "labs/gb/components/splitbutton/md-gb-split-button.js"
@@ -47480,6 +47542,499 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/toolbar/md-gb-toolbar.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/toolbar/toolbar-element.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "ToolbarElement",
+          "description": "A Material Design gBreeze toolbar component.",
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "members": [
+            {
+              "kind": "field",
+              "name": "internals",
+              "privacy": "protected",
+              "type": {
+                "text": "ElementInternals",
+                "references": [
+                  {
+                    "name": "ElementInternals",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 16
+                  }
+                ]
+              },
+              "default": "this.attachInternals()"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "description": "The color scheme of the toolbar.",
+              "privacy": "public",
+              "type": {
+                "text": "ToolbarColor",
+                "references": [
+                  {
+                    "name": "ToolbarColor",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/toolbar/toolbar.js",
+                    "start": 0,
+                    "end": 12
+                  }
+                ]
+              },
+              "default": "'standard'",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "description": "The layout orientation.",
+              "privacy": "public",
+              "type": {
+                "text": "ToolbarOrientation",
+                "references": [
+                  {
+                    "name": "ToolbarOrientation",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/toolbar/toolbar.js",
+                    "start": 0,
+                    "end": 18
+                  }
+                ]
+              },
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "docked",
+              "description": "Whether the toolbar is docked across full width.",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "docked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "privacy": "public",
+              "type": {
+                "text": "CSSResultOrNative[]",
+                "references": [
+                  {
+                    "name": "CSSResultOrNative",
+                    "package": "lit",
+                    "start": 0,
+                    "end": 17
+                  }
+                ]
+              },
+              "default": "[\n    toolbarStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      :host([docked]) {\n        display: flex;\n        width: 100%;\n      }\n\n      :host([docked]) [part='toolbar'] {\n        width: 100%;\n      }\n    `,\n  ]"
+            },
+            {
+              "kind": "method",
+              "name": "connectedCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues<this>",
+                    "references": [
+                      {
+                        "name": "PropertyValues",
+                        "package": "lit",
+                        "start": 0,
+                        "end": 14
+                      }
+                    ]
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult<1>",
+                  "references": [
+                    {
+                      "name": "TemplateResult",
+                      "package": "lit-html",
+                      "module": "development/lit-html.js",
+                      "start": 0,
+                      "end": 14
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "color"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "orientation"
+            },
+            {
+              "name": "docked",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "docked"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display toolbar items (buttons, icon buttons, or custom\ncontent)."
+            },
+            {
+              "name": "leading",
+              "description": "Used to display leading toolbar items."
+            },
+            {
+              "name": "trailing",
+              "description": "Used to display trailing toolbar items."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "toolbar",
+              "description": "The toolbar's root container."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--button-container-color"
+            },
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-elevation"
+            },
+            {
+              "name": "--container-leading-space"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--container-spacing"
+            },
+            {
+              "name": "--container-trailing-space"
+            },
+            {
+              "name": "--docked-container-elevation"
+            },
+            {
+              "name": "--docked-container-height"
+            },
+            {
+              "name": "--docked-container-leading-space"
+            },
+            {
+              "name": "--docked-container-max-spacing"
+            },
+            {
+              "name": "--docked-container-min-spacing"
+            },
+            {
+              "name": "--docked-container-shape"
+            },
+            {
+              "name": "--docked-container-trailing-space"
+            },
+            {
+              "name": "--horizontal-container-height"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--label-text-color"
+            },
+            {
+              "name": "--min-button-size"
+            },
+            {
+              "name": "--motion-duration"
+            },
+            {
+              "name": "--motion-easing"
+            },
+            {
+              "name": "--selected-button-container-color"
+            },
+            {
+              "name": "--selected-icon-color"
+            },
+            {
+              "name": "--selected-label-text-color"
+            },
+            {
+              "name": "--vertical-container-width"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ToolbarElement",
+          "declaration": {
+            "name": "ToolbarElement"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/toolbar/toolbar.cssresult.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResult",
+            "references": [
+              {
+                "name": "CSSResult",
+                "package": "lit",
+                "module": "development/index.js",
+                "start": 0,
+                "end": 9
+              }
+            ]
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "default",
+          "type": {
+            "text": "CSSStyleSheet",
+            "references": [
+              {
+                "name": "CSSStyleSheet",
+                "package": "global:",
+                "start": 0,
+                "end": 13
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/toolbar/toolbar.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TOOLBAR_COLORS",
+          "description": "Toolbar color configurations.",
+          "type": {
+            "text": "{ readonly standard: \"standard\"; readonly vibrant: \"vibrant\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "TOOLBAR_ORIENTATIONS",
+          "description": "Toolbar orientation configurations.",
+          "type": {
+            "text": "{ readonly horizontal: \"horizontal\"; readonly vertical: \"vertical\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "TOOLBAR_CLASSES",
+          "description": "Toolbar classes constants.",
+          "type": {
+            "text": "{ readonly toolbar: \"toolbar\"; readonly toolbarStandard: \"toolbar-standard\"; readonly toolbarVibrant: \"toolbar-vibrant\"; readonly toolbarHorizontal: \"toolbar-horizontal\"; readonly toolbarVertical: \"toolbar-vertical\"; readonly toolbarDocked: \"toolbar-docked\"; }"
+          }
+        },
+        {
+          "kind": "function",
+          "name": "toolbarClasses",
+          "description": "Returns toolbar classes to apply based on the given state.",
+          "parameters": [
+            {
+              "name": "{\n  color = TOOLBAR_COLORS.standard,\n  orientation = TOOLBAR_ORIENTATIONS.horizontal,\n  docked = false,\n}",
+              "description": "The state of the toolbar.",
+              "type": {
+                "text": "ToolbarClassesState",
+                "references": [
+                  {
+                    "name": "ToolbarClassesState",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/toolbar/toolbar.js",
+                    "start": 0,
+                    "end": 19
+                  }
+                ]
+              },
+              "default": "{}",
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "ClassInfo",
+              "references": [
+                {
+                  "name": "ClassInfo",
+                  "package": "lit",
+                  "module": "directives/class-map.js",
+                  "start": 0,
+                  "end": 9
+                }
+              ]
+            },
+            "description": "An object of class names and truthy values if they apply."
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "toolbar",
+          "description": "Lit directive for element class styling.",
+          "type": {
+            "text": "(state?: ToolbarClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "references": [
+              {
+                "name": "ToolbarClassesState",
+                "package": "@material/web",
+                "module": "labs/gb/components/toolbar/toolbar.js",
+                "start": 9,
+                "end": 28
+              },
+              {
+                "name": "AdditionalClasses",
+                "package": "@material/web",
+                "module": "labs/gb/components/shared/directives.js",
+                "start": 31,
+                "end": 48
+              },
+              {
+                "name": "DirectiveResult",
+                "package": "lit-html",
+                "module": "development/directive.js",
+                "start": 53,
+                "end": 68
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TOOLBAR_COLORS",
+          "declaration": {
+            "name": "TOOLBAR_COLORS"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TOOLBAR_ORIENTATIONS",
+          "declaration": {
+            "name": "TOOLBAR_ORIENTATIONS"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TOOLBAR_CLASSES",
+          "declaration": {
+            "name": "TOOLBAR_CLASSES"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toolbarClasses",
+          "declaration": {
+            "name": "toolbarClasses"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toolbar",
+          "declaration": {
+            "name": "toolbar"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "labs/gb/styles/adopt-styles.js",

package/labs/gb/components/appbar/app-bar.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}/*# sourceMappingURL=app-bar.css.map */
+ */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);-webkit-font-smoothing:antialiased;transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}/*# sourceMappingURL=app-bar.css.map */

package/labs/gb/components/appbar/app-bar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["app-bar.scss","_app-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEE,SCGA,oBAEA,+CAEA,wDAEA,yBAEA,mDAEA,2CAEA,kBACA,oBACA,yBACA,6BACA,qBAEA,qDAEA,wCAEA,6CAEA,uDAEA,yDAEA,+DAEA,0CAEA,oDAEA,8CAEA,4DAEA,8DAEA,yCDxCA,YC8CA,0BAEA,6CAEA,uDAEA,+DAEA,6CAEA,uDAEA,+DDvDA,YC4DA,0BAEA,6CAEA,uDAEA,+DAEA,4CAEA,sDAEA,8DDrEA,uBC0EA,0BDvEA,kCC4EA,0BDzEA,gBC8EA,yDAEA,yBAEA,mDAEA,8CAEA,wDAEA,gEAEA,sDAEA,yCAEA,0CD3FA,kBCgGA,yDAEA,wDD/FA,iCCoGA,iED/FA,SACE,sBACA,aACA,kBACA,WACA,mCACA,wCACA,qCACA,sCACA,yBACA,WACE,wEAGF,0DAIF,4BAEE,mBACA,mBACA,8BAIF,wBAEE,sBACA,8BACA,oBAEA,0DACE,aACA,mBACA,mBACA,8BACA,gBACA,WAGF,gEACE,aACA,sBACA,yBACA,oBACA,oBACA,cACA,aAKJ,mCAEE,aACA,mBACA,6BACA,cAGF,iBACE,gCAGF,kBACE,iCAGF,uBACE,aACA,sBACA,uBACA,cACA,YACA,gBAGF,mCACE,kBAGF,eACE,SACA,kBACA,0CACA,qCACA,yBACA,mBACA,gBACA,uBAEA,4BACE,SACA,aACA,gCACA,uBACA,cAIJ,kBACE,SACA,eACA,qBACA,6CACA,wCACA,4BACA,mBACA,gBACA,uBAEA,+BACE,SACA,aACA,gCACA,uBACA,cAIJ,0BACE,aACA,cACA,mBACA,YACA","file":"app-bar.css"}
+{"version":3,"sourceRoot":"","sources":["app-bar.scss","_app-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEE,SCGA,oBAEA,+CAEA,wDAEA,yBAEA,mDAEA,2CAEA,kBACA,oBACA,yBACA,6BACA,qBAEA,qDAEA,wCAEA,6CAEA,uDAEA,yDAEA,+DAEA,0CAEA,oDAEA,8CAEA,4DAEA,8DAEA,yCDxCA,YC8CA,0BAEA,6CAEA,uDAEA,+DAEA,6CAEA,uDAEA,+DDvDA,YC4DA,0BAEA,6CAEA,uDAEA,+DAEA,4CAEA,sDAEA,8DDrEA,uBC0EA,0BDvEA,kCC4EA,0BDzEA,gBC8EA,yDAEA,yBAEA,mDAEA,8CAEA,wDAEA,gEAEA,sDAEA,yCAEA,0CD3FA,kBCgGA,yDAEA,wDD/FA,iCCoGA,iED/FA,SACE,sBACA,aACA,kBACA,WACA,mCACA,wCACA,qCACA,sCACA,yBACA,mCACA,WACE,wEAGF,0DAIF,4BAEE,mBACA,mBACA,8BAIF,wBAEE,sBACA,8BACA,oBAEA,0DACE,aACA,mBACA,mBACA,8BACA,gBACA,WAGF,gEACE,aACA,sBACA,yBACA,oBACA,oBACA,cACA,aAKJ,mCAEE,aACA,mBACA,6BACA,cAGF,iBACE,gCAGF,kBACE,iCAGF,uBACE,aACA,sBACA,uBACA,cACA,YACA,gBAGF,mCACE,kBAGF,eACE,SACA,kBACA,0CACA,qCACA,yBACA,mBACA,gBACA,uBAEA,4BACE,SACA,aACA,gCACA,uBACA,cAIJ,kBACE,SACA,eACA,qBACA,6CACA,wCACA,4BACA,mBACA,gBACA,uBAEA,+BACE,SACA,aACA,gCACA,uBACA,cAIJ,0BACE,aACA,cACA,mBACA,YACA","file":"app-bar.css"}