@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/components/list/_list-tokens.scss

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --gap: 0;
+  // LINT.ThenChange(list-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin segmented {
+  --gap: 2px;
+}
+
+@mixin item {
+  // LINT.IfChange
+  --container-height: 56px;
+  --container-color: transparent;
+  --container-shape: var(--md-sys-shape-corner-xs);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --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);
+  --leading-space: 16px;
+  --trailing-space: 16px;
+  --between-space: 12px;
+  --top-space: 10px;
+  --bottom-space: 10px;
+  --avatar-size: 40px;
+  --avatar-shape: var(--md-sys-shape-corner-full);
+  --avatar-color: var(--md-sys-color-primary-container);
+  --avatar-label: var(--md-sys-typescale-title-md);
+  --avatar-label-axes: var(--md-sys-typescale-title-md-axes);
+  --avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);
+  --avatar-label-color: var(--md-sys-color-on-primary-container);
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  --leading-icon-size: 20px;
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --trailing-icon-size: 20px;
+  --overline: var(--md-sys-typescale-label-sm);
+  --overline-axes: var(--md-sys-typescale-label-sm-axes);
+  --overline-tracking: var(--md-sys-typescale-label-sm-tracking);
+  --overline-color: var(--md-sys-color-on-surface-variant);
+  --supporting-text: var(--md-sys-typescale-body-md);
+  --supporting-text-axes: var(--md-sys-typescale-body-md-axes);
+  --supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);
+  --supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --trailing-supporting-text: var(--md-sys-typescale-label-sm);
+  --trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);
+  --trailing-supporting-text-tracking: var(
+    --md-sys-typescale-label-sm-tracking
+  );
+  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  // LINT.ThenChange(list-item-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin item-segmented {
+  --container-color: var(--md-sys-color-surface);
+}
+
+@mixin item-hovered {
+  --container-shape: var(--md-sys-shape-corner-md);
+  --leading-icon-color: var(--md-sys-color-on-surface);
+  --trailing-icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin item-focused {
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --leading-icon-color: var(--md-sys-color-on-surface);
+  --trailing-icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin item-pressed {
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --leading-icon-color: var(--md-sys-color-on-surface);
+  --trailing-icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin item-selected {
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --container-color: var(--md-sys-color-secondary-container);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  --leading-icon-color: var(--md-sys-color-on-secondary-container);
+  --trailing-icon-color: var(--md-sys-color-on-secondary-container);
+  --overline-color: var(--md-sys-color-on-secondary-container);
+  --supporting-text-color: var(--md-sys-color-on-secondary-container);
+  --trailing-supporting-text-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin item-disabled {
+  --container-shape: var(--md-sys-shape-corner-xs);
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-supporting-text-color: hsl(
+    from var(--md-sys-color-on-surface) h s l / 38%
+  );
+}

package/labs/gb/components/list/list.scss

@@ -0,0 +1,217 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../checkbox/checkbox-tokens';
+@use '../radio/radio-tokens';
+@use 'list-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;
+@layer md.comp.list {
+  .list {
+    & {
+      @include list-tokens.root;
+    }
+
+    &.list-segmented {
+      @include list-tokens.segmented;
+      --list-segmented: true;
+    }
+
+    & {
+      display: flex;
+      flex-direction: column;
+      margin: unset;
+      padding: unset;
+      list-style: none;
+      gap: var(--gap);
+      border-radius: var(--container-shape);
+    }
+
+    > :first-child:not(slot),
+    ::slotted(:first-child) {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+      --first-child: true;
+    }
+
+    > :last-child:not(slot),
+    ::slotted(:last-child) {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      --last-child: true;
+    }
+
+    slot {
+      border-radius: inherit;
+    }
+  }
+
+  .list-select {
+    &,
+    &::picker(select) {
+      // stylelint-disable-next-line scss/declaration-property-value-no-unknown --
+      // Uses customizable select
+      appearance: base-select;
+    }
+
+    border: none;
+    background: none;
+    height: fit-content;
+  }
+
+  .list-item {
+    & {
+      @include list-tokens.item;
+
+      @container style(--list-segmented: true) {
+        @include list-tokens.item-segmented;
+      }
+    }
+
+    &:where(:not(.list-item-static)) {
+      &:is(:hover, .hover) {
+        @include list-tokens.item-hovered;
+      }
+
+      &:is(:focus-within, .focus) {
+        @include list-tokens.item-focused;
+      }
+
+      &:is(:active, .active) {
+        @include list-tokens.item-pressed;
+      }
+    }
+
+    &:is(:checked, .checked) {
+      @include list-tokens.item-selected;
+    }
+
+    &:is(:disabled, .disabled) {
+      @include list-tokens.item-disabled;
+    }
+
+    & {
+      display: flex;
+      align-items: center;
+      gap: var(--between-space);
+      box-sizing: border-box;
+      min-height: var(--container-height);
+      border-radius: var(--container-shape);
+      background-color: var(--container-color);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      padding-block: var(--top-space) var(--bottom-space);
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      appearance: none;
+      border: none;
+      text-align: unset;
+      text-decoration: unset;
+      width: stretch;
+    }
+
+    @container style(--first-child: true) {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    @container style(--last-child: true) {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    &:not(:disabled, .disabled, .list-item-static) {
+      cursor: pointer;
+    }
+
+    .list-item-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .list-item-leading,
+    .list-item-trailing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 28px;
+    }
+
+    .list-item-leading {
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+
+    .list-item-trailing {
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+
+    .list-item-overline {
+      font: var(--overline);
+      letter-spacing: var(--overline-tracking);
+      font-variation-settings: var(--overline-axes);
+      color: var(--overline-color);
+    }
+
+    .list-item-supporting-text {
+      font: var(--supporting-text);
+      letter-spacing: var(--supporting-text-tracking);
+      font-variation-settings: var(--supporting-text-axes);
+      color: var(--supporting-text-color);
+    }
+
+    .list-item-trailing-text {
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+      font-variation-settings: var(--trailing-supporting-text-axes);
+      color: var(--trailing-supporting-text-color);
+    }
+
+    .list-item-avatar {
+      display: grid;
+      place-items: center;
+      background-color: var(--avatar-color);
+      border-radius: var(--avatar-shape);
+      aspect-ratio: 1;
+      width: var(--avatar-size);
+      font: var(--avatar-label);
+      letter-spacing: var(--avatar-label-tracking);
+      font-variation-settings: var(--avatar-label-axes);
+      color: var(--avatar-label-color);
+    }
+
+    &::checkmark {
+      font: var(--leading-icon-size) var(--md-icon-font);
+      color: var(--leading-icon-color);
+      content: 'check';
+    }
+
+    &:has(.list-item-radio, .list-item-checkbox)::checkmark {
+      display: none;
+    }
+
+    .list-item-radio,
+    .list-item-checkbox {
+      width: min-content;
+      height: min-content;
+      --ripple: none;
+      --focus-ring-outline: none;
+    }
+
+    &:is(:checked, .checked) .list-item-radio {
+      @include radio-tokens.selected;
+      --icon: 'radio_button_checked';
+    }
+
+    &:is(:checked, .checked) .list-item-checkbox {
+      @include checkbox-tokens.selected;
+    }
+  }
+}

package/labs/gb/components/menu/_menu-tokens.scss

@@ -0,0 +1,161 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --gap: 2px;
+  --group-padding: 2px;
+  --group-shape: var(--md-sys-shape-corner-sm);
+  --section-label-text-color: var(--md-sys-color-on-surface-variant);
+  // LINT.ThenChange(menu-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin inactive {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin active {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin vibrant {
+  --container-color: var(--md-sys-color-tertiary-container);
+}
+
+@mixin item {
+  // LINT.IfChange
+  --between-space: 12px;
+  --bottom-space: 8px;
+  --container-color: transparent;
+  --height: 44px;
+  --inner-corner-corner-size: none;
+  --label-text-color: var(--md-sys-color-on-surface);
+  --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  --leading-icon-size: 20px;
+  --leading-space: 16px;
+  --shape: var(--md-sys-shape-corner-xs);
+  --supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --supporting-text: var(--md-sys-typescale-body-sm);
+  --supporting-text-axes: var(--md-sys-typescale-body-sm-axes);
+  --supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);
+  --top-space: 8px;
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --trailing-icon-size: 20px;
+  --trailing-space: 16px;
+  --trailing-supporting-text: var(--md-sys-typescale-label-lg);
+  --trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);
+  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --trailing-supporting-text-tracking: var(
+    --md-sys-typescale-label-lg-tracking
+  );
+  // LINT.ThenChange(menu-item-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin item-first-child {
+  --inner-corner-corner-size: var(--md-sys-shape-corner-xs);
+  --shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin item-last-child {
+  --inner-corner-corner-size: var(--md-sys-shape-corner-xs);
+  --shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin item-vibrant {
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+  --leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --supporting-text-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin item-vibrant-hovered {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-vibrant-focused {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-vibrant-pressed {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-selected {
+  --container-color: var(--md-sys-color-tertiary-container);
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+  --leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --shape: var(--md-sys-shape-corner-md);
+  --supporting-text-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin item-selected-vibrant {
+  --container-color: var(--md-sys-color-tertiary);
+  --label-text-color: var(--md-sys-color-on-tertiary);
+  --leading-icon-color: var(--md-sys-color-on-tertiary);
+  --supporting-text-color: var(--md-sys-color-on-tertiary);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary);
+}
+
+@mixin item-disabled {
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-supporting-text-color: hsl(
+    from var(--md-sys-color-on-surface) h s l / 38%
+  );
+}
+
+@mixin item-disabled-vibrant {
+  --label-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --leading-icon-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --supporting-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --trailing-icon-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --trailing-supporting-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+}
+
+@mixin item-disabled-selected {
+  --container-color: hsl(
+    from var(--md-sys-color-tertiary-container) h s l / 38%
+  );
+  --label-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --leading-icon-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --supporting-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --trailing-icon-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+  --trailing-supporting-text-color: hsl(
+    from var(--md-sys-color-on-tertiary-container) h s l / 38%
+  );
+}

package/labs/gb/components/menu/menu.scss

@@ -0,0 +1,174 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'menu-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;
+@layer md.comp.menu {
+  .menu {
+    & {
+      @include menu-tokens.root;
+    }
+    &.menu-vibrant {
+      @include menu-tokens.vibrant;
+      --menu-vibrant: true;
+    }
+
+    & {
+      flex-direction: column;
+      box-shadow: var(--container-elevation);
+      border-radius: var(--container-shape);
+      background-color: var(--container-color);
+      padding-block: var(--group-padding);
+    }
+
+    &:popover-open,
+    &.menu-host {
+      display: flex;
+    }
+
+    &:popover-open,
+    :host(:popover-open):has(&.menu-host) {
+      position-area: end span-end;
+      border: none;
+    }
+
+    :host(:popover-open):has(&.menu-host) {
+      overflow: visible;
+      background: none;
+      padding: 0;
+    }
+
+    &.menu-host {
+      overflow: auto;
+    }
+
+    .divider,
+    ::slotted(.divider) {
+      margin: 8px 16px;
+    }
+  }
+
+  .menu-item {
+    & {
+      @include menu-tokens.item;
+    }
+    &:first-child {
+      @include menu-tokens.item-first-child;
+    }
+    &:last-child {
+      @include menu-tokens.item-last-child;
+    }
+    @container style(--menu-vibrant: true) {
+      & {
+        @include menu-tokens.item-vibrant;
+      }
+      &:where(:hover, .hover) {
+        @include menu-tokens.item-vibrant-hovered;
+      }
+      &:where(:focus-within, .focus) {
+        @include menu-tokens.item-vibrant-focused;
+      }
+      &:where(:active, .active) {
+        @include menu-tokens.item-vibrant-pressed;
+      }
+    }
+
+    &:is(:checked, .checked) {
+      @include menu-tokens.item-selected;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-selected-vibrant;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include menu-tokens.item-disabled;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-disabled-vibrant;
+      }
+      &:where(:checked, .checked) {
+        @include menu-tokens.item-disabled-selected;
+      }
+    }
+
+    & {
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      box-sizing: border-box;
+      gap: var(--between-space);
+      min-height: calc(var(--height) + 4px);
+      border-radius: var(--shape);
+      padding-block: var(--top-space) var(--bottom-space);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      background-image: none;
+      outline: none;
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+    }
+
+    &::before {
+      display: flex;
+      content: '';
+      position: absolute;
+      inset: 2px 4px;
+      z-index: -1;
+      border-radius: inherit;
+      background-color: var(--container-color);
+      background-image: var(--ripple);
+      animation: var(--ripple-animation), var(--focus-ring-animation);
+      transition: var(--ripple-transition);
+      outline: var(--focus-ring-outline);
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+
+    .menu-item-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .menu-item-supporting-text {
+      color: var(--supporting-text-color);
+      font: var(--supporting-text);
+      letter-spacing: var(--supporting-text-tracking);
+      font-variation-settings: var(--supporting-text-axes);
+    }
+
+    .menu-item-trailing-text {
+      color: var(--trailing-supporting-text-color);
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+      font-variation-settings: var(--trailing-supporting-text-axes);
+    }
+
+    .menu-item-leading,
+    .menu-item-trailing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .menu-item-leading {
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+
+    .menu-item-trailing {
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+  }
+}

package/labs/gb/components/radio/_radio-tokens.scss

@@ -0,0 +1,39 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --icon-size: 20px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+  // LINT.ThenChange(md-radio.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hovered {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected {
+  --icon-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin disabled {
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}