@fiscozen/checkbox 0.1.6 → 0.2.0

package/coverage/src/components/FzCheckboxGroupOption.vue.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.16% </span>
+                <span class="strong">79.89% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>57/98</span>
+                <span class='fraction'>151/189</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">33.33% </span>
+                <span class="strong">86.66% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>1/3</span>
+                <span class='fraction'>13/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/3</span>
+                <span class='fraction'>0/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.16% </span>
+                <span class="strong">79.89% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>57/98</span>
+                <span class='fraction'>151/189</span>
             </div>
         
             
@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -161,7 +161,98 @@
 <a name='L96'></a><a href='#L96'>96</a>
 <a name='L97'></a><a href='#L97'>97</a>
 <a name='L98'></a><a href='#L98'>98</a>
-<a name='L99'></a><a href='#L99'>99</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -209,19 +300,53 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -238,6 +363,17 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -259,94 +395,185 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
-  &lt;FzCheckbox
-    v-model="<span class="fstat-no" title="function not covered" >model"</span>
-    :value="props.value"
-    :label="props.label"
-    :disabled="disabled"
-    :emphasis="emphasis"
-    :error="error"
-    :size="size"
-    :indeterminate="isIndeterminate"
-    @change="onCheckboxParentChange"
-  &gt;
-    &lt;template #children v-if="<span class="branch-0 cbranch-no" title="branch not covered" >children?.length"&gt;</span>
-      &lt;div :class="[staticChildContainerClass, computedChildContainerClasses]"&gt;
-        &lt;FzCheckbox
-          v-for="child in children"
-          :key="child.value ? child.value.toString() : child.label"
-          v-model="model"
-          :disabled="disabled"
-          v-bind="child"
-          :emphasis="emphasis"
-          :error="error"
-          :size="size"
-          @change="handleCheckboxParentChange"
-        /&gt;
-      &lt;/div&gt;
-    &lt;/template&gt;
-  &lt;/FzCheckbox&gt;
-&lt;/template&gt;
-&lt;script setup lang="ts"&gt;
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;script setup lang="ts"&gt;
+/**
+ * FzCheckboxGroupOption Component
+ *
+ * Renders a single checkbox option within a checkbox group, with support for
+ * hierarchical parent-child relationships. When children are present, the parent
+ * checkbox displays an indeterminate state when partially selected.
+ *
+ * Key features:
+ * - Automatic indeterminate state management for parent checkboxes
+ * - Bi-directional sync: parent controls children, children update parent
+ * - ARIA relationships via aria-owns for accessibility
+ * - Deterministic IDs for proper ARIA associations
+ *
+ * @component
+ * @internal Used internally by FzCheckboxGroup, not intended for direct use
+ */
 import { computed } from "vue";
 import FzCheckbox from "../FzCheckbox.vue";
 import { ParentCheckbox } from "../types";
+import { generateCheckboxId } from "../utils";
 &nbsp;
-FzCheckbox.compatConfig = {
-  MODE: 3,
-};
+const props = defineProps&lt;ParentCheckbox&gt;();
 &nbsp;
-const props = defineProps&lt;ParentCheckbox &amp; { size: "sm" | "md" }&gt;();
-const currentValue = computed(() =&gt; props.value ?? props.label);
+/** The actual value used for this checkbox (falls back to label if no value provided) */
+const currentValue = computed&lt;string | number | boolean&gt;(
+  () =&gt; props.value ?? props.label,
+);
+&nbsp;
+/**
+ * Two-way binding for selected values.
+ * Shared with parent component and all sibling checkboxes.
+ */
 const model = defineModel&lt;(string | number | boolean)[]&gt;({
   required: true,
   default: [],
 });
 &nbsp;
-const staticChildContainerClass = "flex flex-col justify-center pl-24";
+/**
+ * Unique identifier for this parent checkbox.
+ * Used as a prefix for child checkbox IDs to establish ARIA relationships.
+ */
+const parentId: string = generateCheckboxId();
 &nbsp;
-const computedChildContainerClasses = computed(() =&gt; [
-<span class="cstat-no" title="statement not covered" >  props.size === "sm" ? "gap-6 mt-6" : "",</span>
-<span class="cstat-no" title="statement not covered" >  props.size === "md" ? "gap-8 mt-8" : "",</span>
-]);
+/**
+ * Computes space-separated list of child checkbox IDs.
+ * Used for aria-owns attribute to establish semantic parent-child relationship.
+ *
+ * @returns Space-separated string of child IDs, or undefined if no children
+ */
+const childrenIds = computed&lt;string | undefined&gt;(() =&gt;
+  props.children?.map((child, index) =&gt; `${parentId}-child-${index}`).join(" "),
+);
 &nbsp;
-const isIndeterminate = computed(() =&gt; {
-  if (!props.children) return <span class="branch-0 cbranch-no" title="branch not covered" >false;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  const numChecked = props.children.filter((child) =&gt;</span>
-<span class="cstat-no" title="statement not covered" >    model.value.includes(child.value ?? child.label),</span>
-<span class="cstat-no" title="statement not covered" >  ).length;</span>
-<span class="cstat-no" title="statement not covered" >  return numChecked &gt; 0 &amp;&amp; numChecked &lt; props.children.length;</span>
+/** Base layout classes for the children container (indented and vertical) */
+const staticChildContainerClass: string =
+  "flex flex-col justify-center gap-8 pl-24";
+&nbsp;
+/** Size-specific spacing for child checkboxes */
+const computedChildContainerClasses = computed&lt;string[]&gt;(() =&gt; []);
+&nbsp;
+/**
+ * Determines if parent checkbox should be in indeterminate state.
+ * Indeterminate means some, but not all, children are checked.
+ *
+ * States:
+ * - No children: false (not indeterminate)
+ * - No children checked: false (unchecked)
+ * - All children checked: false (fully checked)
+ * - Some children checked: true (indeterminate/partial)
+ *
+ * @returns true if parent should display indeterminate state
+ */
+const isIndeterminate = computed&lt;boolean&gt;(() =&gt; {
+  if (!props.children) return false;
+&nbsp;
+  const numChecked = props.children.filter((child) =&gt;
+    model.value.includes(child.<span class="branch-0 cbranch-no" title="branch not covered" >value ?? child.label)</span>,
+  ).length;
+  return numChecked &gt; <span class="branch-0 cbranch-no" title="branch not covered" >0 &amp;&amp; numChecked &lt; props.children.length;</span>
 });
 &nbsp;
+/**
+ * Handles child checkbox changes to update parent state.
+ * Called when a child checkbox is toggled.
+ *
+ * Logic:
+ * - If ALL children are now checked → add parent to selection
+ * - If ANY child is unchecked → remove parent from selection
+ *
+ * Note: Uses concat() instead of push() to ensure Vue reactivity triggers.
+ */
 <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >function handleCheckboxParentChange() {</span></span>
 <span class="cstat-no" title="statement not covered" >  if (!props.children) return;</span>
+<span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >  const numChecked = props.children.filter((child) =&gt;</span>
 <span class="cstat-no" title="statement not covered" >    model.value.includes(child.value ?? child.label),</span>
 <span class="cstat-no" title="statement not covered" >  ).length;</span>
 <span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >  if (numChecked === props.children.length) {</span>
-<span class="cstat-no" title="statement not covered" >    // push parent value to model (using concat to force reactivity, push seems to not work)</span>
-<span class="cstat-no" title="statement not covered" >    model.value = model.value.concat(currentValue.value);</span>
+<span class="cstat-no" title="statement not covered" >    // All children checked: add parent value to model if not already present</span>
+<span class="cstat-no" title="statement not covered" >    if (!model.value.includes(currentValue.value)) {</span>
+<span class="cstat-no" title="statement not covered" >      model.value = model.value.concat(currentValue.value);</span>
+<span class="cstat-no" title="statement not covered" >    }</span>
 <span class="cstat-no" title="statement not covered" >  } else {</span>
-<span class="cstat-no" title="statement not covered" >    // remove parent value from model if it exists</span>
+<span class="cstat-no" title="statement not covered" >    // Not all children checked: remove parent value if present</span>
 <span class="cstat-no" title="statement not covered" >    if (model.value.includes(currentValue.value))</span>
 <span class="cstat-no" title="statement not covered" >      model.value = model.value.filter((value) =&gt; value !== currentValue.value);</span>
 <span class="cstat-no" title="statement not covered" >  }</span>
 <span class="cstat-no" title="statement not covered" >}</span>
 &nbsp;
+/**
+ * Handles parent checkbox changes to cascade to children.
+ * Called when the parent checkbox is clicked.
+ *
+ * Cascade behavior:
+ * - Parent checked → check all children
+ * - Parent unchecked → uncheck all children
+ *
+ * Only modifies children that need changes (doesn't re-add already selected children).
+ */
 <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >function onCheckboxParentChange() {</span></span>
 <span class="cstat-no" title="statement not covered" >  if (!props.children) return;</span>
+<span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >  if (model.value.includes(currentValue.value)) {</span>
-<span class="cstat-no" title="statement not covered" >    // push all children values to model that are not already in model</span>
+<span class="cstat-no" title="statement not covered" >    // Parent is checked: add all unchecked children to model</span>
 <span class="cstat-no" title="statement not covered" >    model.value = model.value.concat(</span>
 <span class="cstat-no" title="statement not covered" >      props.children</span>
 <span class="cstat-no" title="statement not covered" >        ?.map((child) =&gt; child.value ?? child.label)</span>
 <span class="cstat-no" title="statement not covered" >        .filter((value) =&gt; !model.value.includes(value)),</span>
 <span class="cstat-no" title="statement not covered" >    );</span>
 <span class="cstat-no" title="statement not covered" >  } else {</span>
-<span class="cstat-no" title="statement not covered" >    // remove all children values from model</span>
+<span class="cstat-no" title="statement not covered" >    // Parent is unchecked: remove all children from model</span>
 <span class="cstat-no" title="statement not covered" >    model.value = model.value.filter(</span>
 <span class="cstat-no" title="statement not covered" >      (value) =&gt;</span>
 <span class="cstat-no" title="statement not covered" >        !props.children</span>
@@ -356,7 +583,53 @@ const isIndeterminate = computed(() =&gt; {
 <span class="cstat-no" title="statement not covered" >  }</span>
 <span class="cstat-no" title="statement not covered" >}</span>
 &lt;/script&gt;
-&lt;style scoped&gt;&lt;/style&gt;
+&nbsp;
+&lt;template&gt;
+  &lt;!-- 
+    Parent checkbox
+    - Displays indeterminate state when children are partially selected
+    - aria-owns links to child checkboxes for screen reader navigation
+    - Change event cascades selection to all children
+  --&gt;
+  &lt;FzCheckbox
+    v-model="<span class="fstat-no" title="function not covered" >model"</span>
+    :value="props.value"
+    :label="props.label"
+    :disabled="disabled"
+    :emphasis="emphasis"
+    :error="error"
+    :indeterminate="isIndeterminate"
+    :aria-owns="children?.length ? childrenIds : undefined"
+    @change="onCheckboxParentChange"
+  &gt;
+    &lt;!-- 
+      Children slot: renders nested child checkboxes
+      Only rendered if children array has items
+    --&gt;
+    &lt;template #children v-if="children?.length"&gt;
+      &lt;!-- Indented container for visual hierarchy --&gt;
+      &lt;div :class="[staticChildContainerClass, computedChildContainerClasses]"&gt;
+        &lt;!-- 
+          Child checkboxes
+          - Assigned deterministic IDs matching those in parent's aria-owns
+          - Change events update parent's indeterminate state
+          - Share same v-model array with parent and siblings
+        --&gt;
+        &lt;FzCheckbox
+          v-for="(child, index) in children"
+          :key="child.value ? child.value.toString() : child.label"
+          v-model="<span class="fstat-no" title="function not covered" >model"</span>
+          :disabled="disabled"
+          v-bind="child"
+          :emphasis="emphasis"
+          :error="error"
+          :checkbox-id="`${parentId}-child-${index}`"
+          @change="handleCheckboxParentChange"
+        /&gt;
+      &lt;/div&gt;
+    &lt;/template&gt;
+  &lt;/FzCheckbox&gt;
+&lt;/template&gt;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -364,7 +637,7 @@ const isIndeterminate = computed(() =&gt; {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-11-18T13:59:50.683Z
+                at 2025-10-30T09:58:41.772Z
             </div>
         <script src="../../prettify.js"></script>
         <script>