@material/web 2.4.1 → 2.4.2-nightly.067f9cd.0

package/tokens/versions/v30_0/sass/_md-comp-search-view.scss

@@ -0,0 +1,84 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-typescale';
+
+/// md.comp.search-view.docked.header.container.height (Enabled / Container)
+$docked-header-container-height: 56px;
+/// md.comp.search-view.full-screen.header.container.height (Enabled / Container)
+$full-screen-header-container-height: 72px;
+/// md.comp.search-view.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.search-view.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.search-view.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.search-view.divider.color (Enabled / Divider)
+$divider-color: md-sys-color.$outline;
+/// md.comp.search-view.docked.container.shape (Enabled / Container)
+$docked-container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.search-view.full-screen.container.shape (Enabled / Container)
+$full-screen-container-shape: md-sys-shape.$corner-none;
+/// md.comp.search-view.header.input-text.color (Enabled / Input text)
+$header-input-text-color: md-sys-color.$on-surface;
+/// md.comp.search-view.header.input-text.font (Enabled / Input text)
+$header-input-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.search-view.header.input-text.line-height (Enabled / Input text)
+$header-input-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.search-view.header.input-text.size (Enabled / Input text)
+$header-input-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.search-view.header.input-text.tracking (Enabled / Input text)
+$header-input-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.search-view.header.input-text.weight (Enabled / Input text)
+$header-input-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.search-view.header.leading-icon.color (Enabled / Leading icon)
+$header-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.search-view.header.supporting-text.color (Enabled / Supporting text)
+$header-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-view.header.supporting-text.font (Enabled / Supporting text)
+$header-supporting-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.search-view.header.supporting-text.line-height (Enabled / Supporting text)
+$header-supporting-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.search-view.header.supporting-text.size (Enabled / Supporting text)
+$header-supporting-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.search-view.header.supporting-text.tracking (Enabled / Supporting text)
+$header-supporting-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.search-view.header.supporting-text.weight (Enabled / Supporting text)
+$header-supporting-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.search-view.header.trailing-icon.color (Enabled / Trailing icon)
+$header-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-view.header.input-text.type (Enabled / Input text)
+@mixin header-input-text-type {
+  font-family: $header-input-text-font;
+  font-size: $header-input-text-size;
+  font-weight: $header-input-text-weight;
+  letter-spacing: $header-input-text-tracking;
+  line-height: $header-input-text-line-height;
+}
+/// md.comp.search-view.header.supporting-text.type (Enabled / Supporting text)
+@mixin header-supporting-text-type {
+  font-family: $header-supporting-text-font;
+  font-size: $header-supporting-text-size;
+  font-weight: $header-supporting-text-weight;
+  letter-spacing: $header-supporting-text-tracking;
+  line-height: $header-supporting-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-secondary-navigation-tab.scss

@@ -0,0 +1,104 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+@use 'md-sys-typescale';
+
+/// md.comp.secondary-navigation-tab.active-indicator.height (Enabled / Active indicator)
+$active-indicator-height: 2px;
+/// md.comp.secondary-navigation-tab.container.height (Enabled / Container)
+$container-height: 48px;
+/// md.comp.secondary-navigation-tab.divider.height (Enabled / Divider)
+///
+/// @deprecated Please use standalone divider component tokens instead
+$divider-height: 1px;
+/// md.comp.secondary-navigation-tab.with-icon.icon.size (Enabled / Icon)
+$with-icon-icon-size: 24px;
+/// md.comp.secondary-navigation-tab.active-indicator.color (Enabled / Active indicator)
+$active-indicator-color: md-sys-color.$primary;
+/// md.comp.secondary-navigation-tab.active.label-text.color (Enabled / Label text)
+$active-label-text-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface;
+/// md.comp.secondary-navigation-tab.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.secondary-navigation-tab.container.shadow-color (Enabled / Container)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.secondary-navigation-tab.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.secondary-navigation-tab.divider.color (Enabled / Divider)
+///
+/// @deprecated Please use standalone divider component tokens instead
+$divider-color: md-sys-color.$surface-variant;
+/// md.comp.secondary-navigation-tab.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.secondary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.secondary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.secondary-navigation-tab.focus.label-text.color (Focused / Label text)
+$focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.focus.state-layer.color (Focused / State layer)
+$focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.secondary-navigation-tab.hover.label-text.color (Hovered / Label text)
+$hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.secondary-navigation-tab.inactive.label-text.color (Enabled / Label text)
+$inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.secondary-navigation-tab.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$title-small-font;
+/// md.comp.secondary-navigation-tab.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$title-small-line-height;
+/// md.comp.secondary-navigation-tab.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$title-small-size;
+/// md.comp.secondary-navigation-tab.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$title-small-tracking;
+/// md.comp.secondary-navigation-tab.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$title-small-weight;
+/// md.comp.secondary-navigation-tab.pressed.label-text.color (Pressed (ripple) / Label text)
+$pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.pressed.state-layer.color (Pressed (ripple) / State layer)
+$pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.secondary-navigation-tab.with-icon.active.icon.color (Enabled / Icon)
+$with-icon-active-icon-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.with-icon.focus.icon.color (Focused / Icon)
+$with-icon-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.with-icon.hover.icon.color (Hovered / Icon)
+$with-icon-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon)
+$with-icon-inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.secondary-navigation-tab.with-icon.pressed.icon.color (Pressed (ripple) / Icon)
+$with-icon-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.secondary-navigation-tab.label-text.type (Enabled / Label text)
+@mixin label-text-type {
+  font-family: $label-text-font;
+  font-size: $label-text-size;
+  font-weight: $label-text-weight;
+  letter-spacing: $label-text-tracking;
+  line-height: $label-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-sheet-bottom.scss

@@ -0,0 +1,52 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state-focus-indicator';
+
+/// md.comp.sheet.bottom.docked.drag-handle.height (Enabled / Drag handle)
+$docked-drag-handle-height: 4px;
+/// md.comp.sheet.bottom.docked.drag-handle.opacity (Enabled / Drag handle)
+///
+/// @deprecated Deprecated per b/278783477
+$docked-drag-handle-opacity: 0.4;
+/// md.comp.sheet.bottom.docked.drag-handle.width (Enabled / Drag handle)
+$docked-drag-handle-width: 32px;
+/// md.comp.sheet.bottom.docked.container.color (Enabled / Container)
+$docked-container-color: md-sys-color.$surface-container-low;
+/// md.comp.sheet.bottom.docked.container.shape (Enabled / Container)
+$docked-container-shape: md-sys-shape.$corner-extra-large-top;
+/// md.comp.sheet.bottom.docked.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$docked-container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.sheet.bottom.docked.drag-handle.color (Enabled / Drag handle)
+$docked-drag-handle-color: md-sys-color.$on-surface-variant;
+/// md.comp.sheet.bottom.docked.minimized.container.shape (Enabled / Container)
+$docked-minimized-container-shape: md-sys-shape.$corner-none;
+/// md.comp.sheet.bottom.docked.modal.container.elevation (Enabled / Container)
+$docked-modal-container-elevation: md-sys-elevation.$level1;
+/// md.comp.sheet.bottom.docked.standard.container.elevation (Enabled / Container)
+$docked-standard-container-elevation: md-sys-elevation.$level1;
+/// md.comp.sheet.bottom.focus.indicator.color (Enabled / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.sheet.bottom.focus.indicator.outline.offset (Enabled / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.sheet.bottom.focus.indicator.thickness (Enabled / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;

package/tokens/versions/v30_0/sass/_md-comp-sheet-floating.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+
+/// md.comp.sheet.floating.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.sheet.floating.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.sheet.floating.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.sheet.floating.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;

package/tokens/versions/v30_0/sass/_md-comp-sheet-side.scss

@@ -0,0 +1,96 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+@use 'md-sys-typescale';
+
+/// md.comp.sheet.side.docked.container.height (Enabled / Container)
+$docked-container-height: 100%;
+/// md.comp.sheet.side.docked.container.width (Enabled / Container)
+$docked-container-width: 256px;
+/// md.comp.sheet.side.detached.container.shape (Enabled / Container)
+$detached-container-shape: md-sys-shape.$corner-large;
+/// md.comp.sheet.side.docked.action.focus.label-text.color (Focused / Label text)
+$docked-action-focus-label-text-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.focus.state-layer.color (Focused / State layer)
+$docked-action-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.focus.state-layer.opacity (Focused / State layer)
+$docked-action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.sheet.side.docked.action.hover.label-text.color (Hovered / Label text)
+$docked-action-hover-label-text-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.hover.state-layer.color (Hovered / State layer)
+$docked-action-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.hover.state-layer.opacity (Hovered / State layer)
+$docked-action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.sheet.side.docked.action.pressed.label-text.color (Pressed (ripple) / Label text)
+$docked-action-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.pressed.state-layer.color (Pressed (ripple) / State layer)
+$docked-action-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.sheet.side.docked.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$docked-action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.sheet.side.docked.container.color (Enabled / Container)
+///
+/// @deprecated  Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use “md.comp.sheet.side.docked.modal.container.color” or “md.comp.sheet.side.docked.standard.container.color” depending on intended configuration.
+$docked-container-color: md-sys-color.$surface;
+/// md.comp.sheet.side.docked.container.shape (Enabled / Container)
+$docked-container-shape: md-sys-shape.$corner-none;
+/// md.comp.sheet.side.docked.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$docked-container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.sheet.side.docked.divider.color (Enabled / Divider)
+$docked-divider-color: md-sys-color.$outline;
+/// md.comp.sheet.side.docked.focus.indicator.color (Focused / Focus indicator)
+$docked-focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.sheet.side.docked.focus.indicator.outline.offset (Focused / Focus indicator)
+$docked-focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.sheet.side.docked.focus.indicator.thickness (Focused / Focus indicator)
+$docked-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.sheet.side.docked.headline.color (Enabled / Headline)
+$docked-headline-color: md-sys-color.$on-surface-variant;
+/// md.comp.sheet.side.docked.headline.font (Enabled / Headline)
+$docked-headline-font: md-sys-typescale.$title-large-font;
+/// md.comp.sheet.side.docked.headline.line-height (Enabled / Headline)
+$docked-headline-line-height: md-sys-typescale.$title-large-line-height;
+/// md.comp.sheet.side.docked.headline.size (Enabled / Headline)
+$docked-headline-size: md-sys-typescale.$title-large-size;
+/// md.comp.sheet.side.docked.headline.tracking (Enabled / Headline)
+$docked-headline-tracking: md-sys-typescale.$title-large-tracking;
+/// md.comp.sheet.side.docked.headline.weight (Enabled / Headline)
+$docked-headline-weight: md-sys-typescale.$title-large-weight;
+/// md.comp.sheet.side.docked.modal.container.color (Enabled / Container)
+$docked-modal-container-color: md-sys-color.$surface-container-low;
+/// md.comp.sheet.side.docked.modal.container.elevation (Enabled / Container)
+$docked-modal-container-elevation: md-sys-elevation.$level1;
+/// md.comp.sheet.side.docked.modal.container.shape (Enabled / Container)
+$docked-modal-container-shape: md-sys-shape.$corner-large-start;
+/// md.comp.sheet.side.docked.standard.container.color (Enabled / Container)
+$docked-standard-container-color: md-sys-color.$surface;
+/// md.comp.sheet.side.docked.standard.container.elevation (Enabled / Container)
+$docked-standard-container-elevation: md-sys-elevation.$level0;
+/// md.comp.sheet.side.docked.headline.type (Enabled / Headline)
+@mixin docked-headline-type {
+  font-family: $docked-headline-font;
+  font-size: $docked-headline-size;
+  font-weight: $docked-headline-weight;
+  letter-spacing: $docked-headline-tracking;
+  line-height: $docked-headline-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-slider-large.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.comp.slider.large.active.handle.height (Handle)
+$active-handle-height: 68px;
+/// md.comp.slider.large.active.track.height (Active track)
+$active-track-height: 56px;
+/// md.comp.slider.large.active.track.shape.leading (Active track)
+$active-track-shape-leading: 16px;
+/// md.comp.slider.large.icon.padding (Icon)
+$icon-padding: 6px;
+/// md.comp.slider.large.icon.size (Icon)
+$icon-size: 24px;
+/// md.comp.slider.large.inactive.track.height (Inactive track)
+$inactive-track-height: 56px;
+/// md.comp.slider.large.inactive.track.shape.trailing (Inactive track)
+$inactive-track-shape-trailing: 16px;

package/tokens/versions/v30_0/sass/_md-comp-slider-medium.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.comp.slider.medium.active.handle.height (Handle)
+$active-handle-height: 44px;
+/// md.comp.slider.medium.active.track.height (Active track)
+$active-track-height: 40px;
+/// md.comp.slider.medium.active.track.shape.leading (Active track)
+$active-track-shape-leading: 12px;
+/// md.comp.slider.medium.icon.padding (Icon)
+$icon-padding: 6px;
+/// md.comp.slider.medium.icon.size (Icon)
+$icon-size: 24px;
+/// md.comp.slider.medium.inactive.track.height (Inactive track)
+$inactive-track-height: 40px;
+/// md.comp.slider.medium.inactive.track.shape.trailing (Inactive track)
+$inactive-track-shape-trailing: 12px;

package/tokens/versions/v30_0/sass/_md-comp-slider-small.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.comp.slider.small.active.handle.height (Handle)
+$active-handle-height: 44px;
+/// md.comp.slider.small.active.track.height (Active track)
+$active-track-height: 24px;
+/// md.comp.slider.small.active.track.shape.leading (Active track)
+$active-track-shape-leading: 8px;
+/// md.comp.slider.small.inactive.track.height (Inactive track)
+$inactive-track-height: 24px;
+/// md.comp.slider.small.inactive.track.shape.trailing (Inactive track)
+$inactive-track-shape-trailing: 8px;

package/tokens/versions/v30_0/sass/_md-comp-slider-xlarge.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.comp.slider.xlarge.active.handle.height (Handle)
+$active-handle-height: 108px;
+/// md.comp.slider.xlarge.active.track.height (Active track)
+$active-track-height: 96px;
+/// md.comp.slider.xlarge.active.track.shape.leading (Active track)
+$active-track-shape-leading: 28px;
+/// md.comp.slider.xlarge.icon.padding (Icon)
+$icon-padding: 8px;
+/// md.comp.slider.xlarge.icon.size (Icon)
+$icon-size: 32px;
+/// md.comp.slider.xlarge.inactive.track.height (Inactive track)
+$inactive-track-height: 96px;
+/// md.comp.slider.xlarge.inactive.track.shape.trailing (Inactive track)
+$inactive-track-shape-trailing: 28px;

package/tokens/versions/v30_0/sass/_md-comp-slider-xsmall.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.comp.slider.xsmall.active.handle.height (Handle)
+$active-handle-height: 44px;
+/// md.comp.slider.xsmall.active.track.height (Active track)
+$active-track-height: 16px;
+/// md.comp.slider.xsmall.active.track.shape.leading (Active track)
+$active-track-shape-leading: 8px;
+/// md.comp.slider.xsmall.inactive.track.height (Inactive track)
+$inactive-track-height: 16px;
+/// md.comp.slider.xsmall.inactive.track.shape.trailing (Inactive track)
+$inactive-track-shape-trailing: 8px;