@warp-ds/elements 2.8.2-next.1 → 2.8.2-next.3

package/dist/packages/icon/icon.hydration.test.js

@@ -0,0 +1,47 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './icon.js';
+describe('w-icon React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with name hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {
+            name: 'Check',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('small icon hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {
+            name: 'Check',
+            size: 'small',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('medium icon hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {
+            name: 'Check',
+            size: 'medium',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('large icon hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {
+            name: 'Check',
+            size: 'large',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with locale hydrates without warnings', async () => {
+        const warnings = await testHydration('w-icon', {
+            name: 'Check',
+            locale: 'nb',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/icon/icon.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,o,e,s)=>{for(var t=s>1?void 0:s?w(o,e):o,c=i.length-1,a;c>=0;c--)(a=i[c])&&(t=(s?a(o,e,t):a(t))||t);return s&&t&&h(o,e,t),t};import{html as g,LitElement as v}from"lit";import{property as l,state as f}from"lit/decorators.js";import{classMap as u}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,r,e,s)=>{for(var t=s>1?void 0:s?w(r,e):r,n=i.length-1,a;n>=0;n--)(a=i[n])&&(t=(s?a(r,e,t):a(t))||t);return s&&t&&h(r,e,t),t};import{html as d,LitElement as v}from"lit";import{property as l,state as f}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{css as g}from"lit";var p=g`
 :host {
   display: inline-block;
 }
@@ -23,5 +23,5 @@ var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,o,e,s
   --w-icon-size: 32px;
 }
 
-`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function z(i,o={}){var s;let e=(s=o.responseParser)!=null?s:(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends v{constructor(){super(...arguments);this.name="";this.size="medium";this.locale="en";this.svg=null}async fetchIcon(e){let s=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let t=await z(s);return new DOMParser().parseFromString(t,"text/html").body.querySelector("svg")}catch(t){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={"w-icon":!0,"w-icon--s":this.size==="small","w-icon--m":this.size==="medium","w-icon--l":this.size==="large"},s=typeof this.size=="string"&&this.size.endsWith("px")?`--w-icon-size: ${this.size};`:"";return g`<div class="${u(e)}" style="${s}" part="w-${this.name.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],r([l({type:String,reflect:!0})],n.prototype,"name",2),r([l({type:String,reflect:!0})],n.prototype,"size",2),r([l({type:String,reflect:!0})],n.prototype,"locale",2),r([f()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);export{n as WIcon};
+`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function x(i,r={}){var s;let e=(s=r.responseParser)!=null?s:(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var o=class extends v{constructor(){super(...arguments);this.svg=null}async fetchIcon(e){let t=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${e}.svg`;try{let n=await x(t);return new DOMParser().parseFromString(n,"text/html").body.querySelector("svg")}catch(n){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",s=this.name||"",t={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},n=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return d`<div class="${u(t)}" style="${n}" part="w-${s.toLowerCase()}">${this.svg}</div>`}};o.styles=[p],c([l({type:String,reflect:!0})],o.prototype,"name",2),c([l({type:String,reflect:!0})],o.prototype,"size",2),c([l({type:String,reflect:!0})],o.prototype,"locale",2),c([f()],o.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",o);export{o as WIcon};
 //# 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\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 WIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /** Size: small, medium, large or pixel value (e.g. \"32px\") */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | string = 'medium';\n\n  /** Locale used in CDN URL */\n  @property({ type: String, reflect: true })\n  locale = '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 classes = {\n      'w-icon': true,\n      'w-icon--s': this.size === 'small',\n      'w-icon--m': this.size === 'medium',\n      'w-icon--l': this.size === 'large',\n    };\n    const customStyle = typeof this.size === 'string' && this.size.endsWith('px') ? `--w-icon-size: ${this.size};` : '';\n    return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${this.name.toLowerCase()}\">${this.svg}</div>`;\n  }\n}\n\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WIcon);\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;EDUtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,cAAoBC,CAAW,CAA/B,kCAKL,UAAO,GAIP,UAA8C,SAI9C,YAAS,KAIT,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACpE,IAAMP,EAAM,wCAAwC,KAAK,MAAM,IAAIO,CAAQ,OAC3E,GAAI,CACF,IAAMC,EAAU,MAAMT,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBQ,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,OAAQC,EAAA,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,gBAAgBb,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMa,CACb,CAEA,QAAyB,CACvB,IAAMC,EAAU,CACd,SAAU,GACV,YAAa,KAAK,OAAS,QAC3B,YAAa,KAAK,OAAS,SAC3B,YAAa,KAAK,OAAS,OAC7B,EACMC,EAAc,OAAO,KAAK,MAAS,UAAY,KAAK,KAAK,SAAS,IAAI,EAAI,kBAAkB,KAAK,IAAI,IAAM,GACjH,OAAOC,gBAAmBC,EAASH,CAAO,CAAC,YAAYC,CAAW,aAAa,KAAK,KAAK,YAAY,CAAC,KAAK,KAAK,GAAG,QACrH,CACF,EArEaR,EACJ,OAAS,CAACW,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bb,EAKX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAR9Bb,EASX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bb,EAaX,sBAIQY,EAAA,CADPE,EAAM,GAhBId,EAiBH,mBAsDL,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAK",
-  "names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "WIcon", "LitElement", "iconName", "svgText", "e", "changedProps", "iconEl", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state"]
+  "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\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 WIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name!: string;\n\n  /** Size: small, medium, large or pixel value (e.g. \"32px\") */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | string;\n\n  /** Locale used in CDN URL */\n  @property({ type: String, reflect: true })\n  locale: string;\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 locale = this.locale || 'en';\n    const uri = `https://assets.finn.no/pkg/eikons/v1/${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\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WIcon);\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;EDUtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,cAAoBC,CAAW,CAA/B,kCAiBL,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CAEpE,IAAMP,EAAM,wCADG,KAAK,QAAU,IAC4B,IAAIO,CAAQ,OACtE,GAAI,CACF,IAAMC,EAAU,MAAMT,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBQ,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,OAAQC,EAAA,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,gBAAgBb,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMa,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,EAxEaR,EACJ,OAAS,CAACa,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bf,EAKX,oBAIAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAR9Bf,EASX,oBAIAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bf,EAaX,sBAIQc,EAAA,CADPE,EAAM,GAhBIhB,EAiBH,mBAyDL,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAK",
+  "names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "WIcon", "LitElement", "iconName", "svgText", "e", "changedProps", "iconEl", "size", "name", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state"]
 }

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

@@ -0,0 +1 @@
+import './icon.js';

package/dist/packages/icon/icon.test.js

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './icon.js';
+test('renders the icon', async () => {
+    const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
+    const page = render(component);
+    await expect.element(page.getByTestId('icon')).toBeVisible();
+});
+test('defaults to medium size when no size attribute is set', async () => {
+    const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
+    const page = render(component);
+    const el = page.getByTestId('icon').element();
+    // The size attribute should not be reflected (to avoid hydration mismatch)
+    expect(el.hasAttribute('size')).toBe(false);
+    // But the medium size class should still be applied
+    await expect
+        .poll(() => {
+        const inner = el.shadowRoot?.querySelector('.w-icon');
+        return inner?.classList.contains('w-icon--m');
+    })
+        .toBe(true);
+});
+test('defaults to en locale when no locale attribute is set', async () => {
+    const component = html `<w-icon name="Plus" data-testid="icon"></w-icon>`;
+    const page = render(component);
+    const el = page.getByTestId('icon').element();
+    // The locale attribute should not be reflected (to avoid hydration mismatch)
+    expect(el.hasAttribute('locale')).toBe(false);
+});
+test('uses specified size when size attribute is set', async () => {
+    const component = html `<w-icon name="Plus" size="small" data-testid="icon"></w-icon>`;
+    const page = render(component);
+    const el = page.getByTestId('icon').element();
+    // The size attribute should be reflected
+    expect(el.getAttribute('size')).toBe('small');
+    // And the small size class should be applied
+    await expect
+        .poll(() => {
+        const inner = el.shadowRoot?.querySelector('.w-icon');
+        return inner?.classList.contains('w-icon--s');
+    })
+        .toBe(true);
+});
+test('uses specified locale when locale attribute is set', async () => {
+    const component = html `<w-icon name="Plus" locale="nb" data-testid="icon"></w-icon>`;
+    const page = render(component);
+    const el = page.getByTestId('icon').element();
+    // The locale attribute should be reflected
+    expect(el.getAttribute('locale')).toBe('nb');
+});

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

@@ -0,0 +1 @@
+import './link.js';

package/dist/packages/link/link.hydration.test.js

@@ -0,0 +1,54 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './link.js';
+describe('w-link React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with href hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('primary variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+            variant: 'primary',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('secondary variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+            variant: 'secondary',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with target blank hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+            target: '_blank',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('small link hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+            small: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('disabled link hydrates without warnings', async () => {
+        const warnings = await testHydration('w-link', {
+            href: 'https://example.com',
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/link/link.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var e=(d,a,i,n)=>{for(var t=n>1?void 0:n?h(a,i):a,c=d.length-1,l;c>=0;c--)(l=d[c])&&(t=(n?l(a,i,t):l(t))||t);return n&&t&&u(a,i,t),t};import{html as m,LitElement as g}from"lit";import{property as o}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as s}from"lit";var b=s`
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(d,n,r,i)=>{for(var a=i>1?void 0:i?h(n,r):n,c=d.length-1,l;c>=0;c--)(l=d[c])&&(a=(i?l(n,r,a):l(a))||a);return i&&a&&u(n,r,a),a};import{html as m,LitElement as g}from"lit";import{property as t}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as s}from"lit";var b=s`
   *,
   :before,
   :after {
@@ -2671,12 +2671,12 @@ var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var e=(d,a,i,n
         100% {
             background-position: 60px 0;
         }
-    }`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends g{constructor(){super(...arguments);this.autofocus=!1;this.variant="secondary";this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),!p.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
-${p.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let i={"w-button":this.variant!=="link","w-button--primary":this.variant==="primary","w-button--secondary":this.variant==="secondary","w-button--negative":this.variant==="negative","w-button--utility":this.variant==="utility","w-button--quiet":this.variant==="quiet","w-button--negative-quiet":this.variant==="negativeQuiet","w-button--utility-quiet":this.variant==="utilityQuiet","w-button--overlay":this.variant==="overlay","w-button--overlay-inverted":this.variant==="overlayInverted","w-button--overlay-quiet":this.variant==="overlayQuiet","w-button--overlay-inverted-quiet":this.variant==="overlayInvertedQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return m`<a
+    }`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],e=class extends g{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!p.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${p.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let r=this.variant||"secondary",i={"w-button":r!=="link","w-button--primary":r==="primary","w-button--secondary":r==="secondary"||!this.variant,"w-button--negative":r==="negative","w-button--utility":r==="utility","w-button--quiet":r==="quiet","w-button--negative-quiet":r==="negativeQuiet","w-button--utility-quiet":r==="utilityQuiet","w-button--overlay":r==="overlay","w-button--overlay-inverted":r==="overlayInverted","w-button--overlay-quiet":r==="overlayQuiet","w-button--overlay-inverted-quiet":r==="overlayInvertedQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return m`<a
       href=${this.href}
       target=${this.target}
       rel=${this.target==="_blank"?this.rel||"noopener":void 0}
       class=${f(i)}>
       <slot></slot>
-    </a>`}};r.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},r.styles=[b,v],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
+    </a>`}};e.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},e.styles=[b,v],o([t({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),o([t({reflect:!0})],e.prototype,"variant",2),o([t({type:Boolean,reflect:!0})],e.prototype,"small",2),o([t({reflect:!0})],e.prototype,"href",2),o([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),o([t({reflect:!0})],e.prototype,"target",2),o([t({reflect:!0})],e.prototype,"rel",2),o([t({attribute:"full-width",type:Boolean,reflect:!0})],e.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",e);export{e as WarpLink};
 //# sourceMappingURL=link.js.map