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

package/dist/packages/expandable/styles.js

@@ -1,2 +1,2 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;
+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}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:-rotate-180::part(w-chevrondown){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:rotate-180::part(w-chevronup){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:transform::part(w-chevrondown){transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:transform::part(w-chevronup){transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:transform-gpu::part(w-chevrondown){transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:transform-gpu::part(w-chevronup){transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevrondown\\]\\:transition-transform::part(w-chevrondown){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevronup\\]\\:transition-transform::part(w-chevronup){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevrondown\\]\\:ease-in-out::part(w-chevrondown){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevronup\\]\\:ease-in-out::part(w-chevronup){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}");

package/dist/packages/icon/icon.d.ts

@@ -9,7 +9,7 @@ export declare class WarpIcon extends LitElement {
      *
      * @default "medium"
      */
-    size: 'small' | 'medium' | 'large' | PixelValue;
+    size: 'small' | 'medium' | 'large' | PixelValue | undefined;
     /**
      * Locale used for `<title>` text.
      *

package/dist/packages/icon/icon.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(i,o,e,t)=>{for(var s=t>1?void 0:t?w(o,e):o,r=i.length-1,l;r>=0;r--)(l=i[r])&&(s=(t?l(o,e,s):l(s))||s);return t&&s&&h(o,e,s),s};import{html as g,LitElement as u}from"lit";import{property as a,state as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as d}from"lit";var p=d`
+var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(i,o,e,t)=>{for(var s=t>1?void 0:t?w(o,e):o,r=i.length-1,l;r>=0;r--)(l=i[r])&&(s=(t?l(o,e,s):l(s))||s);return t&&s&&h(o,e,s),s};import{html as g,LitElement as u}from"lit";import{property as a,state as f}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{css as d}from"lit";var p=d`
 :host {
   display: inline-block;
 }
@@ -23,5 +23,5 @@ var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(i,o,e,t
   --w-icon-size: 32px;
 }
 
-`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function x(i,o={}){let e=o.responseParser??(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends u{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let t=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let s=await x(t);return new DOMParser().parseFromString(s,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(y,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",t=this.name||"",s={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},r=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return g`<div class="${f(s)}" style="${r}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],c([a({type:String,reflect:!0})],n.prototype,"name",2),c([a({type:String,reflect:!0})],n.prototype,"size",2),c([a({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),c([v()],n.prototype,"svg",2);var M=n;customElements.get("w-icon")||customElements.define("w-icon",n);export{M as WIcon,n as WarpIcon};
+`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function x(i,o={}){let e=o.responseParser??(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends u{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let t=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let s=await x(t);return new DOMParser().parseFromString(s,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(y,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",t=this.name||"",s={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},r=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return g`<div class="${v(s)}" style="${r}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],c([a({type:String,reflect:!0})],n.prototype,"name",2),c([a({type:String,reflect:!0})],n.prototype,"size",2),c([a({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),c([f()],n.prototype,"svg",2);var M=n;customElements.get("w-icon")||customElements.define("w-icon",n);export{M as WIcon,n as WarpIcon};
 //# sourceMappingURL=icon.js.map

package/dist/packages/icon/icon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/icon/icon.ts", "../../../packages/icon/style.ts"],
-  "sourcesContent": ["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './style.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ntype PixelValue = `${number}px`;\n\ninterface CacheFetchOptions<T> {\n  responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n  const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n  if (!_fetchMap.has(uri)) {\n    _fetchMap.set(uri, fetch(uri).then(parser));\n  }\n  return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WarpIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name!: string;\n\n  /** \n   * Size: small, medium, large or pixel value (e.g. \"32px\").\n   * \n   * @default \"medium\"\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | PixelValue;\n\n  /** \n   * Locale used for `<title>` text.\n   * \n   * Reads the `lang` attribute from `<html>`, falls back to 'en'. \n   */\n  @property({ type: String, reflect: true, useDefault: true })\n  locale: string = document.documentElement.lang || 'en';\n\n  /** Parsed SVG element (not reflected as attribute) */\n  @state()\n  private svg: SVGElement | null = null;\n\n  /**\n   * Fetch an icon SVG from the CDN, with caching\n   * @param iconName - Name of the icon file\n   * @returns SVGElement or null on failure\n   */\n  private async fetchIcon(iconName: string): Promise<SVGElement | null> {\n    const uri = `https://assets.finn.no/pkg/eikons/v1/${this.locale}/${iconName}.svg`;\n    try {\n      const svgText = await cacheFetch<string>(uri);\n      const doc = new DOMParser().parseFromString(svgText, 'text/html');\n      return doc.body.querySelector('svg');\n    } catch {\n      return null;\n    }\n  }\n\n  protected firstUpdated(): void {\n    this.loadIcon();\n  }\n\n  protected updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('name') || changedProps.has('locale')) {\n      this.loadIcon();\n    }\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (!this.name) {\n      this.svg = null;\n      return;\n    }\n\n    let iconEl = await this.fetchIcon(this.name);\n    if (!iconEl) {\n      const doc = new DOMParser().parseFromString(ERROR_SVG, 'text/html');\n      iconEl = doc.body.firstElementChild as SVGElement;\n    }\n    this.svg = iconEl;\n  }\n\n  render(): TemplateResult {\n    const size = this.size || 'medium';\n    const name = this.name || '';\n    const classes = {\n      'w-icon': true,\n      'w-icon--s': size === 'small',\n      'w-icon--m': size === 'medium',\n      'w-icon--l': size === 'large',\n    };\n    const customStyle = typeof size === 'string' && size.endsWith('px') ? `--w-icon-size: ${size};` : '';\n    return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${name.toLowerCase()}\">${this.svg}</div>`;\n  }\n}\n\n/** @deprecated Exported for backwards compatibility. Use WarpIcon. */\nexport const WIcon = WarpIcon;\n\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WarpIcon);\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: inline-block;\n}\n.w-icon {\n  --_w-icon-size: var(--w-icon-size, 24px);\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n  display: flex;\n}\n.w-icon svg {\n  pointer-events: none;\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n}\n.w-icon--s {\n  --w-icon-size: 16px;\n}\n.w-icon--m {\n  --w-icon-size: 24px;\n}\n.w-icon--l {\n  --w-icon-size: 32px;\n}\n\n`;\n"],
+  "sourcesContent": ["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './style.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ntype PixelValue = `${number}px`;\n\ninterface CacheFetchOptions<T> {\n  responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n  const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n  if (!_fetchMap.has(uri)) {\n    _fetchMap.set(uri, fetch(uri).then(parser));\n  }\n  return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WarpIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name!: string;\n\n  /** \n   * Size: small, medium, large or pixel value (e.g. \"32px\").\n   * \n   * @default \"medium\"\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | PixelValue | undefined;\n\n  /** \n   * Locale used for `<title>` text.\n   * \n   * Reads the `lang` attribute from `<html>`, falls back to 'en'. \n   */\n  @property({ type: String, reflect: true, useDefault: true })\n  locale: string = document.documentElement.lang || 'en';\n\n  /** Parsed SVG element (not reflected as attribute) */\n  @state()\n  private svg: SVGElement | null = null;\n\n  /**\n   * Fetch an icon SVG from the CDN, with caching\n   * @param iconName - Name of the icon file\n   * @returns SVGElement or null on failure\n   */\n  private async fetchIcon(iconName: string): Promise<SVGElement | null> {\n    const uri = `https://assets.finn.no/pkg/eikons/v1/${this.locale}/${iconName}.svg`;\n    try {\n      const svgText = await cacheFetch<string>(uri);\n      const doc = new DOMParser().parseFromString(svgText, 'text/html');\n      return doc.body.querySelector('svg');\n    } catch {\n      return null;\n    }\n  }\n\n  protected firstUpdated(): void {\n    this.loadIcon();\n  }\n\n  protected updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('name') || changedProps.has('locale')) {\n      this.loadIcon();\n    }\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (!this.name) {\n      this.svg = null;\n      return;\n    }\n\n    let iconEl = await this.fetchIcon(this.name);\n    if (!iconEl) {\n      const doc = new DOMParser().parseFromString(ERROR_SVG, 'text/html');\n      iconEl = doc.body.firstElementChild as SVGElement;\n    }\n    this.svg = iconEl;\n  }\n\n  render(): TemplateResult {\n    const size = this.size || 'medium';\n    const name = this.name || '';\n    const classes = {\n      'w-icon': true,\n      'w-icon--s': size === 'small',\n      'w-icon--m': size === 'medium',\n      'w-icon--l': size === 'large',\n    };\n    const customStyle = typeof size === 'string' && size.endsWith('px') ? `--w-icon-size: ${size};` : '';\n    return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${name.toLowerCase()}\">${this.svg}</div>`;\n  }\n}\n\n/** @deprecated Exported for backwards compatibility. Use WarpIcon. */\nexport const WIcon = WarpIcon;\n\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WarpIcon);\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: inline-block;\n}\n.w-icon {\n  --_w-icon-size: var(--w-icon-size, 24px);\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n  display: flex;\n}\n.w-icon svg {\n  pointer-events: none;\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n}\n.w-icon--s {\n  --w-icon-size: 16px;\n}\n.w-icon--m {\n  --w-icon-size: 24px;\n}\n.w-icon--l {\n  --w-icon-size: 32px;\n}\n\n`;\n"],
   "mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDYtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAC3F,IAAMC,EAASD,EAAQ,iBAAoBE,GAAkBA,EAAI,KAAK,GACtE,OAAKN,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKE,CAAM,CAAC,EAErCL,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMI,EAAN,cAAuBC,CAAW,CAAlC,kCAqBL,YAAiB,SAAS,gBAAgB,MAAQ,KAIlD,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACpE,IAAMN,EAAM,wCAAwC,KAAK,MAAM,IAAIM,CAAQ,OAC3E,GAAI,CACF,IAAMC,EAAU,MAAMR,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBO,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,MAAQ,CACN,OAAO,IACT,CACF,CAEU,cAAqB,CAC7B,KAAK,SAAS,CAChB,CAEU,QAAQC,EAA0C,EACtDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACvD,KAAK,SAAS,CAElB,CAEA,MAAc,UAA0B,CACtC,GAAI,CAAC,KAAK,KAAM,CACd,KAAK,IAAM,KACX,MACF,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEHA,EADY,IAAI,UAAU,EAAE,gBAAgBX,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMW,CACb,CAEA,QAAyB,CACvB,IAAMC,EAAO,KAAK,MAAQ,SACpBC,EAAO,KAAK,MAAQ,GACpBC,EAAU,CACd,SAAU,GACV,YAAaF,IAAS,QACtB,YAAaA,IAAS,SACtB,YAAaA,IAAS,OACxB,EACMG,EAAc,OAAOH,GAAS,UAAYA,EAAK,SAAS,IAAI,EAAI,kBAAkBA,CAAI,IAAM,GAClG,OAAOI,gBAAmBC,EAASH,CAAO,CAAC,YAAYC,CAAW,aAAaF,EAAK,YAAY,CAAC,KAAK,KAAK,GAAG,QAChH,CACF,EA/EaP,EACJ,OAAS,CAACY,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bd,EAKX,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bd,EAaX,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,WAAY,EAAK,CAAC,GApBhDd,EAqBX,sBAIQa,EAAA,CADPE,EAAM,GAxBIf,EAyBH,mBAyDH,IAAMgB,EAAQhB,EAEhB,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAQ",
   "names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "parser", "res", "WarpIcon", "LitElement", "iconName", "svgText", "changedProps", "iconEl", "size", "name", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state", "WIcon"]
 }

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

@@ -24,5 +24,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: (args: any) => React.JSX.Element;
 export declare const Example: () => React.JSX.Element;

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

@@ -290,8 +290,10 @@ export default {
         },
     },
 };
+// @ts-ignore
 const Template = (args) => React.createElement(Icon, { ...args });
 export const Default = Template.bind({});
+// @ts-ignore
 Default.args = {
     name: 'Ads',
     size: 'medium',

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

@@ -1,34 +1,11 @@
-import './icon.ts';
-declare const _default: {
-    component: string;
-    title: string;
-    render: ({ name, size, locale }: {
-        name: any;
-        size: any;
-        locale: any;
-    }) => import("lit").TemplateResult<1>;
-    argTypes: {
-        name: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        size: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        locale: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
+import type { Meta } from '@storybook/web-components-vite';
+import type { WarpIcon } from './icon.js';
+import './icon.js';
+declare const args: Partial<WarpIcon> & {
+    [key: string]: any;
 };
-export default _default;
+declare const meta: Meta<typeof args>;
+export default meta;
 export declare const Default: {
     args: {
         name: string;

package/dist/packages/icon/icon.stories.js

@@ -1,11 +1,19 @@
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 import { html } from 'lit';
-import './icon.ts';
-export default {
+import './icon.js';
+const { events, args } = getStorybookHelpers('w-icon');
+const meta = {
     component: 'w-icon',
     title: 'Icons/Icons',
     render: ({ name, size, locale }) => html `
       <w-icon name=${name} size=${size} locale=${locale} />
   `,
+    args,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
     argTypes: {
         name: {
             control: { type: 'select' },
@@ -293,6 +301,7 @@ export default {
         },
     },
 };
+export default meta;
 export const Default = {
     args: {
         name: 'Ads',

package/dist/packages/link/link.d.ts

@@ -10,7 +10,7 @@ declare class WarpLink extends LitElement {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -24,7 +24,7 @@ declare class WarpLink extends LitElement {
      *
      * @throws {Error} Throws an error if an unsupported value is provided.
      */
-    variant: ButtonVariant;
+    variant: ButtonVariant | undefined;
     /**
      * Render a smaller version
      */
@@ -32,7 +32,7 @@ declare class WarpLink extends LitElement {
     /**
      * The URL the link points to
      */
-    href: string;
+    href: string | undefined;
     /**
      * Applies disabled styling, but you need to disable clicks on your own.
      *
@@ -42,13 +42,13 @@ declare class WarpLink extends LitElement {
     /**
      * Where to display the linked URL (e.g. `_blank`)
      */
-    target: string;
+    target: string | undefined;
     /**
      * Relationship of the linked URL.
      *
      * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
      */
-    rel: string;
+    rel: string | undefined;
     /**
      * Makes the link take up the full width of its parent
      */