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

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "name" | "small" | "form" | "rel" | "_classes" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "quiet" | "href" | "target" | "fullWidth" | "type" | "loading" | "buttonClass" | "value" | "ariaValueTextLoading" | "updated" | "firstUpdated" | "_primaryClasses" | "_secondaryClasses" | "_utilityClasses" | "_negativeClasses" | "_pillClasses" | "_linkClasses" | "_handleButtonClick" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "rel" | "_classes" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "quiet" | "href" | "target" | "fullWidth" | "type" | "loading" | "buttonClass" | "ariaValueTextLoading" | "updated" | "firstUpdated" | "_primaryClasses" | "_secondaryClasses" | "_utilityClasses" | "_negativeClasses" | "_pillClasses" | "_linkClasses" | "_handleButtonClick" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./button").WarpButton, {}>;
 };
 export default _default;

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

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

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

@@ -0,0 +1,38 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './card.js';
+describe('w-card React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-card', {});
+        expect(warnings).toEqual([]);
+    });
+    test('selected card hydrates without warnings', async () => {
+        const warnings = await testHydration('w-card', {
+            selected: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('flat card hydrates without warnings', async () => {
+        const warnings = await testHydration('w-card', {
+            flat: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('clickable card hydrates without warnings', async () => {
+        const warnings = await testHydration('w-card', {
+            clickable: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('flat selected card hydrates without warnings', async () => {
+        const warnings = await testHydration('w-card', {
+            flat: true,
+            selected: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+});

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Card } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "flat" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "flat" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./card").WarpCard, {}>;
 };
 export default _default;

package/dist/packages/checkbox/checkbox.d.ts

@@ -11,7 +11,9 @@ export declare class WCheckbox extends WCheckbox_base {
     };
     input: HTMLInputElement | null;
     /** The name of the checkbox, submitted as a name/value pair with form data. */
-    name: string;
+    set name(value: string | undefined);
+    get name(): string | undefined;
+    private _ownName;
     /** The value of the checkbox, submitted as a name/value pair with form data. */
     value: string | null;
     /** Draws the checkbox in an indeterminate state. */
@@ -24,6 +26,20 @@ export declare class WCheckbox extends WCheckbox_base {
     required: boolean;
     /** Draws the checkbox in an invalid state. */
     invalid: boolean;
+    /**
+     * Internal invalid state managed by parent checkbox-group.
+     * Non-reflecting to avoid DOM changes during hydration.
+     * @internal
+     */
+    _groupInvalid: boolean | undefined;
+    /**
+     * Internal name managed by parent checkbox-group.
+     * Non-reflecting to avoid DOM changes during hydration.
+     * @internal
+     */
+    _groupName: string | undefined;
+    /** Computed invalid state: combines own invalid with group invalid */
+    get _computedInvalid(): boolean;
     connectedCallback(): void;
     private handleClick;
     updated(changedProperties: PropertyValues<this>): void;

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

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

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

@@ -0,0 +1,47 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './checkbox.js';
+describe('w-checkbox React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with name hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {
+            name: 'agree',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('checked checkbox hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {
+            name: 'agree',
+            checked: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('disabled checkbox hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {
+            name: 'agree',
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('indeterminate checkbox hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {
+            name: 'agree',
+            indeterminate: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('invalid checkbox hydrates without warnings', async () => {
+        const warnings = await testHydration('w-checkbox', {
+            name: 'agree',
+            invalid: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{throw TypeError(t)};var m=(t,r,e,a)=>{for(var l=a>1?void 0:a?ge(r,e):r,u=t.length-1,x;u>=0;u--)(x=t[u])&&(l=(a?x(r,e,l):x(l))||l);return a&&l&&ue(r,e,l),l};var K=(t,r,e)=>r.has(t)||re("Cannot "+e);var w=(t,r,e)=>(K(t,r,"read from private field"),e?e.call(t):r.get(t)),k=(t,r,e)=>r.has(t)?re("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),F=(t,r,e,a)=>(K(t,r,"write to private field"),a?a.call(t,e):r.set(t,e),e),d=(t,r,e)=>(K(t,r,"access private method"),e);var s=function(t,r,e,a){if(e==="a"&&!a)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?t!==r||!a:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?a:e==="a"?a.call(t):a?a.value:r.get(t)},b=function(t,r,e,a,l){if(a==="m")throw new TypeError("Private method is not writable");if(a==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?t!==r||!l:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return a==="a"?l.call(t,e):l?l.value=e:r.set(t,e),e};function oe(t){var r,e,a,l,u,x,z,pe,E,B,U,W,Z,Y,$,f,N,O,G;class ve extends t{constructor(...o){var n,c,h;super(...o),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),a.set(this,!1),l.set(this,!1),u.set(this,void 0),x.set(this,void 0),z.set(this,!0),E.set(this,""),B.set(this,()=>{b(this,l,!0,"f"),b(this,e,!0,"f"),s(this,r,"m",f).call(this)}),U.set(this,()=>{b(this,e,!1,"f"),s(this,r,"m",N).call(this,this.shouldFormValueUpdate()?s(this,E,"f"):""),!this.validity.valid&&s(this,l,"f")&&b(this,a,!0,"f");let g=s(this,r,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(g?this.internals.validationMessage:"")}),W.set(this,()=>{var g;s(this,z,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,z,!1,"f")),b(this,l,!0,"f"),b(this,a,!0,"f"),s(this,r,"m",f).call(this),(g=this===null||this===void 0?void 0:this.validationMessageCallback)===null||g===void 0||g.call(this,this.showError?this.internals.validationMessage:"")}),Z.set(this,void 0),Y.set(this,!1),$.set(this,Promise.resolve()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",s(this,B,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",s(this,U,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"invalid",s(this,W,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(h=>h.attribute).flat(),n=super.observedAttributes||[];return[...new Set([...n,...o])]}static getValidator(o){return this.validators.find(n=>n.attribute===o)||null}static getValidators(o){return this.validators.filter(n=>{var c;if(n.attribute===o||!((c=n.attribute)===null||c===void 0)&&c.includes(o))return!0})}get form(){return this.internals.form}get showError(){return s(this,r,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,n,c){var h;(h=super.attributeChangedCallback)===null||h===void 0||h.call(this,o,n,c);let A=this.constructor.getValidators(o);A!=null&&A.length&&this.validationTarget&&this.setValue(s(this,E,"f"))}setValue(o){var n;b(this,a,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),b(this,E,o,"f");let h=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(h),s(this,r,"m",N).call(this,h),this.valueChangedCallback&&this.valueChangedCallback(h),s(this,r,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(s(this,$,"f")))}formResetCallback(){var o,n;b(this,l,!1,"f"),b(this,a,!1,"f"),s(this,r,"m",f).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,s(this,r,"m",f).call(this)?this.validationMessage:"")}}return e=new WeakMap,a=new WeakMap,l=new WeakMap,u=new WeakMap,x=new WeakMap,z=new WeakMap,E=new WeakMap,B=new WeakMap,U=new WeakMap,W=new WeakMap,Z=new WeakMap,Y=new WeakMap,$=new WeakMap,r=new WeakSet,pe=function(){let o=this.getRootNode(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(n)},f=function(){if(this.hasAttribute("disabled"))return!1;let o=s(this,a,"f")||s(this,l,"f")&&!this.validity.valid&&!s(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},N=function(o){let n=this.constructor,c={},h=n.validators,g=[],A=h.some(v=>v.isValid instanceof Promise);s(this,Y,"f")||(b(this,$,new Promise(v=>{b(this,Z,v,"f")}),"f"),b(this,Y,!0,"f")),s(this,u,"f")&&(s(this,u,"f").abort(),b(this,x,s(this,u,"f"),"f"));let S=new AbortController;b(this,u,S,"f");let j,ee=!1;h.length&&(h.forEach(v=>{let D=v.key||"customError",C=v.isValid(this,o,S.signal);C instanceof Promise?(g.push(C),C.then(H=>{H!=null&&(c[D]=!H,j=s(this,r,"m",G).call(this,v,o),s(this,r,"m",O).call(this,c,j))})):(c[D]=!C,this.validity[D]!==!C&&(ee=!0),!C&&!j&&(j=s(this,r,"m",G).call(this,v,o)))}),Promise.allSettled(g).then(()=>{var v;S!=null&&S.signal.aborted||(b(this,Y,!1,"f"),(v=s(this,Z,"f"))===null||v===void 0||v.call(this))}),(ee||!A)&&s(this,r,"m",O).call(this,c,j))},O=function(o,n){if(this.validationTarget)this.internals.setValidity(o,n,this.validationTarget),b(this,z,!1,"f");else{if(this.internals.setValidity(o,n),this.internals.validity.valid)return;b(this,z,!0,"f")}},G=function(o,n){if(this.validityCallback){let c=this.validityCallback(o.key||"customError");if(c)return c}return o.message instanceof Function?o.message(this,n):o.message},ve}import{html as we,LitElement as ne}from"lit";import{property as y,query as fe}from"lit/decorators.js";import{ifDefined as se}from"lit/directives/if-defined.js";import{live as le}from"lit/directives/live.js";import{css as te}from"lit";var ae=te`
+var pe=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var ee=t=>{throw TypeError(t)};var u=(t,r,e,a)=>{for(var l=a>1?void 0:a?ve(r,e):r,g=t.length-1,x;g>=0;g--)(x=t[g])&&(l=(a?x(r,e,l):x(l))||l);return a&&l&&pe(r,e,l),l};var H=(t,r,e)=>r.has(t)||ee("Cannot "+e);var k=(t,r,e)=>(H(t,r,"read from private field"),e?e.call(t):r.get(t)),y=(t,r,e)=>r.has(t)?ee("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),I=(t,r,e,a)=>(H(t,r,"write to private field"),a?a.call(t,e):r.set(t,e),e),b=(t,r,e)=>(H(t,r,"access private method"),e);var n=function(t,r,e,a){if(e==="a"&&!a)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?t!==r||!a:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?a:e==="a"?a.call(t):a?a.value:r.get(t)},c=function(t,r,e,a,l){if(a==="m")throw new TypeError("Private method is not writable");if(a==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?t!==r||!l:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return a==="a"?l.call(t,e):l?l.value=e:r.set(t,e),e};function re(t){var r,e,a,l,g,x,z,be,M,N,R,B,X,E,Z,f,U,O,G;class he extends t{constructor(...o){var i,d,h;super(...o),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),a.set(this,!1),l.set(this,!1),g.set(this,void 0),x.set(this,void 0),z.set(this,!0),M.set(this,""),N.set(this,()=>{c(this,l,!0,"f"),c(this,e,!0,"f"),n(this,r,"m",f).call(this)}),R.set(this,()=>{c(this,e,!1,"f"),n(this,r,"m",U).call(this,this.shouldFormValueUpdate()?n(this,M,"f"):""),!this.validity.valid&&n(this,l,"f")&&c(this,a,!0,"f");let m=n(this,r,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),B.set(this,()=>{var m;n(this,z,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),c(this,z,!1,"f")),c(this,l,!0,"f"),c(this,a,!0,"f"),n(this,r,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),X.set(this,void 0),E.set(this,!1),Z.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,N,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"blur",n(this,R,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"invalid",n(this,B,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(h=>h.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...o])]}static getValidator(o){return this.validators.find(i=>i.attribute===o)||null}static getValidators(o){return this.validators.filter(i=>{var d;if(i.attribute===o||!((d=i.attribute)===null||d===void 0)&&d.includes(o))return!0})}get form(){return this.internals.form}get showError(){return n(this,r,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,i,d){var h;(h=super.attributeChangedCallback)===null||h===void 0||h.call(this,o,i,d);let S=this.constructor.getValidators(o);S!=null&&S.length&&this.validationTarget&&this.setValue(n(this,M,"f"))}setValue(o){var i;c(this,a,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),c(this,M,o,"f");let h=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(h),n(this,r,"m",U).call(this,h),this.valueChangedCallback&&this.valueChangedCallback(h),n(this,r,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(n(this,Z,"f")))}formResetCallback(){var o,i;c(this,l,!1,"f"),c(this,a,!1,"f"),n(this,r,"m",f).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,r,"m",f).call(this)?this.validationMessage:"")}}return e=new WeakMap,a=new WeakMap,l=new WeakMap,g=new WeakMap,x=new WeakMap,z=new WeakMap,M=new WeakMap,N=new WeakMap,R=new WeakMap,B=new WeakMap,X=new WeakMap,E=new WeakMap,Z=new WeakMap,r=new WeakSet,be=function(){let o=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let o=n(this,a,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},U=function(o){let i=this.constructor,d={},h=i.validators,m=[],S=h.some(v=>v.isValid instanceof Promise);n(this,E,"f")||(c(this,Z,new Promise(v=>{c(this,X,v,"f")}),"f"),c(this,E,!0,"f")),n(this,g,"f")&&(n(this,g,"f").abort(),c(this,x,n(this,g,"f"),"f"));let T=new AbortController;c(this,g,T,"f");let j,Q=!1;h.length&&(h.forEach(v=>{let W=v.key||"customError",C=v.isValid(this,o,T.signal);C instanceof Promise?(m.push(C),C.then(D=>{D!=null&&(d[W]=!D,j=n(this,r,"m",G).call(this,v,o),n(this,r,"m",O).call(this,d,j))})):(d[W]=!C,this.validity[W]!==!C&&(Q=!0),!C&&!j&&(j=n(this,r,"m",G).call(this,v,o)))}),Promise.allSettled(m).then(()=>{var v;T!=null&&T.signal.aborted||(c(this,E,!1,"f"),(v=n(this,X,"f"))===null||v===void 0||v.call(this))}),(Q||!S)&&n(this,r,"m",O).call(this,d,j))},O=function(o,i){if(this.validationTarget)this.internals.setValidity(o,i,this.validationTarget),c(this,z,!1,"f");else{if(this.internals.setValidity(o,i),this.internals.validity.valid)return;c(this,z,!0,"f")}},G=function(o,i){if(this.validityCallback){let d=this.validityCallback(o.key||"customError");if(d)return d}return o.message instanceof Function?o.message(this,i):o.message},he}import{html as ge,LitElement as ie}from"lit";import{property as w,query as me}from"lit/decorators.js";import{ifDefined as K}from"lit/directives/if-defined.js";import{live as ne}from"lit/directives/live.js";import{css as oe}from"lit";var te=oe`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{t
   svg {
     pointer-events: none;
   }
-`,ze=te`*, :before, :after {
+`,ye=oe`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{t
                     display: none
                 }
             }
-        `;import{css as me}from"lit";var ie=me`
+        `;import{css as ue}from"lit";var ae=ue`
   :host {
     --_label-font-size: var(--w-c-checkbox-label-font-size, var(--w-font-size-m));
     --_label-line-height: var(--w-c-checkbox-label-line-height, var(--w-line-height-m));
@@ -2482,15 +2482,6 @@ var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{t
     --_border-color: var(--_border-checked);
   }
 
-  :host([invalid]) {
-    --_border-color: var(--_border-invalid);
-  }
-
-  :host([invalid][checked]),
-  :host([invalid][indeterminate]) {
-    --_bg: var(--_bg-invalid-checked);
-  }
-
   :host([disabled]) {
     --_bg: var(--_bg-disabled);
     --_border-color: var(--_border-disabled);
@@ -2550,6 +2541,16 @@ var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{t
     font-size: var(--w-font-size-m);
   }
 
+  /* Invalid visuals are driven by the actual control state instead of host attributes.
+   * This preserves group-driven invalid styling without mutating host attributes. */
+  [part='control']:has(> [part='input'][aria-invalid='true']:not(:disabled)) {
+    border-color: var(--_border-invalid);
+  }
+
+  [part='control']:has(> [part='input'][aria-invalid='true']:is(:checked, :indeterminate):not(:disabled)) {
+    background-color: var(--_bg-invalid-checked);
+  }
+
   :host(:focus-visible) {
     outline: none;
   }
@@ -2569,26 +2570,26 @@ var ue=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var re=t=>{t
   @media (prefers-reduced-motion: reduce) {
     :host { --w-c-checkbox-transition: none; }
   }
-`;var M,_,I,X,L,R,i,q,de,ce,J,V,P,be,Q,he,p=class extends oe(ne){constructor(){super(...arguments);k(this,i);this.name="";this.value=null;this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;k(this,M,!1);k(this,_,!1);k(this,I,!1);k(this,X,!1);k(this,L,()=>{d(this,i,q).call(this),d(this,i,V).call(this)});k(this,R,e=>{this.disabled||e.defaultPrevented||e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter"||e.composedPath()[0]!==this.input&&(e.preventDefault(),this.click())})}connectedCallback(){super.connectedCallback(),this.setAttribute("type","checkbox");let e=this.getAttribute("value");this.value=e!=null?e:"on",F(this,M,this.hasAttribute("checked")),this.checked=w(this,M),d(this,i,Q).call(this),this.addEventListener("invalid",w(this,L)),this.addEventListener("keydown",w(this,R)),d(this,i,P).call(this)}handleClick(){this.disabled||(d(this,i,q).call(this),this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("checked")||e.has("indeterminate"))&&d(this,i,be).call(this),d(this,i,he).call(this,e)&&(d(this,i,P).call(this),d(this,i,V).call(this)),e.has("disabled")&&d(this,i,Q).call(this)}resetFormControl(){this.checked=w(this,M),d(this,i,P).call(this),d(this,i,V).call(this)}click(){var e;this.disabled||(e=this.input)==null||e.click()}focus(e){var a;(a=this.input)==null||a.focus(e)}blur(){var e;(e=this.input)==null||e.blur()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return d(this,i,V).call(this),this.internals.checkValidity()}reportValidity(){return d(this,i,q).call(this),d(this,i,V).call(this),this.internals.checkValidity()}render(){let e=!this.checked&&this.indeterminate,a=e?"mixed":this.checked?"true":"false";return we`
+`;var V,_,A,q,L,s,P,se,le,J,F,$,de,ce,p=class extends re(ie){constructor(){super(...arguments);y(this,s);this.value=null;this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;y(this,V,!1);y(this,_,!1);y(this,A,!1);y(this,q,()=>{b(this,s,P).call(this),b(this,s,F).call(this)});y(this,L,e=>{this.disabled||e.defaultPrevented||e.key!==" "&&e.key!=="Spacebar"&&e.key!=="Enter"||e.composedPath()[0]!==this.input&&(e.preventDefault(),this.click())})}set name(e){this._ownName=e}get name(){return this._ownName||this._groupName}get _computedInvalid(){return this.invalid||this._groupInvalid===!0}connectedCallback(){super.connectedCallback();let e=this.getAttribute("value");this.value=e!=null?e:"on",I(this,V,this.hasAttribute("checked")),this.checked=k(this,V),this.addEventListener("invalid",k(this,q)),this.addEventListener("keydown",k(this,L)),b(this,s,$).call(this)}handleClick(){this.disabled||(b(this,s,P).call(this),this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("checked")||e.has("indeterminate"))&&b(this,s,de).call(this),b(this,s,ce).call(this,e)&&(b(this,s,$).call(this),b(this,s,F).call(this))}resetFormControl(){this.checked=k(this,V),b(this,s,$).call(this),b(this,s,F).call(this)}click(){var e;this.disabled||(e=this.input)==null||e.click()}focus(e){var a;(a=this.input)==null||a.focus(e)}blur(){var e;(e=this.input)==null||e.blur()}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}checkValidity(){return b(this,s,F).call(this),this.internals.checkValidity()}reportValidity(){return b(this,s,P).call(this),b(this,s,F).call(this),this.internals.checkValidity()}render(){let e=!this.checked&&this.indeterminate,a=e?"mixed":this.checked?"true":"false";return ge`
       <label part="base" class="wrapper">
         <span part="control" class="checkbox control">
           <input
             part="input"
             class="input hide-toggle"
             type="checkbox"
-            name=${this.name}
-            value=${se(this.value)}
-            .indeterminate=${le(this.indeterminate)}
-            .checked=${le(this.checked)}
+            name=${K(this.name||void 0)}
+            value=${K(this.value)}
+            .indeterminate=${ne(this.indeterminate)}
+            .checked=${ne(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
             aria-checked=${a}
-            aria-invalid=${se(this.invalid?"true":void 0)}
+            aria-invalid=${K(this._computedInvalid?"true":void 0)}
             @click=${this.handleClick} />
           ${e?"\u2013":""}
         </span>
 
         <slot part="label"></slot>
       </label>
-    `}};M=new WeakMap,_=new WeakMap,I=new WeakMap,X=new WeakMap,L=new WeakMap,R=new WeakMap,i=new WeakSet,q=function(){F(this,I,!0)},de=function(){var e;return((e=this.input)==null?void 0:e.validationMessage)||" "},ce=function(){var e;return(e=this.input)!=null?e:void 0},J=function(e){this.internals.setValidity(e,d(this,i,de).call(this),d(this,i,ce).call(this))},V=function(){if(this.disabled){this.internals.setValidity({});return}let e=this.required&&!this.checked,a=this.invalid&&!w(this,_);if(e){F(this,_,!0),this.invalid=w(this,I),d(this,i,J).call(this,{valueMissing:!0});return}if(w(this,_)&&(this.invalid=!1,F(this,_,!1)),a){d(this,i,J).call(this,{customError:!0});return}this.internals.setValidity({})},P=function(){if(this.disabled){this.setValue(null);return}let e=this.checked?this.value:null;this.setValue(e)},be=function(){this.input&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate)},Q=function(){this.hasAttribute("tabindex")&&!w(this,X)||(this.tabIndex=this.disabled?-1:0,F(this,X,!0))},he=function(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")},p.styles=[ae,ie],p.shadowRootOptions={...ne.shadowRootOptions,delegatesFocus:!0},m([fe('input[type="checkbox"]')],p.prototype,"input",2),m([y({reflect:!0})],p.prototype,"name",2),m([y({reflect:!0})],p.prototype,"value",2),m([y({type:Boolean,reflect:!0})],p.prototype,"indeterminate",2),m([y({type:Boolean,reflect:!0})],p.prototype,"checked",2),m([y({type:Boolean,reflect:!0})],p.prototype,"disabled",2),m([y({type:Boolean,reflect:!0})],p.prototype,"required",2),m([y({type:Boolean,reflect:!0})],p.prototype,"invalid",2);customElements.get("w-checkbox")||customElements.define("w-checkbox",p);export{p as WCheckbox};
+    `}};V=new WeakMap,_=new WeakMap,A=new WeakMap,q=new WeakMap,L=new WeakMap,s=new WeakSet,P=function(){I(this,A,!0)},se=function(){var e;return((e=this.input)==null?void 0:e.validationMessage)||" "},le=function(){var e;return(e=this.input)!=null?e:void 0},J=function(e){this.internals.setValidity(e,b(this,s,se).call(this),b(this,s,le).call(this))},F=function(){if(this.disabled){this.internals.setValidity({});return}let e=this.required&&!this.checked,a=this.invalid&&!k(this,_);if(e){I(this,_,!0),this.invalid=k(this,A),b(this,s,J).call(this,{valueMissing:!0});return}if(k(this,_)&&(this.invalid=!1,I(this,_,!1)),a){b(this,s,J).call(this,{customError:!0});return}this.internals.setValidity({})},$=function(){if(this.disabled){this.setValue(null);return}let e=this.checked?this.value:null;this.setValue(e)},de=function(){this.input&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate)},ce=function(e){return e.has("checked")||e.has("value")||e.has("disabled")||e.has("required")||e.has("invalid")},p.styles=[te,ae],p.shadowRootOptions={...ie.shadowRootOptions,delegatesFocus:!0},u([me('input[type="checkbox"]')],p.prototype,"input",2),u([w({reflect:!0})],p.prototype,"name",1),u([w({reflect:!0})],p.prototype,"value",2),u([w({type:Boolean,reflect:!0})],p.prototype,"indeterminate",2),u([w({type:Boolean,reflect:!0})],p.prototype,"checked",2),u([w({type:Boolean,reflect:!0})],p.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],p.prototype,"required",2),u([w({type:Boolean,reflect:!0})],p.prototype,"invalid",2),u([w({attribute:!1})],p.prototype,"_groupInvalid",2),u([w({attribute:!1})],p.prototype,"_groupName",2);customElements.get("w-checkbox")||customElements.define("w-checkbox",p);export{p as WCheckbox};
 //# sourceMappingURL=checkbox.js.map