@warp-ds/elements 2.10.0-next.20 → 2.10.0-next.22

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Slider } from "./react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./slider").WarpSlider>, "fieldset" | "label" | "disabled" | "invalid" | "helpText" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "error" | "openEnded" | "markers" | "suffix" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<import("./slider").WarpSlider, keyof HTMLElement>> & React.RefAttributes<import("./slider").WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./slider").WarpSlider>, "fieldset" | "label" | "disabled" | "invalid" | "helpText" | "optional" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "_label" | "render" | "renderOptions" | "error" | "openEnded" | "markers" | "suffix" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "_hasLabel" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<import("./slider").WarpSlider, keyof HTMLElement>> & React.RefAttributes<import("./slider").WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
         openEnded?: boolean;
         helpText?: string;
         hiddenTextfield?: boolean;

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

@@ -10,7 +10,9 @@ export default meta;
 type Story = StoryObj;
 export declare const Single: Story;
 export declare const SingleDisabled: Story;
+export declare const SingleOptional: Story;
 export declare const Range: Story;
+export declare const RangeOptional: Story;
 export declare const SuffixSquareMeters: Story;
 export declare const SuffixCurrency: Story;
 export declare const SuffixKilometers: Story;

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

@@ -40,6 +40,18 @@ export const SingleDisabled = {
 		`;
     },
 };
+export const SingleOptional = {
+    render() {
+        return html `
+			<form>
+				<w-slider label="Single" min="0" max="100" optional>
+					<w-slider-thumb name="value"></w-slider-thumb>
+				</w-slider>
+				<input type="submit" hidden />
+			</form>
+		`;
+    },
+};
 export const Range = {
     render() {
         return html `
@@ -64,6 +76,30 @@ export const Range = {
 		`;
     },
 };
+export const RangeOptional = {
+    render() {
+        return html `
+			<form>
+				<w-slider label="Range" min="0" max="100" optional>
+					<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>
+				<div class="py-8">
+					<w-button type="reset">Reset</w-button>
+					<w-button type="submit">Submit</w-button>
+				</div>
+			</form>
+		`;
+    },
+};
 // Take a suffix attribute on `<w-slider>` I think, have `<w-slider-thumb>` get from that.
 export const SuffixSquareMeters = {
     args: {

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

@@ -1,3 +1,4 @@
+import { i18n } from "@lingui/core";
 import { userEvent } from "vitest/browser";
 import { html } from "lit";
 import { expect, test } from "vitest";
@@ -7,6 +8,12 @@ import "../affix/affix.js";
 import "../textfield/textfield.js";
 import "./slider.js";
 import "../slider-thumb/slider-thumb.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("single slider starts with a default value equal to max", async () => {
     const component = html `
 		<form data-testid="form">
@@ -566,3 +573,103 @@ test("aria-description is not set as host attribute (to avoid hydration mismatch
     expect(fromThumb.ariaDescription).toBeTruthy();
     expect(toThumb.ariaDescription).toBeTruthy();
 });
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `
+		<w-slider label="Price" min="0" max="100" optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    expect(page.getByText("(optional)").query()).toBeNull();
+});
+test("does not render optional indicator when both required and optional are set", async () => {
+    const page = render(html `
+		<w-slider label="Price" min="0" max="100" required optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    await expect.element(page.getByText("Price")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the slider legend", async () => {
+    render(html `
+		<w-slider label="Price" min="0" max="100" optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    const slider = document.querySelector("w-slider");
+    await slider.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for the next microtask to ensure the legend is rendered
+    const legend = slider.shadowRoot.querySelector("legend");
+    expect(legend).not.toBeNull();
+    console.log("Legend text content:", legend.textContent);
+    expect(legend.textContent).toContain("Price");
+    expect(legend.textContent).toContain("Optional");
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `
+		<w-slider label="Price" min="0" max="100" optional data-testid="slider">
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    const slider = document.querySelector("w-slider");
+    slider.required = true;
+    await slider.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("shows optional indicator when required is removed dynamically", async () => {
+    const page = render(html `
+		<w-slider
+			label="Price"
+			min="0"
+			max="100"
+			required
+			optional
+			data-testid="slider"
+		>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const slider = document.querySelector("w-slider");
+    slider.required = false;
+    await slider.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+});
+test("does not render optional indicator when there is no label", async () => {
+    const page = render(html `
+		<w-slider aria-label="Price" min="0" max="100" optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    const slider = document.querySelector("w-slider");
+    await slider.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from legend when required suppresses it", async () => {
+    render(html `
+		<w-slider label="Price" min="0" max="100" required optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    const slider = document.querySelector("w-slider");
+    await slider.updateComplete;
+    const legend = slider.shadowRoot.querySelector("legend");
+    expect(legend).not.toBeNull();
+    expect(legend.textContent).toContain("Price");
+    expect(legend.textContent).not.toContain("Optional");
+});
+test("renders localized optional text based on active locale", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `
+		<w-slider label="Price" min="0" max="100" optional>
+			<w-slider-thumb name="price"></w-slider-thumb>
+		</w-slider>
+	`);
+    const slider = document.querySelector("w-slider");
+    await slider.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
+});

package/dist/packages/step/step.js

@@ -1,4 +1,4 @@
-var le=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var b=(t,e,r,o)=>{for(var a=o>1?void 0:o?ce(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(a=(o?i(e,r,a):i(a))||a);return o&&a&&le(e,r,a),a};var h=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?h.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var g=t=>typeof t=="string",de=t=>typeof t=="function",I=new Map,V="en";function P(t){return[...Array.isArray(t)?t:[t],V]}function j(t,e,r){let o=P(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return y(()=>_("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(g(e)?new Date(e):e)}function pe(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return j(t,e,o)}function M(t,e,r){let o=P(t);return y(()=>_("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function R(t,e,r,{offset:o=0,...a}){let s=P(t),i=e?y(()=>_("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):y(()=>_("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-o)]??a.other}function y(t,e){let r=t(),o=I.get(r);return o||(o=e(),I.set(r,o)),o}function _(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var X=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,H=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),Z="%__lingui_octothorpe__%",be=(t,e,r={})=>{let o=e||t,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let c=Object.keys(r).length?a("number"):void 0,p=M(o,i,c);return n.replace(new RegExp(Z,"g"),p)};return{plural:(i,n)=>{let{offset:c=0}=n,p=R(o,!1,i,n);return s(i-c,p)},selectordinal:(i,n)=>{let{offset:c=0}=n,p=R(o,!0,i,n);return s(i-c,p)},select:ge,number:(i,n)=>M(o,i,a(n)||{style:n}),date:(i,n)=>j(o,i,a(n)||n),time:(i,n)=>pe(o,i,a(n)||n)}},ge=(t,e)=>e[t]??e.other;function ue(t,e,r){return(o={},a)=>{let s=be(e,r,a),i=(c,p=!1)=>Array.isArray(c)?c.reduce((f,x)=>{if(x==="#"&&p)return f+Z;if(g(x))return f+x;let[N,m,D]=x,E={};m==="plural"||m==="selectordinal"||m==="select"?Object.entries(D).forEach(([C,se])=>{E[C]=i(se,m==="plural"||m==="selectordinal")}):E=D;let k;if(m){let C=s[m];k=C(o[N],E)}else k=o[N];return k==null?f:f+k},""):c,n=i(t);return g(n)&&X.test(n)?H(n):g(n)?n:n?String(n):""}}var me=Object.defineProperty,he=(t,e,r)=>e in t?me(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ve=(t,e,r)=>(he(t,typeof e!="symbol"?e+"":e,r),r),S=class{constructor(){ve(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},we=Object.defineProperty,fe=(t,e,r)=>e in t?we(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,v=(t,e,r)=>(fe(t,typeof e!="symbol"?e+"":e,r),r),F=class extends S{constructor(e){super(),v(this,"_locale",""),v(this,"_locales"),v(this,"_localeData",{}),v(this,"_messages",{}),v(this,"_missing"),v(this,"_messageCompiler"),v(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate(e.locale??V,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o?.message;e||(e=""),g(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return de(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let c=s||a||e;return g(c)&&(this._messageCompiler?c=this._messageCompiler(c):console.warn(`Uncompiled message detected! Message:
+var le=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var b=(t,e,r,o)=>{for(var a=o>1?void 0:o?ce(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(a=(o?i(e,r,a):i(a))||a);return o&&a&&le(e,r,a),a};var h=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?h.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var g=t=>typeof t=="string",de=t=>typeof t=="function",I=new Map,V="en";function F(t){return[...Array.isArray(t)?t:[t],V]}function P(t,e,r){let o=F(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return y(()=>_("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(g(e)?new Date(e):e)}function pe(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return P(t,e,o)}function M(t,e,r){let o=F(t);return y(()=>_("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function R(t,e,r,{offset:o=0,...a}){let s=F(t),i=e?y(()=>_("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):y(()=>_("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-o)]??a.other}function y(t,e){let r=t(),o=I.get(r);return o||(o=e(),I.set(r,o)),o}function _(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var X=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,H=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),Z="%__lingui_octothorpe__%",be=(t,e,r={})=>{let o=e||t,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let c=Object.keys(r).length?a("number"):void 0,p=M(o,i,c);return n.replace(new RegExp(Z,"g"),p)};return{plural:(i,n)=>{let{offset:c=0}=n,p=R(o,!1,i,n);return s(i-c,p)},selectordinal:(i,n)=>{let{offset:c=0}=n,p=R(o,!0,i,n);return s(i-c,p)},select:ge,number:(i,n)=>M(o,i,a(n)||{style:n}),date:(i,n)=>P(o,i,a(n)||n),time:(i,n)=>pe(o,i,a(n)||n)}},ge=(t,e)=>e[t]??e.other;function ue(t,e,r){return(o={},a)=>{let s=be(e,r,a),i=(c,p=!1)=>Array.isArray(c)?c.reduce((f,x)=>{if(x==="#"&&p)return f+Z;if(g(x))return f+x;let[N,m,D]=x,E={};m==="plural"||m==="selectordinal"||m==="select"?Object.entries(D).forEach(([C,se])=>{E[C]=i(se,m==="plural"||m==="selectordinal")}):E=D;let k;if(m){let C=s[m];k=C(o[N],E)}else k=o[N];return k==null?f:f+k},""):c,n=i(t);return g(n)&&X.test(n)?H(n):g(n)?n:n?String(n):""}}var me=Object.defineProperty,he=(t,e,r)=>e in t?me(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ve=(t,e,r)=>(he(t,typeof e!="symbol"?e+"":e,r),r),S=class{constructor(){ve(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},we=Object.defineProperty,fe=(t,e,r)=>e in t?we(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,v=(t,e,r)=>(fe(t,typeof e!="symbol"?e+"":e,r),r),j=class extends S{constructor(e){super(),v(this,"_locale",""),v(this,"_locales"),v(this,"_localeData",{}),v(this,"_messages",{}),v(this,"_missing"),v(this,"_messageCompiler"),v(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate(e.locale??V,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o?.message;e||(e=""),g(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return de(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let c=s||a||e;return g(c)&&(this._messageCompiler?c=this._messageCompiler(c):console.warn(`Uncompiled message detected! Message:
 
 > ${c}
 
@@ -6,7 +6,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),g(c)&&X.test(c)?H(c):g(c)?c:ue(c,this._locale,this._locales)(r,o?.formats)}date(e,r){return j(this._locales||this._locale,e,r)}number(e,r){return M(this._locales||this._locale,e,r)}};function xe(t={}){return new F(t)}var d=xe();import{html as A,LitElement as Ae,nothing as O}from"lit";import{property as ie,state as Oe}from"lit/decorators.js";import{ifDefined as ne}from"lit/directives/if-defined.js";import{html as ye,LitElement as _e}from"lit";import{property as T,state as ze}from"lit/decorators.js";import{classMap as Le}from"lit/directives/class-map.js";import{css as ke}from"lit";var G=ke`
+`)),g(c)&&X.test(c)?H(c):g(c)?c:ue(c,this._locale,this._locales)(r,o?.formats)}date(e,r){return P(this._locales||this._locale,e,r)}number(e,r){return M(this._locales||this._locale,e,r)}};function xe(t={}){return new j(t)}var d=xe();import{html as A,LitElement as Ae,nothing as O}from"lit";import{property as ie,state as Oe}from"lit/decorators.js";import{ifDefined as ne}from"lit/directives/if-defined.js";import{html as ye,LitElement as _e}from"lit";import{property as T,state as ze}from"lit/decorators.js";import{classMap as Le}from"lit/directives/class-map.js";import{css as ke}from"lit";var G=ke`
 	:host {
 		display: inline-block;
 	}
@@ -36,7 +36,7 @@ Please compile your catalog first.
 			part="w-${o.toLowerCase()}"
 		>
 			${this.svg}
-		</div>`}};u.styles=[G],b([T({type:String,reflect:!0})],u.prototype,"name",2),b([T({type:String,reflect:!0})],u.prototype,"size",2),b([T({type:String,reflect:!0,useDefault:!0})],u.prototype,"locale",2),b([ze()],u.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",u);var Me=["en","nb","fi","da","sv"],Y="en",z=t=>Me.find(e=>t===e||t.toLowerCase().includes(e))||Y;function L(){if(typeof window>"u"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return z(t)}try{let t=U(document);if(t)return z(t);let e=je();if(e)return z(e);let r=U(K());return r?z(r):Y}catch(t){return console.warn("could not detect locale, falling back to source locale",t),Y}}var q=(t,e,r,o,a)=>{d.load("en",t),d.load("nb",e),d.load("fi",r),d.load("da",o),d.load("sv",a);let s=L();d.activate(s),B(),Fe()},Se="warp-i18n-change";function B(){typeof window>"u"||window.dispatchEvent(new Event(Se))}var J=!1;function Fe(){if(J||typeof window>"u"||!document?.documentElement)return;J=!0;let t=()=>{let a=L();d.locale!==a&&(d.activate(a),B())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){t();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=K();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=Pe();o&&e.observe(o,{attributes:!0,attributeFilter:["lang"]})}function K(){try{return window.parent?.document??null}catch{return null}}function U(t){try{return t?.documentElement?.lang??""}catch{return""}}function Pe(){try{return window.frameElement??null}catch{return null}}function je(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{unsafeCSS as Te}from"lit";var Q=Te("*,: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}.flex{display:flex}.grid{display:grid}.static{position:static}.w-full{width:100%}");import{css as $e}from"lit";import{unsafeCSS as Ye}from"lit";var W=$e`
+		</div>`}};u.styles=[G],b([T({type:String,reflect:!0})],u.prototype,"name",2),b([T({type:String,reflect:!0})],u.prototype,"size",2),b([T({type:String,reflect:!0,useDefault:!0})],u.prototype,"locale",2),b([ze()],u.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",u);var Me=["en","nb","fi","da","sv"],Y="en",z=t=>Me.find(e=>t===e||t.toLowerCase().includes(e))||Y;function L(){if(typeof window>"u"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return z(t)}try{let t=U(document);if(t)return z(t);let e=Pe();if(e)return z(e);let r=U(K());return r?z(r):Y}catch(t){return console.warn("could not detect locale, falling back to source locale",t),Y}}var q=(t,e,r,o,a)=>{d.load("en",t),d.load("nb",e),d.load("fi",r),d.load("da",o),d.load("sv",a);let s=L();d.activate(s),B(),je()},Se="warp-i18n-change";function B(){typeof window>"u"||window.dispatchEvent(new Event(Se))}var J=!1;function je(){if(J||typeof window>"u"||!document?.documentElement)return;J=!0;let t=()=>{let a=L();d.locale!==a&&(d.activate(a),B())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){t();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=K();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=Fe();o&&e.observe(o,{attributes:!0,attributeFilter:["lang"]})}function K(){try{return window.parent?.document??null}catch{return null}}function U(t){try{return t?.documentElement?.lang??""}catch{return""}}function Fe(){try{return window.frameElement??null}catch{return null}}function Pe(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as Te}from"lit";import{unsafeCSS as $e}from"lit";var Q=Te`
 	*,
 	:before,
 	:after {
@@ -309,7 +309,7 @@ Please compile your catalog first.
 	svg {
 		pointer-events: none;
 	}
-`,tr=Ye(`*, :before, :after {
+`,rr=$e(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2475,7 +2475,7 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `);var ee=JSON.parse('{"steps.aria.active":["Trinindikator aktiv cirkel"],"steps.aria.completed":["Trinindikator fuldf\xF8rt cirkel"],"steps.aria.emptyCircle":["Tom cirkel"]}');var re=JSON.parse('{"steps.aria.active":["Step indicator active circle"],"steps.aria.completed":["Step indicator completed circle"],"steps.aria.emptyCircle":["Empty circle"]}');var oe=JSON.parse('{"steps.aria.active":["Vaiheilmaisin aktiivinen ympyr\xE4"],"steps.aria.completed":["Vaiheilmaisin valmis ympyr\xE4"],"steps.aria.emptyCircle":["Tyhj\xE4 ympyr\xE4"]}');var te=JSON.parse('{"steps.aria.active":["Stegindikator aktiv sirkel"],"steps.aria.completed":["Stegindikator hel sirkel"],"steps.aria.emptyCircle":["Tom sirkel"]}');var ae=JSON.parse('{"steps.aria.active":["Stegindikator aktiv cirkel"],"steps.aria.completed":["Stegindikator full\xE4ndad cirkel"],"steps.aria.emptyCircle":["Tom cirkel"]}');var l={base:"group/step",vertical:"group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16",horizontal:"group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid items-center",alignLeft:"grid-cols-[20px_1fr]",alignRight:"grid-cols-[1fr_20px] text-right",dot:"rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted",dotAlignRight:"col-start-2",dotHorizontal:"row-start-2 justify-self-end",dotActive:"s-border-primary s-bg-primary",dotIncomplete:"s-border s-bg",line:"transition-colors duration-300",lineVertical:"w-2 h-full justify-self-center",lineAlignRight:"col-start-2",lineHorizontal:"h-2 w-full row-start-2",lineIncomplete:"s-bg-disabled",lineComplete:"s-bg-primary",content:"last:mb-0",contentVertical:"row-span-2 pb-32",contentHorizontal:"col-span-3 px-16 row-start-1 text-center"},w=class extends Ae{constructor(){super();this.active=!1;this.completed=!1;this._context={horizontal:!1,right:!1,isLast:!1,isFirst:!1};this._internals=this.attachInternals(),q(re,te,oe,ee,ae)}connectedCallback(){super.connectedCallback(),this._internals.role="listitem"}setContext(r){this._context=r}getAriaLabel(){return this.completed?d._({id:"steps.aria.completed",message:"Step indicator completed circle",comment:"Completed circle"}):this.active?d._({id:"steps.aria.active",message:"Step indicator active circle",comment:"Active circle"}):d._({id:"steps.aria.emptyCircle",message:"Empty circle",comment:"Empty circle"})}render(){let r=!this._context.horizontal,o=!this._context.right,a=this._context.isFirst,s=this._context.isLast,i=h([l.base,r?l.vertical:l.horizontal,r?o?l.alignLeft:l.alignRight:""]),n=h([l.line,l.lineHorizontal,this.active||this.completed?l.lineComplete:l.lineIncomplete,a?"invisible":""]),c=h([l.dot,r?o?"":l.dotAlignRight:l.dotHorizontal,this.active||this.completed?l.dotActive:l.dotIncomplete]),p=h([l.line,r?l.lineVertical:l.lineHorizontal,r&&!o?l.lineAlignRight:"",this.completed?l.lineComplete:l.lineIncomplete,s?"invisible":""]),f=h([l.content,r?l.contentVertical:l.contentHorizontal,s?"pb-0":""]);return A`
+        `);var W=JSON.parse('{"steps.aria.active":["Trinindikator aktiv cirkel"],"steps.aria.completed":["Trinindikator fuldf\xF8rt cirkel"],"steps.aria.emptyCircle":["Tom cirkel"]}');var ee=JSON.parse('{"steps.aria.active":["Step indicator active circle"],"steps.aria.completed":["Step indicator completed circle"],"steps.aria.emptyCircle":["Empty circle"]}');var re=JSON.parse('{"steps.aria.active":["Vaiheilmaisin aktiivinen ympyr\xE4"],"steps.aria.completed":["Vaiheilmaisin valmis ympyr\xE4"],"steps.aria.emptyCircle":["Tyhj\xE4 ympyr\xE4"]}');var oe=JSON.parse('{"steps.aria.active":["Stegindikator aktiv sirkel"],"steps.aria.completed":["Stegindikator hel sirkel"],"steps.aria.emptyCircle":["Tom sirkel"]}');var te=JSON.parse('{"steps.aria.active":["Stegindikator aktiv cirkel"],"steps.aria.completed":["Stegindikator full\xE4ndad cirkel"],"steps.aria.emptyCircle":["Tom cirkel"]}');import{unsafeCSS as Ye}from"lit";var ae=Ye("*,: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}.text-center{text-align:center}.text-right{text-align:right}.border-2{border-width:2px}.rounded-full{border-radius:9999px}.flex{display:flex}.grid{display:grid}.flex-1{flex:1}.gap-x-16{column-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.grid-flow-col{grid-auto-flow:column}.grid-rows-\\[20px_auto\\]{grid-template-rows:20px auto}.grid-rows-\\[auto_20px\\]{grid-template-rows:auto 20px}.grid-cols-\\[1fr_20px_1fr\\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\\[1fr_20px\\]{grid-template-columns:1fr 20px}.grid-cols-\\[20px_1fr\\]{grid-template-columns:20px 1fr}.items-center{align-items:center}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-primary{border-color:var(--w-s-color-border-primary)}.h-2{height:.2rem}.h-20{height:2rem}.h-full{height:100%}.w-2{width:.2rem}.w-20{width:2rem}.w-full{width:100%}.last\\:mb-0:last-child{margin-bottom:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.pb-0{padding-bottom:0}.pb-32{padding-bottom:3.2rem}.invisible{visibility:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}");var l={base:"group/step",vertical:"group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16",horizontal:"group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid items-center",alignLeft:"grid-cols-[20px_1fr]",alignRight:"grid-cols-[1fr_20px] text-right",dot:"rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted",dotAlignRight:"col-start-2",dotHorizontal:"row-start-2 justify-self-end",dotActive:"s-border-primary s-bg-primary",dotIncomplete:"s-border s-bg",line:"transition-colors duration-300",lineVertical:"w-2 h-full justify-self-center",lineAlignRight:"col-start-2",lineHorizontal:"h-2 w-full row-start-2",lineIncomplete:"s-bg-disabled",lineComplete:"s-bg-primary",content:"last:mb-0",contentVertical:"row-span-2 pb-32",contentHorizontal:"col-span-3 px-16 row-start-1 text-center"},w=class extends Ae{constructor(){super();this.active=!1;this.completed=!1;this._context={horizontal:!1,right:!1,isLast:!1,isFirst:!1};this._internals=this.attachInternals(),q(ee,oe,re,W,te)}connectedCallback(){super.connectedCallback(),this._internals.role="listitem"}setContext(r){this._context=r}getAriaLabel(){return this.completed?d._({id:"steps.aria.completed",message:"Step indicator completed circle",comment:"Completed circle"}):this.active?d._({id:"steps.aria.active",message:"Step indicator active circle",comment:"Active circle"}):d._({id:"steps.aria.emptyCircle",message:"Empty circle",comment:"Empty circle"})}render(){let r=!this._context.horizontal,o=!this._context.right,a=this._context.isFirst,s=this._context.isLast,i=h([l.base,r?l.vertical:l.horizontal,r?o?l.alignLeft:l.alignRight:""]),n=h([l.line,l.lineHorizontal,this.active||this.completed?l.lineComplete:l.lineIncomplete,a?"invisible":""]),c=h([l.dot,r?o?"":l.dotAlignRight:l.dotHorizontal,this.active||this.completed?l.dotActive:l.dotIncomplete]),p=h([l.line,r?l.lineVertical:l.lineHorizontal,r&&!o?l.lineAlignRight:"",this.completed?l.lineComplete:l.lineIncomplete,s?"invisible":""]),f=h([l.content,r?l.contentVertical:l.contentHorizontal,s?"pb-0":""]);return A`
 			<div
 				class="${i}"
 				style=${ne(this._context.horizontal?"height: 100%;":void 0)}
@@ -2503,5 +2503,5 @@ Please compile your catalog first.
 					<slot></slot>
 				</div>
 			</div>
-		`}};w.styles=[W,Q],b([ie({type:Boolean,reflect:!0})],w.prototype,"active",2),b([ie({type:Boolean,reflect:!0})],w.prototype,"completed",2),b([Oe()],w.prototype,"_context",2);customElements.get("w-step")||customElements.define("w-step",w);export{w as WarpStep};
+		`}};w.styles=[Q,ae],b([ie({type:Boolean,reflect:!0})],w.prototype,"active",2),b([ie({type:Boolean,reflect:!0})],w.prototype,"completed",2),b([Oe()],w.prototype,"_context",2);customElements.get("w-step")||customElements.define("w-step",w);export{w as WarpStep};
 //# sourceMappingURL=step.js.map