@warp-ds/elements 2.8.2-next.2 → 2.8.2-next.4

package/dist/index.d.ts

@@ -1121,6 +1121,12 @@ export type WRadioProps = {
   required?: WRadio["required"];
   /** Draws the radio in an invalid state. */
   invalid?: WRadio["invalid"];
+  /** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
+Radio-group should use _groupTabIndex directly for clarity. */
+  tabIndex?: WRadio["tabIndex"];
+  /** Internal tabindex for standalone radios (not in a group).
+Non-reflecting to avoid DOM changes during hydration. */
+  _standaloneTabIndex?: WRadio["_standaloneTabIndex"];
 };
 
 export type WRadioSolidJsProps = {
@@ -1136,6 +1142,12 @@ export type WRadioSolidJsProps = {
   "prop:required"?: WRadio["required"];
   /** Draws the radio in an invalid state. */
   "prop:invalid"?: WRadio["invalid"];
+  /** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
+Radio-group should use _groupTabIndex directly for clarity. */
+  "prop:tabIndex"?: WRadio["tabIndex"];
+  /** Internal tabindex for standalone radios (not in a group).
+Non-reflecting to avoid DOM changes during hydration. */
+  "prop:_standaloneTabIndex"?: WRadio["_standaloneTabIndex"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1632,17 +1644,19 @@ export type WarpTabProps = {
   /**  */
   for?: WarpTab["for"];
   /**  */
-  "aria-selected"?: WarpTab["ariaSelected"];
+  "aria-controls"?: WarpTab["_ariaControlsAttr"];
   /**  */
-  ariaSelected?: WarpTab["ariaSelected"];
+  _ariaControlsAttr?: WarpTab["_ariaControlsAttr"];
   /**  */
-  tabindex?: WarpTab["tabIndex"];
+  "aria-selected"?: WarpTab["ariaSelected"];
   /**  */
-  tabIndex?: WarpTab["tabIndex"];
+  ariaSelected?: WarpTab["ariaSelected"];
   /** @deprecated Use `aria-selected="true"` instead  */
   active?: WarpTab["active"];
   /**  */
   over?: WarpTab["over"];
+  /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
+  tabIndex?: WarpTab["tabIndex"];
 };
 
 export type WarpTabSolidJsProps = {
@@ -1651,17 +1665,19 @@ export type WarpTabSolidJsProps = {
   /**  */
   "prop:for"?: WarpTab["for"];
   /**  */
-  "attr:aria-selected"?: WarpTab["ariaSelected"];
+  "attr:aria-controls"?: WarpTab["_ariaControlsAttr"];
   /**  */
-  "prop:ariaSelected"?: WarpTab["ariaSelected"];
+  "prop:_ariaControlsAttr"?: WarpTab["_ariaControlsAttr"];
   /**  */
-  "attr:tabindex"?: WarpTab["tabIndex"];
+  "attr:aria-selected"?: WarpTab["ariaSelected"];
   /**  */
-  "prop:tabIndex"?: WarpTab["tabIndex"];
+  "prop:ariaSelected"?: WarpTab["ariaSelected"];
   /** @deprecated Use `aria-selected="true"` instead  */
   "prop:active"?: WarpTab["active"];
   /**  */
   "prop:over"?: WarpTab["over"];
+  /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
+  "prop:tabIndex"?: WarpTab["tabIndex"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1669,9 +1685,17 @@ export type WarpTabSolidJsProps = {
   textContent?: string | number;
 };
 
-export type WarpTabPanelProps = {};
+export type WarpTabPanelProps = {
+  /** Whether this panel is active (visible).
+Set by parent w-tabs via the _parentActive property. */
+  active?: WarpTabPanel["active"];
+};
 
 export type WarpTabPanelSolidJsProps = {
+  /** Whether this panel is active (visible).
+Set by parent w-tabs via the _parentActive property. */
+  "prop:active"?: WarpTabPanel["active"];
+
   /** Set the innerHTML of the element */
   innerHTML?: string;
   /** Set the textContent of the element */
@@ -2019,6 +2043,7 @@ export type CustomElements = {
    * - `required`: Makes the checkbox a required field.
    * - `invalid`: Draws the checkbox in an invalid state.
    * - `input`: undefined (property only)
+   * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
    *
@@ -2360,8 +2385,12 @@ export type CustomElements = {
    * - `disabled`: Disables the radio.
    * - `required`: Makes the radio a required field.
    * - `invalid`: Draws the radio in an invalid state.
+   * - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
+   * Radio-group should use _groupTabIndex directly for clarity. (property only)
    * - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the radio (property only) (readonly)
+   * - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
+   * Non-reflecting to avoid DOM changes during hydration. (property only)
    *
    * ## Methods
    *
@@ -2665,10 +2694,12 @@ export type CustomElements = {
    *
    * - `id`: undefined
    * - `for`: undefined
+   * - `aria-controls`/`_ariaControlsAttr`: undefined
    * - `aria-selected`/`ariaSelected`: undefined
-   * - `tabindex`/`tabIndex`: undefined
    * - `active`: undefined
    * - `over`: undefined
+   * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
+   * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
    */
   "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
 
@@ -2677,6 +2708,13 @@ export type CustomElements = {
    * Each tab panel should have a name that matches a corresponding tab.
    *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `active`: Whether this panel is active (visible).
+   * Set by parent w-tabs via the _parentActive property.
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents
@@ -3011,6 +3049,7 @@ export type CustomElementsSolidJs = {
    * - `required`: Makes the checkbox a required field.
    * - `invalid`: Draws the checkbox in an invalid state.
    * - `input`: undefined (property only)
+   * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
    * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
    *
@@ -3382,8 +3421,12 @@ export type CustomElementsSolidJs = {
    * - `disabled`: Disables the radio.
    * - `required`: Makes the radio a required field.
    * - `invalid`: Draws the radio in an invalid state.
+   * - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
+   * Radio-group should use _groupTabIndex directly for clarity. (property only)
    * - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
    * - `validity`: Returns the validity state of the radio (property only) (readonly)
+   * - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
+   * Non-reflecting to avoid DOM changes during hydration. (property only)
    *
    * ## Methods
    *
@@ -3718,10 +3761,12 @@ export type CustomElementsSolidJs = {
    *
    * - `id`: undefined
    * - `for`: undefined
+   * - `aria-controls`/`_ariaControlsAttr`: undefined
    * - `aria-selected`/`ariaSelected`: undefined
-   * - `tabindex`/`tabIndex`: undefined
    * - `active`: undefined
    * - `over`: undefined
+   * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
+   * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
    */
   "w-tab": Partial<
     WarpTabProps & WarpTabSolidJsProps & BaseProps<WarpTab> & BaseEvents
@@ -3732,6 +3777,13 @@ export type CustomElementsSolidJs = {
    * Each tab panel should have a name that matches a corresponding tab.
    *
    * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `active`: Whether this panel is active (visible).
+   * Set by parent w-tabs via the _parentActive property.
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps &

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

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

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

@@ -0,0 +1,33 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './affix.js';
+describe('w-affix React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-affix', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-affix', {
+            label: 'kr',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with search hydrates without warnings', async () => {
+        const warnings = await testHydration('w-affix', {
+            search: true,
+            'aria-label': 'Search',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with clear hydrates without warnings', async () => {
+        const warnings = await testHydration('w-affix', {
+            clear: true,
+            'aria-label': 'Clear',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/affix/affix.js

@@ -1,4 +1,4 @@
-var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t)=>{for(var a=t>1?void 0:t?E(o,r):o,l=e.length-1,c;l>=0;l--)(c=e[l])&&(a=(t?c(o,r,a):c(a))||a);return t&&a&&L(o,r,a),a};var g=function(){for(var e=[],o=arguments.length;o--;)e[o]=arguments[o];return e.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?g.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as b,LitElement as F}from"lit";import{property as p}from"lit/decorators.js";import{ifDefined as z}from"lit/directives/if-defined.js";import{css as w}from"lit";var f=w`
+var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t)=>{for(var a=t>1?void 0:t?E(o,r):o,n=e.length-1,c;n>=0;n--)(c=e[n])&&(a=(t?c(o,r,a):c(a))||a);return t&&a&&L(o,r,a),a};var g=function(){for(var e=[],o=arguments.length;o--;)e[o]=arguments[o];return e.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?g.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as b,LitElement as F}from"lit";import{property as p}from"lit/decorators.js";import{ifDefined as z}from"lit/directives/if-defined.js";import{css as w}from"lit";var f=w`
   *,
   :before,
   :after {
@@ -2462,7 +2462,7 @@ var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t
   --w-icon-size: 32px;
 }
 
-`;var v=new Map,T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function X(e,o={}){var t;let r=(t=o.responseParser)!=null?t:(a=>a.text());return v.has(e)||v.set(e,fetch(e).then(r)),v.get(e)}var n=class extends S{constructor(){super(...arguments);this.name="";this.svg=null}async fetchIcon(r){let a=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${r}.svg`;try{let l=await X(a);return new DOMParser().parseFromString(l,"text/html").body.querySelector("svg")}catch(l){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(T,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},a=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return j`<div class="${P(t)}" style="${a}" part="w-${this.name.toLowerCase()}">${this.svg}</div>`}};n.styles=[k],i([u({type:String,reflect:!0})],n.prototype,"name",2),i([u({type:String,reflect:!0})],n.prototype,"size",2),i([u({type:String,reflect:!0})],n.prototype,"locale",2),i([$()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);var Z=["en","nb","fi","da","sv"],h="en",d=e=>Z.find(o=>e===o||e.toLowerCase().includes(o))||h;function m(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return d(e)}try{let e=y(document);if(e)return d(e);let o=C();if(o)return d(o);let r=y(B());return r?d(r):h}catch(e){return console.warn("could not detect locale, falling back to source locale",e),h}}function B(){var e,o;try{return(o=(e=window.parent)==null?void 0:e.document)!=null?o:null}catch(r){return null}}function y(e){var o,r;try{return(r=(o=e==null?void 0:e.documentElement)==null?void 0:o.lang)!=null?r:""}catch(t){return""}}function C(){var e,o,r;try{return(r=(o=(e=window.frameElement)==null?void 0:e.getAttribute)==null?void 0:o.call(e,"lang"))!=null?r:""}catch(t){return""}}var _="absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ",O={wrapper:_+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},R={wrapper:_+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},s=class extends F{constructor(){super(...arguments);this.clear=!1;this.search=!1}get _classBase(){return this.slot==="suffix"?O:R}get _classes(){return g([this._classBase.wrapper,this.label?this._classBase.wrapperWithLabel:this._classBase.wrapperWithIcon])}get _searchButton(){return b`
+`;var v=new Map,T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function X(e,o={}){var t;let r=(t=o.responseParser)!=null?t:(a=>a.text());return v.has(e)||v.set(e,fetch(e).then(r)),v.get(e)}var s=class extends S{constructor(){super(...arguments);this.svg=null}async fetchIcon(r){let a=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${r}.svg`;try{let n=await X(a);return new DOMParser().parseFromString(n,"text/html").body.querySelector("svg")}catch(n){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(T,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},n=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return j`<div class="${P(a)}" style="${n}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};s.styles=[k],i([u({type:String,reflect:!0})],s.prototype,"name",2),i([u({type:String,reflect:!0})],s.prototype,"size",2),i([u({type:String,reflect:!0})],s.prototype,"locale",2),i([$()],s.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",s);var Z=["en","nb","fi","da","sv"],h="en",d=e=>Z.find(o=>e===o||e.toLowerCase().includes(o))||h;function m(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return d(e)}try{let e=y(document);if(e)return d(e);let o=C();if(o)return d(o);let r=y(B());return r?d(r):h}catch(e){return console.warn("could not detect locale, falling back to source locale",e),h}}function B(){var e,o;try{return(o=(e=window.parent)==null?void 0:e.document)!=null?o:null}catch(r){return null}}function y(e){var o,r;try{return(r=(o=e==null?void 0:e.documentElement)==null?void 0:o.lang)!=null?r:""}catch(t){return""}}function C(){var e,o,r;try{return(r=(o=(e=window.frameElement)==null?void 0:e.getAttribute)==null?void 0:o.call(e,"lang"))!=null?r:""}catch(t){return""}}var _="absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ",O={wrapper:_+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},R={wrapper:_+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},l=class extends F{constructor(){super(...arguments);this.clear=!1;this.search=!1}get _classBase(){return this.slot==="suffix"?O:R}get _classes(){return g([this._classBase.wrapper,this.label?this._classBase.wrapperWithLabel:this._classBase.wrapperWithIcon])}get _searchButton(){return b`
       <button aria-label="${z(this.ariaLabel)}" class="${this._classes}" type="submit">
         <w-icon name="Search" size="small" locale="${m()}" class="flex"></w-icon>
       </button>
@@ -2474,5 +2474,5 @@ var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t
       <div class="${this._classes}">
         <span class="${this._classBase.label}">${this.label}</span>
       </div>
-    `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return b`${this._markup}`}};s.styles=[f,x],i([p({attribute:"aria-label"})],s.prototype,"ariaLabel",2),i([p({type:Boolean})],s.prototype,"clear",2),i([p({type:Boolean})],s.prototype,"search",2),i([p()],s.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",s);export{s as WarpAffix};
+    `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return b`${this._markup}`}};l.styles=[f,x],i([p({attribute:"aria-label"})],l.prototype,"ariaLabel",2),i([p({type:Boolean})],l.prototype,"clear",2),i([p({type:Boolean})],l.prototype,"search",2),i([p()],l.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",l);export{l as WarpAffix};
 //# sourceMappingURL=affix.js.map