@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/components/button/button.scss

@@ -0,0 +1,130 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.button {
+  .btn {
+    @include button-tokens.root;
+    &:where(.btn-unselected, [aria-pressed='false']) {
+      @include button-tokens.unselected;
+    }
+    &:is(.btn-selected, [aria-pressed='true']) {
+      @include button-tokens.selected;
+    }
+    &.btn-filled {
+      @include button-tokens.filled;
+      &:where(.btn-unselected, [aria-pressed='false']) {
+        @include button-tokens.filled-unselected;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.filled-selected;
+      }
+    }
+    &.btn-elevated {
+      @include button-tokens.elevated;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.elevated-selected;
+      }
+    }
+    &.btn-tonal {
+      @include button-tokens.tonal;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.tonal-selected;
+      }
+    }
+    &.btn-outlined {
+      @include button-tokens.outlined;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.outlined-selected;
+      }
+    }
+    &.btn-text {
+      @include button-tokens.text;
+    }
+    &.btn-xs {
+      @include button-tokens.xs;
+    }
+    &.btn-sm {
+      @include button-tokens.sm;
+    }
+    &.btn-md {
+      @include button-tokens.md;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.md-selected;
+      }
+    }
+    &.btn-lg {
+      @include button-tokens.lg;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.lg-selected;
+      }
+    }
+    &.btn-xl {
+      @include button-tokens.xl;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.xl-selected;
+      }
+    }
+    &.btn-square {
+      @include button-tokens.square;
+      &:where(.btn-md) {
+        @include button-tokens.square-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.square-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.square-xl;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include button-tokens.pressed;
+      &:where(.btn-md) {
+        @include button-tokens.pressed-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.pressed-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.pressed-xl;
+      }
+    }
+    &:is(:disabled, .disabled) {
+      @include button-tokens.disabled;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--container-height);
+      gap: var(--icon-label-space);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      border: var(--outline-width) solid var(--outline-color);
+      border-radius: var(--container-shape);
+      box-shadow: var(--container-elevation);
+      background-color: var(--container-color);
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      transition:
+        border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),
+        var(--ripple-transition);
+      --md-icon-color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+    }
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+  }
+}

package/labs/gb/components/card/_card-tokens.scss

@@ -0,0 +1,56 @@
+//
+// 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-shape: var(--md-sys-shape-corner-md);
+  --outline-color: transparent;
+  --outline-width: 0;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  // LINT.ThenChange(md-card.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hover {
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container-highest);
+}
+
+@mixin filled-disabled {
+  --container-color: hsl(
+    from var(--md-sys-color-surface-container-highest) h s l / 38%
+  );
+}
+
+@mixin outlined {
+  --container-color: var(--md-sys-color-surface);
+  --outline-color: var(--md-sys-color-outline-variant);
+  --outline-width: 1px;
+}
+
+@mixin outlined-focus {
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin outlined-disabled {
+  --outline-color: hsl(from var(--md-sys-color-outline) h s l / 12%);
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+}
+
+@mixin elevated-hover {
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+}
+
+@mixin elevated-disabled {
+  --container-color: hsl(from var(--md-sys-color-surface) h s l / 38%);
+}

package/labs/gb/components/card/card.scss

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'card-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.card {
+  .card {
+    & {
+      @include card-tokens.root;
+    }
+
+    &:is(:hover, .hover):where(:has(.card-btn:not(:disabled, .disabled))) {
+      @include card-tokens.hover;
+    }
+
+    &.card-filled {
+      @include card-tokens.filled;
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.filled-disabled;
+      }
+    }
+
+    &.card-outlined {
+      @include card-tokens.outlined;
+
+      &:where(:focus-within, .focus) {
+        @include card-tokens.outlined-focus;
+      }
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.outlined-disabled;
+      }
+    }
+
+    &.card-elevated {
+      @include card-tokens.elevated;
+
+      &:is(:hover, .hover):where(:has(.card-btn:not(:disabled, .disabled))) {
+        @include card-tokens.elevated-hover;
+      }
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.elevated-disabled;
+      }
+    }
+
+    & {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+      background-color: var(--container-color);
+      border-radius: var(--container-shape);
+      box-shadow: var(--container-elevation);
+      border: var(--outline-width) solid var(--outline-color);
+    }
+
+    .card-btn {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      position: absolute;
+      inset: 0;
+      color: var(--state-layer-color);
+    }
+  }
+}

package/labs/gb/components/checkbox/_checkbox-tokens.scss

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

package/labs/gb/components/checkbox/checkbox.scss

@@ -0,0 +1,105 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'checkbox-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.checkbox {
+  .checkbox {
+    & {
+      @include checkbox-tokens.root;
+    }
+
+    &:is(:hover, .hover) {
+      @include checkbox-tokens.hovered;
+    }
+
+    &:is(:focus-within, .focus) {
+      @include checkbox-tokens.focused;
+    }
+
+    &:is(:active, .active) {
+      @include checkbox-tokens.pressed;
+    }
+
+    &:is(:checked, .checked, :indeterminate, .indeterminate) {
+      @include checkbox-tokens.selected;
+
+      &:where(:hover, .hover) {
+        @include checkbox-tokens.selected-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include checkbox-tokens.selected-pressed;
+      }
+    }
+
+    &:is(:invalid, .invalid) {
+      @include checkbox-tokens.error;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.error-selected;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include checkbox-tokens.disabled;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      appearance: none;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background-image: none;
+      outline: none;
+      margin: 0;
+      --icon: 'check';
+
+      &:is(:indeterminate, .indeterminate)::before {
+        --icon: 'remove';
+      }
+
+      &::before {
+        content: var(--icon);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        overflow: hidden;
+        aspect-ratio: 1;
+        width: var(--container-size);
+        background: var(--container-color);
+        border-radius: var(--container-shape);
+        border: var(--outline-width) solid var(--outline-color);
+        color: var(--icon-color);
+        font: var(--icon-size) / 1 var(--md-icon-font);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        aspect-ratio: 1;
+        background-image: var(--ripple);
+        color: var(--state-layer-color);
+        width: var(--state-layer-size);
+        border-radius: var(--state-layer-shape);
+        outline: var(--focus-ring-outline);
+        outline-offset: var(--focus-ring-offset);
+        transition: var(--ripple-transition);
+        animation: var(--ripple-animation), var(--focus-ring-animation);
+      }
+    }
+  }
+}

package/labs/gb/components/chip/_chip-tokens.scss

@@ -0,0 +1,167 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.chip
+// --states="hovered|focused|pressed|dragged,:unselected|selected,:filter|input,with-leading-icon|with-avatar,with-trailing-icon,disabled"
+// --exclude=motion,state-layer,indicator
+
+@mixin root {
+  // LINT.IfChange
+  --avatar-opacity: unset;
+  // md.comp.chip.avatar.shape
+  --avatar-shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.avatar.size
+  --avatar-size: 24px;
+  --container-color: unset;
+  // md.comp.chip.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // --container-opacity: unset; // EDIT: unused
+  // md.comp.chip.gap.horizontal
+  --gap-horizontal: var(--md-sys-space-50);
+  // md.comp.chip.height
+  --height: 32px;
+  // md.comp.chip.label-text
+  --label-text: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.chip.label-text
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  // md.comp.chip.unselected.label-text.color
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  // --label-text-opacity: unset; // EDIT: unused
+  // ┌┄ md.comp.chip.label-text
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // md.comp.chip.unselected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  // --leading-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.leading-icon.size
+  --leading-icon-size: 18px;
+  // md.comp.chip.unselected.outline.color
+  --outline-color: var(--md-sys-color-outline-variant);
+  // --outline-opacity: unset; // EDIT: unused
+  // md.comp.chip.unselected.outline.width
+  --outline-width: 1px;
+  // md.comp.chip.padding.bottom
+  --padding-bottom: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.leading
+  --padding-leading: var(--md-sys-space-200);
+  // md.comp.chip.padding.top
+  --padding-top: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.trailing
+  --padding-trailing: var(--md-sys-space-200);
+  // md.comp.chip.unselected.shape
+  --shape: var(--md-sys-shape-corner-md);
+  // md.comp.chip.unselected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // --trailing-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.trailing-icon.size
+  --trailing-icon-size: 18px;
+  // LINT.ThenChange(md-gb-chip.ts) sync with `@cssprop` jsdoc tags
+}
+
+@mixin pressed {
+  // md.comp.chip.pressed.shape
+  --shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin dragged {
+  // md.comp.chip.dragged.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin selected {
+  // md.comp.chip.selected.container.color
+  --container-color: var(--md-sys-color-secondary-container);
+  // md.comp.chip.selected.label-text.color
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.outline.width
+  --outline-width: 0px;
+  // md.comp.chip.selected.shape
+  --shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.selected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin input {
+  // md.comp.chip.input.padding.leading
+  --padding-leading: var(--md-sys-space-150);
+  // md.comp.chip.input.padding.trailing
+  --padding-trailing: var(--md-sys-space-150);
+}
+
+@mixin with-leading-icon {
+  // md.comp.chip.with-leading-icon.padding.leading
+  --padding-leading: var(--md-sys-space-100);
+}
+
+@mixin with-avatar {
+  // md.comp.chip.with-avatar.padding.leading
+  --padding-leading: var(--md-sys-space-50);
+}
+
+@mixin with-trailing-icon {
+  // md.comp.chip.with-trailing-icon.padding.trailing
+  --padding-trailing: var(--md-sys-space-100);
+}
+
+@mixin disabled {
+  // md.comp.chip.disabled.avatar.opacity
+  --avatar-opacity: 0.38;
+  // ┌ md.comp.chip.disabled.label-text.opacity
+  // md.comp.chip.disabled.label-text.color
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.disabled.leading-icon.opacity
+  // md.comp.chip.disabled.leading-icon.color
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.unselected.disabled.outline.opacity
+  // md.comp.chip.unselected.disabled.outline.color
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);
+  // ┌ md.comp.chip.disabled.trailing-icon.opacity
+  // md.comp.chip.disabled.trailing-icon.color
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+}
+
+@mixin disabled-selected {
+  // ┌ md.comp.chip.selected.disabled.container.opacity
+  // md.comp.chip.selected.disabled.container.color
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.12);
+}
+
+// EDIT: Manual adjustments
+@mixin filter {
+  // Hoisted to root, so empty here to satisfy chip.scss mapping
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  --outline-width: 0;
+}
+
+@mixin outlined {
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-outline);
+  --outline-width: 1px;
+}

package/labs/gb/components/chip/chip.scss

@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'chip-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.chip {
+  .chip {
+    @include chip-tokens.root;
+    &.chip-elevated {
+      @include chip-tokens.elevated;
+    }
+    &.chip-filled {
+      @include chip-tokens.filled;
+    }
+    &.chip-tonal {
+      @include chip-tokens.tonal;
+    }
+    &.chip-outlined {
+      @include chip-tokens.outlined;
+    }
+    &:is(.chip-selected, [aria-pressed='true']) {
+      @include chip-tokens.selected;
+    }
+    &.chip-filter {
+      @include chip-tokens.filter;
+    }
+    &.chip-input {
+      @include chip-tokens.input;
+    }
+    &.chip-with-leading-icon {
+      @include chip-tokens.with-leading-icon;
+    }
+    &.chip-with-trailing-icon {
+      @include chip-tokens.with-trailing-icon;
+    }
+    &.chip-with-avatar {
+      @include chip-tokens.with-avatar;
+    }
+    &:is(:disabled, .disabled, [aria-disabled='true']) {
+      @include chip-tokens.disabled;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--height);
+      gap: var(--gap-horizontal);
+      padding-inline: var(--padding-leading) var(--padding-trailing);
+      padding-block: var(--padding-top) var(--padding-bottom);
+      border: var(--outline-width) solid var(--outline-color);
+      border-radius: var(--shape);
+      box-shadow: var(--container-elevation);
+      background-color: var(--container-color);
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      box-sizing: border-box;
+      user-select: none;
+      white-space: nowrap;
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+    &:not(:disabled, .disabled, [aria-disabled='true']) {
+      cursor: pointer;
+    }
+
+    .chip-action,
+    .chip-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--gap-horizontal);
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      cursor: inherit;
+    }
+    .chip-remove {
+      border-radius: 50%;
+      aspect-ratio: 1;
+      margin-inline-start: 4px;
+      outline: var(--focus-ring-outline);
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+  }
+}

package/labs/gb/components/divider/_divider-tokens.scss

@@ -0,0 +1,11 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --color: var(--md-sys-color-outline-variant);
+  --thickness: 1px;
+  // LINT.ThenChange(md-divider.ts) keep in sync with `@cssprop` jsdoc tags
+}