@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

package/dist/packages/select/select.test.js

@@ -1,252 +1,301 @@
-import { server, userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './select.js';
-test('works in a form', async () => {
+import { i18n } from "@lingui/core";
+import { server, userEvent } from "vitest/browser";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./select.js";
+import { messages } from "./locales/en/messages.mjs";
+import { messages as nbMessages } from "./locales/nb/messages.mjs";
+// Initialize i18n with English locale for tests
+i18n.load("en", messages);
+i18n.load("nb", nbMessages);
+i18n.activate("en");
+test("works in a form", async () => {
     const component = html `
-    <form data-testid="flavour">
-      <w-select label="Berries" name="berry">
-        <option value="strawberries">Strawberries</option>
-        <option value="raspberries">Raspberries</option>
-        <option value="cloudberries">Cloudberries</option>
-      </w-select>
+		<form data-testid="flavour">
+			<w-select label="Berries" name="berry">
+				<option value="strawberries">Strawberries</option>
+				<option value="raspberries">Raspberries</option>
+				<option value="cloudberries">Cloudberries</option>
+			</w-select>
 
-      <button>Submit</button>
-    </form>
-  `;
+			<button>Submit</button>
+		</form>
+	`;
     const page = render(component);
     // Confirm we have a form associated field berry
-    const form = page.getByTestId('flavour');
+    const form = page.getByTestId("flavour");
     expect(form).toHaveFormValues({
         berry: undefined,
     });
     // Select Raspberries
-    await expect.element(page.getByLabelText('Berries')).toBeVisible();
-    await userEvent.selectOptions(page.getByLabelText('Berries').element(), 'Raspberries');
+    await expect.element(page.getByLabelText("Berries")).toBeVisible();
+    await userEvent.selectOptions(page.getByLabelText("Berries").element(), "Raspberries");
     // Confirm the form has a field berry with value raspberries
     expect(form).toHaveFormValues({
-        berry: 'raspberries',
+        berry: "raspberries",
     });
 });
-test('can reset select by resetting surrounding form', async () => {
-    const label = 'Test label';
+test("can reset select by resetting surrounding form", async () => {
+    const label = "Test label";
     render(html `
-    <form>
-      <w-select
-        label=${label}
-        name="test"
-        value="strawberries"
-      >
-        <option value="strawberries">Strawberries</option>
-        <option value="raspberries">Raspberries</option>
-        <option value="cloudberries">Cloudberries</option>
-      </w-select>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wSelect = document.querySelector('w-select');
+		<form>
+			<w-select label=${label} name="test" value="strawberries">
+				<option value="strawberries">Strawberries</option>
+				<option value="raspberries">Raspberries</option>
+				<option value="cloudberries">Cloudberries</option>
+			</w-select>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wSelect = document.querySelector("w-select");
     // sanity
     expect(form).not.toBeNull();
     expect(wSelect).not.toBeNull();
     // Initial value is "strawberries"
-    expect(wSelect.value).toBe('strawberries');
+    expect(wSelect.value).toBe("strawberries");
     // Change the value to "raspberries"
-    wSelect.value = 'raspberries';
-    expect(wSelect.value).toBe('raspberries');
+    wSelect.value = "raspberries";
+    expect(wSelect.value).toBe("raspberries");
     // Reset the form
     form.reset();
     // Value should be reset back to "strawberries"
-    expect(wSelect.value).toBe('strawberries');
+    expect(wSelect.value).toBe("strawberries");
 });
-test('change event target.value reflects the selected value', async () => {
+test("change event target.value reflects the selected value", async () => {
     render(html `
-    <w-select label="Fruit">
-      <option value="apples">Apples</option>
-      <option value="pears">Pears</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Fruit">
+			<option value="apples">Apples</option>
+			<option value="pears">Pears</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
-    let observedTargetValue = '';
-    wSelect.addEventListener('change', (e) => {
-        observedTargetValue = (e.target.value ?? '');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
+    let observedTargetValue = "";
+    wSelect.addEventListener("change", (e) => {
+        observedTargetValue = (e.target
+            .value ?? "");
     });
-    nativeSelect.value = 'pears';
-    nativeSelect.dispatchEvent(new Event('change'));
-    expect(observedTargetValue).toBe('pears');
+    nativeSelect.value = "pears";
+    nativeSelect.dispatchEvent(new Event("change"));
+    expect(observedTargetValue).toBe("pears");
 });
-test('keeps native select in sync when host value changes', async () => {
+test("keeps native select in sync when host value changes", async () => {
     render(html `
-    <w-select label="Gender" value="male">
-      <option value="male">Male</option>
-      <option value="female">Female</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Gender" value="male">
+			<option value="male">Male</option>
+			<option value="female">Female</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
-    wSelect.value = 'female';
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
+    wSelect.value = "female";
     await wSelect.updateComplete;
-    expect(nativeSelect.value).toBe('female');
+    expect(nativeSelect.value).toBe("female");
 });
-test('syncs host value when native select value changes without firing change', async () => {
+test("syncs host value when native select value changes without firing change", async () => {
     render(html `
-    <form>
-      <w-select label="Gender" name="gender">
-        <option value="">Choose</option>
-        <option value="male">Male</option>
-        <option value="female">Female</option>
-      </w-select>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wSelect = document.querySelector('w-select');
+		<form>
+			<w-select label="Gender" name="gender">
+				<option value="">Choose</option>
+				<option value="male">Male</option>
+				<option value="female">Female</option>
+			</w-select>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
     // Simulates browser session restore/autocomplete updating only the internal native select.
-    nativeSelect.value = 'female';
-    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
-    await expect.poll(() => wSelect.value).toBe('female');
-    expect(new FormData(form).get('gender')).toBe('female');
+    nativeSelect.value = "female";
+    window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
+    await expect.poll(() => wSelect.value).toBe("female");
+    expect(new FormData(form).get("gender")).toBe("female");
 });
-test('does not sync host value from the browser default first option', async () => {
+test("does not sync host value from the browser default first option", async () => {
     render(html `
-    <w-select label="Default first option">
-      <option value="alpha">Alpha</option>
-      <option value="beta">Beta</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Default first option">
+			<option value="alpha">Alpha</option>
+			<option value="beta">Beta</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
-    expect(wSelect.value ?? '').toBe('');
+    window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
+    expect(wSelect.value ?? "").toBe("");
 });
-test('pageshow does not overwrite an intentionally empty host value', async () => {
+test("pageshow does not overwrite an intentionally empty host value", async () => {
     render(html `
-    <w-select label="Intentional empty" value="">
-      <option value="male">Male</option>
-      <option value="female">Female</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Intentional empty" value="">
+			<option value="male">Male</option>
+			<option value="female">Female</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
-    expect(nativeSelect.value).toBe('');
-    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
-    expect(wSelect.value ?? '').toBe('');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
+    expect(nativeSelect.value).toBe("");
+    window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
+    expect(wSelect.value ?? "").toBe("");
 });
-test('formStateRestoreCallback syncs value from provided state', async () => {
+test("formStateRestoreCallback syncs value from provided state", async () => {
     render(html `
-    <form>
-      <w-select label="Restore state" name="gender">
-        <option value="">Choose</option>
-        <option value="male">Male</option>
-        <option value="female">Female</option>
-      </w-select>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wSelect = document.querySelector('w-select');
+		<form>
+			<w-select label="Restore state" name="gender">
+				<option value="">Choose</option>
+				<option value="male">Male</option>
+				<option value="female">Female</option>
+			</w-select>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    wSelect.formStateRestoreCallback('female', 'restore');
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
-    expect(wSelect.value).toBe('female');
-    expect(nativeSelect.value).toBe('female');
-    expect(new FormData(form).get('gender')).toBe('female');
+    wSelect.formStateRestoreCallback("female", "restore");
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
+    expect(wSelect.value).toBe("female");
+    expect(nativeSelect.value).toBe("female");
+    expect(new FormData(form).get("gender")).toBe("female");
 });
-test('formStateRestoreCallback with null falls back to native value reconciliation', async () => {
+test("formStateRestoreCallback with null falls back to native value reconciliation", async () => {
     render(html `
-    <form>
-      <w-select label="Restore fallback" name="gender">
-        <option value="">Choose</option>
-        <option value="male">Male</option>
-        <option value="female">Female</option>
-      </w-select>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wSelect = document.querySelector('w-select');
+		<form>
+			<w-select label="Restore fallback" name="gender">
+				<option value="">Choose</option>
+				<option value="male">Male</option>
+				<option value="female">Female</option>
+			</w-select>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
-    nativeSelect.value = 'female';
-    wSelect.formStateRestoreCallback(null, 'restore');
-    expect(wSelect.value).toBe('female');
-    expect(new FormData(form).get('gender')).toBe('female');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
+    nativeSelect.value = "female";
+    wSelect.formStateRestoreCallback(null, "restore");
+    expect(wSelect.value).toBe("female");
+    expect(new FormData(form).get("gender")).toBe("female");
 });
-test('change event keeps backward compatibility by exposing detail', async () => {
+test("change event keeps backward compatibility by exposing detail", async () => {
     render(html `
-    <w-select label="Legacy change detail">
-      <option value="alpha">Alpha</option>
-      <option value="beta">Beta</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Legacy change detail">
+			<option value="alpha">Alpha</option>
+			<option value="beta">Beta</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
     let observedDetail;
-    wSelect.addEventListener('change', (event) => {
+    wSelect.addEventListener("change", (event) => {
         observedDetail = event.detail;
     });
-    nativeSelect.value = 'beta';
-    nativeSelect.dispatchEvent(new Event('change'));
-    expect(observedDetail).toBe('beta');
+    nativeSelect.value = "beta";
+    nativeSelect.dispatchEvent(new Event("change"));
+    expect(observedDetail).toBe("beta");
 });
-test('emits a single host change event for one native change interaction', async () => {
+test("emits a single host change event for one native change interaction", async () => {
     render(html `
-    <w-select label="Single change event">
-      <option value="alpha">Alpha</option>
-      <option value="beta">Beta</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Single change event">
+			<option value="alpha">Alpha</option>
+			<option value="beta">Beta</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const nativeSelect = wSelect.shadowRoot.querySelector('select');
+    const nativeSelect = wSelect.shadowRoot.querySelector("select");
     let changeCount = 0;
-    wSelect.addEventListener('change', () => {
+    wSelect.addEventListener("change", () => {
         changeCount += 1;
     });
-    nativeSelect.value = 'beta';
-    nativeSelect.dispatchEvent(new Event('change'));
+    nativeSelect.value = "beta";
+    nativeSelect.dispatchEvent(new Event("change"));
     expect(changeCount).toBe(1);
 });
-test('reflects dynamic light-DOM option selected changes into native select', async () => {
+test("reflects dynamic light-DOM option selected changes into native select", async () => {
     render(html `
-    <w-select label="Dynamic options">
-      <option value="alpha">Alpha</option>
-      <option value="beta">Beta</option>
-    </w-select>
-  `);
-    const wSelect = document.querySelector('w-select');
+		<w-select label="Dynamic options">
+			<option value="alpha">Alpha</option>
+			<option value="beta">Beta</option>
+		</w-select>
+	`);
+    const wSelect = document.querySelector("w-select");
     await wSelect.updateComplete;
-    const lightOptions = Array.from(wSelect.querySelectorAll('option'));
-    lightOptions[1].setAttribute('selected', '');
+    const lightOptions = [...wSelect.querySelectorAll("option")];
+    lightOptions[1].setAttribute("selected", "");
     await expect
         .poll(() => {
-        const nativeSelect = wSelect.shadowRoot.querySelector('select');
+        const nativeSelect = wSelect.shadowRoot.querySelector("select");
         return nativeSelect.value;
     })
-        .toBe('beta');
+        .toBe("beta");
 });
 /* For some reason this test fails only in Chromium and only on CI. Manually tested OK in Chrome. */
-test.skipIf(server.browser === 'chromium' && server.config.env.CI)('submits the associated form when radio has focus and user presses Enter', async () => {
+test.skipIf(server.browser === "chromium" && server.config.env.CI)("submits the associated form when radio has focus and user presses Enter", async () => {
     const screen = render(html `
-    <form>
-      <w-select data-testid="select" label="Select">
-        <option value="alpha" selected>Alpha</option>
-        <option value="beta">Beta</option>
-      </w-select>
-      <button type="submit">Submit</button>
-    </form>
-  `);
+			<form>
+				<w-select data-testid="select" label="Select">
+					<option value="alpha" selected>Alpha</option>
+					<option value="beta">Beta</option>
+				</w-select>
+				<button type="submit">Submit</button>
+			</form>
+		`);
     const onSubmit = vi.fn();
-    const form = document.querySelector('form');
-    form.addEventListener('submit', (event) => {
+    const form = document.querySelector("form");
+    form.addEventListener("submit", (event) => {
         event.preventDefault();
         onSubmit();
     });
-    await userEvent.click(screen.getByTestId('select'));
-    await userEvent.keyboard('{Enter}');
+    await userEvent.click(screen.getByTestId("select"));
+    await userEvent.keyboard("{Enter}");
     expect(onSubmit).toHaveBeenCalled();
 });
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `
+		<w-select label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-select>
+	`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    expect(page.getByText("(optional)").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `
+		<w-select label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-select>
+	`);
+    await expect
+        .element(page.getByRole("combobox", { name: /Country.*Optional/ }))
+        .toBeVisible();
+});
+test("does not render optional indicator when there is no label", async () => {
+    const page = render(html `
+		<w-select aria-label="Country" optional>
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-select>
+	`);
+    await expect.element(page.getByLabelText("Country")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("renders localized optional text based on document lang", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `
+		<w-select label="Country" optional data-testid="field">
+			<option value="no">Norway</option>
+			<option value="se">Sweden</option>
+		</w-select>
+	`);
+    const el = page.getByTestId("field").element();
+    await el.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
+});

package/dist/packages/select/styles.js

@@ -1,2 +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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none,.before\\:pointer-events-none:before{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,: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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.flex{display:flex}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none,.before\\:pointer-events-none:before{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}");

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

@@ -1,2 +1,2 @@
-export * from '../slider-thumb/slider-thumb.js';
-export * from './slider.js';
+export * from "../slider-thumb/slider-thumb.js";
+export * from "./slider.js";

package/dist/packages/slider/index.js

@@ -1,2 +1,2 @@
-export * from '../slider-thumb/slider-thumb.js';
-export * from './slider.js';
+export * from "../slider-thumb/slider-thumb.js";
+export * from "./slider.js";

package/dist/packages/slider/locales/da/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.out_of_bounds\":[\"Værdien skal være mellem \",[\"min\"],\" og \",[\"max\"]],\"slider.error.overlap\":[\"Maksimumværdien må ikke være mindre end minimumværdien\"],\"slider.error.required\":[\"Dette felt er påkrævet\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valgfri\"],\"slider.error.out_of_bounds\":[\"Værdien skal være mellem \",[\"min\"],\" og \",[\"max\"]],\"slider.error.overlap\":[\"Maksimumværdien må ikke være mindre end minimumværdien\"],\"slider.error.required\":[\"Dette felt er påkrævet\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");

package/dist/packages/slider/locales/en/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.out_of_bounds\":[\"Value must be between \",[\"min\"],\" and \",[\"max\"]],\"slider.error.overlap\":[\"The maximum value cannot be less than the minimum\"],\"slider.error.required\":[\"This field is required\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Optional\"],\"slider.error.out_of_bounds\":[\"Value must be between \",[\"min\"],\" and \",[\"max\"]],\"slider.error.overlap\":[\"The maximum value cannot be less than the minimum\"],\"slider.error.required\":[\"This field is required\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");

package/dist/packages/slider/locales/fi/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.out_of_bounds\":[\"Arvon on oltava välillä \",[\"min\"],\" - \",[\"max\"]],\"slider.error.overlap\":[\"Maksimiarvo ei voi olla pienempi kuin minimiarvo\"],\"slider.error.required\":[\"Tämä kenttä on pakollinen\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valinnainen\"],\"slider.error.out_of_bounds\":[\"Arvon on oltava välillä \",[\"min\"],\" - \",[\"max\"]],\"slider.error.overlap\":[\"Maksimiarvo ei voi olla pienempi kuin minimiarvo\"],\"slider.error.required\":[\"Tämä kenttä on pakollinen\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");

package/dist/packages/slider/locales/nb/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.out_of_bounds\":[\"Verdien må være mellom \",[\"min\"],\" og \",[\"max\"]],\"slider.error.overlap\":[\"Maksimumsverdien kan ikke være mindre enn minimumsverdien\"],\"slider.error.required\":[\"Dette feltet er påkrevd\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valgfri\"],\"slider.error.out_of_bounds\":[\"Verdien må være mellom \",[\"min\"],\" og \",[\"max\"]],\"slider.error.overlap\":[\"Maksimumsverdien kan ikke være mindre enn minimumsverdien\"],\"slider.error.required\":[\"Dette feltet er påkrevd\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");

package/dist/packages/slider/locales/sv/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"slider.error.out_of_bounds\":[\"Värdet måste vara mellan \",[\"min\"],\" och \",[\"max\"]],\"slider.error.overlap\":[\"Maxvärdet kan inte vara mindre än minimivärdet\"],\"slider.error.required\":[\"Detta fält är obligatoriskt\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valfritt\"],\"slider.error.out_of_bounds\":[\"Värdet måste vara mellan \",[\"min\"],\" och \",[\"max\"]],\"slider.error.overlap\":[\"Maxvärdet kan inte vara mindre än minimivärdet\"],\"slider.error.required\":[\"Detta fält är obligatoriskt\"],\"slider.label.from\":[\"From\"],\"slider.label.to\":[\"To\"],\"slider.placeholder.from\":[\"Min\"],\"slider.placeholder.to\":[\"Max\"]}");

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

@@ -1,7 +1,12 @@
-import React from 'react';
-import { WarpSlider } from './slider.js';
-export { SliderThumb } from '../slider-thumb/react.js';
-export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSlider>, "fieldset" | "label" | "disabled" | "invalid" | "helpText" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "suffix" | "error" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<WarpSlider, keyof HTMLElement>> & React.RefAttributes<WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
+import React from "react";
+import type { WarpSlider } from "./slider.js";
+export { SliderThumb } from "../slider-thumb/react.js";
+/**
+ * Parent component for sliders (both single and range sliders). Used in combination with a `<SliderThumb>`.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
+ */
+export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSlider>, "disabled" | "invalid" | "label" | "helpText" | "optional" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "_label" | "render" | "renderOptions" | "fieldset" | "error" | "openEnded" | "markers" | "suffix" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "_hasLabel" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<WarpSlider, keyof HTMLElement>> & React.RefAttributes<WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
     openEnded?: boolean;
     helpText?: string;
     hiddenTextfield?: boolean;

package/dist/packages/slider/react.js

@@ -1,21 +1,26 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // Re-export from split packages
-export { SliderThumb } from '../slider-thumb/react.js';
+export { SliderThumb } from "../slider-thumb/react.js";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseSlider = createComponent({
-    tagName: 'w-slider',
+    tagName: "w-slider",
     elementClass: Component,
     react: React,
 });
+/**
+ * Parent component for sliders (both single and range sliders). Used in combination with a `<SliderThumb>`.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
+ */
 export const Slider = React.forwardRef(({ openEnded, helpText, hiddenTextfield, ...props }, ref) => React.createElement(BaseSlider, {
     ...props,
-    ...(openEnded ? { 'open-ended': true } : {}),
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
-    ...(hiddenTextfield ? { 'hidden-textfield': true } : {}),
+    ...(openEnded ? { "open-ended": true } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
+    ...(hiddenTextfield ? { "hidden-textfield": true } : {}),
     ref,
 }));
-Slider.displayName = 'Slider';
+Slider.displayName = "Slider";