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

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

@@ -0,0 +1,141 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration, testHydrationWithChildren } from '../../tests/react-hydration';
+import './breadcrumbs.js';
+describe('w-breadcrumbs React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-breadcrumbs', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with aria-label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-breadcrumbs', { 'aria-label': 'Navigation breadcrumbs' });
+        expect(warnings).toEqual([]);
+    });
+    // Tests for child elements - breadcrumbs consumes children and renders them
+    // in shadow DOM, which causes hydration mismatches. These use test.fails
+    // to document the known issues until they are fixed.
+    test.fails('with single link child hydrates without warnings', async () => {
+        const childrenHtml = '<a href="#/home">Home</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with multiple link children hydrates without warnings', async () => {
+        // This tests the interleaving behavior - "/" separators are added between children
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with three link children hydrates without warnings', async () => {
+        // More children = more separators interleaved
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><a href="#/page">Page</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with links and span (current page) hydrates without warnings', async () => {
+        // Common pattern: links for navigation, span for current page
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><span aria-current="page">Current page</span>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with span children hydrates without warnings', async () => {
+        // Non-link children get different CSS class (s-text vs s-text-link)
+        const childrenHtml = '<span>First</span><span>Second</span><span aria-current="page">Current</span>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with mixed element types hydrates without warnings', async () => {
+        // Mix of different element types to ensure class assignment works correctly
+        const childrenHtml = '<a href="#/home">Home</a><span>Category</span><a href="#/page">Page</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with aria-label and children hydrates without warnings', async () => {
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', { 'aria-label': 'Breadcrumb navigation' }, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+});
+// These tests verify the component's DOM manipulation behavior that can cause
+// hydration mismatches. The breadcrumbs component currently:
+// 1. Moves children from light DOM to shadow DOM
+// 2. Adds CSS classes to child elements
+// 3. Interleaves separator elements between children
+//
+// In SSR scenarios, children are rendered in light DOM. When the component
+// hydrates client-side and moves/modifies them, React detects a mismatch.
+//
+// These tests use test.fails to document the known issues until they are fixed.
+describe('w-breadcrumbs child element DOM stability', () => {
+    test.fails('should preserve children in light DOM (not move to shadow DOM)', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        // Wait for custom element upgrade
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        // Children should remain in light DOM, not be moved to shadow DOM
+        // Current behavior: children.length is 0 because they're moved to shadow DOM
+        expect(breadcrumbs?.children.length).toBe(2);
+        document.body.removeChild(container);
+    });
+    test.fails('should not add classes to light DOM link children', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        // Wait for custom element upgrade
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        // Check light DOM children exist and don't have modified classes
+        const links = container.querySelectorAll('w-breadcrumbs > a');
+        expect(links.length).toBe(2);
+        for (const link of links) {
+            // Links should NOT have classes added by the component
+            expect(link.classList.contains('s-text-link')).toBe(false);
+        }
+        document.body.removeChild(container);
+    });
+    test.fails('should not add classes to light DOM span children', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><span>First</span><span>Current</span></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const spans = container.querySelectorAll('w-breadcrumbs > span');
+        expect(spans.length).toBe(2);
+        for (const span of spans) {
+            // Spans should NOT have classes added by the component
+            expect(span.classList.contains('s-text')).toBe(false);
+        }
+        document.body.removeChild(container);
+    });
+    test.fails('should not insert separator elements into light DOM', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        // Should only have the original 2 children, no separators added to light DOM
+        expect(breadcrumbs?.children.length).toBe(2);
+        // No separator spans should be in light DOM
+        const separators = container.querySelectorAll('w-breadcrumbs > span.select-none');
+        expect(separators.length).toBe(0);
+        document.body.removeChild(container);
+    });
+    test.fails('should preserve original child element attributes in light DOM', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home" data-test="home">Home</a><span aria-current="page">Current</span></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const link = container.querySelector('w-breadcrumbs > a');
+        const span = container.querySelector('w-breadcrumbs > span');
+        // Children should exist in light DOM
+        expect(link).not.toBeNull();
+        expect(span).not.toBeNull();
+        // Original attributes should be preserved
+        expect(link?.getAttribute('href')).toBe('#/home');
+        expect(link?.getAttribute('data-test')).toBe('home');
+        expect(span?.getAttribute('aria-current')).toBe('page');
+        document.body.removeChild(container);
+    });
+});

package/dist/packages/breadcrumbs/breadcrumbs.js

@@ -1,13 +1,13 @@
-var ue=Object.create;var O=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var $=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var fe=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of he(e))!ve.call(o,a)&&a!==r&&O(o,a,{get:()=>e[a],enumerable:!(t=P(e,a))||t.enumerable});return o};var we=(o,e,r)=>(r=o!=null?ue(me(o)):{},fe(e||!o||!o.__esModule?O(r,"default",{value:o,enumerable:!0}):r,o));var H=(o,e,r,t)=>{for(var a=t>1?void 0:t?P(e,r):e,s=o.length-1,i;s>=0;s--)(i=o[s])&&(a=(t?i(e,r,a):i(a))||a);return t&&a&&O(e,r,a),a};var X=$(m=>{"use strict";Object.defineProperty(m,"__esModule",{value:!0});m.errorMessages=m.ErrorType=void 0;var f;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(f=m.ErrorType||(m.ErrorType={}));m.errorMessages=new Map([[f.MalformedUnicode,"malformed Unicode character escape sequence"],[f.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[f.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[f.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[f.EndOfString,"malformed escape sequence at end of string"]])});var R=$(p=>{"use strict";Object.defineProperty(p,"__esModule",{value:!0});p.unraw=p.errorMessages=p.ErrorType=void 0;var c=X();Object.defineProperty(p,"ErrorType",{enumerable:!0,get:function(){return c.ErrorType}});Object.defineProperty(p,"errorMessages",{enumerable:!0,get:function(){return c.errorMessages}});function xe(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function _(o,e,r){let t=xe(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(c.errorMessages.get(e));return t}function ke(o){let e=_(o,c.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function U(o,e){let r=_(o,c.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=_(e,c.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function ye(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function _e(o){if(!ye(o))throw new SyntaxError(c.errorMessages.get(c.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=_(e,c.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(c.errorMessages.get(c.ErrorType.CodePointLimit)):t}}function ze(o,e=!1){if(e)throw new SyntaxError(c.errorMessages.get(c.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var Me=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function Ee(o){return Me.get(o)||o}var Le=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function Z(o,e=!1){return o.replace(Le,function(r,t,a,s,i,n,l,d,u){if(t!==void 0)return"\\";if(a!==void 0)return ke(a);if(s!==void 0)return _e(s);if(i!==void 0)return U(i,n);if(l!==void 0)return U(l);if(d==="0")return"\0";if(d!==void 0)return ze(d,!e);if(u!==void 0)return Ee(u);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=Z;p.default=Z});var G=we(R(),1);var g=o=>typeof o=="string",Ce=o=>typeof o=="function",q=new Map,V="en";function T(o){return[...Array.isArray(o)?o:[o],V]}function Y(o,e,r){let t=T(o);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 z(()=>M("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(g(e)?new Date(e):e)}function Oe(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return Y(o,e,t)}function N(o,e,r){let t=T(o);return z(()=>M("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function J(o,e,r,{offset:t=0,...a}){var n,l;let s=T(o),i=e?z(()=>M("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):z(()=>M("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return(l=(n=a[r])!=null?n:a[i.select(r-t)])!=null?l:a.other}function z(o,e){let r=o(),t=q.get(r);return t||(t=e(),q.set(r,t)),t}function M(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var K=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,B="%__lingui_octothorpe__%",Ne=(o,e,r={})=>{let t=e||o,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let l=Object.keys(r).length?a("number"):void 0,d=N(t,i,l);return n.replace(new RegExp(B,"g"),d)};return{plural:(i,n)=>{let{offset:l=0}=n,d=J(t,!1,i,n);return s(i-l,d)},selectordinal:(i,n)=>{let{offset:l=0}=n,d=J(t,!0,i,n);return s(i-l,d)},select:Se,number:(i,n)=>N(t,i,a(n)||{style:n}),date:(i,n)=>Y(t,i,a(n)||n),time:(i,n)=>Oe(t,i,a(n)||n)}},Se=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function De(o,e,r){return(t={},a)=>{let s=Ne(e,r,a),i=(l,d=!1)=>Array.isArray(l)?l.reduce((u,k)=>{if(k==="#"&&d)return u+B;if(g(k))return u+k;let[F,h,A]=k,L={};h==="plural"||h==="selectordinal"||h==="select"?Object.entries(A).forEach(([C,ge])=>{L[C]=i(ge,h==="plural"||h==="selectordinal")}):L=A;let y;if(h){let C=s[h];y=C(t[F],L)}else y=t[F];return y==null?u:u+y},""):l,n=i(o);return g(n)&&K.test(n)?(0,G.unraw)(n):g(n)?n:n?String(n):""}}var Te=Object.defineProperty,Ye=(o,e,r)=>e in o?Te(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,Ie=(o,e,r)=>(Ye(o,typeof e!="symbol"?e+"":e,r),r),S=class{constructor(){Ie(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},je=Object.defineProperty,Fe=(o,e,r)=>e in o?je(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,v=(o,e,r)=>(Fe(o,typeof e!="symbol"?e+"":e,r),r),D=class extends S{constructor(e){var r;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((r=e.locale)!=null?r:V,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,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(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){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=t==null?void 0:t.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 Ce(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return g(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
+var pe=Object.create;var A=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var P=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var ve=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of ue(e))!me.call(o,a)&&a!==r&&A(o,a,{get:()=>e[a],enumerable:!(t=ge(e,a))||t.enumerable});return o};var fe=(o,e,r)=>(r=o!=null?pe(he(o)):{},ve(e||!o||!o.__esModule?A(r,"default",{value:o,enumerable:!0}):r,o));var $=P(m=>{"use strict";Object.defineProperty(m,"__esModule",{value:!0});m.errorMessages=m.ErrorType=void 0;var f;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(f=m.ErrorType||(m.ErrorType={}));m.errorMessages=new Map([[f.MalformedUnicode,"malformed Unicode character escape sequence"],[f.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[f.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[f.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[f.EndOfString,"malformed escape sequence at end of string"]])});var U=P(p=>{"use strict";Object.defineProperty(p,"__esModule",{value:!0});p.unraw=p.errorMessages=p.ErrorType=void 0;var c=$();Object.defineProperty(p,"ErrorType",{enumerable:!0,get:function(){return c.ErrorType}});Object.defineProperty(p,"errorMessages",{enumerable:!0,get:function(){return c.errorMessages}});function we(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function y(o,e,r){let t=we(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(c.errorMessages.get(e));return t}function xe(o){let e=y(o,c.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function H(o,e){let r=y(o,c.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=y(e,c.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function ke(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function ye(o){if(!ke(o))throw new SyntaxError(c.errorMessages.get(c.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=y(e,c.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(c.errorMessages.get(c.ErrorType.CodePointLimit)):t}}function _e(o,e=!1){if(e)throw new SyntaxError(c.errorMessages.get(c.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var ze=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function Ee(o){return ze.get(o)||o}var Me=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function X(o,e=!1){return o.replace(Me,function(r,t,a,l,i,n,s,d,u){if(t!==void 0)return"\\";if(a!==void 0)return xe(a);if(l!==void 0)return ye(l);if(i!==void 0)return H(i,n);if(s!==void 0)return H(s);if(d==="0")return"\0";if(d!==void 0)return _e(d,!e);if(u!==void 0)return Ee(u);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=X;p.default=X});var q=fe(U(),1);var g=o=>typeof o=="string",Le=o=>typeof o=="function",Z=new Map,J="en";function D(o){return[...Array.isArray(o)?o:[o],J]}function I(o,e,r){let t=D(o);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 _(()=>z("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(g(e)?new Date(e):e)}function Ce(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return I(o,e,t)}function O(o,e,r){let t=D(o);return _(()=>z("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function R(o,e,r,{offset:t=0,...a}){var n,s;let l=D(o),i=e?_(()=>z("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):_(()=>z("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return(s=(n=a[r])!=null?n:a[i.select(r-t)])!=null?s:a.other}function _(o,e){let r=o(),t=Z.get(r);return t||(t=e(),Z.set(r,t)),t}function z(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var G=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,V="%__lingui_octothorpe__%",Oe=(o,e,r={})=>{let t=e||o,a=i=>typeof i=="object"?i:r[i],l=(i,n)=>{let s=Object.keys(r).length?a("number"):void 0,d=O(t,i,s);return n.replace(new RegExp(V,"g"),d)};return{plural:(i,n)=>{let{offset:s=0}=n,d=R(t,!1,i,n);return l(i-s,d)},selectordinal:(i,n)=>{let{offset:s=0}=n,d=R(t,!0,i,n);return l(i-s,d)},select:Ne,number:(i,n)=>O(t,i,a(n)||{style:n}),date:(i,n)=>I(t,i,a(n)||n),time:(i,n)=>Ce(t,i,a(n)||n)}},Ne=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function Se(o,e,r){return(t={},a)=>{let l=Oe(e,r,a),i=(s,d=!1)=>Array.isArray(s)?s.reduce((u,x)=>{if(x==="#"&&d)return u+V;if(g(x))return u+x;let[j,h,F]=x,L={};h==="plural"||h==="selectordinal"||h==="select"?Object.entries(F).forEach(([C,be])=>{L[C]=i(be,h==="plural"||h==="selectordinal")}):L=F;let k;if(h){let C=l[h];k=C(t[j],L)}else k=t[j];return k==null?u:u+k},""):s,n=i(o);return g(n)&&G.test(n)?(0,q.unraw)(n):g(n)?n:n?String(n):""}}var De=Object.defineProperty,Ie=(o,e,r)=>e in o?De(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,Te=(o,e,r)=>(Ie(o,typeof e!="symbol"?e+"":e,r),r),N=class{constructor(){Te(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Ye=Object.defineProperty,je=(o,e,r)=>e in o?Ye(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,v=(o,e,r)=>(je(o,typeof e!="symbol"?e+"":e,r),r),S=class extends N{constructor(e){var r;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((r=e.locale)!=null?r:J,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,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(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){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=t==null?void 0:t.message;e||(e=""),g(e)||(r=e.values||r,a=e.message,e=e.id);let l=this.messages[e],i=l===void 0,n=this._missing;if(n&&i)return Le(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let s=l||a||e;return g(s)&&(this._messageCompiler?s=this._messageCompiler(s):console.warn(`Uncompiled message detected! Message:
 
-> ${l}
+> ${s}
 
 That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),g(l)&&K.test(l)?JSON.parse(`"${l}"`):g(l)?l:De(l,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return Y(this._locales||this._locale,e,r)}number(e,r){return N(this._locales||this._locale,e,r)}};function Ae(o={}){return new D(o)}var b=Ae();function Q(o,e){return o.flatMap(r=>[r,e]).slice(0,-1)}import{html as j,LitElement as Re}from"lit";import{property as qe}from"lit/decorators.js";var Pe=["en","nb","fi","da","sv"],I="en",E=o=>Pe.find(e=>o===e||o.toLowerCase().includes(e))||I;function re(){if(typeof window=="undefined"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return E(o)}try{let o=ee(document);if(o)return E(o);let e=Ue();if(e)return E(e);let r=ee(ae());return r?E(r):I}catch(o){return console.warn("could not detect locale, falling back to source locale",o),I}}var oe=(o,e,r,t,a)=>{b.load("en",o),b.load("nb",e),b.load("fi",r),b.load("da",t),b.load("sv",a);let s=re();b.activate(s),te(),He()},$e="warp-i18n-change";function te(){typeof window!="undefined"&&window.dispatchEvent(new Event($e))}var W=!1;function He(){if(W||typeof window=="undefined"||!(document!=null&&document.documentElement))return;W=!0;let o=()=>{let a=re();b.locale!==a&&(b.activate(a),te())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ae();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=Xe();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function ae(){var o,e;try{return(e=(o=window.parent)==null?void 0:o.document)!=null?e:null}catch(r){return null}}function ee(o){var e,r;try{return(r=(e=o==null?void 0:o.documentElement)==null?void 0:e.lang)!=null?r:""}catch(t){return""}}function Xe(){var o;try{return(o=window.frameElement)!=null?o:null}catch(e){return null}}function Ue(){var o,e,r;try{return(r=(e=(o=window.frameElement)==null?void 0:o.getAttribute)==null?void 0:e.call(o,"lang"))!=null?r:""}catch(t){return""}}import{css as ne}from"lit";var ie=ne`
+`)),g(s)&&G.test(s)?JSON.parse(`"${s}"`):g(s)?s:Se(s,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return I(this._locales||this._locale,e,r)}number(e,r){return O(this._locales||this._locale,e,r)}};function Fe(o={}){return new S(o)}var b=Fe();function K(o,e){return o.flatMap(r=>[r,e]).slice(0,-1)}import{html as Y,LitElement as Ze}from"lit";var Ae=["en","nb","fi","da","sv"],T="en",E=o=>Ae.find(e=>o===e||o.toLowerCase().includes(e))||T;function W(){if(typeof window=="undefined"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return E(o)}try{let o=Q(document);if(o)return E(o);let e=Xe();if(e)return E(e);let r=Q(oe());return r?E(r):T}catch(o){return console.warn("could not detect locale, falling back to source locale",o),T}}var ee=(o,e,r,t,a)=>{b.load("en",o),b.load("nb",e),b.load("fi",r),b.load("da",t),b.load("sv",a);let l=W();b.activate(l),re(),$e()},Pe="warp-i18n-change";function re(){typeof window!="undefined"&&window.dispatchEvent(new Event(Pe))}var B=!1;function $e(){if(B||typeof window=="undefined"||!(document!=null&&document.documentElement))return;B=!0;let o=()=>{let a=W();b.locale!==a&&(b.activate(a),re())},e=new MutationObserver(a=>{for(let l of a)if(l.type==="attributes"&&l.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=oe();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=He();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function oe(){var o,e;try{return(e=(o=window.parent)==null?void 0:o.document)!=null?e:null}catch(r){return null}}function Q(o){var e,r;try{return(r=(e=o==null?void 0:o.documentElement)==null?void 0:e.lang)!=null?r:""}catch(t){return""}}function He(){var o;try{return(o=window.frameElement)!=null?o:null}catch(e){return null}}function Xe(){var o,e,r;try{return(r=(e=(o=window.frameElement)==null?void 0:o.getAttribute)==null?void 0:e.call(o,"lang"))!=null?r:""}catch(t){return""}}import{css as te}from"lit";var ae=te`
   *,
   :before,
   :after {
@@ -280,7 +280,7 @@ Please compile your catalog first.
   svg {
     pointer-events: none;
   }
-`,tr=ne`*, :before, :after {
+`,rr=te`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2446,10 +2446,10 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `;var se=JSON.parse('{"breadcrumbs.ariaLabel":["Du er her"]}');var le=JSON.parse('{"breadcrumbs.ariaLabel":["You are here"]}');var ce=JSON.parse('{"breadcrumbs.ariaLabel":["Olet t\xE4ss\xE4"]}');var de=JSON.parse('{"breadcrumbs.ariaLabel":["Her er du"]}');var be=JSON.parse('{"breadcrumbs.ariaLabel":["Du \xE4r h\xE4r"]}');import{css as Ze}from"lit";var pe=Ze`*,: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}.static{position:static}.s-text{color:var(--w-s-color-text)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem*calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem*var(--w-space-x-reverse))}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none}`;var w={wrapper:"flex space-x-8",text:"s-text",link:"s-text-link",separator:"select-none s-icon",a11y:"sr-only"},Je=j`<span class=${w.separator}>/</span>`,x=class extends Re{constructor(){super(),oe(le,de,ce,se,be),this.ariaLabel=b._({id:"breadcrumbs.ariaLabel",message:"You are here",comment:"Default screen reader message for the breadcrumb component"})}connectedCallback(){super.connectedCallback(),this.setAttribute("role","navigation");let r=Array.from(this.children).flat(Number.POSITIVE_INFINITY).filter(t=>t).map((t,a)=>{if(typeof t=="string"){let s=a===this.children.length-1;return j`<span class=${w.text} aria-current=${s?"page":void 0}>${t}</span>`}return t.classList.add(t.tagName==="A"?w.link:w.text),t});this._children=Q(r,Je)}render(){return j`
+        `;var ne=JSON.parse('{"breadcrumbs.ariaLabel":["Du er her"]}');var ie=JSON.parse('{"breadcrumbs.ariaLabel":["You are here"]}');var se=JSON.parse('{"breadcrumbs.ariaLabel":["Olet t\xE4ss\xE4"]}');var le=JSON.parse('{"breadcrumbs.ariaLabel":["Her er du"]}');var ce=JSON.parse('{"breadcrumbs.ariaLabel":["Du \xE4r h\xE4r"]}');import{css as Ue}from"lit";var de=Ue`*,: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}.static{position:static}.s-text{color:var(--w-s-color-text)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem*calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem*var(--w-space-x-reverse))}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none}`;var w={wrapper:"flex space-x-8",text:"s-text",link:"s-text-link",separator:"select-none s-icon",a11y:"sr-only"},Re=Y`<span class=${w.separator}>/</span>`,M=class extends Ze{constructor(){super(),this._internals=this.attachInternals(),ee(ie,le,se,ne,ce),this._internals.ariaLabel=b._({id:"breadcrumbs.ariaLabel",message:"You are here",comment:"Default screen reader message for the breadcrumb component"})}connectedCallback(){super.connectedCallback(),this._internals.role="navigation";let r=Array.from(this.children).flat(Number.POSITIVE_INFINITY).filter(t=>t).map((t,a)=>{if(typeof t=="string"){let l=a===this.children.length-1;return Y`<span class=${w.text} aria-current=${l?"page":void 0}>${t}</span>`}return t.classList.add(t.tagName==="A"?w.link:w.text),t});this._children=K(r,Re)}render(){return Y`
       <nav aria-labelledby="breadCrumbLabel">
         <h2 id="breadCrumbLabel" class=${w.a11y}>${this.ariaLabel}</h2>
         <div class=${w.wrapper}>${this._children}</div>
       </nav>
-    `}};x.styles=[ie,pe],H([qe({attribute:"aria-label",type:String})],x.prototype,"ariaLabel",2);customElements.get("w-breadcrumbs")||customElements.define("w-breadcrumbs",x);export{x as WarpBreadcrumbs};
+    `}};M.styles=[ae,de];customElements.get("w-breadcrumbs")||customElements.define("w-breadcrumbs",M);export{M as WarpBreadcrumbs};
 //# sourceMappingURL=breadcrumbs.js.map