@material/web 2.4.1 → 2.4.2-nightly.082faad.0

package/tokens/versions/v30_0/sass/_md-comp-menus.scss

@@ -0,0 +1,141 @@
+//
+// 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';
+@use 'md-sys-typescale';
+
+/// md.comp.menus.gap (Layout / Default)
+$gap: 2px;
+/// md.comp.menus.group.padding (Layout / Default)
+$group-padding: 2px;
+/// md.comp.menus.horizontal.container.bottom-space (Layout / Horizontal)
+$horizontal-container-bottom-space: 8px;
+/// md.comp.menus.horizontal.container.top-space (Layout / Horizontal)
+$horizontal-container-top-space: 8px;
+/// md.comp.menus.horizontal.icon-only.gap (Layout / Horizontal icon-only)
+$horizontal-icon-only-gap: 4px;
+/// md.comp.menus.horizontal.icon-only.menu-item.bottom-space (Layout / Horizontal icon-only)
+$horizontal-icon-only-menu-item-bottom-space: 16px;
+/// md.comp.menus.horizontal.icon-only.menu-item.leading-space (Layout / Horizontal icon-only)
+$horizontal-icon-only-menu-item-leading-space: 16px;
+/// md.comp.menus.horizontal.icon-only.menu-item.top-space (Layout / Horizontal icon-only)
+$horizontal-icon-only-menu-item-top-space: 16px;
+/// md.comp.menus.horizontal.icon-only.menu-item.trailing-space (Layout / Horizontal icon-only)
+$horizontal-icon-only-menu-item-trailing-space: 16px;
+/// md.comp.menus.horizontal.menu-item.between-space (Layout / Horizontal)
+$horizontal-menu-item-between-space: 12px;
+/// md.comp.menus.horizontal.menu-item.bottom-space (Layout / Horizontal)
+$horizontal-menu-item-bottom-space: 6px;
+/// md.comp.menus.horizontal.menu-item.leading-space (Layout / Horizontal)
+$horizontal-menu-item-leading-space: 12px;
+/// md.comp.menus.horizontal.menu-item.top-space (Layout / Horizontal)
+$horizontal-menu-item-top-space: 6px;
+/// md.comp.menus.horizontal.menu-item.trailing-space (Layout / Horizontal)
+$horizontal-menu-item-trailing-space: 12px;
+/// md.comp.menus.menu-item.between-space (Layout / Default)
+$menu-item-between-space: 12px;
+/// md.comp.menus.menu-item.bottom-space (Layout / Default)
+$menu-item-bottom-space: 8px;
+/// md.comp.menus.menu-item.height (Layout / Default)
+$menu-item-height: 44px;
+/// md.comp.menus.menu-item.leading-icon.size (Layout / Default)
+$menu-item-leading-icon-size: 20px;
+/// md.comp.menus.menu-item.leading-space (Layout / Default)
+$menu-item-leading-space: 16px;
+/// md.comp.menus.menu-item.top-space (Layout / Default)
+$menu-item-top-space: 8px;
+/// md.comp.menus.menu-item.trailing-icon.size (Layout / Default)
+$menu-item-trailing-icon-size: 20px;
+/// md.comp.menus.menu-item.trailing-space (Layout / Default)
+$menu-item-trailing-space: 16px;
+/// md.comp.menus.active.container.shape (Shape / Default)
+$active-container-shape: md-sys-shape.$corner-large;
+/// md.comp.menus.container.elevation (Layout / Default)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.menus.container.shape (Shape / Default)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.menus.group.shape (Shape / Default)
+$group-shape: md-sys-shape.$corner-small;
+/// md.comp.menus.horizontal.container.shape (Shape / Horizontal, Default)
+$horizontal-container-shape: md-sys-shape.$corner-full;
+/// md.comp.menus.horizontal.icon-only.menu-item.selected.shape (Shape / Horizontal icon-only, selected)
+$horizontal-icon-only-menu-item-selected-shape: md-sys-shape.$corner-full;
+/// md.comp.menus.horizontal.menu-item.focused.shape (Shape / Horizontal, Default)
+$horizontal-menu-item-focused-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.horizontal.menu-item.hovered.shape (Shape / Horizontal, Default)
+$horizontal-menu-item-hovered-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.horizontal.menu-item.pressed.shape (Shape / Horizontal, Default)
+$horizontal-menu-item-pressed-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.horizontal.menu-item.selected.focused.shape (Shape / Horizontal, Selected)
+$horizontal-menu-item-selected-focused-shape: md-sys-shape.$corner-full;
+/// md.comp.menus.horizontal.menu-item.selected.hovered.shape (Shape / Horizontal, Selected)
+$horizontal-menu-item-selected-hovered-shape: md-sys-shape.$corner-full;
+/// md.comp.menus.horizontal.menu-item.selected.pressed.shape (Shape / Horizontal, Selected)
+$horizontal-menu-item-selected-pressed-shape: md-sys-shape.$corner-full;
+/// md.comp.menus.inactive.container.shape (Shape / Default)
+$inactive-container-shape: md-sys-shape.$corner-small;
+/// md.comp.menus.menu-item.first-child.inner-corner.corner-size (Shape / Default)
+$menu-item-first-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small;
+/// md.comp.menus.menu-item.first-child.shape (Shape / Default)
+$menu-item-first-child-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.menu-item.focus.indicator.color (Focus ring)
+$menu-item-focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.menus.menu-item.focus.indicator.outline.offset (Focus ring)
+$menu-item-focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.menus.menu-item.focus.indicator.thickness (Focus ring)
+$menu-item-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.menus.menu-item.label-text.font (Typography)
+$menu-item-label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.menus.menu-item.label-text.line-height (Typography)
+$menu-item-label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.menus.menu-item.label-text.size (Typography)
+$menu-item-label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.menus.menu-item.label-text.tracking (Typography)
+$menu-item-label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.menus.menu-item.label-text.weight (Typography)
+$menu-item-label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.menus.menu-item.last-child.inner-corner.corner-size (Shape / Default)
+$menu-item-last-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small;
+/// md.comp.menus.menu-item.last-child.shape (Shape / Default)
+$menu-item-last-child-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.menu-item.selected.shape (Shape / Selected)
+$menu-item-selected-shape: md-sys-shape.$corner-medium;
+/// md.comp.menus.menu-item.shape (Shape / Default)
+$menu-item-shape: md-sys-shape.$corner-extra-small;
+/// md.comp.menus.menu-item.supporting-text.font (Typography)
+$menu-item-supporting-text-font: md-sys-typescale.$body-small-font;
+/// md.comp.menus.menu-item.supporting-text.line-height (Typography)
+$menu-item-supporting-text-line-height: md-sys-typescale.$body-small-line-height;
+/// md.comp.menus.menu-item.supporting-text.size (Typography)
+$menu-item-supporting-text-size: md-sys-typescale.$body-small-size;
+/// md.comp.menus.menu-item.supporting-text.tracking (Typography)
+$menu-item-supporting-text-tracking: md-sys-typescale.$body-small-tracking;
+/// md.comp.menus.menu-item.supporting-text.weight (Typography)
+$menu-item-supporting-text-weight: md-sys-typescale.$body-small-weight;
+/// md.comp.menus.menu-item.trailing-supporting-text.font (Typography)
+$menu-item-trailing-supporting-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.menus.menu-item.trailing-supporting-text.line-height (Typography)
+$menu-item-trailing-supporting-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.menus.menu-item.trailing-supporting-text.size (Typography)
+$menu-item-trailing-supporting-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.menus.menu-item.trailing-supporting-text.tracking (Typography)
+$menu-item-trailing-supporting-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.menus.menu-item.trailing-supporting-text.weight (Typography)
+$menu-item-trailing-supporting-text-weight: md-sys-typescale.$label-large-weight;

package/tokens/versions/v30_0/sass/_md-comp-nav-bar-item-horizontal.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-typescale';
+
+/// md.comp.nav-bar.item.horizontal.active-indicator.height
+$active-indicator-height: 40px;
+/// md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space
+$active-indicator-icon-label-space: 4px;
+/// md.comp.nav-bar.item.horizontal.active-indicator.leading-space
+$active-indicator-leading-space: 16px;
+/// md.comp.nav-bar.item.horizontal.active-indicator.trailing-space
+$active-indicator-trailing-space: 16px;
+/// md.comp.nav-bar.item.horizontal.label-text.font
+@mixin label-text-font {
+  @include md-sys-typescale.label-medium;
+}

package/tokens/versions/v30_0/sass/_md-comp-nav-bar-item-vertical.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-typescale';
+
+/// md.comp.nav-bar.item.vertical.active-indicator.height
+$active-indicator-height: 32px;
+/// md.comp.nav-bar.item.vertical.active-indicator.icon-label-space
+$active-indicator-icon-label-space: 4px;
+/// md.comp.nav-bar.item.vertical.active-indicator.width
+$active-indicator-width: 56px;
+/// md.comp.nav-bar.item.vertical.container.between-space
+$container-between-space: 6px;
+/// md.comp.nav-bar.item.vertical.label-text.font
+@mixin label-text-font {
+  @include md-sys-typescale.label-medium;
+}

package/tokens/versions/v30_0/sass/_md-comp-nav-bar.scss

@@ -0,0 +1,68 @@
+//
+// 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';
+
+/// md.comp.nav-bar.container.height (Container)
+$container-height: 64px;
+/// md.comp.nav-bar.item.active-indicator.icon-label-space (Nav item)
+$item-active-indicator-icon-label-space: 4px;
+/// md.comp.nav-bar.item.between-space (Nav item)
+$item-between-space: 0px;
+/// md.comp.nav-bar.item.icon.size (Nav item)
+$item-icon-size: 24px;
+/// md.comp.nav-bar.container.color (Color / Enabled)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.nav-bar.container.elevation (Color / Enabled)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.nav-bar.container.shadow-color (Color / Enabled)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.nav-bar.container.shape (Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.nav-bar.item.active-indicator.shape (Nav item)
+$item-active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.nav-bar.item.active.focused.state-layer.color (Color / Focused)
+$item-active-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.active.focused.state-layer.opacity (Color / Focused)
+$item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.nav-bar.item.active.hovered.state-layer.color (Color / Hovered)
+$item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.active.hovered.state-layer.opacity (Color / Hovered)
+$item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.nav-bar.item.active.icon.color (Color / Enabled)
+$item-active-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.active.indicator.color (Color / Enabled)
+$item-active-indicator-color: md-sys-color.$secondary-container;
+/// md.comp.nav-bar.item.active.label-text.color (Color / Enabled)
+$item-active-label-text-color: md-sys-color.$secondary;
+/// md.comp.nav-bar.item.active.pressed.state-layer.color (Color / Pressed)
+$item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.active.pressed.state-layer.opacity (Color / Pressed)
+$item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.nav-bar.item.inactive.focused.state-layer.color (Color / Focused)
+$item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.inactive.hovered.state-layer.color (Color / Hovered)
+$item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-bar.item.inactive.icon.color (Color / Enabled)
+$item-inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.nav-bar.item.inactive.label-text.color (Color / Enabled)
+$item-inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.nav-bar.item.inactive.pressed.state-layer.color (Color / Pressed)
+$item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;

package/tokens/versions/v30_0/sass/_md-comp-nav-rail-collapsed.scss

@@ -0,0 +1,35 @@
+//
+// 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.nav-rail.collapsed.container.width
+$container-width: 96px;
+/// md.comp.nav-rail.collapsed.item.vertical-space
+$item-vertical-space: 4px;
+/// md.comp.nav-rail.collapsed.narrow.container.width
+$narrow-container-width: 80px;
+/// md.comp.nav-rail.collapsed.top-space
+$top-space: 44px;
+/// md.comp.nav-rail.collapsed.container.color
+$container-color: md-sys-color.$surface;
+/// md.comp.nav-rail.collapsed.container.elevation
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.nav-rail.collapsed.container.shape
+$container-shape: md-sys-shape.$corner-none;

package/tokens/versions/v30_0/sass/_md-comp-nav-rail-expanded.scss

@@ -0,0 +1,47 @@
+//
+// 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.nav-rail.expanded.between-item-space
+///
+/// @deprecated Token not needed as value is "0dp"
+$between-item-space: 0px;
+/// md.comp.nav-rail.expanded.container.width.maximum
+$container-width-maximum: 360px;
+/// md.comp.nav-rail.expanded.container.width.minimum
+$container-width-minimum: 220px;
+/// md.comp.nav-rail.expanded.top-space
+$top-space: 44px;
+/// md.comp.nav-rail.expanded.vertical.trailing-space
+///
+/// @deprecated Token moved to nav rail item horizontal set
+$vertical-trailing-space: 20px;
+/// md.comp.nav-rail.expanded.container.color
+$container-color: md-sys-color.$surface;
+/// md.comp.nav-rail.expanded.container.elevation
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.nav-rail.expanded.container.shape
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.nav-rail.expanded.modal.container.color
+$modal-container-color: md-sys-color.$surface-container;
+/// md.comp.nav-rail.expanded.modal.container.elevation
+$modal-container-elevation: md-sys-elevation.$level2;
+/// md.comp.nav-rail.expanded.modal.container.shape
+$modal-container-shape: md-sys-shape.$corner-large;

package/tokens/versions/v30_0/sass/_md-comp-nav-rail-item-horizontal.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-typescale';
+
+/// md.comp.nav-rail.item.horizontal.active-indicator.height
+$active-indicator-height: 56px;
+/// md.comp.nav-rail.item.horizontal.full-width.leading-space
+$full-width-leading-space: 16px;
+/// md.comp.nav-rail.item.horizontal.full-width.trailing-space
+$full-width-trailing-space: 16px;
+/// md.comp.nav-rail.item.horizontal.icon-label-space
+$icon-label-space: 8px;
+/// md.comp.nav-rail.item.horizontal.label-text.font
+@mixin label-text-font {
+  @include md-sys-typescale.label-large;
+}

package/tokens/versions/v30_0/sass/_md-comp-nav-rail-item-vertical.scss

@@ -0,0 +1,33 @@
+//
+// 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-typescale';
+
+/// md.comp.nav-rail.item.vertical.active-indicator.height
+$active-indicator-height: 32px;
+/// md.comp.nav-rail.item.vertical.active-indicator.width
+$active-indicator-width: 56px;
+/// md.comp.nav-rail.item.vertical.icon-label-space
+$icon-label-space: 4px;
+/// md.comp.nav-rail.item.vertical.leading-space
+$leading-space: 16px;
+/// md.comp.nav-rail.item.vertical.trailing-space
+$trailing-space: 16px;
+/// md.comp.nav-rail.item.vertical.label-text.font
+@mixin label-text-font {
+  @include md-sys-typescale.label-medium;
+}

package/tokens/versions/v30_0/sass/_md-comp-nav-rail-item.scss

@@ -0,0 +1,39 @@
+//
+// 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-shape';
+
+/// md.comp.nav-rail.item.active-indicator.icon-label-space
+$active-indicator-icon-label-space: 8px;
+/// md.comp.nav-rail.item.active-indicator.leading-space
+$active-indicator-leading-space: 16px;
+/// md.comp.nav-rail.item.active-indicator.trailing-space
+$active-indicator-trailing-space: 16px;
+/// md.comp.nav-rail.item.container.height
+$container-height: 64px;
+/// md.comp.nav-rail.item.container.vertical-space
+$container-vertical-space: 6px;
+/// md.comp.nav-rail.item.header-space-minimum
+$header-space-minimum: 40px;
+/// md.comp.nav-rail.item.icon.size
+$icon-size: 24px;
+/// md.comp.nav-rail.item.short.container.height
+$short-container-height: 56px;
+/// md.comp.nav-rail.item.active-indicator.shape
+$active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.nav-rail.item.container.shape
+$container-shape: md-sys-shape.$corner-none;

package/tokens/versions/v30_0/sass/_md-comp-nav-rail.scss

@@ -0,0 +1,48 @@
+//
+// 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-state';
+
+/// md.comp.nav-rail.item.active.focused.state-layer.color (Focused)
+$item-active-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.active.focused.state-layer.opacity (Focused)
+$item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.nav-rail.item.active.hovered.state-layer.color (Hovered)
+$item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.active.hovered.state-layer.opacity (Hovered)
+$item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.nav-rail.item.active.icon.color (Enabled)
+$item-active-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.active.indicator.color (Enabled)
+$item-active-indicator-color: md-sys-color.$secondary-container;
+/// md.comp.nav-rail.item.active.label-text.color (Enabled)
+$item-active-label-text-color: md-sys-color.$secondary;
+/// md.comp.nav-rail.item.active.pressed.state-layer.color (Pressed)
+$item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.active.pressed.state-layer.opacity (Pressed)
+$item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.nav-rail.item.inactive.focused.state-layer.color (Focused)
+$item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.inactive.hovered.state-layer.color (Hovered)
+$item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.nav-rail.item.inactive.icon.color (Enabled)
+$item-inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.nav-rail.item.inactive.label-text.color (Enabled)
+$item-inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.nav-rail.item.inactive.pressed.state-layer.color (Pressed)
+$item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;