@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.docs.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldcheckboxDocs = {
     component: 'nv-fieldcheckbox',
+    subcomponents: ['nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: {
@@ -12,220 +14,248 @@ const NvFieldcheckboxDocs = {
             },
             template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // inputId
         {
-            name: 'AllVariants',
-            template: (h("div", { "data-class": "flex flex-col gap-16" }, h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, name: "Unchecked", label: "Unchecked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Checked", label: "Checked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, name: "Unchecked", label: "Unchecked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Checked", label: "Checked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "before", description: "Description" })))),
-        },
-        {
-            name: nameof(x => x.checked),
+            name: nameof(x => x.inputId),
             args: {
-                checked: true,
-                name: 'checkbox-default',
-                label: 'Default Checked',
-                description: 'This is a default checked checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
-                required: false,
+                label: 'Label',
+                inputId: 'custom-checkbox-id',
             },
-            template: (h("nv-fieldcheckbox", { id: "default-checked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // name
         {
-            name: 'Unchecked',
+            name: nameof(x => x.name),
             args: {
-                checked: false,
-                name: 'checkbox-unchecked',
-                label: 'Unchecked Checkbox',
-                description: 'This is an unchecked checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
-                required: false,
+                label: 'Label',
+                name: 'checkbox-name',
             },
-            template: (h("nv-fieldcheckbox", { id: "unchecked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // value
         {
-            name: nameof(x => x.indeterminate),
+            name: nameof(x => x.value),
             args: {
-                checked: false,
-                name: 'checkbox-indeterminate',
-                label: 'Indeterminate Checkbox',
-                description: 'This is an indeterminate checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: true,
-                disabled: false,
-                readonly: false,
-                required: false,
+                label: 'Label',
+                value: 'checkbox-value',
             },
-            template: (h("nv-fieldcheckbox", { id: "indeterminate", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // label
         {
             name: nameof(x => x.label),
             args: {
-                checked: true,
-                name: 'checkbox-default',
                 label: 'Checkbox with label',
             },
-            template: (h("nv-fieldcheckbox", { id: "default-checked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // labelPlacement
         {
-            name: nameof(x => x.description),
+            name: nameof(x => x.labelPlacement),
             args: {
-                checked: true,
-                name: 'checkbox-default',
-                description: 'This is a checkbox with a description',
-                label: 'Checkbox',
+                label: 'Label',
+                labelPlacement: 'before',
             },
-            template: (h("nv-fieldcheckbox", { id: "default-checked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // hideLabel
         {
-            name: nameof(x => x.autofocus),
+            name: nameof(x => x.hideLabel),
             args: {
-                label: 'Autofocus',
-                autofocus: true,
+                label: 'Hidden Label',
+                hideLabel: true,
             },
             template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // description
         {
-            name: 'DisabledChecked',
+            name: nameof(x => x.description),
             args: {
-                checked: true,
-                name: 'checkbox-disabled-checked',
-                label: 'Disabled Checked',
-                description: 'This is a disabled checked checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: true,
-                readonly: false,
-                required: false,
+                label: 'Checkbox',
+                description: 'This is a checkbox with a description',
             },
-            template: (h("nv-fieldcheckbox", { id: "disabled-checked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // error
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Error Checkbox',
+                error: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // errorDescription
         {
-            name: 'DisabledAndError',
+            name: nameof(x => x.errorDescription),
             args: {
-                checked: false,
-                name: 'checkbox-disabled-error',
-                label: 'Disabled and Error',
-                description: 'This checkbox is disabled with an error',
+                label: 'Checkbox',
                 error: true,
                 errorDescription: 'An error occurred',
-                indeterminate: false,
-                disabled: true,
-                readonly: false,
-                required: false,
             },
-            template: (h("nv-fieldcheckbox", { id: "disabled-error", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // checked
         {
-            name: 'ReadonlyChecked',
+            name: nameof(x => x.checked),
             args: {
+                label: 'Checked Checkbox',
                 checked: true,
-                name: 'checkbox-readonly-checked',
-                label: 'Readonly Checked',
-                description: 'This is a readonly checked checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: true,
-                required: false,
             },
-            template: (h("nv-fieldcheckbox", { id: "readonly-checked", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // indeterminate
+        {
+            name: nameof(x => x.indeterminate),
+            args: {
+                label: 'Indeterminate Checkbox',
+                indeterminate: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // disabled
         {
-            name: 'ErrorState',
+            name: nameof(x => x.disabled),
             args: {
-                checked: false,
-                name: 'checkbox-error',
-                label: 'Error Checkbox',
-                description: 'This checkbox has an error',
-                error: true,
-                errorDescription: 'An error occurred',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
-                required: false,
+                label: 'Disabled Checkbox',
+                disabled: true,
             },
-            template: (h("nv-fieldcheckbox", { id: "error", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // readonly
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Readonly Checkbox',
+                readonly: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // required
         {
             name: nameof(x => x.required),
             args: {
-                checked: false,
-                name: 'checkbox-required',
                 label: 'Required Checkbox',
-                description: 'This is a required checkbox',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
                 required: true,
             },
-            template: (h("nv-fieldcheckbox", { id: "required", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // ariaRequiredAttr
         {
-            name: nameof(x => x.hideLabel),
+            name: nameof(x => x.ariaRequiredAttr),
             args: {
-                checked: false,
-                name: 'checkbox-hidden-label',
-                label: 'Hidden Label',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
-                required: false,
-                hideLabel: true,
+                label: 'Aria Required Checkbox',
+                ariaRequiredAttr: true,
             },
-            template: (h("nv-fieldcheckbox", { id: "hidden-label", "data-storybook-args": true })),
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
         },
+        // autofocus
         {
-            name: nameof(x => x.labelPlacement),
+            name: nameof(x => x.autofocus),
             args: {
-                checked: false,
-                name: 'checkbox-hidden-label',
-                label: 'Hidden Label',
-                labelPlacement: 'before',
-                description: 'This checkbox has a label placement end',
-                error: false,
-                errorDescription: '',
-                indeterminate: false,
-                disabled: false,
-                readonly: false,
-                required: false,
-                hideLabel: false,
+                label: 'Autofocus',
+                autofocus: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // message
+        {
+            name: nameof(x => x.message),
+            description: 'Deprecated: use description instead.',
+            args: {
+                label: 'Checkbox with Message',
+                message: 'This is a message',
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // validation
+        {
+            name: nameof(x => x.validation),
+            description: 'Deprecated: use errorDescription and set the error prop instead.',
+            args: {
+                label: 'Checkbox with Validation',
+                validation: 'This is a validation message',
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // labelBefore
+        {
+            name: nameof(x => x.labelBefore),
+            description: 'Deprecated: use labelPlacement = end instead.',
+            args: {
+                label: 'Checkbox with Label Before',
+                labelBefore: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // DisabledChecked
+        {
+            name: 'DisabledChecked',
+            description: 'Checkbox in a disabled and checked state.',
+            args: {
+                label: 'Disabled Checked',
+                disabled: true,
+                checked: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // ReadonlyChecked
+        {
+            name: 'ReadonlyChecked',
+            description: 'Checkbox in a readonly and checked state.',
+            args: {
+                label: 'Readonly Checked',
+                readonly: true,
+                checked: true,
+            },
+            template: h("nv-fieldcheckbox", { "data-storybook-args": true }),
+        },
+        // AllVariants
+        {
+            name: 'AllVariants',
+            template: (h("div", { "data-class": "flex flex-col gap-16" }, h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, name: "Unchecked", label: "Unchecked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Checked", label: "Checked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, name: "Unchecked", label: "Unchecked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Checked", label: "Checked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { "data-class": "flex gap-4 " }, h("nv-fieldcheckbox", { "data-storybook-args": true, error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { "data-storybook-args": true, checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "before", description: "Description" })))),
+        },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Checkbox with custom content next to the label and description.',
+            args: {
+                label: 'Label',
             },
-            template: (h("nv-fieldcheckbox", { id: "hidden-label", "data-storybook-args": true })),
+            template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("span", null, "Custom default slot content"))),
         },
+        // SlotMain
+        {
+            name: 'SlotMain',
+            description: 'Checkbox replacing the label and description with custom html.',
+            args: {
+                label: 'Label',
+            },
+            template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("div", { slot: "main" }, "Custom main content"))),
+        },
+        // SlotLabel
         {
             name: 'SlotLabel',
-            description: 'Checkbox button replacing the label with custom html.',
+            description: 'Checkbox replacing the label with custom html.',
             args: {
                 label: 'Label',
             },
             template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
         },
+        // SlotDescription
         {
             name: 'SlotDescription',
-            description: 'Checkbox button replacing the description with custom html.',
+            description: 'Checkbox replacing the description with custom html.',
             args: {
                 label: 'Label',
                 description: 'Description',
-                error: true,
             },
             template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
         },
+        // SlotErrorDescription
         {
             name: 'SlotErrorDescription',
-            description: 'Checkbox button replacing the error description with custom html.',
+            description: 'Checkbox replacing the error description with custom html.',
             args: {
                 label: 'Label',
                 error: true,
@@ -233,6 +263,26 @@ const NvFieldcheckboxDocs = {
             },
             template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
         },
+        // SlotCheckedIcon
+        {
+            name: 'SlotCheckedIcon',
+            description: 'Checkbox replacing the checked icon with custom html.',
+            args: {
+                label: 'Label',
+                checked: true,
+            },
+            template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("nv-icon", { slot: "checked-icon", name: "star" }))),
+        },
+        // SlotIndeterminateIcon
+        {
+            name: 'SlotIndeterminateIcon',
+            description: 'Checkbox replacing the indeterminate icon with custom html.',
+            args: {
+                label: 'Label',
+                indeterminate: true,
+            },
+            template: (h("nv-fieldcheckbox", { "data-storybook-args": true }, h("nv-icon", { slot: "indeterminate-icon", name: "minus" }))),
+        },
     ],
 };
 export default NvFieldcheckboxDocs;