@warp-ds/elements 2.3.0-next.10 → 2.3.0-next.12

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

@@ -29,8 +29,16 @@ 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-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>
     `;
     },
@@ -43,13 +51,27 @@ export const SuffixSquareMeters = {
     },
     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
+        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;
+        sqmSlider.formatter = window.getNumberFormatter("${locale}").format;
       </script>
     `;
     },
@@ -61,13 +83,31 @@ export const SuffixCurrency = {
     },
     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
+        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;
+        const currencySlider = document.querySelector(
+          'w-slider[data-testid="currency"]',
+        );
+        currencySlider.formatter = window.getNumberFormatter(
+          "${locale}",
+        ).format;
       </script>
     `;
     },
@@ -79,13 +119,27 @@ export const SuffixKilometers = {
     },
     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
+        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;
+        kmSlider.formatter = window.getNumberFormatter("${locale}").format;
       </script>
     `;
     },
@@ -98,7 +152,13 @@ export const Marks = {
     },
     render({ markers, step }) {
         return html `
-      <w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
+      <w-slider
+        label="Single"
+        min="0"
+        max="100"
+        step="${step}"
+        markers="${markers}"
+      >
         <w-slider-thumb name="value"></w-slider-thumb>
       </w-slider>
     `;
@@ -121,20 +181,31 @@ export const OverUnder = {
     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
+          label="Produksjonsår"
+          min="1950"
+          max="2025"
+          data-testid="overunder"
+          allow-values-outside-range="true"
+        >
           <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>
+            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>
+            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>
+      <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>
@@ -145,24 +216,26 @@ export const OverUnder = {
       </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';
+        const overunderSlider = document.querySelector(
+          'w-slider[data-testid="overunder"]',
+        );
+        overunderSlider.formatter = function (value, type) {
+          if (value === "" && type === "from") {
+            return "Før 1950";
           }
-          if (value === '2025') {
-            return 'Etter 2025';
+          if (value === "" && type === "to") {
+            return "Etter 2025";
           }
           return value;
         };
 
         /** Code to show the form values in output */
-        document.forms['overunder'].addEventListener('input', function () {
+        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;
+          const from = formData.get("from");
+          const to = formData.get("to");
+          document.getElementById("overunder-from").innerText = from;
+          document.getElementById("overunder-to").innerText = to;
         });
       </script>
     `;
@@ -182,16 +255,38 @@ export const SingleError = {
     },
 };
 export const RangeError = {
-    args: {
-        locale: 'nb',
-    },
+    args: {},
     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>
+      <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>
+          <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+          <w-slider-thumb slot="to" 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="rangeerror-from"></dd>
+          <dt>To:</dt>
+          <dd id="rangeerror-to"></dd>
+        </dl>
+      </output>
+      <script>
+        /** Code to show the form values in output */
+        document.forms["rangeerror"].addEventListener("input", function () {
+          const formData = new FormData(this);
+          const from = formData.get("from");
+          const to = formData.get("to");
+          document.getElementById("rangeerror-from").innerText = from;
+          document.getElementById("rangeerror-to").innerText = to;
+        });
+      </script>
     `;
     },
 };

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "readOnly" | "helpText" | "placeholder" | "readonly" | "required" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "helpText" | "optional" | "readOnly" | "readonly" | "placeholder" | "required" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

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.value&&(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})}">