feat(labs): add slider utility classes to component

labs/gb/components/slider/_slider-tokens.scss

@@ -0,0 +1,239 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.slider
+// --states="hover|focus|pressed,xsmall|small|medium|large|xlarge,disabled"
+
+@mixin root {
+  // LINT.IfChange
+  // md.comp.slider.active.handle.color
+  --active-handle-color: var(--md-sys-color-primary);
+  // ┌ md.comp.slider.medium.active.handle.height
+  // ├ md.comp.slider.small.active.handle.height
+  // ├ md.comp.slider.xsmall.active.handle.height
+  // md.comp.slider.active.handle.height
+  --active-handle-height: 44px;
+  // md.comp.slider.active.handle.leading-space
+  --active-handle-leading-space: var(--md-sys-space-75);
+  // md.comp.slider.active.handle.padding
+  --active-handle-padding: var(--md-sys-space-75);
+  // md.comp.slider.active.handle.shape
+  --active-handle-shape: var(--md-sys-shape-corner-full);
+  // md.comp.slider.active.handle.trailing-space
+  --active-handle-trailing-space: var(--md-sys-space-75);
+  // md.comp.slider.active.handle.width
+  --active-handle-width: 4px;
+  // ┌ md.comp.slider.active.stop-indicator.container.opacity
+  // md.comp.slider.active.stop-indicator.container.color
+  --active-stop-indicator-container-color: hsl(
+    from var(--md-sys-color-on-primary) h s l / 1
+  );
+  // ┌ md.comp.slider.focus.active.track.color
+  // ├ md.comp.slider.pressed.active.track.color
+  // md.comp.slider.active.track.color
+  --active-track-color: var(--md-sys-color-primary);
+  // ┌ md.comp.slider.xsmall.active.track.height
+  // md.comp.slider.active.track.height
+  --active-track-height: 16px;
+  // md.comp.slider.active.track.inner-corner.corner-size
+  --active-track-inner-corner-corner-size: 0 2px 2px 0;
+  // --active-track-opacity: unset; // EDIT: unused
+  // md.comp.slider.active.track.outer-corner.corner-size
+  --active-track-outer-corner-corner-size: var(--md-sys-shape-corner-full);
+  // md.comp.slider.active.track.shape
+  --active-track-shape: var(--md-sys-shape-corner-full);
+  // ┌ md.comp.slider.small.active.track.shape.leading
+  // ├ md.comp.slider.xsmall.active.track.shape.leading
+  --active-track-shape-leading: 8px;
+  // md.comp.slider.handle.color
+  --handle-color: var(--md-sys-color-primary);
+  // md.comp.slider.handle.height
+  --handle-height: 44px;
+  // --handle-opacity: unset; // EDIT: unused
+  // md.comp.slider.handle.shape
+  --handle-shape: var(--md-sys-shape-corner-full);
+  // ┌ md.comp.slider.hover.handle.width
+  // md.comp.slider.handle.width
+  --handle-width: 4px;
+  // ┌ md.comp.slider.large.icon.padding
+  // ├ md.comp.slider.medium.icon.padding
+  --icon-padding: 6px;
+  // ┌ md.comp.slider.large.icon.size
+  // ├ md.comp.slider.medium.icon.size
+  --icon-size: 24px;
+  // ┌ md.comp.slider.inactive.stop-indicator.container.opacity
+  // md.comp.slider.inactive.stop-indicator.container.color
+  --inactive-stop-indicator-container-color: hsl(
+    from var(--md-sys-color-on-secondary-container) h s l / 1
+  );
+  // ┌ md.comp.slider.focus.inactive.track.color
+  // ├ md.comp.slider.pressed.inactive.track.color
+  // md.comp.slider.inactive.track.color
+  --inactive-track-color: var(--md-sys-color-secondary-container);
+  // ┌ md.comp.slider.xsmall.inactive.track.height
+  // md.comp.slider.inactive.track.height
+  --inactive-track-height: 16px;
+  // --inactive-track-opacity: unset; // EDIT: unused
+  // md.comp.slider.inactive.track.shape
+  --inactive-track-shape: var(--md-sys-shape-corner-full);
+  // ┌ md.comp.slider.small.inactive.track.shape.trailing
+  // ├ md.comp.slider.xsmall.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 8px;
+  // md.comp.slider.stop-indicator.color
+  --stop-indicator-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.slider.stop-indicator.color-selected
+  --stop-indicator-color-selected: var(--md-sys-color-on-primary);
+  // md.comp.slider.stop-indicator.shape
+  --stop-indicator-shape: var(--md-sys-shape-corner-full);
+  // md.comp.slider.stop-indicator.size
+  --stop-indicator-size: 4px;
+  // md.comp.slider.stop-indicator.trailing-space
+  --stop-indicator-trailing-space: var(--md-sys-space-50);
+  // md.comp.slider.value-indicator.active.bottom-space
+  --value-indicator-active-bottom-space: var(--md-sys-space-150);
+  // md.comp.slider.value-indicator.container.color
+  --value-indicator-container-color: var(--md-sys-color-inverse-surface);
+  // ┌ md.comp.slider.value-indicator.label.label-text.font
+  // ├ md.comp.slider.value-indicator.label.label-text.line-height
+  // ├ md.comp.slider.value-indicator.label.label-text.size
+  // ├ md.comp.slider.value-indicator.label.label-text.weight
+  --value-indicator-label-label-text: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.slider.value-indicator.label.label-text
+  --value-indicator-label-label-text-axes: var(
+    --md-sys-typescale-label-lg-axes
+  );
+  // md.comp.slider.value-indicator.label.label-text.color
+  --value-indicator-label-label-text-color: var(
+    --md-sys-color-inverse-on-surface
+  );
+  // md.comp.slider.value-indicator.label.label-text.tracking
+  --value-indicator-label-label-text-tracking: var(
+    --md-sys-typescale-body-lg-tracking
+  );
+  --with-overlap-handle-outline-color: var(--md-sys-color-on-primary);
+  --with-overlap-handle-outline-width: 1px;
+  --focus-ring-shape: var(--handle-shape);
+  --md-focus-ring-shape: var(--handle-shape);
+}
+
+@mixin focus {
+  // md.comp.slider.focus.handle.width
+  --handle-width: 2px;
+}
+
+@mixin pressed {
+  // md.comp.slider.pressed.handle.color
+  --handle-color: var(--md-sys-color-primary);
+  // md.comp.slider.pressed.handle.width
+  --handle-width: 2px;
+}
+
+@mixin xsmall {
+  // md.comp.slider.xsmall.active.handle.height
+  --active-handle-height: 44px;
+  // md.comp.slider.xsmall.active.track.height
+  --active-track-height: 16px;
+  // md.comp.slider.xsmall.active.track.shape.leading
+  --active-track-shape-leading: 8px;
+  // md.comp.slider.xsmall.inactive.track.height
+  --inactive-track-height: 16px;
+  // md.comp.slider.xsmall.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 8px;
+}
+
+@mixin small {
+  // md.comp.slider.small.active.handle.height
+  --active-handle-height: 44px;
+  // md.comp.slider.small.active.track.height
+  --active-track-height: 24px;
+  // md.comp.slider.small.active.track.shape.leading
+  --active-track-shape-leading: 8px;
+  // md.comp.slider.small.inactive.track.height
+  --inactive-track-height: 24px;
+  // md.comp.slider.small.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 8px;
+}
+
+@mixin medium {
+  // md.comp.slider.medium.active.handle.height
+  --active-handle-height: 44px;
+  // md.comp.slider.medium.active.track.height
+  --active-track-height: 40px;
+  // md.comp.slider.medium.active.track.shape.leading
+  --active-track-shape-leading: 12px;
+  // md.comp.slider.medium.icon.padding
+  --icon-padding: 6px;
+  // md.comp.slider.medium.icon.size
+  --icon-size: 24px;
+  // md.comp.slider.medium.inactive.track.height
+  --inactive-track-height: 40px;
+  // md.comp.slider.medium.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 12px;
+}
+
+@mixin large {
+  // md.comp.slider.large.active.handle.height
+  --active-handle-height: 68px;
+  // md.comp.slider.large.active.track.height
+  --active-track-height: 56px;
+  // md.comp.slider.large.active.track.shape.leading
+  --active-track-shape-leading: 16px;
+  // md.comp.slider.large.icon.padding
+  --icon-padding: 6px;
+  // md.comp.slider.large.icon.size
+  --icon-size: 24px;
+  // md.comp.slider.large.inactive.track.height
+  --inactive-track-height: 56px;
+  // md.comp.slider.large.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 16px;
+}
+
+@mixin xlarge {
+  // md.comp.slider.xlarge.active.handle.height
+  --active-handle-height: 108px;
+  // md.comp.slider.xlarge.active.track.height
+  --active-track-height: 96px;
+  // md.comp.slider.xlarge.active.track.shape.leading
+  --active-track-shape-leading: 28px;
+  // md.comp.slider.xlarge.icon.padding
+  --icon-padding: 8px;
+  // md.comp.slider.xlarge.icon.size
+  --icon-size: 32px;
+  // md.comp.slider.xlarge.inactive.track.height
+  --inactive-track-height: 96px;
+  // md.comp.slider.xlarge.inactive.track.shape.trailing
+  --inactive-track-shape-trailing: 28px;
+}
+
+@mixin disabled {
+  // ┌ md.comp.slider.active.stop-indicator.container.opacity
+  // md.comp.slider.disabled.active.stop-indicator.container.color
+  --active-stop-indicator-container-color: hsl(
+    from var(--md-sys-color-inverse-on-surface) h s l / 1
+  );
+  // ┌ md.comp.slider.disabled.active.track.opacity
+  // md.comp.slider.disabled.active.track.color
+  --active-track-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.slider.disabled.handle.opacity
+  // md.comp.slider.disabled.handle.color
+  --handle-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 38%,
+    var(--md-sys-color-surface)
+  );
+  // md.comp.slider.disabled.handle.width
+  --handle-width: 4px;
+  // ┌ md.comp.slider.inactive.stop-indicator.container.opacity
+  // md.comp.slider.disabled.inactive.stop-indicator.container.color
+  --inactive-stop-indicator-container-color: hsl(
+    from var(--md-sys-color-on-surface) h s l / 1
+  );
+  // ┌ md.comp.slider.disabled.inactive.track.opacity
+  // md.comp.slider.disabled.inactive.track.color
+  --inactive-track-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.12);
+}

labs/gb/components/slider/demo/demo.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {boolInput, Knob, selectDropdown} from './index.js';
+
+import {SliderSize} from '../slider.js';
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Slider',
+  [
+    new Knob('disabled', {ui: boolInput()}),
+    new Knob('size', {
+      ui: selectDropdown<SliderSize>({
+        options: [
+          {value: 'xsmall', label: 'X-Small'},
+          {value: 'small', label: 'Small'},
+          {value: 'medium', label: 'Medium'},
+          {value: 'large', label: 'Large'},
+          {value: 'xlarge', label: 'X-Large'},
+        ],
+      }),
+    }),
+  ],
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});