@gospore/checkbox 1.0.72 → 1.0.73

package/dist/checkbox.cjs

@@ -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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,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");function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let t=new WeakSet,n=new WeakSet,r=[{kind:`value`,value:e}];for(;r.length>0;){let e=r.pop();if(e.kind===`leave-array`){t.delete(e.array);continue}let i=e.value;if(Array.isArray(i)){g(r,i,t);continue}if(typeof i==`string`){if(i.trim()!==``)return!0;continue}if(typeof i==`number`)return!0;if((0,c.isVNode)(i)&&_(i)){if(i.type===c.Fragment){if(n.has(i))continue;n.add(i),r.push({kind:`value`,value:i.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===c.Comment?!1:e.type!==c.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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}},emits:[`update:checked`,`keyup`,`click`],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);function f(){return p(a.default)}let m=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),h=(0,c.computed)(()=>{let{class:e,...t}=i;return Object.assign({},t,{onClick(e){n.disabled||r(`click`,e)},onKeyup(e){r(`keyup`,e),!n.disabled&&e.key===`Enter`&&(r(`click`,e),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])}})});function g(e){let t=e.currentTarget.checked;if(typeof s.value==`boolean`){s.value=t;return}t&&!s.value.includes(n.value)?s.value=[...s.value,n.value]:!t&&s.value.includes(n.value)&&(s.value=(0,d.default)(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)(`span`,y,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.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.createElementVNode)(`input`,(0,c.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:n[0]||=e=>o.value=!0,onFocusout:n[1]||=e=>o.value=!1}),null,16,b)],2)]),f()?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,x,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,S,(0,c.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-a4a2c5fd`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,exports.CheckboxSkeleton=D;
+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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,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");function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let t=new WeakSet,n=new WeakSet,r=[{kind:`value`,value:e}];for(;r.length>0;){let e=r.pop();if(e.kind===`leave-array`){t.delete(e.array);continue}let i=e.value;if(Array.isArray(i)){g(r,i,t);continue}if(typeof i==`string`){if(i.trim()!==``)return!0;continue}if(typeof i==`number`)return!0;if((0,c.isVNode)(i)&&_(i)){if(i.type===c.Fragment){if(n.has(i))continue;n.add(i),r.push({kind:`value`,value:i.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===c.Comment?!1:e.type!==c.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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}},emits:[`update:checked`,`keyup`,`click`],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);function f(){return p(a.default)}let m=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),h=(0,c.computed)(()=>{let{class:e,...t}=i;return Object.assign({},t,{onClick(e){n.disabled||r(`click`,e)},onKeyup(e){r(`keyup`,e),!n.disabled&&e.key===`Enter`&&(r(`click`,e),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])}})});function g(e){let t=e.currentTarget.checked;if(typeof s.value==`boolean`){s.value=t;return}t&&!s.value.includes(n.value)?s.value=[...s.value,n.value]:!t&&s.value.includes(n.value)&&(s.value=(0,d.default)(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)(`span`,y,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.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.createElementVNode)(`input`,(0,c.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:n[0]||=e=>o.value=!0,onFocusout:n[1]||=e=>o.value=!1}),null,16,b)],2)]),f()?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,x,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,S,(0,c.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-feedf857`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,exports.CheckboxSkeleton=D;
 //# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["isVNode","Fragment","Comment","Text","_hoisted_1","useAttrs","_useSlots","ref","computed","without","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","Skeleton","_sfc_main","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","__toESM","mod","isNodeMode","target","vue","_fortawesome_vue_fontawesome","_fortawesome_free_solid_svg_icons","lodash_without_js","_gospore_skeleton","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","pushArray","isRenderableVNode","array","index","node","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","slots","focused","internalChecked","hasDefaultContent","isChecked","attrs","omittedClass","inputAttrs","event","handleChange","checked","_cache","_ctx","_plugin_vue_export_helper_default","sfc","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
+{"version":3,"file":"checkbox.cjs","names":["isVNode","Fragment","Comment","Text","_hoisted_1","useAttrs","_useSlots","ref","computed","without","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","Skeleton","_sfc_main","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","__toESM","mod","isNodeMode","target","vue","_fortawesome_vue_fontawesome","_fortawesome_free_solid_svg_icons","lodash_without_js","_gospore_skeleton","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","pushArray","isRenderableVNode","array","index","node","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","slots","focused","internalChecked","hasDefaultContent","isChecked","attrs","omittedClass","inputAttrs","event","handleChange","checked","_cache","_ctx","_plugin_vue_export_helper_default","sfc","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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":"gvBAsCA,SAAgBqD,EAAyB,EAA8B,CAKnE,OAJKC,EAIEC,EAA0BD,EAAK,CAAC,EAH5B,EAIf,CAEA,SAAgBC,EAA0B,EAA4B,CAClE,OAAOC,EAAsBC,CAAQ,CACzC,CAuCA,SAASD,EAAsB,EAAyB,CACpD,IAAME,EAAe,IAAI,QACnBC,EAAmB,IAAI,QACvBC,EAA0B,CAAC,CAAE,KAAM,QAAS,MAAOC,CAAM,CAAC,EAEhE,KAAOD,EAAM,OAAS,GAAG,CACrB,IAAME,EAAQF,EAAM,IAAI,EACxB,GAAIE,EAAM,OAAS,cAAe,CAC9BJ,EAAa,OAAOI,EAAM,KAAK,EAC/B,QACJ,CAEA,IAAMC,EAAUD,EAAM,MACtB,GAAI,MAAM,QAAQC,CAAO,EAAG,CACxBC,EAAUJ,EAAOG,EAASL,CAAY,EACtC,QACJ,CACA,GAAI,OAAOK,GAAY,SAAU,CAC7B,GAAIA,EAAQ,KAAK,IAAM,GACnB,MAAO,GAEX,QACJ,CACA,GAAI,OAAOA,GAAY,SACnB,MAAO,GAEX,IAAI,EAAC/D,EAAAA,QAAAA,CAAQ+D,CAAO,GAAME,EAAkBF,CAAO,EAGnD,IAAIA,EAAQ,OAAS9D,EAAAA,SAAU,CAC3B,GAAI0D,EAAiB,IAAII,CAAO,EAC5B,SAEJJ,EAAiB,IAAII,CAAO,EAC5BH,EAAM,KAAK,CAAE,KAAM,QAAS,MAAOG,EAAQ,QAAS,CAAC,EACrD,QACJ,CACA,MAAO,EADP,CAEJ,CAEA,MAAO,EACX,CAEA,SAASC,EAAU,EAAyB,EAAkB,EAAkC,CAC5F,GAAI,GAAa,IAAIE,CAAK,EAK1B,CADAR,EAAa,IAAIQ,CAAK,EACtBN,EAAM,KAAK,CAAE,QAAO,KAAM,aAAc,CAAC,EACzC,IAAK,IAAIO,EAAQD,EAAM,OAAS,EAAGC,GAAS,EAAG,IAC3CP,EAAM,KAAK,CAAE,KAAM,QAAS,MAAOM,EAAMC,EAAO,CAAC,CAFZ,CAI7C,CAEA,SAASF,EAAkB,EAAsB,CAO7C,OANIG,EAAK,OAASlE,EAAAA,QACP,GAEPkE,EAAK,OAASjE,EAAAA,MACP,OAAOiE,EAAK,UAAa,UAAYA,EAAK,SAAS,KAAK,IAAM,EAG7E,2bCpGA,IAAMQ,EAAQC,EA4BRC,EAAOH,EACPI,GAAA,EAAe1E,EAAAA,SAAAA,CAAS,EAIxB2E,GAAA,EAAQ1E,EAAAA,SAAAA,CAAA,EAIR2E,GAAA,EAAU1E,EAAAA,IAAAA,CAAI,EAAK,EACnB2E,GAAA,EAAkB3E,EAAAA,IAAAA,CAAqBqE,EAAM,OAAO,EAC1D,SAASO,GAAoB,CACzB,OAAO9B,EAAyB2B,EAAM,OAAO,CACjD,CAEA,IAAMI,GAAA,EAAY5E,EAAAA,SAAAA,KACV,OAAO0E,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASN,EAAM,KAAK,CAExD,EACKS,GAAA,EAAQ7E,EAAAA,SAAAA,KAAe,CACzB,GAAM,CAAE,MAAO8E,EAAc,GAAGC,GAAeR,EAE/C,OAAO,OAAO,OAAO,CAAC,EAAGQ,EAAY,CACjC,QAAQ,EAAmB,CAClBX,EAAM,UACPE,EAAK,QAASU,CAAK,CAE3B,EAEA,QAAQ,EAAsB,CAC1BV,EAAK,QAASU,CAAK,EACf,GAAM,UAGNA,EAAM,MAAQ,UACdV,EAAK,QAASU,CAAK,EACf,OAAON,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASN,EAAM,KAAK,EAC1C,EAAgB,OAAA,EAAQnE,EAAAA,QAAAA,CAAQyE,EAAgB,MAAON,EAAM,KAAK,EAElE,EAAgB,MAAQ,CAAC,GAAGM,EAAgB,MAAON,EAAM,KAAK,EAI9E,CACJ,CAAC,CACL,CAAC,EAED,SAASa,EAAa,EAAc,CAChC,IAAMC,EAAWF,EAAM,cAAmC,QAE1D,GAAI,OAAON,EAAgB,OAAU,UAAW,CAC5C,EAAgB,MAAQQ,EACxB,MACJ,CAEIA,GAAW,CAACR,EAAgB,MAAM,SAASN,EAAM,KAAK,EACtD,EAAgB,MAAQ,CAAC,GAAGM,EAAgB,MAAON,EAAM,KAAK,EACvD,CAACc,GAAWR,EAAgB,MAAM,SAASN,EAAM,KAAK,IAC7D,EAAgB,OAAA,EAAQnE,EAAAA,QAAAA,CAAQyE,EAAgB,MAAON,EAAM,KAAK,EAE1E,QAEA,EAAA5B,EAAA,MAAA,KACU4B,EAAM,QACX,GAAY,CACT,EAAgB,MAAQc,CAC5B,CACJ,GACA,EAAA1C,EAAA,MAAA,KACUkC,EAAgB,UAChB,CAEEA,EAAgB,OAASN,EAAM,SAC/BE,EAAK,iBAAkBI,EAAgB,KAAK,CAEpD,CACJ,WA/JI,EAAAxE,EAAAA,UAAAA,CAAA,GAAA,EAAAC,EAAAA,mBAAAA,CA+BQ,QAAA,CA9BH,OAAA,EAAKC,EAAAA,eAAAA,CAAA,CAAA,WAAA,CAAA,oBAAsCiE,EAAA,QAAQ,GAAIhE,EAAAA,EAAAA,MAAAA,CAAAkE,CAAA,CAAY,CAAC,KAAK,CAAA,EACzE,OAAA,EAAOlE,EAAAA,MAAAA,CAAAkE,CAAA,CAAY,CAAC,KAErBjE,EAAAA,EAAAA,EAAAA,EAAAA,mBAAAA,CAsBO,OAtBPwD,EAsBO,EAAA,EArBHxD,EAAAA,mBAAAA,CAoBO,OAAA,CAnBF,OAAA,EAAKF,EAAAA,eAAAA,CAAA,CAAA,iBAAA,CAA4G,mBAAAwE,EAAA,MAAuD,mBAAAH,EAAA,KAQzKlE,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,EAAAA,EAAAA,YAAAA,EAAAA,EAAoFF,EAAAA,MAAAA,CAAAG,EAAAA,eAAA,EAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAMH,EAAAA,MAAAA,CAAAI,EAAAA,OAAA,EAAS,cAAY,MAC3EH,EAAAA,KAAAA,EAAAA,CAAAA,MAAAA,CAAAA,GAAAA,EAAAA,EAAAA,mBAAAA,CASE,SAAA,EATFI,EAAAA,WAAAA,CACYmE,EAQV,MARe,CACb,KAAK,WACJ,MAAOR,EAAA,MACP,QAASO,EAAA,MACT,SAAUP,EAAA,SACV,SAAQY,EACR,QAAK,AAAAE,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAAA,EAAA,KAAA,GAAE,EAAA,MAAO,EAIlB,CAAA,EAAA,KAAA,GAAApB,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAAAY,EAAiB,IAAA,EAA7BzE,EAAAA,UAAAA,CAAA,GAAA,EAAAC,EAAAA,mBAAAA,CAEO,OAFP6D,EAEO,EAAA,EADHrD,EAAAA,WAAAA,CAAQyE,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAEZlF,EAAAA,UAAAA,CAAA,GAAA,EAAAC,EAAAA,mBAAAA,CAAsD,OAAtD8D,GAAA,EAAsDrD,EAAAA,gBAAAA,CAAfyD,EAAA,KAAK,EAAA,CAAA,EAAA,EAAA,GAAAR,CAAA,+UE9BhD,EAAA/C,EAAAA,UAAAA,CAAA,GAAA,EAAAC,EAAAA,mBAAAA,CAQM,MARN0E,EAQM,EAAA,EAPFzE,EAAAA,YAAAA,EAAAA,EAKEC,EAAAA,MAAAA,CAAAC,EAAAA,QAAA,EAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAASmD,EAAA,OAEdrD,EAAAA,KAAAA,EAAAA,CAAAA,SAAAA,CAAAA,GAAAA,EAAAA,EAAAA,YAAAA,EAAAA,EAA2EC,EAAAA,MAAAA,CAAAC,EAAAA,QAAA,EAAA,CAAhE,MAAOmD,EAAA,WAAY,OAAO,iBAAkB,QAASA,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-brand-on-strong-light);--checkbox-color-checked-active-dark:var(--color-brand-on-strong-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:background-color var(--transition-100ms-ease-in-out), border-color var(--transition-100ms-ease-in-out), color 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-a4a2c5fd]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-a4a2c5fd]{padding:5px}.checkbox .checkbox-input[data-v-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-a4a2c5fd],.checkbox-disabled:hover .checkbox-input[data-v-a4a2c5fd]{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-a4a2c5fd],.checkbox-disabled:hover .checkbox-checked[data-v-a4a2c5fd]{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-a4a2c5fd]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-a4a2c5fd]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-a4a2c5fd]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-a4a2c5fd]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{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-a4a2c5fd]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-a4a2c5fd],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-a4a2c5fd]{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-a4a2c5fd],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-a4a2c5fd]{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-a4a2c5fd]{border-color:var(--checkbox-focus-outline-color-dark)!important}.checkbox-skeleton[data-v-472ff734]{align-items:center;gap:var(--size-8);display:inline-flex}
+.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-brand-on-strong-light);--checkbox-color-checked-active-dark:var(--color-brand-on-strong-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:--checkbox-animated-background var(--transition-100ms-ease-in-out), border-color var(--transition-100ms-ease-in-out), color 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)}@property --checkbox-animated-background{syntax:"<color>";inherits:false;initial-value:#0000}.checkbox[data-v-feedf857]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-feedf857]{padding:5px}.checkbox .checkbox-input[data-v-feedf857]{height:var(--checkbox-height);width:var(--checkbox-width);box-sizing:border-box;border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid;--checkbox-animated-background:var(--checkbox-background-default-default-light);background-color:var(--checkbox-animated-background);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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-feedf857],.checkbox-disabled:hover .checkbox-input[data-v-feedf857]{--checkbox-animated-background: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-feedf857],.checkbox-disabled:hover .checkbox-checked[data-v-feedf857]{--checkbox-animated-background: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-feedf857]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-feedf857]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-feedf857]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-feedf857]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{--checkbox-animated-background: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-feedf857]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-feedf857],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-feedf857]{--checkbox-animated-background: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-feedf857],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-feedf857]{--checkbox-animated-background: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-feedf857]{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

@@ -155,7 +155,7 @@ var O = ["title"], k = { class: "checkbox-input-container" }, A = [
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, F = /*#__PURE__*/ P(N, [["__scopeId", "data-v-a4a2c5fd"]]), I = { class: "checkbox-skeleton" }, L = /*#__PURE__*/ P(/* @__PURE__ */ s({
+}, F = /*#__PURE__*/ P(N, [["__scopeId", "data-v-feedf857"]]), I = { class: "checkbox-skeleton" }, L = /*#__PURE__*/ P(/* @__PURE__ */ s({
 	name: "CheckboxSkeleton",
 	__name: "CheckboxSkeleton",
 	props: {

package/dist/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","names":["_hoisted_1","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","_sfc_main","without","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","isVNode","isRenderableVNode","Fragment","pushArray","array","index","node","Comment","Text","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","hasDefaultContent","isChecked","computed","attrs","omittedClass","inputAttrs","event","handleChange","checked","watch","openBlock","createElementBlock","normalizeClass","unref","createElementVNode","createVNode","FontAwesomeIcon","faCheck","mergeProps","_cache","renderSlot","_ctx","toDisplayString","_plugin_vue_export_helper_default","target","sfc","key","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default","defineComponent","Skeleton"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
+{"version":3,"file":"checkbox.es.js","names":["_hoisted_1","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","_sfc_main","without","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","isVNode","isRenderableVNode","Fragment","pushArray","array","index","node","Comment","Text","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","hasDefaultContent","isChecked","computed","attrs","omittedClass","inputAttrs","event","handleChange","checked","watch","openBlock","createElementBlock","normalizeClass","unref","createElementVNode","createVNode","FontAwesomeIcon","faCheck","mergeProps","_cache","renderSlot","_ctx","toDisplayString","_plugin_vue_export_helper_default","target","sfc","key","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default","defineComponent","Skeleton"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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":"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"}

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"),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||!d.call(e,`default`)?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let n=new WeakSet,r=new WeakSet,i=[{kind:`value`,value:e}];for(;i.length>0;){let e=i.pop();if(e.kind===`leave-array`){n.delete(e.array);continue}let a=e.value;if(Array.isArray(a)){g(i,a,n);continue}if(typeof a==`string`){if(a.trim()!==``)return!0;continue}if(typeof a==`number`)return!0;if((0,t.isVNode)(a)&&_(a)){if(a.type===t.Fragment){if(r.has(a))continue;r.add(a),i.push({kind:`value`,value:a.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===t.Comment?!1:e.type!==t.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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}},emits:[`update:checked`,`keyup`,`click`],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);function f(){return p(l.default)}let m=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),h=(0,t.computed)(()=>{let{class:e,...t}=c;return Object.assign({},t,{onClick(e){o.disabled||s(`click`,e)},onKeyup(e){s(`keyup`,e),!o.disabled&&e.key===`Enter`&&(s(`click`,e),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])}})});function g(e){let t=e.currentTarget.checked;if(typeof d.value==`boolean`){d.value=t;return}t&&!d.value.includes(o.value)?d.value=[...d.value,o.value]:!t&&d.value.includes(o.value)&&(d.value=(0,i.default)(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)(`span`,y,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.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.createElementVNode)(`input`,(0,t.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:a[0]||=e=>u.value=!0,onFocusout:a[1]||=e=>u.value=!1}),null,16,b)],2)]),f()?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,x,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,S,(0,t.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-a4a2c5fd`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,e.CheckboxSkeleton=D});
+(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||!d.call(e,`default`)?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let n=new WeakSet,r=new WeakSet,i=[{kind:`value`,value:e}];for(;i.length>0;){let e=i.pop();if(e.kind===`leave-array`){n.delete(e.array);continue}let a=e.value;if(Array.isArray(a)){g(i,a,n);continue}if(typeof a==`string`){if(a.trim()!==``)return!0;continue}if(typeof a==`number`)return!0;if((0,t.isVNode)(a)&&_(a)){if(a.type===t.Fragment){if(r.has(a))continue;r.add(a),i.push({kind:`value`,value:a.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===t.Comment?!1:e.type!==t.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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}},emits:[`update:checked`,`keyup`,`click`],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);function f(){return p(l.default)}let m=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),h=(0,t.computed)(()=>{let{class:e,...t}=c;return Object.assign({},t,{onClick(e){o.disabled||s(`click`,e)},onKeyup(e){s(`keyup`,e),!o.disabled&&e.key===`Enter`&&(s(`click`,e),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])}})});function g(e){let t=e.currentTarget.checked;if(typeof d.value==`boolean`){d.value=t;return}t&&!d.value.includes(o.value)?d.value=[...d.value,o.value]:!t&&d.value.includes(o.value)&&(d.value=(0,i.default)(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)(`span`,y,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.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.createElementVNode)(`input`,(0,t.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:a[0]||=e=>u.value=!0,onFocusout:a[1]||=e=>u.value=!1}),null,16,b)],2)]),f()?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,x,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,S,(0,t.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-feedf857`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,e.CheckboxSkeleton=D});
 //# sourceMappingURL=checkbox.umd.js.map

package/dist/checkbox.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.umd.js","names":["isVNode","Fragment","Comment","Text","_hoisted_1","useAttrs","_useSlots","ref","computed","without","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","Skeleton","_sfc_main","factory","global","exports","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","mod","isNodeMode","target","lodash_without_js","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","pushArray","vue","isRenderableVNode","array","index","node","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","slots","focused","internalChecked","hasDefaultContent","isChecked","attrs","omittedClass","inputAttrs","event","handleChange","checked","_fortawesome_vue_fontawesome","_fortawesome_free_solid_svg_icons","_cache","_ctx","_plugin_vue_export_helper_default","sfc","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default","_gospore_skeleton"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
+{"version":3,"file":"checkbox.umd.js","names":["isVNode","Fragment","Comment","Text","_hoisted_1","useAttrs","_useSlots","ref","computed","without","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","_renderSlot","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","Skeleton","_sfc_main","factory","global","exports","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","mod","isNodeMode","target","lodash_without_js","hasRenderableSlotContent","slot","hasRenderableVNodeContent","isRenderableSlotChild","children","activeArrays","visitedFragments","stack","child","entry","current","pushArray","vue","isRenderableVNode","array","index","node","_hoisted_1$1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Checkbox_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","defaultAttrs","slots","focused","internalChecked","hasDefaultContent","isChecked","attrs","omittedClass","inputAttrs","event","handleChange","checked","_fortawesome_vue_fontawesome","_fortawesome_free_solid_svg_icons","_cache","_ctx","_plugin_vue_export_helper_default","sfc","val","Checkbox_default","_hoisted_1","CheckboxSkeleton_default","_gospore_skeleton"],"sources":["../../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n    const nodes: VNode[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (!isVNode(child) || !isRenderableVNode(child)) {\n            continue;\n        }\n        if (child.type === Fragment && Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n            continue;\n        }\n        nodes.push(child);\n    }\n\n    return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n    if (!slot) {\n        return false;\n    }\n\n    return hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n    return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n    const chunks: string[] = [];\n    const activeArrays = new WeakSet<unknown[]>();\n    const stack: TraversalEntry[] = [];\n    pushArray(stack, children as unknown[], activeArrays);\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const child = entry.value;\n        if (Array.isArray(child)) {\n            pushArray(stack, child, activeArrays);\n            continue;\n        }\n        if (typeof child === \"string\" || typeof child === \"number\") {\n            chunks.push(String(child));\n            continue;\n        }\n        if (!isVNode(child) || child.type === Comment) {\n            continue;\n        }\n        if (typeof child.children === \"string\") {\n            chunks.push(child.children);\n            continue;\n        }\n        if (Array.isArray(child.children)) {\n            pushArray(stack, child.children, activeArrays);\n        }\n    }\n\n    return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n    const activeArrays = new WeakSet<unknown[]>();\n    const visitedFragments = new WeakSet<VNode>();\n    const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n    while (stack.length > 0) {\n        const entry = stack.pop()!;\n        if (entry.kind === \"leave-array\") {\n            activeArrays.delete(entry.array);\n            continue;\n        }\n\n        const current = entry.value;\n        if (Array.isArray(current)) {\n            pushArray(stack, current, activeArrays);\n            continue;\n        }\n        if (typeof current === \"string\") {\n            if (current.trim() !== \"\") {\n                return true;\n            }\n            continue;\n        }\n        if (typeof current === \"number\") {\n            return true;\n        }\n        if (!isVNode(current) || !isRenderableVNode(current)) {\n            continue;\n        }\n        if (current.type === Fragment) {\n            if (visitedFragments.has(current)) {\n                continue;\n            }\n            visitedFragments.add(current);\n            stack.push({ kind: \"value\", value: current.children });\n            continue;\n        }\n        return true;\n    }\n\n    return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n    if (activeArrays.has(array)) {\n        return;\n    }\n\n    activeArrays.add(array);\n    stack.push({ array, kind: \"leave-array\" });\n    for (let index = array.length - 1; index >= 0; index -= 1) {\n        stack.push({ kind: \"value\", value: array[index] });\n    }\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n    if (node.type === Comment) {\n        return false;\n    }\n    if (node.type === Text) {\n        return typeof node.children === \"string\" && node.children.trim() !== \"\";\n    }\n    return true;\n}\n","<template>\n    <label\n        :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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        <span 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                    type=\"checkbox\"\n                    :value=\"value\"\n                    :checked=\"isChecked\"\n                    :disabled=\"disabled\"\n                    @change=\"handleChange\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </span>\n        <span v-if=\"hasDefaultContent()\" class=\"checkbox-label\">\n            <slot />\n        </span>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, 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\";\nimport { hasRenderableSlotContent } from \"../../../shared/slot\";\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<{\n    \"update:checked\": [value: CheckboxChecked];\n    keyup: [event: KeyboardEvent];\n    click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n    class?: unknown;\n    title?: string;\n};\nconst slots = defineSlots<{\n    /** Custom label content rendered next to the checkbox input. */\n    default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nfunction hasDefaultContent() {\n    return hasRenderableSlotContent(slots.default);\n}\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        onClick(event: MouseEvent) {\n            if (!props.disabled) {\n                emit(\"click\", event);\n            }\n        },\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event: KeyboardEvent) {\n            emit(\"keyup\", event);\n            if (props.disabled) {\n                return;\n            }\n            if (event.key === \"Enter\") {\n                emit(\"click\", event);\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\nfunction handleChange(event: Event) {\n    const checked = (event.currentTarget as HTMLInputElement).checked;\n\n    if (typeof internalChecked.value === \"boolean\") {\n        internalChecked.value = checked;\n        return;\n    }\n\n    if (checked && !internalChecked.value.includes(props.value)) {\n        internalChecked.value = [...internalChecked.value, props.value];\n    } else if (!checked && internalChecked.value.includes(props.value)) {\n        internalChecked.value = without(internalChecked.value, props.value);\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        --checkbox-animated-background: var(--checkbox-background-default-default-light);\n        background-color: var(--checkbox-animated-background);\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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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        --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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            --checkbox-animated-background: 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":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@gospore/checkbox",
-    "version": "1.0.72",
-    "gitHead": "42d3226a22b01ff5bb32518c05a1ec0434a288de",
+    "version": "1.0.73",
+    "gitHead": "ad4aad0acc65183ee50228bf9d9bcd49100b3d31",
     "description": "",
     "author": "Gospore",
     "files": [