@warp-ds/elements 2.6.0 → 2.7.0-next.2

package/dist/packages/slider/slider.test.js

@@ -0,0 +1,380 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../attention/attention.js';
+import '../affix/affix.js';
+import '../textfield/textfield.js';
+import './slider.js';
+import '../slider-thumb/slider-thumb.js';
+test('single slider starts with a default value equal to max', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('100');
+});
+test('range slider starts with a default from value equal to min, and to value equal to max', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Range" min="0" max="100">
+        <w-slider-thumb aria-label="From" name="rangefrom" slot="from"></w-slider-thumb>
+        <w-slider-thumb aria-label="To" name="rangeto" slot="to"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByLabelText('From').first()).toHaveValue('0');
+    await expect.element(page.getByLabelText('To').first()).toHaveValue('100');
+});
+test('can set slider value via the range input', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await userEvent.type(page.getByLabelText('Single').first(), '{ArrowLeft}{ArrowLeft}{ArrowLeft}');
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('97');
+    await expect.element(page.getByRole('spinbutton')).toHaveValue(97); // keeps value in sync between inputs
+    const formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('value')).toBe('97');
+});
+test('can set slider value via the number input', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await page.getByRole('spinbutton').fill('50');
+    await expect.element(page.getByRole('spinbutton')).toHaveValue(50);
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('50'); // keeps value in sync between inputs
+    const formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('value')).toBe('50');
+});
+test('deleting from number input works as expected', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Production year" min="1950" max="2025" over under>
+        <p slot="description">Try typing a from value higher than a to value</p>
+        <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(2025);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(202);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(20);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(2);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).not.toHaveValue();
+});
+test('can reset slider by resetting surrounding form', async () => {
+    render(html `
+    <form>
+      <w-slider label="Slider from 0 - 10" min="0" max="10">
+        <p slot="description">If you want to slide between 0 and 10, this slider has you covered.</p>
+        <w-slider-thumb name="zero-ten" value="3"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSlider = document.querySelector('w-slider');
+    const wSliderThumb = wSlider.querySelector('w-slider-thumb');
+    // sanity
+    expect(form).not.toBeNull();
+    expect(wSlider).not.toBeNull();
+    expect(wSliderThumb).not.toBeNull();
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+    wSliderThumb.value = '5';
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('5');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('5');
+    // Reset the form
+    form.reset();
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+});
+// labelFormatter tests
+test('labelFormatter formats min and max labels', async () => {
+    const component = html `
+    <w-slider label="Production year" min="1950" max="2025">
+      <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+      <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    slider.labelFormatter = (slot) => {
+        if (slot === 'from')
+            return 'Before 1950';
+        return '2025+';
+    };
+    await slider.updateComplete;
+    const fromThumb = document.querySelector('w-slider-thumb[slot="from"]');
+    const toThumb = document.querySelector('w-slider-thumb[slot="to"]');
+    await fromThumb.updateComplete;
+    await toThumb.updateComplete;
+    // Check the visible labels are formatted
+    const fromMarker = fromThumb.shadowRoot.querySelector('.w-slider-thumb__from-marker');
+    const toMarker = toThumb.shadowRoot.querySelector('.w-slider-thumb__to-marker');
+    expect(fromMarker.textContent.trim()).toBe('Before 1950');
+    expect(toMarker.textContent.trim()).toBe('2025+');
+});
+test('labelFormatter can hide labels by returning empty string', async () => {
+    const component = html `
+    <w-slider label="Hidden labels" min="0" max="100">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    slider.labelFormatter = () => '';
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const fromMarker = thumb.shadowRoot.querySelector('.w-slider-thumb__from-marker');
+    const toMarker = thumb.shadowRoot.querySelector('.w-slider-thumb__to-marker');
+    expect(fromMarker.textContent.trim()).toBe('');
+    expect(toMarker.textContent.trim()).toBe('');
+});
+// valueFormatter tests
+test('valueFormatter formats tooltip display value', async () => {
+    const component = html `
+    <w-slider label="Price" min="0" max="100000">
+      <w-slider-thumb name="price" value="50000"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    // Format with custom suffix
+    slider.valueFormatter = (value) => {
+        if (!value)
+            return '0';
+        return `${value} formatted`;
+    };
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    // Check the tooltip message content in w-attention
+    const tooltipMessage = thumb.shadowRoot.querySelector('w-attention span[slot="message"]');
+    expect(tooltipMessage.textContent.trim()).toBe('50000 formatted');
+});
+// WCAG 2.1 Accessibility Tests
+// Fieldset and legend tests (WCAG 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value)
+test('slider uses fieldset with legend for proper grouping', async () => {
+    const component = html `
+    <w-slider label="Volume control" min="0" max="100">
+      <w-slider-thumb name="volume"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const fieldset = slider.shadowRoot.querySelector('fieldset');
+    const legend = fieldset.querySelector('legend');
+    expect(fieldset).not.toBeNull();
+    expect(legend).not.toBeNull();
+    expect(legend.textContent.trim()).toBe('Volume control');
+});
+test('range slider fieldset groups both thumbs together', async () => {
+    const component = html `
+    <w-slider label="Price range" min="0" max="1000">
+      <w-slider-thumb slot="from" aria-label="Minimum price" name="min"></w-slider-thumb>
+      <w-slider-thumb slot="to" aria-label="Maximum price" name="max"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const fieldset = slider.shadowRoot.querySelector('fieldset');
+    const legend = fieldset.querySelector('legend');
+    expect(fieldset).not.toBeNull();
+    expect(legend.textContent.trim()).toBe('Price range');
+    // Both thumbs should be slotted within the fieldset
+    const slots = fieldset.querySelectorAll('slot');
+    expect(slots.length).toBeGreaterThan(0);
+});
+// Input type range accessibility (WCAG 4.1.2 Name, Role, Value)
+test('range input has proper aria-label', async () => {
+    const component = html `
+    <w-slider label="Brightness" min="0" max="100">
+      <w-slider-thumb name="brightness"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const rangeInput = thumb.shadowRoot.querySelector('input[type="range"]');
+    expect(rangeInput.getAttribute('aria-label')).toBe('Brightness');
+});
+test('range input uses explicit aria-label when provided', async () => {
+    const component = html `
+    <w-slider label="Volume" min="0" max="100">
+      <w-slider-thumb aria-label="Custom volume control" name="volume"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const rangeInput = thumb.shadowRoot.querySelector('input[type="range"]');
+    expect(rangeInput.getAttribute('aria-label')).toBe('Custom volume control');
+});
+// Range slider accessibility for from/to labels
+test('range slider thumbs get appropriate aria-labels when not explicitly set', async () => {
+    const component = html `
+    <w-slider label="Year range" min="2000" max="2025">
+      <w-slider-thumb slot="from" name="from-year"></w-slider-thumb>
+      <w-slider-thumb slot="to" name="to-year"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const fromThumb = document.querySelector('w-slider-thumb[slot="from"]');
+    const toThumb = document.querySelector('w-slider-thumb[slot="to"]');
+    await fromThumb.updateComplete;
+    await toThumb.updateComplete;
+    const fromRange = fromThumb.shadowRoot.querySelector('input[type="range"]');
+    const toRange = toThumb.shadowRoot.querySelector('input[type="range"]');
+    // Should append min/max to the parent label
+    expect(fromRange.getAttribute('aria-label')).toBe('Year range min');
+    expect(toRange.getAttribute('aria-label')).toBe('Year range max');
+});
+// Input type number accessibility (WCAG 4.1.2 Name, Role, Value)
+test('number input (textfield) has proper aria-label', async () => {
+    const component = html `
+    <w-slider label="Quantity" min="0" max="100">
+      <w-slider-thumb name="qty"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const textfield = thumb.shadowRoot.querySelector('w-textfield');
+    expect(textfield.getAttribute('aria-label')).toBe('Quantity');
+});
+// Disabled state accessibility
+test('disabled slider marks all inputs as disabled', async () => {
+    const component = html `
+    <w-slider label="Disabled slider" min="0" max="100" disabled>
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const rangeInput = thumb.shadowRoot.querySelector('input[type="range"]');
+    const textfield = thumb.shadowRoot.querySelector('w-textfield');
+    expect(rangeInput.disabled).toBe(true);
+    expect(textfield.hasAttribute('disabled')).toBe(true);
+});
+test('disabled fieldset communicates disabled state', async () => {
+    const component = html `
+    <w-slider label="Disabled control" min="0" max="100" disabled>
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const fieldset = slider.shadowRoot.querySelector('fieldset');
+    expect(fieldset.disabled).toBe(true);
+});
+// Error state accessibility (WCAG 3.3.1 Error Identification)
+test('invalid slider sets aria-invalid on fieldset', async () => {
+    const component = html `
+    <w-slider label="Invalid slider" min="0" max="100" invalid error="Please select a value">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    // Wait for the state update triggered in connectedCallback
+    await slider.updateComplete;
+    const fieldset = slider.shadowRoot.querySelector('fieldset');
+    expect(fieldset.getAttribute('aria-invalid')).toBe('true');
+});
+test('error message is visible when slider is invalid', async () => {
+    const component = html `
+    <w-slider label="Error slider" min="0" max="100" invalid error="Value is required">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    // Wait for the state update triggered in connectedCallback
+    await slider.updateComplete;
+    const errorMessage = slider.shadowRoot.querySelector('.w-slider__error');
+    expect(errorMessage).not.toBeNull();
+    expect(errorMessage.textContent.trim()).toBe('Value is required');
+});
+// Screen reader min/max range announcement
+test('screen reader can access min and max range values', async () => {
+    const component = html `
+    <w-slider label="Range with bounds" min="10" max="90">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    // Screen reader only text should contain min and max info
+    const srOnlyText = thumb.shadowRoot.querySelector('.sr-only');
+    expect(srOnlyText).not.toBeNull();
+    expect(srOnlyText.textContent).toContain('10');
+    expect(srOnlyText.textContent).toContain('90');
+});
+test('screen reader range announcement uses labelFormatter values', async () => {
+    const component = html `
+    <w-slider label="Formatted range" min="0" max="100">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    slider.labelFormatter = (slot) => {
+        if (slot === 'from')
+            return 'Zero';
+        return 'One hundred';
+    };
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    const srOnlyText = thumb.shadowRoot.querySelector('.sr-only');
+    expect(srOnlyText.textContent).toContain('Zero');
+    expect(srOnlyText.textContent).toContain('One hundred');
+});
+// Required field accessibility (WCAG 3.3.2 Labels or Instructions)
+test('required slider passes required state to thumb', async () => {
+    render(html `
+    <w-slider label="Required slider" min="0" max="100" required>
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    // The required state should be synced from slider to thumb
+    expect(thumb.required).toBe(true);
+    // Verify the slider has required attribute in HTML
+    expect(slider.hasAttribute('required')).toBe(true);
+});

package/dist/packages/slider/styles/w-slider.styles.d.ts

@@ -0,0 +1 @@
+export declare const wSliderStyles: import("lit").CSSResult;

package/dist/packages/slider/styles/w-slider.styles.js

@@ -0,0 +1,154 @@
+import { css } from 'lit';
+export const wSliderStyles = css `
+  .w-slider {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    width: 100%;
+    grid-template-areas:
+      "label"
+      "description"
+      "slider"
+      "error";
+    grid-template-columns: 1fr;
+
+    --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
+    --w-slider-track-active-background: var(--w-s-color-background-primary);
+    --w-slider-track-height: 4px;
+    --w-slider-track-active-height: 6px;
+    --w-slider-thumb-background: var(--w-s-color-background-primary);
+    --w-slider-thumb-background-hover: var(
+      --w-s-color-background-primary-hover
+    );
+    --w-slider-thumb-size: 28px;
+    --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
+    --w-slider-marker-color: var(--w-s-color-border);
+
+
+    /* Vertical position of range and markers */
+    --_range-top: calc(
+      var(--w-slider-thumb-size) / 2 +
+        calc(
+          var(--w-slider-track-active-height) - calc(
+              var(--w-slider-track-height) / 2
+            ) + 1px
+        )
+    );
+  }
+
+  .w-slider[disabled] {
+      --w-slider-track-active-background: var(--w-s-color-background-disabled-subtle);
+      --w-slider-thumb-background: var(--w-s-color-background-disabled-subtle);
+      --w-slider-thumb-background-hover: var(--w-s-color-background-disabled-subtle);
+  }
+
+  .w-slider__label {
+    grid-area: label;
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: bold;
+    padding-bottom: 8px;
+    color: var(--w-s-color-text);
+  }
+
+  .w-slider__description {
+    grid-area: description;
+  }
+
+  .w-slider__range {
+    align-self: center;
+    background: var(--w-slider-track-background);
+    border-radius: 4px;
+    height: var(--w-slider-track-active-height);
+    position: absolute;
+    /* For range sliders to avoid overlapping the slider thumbs we transform them to
+    be visually to the left and right of their respective input[type="range"]. This
+    padding is here so the active-range element is the same width as the input fields. */
+    padding-inline-start: var(--active-range-inline-start-padding, 0);
+    padding-inline-end: var(--active-range-inline-end-padding, 0);
+    top: var(--_range-top);
+    left: 0;
+    right: 0;
+    grid-area: slider;
+  }
+
+  .w-slider__active-range {
+    box-sizing: content-box;
+    background: var(--w-slider-track-active-background);
+    height: var(--w-slider-track-active-height);
+
+    border-start-start-radius: var(--active-range-border-radius, 0);
+    border-end-start-radius: var(--active-range-border-radius, 0);
+
+    /* takes over-under into the calculation if set, as this makes the ranges longer in reality */
+    --max-with-offset: calc(var(--max) + var(--over-under-offset, 0));
+
+    /* calculate the offset for the "from" thumb in percentage to move the range visualisation from the left edge, using max() to avoid going off screen */
+    --offset-percentage: calc(calc(var(--from) - var(--min)) / calc(var(--max-with-offset) - var(--min)) * 100);
+    margin-left: calc(max(var(--offset-percentage) * 1%, 0px) - var(--range-slider-magic-pixel, 0px));
+
+    /* calculate the width of the selected range in percentage, clamped between min/max */
+    --value-range: calc(var(--max-with-offset) - var(--min));
+    --range-span-percentage: calc(calc(min(var(--to), var(--max-with-offset)) - max(var(--min), var(--from))) / var(--value-range) * 100 );
+    width: calc(var(--range-span-percentage) * 1% + var(--range-slider-magic-pixel, 0px));
+
+
+    z-index: 1;
+  }
+
+  .w-slider__markers {
+    --_marker-height: 7px;
+    --_marker-width: 1px;
+
+    align-self: center;
+
+    /* Creates a linear gradient with --_marker-width wide markers
+       followed by enough transparent that we can repeat the gradient
+       along the X axis and have markers visible where we want them. */
+    background: linear-gradient(
+        to right,
+        var(--w-slider-marker-color) var(--_marker-width),
+        rgba(0, 0, 0, 0) 1px calc(100% - 1px),
+        var(--w-slider-marker-color) 100%
+      )
+      repeat-x;
+    --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
+    background-size: calc(var(--_step-width-as-percent) * 1%)
+      var(--_marker-height);
+
+    background-position: bottom 0 left 8px right 8px;
+    position: absolute;
+    top: calc(var(--_range-top) + 2px);
+    left: 1px;
+    right: 1px;
+    grid-area: slider;
+    height: var(--_marker-height);
+    margin-inline: var(--w-slider-thumb-offset);
+  }
+
+  .w-slider__error {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+    color: var(--w-s-color-text-negative);
+  }
+
+  .w-slider__help-text {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+  }
+
+  slot::slotted(w-slider-thumb) {
+    position: static;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    grid-area: slider;
+  }
+`;

package/dist/packages/slider/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/slider/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;

package/dist/packages/slider-thumb/SliderThumb.d.ts

@@ -0,0 +1,2 @@
+import { WarpSliderThumb } from './slider-thumb.js';
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {}>;

package/dist/packages/slider-thumb/SliderThumb.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSliderThumb } from './slider-thumb.js';
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: WarpSliderThumb,
+    react: React,
+});

package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts

@@ -0,0 +1,2 @@
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js

@@ -0,0 +1,3 @@
+// This file is only here to give the Storybook Vite dev server a target
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

package/dist/packages/slider-thumb/react.d.ts

@@ -0,0 +1,6 @@
+import { EventName } from '@lit/react';
+import { WarpSliderThumb } from './slider-thumb.js';
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {
+    onSliderValidity: EventName<CustomEvent>;
+    'onslider-validity': EventName<CustomEvent>;
+}>;

package/dist/packages/slider-thumb/react.js

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: Component,
+    react: React,
+    events: {
+        onSliderValidity: 'slidervalidity',
+        'onslider-validity': 'slidervalidity', // should be slider-validity
+    },
+});

package/dist/packages/slider-thumb/slider-thumb.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { WarpTextField } from '../textfield/textfield.js';
+export type SliderSlot = 'to' | 'from';
+declare const WarpSliderThumb_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Component to place inside a `<w-slider>`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ */
+declare class WarpSliderThumb extends WarpSliderThumb_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    ariaLabel: string;
+    ariaDescription: string;
+    name: string;
+    value: string;
+    /** @internal Set by `<w-slider>` */
+    disabled: boolean;
+    /** @internal Set by `<w-slider>` */
+    invalid: boolean;
+    /** @internal Set by `<w-slider>` */
+    openEnded: boolean;
+    placeholder: string;
+    /** @internal Set by `<w-slider>` */
+    markers: string;
+    /** @internal Set by `<w-slider>` */
+    required: boolean;
+    /** @internal Set by `<w-slider>` */
+    step: number;
+    /** @internal Set by `<w-slider>` */
+    min: string;
+    /** @internal Set by `<w-slider>` */
+    max: string;
+    /** @internal Set by `<w-slider>` */
+    suffix: string;
+    /** @internal Formatter for the tooltip and input mask values. Set by `<w-slider>`. */
+    valueFormatter: (value: string, slot: SliderSlot) => string;
+    /** @internal Formatter for the min and max labels below the range. Set by `<w-slider>`. */
+    labelFormatter: (slot: SliderSlot) => string;
+    range: HTMLInputElement;
+    tooltipTarget: HTMLOutputElement;
+    textfield: WarpTextField;
+    /** @internal */
+    _showTooltip: boolean;
+    /** @internal */
+    _inputHasFocus: boolean;
+    /** @internal */
+    _hiddenTextfield: boolean;
+    resetFormControl(): void;
+    /**
+     * Reference to the anchor positioning style element used by the polyfill.
+     * @internal
+     */
+    anchorPositioningStyleElement: HTMLStyleElement | null;
+    updateFieldAfterValidation(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    get boundaryValue(): string;
+    /** Value to display in the textfield (shows boundary when focused on empty value) */
+    get textFieldDisplayValue(): string;
+    /** Value to display in the tooltip */
+    get tooltipDisplayValue(): string | number;
+    get ariaDescriptionText(): string;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSliderThumb };