@warp-ds/elements 2.6.0 → 2.7.0-next.2

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

@@ -0,0 +1,142 @@
+import { html } from 'lit';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './checkbox.js';
+const getInput = (el) => el.shadowRoot?.querySelector('input[type="checkbox"]');
+test('toggles checked on click and dispatches change', async () => {
+    render(html `<w-checkbox>Check me</w-checkbox>`);
+    const wCheckbox = document.querySelector('w-checkbox');
+    const onChange = vi.fn();
+    wCheckbox.addEventListener('change', onChange);
+    await wCheckbox.updateComplete;
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.checked).toBe(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+});
+test('associates value with form when checked', async () => {
+    render(html `
+    <form data-testid="form">
+      <w-checkbox name="newsletter" value="yes" checked>Sign up</w-checkbox>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wCheckbox = document.querySelector('w-checkbox');
+    await wCheckbox.updateComplete;
+    let data = new FormData(form);
+    expect(data.get('newsletter')).toBe('yes');
+    wCheckbox.checked = false;
+    await wCheckbox.updateComplete;
+    data = new FormData(form);
+    expect(data.get('newsletter')).toBeNull();
+});
+test('resets to defaultChecked on form reset', async () => {
+    render(html `
+    <form>
+      <w-checkbox name="updates" value="yes" checked>Updates</w-checkbox>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wCheckbox = document.querySelector('w-checkbox');
+    await wCheckbox.updateComplete;
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.checked).toBe(false);
+    form.reset();
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.checked).toBe(true);
+});
+test('required checkbox reports validity based on checked state', async () => {
+    render(html `<w-checkbox name="terms" required>Accept</w-checkbox>`);
+    const wCheckbox = document.querySelector('w-checkbox');
+    await expect.poll(() => wCheckbox.checkValidity()).toBe(false);
+    expect(wCheckbox.validity.valueMissing).toBe(true);
+    expect(wCheckbox.validationMessage).not.toBe('');
+    wCheckbox.checked = true;
+    await wCheckbox.updateComplete;
+    await expect.poll(() => wCheckbox.checkValidity()).toBe(true);
+    expect(wCheckbox.validity.valid).toBe(true);
+});
+test('required checkbox shows invalid state after submit and clears after selection', async () => {
+    render(html `
+    <form>
+      <w-checkbox name="terms" required>Accept</w-checkbox>
+      <button type="submit">Submit</button>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wCheckbox = document.querySelector('w-checkbox');
+    const submit = document.querySelector('button[type="submit"]');
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.hasAttribute('invalid')).toBe(false);
+    submit.click();
+    await wCheckbox.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(false);
+    expect(wCheckbox.hasAttribute('invalid')).toBe(true);
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(true);
+    expect(wCheckbox.hasAttribute('invalid')).toBe(false);
+});
+test('participates in form submission and blocks submit when required', async () => {
+    render(html `
+    <form>
+      <w-checkbox name="newsletter" value="yes" required>Sign up</w-checkbox>
+      <button type="submit">Submit</button>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wCheckbox = document.querySelector('w-checkbox');
+    const submit = document.querySelector('button[type="submit"]');
+    const onSubmit = vi.fn(() => {
+        const data = new FormData(form);
+        expect(data.get('newsletter')).toBe('yes');
+    });
+    form.addEventListener('submit', (event) => {
+        if (!form.checkValidity()) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        onSubmit();
+    });
+    await wCheckbox.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(false);
+    submit.click();
+    await expect.poll(() => form.checkValidity()).toBe(false);
+    expect(onSubmit).not.toHaveBeenCalled();
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    submit.click();
+    await wCheckbox.updateComplete;
+    await expect.poll(() => form.checkValidity()).toBe(true);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+});
+test('clears indeterminate on click', async () => {
+    render(html `<w-checkbox indeterminate>Partial</w-checkbox>`);
+    const wCheckbox = document.querySelector('w-checkbox');
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.indeterminate).toBe(true);
+    const input = getInput(wCheckbox);
+    expect(input).not.toBeNull();
+    expect(input?.indeterminate).toBe(true);
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.indeterminate).toBe(false);
+    expect(wCheckbox.checked).toBe(true);
+});
+test('does not toggle or emit change when disabled', async () => {
+    render(html `<w-checkbox disabled>Disabled</w-checkbox>`);
+    const wCheckbox = document.querySelector('w-checkbox');
+    const onChange = vi.fn();
+    wCheckbox.addEventListener('change', onChange);
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.checked).toBe(false);
+    const input = getInput(wCheckbox);
+    expect(input).not.toBeNull();
+    expect(input?.disabled).toBe(true);
+    wCheckbox.click();
+    await wCheckbox.updateComplete;
+    expect(wCheckbox.checked).toBe(false);
+    expect(onChange).not.toHaveBeenCalled();
+});

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

@@ -0,0 +1,5 @@
+import { WCheckbox } from './checkbox.js';
+export declare const Checkbox: import("@lit/react").ReactWebComponent<WCheckbox, {
+    onChange: string;
+    onchange: string;
+}>;

package/dist/packages/checkbox/react.js

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Checkbox = createComponent({
+    tagName: 'w-checkbox',
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onchange: 'change',
+    },
+});

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/checkbox/styles.js

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+export const styles = css `
+  :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));
+
+    --_control-size: var(--w-c-checkbox-control-size, 2rem);
+    --_gap: var(--w-c-checkbox-gap, 8px);
+    --_radius: var(--w-c-checkbox-radius, 4px);
+    --_border-width: var(--w-c-checkbox-border-width, 1px);
+
+    --_bg-default: var(--w-c-checkbox-bg, var(--w-s-color-background));
+    --_border-default: var(--w-c-checkbox-border-color, var(--w-s-color-border-strong));
+    --_icon-color: var(--w-c-checkbox-icon-color, var(--w-s-color-icon-inverted));
+
+    --_bg-checked: var(--w-c-checkbox-bg-checked, var(--w-s-color-background-primary));
+    --_border-checked: var(--w-c-checkbox-border-color-checked, var(--w-s-color-border-primary));
+    --_checked-icon: var(--w-c-checkbox-checked-icon, var(--w-icon-toggle-checked));
+
+    --_border-invalid: var(--w-c-checkbox-border-color-invalid, var(--w-s-color-border-negative));
+    --_bg-invalid-checked: var(--w-c-checkbox-bg-invalid-checked, var(--w-s-color-background-negative));
+
+    --_bg-disabled: var(--w-c-checkbox-bg-disabled, var(--w-s-color-background-disabled-subtle));
+    --_border-disabled: var(--w-c-checkbox-border-color-disabled, var(--w-s-color-border-disabled));
+    --_bg-disabled-checked: var(--w-c-checkbox-bg-disabled-checked, var(--w-s-color-background-disabled));
+
+    --_outline-width: var(--w-c-checkbox-outline-width, 2px);
+    --_outline-color: var(--w-c-checkbox-outline-color, var(--w-s-color-border-focus));
+    --_outline-offset: var(--w-c-checkbox-outline-offset, var(--w-outline-offset, 1px));
+
+    --_transition: var(--w-c-checkbox-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
+
+    --_bg: var(--_bg-default);
+    --_border-color: var(--_border-default);
+  }
+
+  :host([type='checkbox']) {
+    --_radius: var(--w-c-checkbox-radius, 4px);
+  }
+
+  :host([checked]),
+  :host([indeterminate]) {
+    --_bg: var(--_bg-checked);
+    --_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);
+  }
+
+  :host([disabled][checked]),
+  :host([disabled][indeterminate]) {
+    --_bg: var(--_bg-disabled-checked);
+  }
+
+  [part~='label'] {
+    display: block;
+    font-size: var(--_label-font-size);
+    line-height: var(--_label-line-height);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  [part='base'] {
+    display: grid;
+    grid-template-columns: var(--_control-size) max-content;
+    gap: var(--_gap);
+  }
+
+  [part='input'] {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    pointer-events: none;
+    inset: 0;
+  }
+
+  [part='control'] {
+    position: relative;
+    display: block;
+    height: var(--_control-size);
+    width: var(--_control-size);
+    flex-shrink: 0;
+
+    border-width: var(--_border-width);
+    border-style: solid;
+    border-color: var(--_border-color);
+    border-radius: var(--_radius);
+
+    background-color: var(--_bg);
+    color: var(--_icon-color);
+
+    cursor: pointer;
+    user-select: none;
+    appearance: none;
+    transition: var(--_transition);
+
+    font-weight: 700;
+    text-align: center;
+    line-height: var(--w-line-height-xs);
+    font-size: var(--w-font-size-m);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  [part='control']:has(> [part='input']:focus-visible:not(:disabled)),
+  :host(:focus-visible) [part='control'] {
+    outline: var(--_outline-width) solid var(--_outline-color);
+    outline-offset: var(--_outline-offset);
+  }
+
+  /* checked icon (keep driven by actual input state for parity) */
+  [part='control']:has(:checked) {
+    background-image: var(--_checked-icon);
+    background-position: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host { --w-c-checkbox-transition: none; }
+  }
+`;

package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts

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

package/dist/packages/checkbox-group/checkbox-group.a11y.test.js

@@ -0,0 +1,109 @@
+import { i18n } from '@lingui/core';
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { describe, expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './checkbox-group.js';
+import '../checkbox/checkbox.js';
+// Initialize i18n with English locale for tests
+i18n.load('en', {
+    'checkbox-group.label.optional': ['(optional)'],
+    'checkbox-group.validation.required': ['At least one selection is required.'],
+});
+i18n.activate('en');
+const REQUIRED_MESSAGE = 'At least one selection is required.';
+describe('w-checkbox-group accessibility (WCAG 2.2)', () => {
+    describe('axe-core automated checks', () => {
+        test('default state has no violations', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test('with help text has no violations', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences" help-text="Select one">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test('required invalid state has no violations', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences" required help-text="Select one">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            const groupEl = document.querySelector('w-checkbox-group');
+            groupEl.reportValidity?.();
+            await expect(page).toHaveNoAxeViolations();
+        });
+    });
+    describe('WCAG 1.3.1 - Info and Relationships', () => {
+        test('group has accessible name from label', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            await expect.element(page.getByRole('group', { name: 'Preferences' })).toBeVisible();
+        });
+    });
+    describe('WCAG 3.3.1 - Error Identification', () => {
+        test('invalid state is indicated via aria-invalid', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences" required help-text="Select one">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            const groupEl = document.querySelector('w-checkbox-group');
+            groupEl.reportValidity?.();
+            await expect.element(page.getByRole('group', { name: 'Preferences' })).toHaveAttribute('aria-invalid', 'true');
+            await expect.element(page.getByText(REQUIRED_MESSAGE)).toBeVisible();
+        });
+    });
+    describe('WCAG 3.3.2 - Labels or Instructions', () => {
+        test('help text is programmatically associated', async () => {
+            const page = render(html `
+        <w-checkbox-group label="Preferences" help-text="Select one">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+      `);
+            await expect.element(page.getByRole('group', { name: 'Preferences' })).toHaveAccessibleDescription('Select one');
+        });
+    });
+    describe('WCAG 2.1.1 - Keyboard', () => {
+        test('tab moves through checkboxes and space toggles', async () => {
+            const page = render(html `
+        <button>Before</button>
+        <w-checkbox-group label="Preferences">
+          <w-checkbox>One</w-checkbox>
+          <w-checkbox>Two</w-checkbox>
+        </w-checkbox-group>
+        <button>After</button>
+      `);
+            const checkboxes = Array.from(document.querySelectorAll('w-checkbox'));
+            const firstCheckbox = checkboxes[0];
+            const secondCheckbox = checkboxes[1];
+            await firstCheckbox?.updateComplete;
+            firstCheckbox?.focus();
+            await expect.poll(() => firstCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
+            expect(firstCheckbox.checked).toBe(false);
+            await userEvent.keyboard('[Space]');
+            await expect.poll(() => firstCheckbox.checked).toBe(true);
+            await secondCheckbox?.updateComplete;
+            secondCheckbox?.focus();
+            await expect.poll(() => secondCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
+            await userEvent.keyboard('[Space]');
+            await expect.poll(() => secondCheckbox.checked).toBe(true);
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const WCheckboxGroup_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+export declare class WCheckboxGroup extends WCheckboxGroup_base {
+    #private;
+    /** The group label displayed above the checkboxes. */
+    label: string;
+    /** The name applied to child checkboxes when they do not provide one. */
+    name: string;
+    /** Whether to show optional text next to the label. */
+    optional: boolean;
+    helpText: string;
+    /** Makes the checkbox group required. */
+    required: boolean;
+    /** Marks the checkbox group as invalid. */
+    invalid: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Checks whether the group passes constraint validation */
+    checkValidity(): boolean;
+    /** Checks validity and shows the validation message if invalid */
+    reportValidity(): boolean;
+    /** Sets focus on the checkbox group. */
+    focus(options?: FocusOptions): void;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-checkbox-group': WCheckboxGroup;
+    }
+}
+export {};

package/dist/packages/checkbox-group/checkbox-group.js

@@ -0,0 +1,71 @@
+var it=Object.create;var fe=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var nt=Object.getOwnPropertyNames;var at=Object.getPrototypeOf,ot=Object.prototype.hasOwnProperty;var Te=s=>{throw TypeError(s)};var Ve=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports);var lt=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of nt(e))!ot.call(s,i)&&i!==t&&fe(s,i,{get:()=>e[i],enumerable:!(r=Le(e,i))||r.enumerable});return s};var ct=(s,e,t)=>(t=s!=null?it(at(s)):{},lt(e||!s||!s.__esModule?fe(t,"default",{value:s,enumerable:!0}):t,s));var A=(s,e,t,r)=>{for(var i=r>1?void 0:r?Le(e,t):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(i=(r?a(e,t,i):a(i))||i);return r&&i&&fe(e,t,i),i};var me=(s,e,t)=>e.has(s)||Te("Cannot "+t);var E=(s,e,t)=>(me(s,e,"read from private field"),t?t.call(s):e.get(s)),x=(s,e,t)=>e.has(s)?Te("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(s):e.set(s,t),N=(s,e,t,r)=>(me(s,e,"write to private field"),r?r.call(s,t):e.set(s,t),t),d=(s,e,t)=>(me(s,e,"access private method"),t);var Oe=Ve(P=>{"use strict";Object.defineProperty(P,"__esModule",{value:!0});P.errorMessages=P.ErrorType=void 0;var R;(function(s){s.MalformedUnicode="MALFORMED_UNICODE",s.MalformedHexadecimal="MALFORMED_HEXADECIMAL",s.CodePointLimit="CODE_POINT_LIMIT",s.OctalDeprecation="OCTAL_DEPRECATION",s.EndOfString="END_OF_STRING"})(R=P.ErrorType||(P.ErrorType={}));P.errorMessages=new Map([[R.MalformedUnicode,"malformed Unicode character escape sequence"],[R.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[R.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[R.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[R.EndOfString,"malformed escape sequence at end of string"]])});var Ne=Ve(k=>{"use strict";Object.defineProperty(k,"__esModule",{value:!0});k.unraw=k.errorMessages=k.ErrorType=void 0;var b=Oe();Object.defineProperty(k,"ErrorType",{enumerable:!0,get:function(){return b.ErrorType}});Object.defineProperty(k,"errorMessages",{enumerable:!0,get:function(){return b.errorMessages}});function ut(s){return!s.match(/[^a-f0-9]/i)?parseInt(s,16):NaN}function Y(s,e,t){let r=ut(s);if(Number.isNaN(r)||t!==void 0&&t!==s.length)throw new SyntaxError(b.errorMessages.get(e));return r}function dt(s){let e=Y(s,b.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function Ie(s,e){let t=Y(s,b.ErrorType.MalformedUnicode,4);if(e!==void 0){let r=Y(e,b.ErrorType.MalformedUnicode,4);return String.fromCharCode(t,r)}return String.fromCharCode(t)}function ht(s){return s.charAt(0)==="{"&&s.charAt(s.length-1)==="}"}function ft(s){if(!ht(s))throw new SyntaxError(b.errorMessages.get(b.ErrorType.MalformedUnicode));let e=s.slice(1,-1),t=Y(e,b.ErrorType.MalformedUnicode);try{return String.fromCodePoint(t)}catch(r){throw r instanceof RangeError?new SyntaxError(b.errorMessages.get(b.ErrorType.CodePointLimit)):r}}function mt(s,e=!1){if(e)throw new SyntaxError(b.errorMessages.get(b.ErrorType.OctalDeprecation));let t=parseInt(s,8);return String.fromCharCode(t)}var pt=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function gt(s){return pt.get(s)||s}var vt=/\\(?:(\\)|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 Ae(s,e=!1){return s.replace(vt,function(t,r,i,l,a,n,u,m,C){if(r!==void 0)return"\\";if(i!==void 0)return dt(i);if(l!==void 0)return ft(l);if(a!==void 0)return Ie(a,n);if(u!==void 0)return Ie(u);if(m==="0")return"\0";if(m!==void 0)return mt(m,!e);if(C!==void 0)return gt(C);throw new SyntaxError(b.errorMessages.get(b.ErrorType.EndOfString))})}k.unraw=Ae;k.default=Ae});var qe=ct(Ne(),1);var O=s=>typeof s=="string",bt=s=>typeof s=="function",Pe=new Map,Ue="en";function be(s){return[...Array.isArray(s)?s:[s],Ue]}function _e(s,e,t){let r=be(s);t||(t="default");let i;if(typeof t=="string")switch(i={day:"numeric",month:"short",year:"numeric"},t){case"full":i.weekday="long";case"long":i.month="long";break;case"short":i.month="numeric";break}else i=t;return ee(()=>te("date",r,t),()=>new Intl.DateTimeFormat(r,i)).format(O(e)?new Date(e):e)}function _t(s,e,t){let r;if(t||(t="default"),typeof t=="string")switch(r={second:"numeric",minute:"numeric",hour:"numeric"},t){case"full":case"long":r.timeZoneName="short";break;case"short":delete r.second}else r=t;return _e(s,e,r)}function pe(s,e,t){let r=be(s);return ee(()=>te("number",r,t),()=>new Intl.NumberFormat(r,t)).format(e)}function De(s,e,t,{offset:r=0,...i}){var n,u;let l=be(s),a=e?ee(()=>te("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):ee(()=>te("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return(u=(n=i[t])!=null?n:i[a.select(t-r)])!=null?u:i.other}function ee(s,e){let t=s(),r=Pe.get(t);return r||(r=e(),Pe.set(t,r)),r}function te(s,e,t){let r=e.join("-");return`${s}-${r}-${JSON.stringify(t)}`}var $e=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,He="%__lingui_octothorpe__%",yt=(s,e,t={})=>{let r=e||s,i=a=>typeof a=="object"?a:t[a],l=(a,n)=>{let u=Object.keys(t).length?i("number"):void 0,m=pe(r,a,u);return n.replace(new RegExp(He,"g"),m)};return{plural:(a,n)=>{let{offset:u=0}=n,m=De(r,!1,a,n);return l(a-u,m)},selectordinal:(a,n)=>{let{offset:u=0}=n,m=De(r,!0,a,n);return l(a-u,m)},select:wt,number:(a,n)=>pe(r,a,i(n)||{style:n}),date:(a,n)=>_e(r,a,i(n)||n),time:(a,n)=>_t(r,a,i(n)||n)}},wt=(s,e)=>{var t;return(t=e[s])!=null?t:e.other};function Mt(s,e,t){return(r={},i)=>{let l=yt(e,t,i),a=(u,m=!1)=>Array.isArray(u)?u.reduce((C,L)=>{if(L==="#"&&m)return C+He;if(O(L))return C+L;let[$,w,T]=L,V={};w==="plural"||w==="selectordinal"||w==="select"?Object.entries(T).forEach(([I,J])=>{V[I]=a(J,w==="plural"||w==="selectordinal")}):V=T;let _;if(w){let I=l[w];_=I(r[$],V)}else _=r[$];return _==null?C:C+_},""):u,n=a(s);return O(n)&&$e.test(n)?(0,qe.unraw)(n):O(n)?n:n?String(n):""}}var Ct=Object.defineProperty,Et=(s,e,t)=>e in s?Ct(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,xt=(s,e,t)=>(Et(s,typeof e!="symbol"?e+"":e,t),t),ge=class{constructor(){xt(this,"_events",{})}on(e,t){var i;var r;return(i=(r=this._events)[e])!=null||(r[e]=[]),this._events[e].push(t),()=>this.removeListener(e,t)}removeListener(e,t){let r=this._getListeners(e);if(!r)return;let i=r.indexOf(t);~i&&r.splice(i,1)}emit(e,...t){let r=this._getListeners(e);r&&r.map(i=>i.apply(this,t))}_getListeners(e){let t=this._events[e];return Array.isArray(t)?t:!1}},Ft=Object.defineProperty,St=(s,e,t)=>e in s?Ft(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,D=(s,e,t)=>(St(s,typeof e!="symbol"?e+"":e,t),t),ve=class extends ge{constructor(e){var t;super(),D(this,"_locale",""),D(this,"_locales"),D(this,"_localeData",{}),D(this,"_messages",{}),D(this,"_missing"),D(this,"_messageCompiler"),D(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((t=e.locale)!=null?t:Ue,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,t){let r=this._localeData[e];r?Object.assign(r,t):this._localeData[e]=t}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,t){typeof e=="string"?this._loadLocaleData(e,t):Object.keys(e).forEach(r=>this._loadLocaleData(r,e[r])),this.emit("change")}_load(e,t){let r=this._messages[e];r?Object.assign(r,t):this._messages[e]=t}load(e,t){typeof e=="string"&&typeof t=="object"?this._load(e,t):Object.entries(e).forEach(([r,i])=>this._load(r,i)),this.emit("change")}loadAndActivate({locale:e,locales:t,messages:r}){this._locale=e,this._locales=t||void 0,this._messages[this._locale]=r,this.emit("change")}activate(e,t){this._locale=e,this._locales=t,this.emit("change")}_(e,t,r){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 i=r==null?void 0:r.message;e||(e=""),O(e)||(t=e.values||t,i=e.message,e=e.id);let l=this.messages[e],a=l===void 0,n=this._missing;if(n&&a)return bt(n)?n(this._locale,e):n;a&&this.emit("missing",{id:e,locale:this._locale});let u=l||i||e;return O(u)&&(this._messageCompiler?u=this._messageCompiler(u):console.warn(`Uncompiled message detected! Message:
+
+> ${u}
+
+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. 
+`)),O(u)&&$e.test(u)?JSON.parse(`"${u}"`):O(u)?u:Mt(u,this._locale,this._locales)(t,r==null?void 0:r.formats)}date(e,t){return _e(this._locales||this._locale,e,t)}number(e,t){return pe(this._locales||this._locale,e,t)}};function kt(s={}){return new ve(s)}var y=kt();var f=function(s,e,t,r){if(t==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?s!==e||!r:!e.has(s))throw new TypeError("Cannot read private member from an object whose class did not declare it");return t==="m"?r:t==="a"?r.call(s):r?r.value:e.get(s)},g=function(s,e,t,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?s!==e||!i:!e.has(s))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(s,t):i?i.value=t:e.set(s,t),t};function Re(s){var e,t,r,i,l,a,n,u,m,C,L,$,w,T,V,_,I,J,ue;class rt extends s{constructor(...c){var h,p,v;super(...c),e.add(this),this.internals=this.attachInternals(),t.set(this,!1),r.set(this,!1),i.set(this,!1),l.set(this,void 0),a.set(this,void 0),n.set(this,!0),m.set(this,""),C.set(this,()=>{g(this,i,!0,"f"),g(this,t,!0,"f"),f(this,e,"m",_).call(this)}),L.set(this,()=>{g(this,t,!1,"f"),f(this,e,"m",I).call(this,this.shouldFormValueUpdate()?f(this,m,"f"):""),!this.validity.valid&&f(this,i,"f")&&g(this,r,!0,"f");let S=f(this,e,"m",_).call(this);this.validationMessageCallback&&this.validationMessageCallback(S?this.internals.validationMessage:"")}),$.set(this,()=>{var S;f(this,n,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),g(this,n,!1,"f")),g(this,i,!0,"f"),g(this,r,!0,"f"),f(this,e,"m",_).call(this),(S=this===null||this===void 0?void 0:this.validationMessageCallback)===null||S===void 0||S.call(this,this.showError?this.internals.validationMessage:"")}),w.set(this,void 0),T.set(this,!1),V.set(this,Promise.resolve()),(h=this.addEventListener)===null||h===void 0||h.call(this,"focus",f(this,C,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"blur",f(this,L,"f")),(v=this.addEventListener)===null||v===void 0||v.call(this,"invalid",f(this,$,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let c=this.validators.map(v=>v.attribute).flat(),h=super.observedAttributes||[];return[...new Set([...h,...c])]}static getValidator(c){return this.validators.find(h=>h.attribute===c)||null}static getValidators(c){return this.validators.filter(h=>{var p;if(h.attribute===c||!((p=h.attribute)===null||p===void 0)&&p.includes(c))return!0})}get form(){return this.internals.form}get showError(){return f(this,e,"m",_).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(c,h,p){var v;(v=super.attributeChangedCallback)===null||v===void 0||v.call(this,c,h,p);let G=this.constructor.getValidators(c);G!=null&&G.length&&this.validationTarget&&this.setValue(f(this,m,"f"))}setValue(c){var h;g(this,r,!1,"f"),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,""),g(this,m,c,"f");let v=this.shouldFormValueUpdate()?c:null;this.internals.setFormValue(v),f(this,e,"m",I).call(this,v),this.valueChangedCallback&&this.valueChangedCallback(v),f(this,e,"m",_).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(c=>c(f(this,V,"f")))}formResetCallback(){var c,h;g(this,i,!1,"f"),g(this,r,!1,"f"),f(this,e,"m",_).call(this),(c=this.resetFormControl)===null||c===void 0||c.call(this),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,f(this,e,"m",_).call(this)?this.validationMessage:"")}}return t=new WeakMap,r=new WeakMap,i=new WeakMap,l=new WeakMap,a=new WeakMap,n=new WeakMap,m=new WeakMap,C=new WeakMap,L=new WeakMap,$=new WeakMap,w=new WeakMap,T=new WeakMap,V=new WeakMap,e=new WeakSet,u=function(){let c=this.getRootNode(),h=`${this.localName}[name="${this.getAttribute("name")}"]`;return c.querySelectorAll(h)},_=function(){if(this.hasAttribute("disabled"))return!1;let c=f(this,r,"f")||f(this,i,"f")&&!this.validity.valid&&!f(this,t,"f");return c&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),c},I=function(c){let h=this.constructor,p={},v=h.validators,S=[],G=v.some(M=>M.isValid instanceof Promise);f(this,T,"f")||(g(this,V,new Promise(M=>{g(this,w,M,"f")}),"f"),g(this,T,!0,"f")),f(this,l,"f")&&(f(this,l,"f").abort(),g(this,a,f(this,l,"f"),"f"));let K=new AbortController;g(this,l,K,"f");let X,ke=!1;v.length&&(v.forEach(M=>{let de=M.key||"customError",H=M.isValid(this,c,K.signal);H instanceof Promise?(S.push(H),H.then(he=>{he!=null&&(p[de]=!he,X=f(this,e,"m",ue).call(this,M,c),f(this,e,"m",J).call(this,p,X))})):(p[de]=!H,this.validity[de]!==!H&&(ke=!0),!H&&!X&&(X=f(this,e,"m",ue).call(this,M,c)))}),Promise.allSettled(S).then(()=>{var M;K!=null&&K.signal.aborted||(g(this,T,!1,"f"),(M=f(this,w,"f"))===null||M===void 0||M.call(this))}),(ke||!G)&&f(this,e,"m",J).call(this,p,X))},J=function(c,h){if(this.validationTarget)this.internals.setValidity(c,h,this.validationTarget),g(this,n,!1,"f");else{if(this.internals.setValidity(c,h),this.internals.validity.valid)return;g(this,n,!0,"f")}},ue=function(c,h){if(this.validityCallback){let p=this.validityCallback(c.key||"customError");if(p)return p}return c.message instanceof Function?c.message(this,h):c.message},rt}import{css as At,html as re,LitElement as Nt,nothing as we}from"lit";import{property as j}from"lit/decorators.js";import{ifDefined as Me}from"lit/directives/if-defined.js";var Lt=["en","nb","fi","da","sv"],ye="en",se=s=>Lt.find(e=>s===e||s.toLowerCase().includes(e))||ye;function ze(){if(typeof window=="undefined"){let s=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return se(s)}try{let s=We(document);if(s)return se(s);let e=It();if(e)return se(e);let t=We(Ge());return t?se(t):ye}catch(s){return console.warn("could not detect locale, falling back to source locale",s),ye}}var Je=(s,e,t,r,i)=>{y.load("en",s),y.load("nb",e),y.load("fi",t),y.load("da",r),y.load("sv",i);let l=ze();y.activate(l),Be(),Vt()},Tt="warp-i18n-change";function Be(){typeof window!="undefined"&&window.dispatchEvent(new Event(Tt))}var je=!1;function Vt(){if(je||typeof window=="undefined"||!(document!=null&&document.documentElement))return;je=!0;let s=()=>{let i=ze();y.locale!==i&&(y.activate(i),Be())},e=new MutationObserver(i=>{for(let l of i)if(l.type==="attributes"&&l.attributeName==="lang"){s();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=Ge();t&&t.documentElement&&t!==document&&e.observe(t.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=Ot();r&&e.observe(r,{attributes:!0,attributeFilter:["lang"]})}function Ge(){var s,e;try{return(e=(s=window.parent)==null?void 0:s.document)!=null?e:null}catch(t){return null}}function We(s){var e,t;try{return(t=(e=s==null?void 0:s.documentElement)==null?void 0:e.lang)!=null?t:""}catch(r){return""}}function Ot(){var s;try{return(s=window.frameElement)!=null?s:null}catch(e){return null}}function It(){var s,e,t;try{return(t=(e=(s=window.frameElement)==null?void 0:s.getAttribute)==null?void 0:e.call(s,"lang"))!=null?t:""}catch(r){return""}}var Ke=JSON.parse('{"checkbox-group.validation.required":["Mindst \xE9n valgt mulighed er p\xE5kr\xE6vet."],"checkbox-group.label.optional":["Valgfri"]}');var Xe=JSON.parse('{"checkbox-group.validation.required":["At least one selection is required."],"checkbox-group.label.optional":["Optional"]}');var Qe=JSON.parse('{"checkbox-group.validation.required":["V\xE4hint\xE4\xE4n yksi valinta vaaditaan."],"checkbox-group.label.optional":["Valinnainen"]}');var Ze=JSON.parse('{"checkbox-group.validation.required":["Minst ett valg er p\xE5krevd."],"checkbox-group.label.optional":["Valgfri"]}');var Ye=JSON.parse('{"checkbox-group.validation.required":["Minst ett val kr\xE4vs."],"checkbox-group.label.optional":["Valfritt"]}');Je(Xe,Ze,Qe,Ke,Ye);var Pt=()=>y._({id:"checkbox-group.validation.required",message:"At least one selection is required.",comment:"Shown when required checkbox group has no selections"}),W,Z,U,z,ae,oe,le,o,ie,ce,Ce,Ee,ne,xe,Q,et,tt,Fe,st,q,Se,F=class extends Re(Nt){constructor(){super(...arguments);x(this,o);x(this,W,!1);x(this,Z,!1);x(this,U,!1);x(this,z);x(this,ae,()=>{d(this,o,ie).call(this),d(this,o,q).call(this),this.requestUpdate()});x(this,oe,()=>{d(this,o,ie).call(this),d(this,o,q).call(this),this.requestUpdate()});x(this,le,()=>{d(this,o,Ee).call(this),d(this,o,q).call(this),this.requestUpdate()});x(this,ce,()=>{this.requestUpdate()})}render(){let t=d(this,o,Ce).call(this)>0,i=this.required&&!t&&E(this,W),l=this.invalid||i,a=l?d(this,o,et).call(this):this.helpText,n=a?"checkbox-group__help":void 0,u=this.label?"checkbox-group__label":void 0,m=l?"true":void 0;return re`
+      <div class="wrapper">
+        ${this.label?re`
+              <div class="label" id="${u}">
+                <span>${this.label}</span>
+                ${this.optional?re`
+                      <span class="optional">
+                        ${y._({id:"checkbox-group.label.optional",message:"Optional",comment:"Shown behind label when marked as optional"})}
+                      </span>
+                    `:we}
+              </div>
+            `:we}
+        <div
+          class="checkbox-group"
+          role="group"
+          aria-labelledby=${Me(u)}
+          aria-describedby=${Me(n)}
+          aria-invalid=${Me(m)}
+        >
+          <slot></slot>
+        </div>
+        ${a?re`<div class="${l?"help-text error":"help-text"}" id="${n}">${a}</div>`:we}
+      </div>
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("change",E(this,ae)),this.addEventListener("invalid",E(this,oe)),this.addEventListener("slotchange",E(this,le)),N(this,z,y.on("change",E(this,ce))),this.setValue(null),d(this,o,Se).call(this)}disconnectedCallback(){var t;(t=E(this,z))==null||t.call(this),N(this,z,void 0),super.disconnectedCallback()}checkValidity(){return d(this,o,q).call(this),this.internals.checkValidity()}reportValidity(){return d(this,o,ie).call(this),d(this,o,q).call(this),this.internals.checkValidity()}focus(t){let r=d(this,o,xe).call(this);if(r!=null&&r.focus){r.focus(t);return}HTMLElement.prototype.focus.call(this,t)}updated(t){super.updated(t),d(this,o,tt).call(this,t)&&(t.has("name")&&d(this,o,Ee).call(this),d(this,o,q).call(this))}};W=new WeakMap,Z=new WeakMap,U=new WeakMap,z=new WeakMap,ae=new WeakMap,oe=new WeakMap,le=new WeakMap,o=new WeakSet,ie=function(){N(this,W,!0)},ce=new WeakMap,Ce=function(){return d(this,o,Q).call(this).filter(t=>t.checked).length},Ee=function(){if(this.name)for(let t of d(this,o,Q).call(this)){let r=t;r&&typeof r=="object"&&!r.name&&(r.name=this.name)}},ne=function(t){for(let r of d(this,o,Q).call(this))"invalid"in r&&(r.invalid=t)},xe=function(){return d(this,o,Q).call(this)[0]},Q=function(){var r,i;let t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");return(i=t==null?void 0:t.assignedElements({flatten:!0}))!=null?i:[]},et=function(){return Pt()},tt=function(t){return t.has("invalid")||t.has("required")||t.has("helpText")||t.has("name")},Fe=function(t){let r=d(this,o,xe).call(this);this.internals.setValidity(t," ",r!=null?r:void 0)},st=function(t){if(!(this.hasAttribute("tabindex")&&!E(this,U))){if(t){this.tabIndex=0,N(this,U,!0);return}E(this,U)&&(this.removeAttribute("tabindex"),N(this,U,!1))}},q=function(){d(this,o,Se).call(this);let t=d(this,o,Ce).call(this)>0,r=this.required&&!t,i=this.invalid,l=r&&E(this,W),a=i||l;if(d(this,o,st).call(this,a),r){d(this,o,Fe).call(this,{valueMissing:!0}),d(this,o,ne).call(this,a);return}if(i){d(this,o,Fe).call(this,{customError:!0}),d(this,o,ne).call(this,!0);return}this.internals.setValidity({}),d(this,o,ne).call(this,!1)},Se=function(){E(this,Z)||this.internals.form&&(this.name&&this.name.trim().length>0||(console.warn('w-checkbox-group: "name" is required for form submission.'),N(this,Z,!0)))},F.styles=At`
+    .wrapper {
+      display: inline-flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .checkbox-group {
+      display: grid;
+      gap: 16px;
+    }
+
+    .label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: var(--w-font-size-s);
+      line-height: var(--w-line-height-s);
+      font-weight: 700;
+      color: var(--w-s-color-text);
+    }
+
+    .optional {
+      font-weight: 400;
+      color: var(--w-s-color-text-subtle);
+    }
+
+    .help-text {
+      display: block;
+      font-size: var(--w-font-size-xs);
+      line-height: var(--w-line-height-xs);
+      color: var(--w-s-color-text-subtle);
+    }
+
+    .error {
+      color: var(--w-s-color-text-negative);
+    }
+  `,A([j({type:String,reflect:!0})],F.prototype,"label",2),A([j({type:String,reflect:!0})],F.prototype,"name",2),A([j({type:Boolean,reflect:!0})],F.prototype,"optional",2),A([j({type:String,reflect:!0,attribute:"help-text"})],F.prototype,"helpText",2),A([j({type:Boolean,reflect:!0})],F.prototype,"required",2),A([j({type:Boolean,reflect:!0})],F.prototype,"invalid",2);customElements.get("w-checkbox-group")||customElements.define("w-checkbox-group",F);export{F as WCheckboxGroup};
+//# sourceMappingURL=checkbox-group.js.map