@warp-ds/elements 2.3.0-next.9 → 2.3.1

package/dist/packages/slider/slider.stories.js

@@ -1,197 +0,0 @@
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import '../affix/index.js';
-import '../attention/index.js';
-import '../textfield/index.js';
-import './index.js';
-const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
-const meta = {
-    title: 'Forms/Slider and Range Slider',
-    args: sliderArgs,
-    argTypes: sliderArgTypes,
-    parameters: {
-        actions: {
-            handles: sliderEvents,
-        },
-    },
-};
-export default meta;
-export const Single = {
-    render() {
-        return html `
-      <w-slider label="Single" min="0" max="100">
-        <w-slider-thumb name="value"></w-slider-thumb>
-      </w-slider>
-    `;
-    },
-};
-export const Range = {
-    render() {
-        return html `
-      <w-slider label="Range" min="0" max="100">
-        <w-slider-thumb slot="from" aria-label="From value" name="from"></w-slider-thumb>
-        <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
-      </w-slider>
-    `;
-    },
-};
-// Take a suffix attribute on `<w-slider>` I think, have `<w-slider-thumb>` get from that.
-export const SuffixSquareMeters = {
-    args: {
-        locale: 'nb',
-        suffix: 'm²',
-    },
-    render({ locale, suffix }) {
-        return html `
-      <w-slider label="Apartment size" min="0" max="250" suffix="${suffix}" data-testid="sqm">
-        <w-slider-thumb slot="from" aria-label="From size" name="from"></w-slider-thumb>
-        <w-slider-thumb slot="to" aria-label="To size" name="to"></w-slider-thumb>
-      </w-slider>
-      <script type="module">
-        const sqmSlider = document.querySelector('w-slider[data-testid="sqm"]');
-        sqmSlider.formatter = window.getNumberFormatter('${locale}').format;
-      </script>
-    `;
-    },
-};
-export const SuffixCurrency = {
-    args: {
-        locale: 'nb',
-        suffix: 'kr',
-    },
-    render({ locale, suffix }) {
-        return html `
-      <w-slider label="Price" min="0" max="250000" suffix="${suffix}" data-testid="currency">
-        <w-slider-thumb slot="from" aria-label="From price" name="from"></w-slider-thumb>
-        <w-slider-thumb slot="to" aria-label="To price" name="to"></w-slider-thumb>
-      </w-slider>
-      <script type="module">
-        const currencySlider = document.querySelector('w-slider[data-testid="currency"]');
-        currencySlider.formatter = window.getNumberFormatter('${locale}').format;
-      </script>
-    `;
-    },
-};
-export const SuffixKilometers = {
-    args: {
-        locale: 'nb',
-        suffix: 'km',
-    },
-    render({ locale, suffix }) {
-        return html `
-      <w-slider label="Distance" min="0" max="250000" suffix="${suffix}" data-testid="km">
-        <w-slider-thumb slot="from" aria-label="From distance" name="from"></w-slider-thumb>
-        <w-slider-thumb slot="to" aria-label="To distance" name="to"></w-slider-thumb>
-      </w-slider>
-      <script type="module">
-        const kmSlider = document.querySelector('w-slider[data-testid="km"]');
-        kmSlider.formatter = window.getNumberFormatter('${locale}').format;
-      </script>
-    `;
-    },
-};
-export const Marks = {
-    args: {
-        locale: 'nb',
-        step: '5',
-        markers: '5',
-    },
-    render({ markers, step }) {
-        return html `
-      <w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
-        <w-slider-thumb name="value"></w-slider-thumb>
-      </w-slider>
-    `;
-    },
-};
-export const Step = {
-    args: {
-        step: 5,
-    },
-    render({ step }) {
-        return html `
-      <w-slider label="Single" step="${step}" min="0" max="100">
-        <w-slider-thumb name="value"></w-slider-thumb>
-      </w-slider>
-    `;
-    },
-};
-export const OverUnder = {
-    args: {},
-    render() {
-        return html `
-      <form id="overunder" style="margin-bottom: 16px" lang="nb">
-        <w-slider label="Produksjonsår" min="1950" max="2025" data-testid="overunder">
-          <w-slider-thumb
-            slot="from"
-            aria-label="Fra år"
-            aria-description="1950 inkluderer kjøretøy produsert fram til 1950"
-            name="from"></w-slider-thumb>
-          <w-slider-thumb
-            slot="to"
-            aria-label="Til år"
-            aria-description="2025 inkluderer kjøretøy produsert etter 2025"
-            name="to"></w-slider-thumb>
-        </w-slider>
-      </form>
-      <p>Drag the slider to show the value below. See the Code tab for how to format the labels.</p>
-      <output>
-        <dl>
-          <dt>From:</dt>
-          <dd id="overunder-from"></dd>
-          <dt>To:</dt>
-          <dd id="overunder-to"></dd>
-        </dl>
-      </output>
-      <script>
-        /** Here is how you can show labels to indicate min and max values are "up to and including" and "this value and above". */
-        const overunderSlider = document.querySelector('w-slider[data-testid="overunder"]');
-        overunderSlider.formatter = function (value) {
-          if (value === '1950') {
-            return 'Før 1950';
-          }
-          if (value === '2025') {
-            return 'Etter 2025';
-          }
-          return value;
-        };
-
-        /** Code to show the form values in output */
-        document.forms['overunder'].addEventListener('input', function () {
-          const formData = new FormData(this);
-          const from = formData.get('from');
-          const to = formData.get('to');
-          document.getElementById('overunder-from').innerText = from;
-          document.getElementById('overunder-to').innerText = to;
-        });
-      </script>
-    `;
-    },
-};
-export const SingleError = {
-    args: {
-        locale: 'nb',
-    },
-    render() {
-        return html `
-      <w-slider label="Single" min="0" max="100">
-        <p slot="description">Try typing a value over 100</p>
-        <w-slider-thumb></w-slider-thumb>
-      </w-slider>
-    `;
-    },
-};
-export const RangeError = {
-    args: {
-        locale: 'nb',
-    },
-    render() {
-        return html `
-      <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>
-    `;
-    },
-};

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

@@ -1,4 +0,0 @@
-import '../attention/index.js';
-import '../affix/index.js';
-import '../textfield/index.js';
-import './index.js';

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

@@ -1,83 +0,0 @@
-import { userEvent } from '@vitest/browser/context';
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../attention/index.js';
-import '../affix/index.js';
-import '../textfield/index.js';
-import './index.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();
-});

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

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

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

@@ -1,167 +0,0 @@
-import { css } from 'lit';
-/* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
-export const wSliderThumbStyles = css `
-  .w-slider-thumb {
-    position: relative;
-    display: grid;
-    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
-    grid-template-areas:
-      'slider slider slider'
-      'frommarker . tomarker'
-      'fromtextfield . totextfield';
-    grid-template-columns: 1fr 24px 1fr;
-  }
-
-  .w-slider-thumb__range {
-    appearance: none;
-    background-color: transparent;
-    grid-area: slider;
-    height: 44px; /* touch target */
-    margin-left: 0;
-    pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
-  }
-
-  .w-slider-thumb__range::-webkit-slider-runnable-track {
-    box-shadow: none;
-    color: var(--w-s-color-text);
-    height: var(--w-slider-track-height);
-  }
-
-  /*
-    Use anchor positioning to place the tooltip target in relation to the slider thumb.
-    We use a polyfill to bring support to older Safari, Firefox at time of writing.
-   */
-  .w-slider-thumb__range::-webkit-slider-thumb {
-    anchor-name: --thumb;
-
-    appearance: none;
-    cursor: pointer;
-    background: var(--w-s-color-background-primary);
-    border-radius: 50%;
-    height: var(--w-slider-thumb-size);
-    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
-    pointer-events: initial;
-    width: var(--w-slider-thumb-size);
-    z-index: 1;
-  }
-
-  .w-slider-thumb__range::-moz-range-thumb {
-    anchor-name: --thumb;
-
-    appearance: none;
-    cursor: pointer;
-    background: var(--w-s-color-background-primary);
-    border-radius: 50%;
-    border-color: transparent;
-    height: var(--w-slider-thumb-size);
-    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
-    pointer-events: initial;
-    width: var(--w-slider-thumb-size);
-    z-index: 1;
-
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__range:active::-webkit-slider-thumb,
-  .w-slider-thumb__range:hover::-webkit-slider-thumb {
-    background: var(--w-s-color-background-primary-hover);
-    box-shadow: var(--w-shadow-slider-handle-hover);
-  }
-
-  .w-slider-thumb__range:focus,
-  .w-slider-thumb__range:focus-visible {
-    outline: none;
-  }
-
-  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__range:active::-moz-range-thumb,
-  .w-slider-thumb__range:hover::-moz-range-thumb {
-    background: var(--w-s-color-background-primary-hover);
-    box-shadow: var(--w-shadow-slider-handle-hover);
-  }
-
-  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__tooltip-target {
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    border: 2px solid transparent;
-    border-radius: 20px;
-    width: 8px;
-    height: 8px;
-    position-anchor: --thumb;
-    position-area: center; /* Position the tooltip target right on the range thumb */
-  }
-
-  /* Uncomment this to debug the invisible anchor target */
-  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
-
-  .w-slider-thumb__from-marker,
-  .w-slider-thumb__to-marker {
-    margin-inline: 2px; /* visual alignment with input border, slider thumb */
-    color: var(--w-s-color-text-subtle);
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-
-  .w-slider-thumb__from-marker {
-    grid-area: frommarker;
-  }
-
-  .w-slider-thumb__to-marker {
-    grid-area: tomarker;
-    text-align: right;
-  }
-
-  .w-slider-thumb__textfield {
-    margin-top: 10px;
-    pointer-events: auto;
-    grid-row: 3 / 4;
-    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
-  }
-
-  :host([name='from']) .w-slider-thumb__textfield {
-    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
-  }
-
-  :host([name='from']) .w-slider-thumb__range {
-    margin-left: var(--w-slider-thumb-size);
-  }
-
-  :host([name='to']) .w-slider-thumb__range {
-    margin-right: var(--w-slider-thumb-size);
-  }
-
-  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb,
-  :host([name='from']) .w-slider-thumb__tooltip-target {
-    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
-  }
-
-  :host([name='from']) .w-slider-thumb__range::-moz-range-thumb {
-    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
-  }
-
-  :host([name='to']) .w-slider-thumb__textfield {
-    grid-row: 3 / 4;
-    grid-column: 3 / 4;
-  }
-
-  :host([name='to']) .w-slider-thumb__tooltip-target,
-  :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
-    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
-  }
-
-  :host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
-    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
-  }
-`;

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

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

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

@@ -1,134 +0,0 @@
-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';
-    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);
-
-    /* Math corner to calculate the fill of the slider and placement of markers. */
-
-    /* The --min value can be non-zero, f. ex. choosing a year from 1950 to 2025. Normalize the values so we start at 0 and run to max - min. */
-    --_value-range: calc(var(--max) - var(--min));
-
-    /** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
-    --_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
-
-    /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
-    --_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
-
-    /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
-     * In other words, given a width of 100% how many percent should be left unfilled/blank
-     * at the beginning of the range slider (dashes in this ASCII-range-slider: |---O******O|) */
-    --_from-as-percent-of-max: calc(var(--_from-in-range) / var(--_value-range) * 100);
-    --_blank-values-before: var(--_from-as-percent-of-max);
-
-    /* Set the width of the fill as a percentage.
-     * In other words, given a width of 100% how many percent should be left unfilled/blank
-     * at the end of the slider (dashes in this ASCII-slider: |******O---|) */
-    --_to-as-percent-of-max: calc(var(--_to-in-range) / var(--_value-range) * 100);
-    --_filled-values: calc(var(--_to-as-percent-of-max) - var(--_blank-values-before));
-
-    /* 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__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);
-
-    margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
-    width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 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);
-  }
-
-  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

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

package/dist/packages/slider/styles.js

@@ -1,2 +0,0 @@
-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/steps/index.d.ts

@@ -1,36 +0,0 @@
-import { LitElement } from 'lit';
-import '@warp-ds/icons/elements/check-16';
-/**
- * Steps are used to show progress through a process or to guide users through a multi-step task.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
- */
-declare class WarpSteps extends LitElement {
-    horizontal: boolean;
-    right: boolean;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    updated(): void;
-    updateStepsContext(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-interface StepsContext {
-    horizontal?: boolean;
-    right?: boolean;
-    isLast?: boolean;
-    isFirst?: boolean;
-}
-/**
- * Individual step component that shows a single step in a process
- */
-declare class WarpStep extends LitElement {
-    active: boolean;
-    completed: boolean;
-    private _context;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    setContext(context: StepsContext): void;
-    getAriaLabel(): string;
-    render(): import("lit").TemplateResult<1>;
-}
-export { WarpSteps, WarpStep };