@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/components/divider/divider.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'divider-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.divider {
+  .divider {
+    & {
+      @include divider-tokens.root;
+
+      box-sizing: border-box;
+      border: none;
+      margin: unset; // Remove <hr> margins
+    }
+
+    &:not(.divider-vertical) {
+      border-bottom: var(--thickness) solid var(--color);
+      width: 100%;
+    }
+
+    &.divider-vertical {
+      border-inline-end: var(--thickness) solid var(--color);
+      min-height: 100%;
+    }
+  }
+}

package/labs/gb/components/fab/_fab-tokens.scss

@@ -0,0 +1,89 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-3);
+  --container-height: 56px;
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --icon-color: currentColor;
+  --icon-label-space: 12px;
+  --icon-size: 24px;
+  --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: 16px;
+  --trailing-space: 16px;
+  // LINT.ThenChange(fab-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hovered {
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin pressed {
+  --container-elevation: var(--md-sys-elevation-shadow-3);
+}
+
+@mixin primary-container {
+  --container-color: var(--md-sys-color-primary-container);
+  --icon-color: var(--md-sys-color-on-primary-container);
+  --label-text-color: var(--md-sys-color-on-primary-container);
+}
+
+@mixin primary {
+  --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 secondary-container {
+  --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 secondary {
+  --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 tertiary-container {
+  --container-color: var(--md-sys-color-tertiary-container);
+  --icon-color: var(--md-sys-color-on-tertiary-container);
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin tertiary {
+  --container-color: var(--md-sys-color-tertiary);
+  --icon-color: var(--md-sys-color-on-tertiary);
+  --label-text-color: var(--md-sys-color-on-tertiary);
+}
+
+@mixin md {
+  --container-height: 80px;
+  --container-shape: var(--md-sys-shape-corner-lg-increased);
+  --icon-size: 28px;
+  --label-text: var(--md-sys-typescale-title-lg);
+  --label-text-axes: var(--md-sys-typescale-title-lg-axes);
+  --label-text-tracking: var(--md-sys-typescale-title-lg-tracking);
+  --leading-space: 26px;
+  --trailing-space: 26px;
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --container-shape: var(--md-sys-shape-corner-xl);
+  --icon-label-space: 16px;
+  --icon-size: 36px;
+  --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: 28px;
+  --trailing-space: 28px;
+}

package/labs/gb/components/fab/fab.scss

@@ -0,0 +1,78 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'fab-tokens';
+// go/keep-sorted end
+
+// TODO: add any md.comp dependencies (e.g. md.comp.ripple)
+@layer md.sys, md.comp.dependencies;
+@layer md.comp.fab {
+  .fab {
+    & {
+      @include fab-tokens.root;
+    }
+
+    &:is(:hover, .hover) {
+      @include fab-tokens.hovered;
+    }
+
+    &:is(:active, .active) {
+      @include fab-tokens.pressed;
+    }
+
+    &.fab-primary-container {
+      @include fab-tokens.primary-container;
+    }
+
+    &.fab-primary {
+      @include fab-tokens.primary;
+    }
+
+    &.fab-secondary-container {
+      @include fab-tokens.secondary-container;
+    }
+
+    &.fab-secondary {
+      @include fab-tokens.secondary;
+    }
+
+    &.fab-tertiary-container {
+      @include fab-tokens.tertiary-container;
+    }
+
+    &.fab-tertiary {
+      @include fab-tokens.tertiary;
+    }
+
+    &.fab-md {
+      @include fab-tokens.md;
+    }
+
+    &.fab-lg {
+      @include fab-tokens.lg;
+    }
+
+    & {
+      appearance: none;
+      border: none;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--icon-label-space);
+      height: var(--container-height);
+      background-color: var(--container-color);
+      border-radius: var(--container-shape);
+      box-shadow: var(--container-elevation);
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      animation: var(--ripple-animation), var(--focus-ring-animation);
+      --md-icon-color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+    }
+  }
+}

package/labs/gb/components/focus/focus-ring.scss

@@ -0,0 +1,91 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../../../../tokens/versions/latest/sass/md-sys-state-focus-indicator';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.focus-ring {
+  .focus-ring-outer,
+  .focus-ring-inner {
+    --focus-ring-outline: none;
+    --focus-ring-offset: 0;
+    --focus-ring-animation: none;
+
+    outline: var(--focus-ring-outline);
+    outline-offset: var(--focus-ring-offset);
+    animation: var(--focus-ring-animation), var(--ripple-animation, none);
+  }
+
+  // Focus rings support the following DOM use cases:
+  // 1. Focus ring and interactive element are the same.
+  // 2. Focus ring is a parent of a child interactive `.focus-ring-target`.
+  // 3. Focus ring is a child of a parent interactive `.focus-ring-target`.
+  // 4. Focus ring has `.focus-ring-host` and is a within an interactive shadow DOM host.
+  //
+  // Pseudo class emulation is only needed for the focus ring element, not for
+  // the target or host elements.
+
+  .focus-ring-outer {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$outer-offset};
+      --focus-ring-animation: focus-ring-outer-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  .focus-ring-inner {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$inner-offset};
+      --focus-ring-animation: focus-ring-inner-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  @keyframes focus-ring-outer-grow {
+    from {
+      outline-width: 0;
+    }
+
+    to {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-outer-shrink {
+    from {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-grow {
+    from {
+      outline-width: 0;
+      outline-offset: 0;
+    }
+    to {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-shrink {
+    from {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+}

package/labs/gb/components/iconbutton/_icon-button-tokens.scss

@@ -0,0 +1,213 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-height: auto;
+  --container-shape: calc(var(--container-height) / 2);
+  --icon-color: currentColor;
+  --icon-size: 24px;
+  --leading-space: 0;
+  --md-icon-fill: 1;
+  --outline-color: transparent;
+  --outline-width: 0;
+  --trailing-space: 0;
+  // LINT.ThenChange(icon-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);
+  --icon-color: var(--md-sys-color-primary);
+  --md-icon-fill: 1;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-primary);
+  --icon-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);
+}
+
+@mixin filled-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-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);
+}
+
+@mixin tonal-selected {
+  --container-color: var(--md-sys-color-secondary);
+  --icon-color: var(--md-sys-color-on-secondary);
+}
+
+@mixin outlined {
+  --icon-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);
+}
+
+@mixin standard {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin standard-selected {
+  --icon-color: var(--md-sys-color-primary);
+}
+
+@mixin xs {
+  --container-height: 32px;
+  --icon-size: 20px;
+  --leading-space: 6px;
+  --outline-width: 1px;
+  --trailing-space: 6px;
+}
+
+@mixin xs-narrow {
+  --leading-space: 4px;
+  --trailing-space: 4px;
+}
+
+@mixin xs-wide {
+  --leading-space: 10px;
+  --trailing-space: 10px;
+}
+
+@mixin sm {
+  --container-height: 40px;
+  --leading-space: 8px;
+  --outline-width: 1px;
+  --trailing-space: 8px;
+}
+
+@mixin sm-narrow {
+  --leading-space: 4px;
+  --trailing-space: 4px;
+}
+
+@mixin sm-wide {
+  --leading-space: 14px;
+  --trailing-space: 14px;
+}
+
+@mixin md {
+  --container-height: 56px;
+  --leading-space: 16px;
+  --outline-width: 1px;
+  --trailing-space: 16px;
+}
+
+@mixin md-narrow {
+  --leading-space: 12px;
+  --trailing-space: 12px;
+}
+
+@mixin md-wide {
+  --leading-space: 24px;
+  --trailing-space: 24px;
+}
+
+@mixin md-selected {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --icon-size: 32px;
+  --leading-space: 32px;
+  --outline-width: 2px;
+  --trailing-space: 32px;
+}
+
+@mixin lg-narrow {
+  --leading-space: 16px;
+  --trailing-space: 16px;
+}
+
+@mixin lg-wide {
+  --leading-space: 48px;
+  --trailing-space: 48px;
+}
+
+@mixin lg-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin xl {
+  --container-height: 136px;
+  --icon-size: 40px;
+  --leading-space: 48px;
+  --outline-width: 3px;
+  --trailing-space: 48px;
+}
+
+@mixin xl-narrow {
+  --leading-space: 32px;
+  --trailing-space: 32px;
+}
+
+@mixin xl-wide {
+  --leading-space: 72px;
+  --trailing-space: 72px;
+}
+
+@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%);
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}

package/labs/gb/components/iconbutton/icon-button.scss

@@ -0,0 +1,160 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'icon-button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.icon-btn {
+  .icon-btn {
+    & {
+      @include icon-button-tokens.root;
+    }
+    &:where(.icon-btn-unselected, [aria-pressed='false']) {
+      @include icon-button-tokens.unselected;
+    }
+    &:is(.icon-btn-selected, [aria-pressed='true']) {
+      @include icon-button-tokens.selected;
+    }
+    &.icon-btn-filled {
+      @include icon-button-tokens.filled;
+      &:where(.icon-btn-unselected, [aria-pressed='false']) {
+        @include icon-button-tokens.filled-unselected;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.filled-selected;
+      }
+    }
+    &.icon-btn-tonal {
+      @include icon-button-tokens.tonal;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.tonal-selected;
+      }
+    }
+    &.icon-btn-outlined {
+      @include icon-button-tokens.outlined;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.outlined-selected;
+      }
+    }
+    &.icon-btn-standard {
+      @include icon-button-tokens.standard;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.standard-selected;
+      }
+    }
+    &.icon-btn-xs {
+      @include icon-button-tokens.xs;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.xs-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.xs-wide;
+      }
+    }
+    &.icon-btn-sm {
+      @include icon-button-tokens.sm;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.sm-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.sm-wide;
+      }
+    }
+    &.icon-btn-md {
+      @include icon-button-tokens.md;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.md-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.md-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.md-selected;
+      }
+    }
+    &.icon-btn-lg {
+      @include icon-button-tokens.lg;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.lg-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.lg-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.lg-selected;
+      }
+    }
+    &.icon-btn-xl {
+      @include icon-button-tokens.xl;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.xl-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.xl-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.xl-selected;
+      }
+    }
+    &.icon-btn-square {
+      @include icon-button-tokens.square;
+      &:where(.icon-btn-md) {
+        @include icon-button-tokens.square-md;
+      }
+      &:where(.icon-btn-lg) {
+        @include icon-button-tokens.square-lg;
+      }
+      &:where(.icon-btn-xl) {
+        @include icon-button-tokens.square-xl;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include icon-button-tokens.pressed;
+      &:where(.icon-btn-md) {
+        @include icon-button-tokens.pressed-md;
+      }
+      &:where(.icon-btn-lg) {
+        @include icon-button-tokens.pressed-lg;
+      }
+      &:where(.icon-btn-xl) {
+        @include icon-button-tokens.pressed-xl;
+      }
+    }
+    &:is(:disabled, .disabled) {
+      @include icon-button-tokens.disabled;
+    }
+
+    & {
+      display: inline-grid;
+      place-items: center;
+      background-color: var(--container-color);
+      border: var(--outline-width) solid var(--outline-color);
+      border-radius: var(--container-shape);
+      height: var(--container-height);
+      color: var(--icon-color);
+      transition:
+        border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),
+        var(--ripple-transition);
+      --md-icon-size: var(--icon-size);
+    }
+
+    &:not(.icon-btn-narrow, .icon-btn-wide) {
+      aspect-ratio: 1;
+    }
+
+    &:is(.icon-btn-narrow, .icon-btn-wide) {
+      padding-inline: var(--leading-space) var(--trailing-space);
+    }
+
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+  }
+}