@skdx/web-components 0.27.0 → 0.29.0

package/dist/checkbox-card/CheckboxCardLabel.d.cts

@@ -1,16 +1,7 @@
-import { LitElement } from 'lit';
+import { SkdxSelectionCardPartBase } from '../internal/selection-card.cjs';
 /**
- * `<skdx-checkbox-card-label>` — the card's title line, and the control's
- * accessible name.
- *
- * It is not a `<label>` element: the card root already behaves as one, and the
- * control is named by `aria-labelledby` instead. The root gives this part an id
- * (via `internal/ids`) and points the control at it while this part is present —
- * leave it out and the control has no accessible name at all, so supply an
- * `aria-label` on the control in that case.
- *
- * Slotted content stays in the light DOM, so assistive tech reads the real text
- * rather than a shadow copy of it.
+ * The card's title and the control's accessible name via `aria-labelledby` —
+ * optional, but supply `aria-label` if omitted.
  *
  * @example
  * ```html
@@ -20,12 +11,8 @@ import { LitElement } from 'lit';
  * </skdx-checkbox-card>
  * ```
  */
-export declare class SkdxCheckboxCardLabel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private rootEl;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxCheckboxCardLabel extends SkdxSelectionCardPartBase {
+    protected rootSelector: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/checkbox-card/CheckboxCardLabel.d.ts

@@ -1,16 +1,7 @@
-import { LitElement } from 'lit';
+import { SkdxSelectionCardPartBase } from '../internal/selection-card.js';
 /**
- * `<skdx-checkbox-card-label>` — the card's title line, and the control's
- * accessible name.
- *
- * It is not a `<label>` element: the card root already behaves as one, and the
- * control is named by `aria-labelledby` instead. The root gives this part an id
- * (via `internal/ids`) and points the control at it while this part is present —
- * leave it out and the control has no accessible name at all, so supply an
- * `aria-label` on the control in that case.
- *
- * Slotted content stays in the light DOM, so assistive tech reads the real text
- * rather than a shadow copy of it.
+ * The card's title and the control's accessible name via `aria-labelledby` —
+ * optional, but supply `aria-label` if omitted.
  *
  * @example
  * ```html
@@ -20,12 +11,8 @@ import { LitElement } from 'lit';
  * </skdx-checkbox-card>
  * ```
  */
-export declare class SkdxCheckboxCardLabel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private rootEl;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxCheckboxCardLabel extends SkdxSelectionCardPartBase {
+    protected rootSelector: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/checkbox-card/CheckboxCardLabel.js

@@ -1,8 +1 @@
-var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=(l,o,t,r)=>{for(var e=r>1?void 0:r?n(o,t):o,s=l.length-1,a;s>=0;s--)(a=l[s])&&(e=(r?a(o,t,e):a(e))||e);return r&&e&&i(o,t,e),e};import{css as h,html as k,LitElement as m}from"lit";import{customElement as p}from"../internal/define.js";var c=class extends m{constructor(){super(...arguments);this.rootEl=null}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-checkbox-card"),this.rootEl?.syncParts()}disconnectedCallback(){let t=this.rootEl;super.disconnectedCallback(),queueMicrotask(()=>t?.syncParts())}render(){return k`<slot></slot>`}};c.styles=h`
-    :host {
-      display: block;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-  `,c=d([p("skdx-checkbox-card-label","checkbox-card","label")],c);export{c as SkdxCheckboxCardLabel};
+var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=(t,c,a,r)=>{for(var e=r>1?void 0:r?x(c,a):c,l=t.length-1,d;l>=0;l--)(d=t[l])&&(e=(r?d(c,a,e):d(e))||e);return r&&e&&s(c,a,e),e};import{customElement as i}from"../internal/define.js";import{SkdxSelectionCardPartBase as n}from"../internal/selection-card.js";var o=class extends n{constructor(){super(...arguments);this.rootSelector="skdx-checkbox-card"}};o=m([i("skdx-checkbox-card-label","checkbox-card","label")],o);export{o as SkdxCheckboxCardLabel};

package/dist/checkbox-card/index.cjs

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var m=(r,o)=>{for(var e in o)d(r,e,{get:o[e],enumerable:!0})},S=(r,o,e,C)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of f(o))!h.call(r,x)&&x!==e&&d(r,x,{get:()=>o[x],enumerable:!(C=p(o,x))||C.enumerable});return r};var i=r=>S(d({},"__esModule",{value:!0}),r);var n={};m(n,{SkdxCheckboxCard:()=>k.SkdxCheckboxCard,SkdxCheckboxCardControl:()=>t.SkdxCheckboxCardControl,SkdxCheckboxCardDescription:()=>a.SkdxCheckboxCardDescription,SkdxCheckboxCardIndicator:()=>c.SkdxCheckboxCardIndicator,SkdxCheckboxCardLabel:()=>b.SkdxCheckboxCardLabel});module.exports=i(n);var k=require("./CheckboxCard.cjs"),t=require("./CheckboxCardControl.cjs"),a=require("./CheckboxCardDescription.cjs"),c=require("./CheckboxCardIndicator.cjs"),b=require("./CheckboxCardLabel.cjs");0&&(module.exports={SkdxCheckboxCard,SkdxCheckboxCardControl,SkdxCheckboxCardDescription,SkdxCheckboxCardIndicator,SkdxCheckboxCardLabel});
+"use strict";var e=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,o)=>{for(var d in o)e(r,d,{get:o[d],enumerable:!0})},h=(r,o,d,k)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of b(o))!c.call(r,x)&&x!==d&&e(r,x,{get:()=>o[x],enumerable:!(k=a(o,x))||k.enumerable});return r};var m=r=>h(e({},"__esModule",{value:!0}),r);var p={};f(p,{SkdxCheckboxCard:()=>C.SkdxCheckboxCard});module.exports=m(p);var C=require("./CheckboxCard.cjs");0&&(module.exports={SkdxCheckboxCard});

package/dist/checkbox-card/index.d.cts

@@ -1,5 +1 @@
 export { SkdxCheckboxCard } from './CheckboxCard.cjs';
-export { SkdxCheckboxCardControl } from './CheckboxCardControl.cjs';
-export { SkdxCheckboxCardDescription } from './CheckboxCardDescription.cjs';
-export { SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.cjs';
-export { SkdxCheckboxCardLabel } from './CheckboxCardLabel.cjs';

package/dist/checkbox-card/index.d.ts

@@ -1,5 +1 @@
 export { SkdxCheckboxCard } from './CheckboxCard.js';
-export { SkdxCheckboxCardControl } from './CheckboxCardControl.js';
-export { SkdxCheckboxCardDescription } from './CheckboxCardDescription.js';
-export { SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.js';
-export { SkdxCheckboxCardLabel } from './CheckboxCardLabel.js';

package/dist/checkbox-card/index.js

@@ -1 +1 @@
-import{SkdxCheckboxCard as x}from"./CheckboxCard.js";import{SkdxCheckboxCardControl as d}from"./CheckboxCardControl.js";import{SkdxCheckboxCardDescription as k}from"./CheckboxCardDescription.js";import{SkdxCheckboxCardIndicator as a}from"./CheckboxCardIndicator.js";import{SkdxCheckboxCardLabel as b}from"./CheckboxCardLabel.js";export{x as SkdxCheckboxCard,d as SkdxCheckboxCardControl,k as SkdxCheckboxCardDescription,a as SkdxCheckboxCardIndicator,b as SkdxCheckboxCardLabel};
+import{SkdxCheckboxCard as x}from"./CheckboxCard.js";export{x as SkdxCheckboxCard};

package/dist/checkbox-card/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var h=(r,o)=>{for(var e in o)d(r,e,{get:o[e],enumerable:!0})},m=(r,o,e,C)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of p(o))!f.call(r,x)&&x!==e&&d(r,x,{get:()=>o[x],enumerable:!(C=b(o,x))||C.enumerable});return r};var S=r=>m(d({},"__esModule",{value:!0}),r);var i={};h(i,{SkdxCheckboxCardControl:()=>k.SkdxCheckboxCardControl,SkdxCheckboxCardDescription:()=>c.SkdxCheckboxCardDescription,SkdxCheckboxCardIndicator:()=>t.SkdxCheckboxCardIndicator,SkdxCheckboxCardLabel:()=>a.SkdxCheckboxCardLabel});module.exports=S(i);var k=require("./CheckboxCardControl.cjs"),t=require("./CheckboxCardIndicator.cjs"),a=require("./CheckboxCardLabel.cjs"),c=require("./CheckboxCardDescription.cjs");0&&(module.exports={SkdxCheckboxCardControl,SkdxCheckboxCardDescription,SkdxCheckboxCardIndicator,SkdxCheckboxCardLabel});

package/dist/checkbox-card/primitives.d.cts

@@ -0,0 +1,20 @@
+/**
+ * Primitives for `<skdx-checkbox-card>` — import these when the derived anatomy's structure doesn't fit.
+ *
+ * @example
+ * ```ts
+ * import * as CheckboxCard from '@skdx/web-components/primitives/checkbox-card';
+ * ```
+ * ```html
+ * <skdx-checkbox-card name="addons" value="backups">
+ *   <skdx-checkbox-card-control></skdx-checkbox-card-control>
+ *   <skdx-checkbox-card-indicator></skdx-checkbox-card-indicator>
+ *   <skdx-checkbox-card-label>Automated backups</skdx-checkbox-card-label>
+ *   <skdx-checkbox-card-description>Nightly snapshots.</skdx-checkbox-card-description>
+ * </skdx-checkbox-card>
+ * ```
+ */
+export { SkdxCheckboxCardControl } from './CheckboxCardControl.cjs';
+export { SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.cjs';
+export { SkdxCheckboxCardLabel } from './CheckboxCardLabel.cjs';
+export { SkdxCheckboxCardDescription } from './CheckboxCardDescription.cjs';

package/dist/checkbox-card/primitives.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Primitives for `<skdx-checkbox-card>` — import these when the derived anatomy's structure doesn't fit.
+ *
+ * @example
+ * ```ts
+ * import * as CheckboxCard from '@skdx/web-components/primitives/checkbox-card';
+ * ```
+ * ```html
+ * <skdx-checkbox-card name="addons" value="backups">
+ *   <skdx-checkbox-card-control></skdx-checkbox-card-control>
+ *   <skdx-checkbox-card-indicator></skdx-checkbox-card-indicator>
+ *   <skdx-checkbox-card-label>Automated backups</skdx-checkbox-card-label>
+ *   <skdx-checkbox-card-description>Nightly snapshots.</skdx-checkbox-card-description>
+ * </skdx-checkbox-card>
+ * ```
+ */
+export { SkdxCheckboxCardControl } from './CheckboxCardControl.js';
+export { SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.js';
+export { SkdxCheckboxCardLabel } from './CheckboxCardLabel.js';
+export { SkdxCheckboxCardDescription } from './CheckboxCardDescription.js';

package/dist/checkbox-card/primitives.js

@@ -0,0 +1 @@
+import{SkdxCheckboxCardControl as x}from"./CheckboxCardControl.js";import{SkdxCheckboxCardIndicator as d}from"./CheckboxCardIndicator.js";import{SkdxCheckboxCardLabel as k}from"./CheckboxCardLabel.js";import{SkdxCheckboxCardDescription as a}from"./CheckboxCardDescription.js";export{x as SkdxCheckboxCardControl,a as SkdxCheckboxCardDescription,d as SkdxCheckboxCardIndicator,k as SkdxCheckboxCardLabel};

package/dist/checkbox-group/CheckboxGroup.cjs

@@ -1,5 +1 @@
-"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var _=(t,s)=>{for(var e in s)u(t,e,{get:s[e],enumerable:!0})},y=(t,s,e,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of g(s))!b.call(t,r)&&r!==e&&u(t,r,{get:()=>s[r],enumerable:!(i=c(s,r))||i.enumerable});return t};var A=t=>y(u({},"__esModule",{value:!0}),t),a=(t,s,e,i)=>{for(var r=i>1?void 0:i?c(s,e):s,d=t.length-1,h;d>=0;d--)(h=t[d])&&(r=(i?h(s,e,r):h(r))||r);return i&&r&&u(s,e,r),r};var P={};_(P,{SkdxCheckboxGroup:()=>l,getSelectAllChecked:()=>p});module.exports=A(P);var o=require("lit"),n=require("lit/decorators.js"),v=require("../internal/define.cjs"),m=require("../internal/form-associated.cjs");var f={fromAttribute(t){return t===null?void 0:t.split(",").filter(Boolean)},toAttribute(t){return t===void 0?null:t.join(",")}},V="skdx-checkbox-group-item:not([data-disabled])";function p(t,s){return t.length>0&&t.every(e=>s.includes(e))?!0:t.some(e=>s.includes(e))?"indeterminate":!1}var l=class extends(0,m.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.invalid=!1;this._parts=[];this._refreshParts=()=>{for(let e of this._parts)e.refresh()}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=[...this.defaultValue??[]]),this.setAttribute("role","group"),this._syncHostAttributes(),this._syncFormState()}getSelectedValues(){return this.value??this._uncontrolledValue??[]}getSelectAllChecked(){return p(this._enabledValues(),this.getSelectedValues())}toggleItem(e,i){if(this.disabled)return;let r=this.getSelectedValues();r.includes(e)!==i&&this._commit(i?[...r,e]:r.filter(d=>d!==e))}toggleAll(){if(this.disabled)return;let e=this.getSelectedValues(),i=this._enabledValues();this._commit(this.getSelectAllChecked()===!0?e.filter(r=>!i.includes(r)):[...e,...i.filter(r=>!e.includes(r))])}registerPart(e){this._parts.push(e),this._refreshParts()}unregisterPart(e){let i=this._parts.indexOf(e);i!==-1&&this._parts.splice(i,1),this._refreshParts()}formResetCallback(){this._commit([...this.defaultValue??[]])}updated(e){this._syncHostAttributes(),(e.has("value")||e.has("required")||e.has("name"))&&this._syncFormState(),(e.has("value")||e.has("disabled")||e.has("required"))&&this._refreshParts()}render(){return o.html`<slot @slotchange=${this._refreshParts}></slot>`}_enabledValues(){return this._parts.filter(e=>typeof e.value=="string"&&!e.disabled).map(e=>e.value)}_commit(e){this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._syncFormState(),this._refreshParts()}_syncHostAttributes(){this.invalid?(this.setAttribute("aria-invalid","true"),this.setAttribute("data-invalid","")):(this.removeAttribute("aria-invalid"),this.removeAttribute("data-invalid")),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}_syncFormState(){let e=this.getSelectedValues();this.setFormValue(this.multiFormValue(e)),this.setValueMissing(this.required&&e.length===0,"Please select at least one option.",this.querySelector(V))}};l.styles=o.css`
-    :host {
-      display: block;
-    }
-  `,a([(0,n.property)({converter:f})],l.prototype,"value",2),a([(0,n.property)({converter:f,attribute:"default-value"})],l.prototype,"defaultValue",2),a([(0,n.property)({type:String,reflect:!0})],l.prototype,"name",2),a([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"required",2),a([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),a([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,"invalid",2),a([(0,n.property)({attribute:"required-message"})],l.prototype,"requiredMessage",2),a([(0,n.state)()],l.prototype,"_uncontrolledValue",2),l=a([(0,v.customElement)("skdx-checkbox-group","checkbox-group","root")],l);0&&(module.exports={SkdxCheckboxGroup,getSelectAllChecked});
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var S=(t,i)=>{for(var e in i)h(t,e,{get:i[e],enumerable:!0})},A=(t,i,e,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of x(i))!P.call(t,r)&&r!==e&&h(t,r,{get:()=>i[r],enumerable:!(s=m(i,r))||s.enumerable});return t};var k=t=>A(h({},"__esModule",{value:!0}),t),a=(t,i,e,s)=>{for(var r=s>1?void 0:s?m(i,e):i,u=t.length-1,c;u>=0;u--)(c=t[u])&&(r=(s?c(i,e,r):c(r))||r);return s&&r&&h(i,e,r),r};var E={};S(E,{SkdxCheckboxGroup:()=>l,getSelectAllChecked:()=>_});module.exports=k(E);var R=require("lit"),o=require("lit/decorators.js"),p=require("../internal/authored.cjs"),g=require("../internal/define.cjs"),d=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),v=require("../internal/ids.cjs"),y=require("../internal/selection-group.cjs"),n=require("./CheckboxGroupAnatomy.cjs");var f={fromAttribute(t){return t===null?void 0:t.split(",").filter(Boolean)},toAttribute(t){return t===void 0?null:t.join(",")}},V="skdx-checkbox-group-item:not([data-disabled])";function _(t,i){return t.length>0&&t.every(e=>i.includes(e))?!0:t.some(e=>i.includes(e))?"indeterminate":!1}var l=class extends y.SkdxSelectionGroupBase{constructor(){super(...arguments);this.fillAnatomy=()=>{(0,p.hasAuthoredParts)(this,n.CHECKBOX_GROUP_ANATOMY_GENERATED,n.CHECKBOX_GROUP_RENDER_SLOTS)||(0,n.fillCheckboxGroupAnatomy)(this),this.refreshParts()}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=[...this.defaultValue??[]]),this.syncHostAttributes(),this._syncFormState(),queueMicrotask(this.fillAnatomy)}getSelectedValues(){return this.value??this._uncontrolledValue??[]}getSelectAllChecked(){return _(this._enabledValues(),this.getSelectedValues())}toggleItem(e,s){if(this.disabled||this.readOnly)return;let r=this.getSelectedValues();r.includes(e)!==s&&(s&&this.isMaxReached()||this._commit(s?[...r,e]:r.filter(u=>u!==e)))}toggleAll(){if(this.disabled||this.readOnly)return;let e=this.getSelectedValues(),s=this._enabledValues();this._commit(this.getSelectAllChecked()===!0?e.filter(r=>!s.includes(r)):[...e,...s.filter(r=>!e.includes(r))].slice(0,this.max??Number.POSITIVE_INFINITY))}isMaxReached(){return this.max!==void 0&&this.getSelectedValues().length>=this.max}itemIds(){return Array.from(this.querySelectorAll("skdx-checkbox-group-item")).map(e=>(0,v.ensureId)(e,"skdx-checkbox-group","item")).join(" ")}registerPart(e){super.registerPart(e),this.refreshParts()}unregisterPart(e){super.unregisterPart(e),this.refreshParts()}formResetCallback(){this._commit([...this.defaultValue??[]])}updated(e){e.has("options")&&this.fillAnatomy(),this.syncHostAttributes(),(e.has("value")||e.has("required")||e.has("name"))&&this._syncFormState(),(e.has("value")||e.has("disabled")||e.has("readOnly")||e.has("max")||e.has("required"))&&this.refreshParts(),(0,d.threadAppearance)(this,{size:this.size},[...(0,d.derivedParts)(this,"skdx-checkbox-group-item"),...(0,d.derivedParts)(this,"skdx-checkbox-group-select-all")])}_enabledValues(){return this.parts.filter(e=>typeof e.value=="string"&&!e.disabled).map(e=>e.value)}_commit(e){this.value===void 0&&(this._uncontrolledValue=e),(0,b.emit)(this,"value-change",e),this._syncFormState(),this.refreshParts()}_syncFormState(){let e=this.getSelectedValues();this.setFormValue(this.multiFormValue(e)),this.setValueMissing(this.required&&e.length===0,"Please select at least one option.",this.querySelector(V))}};a([(0,o.property)({converter:f})],l.prototype,"value",2),a([(0,o.property)({converter:f,attribute:"default-value"})],l.prototype,"defaultValue",2),a([(0,o.property)({type:Number})],l.prototype,"max",2),a([(0,o.property)({type:String,attribute:"data-size"})],l.prototype,"size",2),a([(0,o.state)()],l.prototype,"_uncontrolledValue",2),l=a([(0,g.customElement)("skdx-checkbox-group","checkbox-group","root")],l);0&&(module.exports={SkdxCheckboxGroup,getSelectAllChecked});

package/dist/checkbox-group/CheckboxGroup.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
+import { SkdxSelectionGroupBase } from '../internal/selection-group.cjs';
 /** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
 export type SkdxCheckedState = boolean | 'indeterminate';
 /** A registered part that can be told to re-sync its own host attributes. */
@@ -8,50 +9,28 @@ export interface RefreshableCheckboxGroupPart {
     readonly disabled?: boolean;
 }
 /**
- * The select-all parent's tri-state, derived from the *enabled* items only:
- * a disabled item can neither be checked nor cleared by the parent, so
- * counting it would leave the parent permanently indeterminate. An empty
- * group reads as unchecked rather than "all of nothing is checked".
+ * The select-all parent's tri-state, counting only enabled items; an empty group reads as unchecked.
  * @internal
  */
 export declare function getSelectAllChecked(enabledValues: string[], value: string[]): SkdxCheckedState;
-declare const SkdxCheckboxGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
 /**
- * `<skdx-checkbox-group>` — the Web Components implementation of the shared
- * CheckboxGroup contract (see `@skdx/shared`'s `checkboxGroupContract`).
- * Owns a `string[]` value shared with its `<skdx-checkbox-group-item>`s and
- * the optional `<skdx-checkbox-group-select-all>` parent, which look it up
- * via `this.closest('skdx-checkbox-group')` — the same root/registry pattern
- * `<skdx-radio-group>` uses.
- *
- * `role="group"` sits on the host, which is what a wrapping `<skdx-fieldset>`
- * discovers as its control (it is the first `FIELD_CONTROL_SELECTOR` match in
- * document order, ahead of the items) and names with `aria-labelledby` back
- * to the light-DOM `<legend>`.
- *
- * Form-associated via `ElementInternals` on the **root**, not per-item hidden
- * inputs: with a `name`, `multiFormValue()` submits one entry per checked
- * value, exactly as a `multiple` `<skdx-toggle-group>` does, so
- * `formData.getAll(name)` returns them all. Unlike the other four frameworks
- * this also gives real `valueMissing` validation for `required`.
+ * Owns a `string[]` value shared with items and an optional select-all parent,
+ * form-associated with `role="group"`, and deriving anatomy from `options` when
+ * no items are hand-composed.
  *
  * @example
  * ```html
  * <skdx-checkbox-group name="notify" default-value="email">
- *   <skdx-checkbox-group-select-all>All</skdx-checkbox-group-select-all>
- *   <skdx-checkbox-group-item value="email">Email</skdx-checkbox-group-item>
- *   <skdx-checkbox-group-item value="sms">SMS</skdx-checkbox-group-item>
+ *   <span slot="select-all">All</span>
  * </skdx-checkbox-group>
  * ```
  *
- * @fires value-change - Fires with the new `string[]` whenever the selection changes.
+ * @slot select-all - Label for derived `<skdx-checkbox-group-select-all>` (omit for none).
+ * @fires value-change - Fires with new `string[]` whenever selection changes.
  */
-export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
-    static styles: import("lit").CSSResult;
+export declare class SkdxCheckboxGroup extends SkdxSelectionGroupBase<RefreshableCheckboxGroupPart> {
     /**
-     * Checked item values, for controlled usage. Pair with `value-change`.
+     * Checked item values, for controlled usage, paired with `value-change`.
      * @default undefined
      */
     value?: string[];
@@ -61,45 +40,39 @@ export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
      */
     defaultValue?: string[];
     /**
-     * Name used as the `FormData` entry key for every checked value when inside a `<form>`.
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * Marks the group as required — at least one item must be checked. Reports
-     * `valueMissing` while nothing is checked, and is announced as
-     * `aria-required` on every item: `role="group"` may not carry it, since
-     * `aria-required` is not a global ARIA attribute. @default false
+     * Caps how many items may be checked; at cap, unchecked items gain
+     * `aria-disabled` and `data-max-reached` but keep their tab stops.
+     * @default undefined — no cap.
      */
-    required: boolean;
-    /** Disables every item in the group, and the select-all parent. @default false */
-    disabled: boolean;
-    /** Marks the group as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
-    invalid: boolean;
+    max?: number;
     /**
-     * Replaces the message the browser shows when a `required` group is
-     * submitted with nothing checked. Sealed inside the shadow root otherwise,
-     * so this is the only way to translate it or to state the real rule ("Pick
-     * at least one notification channel.").
-     * @default undefined — keeps `'Please select at least one option.'`
+     * Control scale for every derived `<skdx-checkbox-group-item>` and the derived select-all box.
+     * @default undefined — the part keeps its own value.
      */
-    requiredMessage?: string;
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     private _uncontrolledValue?;
-    private readonly _parts;
     connectedCallback(): void;
+    protected readonly fillAnatomy: () => void;
     /** The currently checked values, resolving controlled vs. uncontrolled. */
     getSelectedValues(): string[];
     /** The tri-state the `<skdx-checkbox-group-select-all>` parent renders. */
     getSelectAllChecked(): SkdxCheckedState;
-    /**
-     * Adds or removes one item's value, firing `value-change`. Both directions
-     * are guarded: removing a value that is not selected is as much a no-op as
-     * adding one that already is, and only the add branch used to be — so
-     * `toggleItem(v, false)` twice dispatched twice.
-     */
+    /** Adds or removes one item's value, firing `value-change`, guarded both ways so a no-op selection change fires nothing. */
     toggleItem(itemValue: string, checked: boolean): void;
     /** Checks every enabled item, or clears them all when they already are. */
     toggleAll(): void;
+    /**
+     * Whether the `max` cap is reached, using `>=` (not `===`) so an oversized value still refuses further checks.
+     * @internal Read by the items.
+     */
+    isMaxReached(): boolean;
+    /**
+     * Space-separated ids of every registered item, for the select-all's
+     * `aria-controls` — without it the parent is announced as an
+     * indistinguishable fifth option in a four-option group.
+     * @internal Read by the select-all parent.
+     */
+    itemIds(): string;
     /** @internal Called by a mounting item or select-all parent. */
     registerPart(part: RefreshableCheckboxGroupPart): void;
     /** @internal Called by an unmounting item or select-all parent. */
@@ -107,11 +80,8 @@ export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
     /** Restores the values the `default-value` attribute declared. */
     formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
-    render(): import("lit").TemplateResult<1>;
     private _enabledValues;
     private _commit;
-    private readonly _refreshParts;
-    private _syncHostAttributes;
     private _syncFormState;
 }
 declare global {
@@ -119,4 +89,3 @@ declare global {
         'skdx-checkbox-group': SkdxCheckboxGroup;
     }
 }
-export {};

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

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
+import { SkdxSelectionGroupBase } from '../internal/selection-group.js';
 /** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
 export type SkdxCheckedState = boolean | 'indeterminate';
 /** A registered part that can be told to re-sync its own host attributes. */
@@ -8,50 +9,28 @@ export interface RefreshableCheckboxGroupPart {
     readonly disabled?: boolean;
 }
 /**
- * The select-all parent's tri-state, derived from the *enabled* items only:
- * a disabled item can neither be checked nor cleared by the parent, so
- * counting it would leave the parent permanently indeterminate. An empty
- * group reads as unchecked rather than "all of nothing is checked".
+ * The select-all parent's tri-state, counting only enabled items; an empty group reads as unchecked.
  * @internal
  */
 export declare function getSelectAllChecked(enabledValues: string[], value: string[]): SkdxCheckedState;
-declare const SkdxCheckboxGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
 /**
- * `<skdx-checkbox-group>` — the Web Components implementation of the shared
- * CheckboxGroup contract (see `@skdx/shared`'s `checkboxGroupContract`).
- * Owns a `string[]` value shared with its `<skdx-checkbox-group-item>`s and
- * the optional `<skdx-checkbox-group-select-all>` parent, which look it up
- * via `this.closest('skdx-checkbox-group')` — the same root/registry pattern
- * `<skdx-radio-group>` uses.
- *
- * `role="group"` sits on the host, which is what a wrapping `<skdx-fieldset>`
- * discovers as its control (it is the first `FIELD_CONTROL_SELECTOR` match in
- * document order, ahead of the items) and names with `aria-labelledby` back
- * to the light-DOM `<legend>`.
- *
- * Form-associated via `ElementInternals` on the **root**, not per-item hidden
- * inputs: with a `name`, `multiFormValue()` submits one entry per checked
- * value, exactly as a `multiple` `<skdx-toggle-group>` does, so
- * `formData.getAll(name)` returns them all. Unlike the other four frameworks
- * this also gives real `valueMissing` validation for `required`.
+ * Owns a `string[]` value shared with items and an optional select-all parent,
+ * form-associated with `role="group"`, and deriving anatomy from `options` when
+ * no items are hand-composed.
  *
  * @example
  * ```html
  * <skdx-checkbox-group name="notify" default-value="email">
- *   <skdx-checkbox-group-select-all>All</skdx-checkbox-group-select-all>
- *   <skdx-checkbox-group-item value="email">Email</skdx-checkbox-group-item>
- *   <skdx-checkbox-group-item value="sms">SMS</skdx-checkbox-group-item>
+ *   <span slot="select-all">All</span>
  * </skdx-checkbox-group>
  * ```
  *
- * @fires value-change - Fires with the new `string[]` whenever the selection changes.
+ * @slot select-all - Label for derived `<skdx-checkbox-group-select-all>` (omit for none).
+ * @fires value-change - Fires with new `string[]` whenever selection changes.
  */
-export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
-    static styles: import("lit").CSSResult;
+export declare class SkdxCheckboxGroup extends SkdxSelectionGroupBase<RefreshableCheckboxGroupPart> {
     /**
-     * Checked item values, for controlled usage. Pair with `value-change`.
+     * Checked item values, for controlled usage, paired with `value-change`.
      * @default undefined
      */
     value?: string[];
@@ -61,45 +40,39 @@ export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
      */
     defaultValue?: string[];
     /**
-     * Name used as the `FormData` entry key for every checked value when inside a `<form>`.
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * Marks the group as required — at least one item must be checked. Reports
-     * `valueMissing` while nothing is checked, and is announced as
-     * `aria-required` on every item: `role="group"` may not carry it, since
-     * `aria-required` is not a global ARIA attribute. @default false
+     * Caps how many items may be checked; at cap, unchecked items gain
+     * `aria-disabled` and `data-max-reached` but keep their tab stops.
+     * @default undefined — no cap.
      */
-    required: boolean;
-    /** Disables every item in the group, and the select-all parent. @default false */
-    disabled: boolean;
-    /** Marks the group as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
-    invalid: boolean;
+    max?: number;
     /**
-     * Replaces the message the browser shows when a `required` group is
-     * submitted with nothing checked. Sealed inside the shadow root otherwise,
-     * so this is the only way to translate it or to state the real rule ("Pick
-     * at least one notification channel.").
-     * @default undefined — keeps `'Please select at least one option.'`
+     * Control scale for every derived `<skdx-checkbox-group-item>` and the derived select-all box.
+     * @default undefined — the part keeps its own value.
      */
-    requiredMessage?: string;
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     private _uncontrolledValue?;
-    private readonly _parts;
     connectedCallback(): void;
+    protected readonly fillAnatomy: () => void;
     /** The currently checked values, resolving controlled vs. uncontrolled. */
     getSelectedValues(): string[];
     /** The tri-state the `<skdx-checkbox-group-select-all>` parent renders. */
     getSelectAllChecked(): SkdxCheckedState;
-    /**
-     * Adds or removes one item's value, firing `value-change`. Both directions
-     * are guarded: removing a value that is not selected is as much a no-op as
-     * adding one that already is, and only the add branch used to be — so
-     * `toggleItem(v, false)` twice dispatched twice.
-     */
+    /** Adds or removes one item's value, firing `value-change`, guarded both ways so a no-op selection change fires nothing. */
     toggleItem(itemValue: string, checked: boolean): void;
     /** Checks every enabled item, or clears them all when they already are. */
     toggleAll(): void;
+    /**
+     * Whether the `max` cap is reached, using `>=` (not `===`) so an oversized value still refuses further checks.
+     * @internal Read by the items.
+     */
+    isMaxReached(): boolean;
+    /**
+     * Space-separated ids of every registered item, for the select-all's
+     * `aria-controls` — without it the parent is announced as an
+     * indistinguishable fifth option in a four-option group.
+     * @internal Read by the select-all parent.
+     */
+    itemIds(): string;
     /** @internal Called by a mounting item or select-all parent. */
     registerPart(part: RefreshableCheckboxGroupPart): void;
     /** @internal Called by an unmounting item or select-all parent. */
@@ -107,11 +80,8 @@ export declare class SkdxCheckboxGroup extends SkdxCheckboxGroup_base {
     /** Restores the values the `default-value` attribute declared. */
     formResetCallback(): void;
     protected updated(changed: PropertyValues): void;
-    render(): import("lit").TemplateResult<1>;
     private _enabledValues;
     private _commit;
-    private readonly _refreshParts;
-    private _syncHostAttributes;
     private _syncFormState;
 }
 declare global {
@@ -119,4 +89,3 @@ declare global {
         'skdx-checkbox-group': SkdxCheckboxGroup;
     }
 }
-export {};

package/dist/checkbox-group/CheckboxGroup.js

@@ -1,5 +1 @@
-var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(r,a,e,s)=>{for(var t=s>1?void 0:s?c(a,e):a,o=r.length-1,d;o>=0;o--)(d=r[o])&&(t=(s?d(a,e,t):d(t))||t);return s&&t&&h(a,e,t),t};import{css as f,html as v,LitElement as m}from"lit";import{property as n,state as p}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{FormAssociated as b}from"../internal/form-associated.js";var u={fromAttribute(r){return r===null?void 0:r.split(",").filter(Boolean)},toAttribute(r){return r===void 0?null:r.join(",")}},_="skdx-checkbox-group-item:not([data-disabled])";function y(r,a){return r.length>0&&r.every(e=>a.includes(e))?!0:r.some(e=>a.includes(e))?"indeterminate":!1}var i=class extends b(m){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.invalid=!1;this._parts=[];this._refreshParts=()=>{for(let e of this._parts)e.refresh()}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=[...this.defaultValue??[]]),this.setAttribute("role","group"),this._syncHostAttributes(),this._syncFormState()}getSelectedValues(){return this.value??this._uncontrolledValue??[]}getSelectAllChecked(){return y(this._enabledValues(),this.getSelectedValues())}toggleItem(e,s){if(this.disabled)return;let t=this.getSelectedValues();t.includes(e)!==s&&this._commit(s?[...t,e]:t.filter(o=>o!==e))}toggleAll(){if(this.disabled)return;let e=this.getSelectedValues(),s=this._enabledValues();this._commit(this.getSelectAllChecked()===!0?e.filter(t=>!s.includes(t)):[...e,...s.filter(t=>!e.includes(t))])}registerPart(e){this._parts.push(e),this._refreshParts()}unregisterPart(e){let s=this._parts.indexOf(e);s!==-1&&this._parts.splice(s,1),this._refreshParts()}formResetCallback(){this._commit([...this.defaultValue??[]])}updated(e){this._syncHostAttributes(),(e.has("value")||e.has("required")||e.has("name"))&&this._syncFormState(),(e.has("value")||e.has("disabled")||e.has("required"))&&this._refreshParts()}render(){return v`<slot @slotchange=${this._refreshParts}></slot>`}_enabledValues(){return this._parts.filter(e=>typeof e.value=="string"&&!e.disabled).map(e=>e.value)}_commit(e){this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._syncFormState(),this._refreshParts()}_syncHostAttributes(){this.invalid?(this.setAttribute("aria-invalid","true"),this.setAttribute("data-invalid","")):(this.removeAttribute("aria-invalid"),this.removeAttribute("data-invalid")),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}_syncFormState(){let e=this.getSelectedValues();this.setFormValue(this.multiFormValue(e)),this.setValueMissing(this.required&&e.length===0,"Please select at least one option.",this.querySelector(_))}};i.styles=f`
-    :host {
-      display: block;
-    }
-  `,l([n({converter:u})],i.prototype,"value",2),l([n({converter:u,attribute:"default-value"})],i.prototype,"defaultValue",2),l([n({type:String,reflect:!0})],i.prototype,"name",2),l([n({type:Boolean,reflect:!0})],i.prototype,"required",2),l([n({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([n({type:Boolean,reflect:!0})],i.prototype,"invalid",2),l([n({attribute:"required-message"})],i.prototype,"requiredMessage",2),l([p()],i.prototype,"_uncontrolledValue",2),i=l([g("skdx-checkbox-group","checkbox-group","root")],i);export{i as SkdxCheckboxGroup,y as getSelectAllChecked};
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(r,l,e,i)=>{for(var t=i>1?void 0:i?m(l,e):l,o=r.length-1,u;o>=0;o--)(u=r[o])&&(t=(i?u(l,e,t):u(t))||t);return i&&t&&c(l,e,t),t};import"lit";import{property as n,state as f}from"lit/decorators.js";import{hasAuthoredParts as p}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{derivedParts as d,threadAppearance as b}from"../internal/derive.js";import{emit as v}from"../internal/events.js";import{ensureId as y}from"../internal/ids.js";import{SkdxSelectionGroupBase as _}from"../internal/selection-group.js";import{CHECKBOX_GROUP_ANATOMY_GENERATED as x,CHECKBOX_GROUP_RENDER_SLOTS as P,fillCheckboxGroupAnatomy as S}from"./CheckboxGroupAnatomy.js";var h={fromAttribute(r){return r===null?void 0:r.split(",").filter(Boolean)},toAttribute(r){return r===void 0?null:r.join(",")}},A="skdx-checkbox-group-item:not([data-disabled])";function k(r,l){return r.length>0&&r.every(e=>l.includes(e))?!0:r.some(e=>l.includes(e))?"indeterminate":!1}var s=class extends _{constructor(){super(...arguments);this.fillAnatomy=()=>{p(this,x,P)||S(this),this.refreshParts()}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=[...this.defaultValue??[]]),this.syncHostAttributes(),this._syncFormState(),queueMicrotask(this.fillAnatomy)}getSelectedValues(){return this.value??this._uncontrolledValue??[]}getSelectAllChecked(){return k(this._enabledValues(),this.getSelectedValues())}toggleItem(e,i){if(this.disabled||this.readOnly)return;let t=this.getSelectedValues();t.includes(e)!==i&&(i&&this.isMaxReached()||this._commit(i?[...t,e]:t.filter(o=>o!==e)))}toggleAll(){if(this.disabled||this.readOnly)return;let e=this.getSelectedValues(),i=this._enabledValues();this._commit(this.getSelectAllChecked()===!0?e.filter(t=>!i.includes(t)):[...e,...i.filter(t=>!e.includes(t))].slice(0,this.max??Number.POSITIVE_INFINITY))}isMaxReached(){return this.max!==void 0&&this.getSelectedValues().length>=this.max}itemIds(){return Array.from(this.querySelectorAll("skdx-checkbox-group-item")).map(e=>y(e,"skdx-checkbox-group","item")).join(" ")}registerPart(e){super.registerPart(e),this.refreshParts()}unregisterPart(e){super.unregisterPart(e),this.refreshParts()}formResetCallback(){this._commit([...this.defaultValue??[]])}updated(e){e.has("options")&&this.fillAnatomy(),this.syncHostAttributes(),(e.has("value")||e.has("required")||e.has("name"))&&this._syncFormState(),(e.has("value")||e.has("disabled")||e.has("readOnly")||e.has("max")||e.has("required"))&&this.refreshParts(),b(this,{size:this.size},[...d(this,"skdx-checkbox-group-item"),...d(this,"skdx-checkbox-group-select-all")])}_enabledValues(){return this.parts.filter(e=>typeof e.value=="string"&&!e.disabled).map(e=>e.value)}_commit(e){this.value===void 0&&(this._uncontrolledValue=e),v(this,"value-change",e),this._syncFormState(),this.refreshParts()}_syncFormState(){let e=this.getSelectedValues();this.setFormValue(this.multiFormValue(e)),this.setValueMissing(this.required&&e.length===0,"Please select at least one option.",this.querySelector(A))}};a([n({converter:h})],s.prototype,"value",2),a([n({converter:h,attribute:"default-value"})],s.prototype,"defaultValue",2),a([n({type:Number})],s.prototype,"max",2),a([n({type:String,attribute:"data-size"})],s.prototype,"size",2),a([f()],s.prototype,"_uncontrolledValue",2),s=a([g("skdx-checkbox-group","checkbox-group","root")],s);export{s as SkdxCheckboxGroup,k as getSelectAllChecked};

package/dist/checkbox-group/CheckboxGroupAnatomy.cjs

@@ -0,0 +1,13 @@
+"use strict";var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var n=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},m=(e,o,t,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of p(o))!k.call(e,l)&&l!==t&&a(e,l,{get:()=>o[l],enumerable:!(d=x(o,l))||d.enumerable});return e};var u=e=>m(a({},"__esModule",{value:!0}),e);var g={};n(g,{CHECKBOX_GROUP_ANATOMY_GENERATED:()=>b,CHECKBOX_GROUP_RENDER_SLOTS:()=>h,fillCheckboxGroupAnatomy:()=>i});module.exports=u(g);var r=require("lit"),s=require("lit/directives/repeat.js"),c=require("../internal/options.cjs"),f=require("./CheckboxGroupItem.cjs"),E=require("./CheckboxGroupSelectAll.cjs"),b="data-skdx-checkbox-group-generated",h=["select-all"];function i(e){let o=(0,c.renderSlotContent)(e,"select-all").get("");(0,r.render)(r.html`
+      ${o?r.html`<skdx-checkbox-group-select-all data-skdx-checkbox-group-generated
+              >${(0,c.stampRenderSlot)(o)}</skdx-checkbox-group-select-all
+            >`:r.nothing}
+      ${(0,s.repeat)(e.options??[],t=>t.value,t=>r.html`
+          <skdx-checkbox-group-item
+            data-skdx-checkbox-group-generated
+            value=${t.value}
+            ?disabled=${t.disabled??!1}
+            >${t.label}</skdx-checkbox-group-item
+          >
+        `)}
+    `,e,{host:e})}0&&(module.exports={CHECKBOX_GROUP_ANATOMY_GENERATED,CHECKBOX_GROUP_RENDER_SLOTS,fillCheckboxGroupAnatomy});

package/dist/checkbox-group/CheckboxGroupAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type { SkdxCheckboxGroup } from './CheckboxGroup.cjs';
+import './CheckboxGroupItem.cjs';
+import './CheckboxGroupSelectAll.cjs';
+/** @internal Marks a direct child of `<skdx-checkbox-group>` this module generated; written literally in the template since Lit binds attribute values, not names. */
+export declare const CHECKBOX_GROUP_ANATOMY_GENERATED = "data-skdx-checkbox-group-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const CHECKBOX_GROUP_RENDER_SLOTS: readonly ["select-all"];
+/**
+ * Builds one Item per entry in `root.options`, keyed by value, with a
+ * `slot="select-all"` child deriving the tri-state `<skdx-checkbox-group-select-all>` above them.
+ * @internal
+ */
+export declare function fillCheckboxGroupAnatomy(root: SkdxCheckboxGroup): void;

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

@@ -0,0 +1,13 @@
+import type { SkdxCheckboxGroup } from './CheckboxGroup.js';
+import './CheckboxGroupItem.js';
+import './CheckboxGroupSelectAll.js';
+/** @internal Marks a direct child of `<skdx-checkbox-group>` this module generated; written literally in the template since Lit binds attribute values, not names. */
+export declare const CHECKBOX_GROUP_ANATOMY_GENERATED = "data-skdx-checkbox-group-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const CHECKBOX_GROUP_RENDER_SLOTS: readonly ["select-all"];
+/**
+ * Builds one Item per entry in `root.options`, keyed by value, with a
+ * `slot="select-all"` child deriving the tri-state `<skdx-checkbox-group-select-all>` above them.
+ * @internal
+ */
+export declare function fillCheckboxGroupAnatomy(root: SkdxCheckboxGroup): void;

package/dist/checkbox-group/CheckboxGroupAnatomy.js

@@ -0,0 +1,13 @@
+import{html as t,render as l,nothing as c}from"lit";import{repeat as a}from"lit/directives/repeat.js";import{renderSlotContent as d,stampRenderSlot as s}from"../internal/options.js";import"./CheckboxGroupItem.js";import"./CheckboxGroupSelectAll.js";var u="data-skdx-checkbox-group-generated",b=["select-all"];function h(o){let r=d(o,"select-all").get("");l(t`
+      ${r?t`<skdx-checkbox-group-select-all data-skdx-checkbox-group-generated
+              >${s(r)}</skdx-checkbox-group-select-all
+            >`:c}
+      ${a(o.options??[],e=>e.value,e=>t`
+          <skdx-checkbox-group-item
+            data-skdx-checkbox-group-generated
+            value=${e.value}
+            ?disabled=${e.disabled??!1}
+            >${e.label}</skdx-checkbox-group-item
+          >
+        `)}
+    `,o,{host:o})}export{u as CHECKBOX_GROUP_ANATOMY_GENERATED,b as CHECKBOX_GROUP_RENDER_SLOTS,h as fillCheckboxGroupAnatomy};

package/dist/checkbox-group/CheckboxGroupItem.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(r,t)=>{for(var e in t)l(r,e,{get:t[e],enumerable:!0})},y=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of k(t))!f.call(r,i)&&i!==e&&l(r,i,{get:()=>t[i],enumerable:!(s=u(t,i))||s.enumerable});return r};var E=r=>y(l({},"__esModule",{value:!0}),r),d=(r,t,e,s)=>{for(var i=s>1?void 0:s?u(t,e):t,c=r.length-1,h;c>=0;c--)(h=r[c])&&(i=(s?h(t,e,i):h(i))||i);return s&&i&&l(t,e,i),i};var g={};m(g,{SkdxCheckboxGroupItem:()=>o});module.exports=E(g);var a=require("lit"),n=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("../internal/part.cjs"),p=require("../internal/styles.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{this.effectiveDisabled||this.rootEl?.toggleItem(this.value,!this.checked)};this._handleKeydown=e=>{e.key===" "?(e.preventDefault(),this._handleClick()):e.key==="Enter"&&e.preventDefault()}}connectedCallback(){super.connectedCallback(),(0,v.applyHostPart)(this,"checkbox","root"),this.rootEl=this.closest("skdx-checkbox-group"),this.setAttribute("role","checkbox"),this.setAttribute("data-skdx-checkbox-group-item",""),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this.rootEl?.registerPart(this),this._sync()}disconnectedCallback(){this.rootEl?.unregisterPart(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}refresh(){this._sync()}get checked(){return this.rootEl?.getSelectedValues().includes(this.value)??!1}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}updated(){this._sync()}render(){return a.html`<slot></slot>`}_sync(){let e=this.checked,s=this.effectiveDisabled;this.setAttribute("aria-checked",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),this.setAttribute("data-value",this.value),this.rootEl?.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),s?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.setAttribute("tabindex",s?"-1":"0")}};o.styles=[p.resetNativeControl,a.css`
+"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var E=(s,i)=>{for(var e in i)d(s,e,{get:i[e],enumerable:!0})},g=(s,i,e,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of y(i))!k.call(s,t)&&t!==e&&d(s,t,{get:()=>i[t],enumerable:!(r=b(i,t))||r.enumerable});return s};var A=s=>g(d({},"__esModule",{value:!0}),s),l=(s,i,e,r)=>{for(var t=r>1?void 0:r?b(i,e):i,n=s.length-1,u;n>=0;n--)(u=s[n])&&(t=(r?u(i,e,t):u(t))||t);return r&&t&&d(i,e,t),t};var x={};E(x,{SkdxCheckboxGroupItem:()=>a});module.exports=A(x);var o=require("lit"),h=require("lit/decorators.js"),c=require("../internal/define.cjs"),m=require("../internal/form-associated.cjs"),f=require("../internal/part.cjs"),p=require("../internal/styles.cjs"),v=require("./indicator.cjs");var a=class extends(0,m.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{this.effectiveDisabled||this.rootEl?.toggleItem(this.value,!this.checked)};this._handleKeydown=e=>{e.key===" "?(e.preventDefault(),this._handleClick()):e.key==="Enter"&&e.preventDefault()}}connectedCallback(){super.connectedCallback(),(0,f.applyHostPart)(this,"checkbox","root"),this.rootEl=this.closest("skdx-checkbox-group"),this.setAttribute("role","checkbox"),this.setAttribute("data-skdx-checkbox-group-item",""),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this.rootEl?(0,c.whenUpgraded)(this.rootEl,()=>{this.rootEl?.registerPart(this),this._sync()}):this._sync()}disconnectedCallback(){this.rootEl?.unregisterPart(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}refresh(){this._sync()}get checked(){return this.rootEl?.getSelectedValues().includes(this.value)??!1}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}updated(){this._sync()}render(){return o.html`<slot></slot>`}_sync(){let e=this.checked,r=this.effectiveDisabled;this.setAttribute("aria-checked",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),this.setAttribute("data-value",this.value),this.rootEl?.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),this.rootEl?.readOnly?(this.setAttribute("aria-readonly","true"),this.setAttribute("data-readonly","")):(this.removeAttribute("aria-readonly"),this.removeAttribute("data-readonly"));let t=(this.rootEl?.isMaxReached()??!1)&&!e;r||t?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),t?this.setAttribute("data-max-reached",""):this.removeAttribute("data-max-reached"),r?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.setAttribute("tabindex",r?"-1":"0"),(0,v.fillCheckboxGroupItemIndicator)(this,e,r)}};a.styles=[p.resetNativeControl,o.css`
       :host {
         display: inline-block;
         cursor: pointer;
@@ -6,4 +6,4 @@
       :host([data-disabled]) {
         cursor: default;
       }
-    `],d([(0,n.property)({type:String,reflect:!0})],o.prototype,"value",2),d([(0,n.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=d([(0,b.customElement)("skdx-checkbox-group-item","checkbox-group","item")],o);0&&(module.exports={SkdxCheckboxGroupItem});
+    `],l([(0,h.property)({type:String,reflect:!0})],a.prototype,"value",2),l([(0,h.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),l([(0,h.property)({type:String,reflect:!0,attribute:"data-size"})],a.prototype,"size",2),a=l([(0,c.customElement)("skdx-checkbox-group-item","checkbox-group","item")],a);0&&(module.exports={SkdxCheckboxGroupItem});