@maicol07/material-web 2.3.0 → 2.5.0

package/button/internal/_shared.scss

@@ -122,7 +122,7 @@
 
   .background {
     // Background color. Separate node for disabled opacity styles.
-    background-color: var(--_container-color);
+    background: var(--_container-color);
     border-radius: inherit;
     inset: 0;
     position: absolute;
@@ -145,7 +145,7 @@
   }
 
   :host(:is([disabled], [soft-disabled])) .background {
-    background-color: var(--_disabled-container-color);
+    background: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
 

package/button/internal/_touch-target.scss

@@ -7,7 +7,7 @@
   .touch {
     position: absolute;
     top: 50%;
-    height: 48px;
+    height: max(48px, 100%);
     left: 0;
     right: 0;
     transform: translateY(-50%);

package/labs/gb/components/appbar/_app-bar-tokens.scss

@@ -0,0 +1,136 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.app-bar
+// --states=":small|[medium-flexible=medium]|[large-flexible=large],with-subtitle,search,on-scroll"
+// --exclude=".medium.,.large."
+
+@mixin root {
+  // LINT.IfChange
+  // md.comp.app-bar.avatar.size
+  --avatar-size: 32px;
+  // md.comp.app-bar.container.color
+  --container-color: var(--md-sys-color-surface);
+  // md.comp.app-bar.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // md.comp.app-bar.small.container.height
+  --container-height: 64px;
+  // md.comp.app-bar.container.shape
+  --container-shape: var(--md-sys-shape-corner-none);
+  // md.comp.app-bar.icon-button-space
+  --icon-button-space: var(--md-sys-space-0);
+  // md.comp.app-bar.icon.size
+  --icon-size: 24px;
+  --label-text: unset;
+  --label-text-axes: unset;
+  --label-text-tracking: unset;
+  --label-color: unset;
+  // md.comp.app-bar.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface);
+  // md.comp.app-bar.leading-space
+  --leading-space: var(--md-sys-space-50);
+  // ┌ md.comp.app-bar.small.subtitle.font
+  --subtitle: var(--md-sys-typescale-label-md);
+  // ┌┄ md.comp.app-bar.small.subtitle
+  --subtitle-axes: var(--md-sys-typescale-label-md-axes);
+  // md.comp.app-bar.subtitle.color
+  --subtitle-color: var(--md-sys-color-on-surface-variant);
+  // ┌┄ md.comp.app-bar.small.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-label-md-tracking);
+  // ┌ md.comp.app-bar.small.title.font
+  --title: var(--md-sys-typescale-title-lg);
+  // ┌┄ md.comp.app-bar.small.title
+  --title-axes: var(--md-sys-typescale-title-lg-axes);
+  // md.comp.app-bar.title.color
+  --title-color: var(--md-sys-color-on-surface);
+  // ┌┄ md.comp.app-bar.small.title
+  --title-tracking: var(--md-sys-typescale-title-lg-tracking);
+  // md.comp.app-bar.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // md.comp.app-bar.trailing-space
+  --trailing-space: var(--md-sys-space-50);
+  // LINT.ThenChange(md-gb-app-bar.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin medium {
+  // md.comp.app-bar.medium-flexible.container.height
+  --container-height: 112px;
+  // ┌ md.comp.app-bar.medium-flexible.subtitle.font
+  --subtitle: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.app-bar.medium-flexible.subtitle
+  --subtitle-axes: var(--md-sys-typescale-label-lg-axes);
+  // ┌┄ md.comp.app-bar.medium-flexible.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // ┌ md.comp.app-bar.medium-flexible.title.font
+  --title: var(--md-sys-typescale-headline-md);
+  // ┌┄ md.comp.app-bar.medium-flexible.title
+  --title-axes: var(--md-sys-typescale-headline-md-axes);
+  // ┌┄ md.comp.app-bar.medium-flexible.title
+  --title-tracking: var(--md-sys-typescale-headline-md-tracking);
+}
+
+@mixin large {
+  // md.comp.app-bar.large-flexible.container.height
+  --container-height: 120px;
+  // ┌ md.comp.app-bar.large-flexible.subtitle.font
+  --subtitle: var(--md-sys-typescale-title-md);
+  // ┌┄ md.comp.app-bar.large-flexible.subtitle
+  --subtitle-axes: var(--md-sys-typescale-title-md-axes);
+  // ┌┄ md.comp.app-bar.large-flexible.subtitle
+  --subtitle-tracking: var(--md-sys-typescale-title-md-tracking);
+  // ┌ md.comp.app-bar.large-flexible.title.font
+  --title: var(--md-sys-typescale-display-sm);
+  // ┌┄ md.comp.app-bar.large-flexible.title
+  --title-axes: var(--md-sys-typescale-display-sm-axes);
+  // ┌┄ md.comp.app-bar.large-flexible.title
+  --title-tracking: var(--md-sys-typescale-display-sm-tracking);
+}
+
+@mixin with-subtitle {
+  // ┌ md.comp.app-bar.medium-flexible.with-subtitle.container.height
+  --container-height: 136px;
+}
+
+@mixin with-subtitle-large {
+  // md.comp.app-bar.large-flexible.with-subtitle.container.height
+  --container-height: 152px;
+}
+
+@mixin search {
+  // md.comp.app-bar.search.container.color
+  --container-color: var(--md-sys-color-surface-container);
+  // md.comp.app-bar.small.search.container.height
+  --container-height: 56px;
+  // md.comp.app-bar.small.search.container.shape
+  --container-shape: var(--md-sys-shape-corner-full);
+  // ┌ md.comp.app-bar.small.search.label-text.font
+  --label-text: var(--md-sys-typescale-body-lg);
+  // ┌┄ md.comp.app-bar.small.search.label-text
+  --label-text-axes: var(--md-sys-typescale-body-lg-axes);
+  // ┌┄ md.comp.app-bar.small.search.label-text
+  --label-text-tracking: var(--md-sys-typescale-body-lg-tracking);
+  // md.comp.app-bar.search.label.color
+  --label-color: var(--md-sys-color-on-surface-variant);
+  // md.comp.app-bar.search.leading-space
+  --leading-space: var(--md-sys-space-100);
+  // md.comp.app-bar.search.trailing-space
+  --trailing-space: var(--md-sys-space-100);
+}
+
+@mixin on-scroll {
+  // md.comp.app-bar.on-scroll.container.color
+  --container-color: var(--md-sys-color-surface-container);
+  // md.comp.app-bar.on-scroll.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+}
+
+@mixin on-scroll-search {
+  // md.comp.app-bar.search.on-scroll.container.color
+  --container-color: var(--md-sys-color-surface-container-highest);
+}
+

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

@@ -0,0 +1,167 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'app-bar-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.app-bar {
+  // Component tokens
+  .app-bar {
+    @include app-bar-tokens.root;
+  }
+  .app-bar-md {
+    @include app-bar-tokens.medium;
+  }
+  .app-bar-lg {
+    @include app-bar-tokens.large;
+  }
+  .app-bar-with-subtitle {
+    @include app-bar-tokens.with-subtitle;
+  }
+  .app-bar-with-subtitle.app-bar-lg {
+    @include app-bar-tokens.with-subtitle-large;
+  }
+  .app-bar-search {
+    @include app-bar-tokens.search;
+  }
+  .app-bar-scrolled {
+    @include app-bar-tokens.on-scroll;
+  }
+  .app-bar-scrolled.app-bar-search {
+    @include app-bar-tokens.on-scroll-search;
+  }
+
+  // Component styles
+  .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);
+  }
+
+  // Small and Search layouts (single row)
+  .app-bar-sm,
+  .app-bar-search {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // Medium and Large layouts (two rows)
+  .app-bar-md,
+  .app-bar-lg {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+
+    .app-bar-top-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 64px;
+      width: 100%;
+    }
+
+    .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;
+    }
+  }
+
+  // Slot containers
+  .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;
+
+    ::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;
+
+    ::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;
+  }
+}

package/labs/gb/components/badge/_badge-tokens.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --container-color: var(--md-sys-color-error);
+  --shape: var(--md-sys-shape-corner-full);
+  --size: 6px;
+  --label-text-color: var(--md-sys-color-on-error);
+  --label-text: var(--md-sys-typescale-label-sm);
+  --label-text-tracking: var(--md-sys-typescale-label-sm-tracking);
+  --label-text-axes: var(--md-sys-typescale-label-sm-axes);
+}
+
+@mixin large {
+  --size: 16px;
+}

package/labs/gb/components/badge/badge.scss

@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'badge-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.badge {
+  .badge {
+    & {
+      @include badge-tokens.root;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--container-color);
+      border-radius: var(--shape);
+      height: var(--size);
+      width: var(--size);
+      box-sizing: border-box;
+
+      slot {
+        display: none;
+      }
+    }
+
+    // Large badge (with text)
+    &.badge-large {
+      @include badge-tokens.large;
+      width: auto;
+      min-width: var(--size);
+      padding: 0 4px;
+
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+
+      slot {
+        display: contents;
+      }
+    }
+  }
+}

package/labs/gb/components/button/_button-tokens.scss

@@ -0,0 +1,200 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --container-height: auto;
+  --container-shape: calc(var(--container-height) / 2);
+  --icon-color: currentColor;
+  --icon-label-space: 8px;
+  --icon-size: 20px;
+  --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  --label-text-color: currentColor;
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-space: 0;
+  --md-icon-fill: 1;
+  --outline-color: transparent;
+  --outline-width: 0;
+  --state-layer-color: transparent;
+  --trailing-space: 0;
+  // LINT.ThenChange(button-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin unselected {
+  --md-icon-fill: 0;
+}
+
+@mixin selected {
+  --container-shape: var(--md-sys-shape-corner-md);
+  --md-icon-fill: 1;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin filled-unselected {
+  --container-color: var(--md-sys-color-surface-container);
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin filled-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --icon-color: var(--md-sys-color-primary);
+  --label-text-color: var(--md-sys-color-primary);
+}
+
+@mixin elevated-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --icon-color: var(--md-sys-color-on-secondary-container);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin tonal-selected {
+  --container-color: var(--md-sys-color-secondary);
+  --icon-color: var(--md-sys-color-on-secondary);
+  --label-text-color: var(--md-sys-color-on-secondary);
+}
+
+@mixin outlined {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  --outline-color: var(--md-sys-color-outline-variant);
+}
+
+@mixin outlined-selected {
+  --container-color: var(--md-sys-color-inverse-surface);
+  --icon-color: var(--md-sys-color-inverse-on-surface);
+  --label-text-color: var(--md-sys-color-inverse-on-surface);
+}
+
+@mixin text {
+  --icon-color: var(--md-sys-color-primary);
+  --label-text-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin xs {
+  --container-height: 32px;
+  --leading-space: 12px;
+  --outline-width: 1px;
+  --trailing-space: 12px;
+}
+
+@mixin sm {
+  --container-height: 40px;
+  --leading-space: 16px;
+  --outline-width: 1px;
+  --trailing-space: 16px;
+}
+
+@mixin md {
+  --container-height: 56px;
+  --icon-size: 24px;
+  --label-text: var(--md-sys-typescale-title-md);
+  --label-text-axes: var(--md-sys-typescale-title-md-axes);
+  --label-text-tracking: var(--md-sys-typescale-title-md-tracking);
+  --leading-space: 24px;
+  --outline-width: 1px;
+  --trailing-space: 24px;
+}
+
+@mixin md-selected {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --icon-label-space: 12px;
+  --icon-size: 32px;
+  --label-text: var(--md-sys-typescale-headline-sm);
+  --label-text-axes: var(--md-sys-typescale-headline-sm-axes);
+  --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
+  --leading-space: 48px;
+  --outline-width: 2px;
+  --trailing-space: 48px;
+}
+
+@mixin lg-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin xl {
+  --container-height: 136px;
+  --icon-label-space: 16px;
+  --icon-size: 40px;
+  --label-text: var(--md-sys-typescale-headline-lg);
+  --label-text-axes: var(--md-sys-typescale-headline-lg-axes);
+  --label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);
+  --leading-space: 64px;
+  --outline-width: 3px;
+  --trailing-space: 64px;
+}
+
+@mixin xl-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin square-md {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin square-lg {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-xl {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-selected {
+  --container-shape: calc(var(--container-height) / 2);
+}
+
+@mixin pressed {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin pressed-md {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin pressed-lg {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin pressed-xl {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin disabled {
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}