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

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { Slider } from './react';
+import { StoryObj } from "@storybook/react";
+import { Slider } from "./react";
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./slider").WarpSlider, {}>;
@@ -16,3 +16,4 @@ export declare const Step: Story;
 export declare const OverUnder: Story;
 export declare const SingleError: Story;
 export declare const RangeError: Story;
+export declare const TestCase: Story;

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

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { Slider, SliderThumb } from './react';
-const locale = 'nb';
+import React, { useState } from "react";
+import { Slider, SliderThumb } from "./react";
+const locale = "nb";
 const getNumberFormatter = (locale, opts = {}) => {
     return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
 };
 export default {
-    title: 'Forms/Slider and Range Slider',
+    title: "Forms/Slider and Range Slider",
     component: Slider,
 };
 export const Single = {
@@ -24,7 +24,7 @@ export const Range = {
 // Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
 export const SuffixSquareMeters = {
     args: {
-        suffix: 'm²',
+        suffix: "m²",
     },
     render({ suffix }) {
         return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
@@ -34,7 +34,7 @@ export const SuffixSquareMeters = {
 };
 export const SuffixCurrency = {
     args: {
-        suffix: 'kr',
+        suffix: "kr",
     },
     render({ suffix }) {
         return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
@@ -44,7 +44,7 @@ export const SuffixCurrency = {
 };
 export const SuffixKilometers = {
     args: {
-        suffix: 'km',
+        suffix: "km",
     },
     render({ suffix }) {
         return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
@@ -54,7 +54,7 @@ export const SuffixKilometers = {
 };
 export const Marks = {
     args: {
-        suffix: 'km',
+        suffix: "km",
     },
     render({ suffix }) {
         return (React.createElement(React.Fragment, null,
@@ -73,20 +73,20 @@ export const Step = {
 };
 export const OverUnder = {
     render() {
-        const [overUnderFrom, setOverUnderFrom] = useState('');
-        const [overUnderTo, setOverUnderTo] = useState('');
+        const [overUnderFrom, setOverUnderFrom] = useState("");
+        const [overUnderTo, setOverUnderTo] = useState("");
         return (React.createElement(React.Fragment, null,
             React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
                     const formData = new FormData(val.currentTarget);
-                    setOverUnderFrom(formData.get('from'));
-                    setOverUnderTo(formData.get('to'));
+                    setOverUnderFrom(formData.get("from"));
+                    setOverUnderTo(formData.get("to"));
                 } },
                 React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
-                        if (value === '1950') {
-                            return 'Før 1950';
+                        if (value === "1950") {
+                            return "Før 1950";
                         }
-                        if (value === '2025') {
-                            return 'Etter 2025';
+                        if (value === "2025") {
+                            return "Etter 2025";
                         }
                         return value;
                     } },
@@ -116,3 +116,25 @@ export const RangeError = {
             React.createElement(SliderThumb, { slot: "to", name: "to" })));
     },
 };
+export const TestCase = {
+    render() {
+        const [fromValue, setFromValue] = useState("0");
+        const [toValue, setToValue] = useState("150000");
+        return (React.createElement(React.Fragment, null,
+            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
+                    const formData = new FormData(val.currentTarget);
+                    setFromValue(formData.get("from"));
+                    setToValue(formData.get("to"));
+                } },
+                React.createElement(Slider, { label: "Pris", min: "0", max: "700000" },
+                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra pris", name: "from", value: fromValue }),
+                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til pris", "aria-description": "700000 inkluderer prisen derfra og opp", name: "to", value: toValue }))),
+            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
+            React.createElement("output", null,
+                React.createElement("dl", null,
+                    React.createElement("dt", null, "From:"),
+                    React.createElement("dd", null, fromValue),
+                    React.createElement("dt", null, "To:"),
+                    React.createElement("dd", null, toValue)))));
+    },
+};

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

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '../affix/index.js';
-import '../attention/index.js';
-import '../textfield/index.js';
-import './index.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "../affix/index.js";
+import "../attention/index.js";
+import "../textfield/index.js";
+import "./index.js";
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

@@ -1,12 +1,12 @@
-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');
+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',
+    title: "Forms/Slider and Range Slider",
     args: sliderArgs,
     argTypes: sliderArgTypes,
     parameters: {
@@ -46,8 +46,8 @@ export const Range = {
 // Take a suffix attribute on `<w-slider>` I think, have `<w-slider-thumb>` get from that.
 export const SuffixSquareMeters = {
     args: {
-        locale: 'nb',
-        suffix: 'm²',
+        locale: "nb",
+        suffix: "m²",
     },
     render({ locale, suffix }) {
         return html `
@@ -78,8 +78,8 @@ export const SuffixSquareMeters = {
 };
 export const SuffixCurrency = {
     args: {
-        locale: 'nb',
-        suffix: 'kr',
+        locale: "nb",
+        suffix: "kr",
     },
     render({ locale, suffix }) {
         return html `
@@ -103,10 +103,10 @@ export const SuffixCurrency = {
       </w-slider>
       <script type="module">
         const currencySlider = document.querySelector(
-          'w-slider[data-testid="currency"]',
+          'w-slider[data-testid="currency"]'
         );
         currencySlider.formatter = window.getNumberFormatter(
-          "${locale}",
+          "${locale}"
         ).format;
       </script>
     `;
@@ -114,8 +114,8 @@ export const SuffixCurrency = {
 };
 export const SuffixKilometers = {
     args: {
-        locale: 'nb',
-        suffix: 'km',
+        locale: "nb",
+        suffix: "km",
     },
     render({ locale, suffix }) {
         return html `
@@ -146,9 +146,9 @@ export const SuffixKilometers = {
 };
 export const Marks = {
     args: {
-        locale: 'nb',
-        step: '5',
-        markers: '5',
+        locale: "nb",
+        step: "5",
+        markers: "5",
     },
     render({ markers, step }) {
         return html `
@@ -217,7 +217,7 @@ export const OverUnder = {
       <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"]',
+          'w-slider[data-testid="overunder"]'
         );
         overunderSlider.formatter = function (value, type) {
           if (value === "" && type === "from") {
@@ -243,7 +243,7 @@ export const OverUnder = {
 };
 export const SingleError = {
     args: {
-        locale: 'nb',
+        locale: "nb",
     },
     render() {
         return html `
@@ -260,7 +260,9 @@ export const RangeError = {
         return html `
       <form id="rangeerror" style="margin-bottom: 16px">
         <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>
+          <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>
@@ -297,24 +299,26 @@ export const TestCase = {
       <form id="overunder" style="margin-bottom: 16px" lang="nb">
         <w-slider
           label="Pris"
-              suffix="kr"
+          suffix="kr"
           min="0"
           max="700000"
           data-testid="overunder"
           allow-values-outside-range="true"
-            step="10000"
+          step="10000"
         >
           <w-slider-thumb
             slot="from"
             aria-label="Fra år"
             aria-description="1950 inkluderer kjøretøy produsert fram til 1950"
             name="from"
+            value="0"
           ></w-slider-thumb>
           <w-slider-thumb
             slot="to"
             aria-label="Til år"
             aria-description="2025 inkluderer kjøretøy produsert etter 2025"
             name="to"
+            value="150000"
           ></w-slider-thumb>
         </w-slider>
       </form>
@@ -333,7 +337,7 @@ export const TestCase = {
       <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"]',
+          'w-slider[data-testid="overunder"]'
         );
         overunderSlider.formatter = function (value, type) {
           if (value === "" && type === "from") {

package/dist/packages/textfield/index.js

@@ -2489,7 +2489,7 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
     text-overflow: ellipsis;
     z-index: 1;
   }
-`;import{css as ee}from"lit";var D=ee`*,: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}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.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}.relative{position:relative}.static{position:static}.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)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.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-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-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.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-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.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{pointer-events:none}.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}.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)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},N={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},s=class extends B(G){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value))}get _inputstyles(){return Y([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return Y([N.base,this.invalid?N.colorInvalid:N.color])}get _label(){if(this.label)return j`<label for="${this._id}" class=${ae.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:n}=i.currentTarget;this.value=n;let g=new CustomEvent(i.type,{detail:{name:r,value:n,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return j`
+`;import{css as ee}from"lit";var D=ee`*,: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}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.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}.relative{position:relative}.static{position:static}.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)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.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-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-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.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-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.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{pointer-events:none}.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}.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)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},N={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},s=class extends B(G){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}get _inputstyles(){return Y([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return Y([N.base,this.invalid?N.colorInvalid:N.color])}get _label(){if(this.label)return j`<label for="${this._id}" class=${ae.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:n}=i.currentTarget;this.value=n;let g=new CustomEvent(i.type,{detail:{name:r,value:n,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return j`
       ${this._label}
       <div
         class="${te({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">