srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/05.forms/input-button/tests/{InputButtonCore.spec.ts → InputButton.spec.ts}

@@ -1,25 +1,26 @@
-// InputButtonCore.test.ts
-import { describe, it, expect, afterEach } from "vitest";
+// InputButton.test.ts
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import InputButtonCore from "../InputButtonCore.vue";
+import InputButton from "../InputButton.vue";
+import { defineComponent, nextTick, ref } from "vue";
 
 // --- Types ---
-interface InputButtonCoreInstance {
-  hasLeftSlot: boolean;
-  hasRightSlot: boolean;
-  hasIconOnlySlot: boolean;
-  buttonClasses: string[];
+interface InputButtonInstance {
+  hasLeftSlot: () => boolean;
+  hasRightSlot: () => boolean;
+  hasIconOnlySlot: () => boolean;
+  buttonClasses: () => unknown[];
 }
 
 // --- Helpers ---
 const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
-  return mountSuspended(InputButtonCore, {
+  return mountSuspended(InputButton, {
     props: { buttonText: "Click me", ...props },
     slots,
   });
 };
 
-describe("InputButtonCore", () => {
+describe("InputButton", () => {
   let wrapper: Awaited<ReturnType<typeof createWrapper>>;
 
   afterEach(() => {
@@ -85,8 +86,8 @@ describe("InputButtonCore", () => {
       wrapper = await createWrapper();
       const button = wrapper.find("button");
       expect(button.exists()).toBe(true);
-      expect(button.classes()).toContain("input-button-core");
-      expect(button.attributes("data-testid")).toBe("input-button-core");
+      expect(button.classes()).toContain("input-button");
+      expect(button.attributes("data-testid")).toBe("input-button");
     });
 
     it("renders button text", async () => {
@@ -108,7 +109,7 @@ describe("InputButtonCore", () => {
   describe("Props", () => {
     it("applies variant class", async () => {
       for (const variant of ["primary", "secondary", "tertiary"] as const) {
-        const w = await mountSuspended(InputButtonCore, {
+        const w = await mountSuspended(InputButton, {
           props: { buttonText: "Test", variant },
         });
         expect(w.find("button").classes()).toContain(variant);
@@ -135,7 +136,7 @@ describe("InputButtonCore", () => {
 
     it("applies correct type attribute", async () => {
       for (const type of ["button", "submit", "reset"] as const) {
-        const w = await mountSuspended(InputButtonCore, {
+        const w = await mountSuspended(InputButton, {
           props: { buttonText: "Test", type },
         });
         expect(w.find("button").attributes("type")).toBe(type);
@@ -254,7 +255,7 @@ describe("InputButtonCore", () => {
     });
 
     it("renders a real anchor with the exact href for a '/'-prefixed href when external is true", async () => {
-      // Regression test: InputButtonCore used to always route a leading-"/" href through
+      // Regression test: InputButton used to always route a leading-"/" href through
       // NuxtLink (client-side router.push), which silently fails for non-page paths like a
       // Nitro server route ("/api/auth/github") since no Vue Router route matches it. The
       // `external` prop forces a real anchor so the browser makes an actual request instead.
@@ -276,22 +277,77 @@ describe("InputButtonCore", () => {
   describe("Computed properties", () => {
     it("hasLeftSlot is true when left slot provided without iconOnly", async () => {
       wrapper = await createWrapper({}, { left: "<span>L</span>" });
-      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasLeftSlot).toBe(true);
+      expect((wrapper.vm as unknown as InputButtonInstance).hasLeftSlot()).toBe(true);
     });
 
     it("hasLeftSlot is false when iconOnly is also provided", async () => {
       wrapper = await createWrapper({}, { left: "<span>L</span>", iconOnly: "<span>I</span>" });
-      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasLeftSlot).toBe(false);
+      expect((wrapper.vm as unknown as InputButtonInstance).hasLeftSlot()).toBe(false);
     });
 
     it("hasRightSlot is true when right slot provided without iconOnly", async () => {
       wrapper = await createWrapper({}, { right: "<span>R</span>" });
-      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasRightSlot).toBe(true);
+      expect((wrapper.vm as unknown as InputButtonInstance).hasRightSlot()).toBe(true);
     });
 
     it("hasIconOnlySlot is true when iconOnly slot provided", async () => {
       wrapper = await createWrapper({}, { iconOnly: "<span>I</span>" });
-      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasIconOnlySlot).toBe(true);
+      expect((wrapper.vm as unknown as InputButtonInstance).hasIconOnlySlot()).toBe(true);
     });
   });
 });
+
+describe("InputButton slot toggling", () => {
+  it("adds and removes the icon-only class when the iconOnly slot changes after mount", async () => {
+    const Host = defineComponent({
+      components: { InputButton },
+      setup() {
+        return { iconOnly: ref(false) };
+      },
+      template: `
+        <InputButton button-text="Close">
+          <template v-if="iconOnly" #iconOnly><span>×</span></template>
+        </InputButton>
+      `,
+    });
+    const wrapper = await mountSuspended(Host);
+    const button = () => wrapper.find(".input-button");
+    expect(button().classes()).not.toContain("icon-only");
+    (wrapper.vm as unknown as { iconOnly: boolean }).iconOnly = true;
+    await nextTick();
+    expect(button().classes()).toContain("icon-only");
+    expect(wrapper.find(".button-text").classes()).toContain("sr-only");
+  });
+});
+
+describe("InputButton readonly and reactivity", () => {
+  it("does not fire a consumer click handler while readonly (keyboard activation included)", async () => {
+    const onClick = vi.fn();
+    const wrapper = await mountSuspended(InputButton, {
+      props: { buttonText: "Save", readonly: true },
+      attrs: { onClick },
+    });
+    await wrapper.trigger("click");
+    expect(onClick).not.toHaveBeenCalled();
+    expect(wrapper.attributes("aria-disabled")).toBe("true");
+  });
+
+  it("fires the click handler when not readonly", async () => {
+    const onClick = vi.fn();
+    const wrapper = await mountSuspended(InputButton, {
+      props: { buttonText: "Save" },
+      attrs: { onClick },
+    });
+    await wrapper.trigger("click");
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const wrapper = await mountSuspended(InputButton, {
+      props: { buttonText: "Save", styleClassPassthrough: ["original"] },
+    });
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/05.forms/input-button/tests/__snapshots__/{InputButtonCore.spec.ts.snap → InputButton.spec.ts.snap}

@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`InputButtonCore > Snapshots > icon-only slot 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary icon-only">
+exports[`InputButton > Snapshots > icon-only slot 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary icon-only">
   <!--v-if-->
   <!--v-if--><span class="button-text sr-only">Click me</span>
   <!--v-if--><span class="btn-icon icon-only"><span data-testid="icon-only">⚡</span></span>
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > pending state 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary pending-effect is-pending"><svg class="pending-container" data-theme="default">
-    <rect pathLength="100" stroke-linecap="round" class="pending-blur"></rect>
-    <rect pathLength="100" stroke-linecap="round" class="pending-line"></rect>
+exports[`InputButton > Snapshots > pending state 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary pending-effect is-pending"><svg class="pending-effect-container" data-theme="default" aria-hidden="true" focusable="false">
+    <rect pathLength="100" stroke-linecap="round" class="pending-effect-blur"></rect>
+    <rect pathLength="100" stroke-linecap="round" class="pending-effect-line"></rect>
   </svg>
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -19,8 +19,8 @@ exports[`InputButtonCore > Snapshots > pending state 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > pill 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary pill">
+exports[`InputButton > Snapshots > pill 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary pill">
   <!--v-if-->
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -28,8 +28,8 @@ exports[`InputButtonCore > Snapshots > pill 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > primary (default) 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+exports[`InputButton > Snapshots > primary (default) 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary">
   <!--v-if-->
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -37,8 +37,8 @@ exports[`InputButtonCore > Snapshots > primary (default) 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > readonly 1`] = `
-"<button type="button" readonly="" aria-disabled="true" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+exports[`InputButton > Snapshots > readonly 1`] = `
+"<button type="button" readonly="" aria-disabled="true" data-testid="input-button" data-theme="default" class="input-button primary">
   <!--v-if-->
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -46,8 +46,8 @@ exports[`InputButtonCore > Snapshots > readonly 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > secondary variant 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core secondary">
+exports[`InputButton > Snapshots > secondary variant 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button secondary">
   <!--v-if-->
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -55,8 +55,8 @@ exports[`InputButtonCore > Snapshots > secondary variant 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > tertiary variant 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core tertiary">
+exports[`InputButton > Snapshots > tertiary variant 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button tertiary">
   <!--v-if-->
   <!--v-if--><span class="button-text">Click me</span>
   <!--v-if-->
@@ -64,8 +64,8 @@ exports[`InputButtonCore > Snapshots > tertiary variant 1`] = `
 </button>"
 `;
 
-exports[`InputButtonCore > Snapshots > with left and right slots 1`] = `
-"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+exports[`InputButton > Snapshots > with left and right slots 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button" data-theme="default" class="input-button primary">
   <!--v-if--><span class="btn-icon left"><span data-testid="left-icon">←</span></span><span class="button-text">Click me</span><span class="btn-icon right"><span data-testid="right-icon">→</span></span>
   <!--v-if-->
 </button>"

package/app/components/05.forms/input-checkbox/CONSUMER-STYLING.md

@@ -0,0 +1,93 @@
+# MultipleCheckboxes / SingleCheckbox — Consumer Styling Guide
+
+## Public token API
+
+These two components are layout wrappers: a `FormFieldset` holding one or more checkbox controls
+plus an error message. They only own the spacing of the items container. The checkbox controls'
+colours, borders and pill/button styling come from `InputCheckboxRadio`/
+`InputCheckboxRadioButton`. See `../input-checkbox-radio/CONSUMER-STYLING.md` for those
+(`--input-checkbox-*` tokens).
+
+### MultipleCheckboxes (`.multiple-checkboxes-items`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--multiple-checkboxes-gap` | `1.2rem` | Gap between checkbox items |
+| `--multiple-checkboxes-margin-block-start` | `1.2rem` | Space between the legend/description and the items |
+
+With `options-layout="equal-widths"` (the default), the column minimum width is measured at
+runtime from the widest option label (`useMaxChildWidth`) plus the shared
+`--input-checked-icon-gap` and `--input-checkbox-label-padding-inline` form tokens, so every
+column matches the longest label. It has no token of its own; adjust those shared tokens if the
+columns need more room.
+
+### SingleCheckbox (`.single-checkbox-items`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--single-checkbox-gap` | `1.2rem` | Gap inside the items container |
+| `--single-checkbox-margin-block-start` | `1.2rem` | Space between the legend/description and the checkbox |
+| `--single-checkbox-column-min-width` | `100px` | Grid column minimum width with `options-layout="equal-widths"` |
+
+---
+
+## State hooks
+
+| Attribute | On | When |
+|---|---|---|
+| `data-options-layout="equal-widths" \| "inline" \| "block"` | `.multiple-checkboxes-items`, `.single-checkbox-items` | Always, mirrors `options-layout` |
+
+> **Changed 2026-09-27**: the layout used to be a bare class (`.inline`, `.block`,
+> `.equal-widths`) on the items container. Generic names like `.block`/`.inline` collide with
+> common consumer utility classes (an unlayered `.block { display: block }` would break the flex
+> column), so select on `[data-options-layout]` instead.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --multiple-checkboxes-gap: 0.8rem;
+  --single-checkbox-margin-block-start: 0.6rem;
+}
+```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
+
+Both components apply `styleClassPassthrough` to their root `<fieldset>`, alongside a fixed
+`multiple-checkboxes-fieldset` / `single-checkbox-fieldset` class. Scope overrides with either:
+
+```vue
+<MultipleCheckboxes
+  v-model="state.services"
+  v-model:field-data="servicesData"
+  name="services"
+  legend="Services of interest"
+  error-message=""
+  :style-class-passthrough="['services-field']"
+/>
+```
+
+```css
+.services-field {
+  --multiple-checkboxes-gap: 0.6rem;
+}
+```
+
+Or set a token inline:
+
+```vue
+<SingleCheckbox v-model="state.terms" name="terms" legend="Terms" error-message="" style="--single-checkbox-margin-block-start: 0;" />
+```
+

package/app/components/05.forms/input-checkbox/MultipleCheckboxes.vue

@@ -10,20 +10,19 @@
   >
     <template #content>
       <InputDescription
-        :id
         :description-id
-        :name
+        :input-variant
         :field-has-error="fieldHasError"
         :style-class-passthrough="['input-text-description']"
       >
-        <template #descriptionHtml>
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
           <slot name="descriptionHtml"></slot>
         </template>
-        <template #descriptionText>
+        <template v-if="slots.descriptionText" #descriptionText>
           <slot name="descriptionText"></slot>
         </template>
       </InputDescription>
-      <div ref="itemsContainer" class="multiple-checkboxes-items" :class="[optionsLayout]">
+      <div ref="itemsContainer" class="multiple-checkboxes-items" :data-options-layout="optionsLayout">
         <template v-for="item in fieldData.data" :key="item.id">
           <InputCheckboxRadioButton
             v-if="isButton"
@@ -32,6 +31,7 @@
             type="checkbox"
             :name
             :required
+            :multiple-options="true"
             :label="item.label"
             :field-has-error
             :true-value="item.value"
@@ -52,17 +52,16 @@
               </slot>
             </template>
           </InputCheckboxRadioButton>
-          <InputCheckboxRadioWithLabel
+          <InputCheckboxRadioField
             v-else
-            :id="`${name}-${item.value}`"
             v-model="modelValue"
             type="checkbox"
             :name
             :required
+            :multiple-options="true"
             :label="item.label"
             :field-has-error
             :true-value="item.value"
-            :options-layout
             :theme
             :input-variant
             :aria-describedby
@@ -71,7 +70,7 @@
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
             </template>
-          </InputCheckboxRadioWithLabel>
+          </InputCheckboxRadioField>
         </template>
       </div>
       <InputError :id="errorId" :error-message="errorMessage" :show-error="fieldHasError" :is-detached="true" :input-variant />
@@ -86,15 +85,12 @@ interface Props {
   dataTestid?: string;
   name: string;
   legend: string;
-  label: string;
-  placeholder?: string;
+  label?: string;
   isButton?: boolean;
   errorMessage: string | object;
   required?: boolean;
   fieldHasError?: boolean;
-  multipleOptions?: boolean;
   optionsLayout?: OptionsLayout;
-  equalCols?: boolean;
   styleClassPassthrough?: string | string[];
   theme?: FormUiTheme;
   inputVariant?: InputUiVariant;
@@ -105,13 +101,11 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   dataTestid: "multiple-checkboxes",
-  placeholder: "",
+  label: "",
   isButton: false,
   required: false,
   fieldHasError: false,
-  multipleOptions: false,
   optionsLayout: "equal-widths",
-  equalCols: true,
   styleClassPassthrough: () => [],
   theme: "default",
   inputVariant: "normal",
@@ -122,8 +116,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
-const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -133,8 +127,8 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
-const { maxChildWidth, itemsContainer, updateMaxChildWidth } = useMaxChildWidth(
-  ".input-checkbox-radio-label, .input-checkbox-radio-with-label",
+const { maxChildWidth, updateMaxChildWidth } = useMaxChildWidth(
+  ".input-checkbox-radio-field-label, .input-checkbox-radio-field",
   "100px"
 );
 
@@ -154,19 +148,19 @@ watch(
 @layer components {
 .multiple-checkboxes-items {
   display: flex;
-  gap: 1.2rem;
-  margin-top: 1.2rem;
+  gap: var(--multiple-checkboxes-gap, 1.2rem);
+  margin-block-start: var(--multiple-checkboxes-margin-block-start, 1.2rem);
 
-  &.inline {
+  &[data-options-layout="inline"] {
     flex-direction: row;
     flex-wrap: wrap;
   }
 
-  &.block {
+  &[data-options-layout="block"] {
     flex-direction: column;
   }
 
-  &.equal-widths {
+  &[data-options-layout="equal-widths"] {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,

package/app/components/05.forms/input-checkbox/SingleCheckbox.vue

@@ -1,32 +1,30 @@
 <template>
   <FormFieldset
     :id
-    :description-id
     :name
     :legend
     :field-has-error
     :required
     :data-testid
-    :style-class-passthrough="['single-checkbox-fieldset']"
+    :style-class-passthrough="['single-checkbox-fieldset', elementClasses]"
   >
     <template #content>
       <InputDescription
-        :id
         :description-id
-        :name
+        :input-variant
         :field-has-error="fieldHasError"
         :style-class-passthrough="['input-text-description']"
       >
-        <template #descriptionHtml>
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
           <slot name="descriptionHtml"></slot>
         </template>
-        <template #descriptionText>
+        <template v-if="slots.descriptionText" #descriptionText>
           <slot name="descriptionText"></slot>
         </template>
       </InputDescription>
 
-      <div class="single-checkbox-items" :class="[optionsLayout]">
-        <InputCheckboxRadioWithLabel
+      <div class="single-checkbox-items" :data-options-layout="optionsLayout">
+        <InputCheckboxRadioField
           v-model="modelValue"
           type="checkbox"
           :name
@@ -45,16 +43,9 @@
           <template v-if="slots.labelContent" #labelContent>
             <slot name="labelContent"></slot>
           </template>
-        </InputCheckboxRadioWithLabel>
+        </InputCheckboxRadioField>
       </div>
-      <InputError
-        :id="errorId"
-        :error-message
-        :show-error="fieldHasError"
-        :is-detached="true"
-        :input-variant
-        :style-class-passthrough="elementClasses"
-      />
+      <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" :input-variant />
     </template>
   </FormFieldset>
 </template>
@@ -70,74 +61,57 @@ interface Props {
   errorMessage: string | object;
   required?: boolean;
   fieldHasError?: boolean;
-  multipleOptions?: boolean;
   trueValue?: string | number | boolean;
   falseValue?: string | number | boolean;
   optionsLayout?: OptionsLayout;
-  equalCols?: boolean;
   styleClassPassthrough?: string | string[];
   theme?: FormUiTheme;
   inputVariant?: InputUiVariant;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  dataTestid: "multiple-radio-buttons",
+  dataTestid: "single-checkbox",
   label: "",
   required: false,
   fieldHasError: false,
-  multipleOptions: false,
   trueValue: true,
   falseValue: false,
   optionsLayout: "equal-widths",
-  equalCols: true,
   styleClassPassthrough: () => [],
   theme: "default",
   inputVariant: "normal",
 });
 
 const slots = useSlots();
-const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-// const id = `${props.name}-input-${useId()}`;
-// const errorId = `${props.name}-error-message`;
-// const ariaDescribedby = computed(() => {
-//   const ariaDescribedbyId = slots.description ? `${props.name}-description` : undefined;
-//   return props.fieldHasError ? errorId : ariaDescribedbyId;
-// });
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
   toRef(props, "fieldHasError"),
   slots
 );
-
-watchEffect(() => {
-  if (!slots.description && props.fieldHasError) {
-    updateElementClasses(["mbs-12"]);
-  }
-});
 </script>
 
 <style lang="css">
 @layer components {
 .single-checkbox-items {
   display: flex;
-  gap: 1.2rem;
-  margin-top: 1.2rem;
+  gap: var(--single-checkbox-gap, 1.2rem);
+  margin-block-start: var(--single-checkbox-margin-block-start, 1.2rem);
 
-  &.inline {
+  &[data-options-layout="inline"] {
     flex-direction: row;
     flex-wrap: wrap;
   }
 
-  &.block {
+  &[data-options-layout="block"] {
     flex-direction: column;
   }
 
-  &.equal-widths {
+  &[data-options-layout="equal-widths"] {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--single-checkbox-column-min-width, 100px), 1fr));
   }
 }
 }