@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/components/radio/radio.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 'radio-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.radio {
+  .radio {
+    & {
+      @include radio-tokens.root;
+
+      &:where(:hover, .hover) {
+        @include radio-tokens.hovered;
+      }
+      &:where(:focus-within, .focus) {
+        @include radio-tokens.focused;
+      }
+      &:where(:active, .active) {
+        @include radio-tokens.pressed;
+      }
+    }
+    &:is(:checked, .checked) {
+      @include radio-tokens.selected;
+
+      &:where(:active, .active) {
+        @include radio-tokens.selected-pressed;
+      }
+    }
+    &:is(:disabled, .disabled) {
+      @include radio-tokens.disabled;
+    }
+
+    & {
+      appearance: none;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background-image: none;
+      outline: none;
+      --icon: 'radio_button_unchecked';
+
+      &::before {
+        content: var(--icon);
+        color: var(--icon-color);
+        font: var(--icon-size) / 1 var(--md-icon-font);
+        width: var(--icon-size);
+        aspect-ratio: 1;
+      }
+      &:is(:checked, .checked)::before {
+        --icon: 'radio_button_checked';
+      }
+      &::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/ripple/ripple.scss

@@ -0,0 +1,103 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys;
+@layer md.comp.ripple {
+  @property --ripple-scale {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-hover-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-press-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-x {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+  @property --ripple-y {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+
+  .ripple {
+    --ripple-color: currentColor;
+    --ripple-press-transition: --ripple-press-opacity 375ms linear;
+    --ripple-transition: --ripple-hover-opacity 15ms linear,
+      var(--ripple-press-transition);
+    --ripple-animation: ripple-release 375ms linear;
+    --ripple: radial-gradient(
+        hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity))
+      ),
+      radial-gradient(
+        circle at var(--ripple-x) var(--ripple-y),
+        hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity))
+          var(--ripple-scale),
+        transparent calc(var(--ripple-scale) * 1.35)
+      );
+
+    background-image: var(--ripple);
+    transition: var(--ripple-transition);
+    animation: var(--ripple-animation), var(--focus-ring-animation, none);
+
+    // Ripples support the following DOM use cases:
+    // 1. `.ripple` and interactive element are the same.
+    // 2. `.ripple` is a parent of a child interactive `.ripple-target`.
+    // 3. `.ripple` is a child of a parent interactive `.ripple-target`.
+    // 4. `.ripple.ripple-host` is a within an interactive shadow DOM host.
+    //
+    // Pseudo class emulation is only needed for the `.ripple` element, not for
+    // the target or host elements.
+
+    &:is(:hover, .hover),
+    &:has(.ripple-target:hover),
+    .ripple-target:hover &,
+    :host(:hover) &.ripple-host {
+      --ripple-hover-opacity: 8%;
+    }
+
+    &:is(:active, .active),
+    &:has(.ripple-target:active),
+    .ripple-target:active &,
+    :host(:active) &.ripple-host {
+      --ripple-press-opacity: 10%;
+      --ripple-press-transition: --ripple-press-opacity 100ms linear;
+      --ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    &:is(:disabled, .disabled) {
+      --ripple: none;
+    }
+  }
+
+  @keyframes ripple-press {
+    from {
+      --ripple-scale: 20%;
+    }
+    to {
+      --ripple-scale: 100%;
+      --ripple-x: 50%;
+      --ripple-y: 50%;
+    }
+  }
+
+  @keyframes ripple-release {
+    from {
+      --ripple-scale: 100%;
+    }
+    to {
+      --ripple-scale: 100%;
+    }
+  }
+}

package/labs/gb/components/splitbutton/_split-button-tokens.scss

@@ -0,0 +1,139 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --between-space: 2px;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin button {
+  // LINT.IfChange
+  --icon-size: 0;
+  --inner-corner-size: 0;
+  --outer-corner-size: calc(var(--container-height) / 2);
+  --leading-space: 0;
+  --trailing-space: 0;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin button-xs {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-xs-leading {
+  --leading-space: 12px;
+  --trailing-space: 10px;
+}
+
+@mixin button-xs-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-xs-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-xs-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-sm {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-sm-leading {
+  --leading-space: 16px;
+  --trailing-space: 12px;
+}
+
+@mixin button-sm-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-sm-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-sm-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md {
+  --icon-size: 26px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-md-leading {
+  --leading-space: 24px;
+  --trailing-space: 24px;
+}
+
+@mixin button-md-trailing {
+  --leading-space: 15px;
+  --trailing-space: 15px;
+}
+
+@mixin button-md-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-lg {
+  --icon-size: 38px;
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-lg-leading {
+  --leading-space: 48px;
+  --trailing-space: 48px;
+}
+
+@mixin button-lg-trailing {
+  --leading-space: 29px;
+  --trailing-space: 29px;
+}
+
+@mixin button-lg-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-lg-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl {
+  --icon-size: 50px;
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-xl-leading {
+  --leading-space: 64px;
+  --trailing-space: 64px;
+}
+
+@mixin button-xl-trailing {
+  --leading-space: 43px;
+  --trailing-space: 43px;
+}
+
+@mixin button-xl-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-trailing-selected {
+  --inner-corner-size: calc(var(--container-height) / 2);
+}

package/labs/gb/components/splitbutton/split-button.scss

@@ -0,0 +1,164 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'split-button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;
+@layer md.comp.split-button {
+  .split-btn {
+    @include split-button-tokens.root;
+
+    .btn {
+      @include split-button-tokens.button;
+    }
+
+    .btn-xs {
+      @include split-button-tokens.button-xs;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-xs-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-xs-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-xs-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-xs-pressed;
+      }
+    }
+
+    .btn-sm {
+      @include split-button-tokens.button-sm;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-sm-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-sm-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-sm-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-sm-pressed;
+      }
+    }
+
+    .btn-md {
+      @include split-button-tokens.button-md;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-md-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-md-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-md-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-md-pressed;
+      }
+    }
+
+    .btn-lg {
+      @include split-button-tokens.button-lg;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-lg-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-lg-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-lg-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-lg-pressed;
+      }
+    }
+
+    .btn-xl {
+      @include split-button-tokens.button-xl;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-xl-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-xl-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-xl-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-xl-pressed;
+      }
+    }
+
+    &:is(.split-btn-selected, :has(:popover-open)) {
+      :nth-last-child(1 of .btn) {
+        @include split-button-tokens.button-trailing-selected;
+      }
+    }
+  }
+
+  .split-btn {
+    & {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--between-space);
+    }
+
+    :nth-child(1 of .btn) {
+      border-start-start-radius: var(--outer-corner-size);
+      border-end-start-radius: var(--outer-corner-size);
+      border-start-end-radius: var(--inner-corner-size);
+      border-end-end-radius: var(--inner-corner-size);
+    }
+
+    :nth-last-child(1 of .btn) {
+      border-start-start-radius: var(--inner-corner-size);
+      border-end-start-radius: var(--inner-corner-size);
+      border-start-end-radius: var(--outer-corner-size);
+      border-end-end-radius: var(--outer-corner-size);
+
+      &::before {
+        content: 'arrow_drop_down';
+        font: var(--md-icon-size) var(--md-icon-font);
+        display: flex;
+        align-items: center;
+        aspect-ratio: 1;
+        width: var(--md-icon-size);
+        overflow: hidden;
+      }
+    }
+
+    &:is(.split-btn-selected, :has(:popover-open))
+      :nth-last-child(1 of .btn)::before {
+      transform: rotate(180deg);
+      transition: transform var(--md-sys-motion-duration-short4)
+        var(--md-sys-motion-easing-standard);
+    }
+  }
+}

package/labs/gb/components/switch/_switch-tokens.scss

@@ -0,0 +1,58 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --handle-color: var(--md-sys-color-outline);
+  --handle-size: 16px;
+  --with-icon-handle-size: 24px;
+  --icon-color: var(--md-sys-color-surface-container-highest);
+  --icon-size: 18px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-size: 40px;
+  --track-color: var(--md-sys-color-surface-container-highest);
+  --track-height: 32px;
+  --track-outline-color: var(--md-sys-color-outline);
+  --track-outline-width: 2px;
+  --track-width: 52px;
+  // LINT.ThenChange(md-switch.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hovered {
+  --handle-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin selected {
+  --track-color: var(--md-sys-color-primary);
+  --track-outline-color: transparent;
+  --handle-color: var(--md-sys-color-on-primary);
+  --handle-size: 24px;
+  --icon-color: var(--md-sys-color-on-primary-container);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-hovered {
+  --handle-color: var(--md-sys-color-primary-container);
+}
+
+@mixin pressed {
+  --handle-size: 28px;
+}
+
+@mixin disabled {
+  --handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --track-color: hsl(
+    from var(--md-sys-color-surface-container-highest) h s l / 12%
+  );
+  --track-outline-color: hsl(
+    from var(--md-sys-color-on-surface) h s l / 12%
+  );
+}
+
+@mixin disabled-selected {
+  --handle-color: var(--md-sys-color-surface);
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%);
+}

package/labs/gb/components/switch/switch.scss

@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'switch-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.switch {
+  .switch {
+    & {
+      @include switch-tokens.root;
+    }
+    &:is(:hover, .hover) {
+      @include switch-tokens.hovered;
+    }
+    &:is(:checked, .checked, [aria-checked='true']) {
+      @include switch-tokens.selected;
+      &:where(:hover, .hover) {
+        @include switch-tokens.selected-hovered;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include switch-tokens.pressed;
+    }
+    &:is(:disabled, .disabled) {
+      @include switch-tokens.disabled;
+      &:where(:checked, .checked, [aria-checked='true']) {
+        @include switch-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      display: inline-grid;
+      grid-template: '. handle .' 1fr / 0fr min-content 1fr;
+      place-items: center;
+      appearance: none;
+      background: var(--track-color);
+      border: var(--track-outline-width) solid var(--track-outline-color);
+      border-radius: calc(var(--track-height) / 2);
+      width: var(--track-width);
+      height: var(--track-height);
+      margin: 0;
+      padding: 0;
+      transition: grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);
+      isolation: isolate;
+      position: relative;
+      color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+      --icon: '';
+
+      &:is(:checked, .checked, [aria-checked='true']) {
+        grid-template-columns: 1fr min-content 0fr;
+      }
+
+      &::before {
+        --_handle-size: if(
+          style(--icon: ''): var(--handle-size);
+          else: max(var(--handle-size), var(--with-icon-handle-size));
+        );
+        content: var(--icon);
+        font: var(--md-icon-size) var(--md-icon-font);
+        display: grid;
+        place-items: center;
+        z-index: -1;
+        grid-area: handle;
+        aspect-ratio: 1;
+        height: 100%;
+        clip-path: circle(calc(var(--_handle-size) / 2));
+        transition: clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 50%;
+        background: var(--handle-color);
+      }
+
+      &::after {
+        content: '';
+        z-index: -1;
+        position: absolute;
+        grid-area: handle;
+        background-image: var(--ripple);
+        aspect-ratio: 1;
+        width: var(--state-layer-size);
+        border-radius: 50%;
+        color: var(--state-layer-color);
+        transition: var(--ripple-transition);
+        animation: var(--ripple-animation);
+      }
+    }
+
+    &:has(.switch-icon-off:not(slot), .switch-icon-off.has-slotted) {
+      --icon: ' '; // Use space to clear CSS icon and update the handle size.
+    }
+
+    .switch-icon-off,
+    .switch-icon-on {
+      &:not(slot),
+      &::slotted(*) {
+        grid-area: handle;
+      }
+    }
+
+    &:is(:checked, .checked, [aria-checked='true']) .switch-icon-off,
+    &:not(:checked, .checked, [aria-checked='true']) .switch-icon-on {
+      display: none;
+    }
+  }
+}