@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-radio-Bg02ckzC.js

@@ -0,0 +1,233 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+//#region src/components/radio-group/pk-radio.styles.ts
+var pkRadioStyles = css`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        :host([disabled]) {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .item {
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+            user-select: none;
+            position: relative;
+            margin: 0;
+        }
+
+        :host([disabled]) .item {
+            cursor: not-allowed;
+        }
+
+        .item--with-label {
+            gap: 0.5rem;
+        }
+
+        .control {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1rem;
+            height: 1rem;
+            border: 1px solid var(--pk-color-slate-400);
+            border-radius: 9999px;
+            background: var(--pk-color-white);
+            transition: border-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        .item:focus-visible .control,
+        :host([data-focus-visible]) .control {
+            border-color: var(--pk-color-sky-600);
+            box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 4px 0 hsl(from var(--pk-color-sky-600) h s l / 0.7);
+        }
+
+        :host([invalid]) .control {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([invalid]:focus-visible) .control,
+        :host([invalid][data-focus-visible]) .control {
+            box-shadow: 0 0 0 1px var(--pk-color-rose-600), 0 0 4px 0 hsl(from var(--pk-color-rose-600) h s l / 0.7);
+        }
+
+        :host([checked]) .control {
+            background: var(--pk-color-gray-50);
+            color: #1f2933;
+        }
+
+        .indicator {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            color: currentcolor;
+        }
+
+        .indicator-dot {
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 9999px;
+            background: currentcolor;
+            transition: opacity 0.12s ease, transform 0.12s ease;
+        }
+
+        :host(:not([checked])) .indicator-dot {
+            opacity: 0;
+            transform: scale(0);
+        }
+
+        .input {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+            opacity: 0;
+            appearance: none;
+        }
+
+        .label {
+            line-height: var(--pk-line-height);
+            /* Match checkbox / form-control labels (gray-700). */
+            color: var(--pk-color-gray-700);
+        }
+
+        .label.is-empty {
+            display: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/radio-group/pk-radio.ts
+var PkRadio = class PkRadio extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.checked = false;
+		this.disabled = false;
+		this.invalid = false;
+		this.required = false;
+		this.tabIndex = -1;
+		this.ariaLabel = null;
+		this.forceDisabled = false;
+		this.hasDefaultSlotContent = false;
+	}
+	static {
+		this.styles = pkRadioStyles;
+	}
+	updated(changed) {
+		if (this.input && changed.has("checked")) this.input.checked = this.checked;
+		if (this.input && changed.has("tabIndex")) this.input.tabIndex = this.tabIndex;
+	}
+	focusControl(options) {
+		this.input.focus(options);
+	}
+	defaultSlotChanged(event) {
+		const slot = event.target;
+		this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {
+			if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim();
+			return node.nodeType === Node.ELEMENT_NODE;
+		});
+	}
+	handleChange(event) {
+		event.stopPropagation();
+		const input = event.target;
+		if (this.disabled || this.forceDisabled || !input.checked) return;
+		this.dispatchEvent(new CustomEvent("pk-radio-select", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const isDisabled = this.disabled || this.forceDisabled;
+		return html`
+            <label
+                part="base"
+                class=${classMap({
+			item: true,
+			"pk-radio-group__item": true,
+			"item--with-label": this.hasDefaultSlotContent
+		})}
+                data-state=${this.checked ? "checked" : nothing}
+                ?data-disabled=${isDisabled}
+                aria-disabled=${isDisabled ? "true" : nothing}
+            >
+                <span part="control" class="control pk-radio-group__control">
+                    <span part="indicator" class="indicator pk-radio-group__indicator">
+                        <span class="indicator-dot pk-radio-group__indicator-dot"></span>
+                    </span>
+                </span>
+                <input
+                    part="input"
+                    class="input"
+                    type="radio"
+                    .checked=${this.checked}
+                    ?disabled=${isDisabled}
+                    ?required=${this.required}
+                    value=${this.value}
+                    tabindex=${this.tabIndex}
+                    aria-label=${this.ariaLabel ?? nothing}
+                    aria-invalid=${this.invalid ? "true" : nothing}
+                    aria-checked=${this.checked ? "true" : "false"}
+                    @change=${this.handleChange}
+                />
+                <span
+                    class=${classMap({
+			label: true,
+			"is-empty": !this.hasDefaultSlotContent
+		})}
+                >
+                    <slot @slotchange=${this.defaultSlotChanged}></slot>
+                </span>
+            </label>
+        `;
+	}
+};
+__decorate([property()], PkRadio.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkRadio.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkRadio.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkRadio.prototype, "invalid", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkRadio.prototype, "required", void 0);
+__decorate([property({ type: Number })], PkRadio.prototype, "tabIndex", void 0);
+__decorate([property({ attribute: "aria-label" })], PkRadio.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], PkRadio.prototype, "forceDisabled", void 0);
+__decorate([query(".input")], PkRadio.prototype, "input", void 0);
+__decorate([state()], PkRadio.prototype, "hasDefaultSlotContent", void 0);
+PkRadio = __decorate([customElement("pk-radio")], PkRadio);
+//#endregion
+export { PkRadio as t };
+
+//# sourceMappingURL=pk-radio-Bg02ckzC.js.map

package/dist/chunks/pk-radio-Bg02ckzC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-radio-Bg02ckzC.js","names":[],"sources":["../../src/components/radio-group/pk-radio.styles.ts","../../src/components/radio-group/pk-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            vertical-align: middle;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n        }\n\n        :host([disabled]) {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .item {\n            display: inline-flex;\n            align-items: center;\n            cursor: pointer;\n            user-select: none;\n            position: relative;\n            margin: 0;\n        }\n\n        :host([disabled]) .item {\n            cursor: not-allowed;\n        }\n\n        .item--with-label {\n            gap: 0.5rem;\n        }\n\n        .control {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 1rem;\n            height: 1rem;\n            border: 1px solid var(--pk-color-slate-400);\n            border-radius: 9999px;\n            background: var(--pk-color-white);\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        .item:focus-visible .control,\n        :host([data-focus-visible]) .control {\n            border-color: var(--pk-color-sky-600);\n            box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 4px 0 hsl(from var(--pk-color-sky-600) h s l / 0.7);\n        }\n\n        :host([invalid]) .control {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]:focus-visible) .control,\n        :host([invalid][data-focus-visible]) .control {\n            box-shadow: 0 0 0 1px var(--pk-color-rose-600), 0 0 4px 0 hsl(from var(--pk-color-rose-600) h s l / 0.7);\n        }\n\n        :host([checked]) .control {\n            background: var(--pk-color-gray-50);\n            color: #1f2933;\n        }\n\n        .indicator {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            color: currentcolor;\n        }\n\n        .indicator-dot {\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 9999px;\n            background: currentcolor;\n            transition: opacity 0.12s ease, transform 0.12s ease;\n        }\n\n        :host(:not([checked])) .indicator-dot {\n            opacity: 0;\n            transform: scale(0);\n        }\n\n        .input {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n            opacity: 0;\n            appearance: none;\n        }\n\n        .label {\n            line-height: var(--pk-line-height);\n            /* Match checkbox / form-control labels (gray-700). */\n            color: var(--pk-color-gray-700);\n        }\n\n        .label.is-empty {\n            display: none;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkRadioStyles } from './pk-radio.styles.js';\n\n/**\n * Radio button — use inside `pk-radio-group`.\n *\n * @slot - Visible label text\n *\n * @csspart base - Root label element\n * @csspart input - Native radio input\n * @csspart control - Visual radio circle\n * @csspart indicator - Indicator container\n */\n@customElement('pk-radio')\nexport class PkRadio extends PkElement {\n    static override styles = pkRadioStyles;\n\n    @property()\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ type: Boolean, reflect: true })\n    required = false;\n\n    @property({ type: Number })\n    tabIndex = -1;\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    /** Set by `pk-radio-group` when the group is disabled. */\n    @property({ type: Boolean, attribute: false })\n    forceDisabled = false;\n\n    @query('.input')\n    private input!: HTMLInputElement;\n\n    @state()\n    private hasDefaultSlotContent = false;\n\n    override updated(changed: PropertyValues): void {\n        if (this.input && changed.has('checked')) {\n            this.input.checked = this.checked;\n        }\n\n        if (this.input && changed.has('tabIndex')) {\n            this.input.tabIndex = this.tabIndex;\n        }\n    }\n\n    focusControl(options?: FocusOptions): void {\n        this.input.focus(options);\n    }\n\n    private defaultSlotChanged(event: Event): void {\n        const slot = event.target as HTMLSlotElement;\n        this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                return node.textContent?.trim();\n            }\n\n            return node.nodeType === Node.ELEMENT_NODE;\n        });\n    }\n\n    private handleChange(event: Event): void {\n        event.stopPropagation();\n        const input = event.target as HTMLInputElement;\n\n        if (this.disabled || this.forceDisabled || !input.checked) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-radio-select', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    override render() {\n        const isDisabled = this.disabled || this.forceDisabled;\n\n        return html`\n            <label\n                part=\"base\"\n                class=${classMap({\n                    item: true,\n                    'pk-radio-group__item': true,\n                    'item--with-label': this.hasDefaultSlotContent,\n                })}\n                data-state=${this.checked ? 'checked' : nothing}\n                ?data-disabled=${isDisabled}\n                aria-disabled=${isDisabled ? 'true' : nothing}\n            >\n                <span part=\"control\" class=\"control pk-radio-group__control\">\n                    <span part=\"indicator\" class=\"indicator pk-radio-group__indicator\">\n                        <span class=\"indicator-dot pk-radio-group__indicator-dot\"></span>\n                    </span>\n                </span>\n                <input\n                    part=\"input\"\n                    class=\"input\"\n                    type=\"radio\"\n                    .checked=${this.checked}\n                    ?disabled=${isDisabled}\n                    ?required=${this.required}\n                    value=${this.value}\n                    tabindex=${this.tabIndex}\n                    aria-label=${this.ariaLabel ?? nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-checked=${this.checked ? 'true' : 'false'}\n                    @change=${this.handleChange}\n                />\n                <span\n                    class=${classMap({\n                        label: true,\n                        'is-empty': !this.hasDefaultSlotContent,\n                    })}\n                >\n                    <slot @slotchange=${this.defaultSlotChanged}></slot>\n                </span>\n            </label>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-radio': PkRadio;\n    }\n}\n"],"mappings":";;;;;AAEA,IAAa,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiBzB,IAAA,UAAA,MAAM,gBAAgB,UAAU;;;eAI3B;iBAGE;kBAGC;iBAGD;kBAGC;kBAGA;mBAGgB;uBAIX;+BAMgB;;;gBA/BP;;CAiCzB,QAAiB,SAA+B;AAC5C,MAAI,KAAK,SAAS,QAAQ,IAAI,UAAU,CACpC,MAAK,MAAM,UAAU,KAAK;AAG9B,MAAI,KAAK,SAAS,QAAQ,IAAI,WAAW,CACrC,MAAK,MAAM,WAAW,KAAK;;CAInC,aAAa,SAA8B;AACvC,OAAK,MAAM,MAAM,QAAQ;;CAG7B,mBAA2B,OAAoB;EAC3C,MAAM,OAAO,MAAM;AACnB,OAAK,wBAAwB,KAAK,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;AAC9E,OAAI,KAAK,aAAa,KAAK,UACvB,QAAO,KAAK,aAAa,MAAM;AAGnC,UAAO,KAAK,aAAa,KAAK;IAChC;;CAGN,aAAqB,OAAoB;AACrC,QAAM,iBAAiB;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,KAAK,YAAY,KAAK,iBAAiB,CAAC,MAAM,QAC9C;AAGJ,OAAK,cAAc,IAAI,YAAY,mBAAmB;GAClD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,SAAkB;EACd,MAAM,aAAa,KAAK,YAAY,KAAK;AAEzC,SAAO,IAAI;;;wBAGK,SAAS;GACb,MAAM;GACN,wBAAwB;GACxB,oBAAoB,KAAK;GAC5B,CAAC,CAAC;6BACU,KAAK,UAAU,YAAY,QAAQ;iCAC/B,WAAW;gCACZ,aAAa,SAAS,QAAQ;;;;;;;;;;;+BAW/B,KAAK,QAAQ;gCACZ,WAAW;gCACX,KAAK,SAAS;4BAClB,KAAK,MAAM;+BACR,KAAK,SAAS;iCACZ,KAAK,aAAa,QAAQ;mCACxB,KAAK,UAAU,SAAS,QAAQ;mCAChC,KAAK,UAAU,SAAS,QAAQ;8BACrC,KAAK,aAAa;;;4BAGpB,SAAS;GACb,OAAO;GACP,YAAY,CAAC,KAAK;GACrB,CAAC,CAAC;;wCAEiB,KAAK,mBAAmB;;;;;;YA/G3D,UAAU,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAIrC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG7C,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGf,OAAO,CAAA,EAAA,QAAA,WAAA,yBAAA,KAAA,EAAA;sBAhCX,cAAc,WAAW,CAAA,EAAA,QAAA"}

package/dist/chunks/pk-radio-group-B5rps9G4.js

@@ -0,0 +1,253 @@
+import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
+import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
+import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+//#region src/components/radio-group/pk-radio-group.styles.ts
+var pkRadioGroupStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .group {
+            display: grid;
+            gap: 0.375rem;
+        }
+
+        .group--horizontal {
+            grid-auto-flow: column;
+            grid-auto-columns: max-content;
+            align-items: center;
+        }
+    }
+`;
+//#endregion
+//#region src/components/radio-group/pk-radio-group.ts
+var PkRadioGroup = class PkRadioGroup extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["change"];
+		this.hasSlotController = new HasSlotController(this, "instructions", "hint", "label");
+		this._value = null;
+		this.defaultValue = "";
+		this.orientation = "vertical";
+		this.invalid = false;
+		this.label = "";
+		this.instructions = "";
+		this.ariaLabel = null;
+		this.items = [];
+		this.syncItems = () => {
+			this.items = this.getAllRadios();
+			this.applySelection();
+		};
+		this.handleRadioClick = (event) => {
+			const clickedRadio = event.target.closest("pk-radio");
+			if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) return;
+			const oldValue = this.value;
+			this.value = clickedRadio.value;
+			this.applySelection();
+			if (this.value !== oldValue) this.emitValueChange();
+		};
+		this.handleKeyDown = (event) => {
+			if (![
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				" ",
+				"Home",
+				"End"
+			].includes(event.key) || this.disabled) return;
+			const radios = this.getEnabledItems();
+			if (radios.length === 0) return;
+			event.preventDefault();
+			const oldValue = this.value;
+			const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+			let index = radios.indexOf(checkedRadio);
+			if (event.key === " ") {} else if (event.key === "Home") index = 0;
+			else if (event.key === "End") index = radios.length - 1;
+			else {
+				const increment = ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+				index += increment;
+				if (index < 0) index = radios.length - 1;
+				if (index >= radios.length) index = 0;
+			}
+			this.value = radios[index].value;
+			this.applySelection();
+			radios[index].focusControl();
+			if (this.value !== oldValue) this.emitValueChange();
+		};
+	}
+	static {
+		this.shadowRootOptions = {
+			mode: "open",
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = [formControlStyles, pkRadioGroupStyles];
+	}
+	static get validators() {
+		return [...super.validators, RequiredValidator()];
+	}
+	get value() {
+		if (this.valueHasChanged) return this._value ?? "";
+		return this._value ?? this.defaultValue ?? "";
+	}
+	set value(val) {
+		this._value = val == null ? null : String(val);
+		this.valueHasChanged = true;
+	}
+	syncFormValue() {
+		this.setFormValue(this.value || null);
+	}
+	resetToDefaultValue() {
+		this._value = null;
+		this.applySelection();
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") {
+			this.value = state;
+			this.applySelection();
+		}
+	}
+	get validationTarget() {
+		return this.getAllRadios().find((item) => !item.disabled) ?? this.getAllRadios()[0];
+	}
+	connectedCallback() {
+		this.instructions = readLegacyInstructions(this, this.instructions);
+		super.connectedCallback();
+		this.addEventListener("keydown", this.handleKeyDown);
+		this.addEventListener("click", this.handleRadioClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this.handleKeyDown);
+		this.removeEventListener("click", this.handleRadioClick);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("disabled") || changed.has("invalid") || changed.has("name")) this.applySelection();
+		super.updated(changed);
+	}
+	formResetCallback() {
+		this._value = null;
+		super.formResetCallback();
+		this.applySelection();
+	}
+	focus(options) {
+		if (this.disabled) return;
+		const radios = this.getEnabledItems();
+		(radios.find((radio) => radio.checked) ?? radios[0])?.focusControl(options);
+	}
+	getAllRadios() {
+		return [...this.querySelectorAll("pk-radio")];
+	}
+	getEnabledItems() {
+		return this.items.filter((item) => !item.disabled && !this.disabled);
+	}
+	applySelection() {
+		const radios = this.getAllRadios();
+		this.items = radios;
+		const enabled = this.getEnabledItems();
+		const checkedRadio = enabled.find((item) => item.value === this.value);
+		for (const item of radios) {
+			const checked = item.value === this.value;
+			const itemDisabled = item.hasAttribute("disabled") || item.disabled && !item.forceDisabled;
+			item.checked = checked;
+			item.disabled = this.disabled || itemDisabled;
+			item.invalid = this.invalid;
+			item.required = this.required;
+			item.forceDisabled = this.disabled;
+		}
+		if (this.disabled) {
+			for (const item of radios) item.tabIndex = -1;
+			return;
+		}
+		if (checkedRadio) for (const item of enabled) item.tabIndex = item.checked ? 0 : -1;
+		else if (enabled.length > 0) enabled.forEach((item, index) => {
+			item.tabIndex = index === 0 ? 0 : -1;
+		});
+		for (const item of radios.filter((radio) => radio.disabled)) item.tabIndex = -1;
+	}
+	emitValueChange() {
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hasLabelSlot = this.hasSlotController.test("label");
+		const hasInstructions = hasInstructionContent((name, flag) => this.hasSlotController.test(name, flag), this.instructions);
+		const hasLabel = Boolean(this.label) || hasLabelSlot;
+		return html`
+            <div part="form-control" class="form-control">
+                ${hasLabel ? html`
+                        <div part="label" class="form-control__label" id="label">
+                            <slot name="label">${this.label}</slot>
+                        </div>
+                    ` : nothing}
+
+                ${hasInstructions ? html`
+                        <div part="instructions" class="form-control__instructions" id="instructions">
+                            <slot name="instructions">${this.instructions}</slot>
+                            <slot name="hint"></slot>
+                        </div>
+                    ` : nothing}
+
+                <div
+                    part="radios"
+                    class=${classMap({
+			group: true,
+			"pk-radio-group": true,
+			"group--horizontal": this.orientation === "horizontal",
+			"pk-radio-group--horizontal": this.orientation === "horizontal"
+		})}
+                    role="radiogroup"
+                    aria-labelledby=${hasLabel ? "label" : nothing}
+                    aria-label=${!hasLabel ? this.ariaLabel ?? nothing : nothing}
+                    aria-describedby=${hasInstructions ? "instructions" : nothing}
+                    aria-invalid=${this.invalid ? "true" : nothing}
+                    aria-required=${this.required ? "true" : nothing}
+                >
+                    <slot @slotchange=${this.syncItems}></slot>
+                </div>
+            </div>
+        `;
+	}
+};
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], PkRadioGroup.prototype, "defaultValue", void 0);
+__decorate([property({ reflect: true })], PkRadioGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkRadioGroup.prototype, "invalid", void 0);
+__decorate([property()], PkRadioGroup.prototype, "label", void 0);
+__decorate([property()], PkRadioGroup.prototype, "instructions", void 0);
+__decorate([property({ attribute: "aria-label" })], PkRadioGroup.prototype, "ariaLabel", void 0);
+__decorate([query("slot:not([name])")], PkRadioGroup.prototype, "defaultSlot", void 0);
+__decorate([state()], PkRadioGroup.prototype, "items", void 0);
+PkRadioGroup = __decorate([customElement("pk-radio-group")], PkRadioGroup);
+//#endregion
+export { PkRadioGroup as t };
+
+//# sourceMappingURL=pk-radio-group-B5rps9G4.js.map

package/dist/chunks/pk-radio-group-B5rps9G4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-radio-group-B5rps9G4.js","names":[],"sources":["../../src/components/radio-group/pk-radio-group.styles.ts","../../src/components/radio-group/pk-radio-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n        }\n\n        .group {\n            display: grid;\n            gap: 0.375rem;\n        }\n\n        .group--horizontal {\n            grid-auto-flow: column;\n            grid-auto-columns: max-content;\n            align-items: center;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { RequiredValidator } from '../../validators/index.js';\nimport type { PkRadio } from './pk-radio.js';\nimport { pkRadioGroupStyles } from './pk-radio-group.styles.js';\n\nexport type PkRadioGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Radio group —  pattern: light-DOM `pk-radio` children, shared value + validation.\n *\n * @slot label - Group label\n * @slot instructions - Instructions text\n * @slot hint - Alias for `instructions`\n * @slot - `pk-radio` items\n *\n * @csspart form-control - Form control wrapper\n * @csspart label - Label text\n * @csspart radios - Radio items container\n * @csspart instructions - Instructions text\n */\n@customElement('pk-radio-group')\nexport class PkRadioGroup extends PkFormAssociatedElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    static override styles = [formControlStyles, pkRadioGroupStyles];\n\n    static override get validators() {\n        return [...super.validators, RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['change'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n    private _value: string | null = null;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    set value(val: string | null) {\n        this._value = val == null ? null : String(val);\n        this.valueHasChanged = true;\n    }\n\n    /** Default value — reflected as the `value` attribute. */\n    @property({ attribute: 'value', reflect: true })\n    defaultValue = '';\n\n    @property({ reflect: true })\n    orientation: PkRadioGroupOrientation = 'vertical';\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ attribute: 'aria-label' })\n    override ariaLabel: string | null = null;\n\n    @query('slot:not([name])')\n    private defaultSlot!: HTMLSlotElement;\n\n    @state()\n    private items: PkRadio[] = [];\n\n    protected override syncFormValue(): void {\n        this.setFormValue(this.value || null);\n    }\n\n    protected override resetToDefaultValue(): void {\n        this._value = null;\n        this.applySelection();\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.applySelection();\n        }\n    }\n\n    protected override get validationTarget(): HTMLElement | undefined {\n        return this.getAllRadios().find((item) => !item.disabled) ?? this.getAllRadios()[0];\n    }\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n        super.connectedCallback();\n        this.addEventListener('keydown', this.handleKeyDown);\n        this.addEventListener('click', this.handleRadioClick);\n    }\n\n    override disconnectedCallback(): void {\n        this.removeEventListener('keydown', this.handleKeyDown);\n        this.removeEventListener('click', this.handleRadioClick);\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('disabled') || changed.has('invalid') || changed.has('name')) {\n            this.applySelection();\n        }\n\n        super.updated(changed);\n    }\n\n    override formResetCallback(): void {\n        this._value = null;\n        super.formResetCallback();\n        this.applySelection();\n    }\n\n    override focus(options?: FocusOptions): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const radios = this.getEnabledItems();\n        const checked = radios.find((radio) => radio.checked);\n        const target = checked ?? radios[0];\n        target?.focusControl(options);\n    }\n\n    private getAllRadios(): PkRadio[] {\n        return [...this.querySelectorAll('pk-radio')];\n    }\n\n    private syncItems = (): void => {\n        this.items = this.getAllRadios();\n        this.applySelection();\n    };\n\n    private getEnabledItems(): PkRadio[] {\n        return this.items.filter((item) => !item.disabled && !this.disabled);\n    }\n\n    private applySelection(): void {\n        const radios = this.getAllRadios();\n        this.items = radios;\n\n        const enabled = this.getEnabledItems();\n        const checkedRadio = enabled.find((item) => item.value === this.value);\n\n        for (const item of radios) {\n            const checked = item.value === this.value;\n            // React sets CE booleans as properties, while hand-written HTML uses attributes.\n            // Preserve item-level disabled state from either source, but do not let a prior\n            // group-level disabled pass permanently mark every child disabled.\n            const itemDisabled = item.hasAttribute('disabled') || (item.disabled && !item.forceDisabled);\n            item.checked = checked;\n            item.disabled = this.disabled || itemDisabled;\n            item.invalid = this.invalid;\n            item.required = this.required;\n            item.forceDisabled = this.disabled;\n        }\n\n        if (this.disabled) {\n            for (const item of radios) {\n                item.tabIndex = -1;\n            }\n            return;\n        }\n\n        if (checkedRadio) {\n            for (const item of enabled) {\n                item.tabIndex = item.checked ? 0 : -1;\n            }\n        } else if (enabled.length > 0) {\n            enabled.forEach((item, index) => {\n                item.tabIndex = index === 0 ? 0 : -1;\n            });\n        }\n\n        for (const item of radios.filter((radio) => radio.disabled)) {\n            item.tabIndex = -1;\n        }\n    }\n\n    private handleRadioClick = (event: Event): void => {\n        const clickedRadio = (event.target as HTMLElement).closest('pk-radio') as PkRadio | null;\n\n        if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {\n            return;\n        }\n\n        const oldValue = this.value;\n        this.value = clickedRadio.value;\n        this.applySelection();\n\n        if (this.value !== oldValue) {\n            this.emitValueChange();\n        }\n    };\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Home', 'End'].includes(event.key) || this.disabled) {\n            return;\n        }\n\n        const radios = this.getEnabledItems();\n\n        if (radios.length === 0) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const oldValue = this.value;\n        const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0]!;\n        let index = radios.indexOf(checkedRadio);\n\n        if (event.key === ' ') {\n            // Space selects focused radio without moving\n        } else if (event.key === 'Home') {\n            index = 0;\n        } else if (event.key === 'End') {\n            index = radios.length - 1;\n        } else {\n            const increment = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n            index += increment;\n\n            if (index < 0) {\n                index = radios.length - 1;\n            }\n\n            if (index >= radios.length) {\n                index = 0;\n            }\n        }\n\n        this.value = radios[index]!.value;\n        this.applySelection();\n        radios[index]!.focusControl();\n\n        if (this.value !== oldValue) {\n            this.emitValueChange();\n        }\n    };\n\n    private emitValueChange(): void {\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    override render() {\n        const hasLabelSlot = this.hasSlotController.test('label');\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n        );\n        const hasLabel = Boolean(this.label) || hasLabelSlot;\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel\n                    ? html`\n                        <div part=\"label\" class=\"form-control__label\" id=\"label\">\n                            <slot name=\"label\">${this.label}</slot>\n                        </div>\n                    `\n                    : nothing}\n\n                ${hasInstructions\n                    ? html`\n                        <div part=\"instructions\" class=\"form-control__instructions\" id=\"instructions\">\n                            <slot name=\"instructions\">${this.instructions}</slot>\n                            <slot name=\"hint\"></slot>\n                        </div>\n                    `\n                    : nothing}\n\n                <div\n                    part=\"radios\"\n                    class=${classMap({\n                        group: true,\n                        'pk-radio-group': true,\n                        'group--horizontal': this.orientation === 'horizontal',\n                        'pk-radio-group--horizontal': this.orientation === 'horizontal',\n                    })}\n                    role=\"radiogroup\"\n                    aria-labelledby=${hasLabel ? 'label' : nothing}\n                    aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n                    aria-describedby=${hasInstructions ? 'instructions' : nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-required=${this.required ? 'true' : nothing}\n                >\n                    <slot @slotchange=${this.syncItems}></slot>\n                </div>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-radio-group': PkRadioGroup;\n    }\n}\n"],"mappings":"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"}