@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

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

@@ -1,154 +1,172 @@
-import { css } from 'lit';
+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
+	.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
+		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;
-  }
+		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.js

@@ -1,2 +1,2 @@
-import { unsafeCSS } from 'lit';
+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}.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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { WarpSliderThumb } from './slider-thumb.js';
+import React from "react";
+import { WarpSliderThumb } from "./slider-thumb.js";
 export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSliderThumb>, "value" | "form" | "name" | "textfield" | "disabled" | "invalid" | "max" | "min" | "placeholder" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "suffix" | "range" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "tooltipTarget" | "_showTooltip" | "_inputHasFocus" | "_hiddenTextfield" | "anchorPositioningStyleElement" | "updateFieldAfterValidation" | "boundaryValue" | "textFieldDisplayValue" | "tooltipDisplayValue" | "ariaDescriptionText" | "onSliderValidity" | "onslider-validity"> & {
     onSliderValidity?: ((e: CustomEvent<any>) => void) | undefined;
-    'onslider-validity'?: ((e: CustomEvent<any>) => void) | undefined;
+    "onslider-validity"?: ((e: CustomEvent<any>) => void) | undefined;
 } & Partial<Omit<WarpSliderThumb, keyof HTMLElement>> & React.RefAttributes<WarpSliderThumb>, "ref">, "aria-description" | "aria-label"> & {
     ariaLabel?: string;
     ariaDescription?: string;

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

@@ -1,22 +1,24 @@
-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";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseSliderThumb = createComponent({
-    tagName: 'w-slider-thumb',
+    tagName: "w-slider-thumb",
     elementClass: Component,
     react: React,
     events: {
-        onSliderValidity: 'slidervalidity',
-        'onslider-validity': 'slidervalidity', // should be slider-validity
+        onSliderValidity: "slidervalidity",
+        "onslider-validity": "slidervalidity", // should be slider-validity
     },
 });
 export const SliderThumb = React.forwardRef(({ ariaLabel, ariaDescription, ...props }, ref) => React.createElement(BaseSliderThumb, {
     ...props,
-    ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),
-    ...(ariaDescription !== undefined ? { 'aria-description': ariaDescription } : {}),
+    ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : {}),
+    ...(ariaDescription !== undefined
+        ? { "aria-description": ariaDescription }
+        : {}),
     ref,
 }));
-SliderThumb.displayName = 'SliderThumb';
+SliderThumb.displayName = "SliderThumb";

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

@@ -1,6 +1,6 @@
-import { LitElement, PropertyValues } from 'lit';
-import type { WarpTextField } from '../textfield/textfield.js';
-export type SliderSlot = 'to' | 'from';
+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>`.

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

@@ -1 +1 @@
-import './slider-thumb.js';
+import "./slider-thumb.js";

package/dist/packages/slider-thumb/slider-thumb.hydration.test.js

@@ -1,35 +1,44 @@
-import { i18n } from '@lingui/core';
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './slider-thumb.js';
+import { i18n } from "@lingui/core";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./slider-thumb.js";
 // Activate i18n before tests (normally done by parent w-slider)
-i18n.load('en', {});
-i18n.activate('en');
-describe('w-slider-thumb React SSR hydration', () => {
+i18n.load("en", {});
+i18n.activate("en");
+describe("w-slider-thumb React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
     // Note: w-slider-thumb is typically used within w-slider, which syncs properties.
     // Testing the element alone to verify its own attributes don't cause mismatch.
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-slider-thumb', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider-thumb", {});
         expect(warnings).toEqual([]);
     });
-    test('with value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-slider-thumb', { value: '50' });
+    test("with value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider-thumb", { value: "50" });
         expect(warnings).toEqual([]);
     });
-    test('with name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-slider-thumb', { value: '50', name: 'slider' });
+    test("with name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider-thumb", {
+            value: "50",
+            name: "slider",
+        });
         expect(warnings).toEqual([]);
     });
-    test('disabled slider-thumb hydrates without warnings', async () => {
-        const warnings = await testHydration('w-slider-thumb', { value: '50', disabled: true });
+    test("disabled slider-thumb hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider-thumb", {
+            value: "50",
+            disabled: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('with placeholder hydrates without warnings', async () => {
-        const warnings = await testHydration('w-slider-thumb', { value: '', placeholder: 'Min' });
+    test("with placeholder hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider-thumb", {
+            value: "",
+            placeholder: "Min",
+        });
         expect(warnings).toEqual([]);
     });
 });