@gospore/checkbox 1.0.57 → 1.0.58

package/README.md

@@ -4,60 +4,6 @@ The Checkbox component wraps a native `<input type="checkbox">` inside a styled
 label. It supports controlled boolean state as well as checkbox groups driven by
 an array value.
 
-## Installation
-
-```bash
-npm install @gospore/checkbox
-```
-
-Load the shared tokens and this package's styles once in your app entry point:
-
-```js
-import "@gospore/theme/theme.css";
-import "@gospore/checkbox/checkbox.css";
-```
-
-Include the global theme styles from `@gospore/theme` so the CSS variables that
-drive the states (hover, active, disabled, dark mode) are available.
-
-## Usage
-
-```vue
-<script setup>
-import { Theme } from "@gospore/theme";
-import { ref } from "vue";
-import { Checkbox } from "@gospore/checkbox";
-
-const newsletter = ref(false);
-const topics = ref(["design"]);
-</script>
-
-<Theme>
-    <Checkbox v-model:checked="newsletter" label="Newsletter abonnieren" />
-
-    <fieldset role="group">
-        <legend>Interessensgebiete</legend>
-        <Checkbox
-            v-for="topic in ['design', 'engineering', 'marketing']"
-            :key="topic"
-            v-model:checked="topics"
-            :value="topic"
-        >
-            {{ topic }}
-        </Checkbox>
-    </fieldset>
-</Theme>
-```
-
-## Props
-
-| Prop       | Type               | Default | Description                                                                                                                                               |
-| --- | --- | --- | --- |
-| `checked`  | `Boolean \| Array` | `false` | Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the component will push/pop `value`). Supports `v-model:checked`. |
-| `value`    | `String \| Object` | `""`    | The value inserted or removed from the bound array when used in group mode. Ignored for boolean usage.                                                    |
-| `label`    | `String`           | `""`    | Fallback label text when no default slot is provided.                                                                                                     |
-| `disabled` | `Boolean`          | `false` | Greys out the checkbox and prevents user interaction.                                                                                                     |
-
 Any additional attributes (e.g., `name`, `aria-describedby`, `required`) are
 forwarded to the hidden input element.
 
@@ -76,3 +22,7 @@ forwarded to the hidden input element.
   contrast in light and dark mode.
 - The checkmark icon is marked `aria-hidden="true"`; screen readers rely on the
   native input state and label text, keeping announcements accurate.
+
+## Skeletons
+
+This package also exports `CheckboxSkeleton` for async loading states. Import the owning package CSS plus `@gospore/skeleton/skeleton.css` so the shared skeleton primitive styles and tokens are available. Skeletons are decorative by default; put `aria-busy`, `role="status"`, or loading copy on the surrounding region when assistive technology needs an explicit loading announcement.

package/dist/Checkbox.vue.d.ts

@@ -1,53 +1,48 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
+import type { PropType } from "vue";
+type CheckboxValue = string | Record<string, unknown>;
+type CheckboxChecked = boolean | CheckboxValue[];
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the
+     * component will push/pop value). Supports v-model:checked.
+     */
     checked: {
-        type: (BooleanConstructor | ArrayConstructor)[];
-        default: boolean;
-    };
-    value: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:checked": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    checked: {
-        type: (BooleanConstructor | ArrayConstructor)[];
+        type: PropType<CheckboxChecked>;
         default: boolean;
     };
+    /**
+     * The value inserted or removed from the bound array when used in group mode. Ignored for
+     * boolean usage.
+     */
     value: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<CheckboxValue>;
         default: string;
     };
+    /** Fallback label text when no default slot is provided. */
     label: {
         type: StringConstructor;
         default: string;
     };
+    /** Greys out the checkbox and prevents user interaction. */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{
-    "onUpdate:checked"?: (...args: any[]) => any;
-}>, {
-    value: string | Record<string, any>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    value: CheckboxValue;
     label: string;
     disabled: boolean;
-    checked: boolean | unknown[];
+    checked: CheckboxChecked;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: (props: {}) => any;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/dist/CheckboxSkeleton.vue.d.ts

@@ -0,0 +1,30 @@
+import type { PropType } from "vue";
+type SkeletonDimension = string | number;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Sets the placeholder width for the label line. Numbers are converted to px. */
+    labelWidth: {
+        type: PropType<SkeletonDimension>;
+        default: string;
+    };
+    /** Enables the animated shimmer effect for the placeholder. */
+    shimmer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Sets the placeholder width for the label line. Numbers are converted to px. */
+    labelWidth: {
+        type: PropType<SkeletonDimension>;
+        default: string;
+    };
+    /** Enables the animated shimmer effect for the placeholder. */
+    shimmer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    shimmer: boolean;
+    labelWidth: SkeletonDimension;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/checkbox.cjs.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`vue`),l=require(`@fortawesome/vue-fontawesome`),u=require(`@fortawesome/free-solid-svg-icons`),d=require(`lodash/without.js`);d=s(d);var f=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`},v=f(Object.assign({name:`Checkbox`,inheritAttrs:!1},{__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},emits:[`update:checked`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useSlots)(),o=(0,c.ref)(!1),s=(0,c.ref)(n.checked),f=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),v=(0,c.computed)(()=>{let e=Object.assign({},i,{onKeyup(e){r(`keyup`,e),e.key===`Enter`&&(r(`click`),typeof s.value==`boolean`?s.value=!s.value:s.value.includes(n.value)?s.value=(0,d.default)(s.value,n.value):s.value.push(n.value))}});return delete e.class,e});return(0,c.watch)(()=>n.checked,e=>{s.value=e}),(0,c.watch)(()=>s.value,()=>{s.value!=n.checked&&r(`update:checked`,s.value)}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{class:(0,c.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,c.unref)(i).class]),title:(0,c.unref)(i).title},[(0,c.createElementVNode)(`div`,m,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":o.value}])},[(0,c.createVNode)((0,c.unref)(l.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,c.unref)(u.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,c.withDirectives)((0,c.createElementVNode)(`input`,(0,c.mergeProps)(v.value,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:n[1]||=e=>o.value=!0,onFocusout:n[2]||=e=>o.value=!1}),null,16,h),[[c.vModelCheckbox,s.value]])],2)]),(0,c.unref)(a).default?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,g,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,_,(0,c.toDisplayString)(e.label),1))],10,p))}}),[[`__scopeId`,`data-v-779b3234`]]);exports.Checkbox=v;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`vue`),l=require(`@fortawesome/vue-fontawesome`),u=require(`@fortawesome/free-solid-svg-icons`),d=require(`lodash/without.js`);d=s(d,1);let f=require(`@gospore/skeleton`);var p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`},v=(0,c.defineComponent)({name:`Checkbox`,inheritAttrs:!1,__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useSlots)(),o=(0,c.ref)(!1),s=(0,c.ref)(n.checked),f=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),v=(0,c.computed)(()=>{let{class:e,...t}=i;return Object.assign({},t,{onKeyup(e){r(`keyup`,e),!n.disabled&&e.key===`Enter`&&(r(`click`),typeof s.value==`boolean`?s.value=!s.value:s.value.includes(n.value)?s.value=(0,d.default)(s.value,n.value):s.value=[...s.value,n.value])}})});return(0,c.watch)(()=>n.checked,e=>{s.value=e}),(0,c.watch)(()=>s.value,()=>{s.value!=n.checked&&r(`update:checked`,s.value)}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{class:(0,c.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,c.unref)(i).class]),title:(0,c.unref)(i).title},[(0,c.createElementVNode)(`div`,m,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":o.value}])},[(0,c.createVNode)((0,c.unref)(l.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,c.unref)(u.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,c.withDirectives)((0,c.createElementVNode)(`input`,(0,c.mergeProps)(v.value,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:n[1]||=e=>o.value=!0,onFocusout:n[2]||=e=>o.value=!1}),null,16,h),[[c.vModelCheckbox,s.value]])],2)]),(0,c.unref)(a).default?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,g,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,_,(0,c.toDisplayString)(e.label),1))],10,p))}}),y=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},b=y(v,[[`__scopeId`,`data-v-5ac0807c`]]),x={class:`checkbox-skeleton`},S=y((0,c.defineComponent)({name:`CheckboxSkeleton`,__name:`CheckboxSkeleton`,props:{labelWidth:{type:[String,Number],default:`10rem`},shimmer:{type:Boolean,default:!1}},setup(e){return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,x,[(0,c.createVNode)((0,c.unref)(f.Skeleton),{width:`var(--size-20)`,height:`var(--size-20)`,radius:`var(--border-radius-regular)`,shimmer:e.shimmer},null,8,[`shimmer`]),(0,c.createVNode)((0,c.unref)(f.Skeleton),{width:e.labelWidth,height:`var(--size-16)`,shimmer:e.shimmer},null,8,[`width`,`shimmer`])]))}}),[[`__scopeId`,`data-v-472ff734`]]);exports.Checkbox=b,exports.CheckboxSkeleton=S;
 //# sourceMappingURL=checkbox.cjs.js.map

package/dist/checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"[\n            'checkbox',\n            { 'checkbox-disabled': disabled },\n            defaultAttrs.class,\n        ]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon\n                    class=\"checkbox-input-icon\"\n                    :icon=\"faCheck\"\n                    aria-hidden=\"true\"\n                />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    checked: {\n        type: [Boolean, Array],\n        default: false,\n    },\n    value: {\n        type: [String, Object],\n        default: \"\",\n    },\n    label: {\n        type: String,\n        default: \"\",\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    let attrs = Object.assign({}, defaultAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n            // eslint-disable-next-line vue/require-explicit-emits\n            emit(\"keyup\", event);\n            if (event.key === \"Enter\") {\n                // eslint-disable-next-line vue/require-explicit-emits\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(\n                            internalChecked.value,\n                            props.value,\n                        );\n                    } else {\n                        internalChecked.value.push(props.value);\n                    }\n                }\n            }\n        },\n    });\n    // Only assign events to the input element, classes are assigned to the outer label.\n    delete attrs.class;\n    return attrs;\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n"],"mappings":"kpCAoDA,IAAM,EAAQ,EAkBR,EAAO,EACP,GAAA,EAAA,EAAA,WAAyB,CACzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAsB,EAAM,QAAQ,CAEpC,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,IAAI,EAAQ,OAAO,OAAO,EAAE,CAAE,EAAc,CAExC,QAAQ,EAAO,CAGX,EAAK,QAAS,EAAM,CAChB,EAAM,MAAQ,UAEd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SACZ,EAAgB,MAChB,EAAM,MACT,CAED,EAAgB,MAAM,KAAK,EAAM,MAAM,GAK1D,CAAC,CAGF,OADA,OAAO,EAAM,MACN,GACT,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDAxFW,QAAA,CArCH,OAAA,EAAA,EAAA,gBAAK,iCAA+D,EAAA,SAAQ,aAAgB,EAAY,CAAC,QAKzG,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCA2Bf,MAzBN,EAyBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAtBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAYvK,EAAA,gBAAA,CAAA,CAHE,MAAM,sBACL,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CACd,cAAY,uEAUd,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,iCACJ,EAAe,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"checkbox.cjs.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n"],"mappings":"imCAgDA,IAAM,EAAQ,EA4BR,EAAO,EAKP,GAAA,EAAA,EAAA,WAAyB,CAIzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAuC,EAAM,QAAQ,CAErD,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,EAAE,CAAE,EAAY,CAEjC,QAAQ,EAAsB,CAG1B,EAAK,QAAS,EAAM,CAChB,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SAAgB,EAAgB,MAAO,EAAM,MAAM,CAEnE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,MAAM,GAKlF,CAAC,EACJ,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDA3GW,QAAA,CA7BH,OAAA,EAAA,EAAA,gBAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,SAAQ,aAAI,EAAY,CAAC,MAAK,CAAA,CACzE,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAlBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,gBAAA,CAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CAAE,cAAY,uEASzE,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA,wXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAFA,EAAA,SAAA,CAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,SAAA,CAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}

package/dist/checkbox.css

@@ -1,2 +1,2 @@
-.theme{--checkbox-background-default-default-light:var(--color-background-input-light);--checkbox-background-default-default-dark:var(--color-background-input-dark);--checkbox-background-default-hover-light:var(--color-background-input-hovered-light);--checkbox-background-default-hover-dark:var(--color-background-input-hovered-dark);--checkbox-background-default-active-light:var(--color-background-brand-100-light);--checkbox-background-default-active-dark:var(--color-background-brand-100-dark);--checkbox-background-default-disabled-light:var(--color-background-disabled-light);--checkbox-background-default-disabled-dark:var(--color-background-disabled-dark);--checkbox-background-checked-default-light:var(--color-background-brand-200-light);--checkbox-background-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-background-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-background-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-background-checked-active-light:var(--color-background-brand-200-pressed-light);--checkbox-background-checked-active-dark:var(--color-background-brand-200-pressed-dark);--checkbox-background-checked-disabled-light:var(--color-background-disabled-light);--checkbox-background-checked-disabled-dark:var(--color-background-disabled-dark);--checkbox-color-default-default-light:transparent;--checkbox-color-default-default-dark:transparent;--checkbox-color-default-hover-light:transparent;--checkbox-color-default-hover-dark:transparent;--checkbox-color-default-active-light:var(--color-text-brand-light);--checkbox-color-default-active-dark:var(--color-text-brand-dark);--checkbox-color-default-disabled-light:transparent;--checkbox-color-default-disabled-dark:transparent;--checkbox-color-checked-default-light:var(--color-brand-on-strong-light);--checkbox-color-checked-default-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-hover-light:var(--color-brand-on-strong-light);--checkbox-color-checked-hover-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-active-light:var(--color-background-brand-100-light);--checkbox-color-checked-active-dark:var(--color-background-brand-100-dark);--checkbox-color-checked-disabled-light:var(--color-text-disabled-light);--checkbox-color-checked-disabled-dark:var(--color-text-disabled-dark);--checkbox-border-color-default-default-light:var(--color-border-input-light);--checkbox-border-color-default-default-dark:var(--color-border-input-dark);--checkbox-border-color-default-hover-light:var(--color-border-input-light);--checkbox-border-color-default-hover-dark:var(--color-border-input-dark);--checkbox-border-color-default-active-light:var(--color-background-brand-100-pressed-light);--checkbox-border-color-default-active-dark:var(--color-background-brand-100-pressed-dark);--checkbox-border-color-default-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-default-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-border-color-checked-default-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-border-color-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-border-color-checked-active-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-active-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-checked-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-height:14px;--checkbox-width:14px;--checkbox-padding:2px var(--size-0);--checkbox-line-height:var(--size-24);--checkbox-label-padding:var(--size-0) var(--size-4);--checkbox-border-radius:var(--border-radius-regular);--checkbox-border-width:var(--border-width);--checkbox-transition:all var(--transition-100ms-ease-in-out);--checkbox-focus-outline-color-light:var(--color-border-focused-light);--checkbox-focus-outline-color-dark:var(--color-border-focused-dark)}.checkbox[data-v-779b3234]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-779b3234]{padding:5px}.checkbox .checkbox-input[data-v-779b3234]{height:var(--checkbox-height);width:var(--checkbox-width);box-sizing:border-box;border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid;background-color:var(--checkbox-background-default-default-light);color:var(--checkbox-color-default-default-light);border-color:var(--checkbox-border-color-default-default-light);transition:var(--checkbox-transition);justify-content:center;align-items:center;display:flex}.checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-light);color:var(--checkbox-color-default-hover-light);border-color:var(--checkbox-border-color-default-hover-light)}.checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-light);color:var(--checkbox-color-default-active-light);border-color:var(--checkbox-border-color-default-active-light)}.checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-light);color:var(--checkbox-color-checked-default-light);border-color:var(--checkbox-border-color-checked-default-light)}.checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-light);color:var(--checkbox-color-checked-hover-light);border-color:var(--checkbox-border-color-checked-hover-light)}.checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-light);color:var(--checkbox-color-checked-active-light);border-color:var(--checkbox-border-color-checked-active-light)}.checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-779b3234],.checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-light);color:var(--checkbox-color-default-disabled-light);border-color:var(--checkbox-border-color-default-disabled-light)}.checkbox-disabled .checkbox-checked[data-v-779b3234],.checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-light);color:var(--checkbox-color-checked-disabled-light);border-color:var(--checkbox-border-color-checked-disabled-light)}.checkbox-input-icon[data-v-779b3234]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-779b3234]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-779b3234]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-default-dark);color:var(--checkbox-color-default-default-dark);border-color:var(--checkbox-border-color-default-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-dark);color:var(--checkbox-color-default-hover-dark);border-color:var(--checkbox-border-color-default-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-dark);color:var(--checkbox-color-default-active-dark);border-color:var(--checkbox-border-color-default-active-dark)}[dark-mode=true] .checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-dark);color:var(--checkbox-color-checked-default-dark);border-color:var(--checkbox-border-color-checked-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-dark);color:var(--checkbox-color-checked-hover-dark);border-color:var(--checkbox-border-color-checked-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-dark);color:var(--checkbox-color-checked-active-dark);border-color:var(--checkbox-border-color-checked-active-dark)}[dark-mode=true] .checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-dark);color:var(--checkbox-color-default-disabled-dark);border-color:var(--checkbox-border-color-default-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-checked[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}[dark-mode=true] [data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-dark)!important}
+.theme{--checkbox-background-default-default-light:var(--color-background-input-light);--checkbox-background-default-default-dark:var(--color-background-input-dark);--checkbox-background-default-hover-light:var(--color-background-input-hovered-light);--checkbox-background-default-hover-dark:var(--color-background-input-hovered-dark);--checkbox-background-default-active-light:var(--color-background-brand-100-light);--checkbox-background-default-active-dark:var(--color-background-brand-100-dark);--checkbox-background-default-disabled-light:var(--color-background-disabled-light);--checkbox-background-default-disabled-dark:var(--color-background-disabled-dark);--checkbox-background-checked-default-light:var(--color-background-brand-200-light);--checkbox-background-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-background-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-background-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-background-checked-active-light:var(--color-background-brand-200-pressed-light);--checkbox-background-checked-active-dark:var(--color-background-brand-200-pressed-dark);--checkbox-background-checked-disabled-light:var(--color-background-disabled-light);--checkbox-background-checked-disabled-dark:var(--color-background-disabled-dark);--checkbox-color-default-default-light:transparent;--checkbox-color-default-default-dark:transparent;--checkbox-color-default-hover-light:transparent;--checkbox-color-default-hover-dark:transparent;--checkbox-color-default-active-light:var(--color-text-brand-light);--checkbox-color-default-active-dark:var(--color-text-brand-dark);--checkbox-color-default-disabled-light:transparent;--checkbox-color-default-disabled-dark:transparent;--checkbox-color-checked-default-light:var(--color-brand-on-strong-light);--checkbox-color-checked-default-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-hover-light:var(--color-brand-on-strong-light);--checkbox-color-checked-hover-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-active-light:var(--color-background-brand-100-light);--checkbox-color-checked-active-dark:var(--color-background-brand-100-dark);--checkbox-color-checked-disabled-light:var(--color-text-disabled-light);--checkbox-color-checked-disabled-dark:var(--color-text-disabled-dark);--checkbox-border-color-default-default-light:var(--color-border-input-light);--checkbox-border-color-default-default-dark:var(--color-border-input-dark);--checkbox-border-color-default-hover-light:var(--color-border-input-light);--checkbox-border-color-default-hover-dark:var(--color-border-input-dark);--checkbox-border-color-default-active-light:var(--color-background-brand-100-pressed-light);--checkbox-border-color-default-active-dark:var(--color-background-brand-100-pressed-dark);--checkbox-border-color-default-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-default-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-border-color-checked-default-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-border-color-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-border-color-checked-active-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-active-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-checked-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-height:14px;--checkbox-width:14px;--checkbox-padding:2px var(--size-0);--checkbox-line-height:var(--size-24);--checkbox-label-padding:var(--size-0) var(--size-4);--checkbox-border-radius:var(--border-radius-regular);--checkbox-border-width:var(--border-width);--checkbox-transition:all var(--transition-100ms-ease-in-out);--checkbox-focus-outline-color-light:var(--color-border-focused-light);--checkbox-focus-outline-color-dark:var(--color-border-focused-dark)}.checkbox[data-v-5ac0807c]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-5ac0807c]{padding:5px}.checkbox .checkbox-input[data-v-5ac0807c]{height:var(--checkbox-height);width:var(--checkbox-width);box-sizing:border-box;border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid;background-color:var(--checkbox-background-default-default-light);color:var(--checkbox-color-default-default-light);border-color:var(--checkbox-border-color-default-default-light);transition:var(--checkbox-transition);justify-content:center;align-items:center;display:flex}.checkbox:hover .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-hover-light);color:var(--checkbox-color-default-hover-light);border-color:var(--checkbox-border-color-default-hover-light)}.checkbox:active .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-active-light);color:var(--checkbox-color-default-active-light);border-color:var(--checkbox-border-color-default-active-light)}.checkbox .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-default-light);color:var(--checkbox-color-checked-default-light);border-color:var(--checkbox-border-color-checked-default-light)}.checkbox:hover .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-hover-light);color:var(--checkbox-color-checked-hover-light);border-color:var(--checkbox-border-color-checked-hover-light)}.checkbox:active .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-active-light);color:var(--checkbox-color-checked-active-light);border-color:var(--checkbox-border-color-checked-active-light)}.checkbox-disabled[data-v-5ac0807c]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-5ac0807c],.checkbox-disabled:hover .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-disabled-light);color:var(--checkbox-color-default-disabled-light);border-color:var(--checkbox-border-color-default-disabled-light)}.checkbox-disabled .checkbox-checked[data-v-5ac0807c],.checkbox-disabled:hover .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-disabled-light);color:var(--checkbox-color-checked-disabled-light);border-color:var(--checkbox-border-color-checked-disabled-light)}.checkbox-input-icon[data-v-5ac0807c]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-5ac0807c]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-5ac0807c]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-5ac0807c]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-default-dark);color:var(--checkbox-color-default-default-dark);border-color:var(--checkbox-border-color-default-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-hover-dark);color:var(--checkbox-color-default-hover-dark);border-color:var(--checkbox-border-color-default-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-active-dark);color:var(--checkbox-color-default-active-dark);border-color:var(--checkbox-border-color-default-active-dark)}[dark-mode=true] .checkbox .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-default-dark);color:var(--checkbox-color-checked-default-dark);border-color:var(--checkbox-border-color-checked-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-hover-dark);color:var(--checkbox-color-checked-hover-dark);border-color:var(--checkbox-border-color-checked-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-active-dark);color:var(--checkbox-color-checked-active-dark);border-color:var(--checkbox-border-color-checked-active-dark)}[dark-mode=true] .checkbox-disabled[data-v-5ac0807c]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-5ac0807c],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-5ac0807c]{background-color:var(--checkbox-background-default-disabled-dark);color:var(--checkbox-color-default-disabled-dark);border-color:var(--checkbox-border-color-default-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-checked[data-v-5ac0807c],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-5ac0807c]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}[dark-mode=true] [data-whatinput=keyboard] .checkbox-focused[data-v-5ac0807c]{border-color:var(--checkbox-focus-outline-color-dark)!important}.checkbox-skeleton[data-v-472ff734]{align-items:center;gap:var(--size-8);display:inline-flex}
 /*$vite$:1*/

package/dist/checkbox.es.js

@@ -1,22 +1,18 @@
-import { computed as e, createElementBlock as t, createElementVNode as n, createVNode as r, mergeProps as i, normalizeClass as a, openBlock as o, ref as s, renderSlot as c, toDisplayString as l, unref as u, useAttrs as d, useSlots as f, vModelCheckbox as p, watch as m, withDirectives as h } from "vue";
-import { FontAwesomeIcon as g } from "@fortawesome/vue-fontawesome";
-import { faCheck as _ } from "@fortawesome/free-solid-svg-icons";
-import v from "lodash/without.js";
-//#region \0plugin-vue:export-helper
-var y = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-}, b = ["title"], x = { class: "checkbox-input-container" }, S = ["value", "disabled"], C = {
+import { computed as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeProps as a, normalizeClass as o, openBlock as s, ref as c, renderSlot as l, toDisplayString as u, unref as d, useAttrs as f, useSlots as p, vModelCheckbox as m, watch as h, withDirectives as g } from "vue";
+import { FontAwesomeIcon as _ } from "@fortawesome/vue-fontawesome";
+import { faCheck as v } from "@fortawesome/free-solid-svg-icons";
+import y from "lodash/without.js";
+import { Skeleton as b } from "@gospore/skeleton";
+//#region src/Checkbox.vue?vue&type=script&setup=true&lang.ts
+var x = ["title"], S = { class: "checkbox-input-container" }, C = ["value", "disabled"], w = {
 	key: 0,
 	class: "checkbox-label"
-}, w = {
+}, T = {
 	key: 1,
 	class: "checkbox-label"
-}, T = /* @__PURE__ */ y(/* @__PURE__ */ Object.assign({
+}, E = /* @__PURE__ */ i({
 	name: "Checkbox",
-	inheritAttrs: !1
-}, {
+	inheritAttrs: !1,
 	__name: "Checkbox",
 	props: {
 		checked: {
@@ -36,43 +32,71 @@ var y = (e, t) => {
 			default: !1
 		}
 	},
-	emits: ["update:checked"],
-	setup(y, { emit: T }) {
-		let E = y, D = T, O = d(), k = f(), A = s(!1), j = s(E.checked), M = e(() => typeof j.value == "boolean" ? j.value : j.value.includes(E.value)), N = e(() => {
-			let e = Object.assign({}, O, { onKeyup(e) {
-				D("keyup", e), e.key === "Enter" && (D("click"), typeof j.value == "boolean" ? j.value = !j.value : j.value.includes(E.value) ? j.value = v(j.value, E.value) : j.value.push(E.value));
+	setup(i, { emit: b }) {
+		let E = i, D = b, O = f(), k = p(), A = c(!1), j = c(E.checked), M = e(() => typeof j.value == "boolean" ? j.value : j.value.includes(E.value)), N = e(() => {
+			let { class: e, ...t } = O;
+			return Object.assign({}, t, { onKeyup(e) {
+				D("keyup", e), !E.disabled && e.key === "Enter" && (D("click"), typeof j.value == "boolean" ? j.value = !j.value : j.value.includes(E.value) ? j.value = y(j.value, E.value) : j.value = [...j.value, E.value]);
 			} });
-			return delete e.class, e;
 		});
-		return m(() => E.checked, (e) => {
+		return h(() => E.checked, (e) => {
 			j.value = e;
-		}), m(() => j.value, () => {
+		}), h(() => j.value, () => {
 			j.value != E.checked && D("update:checked", j.value);
-		}), (e, s) => (o(), t("label", {
-			class: a([
+		}), (e, c) => (s(), t("label", {
+			class: o([
 				"checkbox",
-				{ "checkbox-disabled": y.disabled },
-				u(O).class
+				{ "checkbox-disabled": i.disabled },
+				d(O).class
 			]),
-			title: u(O).title
-		}, [n("div", x, [n("span", { class: a(["checkbox-input", {
+			title: d(O).title
+		}, [n("div", S, [n("span", { class: o(["checkbox-input", {
 			"checkbox-checked": M.value,
 			"checkbox-focused": A.value
-		}]) }, [r(u(g), {
+		}]) }, [r(d(_), {
 			class: "checkbox-input-icon",
-			icon: u(_),
+			icon: d(v),
 			"aria-hidden": "true"
-		}, null, 8, ["icon"]), h(n("input", i(N.value, {
-			"onUpdate:modelValue": s[0] ||= (e) => j.value = e,
+		}, null, 8, ["icon"]), g(n("input", a(N.value, {
+			"onUpdate:modelValue": c[0] ||= (e) => j.value = e,
 			type: "checkbox",
-			value: y.value,
-			disabled: y.disabled,
-			onFocus: s[1] ||= (e) => A.value = !0,
-			onFocusout: s[2] ||= (e) => A.value = !1
-		}), null, 16, S), [[p, j.value]])], 2)]), u(k).default ? (o(), t("div", C, [c(e.$slots, "default", {}, void 0, !0)])) : (o(), t("span", w, l(y.label), 1))], 10, b));
+			value: i.value,
+			disabled: i.disabled,
+			onFocus: c[1] ||= (e) => A.value = !0,
+			onFocusout: c[2] ||= (e) => A.value = !1
+		}), null, 16, C), [[m, j.value]])], 2)]), d(k).default ? (s(), t("div", w, [l(e.$slots, "default", {}, void 0, !0)])) : (s(), t("span", T, u(i.label), 1))], 10, x));
+	}
+}), D = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, O = /* @__PURE__ */ D(E, [["__scopeId", "data-v-5ac0807c"]]), k = { class: "checkbox-skeleton" }, A = /* @__PURE__ */ D(/* @__PURE__ */ i({
+	name: "CheckboxSkeleton",
+	__name: "CheckboxSkeleton",
+	props: {
+		labelWidth: {
+			type: [String, Number],
+			default: "10rem"
+		},
+		shimmer: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (n, i) => (s(), t("div", k, [r(d(b), {
+			width: "var(--size-20)",
+			height: "var(--size-20)",
+			radius: "var(--border-radius-regular)",
+			shimmer: e.shimmer
+		}, null, 8, ["shimmer"]), r(d(b), {
+			width: e.labelWidth,
+			height: "var(--size-16)",
+			shimmer: e.shimmer
+		}, null, 8, ["width", "shimmer"])]));
 	}
-}), [["__scopeId", "data-v-779b3234"]]);
+}), [["__scopeId", "data-v-472ff734"]]);
 //#endregion
-export { T as Checkbox };
+export { O as Checkbox, A as CheckboxSkeleton };
 
 //# sourceMappingURL=checkbox.es.js.map

package/dist/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"[\n            'checkbox',\n            { 'checkbox-disabled': disabled },\n            defaultAttrs.class,\n        ]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon\n                    class=\"checkbox-input-icon\"\n                    :icon=\"faCheck\"\n                    aria-hidden=\"true\"\n                />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    checked: {\n        type: [Boolean, Array],\n        default: false,\n    },\n    value: {\n        type: [String, Object],\n        default: \"\",\n    },\n    label: {\n        type: String,\n        default: \"\",\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    let attrs = Object.assign({}, defaultAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n            // eslint-disable-next-line vue/require-explicit-emits\n            emit(\"keyup\", event);\n            if (event.key === \"Enter\") {\n                // eslint-disable-next-line vue/require-explicit-emits\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(\n                            internalChecked.value,\n                            props.value,\n                        );\n                    } else {\n                        internalChecked.value.push(props.value);\n                    }\n                }\n            }\n        },\n    });\n    // Only assign events to the input element, classes are assigned to the outer label.\n    delete attrs.class;\n    return attrs;\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GAkBR,IAAO,GACP,IAAe,GAAU,EACzB,IAAQ,GAAU,EAClB,IAAU,EAAI,GAAM,EACpB,IAAkB,EAAI,EAAM,QAAQ,EAEpC,IAAY,QACV,OAAO,EAAgB,SAAU,YAC1B,EAAgB,QAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,EACI,IAAQ,QAAe;GACzB,IAAI,IAAQ,OAAO,OAAO,EAAE,EAAE,GAAc,EAExC,QAAQ,GAAO;AAIX,IADA,EAAK,SAAS,EAAM,EAChB,EAAM,QAAQ,YAEd,EAAK,QAAQ,EACT,OAAO,EAAgB,SAAS,YAChC,EAAgB,QAAQ,CAAC,EAAgB,QAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,GAC3C,EAAgB,QAAQ,EACpB,EAAgB,OAChB,EAAM,MACT,GAED,EAAgB,MAAM,KAAK,EAAM,MAAM;MAK1D,CAAC;AAGF,UADA,OAAO,EAAM,OACN;IACT;SAEF,QACU,EAAM,UACX,MAAY;AACT,KAAgB,QAAQ;IAE/B,EACD,QACU,EAAgB,aAChB;AAEF,GAAI,EAAgB,SAAS,EAAM,WAC/B,EAAK,kBAAkB,EAAgB,MAAM;IAGxD,kBA9HG,EAsCQ,SAAA;GArCH,OAAK,EAAA;;2BAA+D,EAAA,UAAQ;IAAgB,EAAA,EAAY,CAAC;;GAKzG,OAAO,EAAA,EAAY,CAAC;MAErB,EAyBM,OAzBN,GAyBM,CAxBF,EAuBO,QAAA,EAtBF,OAAK,EAAA,CAAA,kBAAA;uBAA4G,EAAA;uBAAuD,EAAA;UAQzK,EAIE,EAAA,EAAA,EAAA;GAHE,OAAM;GACL,MAAM,EAAA,EAAO;GACd,eAAY;2BAEhB,EAQE,SARF,EACY,EAOV,OAPe;0CACJ,EAAe,QAAA;GACxB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;GACd,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;yBALT,EAAA,MAAe,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EASzB,EAAA,EAAK,CAAC,WAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADF,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,KAAA,GAAA,EAEZ,EAAsD,QAAtD,GAAsD,EAAf,EAAA,MAAK,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"checkbox.es.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GA4BR,IAAO,GAKP,IAAe,GAAU,EAIzB,IAAQ,GAAU,EAClB,IAAU,EAAI,GAAM,EACpB,IAAkB,EAAqB,EAAM,QAAQ,EAErD,IAAY,QACV,OAAO,EAAgB,SAAU,YAC1B,EAAgB,QAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,EACI,IAAQ,QAAe;GACzB,IAAM,EAAE,OAAO,GAAc,GAAG,MAAe;GAE/C,OAAO,OAAO,OAAO,EAAE,EAAE,GAAY,EAEjC,QAAQ,GAAsB;IAG1B,EAAK,SAAS,EAAM,EAChB,GAAM,YAGN,EAAM,QAAQ,YACd,EAAK,QAAQ,EACT,OAAO,EAAgB,SAAS,YAChC,EAAgB,QAAQ,CAAC,EAAgB,QAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,GAC3C,EAAgB,QAAQ,EAAQ,EAAgB,OAAO,EAAM,MAAM,GAEnE,EAAgB,QAAQ,CAAC,GAAG,EAAgB,OAAO,EAAM,MAAM;MAKlF,CAAC;IACJ;SAEF,QACU,EAAM,UACX,MAAY;GACT,EAAgB,QAAQ;IAE/B,EACD,QACU,EAAgB,aAChB;GAEF,AAAI,EAAgB,SAAS,EAAM,WAC/B,EAAK,kBAAkB,EAAgB,MAAM;IAGxD,kBAzIG,EA8BQ,SAAA;GA7BH,OAAK,EAAA;IAAA;IAAA,EAAA,qBAAsC,EAAA,UAAQ;IAAI,EAAA,EAAY,CAAC;IAAK,CAAA;GACzE,OAAO,EAAA,EAAY,CAAC;MAErB,EAqBM,OArBN,GAqBM,CApBF,EAmBO,QAAA,EAlBF,OAAK,EAAA,CAAA,kBAAA;uBAA4G,EAAA;uBAAuD,EAAA;UAQzK,EAAoF,EAAA,EAAA,EAAA;GAAjE,OAAM;GAAuB,MAAM,EAAA,EAAO;GAAE,eAAY;2BAC3E,EAQE,SARF,EACY,EAOV,OAPe;4CACW,QAAA;GACxB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;GACd,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;yBALT,EAAA,MAAe,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EASzB,EAAA,EAAK,CAAC,WAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADF,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,KAAA,GAAA,EAEZ,EAAsD,QAAtD,GAAsD,EAAf,EAAA,MAAK,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA;;;;;;;;;;;;;;;;;;;;yBE7BhD,EAQM,OARN,GAQM,CAPF,EAKE,EAAA,EAAA,EAAA;GAJE,OAAM;GACN,QAAO;GACP,QAAO;GACN,SAAS,EAAA;4BAEd,EAA2E,EAAA,EAAA,EAAA;GAAhE,OAAO,EAAA;GAAY,QAAO;GAAkB,SAAS,EAAA"}

package/dist/checkbox.umd.js

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@fortawesome/vue-fontawesome`),require(`@fortawesome/free-solid-svg-icons`),require(`lodash/without.js`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fortawesome/vue-fontawesome`,`@fortawesome/free-solid-svg-icons`,`lodash/without.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.checkbox={},e.Vue,e.VueFontawesome,e.FreeSolidIcons,e.without))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};i=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(i);var f=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`};e.Checkbox=f(Object.assign({name:`Checkbox`,inheritAttrs:!1},{__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},emits:[`update:checked`],setup(e,{emit:a}){let o=e,s=a,c=(0,t.useAttrs)(),l=(0,t.useSlots)(),u=(0,t.ref)(!1),d=(0,t.ref)(o.checked),f=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),v=(0,t.computed)(()=>{let e=Object.assign({},c,{onKeyup(e){s(`keyup`,e),e.key===`Enter`&&(s(`click`),typeof d.value==`boolean`?d.value=!d.value:d.value.includes(o.value)?d.value=(0,i.default)(d.value,o.value):d.value.push(o.value))}});return delete e.class,e});return(0,t.watch)(()=>o.checked,e=>{d.value=e}),(0,t.watch)(()=>d.value,()=>{d.value!=o.checked&&s(`update:checked`,d.value)}),(i,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,t.unref)(c).class]),title:(0,t.unref)(c).title},[(0,t.createElementVNode)(`div`,m,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":u.value}])},[(0,t.createVNode)((0,t.unref)(n.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,t.unref)(r.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,t.withDirectives)((0,t.createElementVNode)(`input`,(0,t.mergeProps)(v.value,{"onUpdate:modelValue":a[0]||=e=>d.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:a[1]||=e=>u.value=!0,onFocusout:a[2]||=e=>u.value=!1}),null,16,h),[[t.vModelCheckbox,d.value]])],2)]),(0,t.unref)(l).default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,_,(0,t.toDisplayString)(e.label),1))],10,p))}}),[[`__scopeId`,`data-v-779b3234`]])});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@fortawesome/vue-fontawesome`),require(`@fortawesome/free-solid-svg-icons`),require(`lodash/without.js`),require(`@gospore/skeleton`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fortawesome/vue-fontawesome`,`@fortawesome/free-solid-svg-icons`,`lodash/without.js`,`@gospore/skeleton`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.checkbox={},e.Vue,e.VueFontawesome,e.FreeSolidIcons,e.without,e.Skeleton))})(this,function(e,t,n,r,i,a){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=l(t),a=0,o=i.length,u;a<o;a++)u=i[a],!d.call(e,u)&&u!==n&&s(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(r=c(t,u))||r.enumerable});return e};i=((e,t,n)=>(n=e==null?{}:o(u(e)),f(t||!e||!e.__esModule?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);var p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`},v=(0,t.defineComponent)({name:`Checkbox`,inheritAttrs:!1,__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},setup(e,{emit:a}){let o=e,s=a,c=(0,t.useAttrs)(),l=(0,t.useSlots)(),u=(0,t.ref)(!1),d=(0,t.ref)(o.checked),f=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),v=(0,t.computed)(()=>{let{class:e,...t}=c;return Object.assign({},t,{onKeyup(e){s(`keyup`,e),!o.disabled&&e.key===`Enter`&&(s(`click`),typeof d.value==`boolean`?d.value=!d.value:d.value.includes(o.value)?d.value=(0,i.default)(d.value,o.value):d.value=[...d.value,o.value])}})});return(0,t.watch)(()=>o.checked,e=>{d.value=e}),(0,t.watch)(()=>d.value,()=>{d.value!=o.checked&&s(`update:checked`,d.value)}),(i,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,t.unref)(c).class]),title:(0,t.unref)(c).title},[(0,t.createElementVNode)(`div`,m,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":u.value}])},[(0,t.createVNode)((0,t.unref)(n.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,t.unref)(r.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,t.withDirectives)((0,t.createElementVNode)(`input`,(0,t.mergeProps)(v.value,{"onUpdate:modelValue":a[0]||=e=>d.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:a[1]||=e=>u.value=!0,onFocusout:a[2]||=e=>u.value=!1}),null,16,h),[[t.vModelCheckbox,d.value]])],2)]),(0,t.unref)(l).default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,_,(0,t.toDisplayString)(e.label),1))],10,p))}}),y=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},b=y(v,[[`__scopeId`,`data-v-5ac0807c`]]),x={class:`checkbox-skeleton`},S=y((0,t.defineComponent)({name:`CheckboxSkeleton`,__name:`CheckboxSkeleton`,props:{labelWidth:{type:[String,Number],default:`10rem`},shimmer:{type:Boolean,default:!1}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,x,[(0,t.createVNode)((0,t.unref)(a.Skeleton),{width:`var(--size-20)`,height:`var(--size-20)`,radius:`var(--border-radius-regular)`,shimmer:e.shimmer},null,8,[`shimmer`]),(0,t.createVNode)((0,t.unref)(a.Skeleton),{width:e.labelWidth,height:`var(--size-16)`,shimmer:e.shimmer},null,8,[`width`,`shimmer`])]))}}),[[`__scopeId`,`data-v-472ff734`]]);e.Checkbox=b,e.CheckboxSkeleton=S});
 //# sourceMappingURL=checkbox.umd.js.map

package/dist/checkbox.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.umd.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"[\n            'checkbox',\n            { 'checkbox-disabled': disabled },\n            defaultAttrs.class,\n        ]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon\n                    class=\"checkbox-input-icon\"\n                    :icon=\"faCheck\"\n                    aria-hidden=\"true\"\n                />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    checked: {\n        type: [Boolean, Array],\n        default: false,\n    },\n    value: {\n        type: [String, Object],\n        default: \"\",\n    },\n    label: {\n        type: String,\n        default: \"\",\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    let attrs = Object.assign({}, defaultAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n            // eslint-disable-next-line vue/require-explicit-emits\n            emit(\"keyup\", event);\n            if (event.key === \"Enter\") {\n                // eslint-disable-next-line vue/require-explicit-emits\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(\n                            internalChecked.value,\n                            props.value,\n                        );\n                    } else {\n                        internalChecked.value.push(props.value);\n                    }\n                }\n            }\n        },\n    });\n    // Only assign events to the input element, classes are assigned to the outer label.\n    delete attrs.class;\n    return attrs;\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n"],"mappings":"i/CAoDA,IAAM,EAAQ,EAkBR,EAAO,EACP,GAAA,EAAA,EAAA,WAAyB,CACzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAsB,EAAM,QAAQ,CAEpC,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,IAAI,EAAQ,OAAO,OAAO,EAAE,CAAE,EAAc,CAExC,QAAQ,EAAO,CAGX,EAAK,QAAS,EAAM,CAChB,EAAM,MAAQ,UAEd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SACZ,EAAgB,MAChB,EAAM,MACT,CAED,EAAgB,MAAM,KAAK,EAAM,MAAM,GAK1D,CAAC,CAGF,OADA,OAAO,EAAM,MACN,GACT,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDAxFW,QAAA,CArCH,OAAA,EAAA,EAAA,gBAAK,iCAA+D,EAAA,SAAQ,aAAgB,EAAY,CAAC,QAKzG,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCA2Bf,MAzBN,EAyBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAtBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAYvK,EAAA,gBAAA,CAAA,CAHE,MAAM,sBACL,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CACd,cAAY,uEAUd,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,iCACJ,EAAe,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"checkbox.umd.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    /**\n     * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n     * component will push/pop value). Supports v-model:checked.\n     */\n    checked: {\n        type: [Boolean, Array] as PropType<CheckboxChecked>,\n        default: false,\n    },\n    /**\n     * The value inserted or removed from the bound array when used in group mode. Ignored for\n     * boolean usage.\n     */\n    value: {\n        type: [String, Object] as PropType<CheckboxValue>,\n        default: \"\",\n    },\n    /** Fallback label text when no default slot is provided. */\n    label: {\n        type: String,\n        default: \"\",\n    },\n    /** Greys out the checkbox and prevents user interaction. */\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits() as {\n    (event: \"update:checked\", value: CheckboxChecked): void;\n    (event: \"keyup\", value: KeyboardEvent): void;\n    (event: \"click\"): void;\n};\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n    void omittedClass;\n    return Object.assign({}, inputAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(internalChecked.value, props.value);\n                    } else {\n                        internalChecked.value = [...internalChecked.value, props.value];\n                    }\n                }\n            }\n        },\n    });\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n","<template>\n    <div class=\"checkbox-skeleton\">\n        <Skeleton\n            width=\"var(--size-20)\"\n            height=\"var(--size-20)\"\n            radius=\"var(--border-radius-regular)\"\n            :shimmer=\"shimmer\"\n        />\n        <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n    /** Sets the placeholder width for the label line. Numbers are converted to px. */\n    labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n    /** Enables the animated shimmer effect for the placeholder. */\n    shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--size-8);\n}\n</style>\n"],"mappings":"k9CAgDA,IAAM,EAAQ,EA4BR,EAAO,EAKP,GAAA,EAAA,EAAA,WAAyB,CAIzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAuC,EAAM,QAAQ,CAErD,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,EAAE,CAAE,EAAY,CAEjC,QAAQ,EAAsB,CAG1B,EAAK,QAAS,EAAM,CAChB,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SAAgB,EAAgB,MAAO,EAAM,MAAM,CAEnE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,MAAM,GAKlF,CAAC,EACJ,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDA3GW,QAAA,CA7BH,OAAA,EAAA,EAAA,gBAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,SAAQ,aAAI,EAAY,CAAC,MAAK,CAAA,CACzE,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAlBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,gBAAA,CAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CAAE,cAAY,uEASzE,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA,wXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAFA,EAAA,SAAA,CAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,SAAA,CAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as Checkbox } from "./Checkbox.vue";
+export { default as CheckboxSkeleton } from "./CheckboxSkeleton.vue";

package/package.json

@@ -1,14 +1,16 @@
 {
     "name": "@gospore/checkbox",
-    "version": "1.0.57",
+    "version": "1.0.58",
+    "gitHead": "964fb8688e7b2790778d07ecf3944381fcd11bfe",
     "description": "",
     "author": "Gospore",
-    "type": "module",
     "files": [
         "dist"
     ],
+    "type": "module",
     "main": "./dist/checkbox.cjs.js",
     "module": "./dist/checkbox.es.js",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "import": "./dist/checkbox.es.js",
@@ -24,20 +26,19 @@
     "scripts": {
         "build": "vite build"
     },
-    "peerDependencies": {
-        "vue": "^3.4.20"
-    },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/vue-fontawesome": "^3.2.0",
+        "@gospore/skeleton": "^1.0.1",
         "lodash": "^4.18.1"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.6",
         "unplugin-vue-macros": "^2.14.5",
-        "vite": "^8.0.10"
+        "vite": "^8.0.12"
     },
-    "gitHead": "a99173b01372c32667e2f8e71af93c692f7e5a4e",
-    "types": "./dist/index.d.ts"
+    "peerDependencies": {
+        "vue": "^3.4.20"
+    }
 }